zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS/HTML Layout Herrausforderung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.02.2013, 23:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.02.2013
Beiträge: 1
litlleblackman befindet sich auf einem aufstrebenden Ast
Standard 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>
Ich wäre für Hinweise sehr dankbar!

Gruß
lbm

Geändert von litlleblackman (27.02.2013 um 17:00 Uhr) Grund: close
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.02.2013, 02:10
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, float, html, inline-block

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:58 Uhr.