tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
291
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 17.09.11 22:08 #1
    joerg2011 joerg2011 ist offline Grünschnabel
    Registriert seit
    Sep 2011
    Beiträge
    1
    Hallo,
    ich möchte ein einfaches CSS-Layout (mit Kompozer) erstellen mit Header, Menu und Content, wobei Menu und Content nebeneinander unter dem Header stehen. Menu und Content habe ich mit px- Werten in der Breite definiert. Wenn ich dem Menu einen Rahmen (border) gebe, verrutscht der Content nach unten, wenn ich im Browser die Ansicht kleiner zoome. Woran liegt das?

    Vielen Dank für Antworten!

    Hier mein Code:

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>testseite</title><style type="text/css">
#header {
  border: 1px solid #990000;
  width: 948px;
  height: 98px;
}
#menu {
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  border-bottom: 1px solid #990000;
  width: 198px;
  float: left;
  min-height: 400px;
}
#content {
  width: 750px;
  float: left;
  min-height: 400px;
  background-color: white;
}

</style></head><body style="width: 950px; margin-right: auto; margin-left: auto;">
<div id="header">Header<br>
</div>
<div id="menu">Menu</div>
<div id="content">Content</div>


</body></html>
     
    Zitieren Zitieren
  2. 19.09.11 11:04 #2
    CPoly CPoly ist offline Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Der Rahmen kann schlecht kleiner als 1 Pixel werden. Die Breite der Kästen kann aber frei gezoomt werden. In Summe überschreitet dann die Breite + Rahmen die Gesamtbreite.

    Habe deinen Code mal angepasst, so wie man das zwei Spalten Layout normalerweise aufbaut. Nur ein paar kleine Änderungen am CSS und schon ist dein Problem auch nicht mehr da.

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>testseite</title><style type="text/css">
#header {
  border: 1px solid #990000;
  width: 948px;
  height: 98px;
}

#menu {
  border: 1px solid #990000;
  border-top:none;
  width: 198px;
  float: left;
  min-height: 400px;
}

#content {
  padding-left:200px;
  width: 750px;
  min-height: 400px;
  background-color: white;
}

</style></head><body style="width: 950px; margin-right: auto; margin-left: auto;">
<div id="header">Header<br>
</div>
<div id="menu">Menu</div>
<div id="content">Content</div>


</body></html>
     
    Zitieren Zitieren
« Text neben Bild fließen aber mit div-container/HTML-Code in CSS umwandeln | Bildebene nach untern verschieben »

Ähnliche Themen

  1. [tabelle] Spalten verrutschen manchmal
    Von alex130 im Forum CSS
    Antworten: 4
    Letzter Beitrag: 15.10.08, 18:46
  2. Navigation und Content Bereich verrutschen im IE
    Von alex130 im Forum HTML & XHTML
    Antworten: 1
    Letzter Beitrag: 18.09.08, 12:12
  3. Navigation und Content Bereich verrutschen im IE
    Von alex130 im Forum CSS
    Antworten: 1
    Letzter Beitrag: 18.09.08, 12:12
  4. Div's verrutschen
    Von alex130 im Forum CSS
    Antworten: 2
    Letzter Beitrag: 28.08.08, 08:57
  5. Ebenen verrutschen im MAC
    Von medici im Forum HTML-Editoren
    Antworten: 2
    Letzter Beitrag: 02.03.04, 23:29

Stichworte