Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Sicherheitshinweis ---> für registrierte Mitglieder <-
div Container dem Browser Fenster anpassen
zurück: Formular und Kalender weiter: Gildgröße in % wenn Höhe größer als 1200px Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Neue Antwort erstellen     Status: Antwort Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
Sugarfree
Im Profil kannst Du frei den Rang ändern


Verfasst am:
13. Apr 2011, 08:16
Rufname:

div Container dem Browser Fenster anpassen - div Container dem Browser Fenster anpassen

Nach oben
       

Guten Morgen,

wir müssen in der Schule eine kleine Seite gestalten, Aufgabe ist es 3 Bilder mit Unterschriften einzubinden.
Diese sollen über div container eingefügt werden und immer zentriert vom Browser Fenster angezeigt werden.
Meine Frage wie bekomme ich das hin das wenn ich das Browser Fenster verkleiner das es immer mittig ist und sich der größe anpasst!
Vielen Dank im Voraus.
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
13. Apr 2011, 11:34
Rufname:
Wohnort: Aachen


AW: div Container dem Browser Fenster anpassen - AW: div Container dem Browser Fenster anpassen

Nach oben
       

Hallo Sugarfree,

das sind zwei Anforderungen auf einmal, die sich nicht so einfach miteinander vereinbaren lassen. Ich nehme mal an, ihr sollt das Problem mit CSS lösen. Wenn der Container eine feste Größe hat, so ist die folgende Lösung praktikabel:
Code:
#meindiv{
position: absolute;
top: 50%;
left: 50%;
width: X;
height: Y;
margin-left: -0.5X;
margin-top: -0.5Y;
}

Das Problem bei einer variablen Größe des Divs ist schlicht, dass CSS nicht berechnen kann, wie breit die Ränder bei veränderter Größe des Divs sind. Du könntest die position: absolut; herausnehmen und es mit margin:auto; versuchen, wobei für den (älteren) IE dem übergeordneten Element (body oder div) einen text-align: center; verpassen solltest. Hast du einen strikten Doctype, ist das auch nicht mehr nötig. Dies nur mal so als Anregung, ich möchte dir ja nicht das Knobeln an der Aufgabe verderben. Wink

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
Sugarfree
Im Profil kannst Du frei den Rang ändern


Verfasst am:
13. Apr 2011, 12:53
Rufname:

AW: div Container dem Browser Fenster anpassen - AW: div Container dem Browser Fenster anpassen

Nach oben
       

Sugarfree am 13. Apr 2011 um 12:49 hat folgendes geschrieben:
so ansich glaub ich funktioniert das =) ich kenn mich überhaupt nicht mit html aus, deswegen is das alles ein bissl schwierig und ich weiß nich genau wie ich das alles umsetzen soll am besten..
der div container soll eigentlich aus drei weiteren divs untereinander bestehen, in den obersten soll ne überschrift in den zweiten ein bild und in den dritten eine beschreibung und das alles zentriert aber das klappt bei mir alles nich so, die schrift is immer linksbündig oder fängt in der mitte an und geht nach rechts weiter Sad

vllt zur Veranschaulichung wie unser Lehrer sich das vorstellt mal seine Screenshots =)
vllt kann mir dann wer weiterhelfen



scrennshots_autohaus.docx
 Beschreibung:

Download
 Dateiname:  scrennshots_autohaus.docx
 Dateigröße:  768.01 KB
 Heruntergeladen:  87 mal

womaninweb
(X)HTML und CSS Junkie


Verfasst am:
13. Apr 2011, 14:31
Rufname:
Wohnort: Aachen

AW: div Container dem Browser Fenster anpassen - AW: div Container dem Browser Fenster anpassen

Nach oben
       

Hallo Sugarfree,

vielleicht kannst du mal deinen bisherigen Versuch hier posten. Dann kann man sich ein Bild machen, wo es bei dir in der Umsetzung hakt.

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
Gast



Verfasst am:
14. Apr 2011, 09:29
Rufname:

