Brauche Hilfe beim Design
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
beziehen
code
design
entwurf
erreichen
header
hintergrundbild
http
image
inhalt
page
position
problem
radius
test
text
transparent url
url
vorgabe
weiteres problem
-
Hallo
Ich arbeite zur Zeit an einem Design für meine Homepage habe aber Problem mit dem Aufbau.
Ich möchte die Sidebar rechts auf der Seite angezeigt haben und das Menü links den Raum dazwischen soll der Inhalt ausfüllen. Wie kann ich das machen?
Link zur Seite: www.spitzei.lima-city.de/test/
Code der Dateien:
style.css
html,body { background-color: #000000; color:#000000; font-family: fantasy; } #page { overflow: hidden; background: url(images/c.png) repeat; text-align: center; -moz-border-radius: 50%; -khtml-border-radius: 50%; } #header { margin: 3px; margin-top: 15px; margin-left: 15px; margin-right: 15px; background: url(images/ci.png) repeat; text-align: center; -moz-border-radius: 90%; -ktml-border-radius: 90%; } #menu { margin: 3px; margin-left: 15px; background: url(images/ci.png) repeat; text-align: center; -moz-border-radius: 90%; -ktml-border-radius: 90%; float: left; width: 19%; } #inhalt { margin: 3px; background: url(images/ci.png) repeat; text-align: center; float: left; -moz-border-radius: 90%; -ktml-border-radius: 90%; width: 59%; } #sidebar { margin: 3px; margin-right: 15px; background: url(images/ci.png) repeat; text-align: center; -moz-border-radius: 90%; -ktml-border-radius: 90%; float: right; width: 19%; }
index.htm
<!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" xml:lang="de" lang="de"> <head> <title>{TITLE}</title> <meta http-equiv="content-type" content="text/html; charset=us-ascii" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="page"> <div id="header"> Header </div> <div id="menu"> <div align="center"><b>Menü</b></div> </div> <div id="inhalt"> Test </div> <div id="sidebar"> Sidebar </div> </div> </body> </html> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Die Positionen kannst du mit Floating erreichen.
z.Bsp.:
#menu { floating: left; } #inhalt { floating: left; } sidebar { floating:left; }
Wenn du den Containern jetzt noch eine relative Breite zu weist, dürfte das Ergebnis rauskommen, das du willst:
#menu { floating: left; width:25%; } #inhalt { floating: left; width:60%; } sidebar { floating:left; width: 15%; }
Aber anscheinend hast dus auch selbst rausgefunden ^^ -
du hast in dem ganzen entwurf eine menge schwächen,
1. du willst kein 50% border-radius bei #page, sonst hättest du im extremfall eine Kugel, oder ein EI auf dem Bildschrim (den die 50% beziehen sich auf die höhe und breite des Elements!), wobei diese Form aber keinen Einfluss auf die position des textes hat!
2. du willst einen header, mit dem selben Problem, hier sind es sogar 90%!
3. du versucht mit irgendwelchen komischen % werten plus pixel zu rechnen, das geht nicht!
4. du nimmst irgendwelche abstände an, die du selbst nicht bestimmt hast, denke an einen abstand reset
Ich hab mal deinen code unter berücksichtigung der oberen Gründe überarbeitet:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Beispiel</title> <style type="text/css"> </style> </head> <body> <div id="page"> <div id="header">Header</div> <div id="menu"><b>Menü</b></div> <div id="inhalt">Test</div> <div id="sidebar">Sidebar</div> </div> </body> </html>
CSS:
* {margin:0;padding:0;} html,body { background-color:#000000; color:#ccc; font-family:fantasy; text-align:center; } #page { overflow:hidden; background:transparent url(images/c.png) repeat; -moz-border-radius:2em; -khtml-border-radius:2em; } #header, #menu, #inhalt, #sidebar { background:transparent url(images/ci.png) repeat; margin:1% 1% 3px; -moz-border-radius:.7em; -khtml-border-radius:.7em; } #menu { width:19%; float:left; margin:3px 1% 1%; } #inhalt { width:58%; float:left; margin:3px 0 1%; } #sidebar { width:19%; float:right; margin:3px 1% 1%; }
das funktioniert so, aber ich bezweifel, dass es das ist was du wolltest, aber ich bin ja für rückfragen da :) -
Ich habe jetzt ein weiteres Problem wie bekomme ich es hin das ein Hintergrundbild vollständig angezeigt wird?
-
spitzei schrieb:
Ich habe jetzt ein weiteres Problem wie bekomme ich es hin das ein Hintergrundbild vollständig angezeigt wird?
du fügst dem hier (der Vorgabe von nemoinho)
html,body { background-color:#000000; color:#ccc; font-family:fantasy; text-align:center; }
das hinzu
background-image:url(images/hg.png); background-repeat:no-repeat; background-position:center center;
insgesamt dann schaut es so aus
html,body { background-color:#000000; color:#ccc; font-family:fantasy; text-align:center; background-image:url(images/hg.png); background-repeat:no-repeat; background-position:center center; }
also ich gehe jetzt mal davon aus, daß dieses hg-bild in die Mitte soll ;)
Beitrag zuletzt geändert: 16.4.2010 19:46:39 von abakus -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
