Frage zu selbstentworfenen Rahmen
Malte Kölling
- css
Hallo,
momentan arbeite ich an meiner dritten Webseite, die diese hier ersetzen soll: www.kölling.net Was ja auch dringend nötig ist. Nur leider komme ich an einer Stelle nicht weiter. Und zwar will ich für den main Bereich einen eigenden Rahmen verwenden, der natürlich mitwachsen soll, wenn der Text länger wird. Leider kriege ich es nicht hin. Der Boden ist immer falsch. Vielleicht kann mir hier einer weiterhelfen. Momentan habe ich keinen Zugriff auf Webspace, weil ich hier in Singapur hinter einer Firewall festhänge.
Hier meine HTML Seite:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Kölling live aus Singapur</title> background-color: #C0C0C0; <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="upthere.css" /> </head> <body> <div id ="header"> <div id="head"></div> <div id="head2"></div> </div> <div id="line"></div>
<div id="menue"></div> <div id="main"> <div id="main_top"></div> <div id="main_left"></div> <div id="main_leftd"><img src="left_b.jpg" style="width:37px;" alt="rahmen" /></div> <div id="main_right"></div> <div id="main_rightd"><img src="right_b.jpg" style="width:30px;" alt="rahmen" /></div> Inhalt, Text, Bilder und so <div id="main_bottom"></div>
</div> </body> </html>
Und hier ist meine CSS Datei:
body{ margin: 0; margin-bottom:2em; background-color: white; color: black; padding-bottom:
} div { border: none; }
div#head { width: 780px; height: 267px; background-image: url(head.gif); float: left; overflow:hidden; } div#head2 { background-image: url(head2.gif); width: 100%; height: 267px; padding: 0; overflow:hidden; } div#header { overflow:hidden; background-image: url(kopf.jpg); padding-top:10px;
} div#menue { background-image: url(menue4.jpg); background-repeat: no-repeat; width: 270px; height: 470px; margin: 20px; margin-top:40px; float:left;
} div#line { background-image: url(line.jpg); width:100%; height:20px;
} div#main { left: 400px; border: medium Aqua; width: 500px; top:355px; position:absolute; margin-bottom:2em; padding-bottom:2em; } div#main_top { width: 500 px; height: 40 px; min-height:40px; background-image: url(top.jpg); margin-top:0px; margin-left:0px;
} div#main_left { width:37px; min-width: 37px; height:435px; background-image: url(left.jpg); margin:0px; float:left;
} div#main_right { background-image: url(right.jpg); width:30px; height:435px; float:right; } div#main_leftd { background-image: url(left_b.jpg); width:37px; min-width:37px; margin:0px; margin-bottom: 20px; position:absolute; float:left; top:473px; left:0px; z-index:2; } div#main_rightd {
background-image: url(right_b.jpg); width:30px; min-width:30px; position:absolute; margin:0px; float:right; top:473px; right:0px; z-index:2;
} div#main_bottom { width: 500 px; height: 16 px; min-height: 16px; background-image: url(bottom.jpg); margin-bottom:0px; margin-left:0px; // margin-top:90%; clear:both; z-index:5; position: absolute; bottom:0px;
}
Ich habe erstmal alles gepostet weil ich nicht wusste was wichtig ist. Alleine komme ich echt nicht mehr weiter.
Hallo Malte,
Hier meine HTML Seite:
das ist doch eher eine Div-Suppe. Da kannst du mit einem ordentlichen Seiteaufbau noch allerhand rausholen!
<div id ="header">
<div id="head"></div>
<div id="head2"></div>
</div>
<div id="line"></div>
Benutze p, hx, ul, hr etc, nicht nur div.
Deine CSS-Datei wird dann auch kleiner. Schau mal im CSS-Kapitel bei SELFHTML nach den Layout-Beispielen!
Ich habe erstmal alles gepostet weil ich nicht wusste was wichtig ist. Alleine komme ich echt nicht mehr weiter.
Wird schon werden. Poste mal, wie es aussehen soll!
Mit freundlichen Grüßen,
André
Hallo André,
vielen Dank für deine Antwort.
Benutze p, hx, ul, hr etc, nicht nur div.
Ich bin mir nicht sicher ob es das bringt. All diese div Bereiche sollen unterschiedliche Teile vom Rahmen sein, bzw. vom Rahmen der Navi sein. Da ist noch keine Liste oder Textabsatz drin. Das kommt dann später.
Deine CSS-Datei wird dann auch kleiner. Schau mal im CSS-Kapitel bei »» SELFHTML nach den Layout-Beispielen!
Kein Beispiel hat das was ich will. Leider.
Leider habe ich momentan keinen Zugriff auf Webspace, wegen der Firewall, aber wenn du mir eine E-mail schickst dann kann ich dir ein Bil zuschicken wie es aussehen soll. Mein Problem ist ja das der Rahmen dynamisch mitwachsen soll, alles andere würde ich schon hinkriegen.
Viele Grüße
Malte
Hallo Malte,
versuche es doch mal bitte im Ascii-Stil
|-------------------------------|
| header |
|-------------------------------|
| content |
dann können andere auch helfen.
Mit freundlichen Grüßen,
André
Hallo Malte,
versuche es doch mal bitte im Ascii-Stil
|-------------------------------|
| header |
|-------------------------------|
| content |dann können andere auch helfen.
Mit freundlichen Grüßen,
André
|----------------------------------|
| head(klappt schon) |
|----------------------------------|
||---------| |------------------| |
||menü(fix)| |main-Rahmen | |
|| | |(der soll mit dem | |
|| | |content mitwachsen| |
||---------| |das klappt aber | |
| |nicht, der Boden | |
| |ist nicht da wo er| |
| |sein sollte) | |
| |------------------| |
|__________________________________|
Quelltext siehe oben.