kleines div prob.
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
background
beitrag
body
container
display
fenster
fest
gen
image
kleines beispiel
main
margin
none
recht
right
sen
springen
unbedingt tragisch
vielen dank
-
Hallo
Ich habe da ein kleines prob. mit den div Containern....
Also ich habe mir mal ein ganz einfaches div layout geodet so nun ist da nur ein problem sobald ich das Browser fenster vergr??er oder verkleiner springen die div boxen nach unten....
Wie verhindere ich das?
Die div container haben feste px werte. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Kannst Du das etwas genauer beschreiben?
Mit div-Containern kann man sehr unterschiedliche Layouts machen.
Wenns nicht zuviel ist kannst Du den Code ja hier rein posten inklusive css nat?rlich. Oder du stellst es auf deinen Webspace und gibst den link dazu an. -
Also hier der Link:
http://garlian.pyrokar.lima-city.de/layout4/
Und hier die CSS Datei:
A:link {text-decoration: none}
A:visited {text-decoration: none; color:blue}
A:active {text-decoration: none}
A:hover {text-decoration: none; color:#FF0000; }
body{
background-image: url('01.gif');
}
#main {
margin-top: 5px;
}
#header {
height: 50px;
width: 900px;
background-image: url('head.jpg');
}
#links {
margin-left: 54px;
width: 125px;
float: left;
background: #6896F8;
}
#content {
width: 650px;
float: left;
background: #6896F8;
}
#rechts {
margin-right: 54px;
width: 125px;
float: right;
background: #6896F8;
} -
zum einen haben die Elemente feste Werte, was nicht unbedingt tragisch ist, aber es fehlt ihnen ein "display: inline"!
-
So wie ich das sehe k?nntest du direkt mit "position: absolute; top:...px; width:...px;" die div-container positionieren, da du eh schon festgelegte Breiten und Seitenabst?nde hast.
(Siehe auch: http://de.selfhtml.org/css/eigenschaften/positionierung.htm ) -
@evil-devil
kannst du mir das bitte mit dem display:inline; etwas genauer erl?utern. -
inline bedeutet (wie der Name schon andeutet), dass eigentlich vorhandene Zeilenumbr?che verhindert werden:
inline = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt
Aber so wie ich dein Problem verstehe, d?rfte es dass nicht l?sen, denn wenn man das Browserfenster verkleinert springts dann eben doch in ne neue Zeile (habs mal bei dem Selfhtml Beispiel f?r inline ausprobiert) -
Also, so viel mu?t Du gar nicht ?ndern.
Du solltest nur die width Angabe im #content entfernen und den content-Bereich nach dem #rechts-Bereich einf?gen.
Dann ist das mit dem margin-left und margin right quatsch. lasse das lieber weg und gib dem #main Bereich ein position:relative.
ich habs mal hier zusammengef?gt, ?bernehme aber wegen der kurzen Zeit keine GArantie f?r Vollst?ndiglkeit.
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN\''http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html>
<head>
<title>Meine Seite</title>
<link rel='stylesheet' type='text/css' href='page.css'>
<style>
body{
text-align:center;
margin:0;
}
#main {
text-align:left;
margin:auto;
width:900px;
position:relative;
}
A:link {
text-decoration: none
}
A:visited {
text-decoration: none;
color:blue
}
A:active {
text-decoration: none
}
A:hover {
text-decoration: none;
color:#FF0000;
}
body{
background-image: url('01.gif');
}
#main {
margin-top: 5px;
}
#header {
height: 50px;
width: 900px;
background-image: url('head.jpg');
}
#links {
width: 125px;
float: left;
background: #6896F8;
}
#content {
background: #6896F8;
}
#rechts {
width: 125px;
float: right;
background: #6896F8;
}
</style>
<meta http-equiv='Content-Type'content='text/html; charset=ISO-8859-1'>
</head>
<body>
<div align='center' id='main'>
<div id='header'></div>
<div id='links'>
<a href='index.php?section=news'>News</a><br />
<a href='index.php?section=home'>Home</a>
</div>
<div id='rechts'>
<a href='index.php?section=news'>News</a><br />
<a href='index.php?section=home'>Home</a>
</div>
<div align='center' id='content'>Dies ist die Startseite^^</div>
<br style='clear:both;'>
</div>
</body>
</html>
edit: codeTag eingef?gt.
edit: codeTag wieder entfernt.
edit: Hatte doch noch etwas Zeit. Schau mal http://noll.milten.lima-city.de/garlian/lima.html
da hab ich was f?r dich hin gestellt
Beitrag ge?ndert: 28.9.2006 16:29:53 von noll
Beitrag ge?ndert: 28.9.2006 17:04:25 von noll -
So, hier ein kleines Beispiel. Der Code ist eigentlich selbsterkl?rend, falls nicht frag nach ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Inline Example</title> <style type="text/css"> #menu { width: 500px; background-color: #00FFFF; } #menu div { display: inline; background-color: #FF00FF; } </style> </head> <body> <div id="menu"> <div>Element1</div> <div>Element2</div> <div>Element3</div> <div>Element4</div> <div>Element5</div> </div> </body> </html>
//edit: Shit Code Tag, das zerfetzt immer jeden Code so sehr.
Beitrag ge?ndert: 28.9.2006 16:26:08 von evil-devil -
Vielen Dank f?r eure Hilfe^^
Es funzt jetzt endlich so wie ich es will^^
@noll
Die #main angabe war das entscheidende hab den width wert aber trotzdem erstmal so gelassen^^
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
