Layout Probleme... CSS-Freaks an die Front!!!
Daniel
- css
Hallo,
hab vor ein paar Tagen schonmal gepostet.
Habe ein Problem mit dem Layout.
Das Menü ragt unten aus dem globalcontainer raus.
Hier der Html-Quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<title>musicfields</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="xtra/main.css">
</head>
<body>
<div id="globalcontainer">
<div id="title">
<img src="gfx/logo_01.jpg" id="logo" alt="" />
</div>
<div id="navitop">
<a href="#" target="_self">Startseite</a>::<a href="#" target="_self">Über Musicfields</a>::<a href="#" target="_self">Hilfe & Kontakt</a>::<a href="#" target="_self">Künstlereingang</a>
</div>
<div id="menueleft">
<a href="#" target="_self">Rock & Pop</a>
<a href="#" target="_self">Rock & Pop</a>
<p class="menuetitle"> </p>
</div>
<div id="content">
</div>
</div>
</body>
</html>
HIER DAS STYLESHEET:
body {
font-family: Verdana;
font-size: 12px;
background-color: #CCCCCC;
text-align: center;
margin: 0px;
}
#globalcontainer {
text-align: left;
margin: 0px auto;
padding: 0px;
width: 780px;
background-color: #FFFFFF;
border-style: solid;
border-width: 1px;
border-color: #000000;
}
#title {
background-color: #CCCCCC;
background-image: url(../gfx/bg_head.gif);
background-repeat: repeat-x;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
}
#logo {
width: 294px;
height: 71px;
}
#navitop {
height: 15px;
background-color: #CCCCCC;
background-image: url(../gfx/bg_leiste.gif);
background-repeat: repeat-x;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
font-size: 10px;
font-weight: bold;
vertical-align: middle;
text-align: right;
color: #000000;
}
#navitop a:link {
font-weight: bold;
color: #000000;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
#navitop a:visited {
font-weight: bold;
color: #000000;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
#navitop a:hover {
font-weight: bold;
color: #2A3FFF;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
#navitop a:active {
font-weight: bold;
color: #2A3FFF;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
#menueleft {
width: 160px;
float: left;
background-color: #CCCCCC;
background-image: url(../gfx/bg_menue.gif);
background-repeat: repeat-y;
font-size: 10px;
font-weight: bold;
vertical-align: middle;
text-align: left;
color: #000000;
}
.menuetitle {
height: 15px;
background-color: #CCCCCC;
background-image: url(../gfx/bg_leiste.gif);
background-repeat: repeat-x;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
padding: 0px;
margin: 0px;
}
#menueleft a:link {
display: block;
vertical-align: middle;
font-weight: bold;
color: #000000;
text-decoration: none;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
}
#menueleft a:visited {
font-weight: bold;
color: #000000;
text-decoration: none;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
}
#menueleft a:hover {
font-weight: bold;
color: #2A3FFF;
text-decoration: none;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
}
#menueleft a:active {
font-weight: bold;
color: #2A3FFF;
text-decoration: none;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
}
#content {
width: 620px;
}
BITTE UM HILFE!!! ICH VERZWEIFLE
Hallo Daniel!
Das Menü ragt unten aus dem globalcontainer raus.
Hier der Html-Quelltext:
[...]
HIER DAS STYLESHEET:
[...]
BITTE UM HILFE!!! ICH VERZWEIFLE
Weniger ist manchmal mehr.
Wie wärs denn, wenn Du Deine Seite einfach verlinkst, dann würde sich vielleicht auch irgendjemand das mal anschauen.
Aber ich les mir doch nicht im Forum irgendwelche ewig langen Quelltexte durch.
MfG
Götz
ok hier die url des HTML-Quelltextes:
http://test.rockload.de/main_ger.html
und der STYLESHEET:
http://test.rockload.de/xtra/main.css
Hallo Daniel!
ok hier die url des HTML-Quelltextes:
http://test.rockload.de/main_ger.html
und der STYLESHEET:
http://test.rockload.de/xtra/main.css
Du meintest bestimmt http://test.rockload.de/main_ger.html und http://test.rockload.de/xtra/main.css, oder?
(Naja, Copy&Paste geht auch, aber anständige Links sind benutzbarer finde ich)
Aber genau das meinte ich ;)
Vielleicht bringt es was, wenn Du beiden "Spalten" ne min-height gibst.
Ansonsten frag ich mich: Ist das überhaupt wichtig, denn wenn im Inhaltsfeld mehr als 2-3 Zeilen stehen sollte das Problem in der Form ja nicht mehr auftreten, oder?
MfG
Götz
Ansonsten frag ich mich: Ist das überhaupt wichtig, denn wenn im Inhaltsfeld mehr als 2-3 Zeilen stehen sollte das Problem in der Form ja nicht mehr auftreten, oder?
Das Menü wird noch erheblich länger. Aber irgendwas muss ich doch falsch machen.
Bei anderen geht es doch auch.
Und deine Lösung wäre ja auch ein bisschen geschummelt. Ich weiß nämlich nicht wieviel text da immer stehen wird.
aber trotzdem danke
overflow:visible für den #globalcontainer ?!
hab ich. klappt aber leider nicht.
danke
Hallo Daniel
#menueleft {
width: 160px;
float: left;
nimmst du hier aus dem Elemetfluss.
(Seine Höhe hat keinen Einfluss mehr auf umschließende Elemente, die sich im
normaken Fluss befinden.)
Ich finde kein claerendes Element, welches das float wieder aufhebt.
clear (Fortsetzung bei Textumfluss)
Controlling flow next to floats: the 'clear' property
Auf Wiederlesen
Detlef
Wo muss ich das denn setzen ???
gruß,
daniel
Hallo daniel
Wo muss ich das denn setzen ???
Daniel überlege selbst!
Was soll um #menueleft fließen?
(also nach diesem Element)
Was soll nicht mehr fließen bzw. welches Element soll mindestens genau so hoch
wie #menueleft sein?
(also innerhalb dieses Elementes)
Auf Wiederlesen
Detlef
ok, danke für die hilfe.
jetzt klappt es.
mir war nur nicht klar,
auf welches element sich
dann das clear bezieht.
gruß,
Daniel
Hi,
mir war nur nicht klar,
auf welches element sich
dann das clear bezieht.
auf alle zuvor entsprechend gefloateten - jedenfalls in der Theorie ;-)
freundliche Grüße
Ingo