Layout in CSS/HTML einarbeiten *Hilfe*Forum » Tutorials » Help » Layout in CSS/HTML einarbeiten *Hilfe*
Neues Thema-
08.04.2012 um 14:09 Uhr
Hallo :-)
Ich habe die Tutorials
alice-grafixx.de/Photoshop-Tutorial/Webseiten-Layout-mit-Photoshop-erstellen-96
alice-grafixx.de/XHTML-CSS-Tutorial/Webseiten-Layout-erstellen---das-Coding-97
angeschaut/"gemacht".
Der Photoshop Teil klappte prima nur bein Coden habe ich noch ein Problem.
Ich habe es soweit gebracht das der Backround sowie "Header" und "Mitte" angezeigt werden, nur der "Footer" will nicht so wie ich will (glaube ich jedenfalls ;-D)!
Kann mir da jemand helfen?
Hier mal der 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> <title>Unbenannt-1</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="ram"> <div id="header"></div> <div id="navi"> <ul> <li><a href="link" title="Link Titel">Home</a></li> <li><a href="link" title="Link Titel">About me</a></li> <li><a href="link" title="Link Titel">Photographie</a></li> <li><a href="link" title="Link Titel">Digital Art</a></li> </ul> Dein Text <br> d d d sd </div> <div id="content"> Dein Text! </div> </div> <div id="footer"></div> </body> </html>
Und noch der CSS Code
body{ background: #616161 url('backround.jpg') repeat-x; color: #686864; font: 0.9em 'Calibri', Geneva, Arial, Helvetica, sans-serif; margin: 0px; } p, pre{ padding: 5px 10px; margin: 0px; color: #2E2E3A; } #ram { background: url('2.jpg') repeat-y; width: 716px; margin: 0px auto; } #header { background: url('3.jpg') repeat-y; width: 716px; height: 142px; } #content { width: 490px; padding: 10px 15px 15px 35px; float: left; #navi{ width: 140px; margin: 0px 0px 0px 565px; padding: 10px 0px 0px 0px; } * html #navi{ margin: 0px 0px 0px 555px; } #navi ul{ list-style: square inside; margin: 0px auto; padding: 0px; } #footer { background: #ECEBD9 url('footer.jpg') top no-repeat; clear: left; width: 716px; height: 40px; margin: 0px auto; padding: 25px 0px 0px; line-height: 36px; text-align: center; 1color: #969789; } A { color: #A2B710; text-decoration: none; } A:visited { color: #494833; text-decoration: underline; } A:hover, A:active { color: #686864; text-decoration: underline; } h1{ color: #A2B710; text-align: left; padding: 0 5px 5px 5px; font: normal 1.6em verdana, tahoma, sans-serif; h2{ color: #65666B; text-align: left; padding: 0 5px 0px 5px; font-size: 1.4em; }
Die Website wie sie mom. ausschaut:
Ich habe mich beim CSS Code sehr genau an die Vorgabe von Alice gehalten da ich erstmal etwas funktionierdes haben wollte, natuerlich wuerde ich gerne noch Sachen umaendern.
Beim HTML Code hat mir der Beitrag von "Katjana" in einem Thread geholfen...danke dafuer :-)
Freue mich auf Hilfe,
LG PirateFalls ich das mal vergesse:
Liebe Gre Pirate ;-) -
08.04.2012 um 16:25 Uhr
Hallo Pirate,
schliess mal - wie im Tutorial auch - das Div mit der Bezeichnung ram erst nach dem Div footer und schau mal ob dieser dann so will wie du moechtest...
In der CSS Angabe fuer den Footer hast sich ein kleiner Fehler eingeschlichen: 1color: #969789;
Sollte das nicht des Raetsels Loesung sein, lad die Dateien bitte mal auf einen Webspace, damit man sich das live und in Farbe anschauen kann, dann ist es deutlich leichter dir zu helfen
Liebe Gruesse
Alice... { signatur } ...
Antworten 
Zitat 
