|
|||
CSS/HTML Layout Herrausforderung
Hallo Leute,
ich bin leider am verzweifeln. Sitze jetzt seit ner ganzen Weile an einem kleinen Projekt. Geht um ne kleine Pre-Page für einen OnlineShop. Nur leider bekomm ich nichtmal den Grundaufbau hin. Trotz HTML und CSS Kenntnisse. Hab im Photoshop mir das Layout gebastelt und gesliced und nun wollte ich es zusammensetzen. Ziel war es das Layout wie im Bild unten zu sehen umzusetzen. Hatte dann aber Schwierigkeiten mit dem nebeneinander. Hatte es zuerst über inline-box versucht, dann doch über float. So hatte ich zumindest erstmal shopbalken links und navi+text(eingepackt in context) rechts. Allerdings hat es mir dann wieder Margin zerschossen und mein Footer ist unter dem Header hängen geblieben. Habt Ihr eine Idee wie man dies umsetzen könnte? So sollte es ungefähr aussehen. Hier das aktuelle Chaos. CSS: Code:
@charset "utf-8"; /* CSS Document */ #all{ width:990px; margin: 0px auto; } #header{ width:990px; height:206px; margin:0px 0px 0px 0px; padding:0px; } #shopbalken{ width:206px; height:496px; float:left; background-image:url(images/layout/shopbalken.png); background-repeat:no-repeat; margin-top:12px; } #content{ float:right; width:772px; height:496px; padding:0px; background-color:#FFFF00; margin-top:12px; padding:0px; } #navi{ width:772px; height:42px; background-image:url(images/layout/navi.png); padding:0px; list-style:none; } #text{ width:772px; height:200px; background-color:#e6e6e6; margin:0px; padding:0px; } #footer{ width:990px; height:28px; padding:0px; } 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>Schuleinrichtung R.Berndt & D. Merkwitz</title> <link href="format.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="all"> <div id="header"> <a href="index.html"><img src="http://xhtmlforum.de/images/layout/header.png" border="none" alt="Kopfzeile" title=""/></a> </div> <div id="shopbalken"> <p>Shopbalken</p> </div> <div id="content"> <div id="navi"> <p>Navi</p> </div> <div id="text"> <p>blablabla</p> </div> </div> <div id="footer"> <img src="http://xhtmlforum.de/images/layout/footer.png"/> </div> </div> </body> </html> Gruß lbm Geändert von litlleblackman (27.02.2013 um 17:00 Uhr) Grund: close |
Sponsored Links |
|
||||
Margins lassen sich entfernen / ändern und floats müssen gecleart werden.
Wieso so viele Grafiken? Du kannst bei vielen Elementen doch mit einem Border-Radius arbeiten. Die Frage ist: Was genau ist dein Problem?
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Sponsored Links |
Stichwörter |
css, float, html, inline-block |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Was bevorzugt ihr - fixes, fluides oder elastisches Layout | mimii | CSS | 0 | 19.12.2011 21:12 |
Bitte um Hilfe - CSS und Prozentangaben | sprefer | CSS | 3 | 01.03.2011 05:11 |
Untermenü im IE | nici | CSS | 10 | 22.06.2009 22:19 |
Probleme mit Layout | kruemelchen26 | CSS | 0 | 15.05.2007 23:40 |
Yet Another Multicolumn Layout: CSS/HTML in Reinkultultur | Webstandard | Ressourcen | 0 | 29.12.2005 11:18 |