AW: div Container dem Browser Fenster anpassen - AW: div Container dem Browser Fenster anpassen

Nach oben
       

Gast am 14. Apr 2011 um 09:25 hat folgendes geschrieben:
so hie einma der code für die Hauptseite, da habe ich auch noch versucht ein mouseover zu gestalten aber klappt auch nich so wie es soll....ich wollte das beim mouseover das bild einfach im vordergrund vergrößert angezeigt wird...größer wird es gemacht aber dann verschieben sich alle anderen sachen auch und das soll nich so sein =)
Code:
<html>

<head>

   <title>exclusive cars</title>

   <style type="text/css">

      .alles {position:absolute;top:30%;left:20%;width:100%;text-align:margin-top:-50px;margin-left:-150px;center;width:1100px;}
      .inhalt {align:center;font-family:verdana;font-size:20px;font-weight:bold;color:ffffff;margin:15px;width:190px;}
      .container {float:left;}
      .ueberschrift {font-family:verdana;font-size:36px;color:ffffff;margin:10px;}

      img {border:none}
      a:link{color:#EEEEEE;text-decoration:none}
      a:visited{color:#CCCCCC;text-decoration:none}
      a:hover{color:#BBBBBB;text-decoration:none}
      a:active{color:#CCCCCC;text-decoration:none}
      
    </style>

</head>

<body style="background-image:url(line4.gif);">

   <div style="position:absolute; left 10px; top=20px;"> <img src="ec.gif" width="150px" height="150px"> </div>

   <div style="position:absolute; right:10px; top=20px;"> <div class="ueberschrift">exclusive cars </div></div>

<div id="horizon">
    <div id="wrapper">

   <div class="alles">

      <div class="container">
         <div class="inhalt"><a href="G:\Fachschule\WI\HTML\Exclusive Cars\m3.html"><img src="m32.jpg" onmouseover="(width='640', height='480')" onmouseout="(width='320', height='240')" border="0" title="BMW M3";></a></div>
         <div class="inhalt" ><a href="G:\Fachschule\WI\HTML\Exclusive Cars\m3.html">BMW M3</a></div>
      </div>

      <div class="container">
         <div class="inhalt"><a href="G:\Fachschule\WI\HTML\Exclusive Cars\z4.html"><img src="z42.jpg" title="BWM Z4";></a></div>
         <div class="inhalt" ><a href="G:\Fachschule\WI\HTML\Exclusive Cars\z4.html">BMW Z4</a></div>
      </div>

      <div class="container">
         <div class="inhalt"><a href="G:\Fachschule\WI\HTML\Exclusive Cars\boxster.html"><img src="boxster2.jpg" title="Porsche Boxster";></a></div>
         <div class="inhalt"><a href="G:\Fachschule\WI\HTML\Exclusive Cars\boxster.html">Porsche Boxster</a></div>
      </div>

   </div>

</div></div>

<div style="position:absolute; left:50%; bottom:50px; "> <a href="mailto:info@exclusive-cars.de"> <img src="email.gif" width="50" height="50" alt="Em@il us"> </a> </div>

</body>

</html>

Gast am 14. Apr 2011 um 09:28 hat folgendes geschrieben:
bei den unterseiten habe ich es dann ma mit ner tabelle versucht aber klappt auch alles nich so mit dem ausrichten wie es sein soll Sad
Code:
<html>

<head>

   <title>exclusive cars</title>

   <style type="text/css">

      .alles {margin:auto;top: 50%;left: 50%;width: X;height: Y;margin-left: -0.5X;margin-top:200px;text-align:center;}
      .inhalt {align:center-center;font-family:verdana;font-size:14px;font-weight:bold;color:ffffff;margin:15px;width:190px;}
      .beschreibung {align:center;font-family:verdana;font-size:14px;font-weight:bold;color:ffffff;}
      .container {float:left;}
      .ueberschrift {font-family:verdana;font-size:30px;color:ffffff;margin:10px;}

      img {border:none}
      a:link{color:#EEEEEE;text-decoration:none}
      a:visited{color:#CCCCCC;text-decoration:none}
      a:hover{color:#BBBBBB;text-decoration:none}
      a:active{color:#CCCCCC;text-decoration:none}

      table    {font-family:calibri;font-size:12px:border-style:border-width:1px;}
      td   {padding:10px;}
      
    </style>

</head>

<body style="background-image:url(line4.gif);">

   <div style="position:absolute; left 10px; top=20px;"> <img src="ec.gif" width="150px" height="150px"> </div>

   <div style="position:absolute; right:10px; top=20px;"> <div class="ueberschrift">exclusive cars </div></div>

   <div class="alles">

   <table>

   <tr> <td> <div class="ueberschrift"> Porsche Boxster </div></td> </tr>
   <tr> <td> <img src="boxster2.jpg" title="Porsche Boxster";></td> </tr></table></div>
   <h1>  Porsche Boxster Cabrio - Lederausstattung - Xenonlicht - Sportpaket - </h1>

<div style="position:absolute; left:50%; bottom:50px; "> <a href="G:\Fachschule\WI\HTML\Exclusive Cars\autos3.html"> <img src="ec1.gif" width="50" height="50" alt="Zurück zur Übersicht"> </a> </div>

</body>

</html>

und bitte nicht wundern wenn da evtl nur fehler drinne sind =)
wir haben im unterricht ein paar ganz einfache standard sachen gemacht wie schriftformatierungen und jetz hat der lehrer gesagt, macht ma tüftelt ma rum....uns gesagt das wir das mit 3 div containern machen sollen und das wars Sad
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
14. Apr 2011, 16:23
Rufname:
Wohnort: Aachen


AW: div Container dem Browser Fenster anpassen - AW: div Container dem Browser Fenster anpassen

Nach oben
       

Hallo Sugarfree,

grundsätzlich hat dein Lehrer schon recht, dass du im Inhalt mit drei Containern auskommst. was den rest angeht, so weiss ich es nicht. Aber fangen wir erstmal am Anfang und bei der Startseite an.

Als Erstes vermisse ich eine anständige Dokumenttyp-Deklaration.
Als Nächstes geht es an die Style-Sheets, die häufig nicht richtig beendet sind, d.h. es fehlt ein Semikolon am Ende der Anweisung. Farbwerte werden mit einer Raute eingeleitet. Einige Anweisungen sind abgehackt, da hast du wohl einen Umbruch gemacht und Neues eingefügt. Da muss mal ordentlich aufgeräumt werden. Dann wird erstmal der body in CSS formatiert (Hintergrundfarbe, Hintergrundbild, grundsätzliche Schriftfamilie und -größe). Den Rest lassen wir erstmal so stehen, auch wenn es nicht wirklich richtig ist.

Die ersten beiden Divs kann man auch mal so stehen lassen, jedoch solltest du in dem zweiten (mit der Überschrift) statt des inneren divs einen span verwenden.
Code:
<div style="position:absolute; right:10px; top=20px;"><span class="ueberschrift">Exclusive Cars</span></div>
So, und nun kommt der Container-Div. Da muss man ein wenig rechnen, denn um den horizontal zentriert hinzubekommen, braucht er eine feste Breite. Dabei gehen wir mal von den Bildern aus. Angenommen jedes Bild hat eine Breite von 320 Pixel, so kommen insgesamt 960 Pixel zusammen. Nun brauchen die Bilder aber auch einen seitlichen Abstand zueinander. Da nehmen wir mal 20 Pixel Abstand an. Damit es nachher leichter zu verteilen ist, hat jedes Bild rechts und links 10 Pixel Rand. Insgesamt kommen wir auf 6x10 Pixel = 60 Pixel, plus der 960 Pixel der Bilder sind es zusammen 1020 Pixel. Diesen Container gibt es nur einmal, deswegen bekommt er eine ID (also die Raute vorneweg).
Code:
#wrapper {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -510px;
   width: 1020px;
}
Wie du siehst, habe ich die Anweisungen untereinander aufgelistet. Bei mehreren Anweisungen ist es am Anfang übersichtlicher, diese untereinander zu schreiben. In diesen Hauptcontainer setzen wir drei weitere Divs. Da Divs Blockelemente sind, positionieren die sich automatisch untereinander, d.h. in eine neue Zeile. Diese drei Divs müssen nicht weiter formatiert werden. Für die Bilder Div 1) und die Bildunterschriften (Div 3) würde ich zum Positionieren unsortierte Listen (<ul>)verwenden. Allerdings ist das schon ein wenig trickreich, weil die Liste und die Listenelemente entsprechend so formatiert werden müssen, dass sie nicht untereinander, sondern nebeneinander positioniert werden. Alternativ könnte man auch eine Tabelle nehmen. Der mittlere Div enthält eine Grafik der Linie. Mit Außenabständen (margin) kannst du den nötigen Abstand nach oben und unten einstellen.

Das wäre so im Groben meine Lösung des Layouts. Und damit du auch noch was zu lernen hast, hier noch drei Empfehlungen:
Grundlagen in XHTML und CSS als Workshop, hier im Forum, Kapitel 2 und Kapitel 4, die Umsetzung in Kapitel 5.
CSS-Referenz und Workshop bei CSS 4 You
und der Klassiker der HTML-Referenz: selfHTML

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
Neues Thema eröffnen   Neue Antwort erstellen Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Keine neuen Beiträge HTML & CSS Forum: Frage: <div>tabelle</div> statt <Frame>tab 0 Resool 273 24. Feb 2014, 18:07
Resool Frage: <div>tabelle</div> statt <Frame>tab
Keine neuen Beiträge MS Expression Web Forum: Seite an Browsergrösse anpassen. 6 beat78 4290 31. Jul 2013, 08:18
beat78 Seite an Browsergrösse anpassen.
Keine neuen Beiträge Macromedia Dreamweaver Forum: Vorschau im Browser geht nicht 4 Simply 1465 13. März 2012, 14:36
Simply Vorschau im Browser geht nicht
Keine neuen Beiträge HTML & CSS Forum: Win Gadget Frameset öffnet im neuen Fenster, nicht im selben 0 Bonkers 1461 18. Jan 2012, 23:50
Bonkers Win Gadget Frameset öffnet im neuen Fenster, nicht im selben
Keine neuen Beiträge MS Expression Web Forum: schrift im browser verschoben 1 lisameinengel 1518 27. März 2011, 20:45
womaninweb schrift im browser verschoben
Keine neuen Beiträge PHP & JavaScript Forum: Website anpassen 0 silex1 595 11. März 2011, 14:24
silex1 Website anpassen
Keine neuen Beiträge HTML & CSS Forum: Bilderleiste zum scrollen / Nach klick neues Fenster 1 Maik80 1627 23. Feb 2011, 18:24
maninweb Bilderleiste zum scrollen / Nach klick neues Fenster
Keine neuen Beiträge Macromedia Dreamweaver Forum: Spy-Menüleiste anpassen 5 manuel_bo 1629 28. Dez 2010, 15:13
womaninweb Spy-Menüleiste anpassen
Keine neuen Beiträge Frontpage Forum: PopUp-Fenster-Größe automatisch anpassen 8 Gast 14776 08. Jul 2010, 15:31
maninweb PopUp-Fenster-Größe automatisch anpassen
Keine neuen Beiträge Macromedia Dreamweaver Forum: Flash wird im Browser nicht angezeigt 1 Gast 3340 25. Aug 2008, 20:52
maninweb Flash wird im Browser nicht angezeigt
Keine neuen Beiträge Frontpage Forum: neues fenster soll öffnen 2 Gast 804 15. Jan 2008, 15:27
Gast neues fenster soll öffnen
Keine neuen Beiträge Macromedia Dreamweaver Forum: Webseite stimmt mit Adresse im Browser nicht überein 2 VolkerK 1403 11. Sep 2007, 20:22
Gast Webseite stimmt mit Adresse im Browser nicht überein
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: HTML CSS