21.08.2013, 11:41
|
|||
|
|||
2 Spaltiges Layout / Rechter div will nicht wie ich
Hallo Zusammen,
ich möchte gerne ein zweispaltiges Layout erstellen, leider ist das rechte Div immer unter dem Linken und ich weis nciht warum  HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Layout</title> </head> <link rel="stylesheet" type="text/css" href="css/template.css" /> <body> <div id= "container"> <div id="top"> <div id="logo"> Logo </div> <div id="menue"> Menue </div> <div id ="suche"> Suche </div> </div> <div id = "middle"> <div id="rechtesmenue"> Content rechtes menou </div> <div id="content"> Rechtes Menue ciopntent </div> </div> <div id="footer"> Footer </div> </div> </body> </html> Code:
/* Grunddefinitionen */
html{
min-height:101%; //scrollbalken werden sofort angezeigt damit Firefox nicht hüpft
}
body{
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
}
#container{
background: #ededed;
width: 950px;
margin: 0 auto; // Wert 0 von oben und unten Link und Rechts Auto
padding: 50px; // Innenabstand Inhalt zu den Rändern gheht nicht
}
#top{
background: #FF9;
width: 100%;
height: 220px;
padding-top:5x;
}
#middle{
background: #F60;
width: 100%;
margin: 0pt;
padding-top:0px;
float: left;
}
#footer{
background: #666;
width: 100%;
margin: 0pt; //'Randabstand
float: left;
}
#content{
background: #F6F;
width: 60%;
margin: 0pt; //'Randabstand
float: left;
}
#rechtesmenue{
background: #6F6;
width: 320px;
height: 500px;
margin: 0px;
float:right;
}
gruß Jürgen 
|
| Sponsored Links |
|
21.08.2013, 13:02
|
||||
|
||||
|
Die Breite passt nicht.
#container hat 950px minus 2x 50px padding = 850px. #content hat 60% von 950px = 570px #rechtesmenue hat 320px 320px + 570px = 890px
|
| Sponsored Links |
|
21.08.2013, 13:03
|
|||
|
|||
|
Also bei mir ist es nebeneinander.
Lösch mal deinen Cache, evtl. liegt es ja daran. Die Einheit pt ist für den Druck gedacht, verwende für die Abstände besser px, em oder %. Weitere Fehler: Code:
padding-top:5x; HTML-Code:
<link rel="stylesheet" type="text/css" href="css/template.css" />
Die Ausgangschriftgrösse hast du auf 12px festgelegt. Richtig wäre 1em. Bei vielen Benutzern ist 12 Pixel oft viel zu klein und zwingt sie dazu die Seite zu zoomen oder einfach ungeachtet wieder zu verlassen. Wer float verwendet muss auch clear einsetzen. Das würde ich für den Footer einsetzen anstatt dem auch ein float zu geben. Siehe auch Float: die Theorie
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum.
|
|
21.08.2013, 13:49
|
|||
|
|||
|
Bitte schau dir unbedingt an wie man Kommentare in CSS einfügt.
Erst der Beitrag von Manfred62 hat mich darauf gebracht dass er ja recht hat und ich noch mal geschaut habe warum es dennoch ging. Deine Kommentare sind falsch und verhindern die richtige Anwendung der Regel. Schaue auch immer in die Fehlerkonsole vom Firefox um solchen CSS-Fehlern auf die Schliche zu kommen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum.
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Div Container mit Layout Ecken | BooKer | CSS | 2 | 19.06.2010 10:28 |
| Layout Problem mit div box | powerpika | CSS | 8 | 16.12.2006 12:36 |
| 3 Spaltiges Layout mit Automatischer Höhe | CyberLine | CSS | 3 | 29.05.2006 16:48 |
| Probleme mit Div Layout | Laiwan | CSS | 4 | 29.08.2005 17:10 |
| 3 Spaltiges Layout im zentrierten DIV | synomus | CSS | 16 | 09.01.2004 15:06 |
Linear-Darstellung
