Wie setze ich dieses Layout um? @ tutorials.de: Tutorials, Forum & Hilfe

Rayne · 14.10.08 11:58

Hallo.

Ich bin grad dabei, eine neue Website zu basteln, habe bereits das Grundgerüst skizziert und überlege nun, wie ich dieses Layout anschließend in CSS umsetze. Und irgendwie stehe ich auf dem Schlauch.

Hier zuerst die Skizzen. Die roten Kästchen stellen die Ebenen dar, so wie ich mir vorstelle, wie man es aufgliedern könnte:

http://s4b.directupload.net/file/d/1...2kvwft_jpg.htm
http://s2b.directupload.net/file/d/1...9rp8sq_jpg.htm

Was mir am meisten Sorgen bereitet, ist der Schatten um das komplette Layout. Wie setzt man diesen am besten um? Speichert man den Schatten als 1px hohes und von mir aus 800px breites gif und legt das in den Hintergrund der zweitgrößten Ebene mit repeat-y? Und für den Schatten oben und unten speichert man den gesamten Rand als gif und legt ihn jeweils in ein seperates div?
Wie bekomme ich dann diesen weißen Rand links und rechts hin? Mit padding-left/right für die jeweiligen Ebenen (Subnavi, Login, Navi, Content)?

Ich hoffe, ihr könnt mir ein wenig bei der Umsetzung helfen

Danke!

Maik · 14.10.08 12:26

Hi,

bzgl. des Schattens kannst du dir ja mal Stu Nicholls' Demo http://www.cssplay.co.uk/menu/shadow2 anschauen.

mfg Maik

Rayne · 14.10.08 23:49

So, ich habe nun das Grundgerüst halbwegs umgesetzt und bin nun am Umsetzen des Inhaltes.

Hier ersteinal der aktuelle Stand: http://www.sky-divezone.de/Other/WIKO/
So sieht es im FF 3 aus: http://s7b.directupload.net/file/d/1...85cbn3_jpg.htm )

Ich habe momentan 7 Probleme:

1.) Im FF 3 sieht soweit alles recht ok aus. Im IE 7 allerdings klebt die Sub-Navi (home, impressum, sitemap) oben am Rand. Warum? http://s4b.directupload.net/file/d/1...9rix9k_jpg.htm

2.) Im FF 3 sieht soweit alles recht ok aus. Im IE 7 allerdings befinden sich bei der Haupt-Navi die list-style-types (kleinen Pfeile) direkt an den Wörtern. Im FF siehts richtig aus. Warum?

3.) Ich möchte der Haupt-Navi einen gewissen Abstand zum Header geben. Verwende ich dazu margin-top (#Huelle-Navi ul li), dann wird der Abstand zwischen den einzelnen Menüpunkten immer größer. Woran liegt das? Wie vergrößere ich den Abstand zur oberen Kante richtig? http://s3b.directupload.net/file/d/1...3zbt4q_jpg.htm

4.) Im Footer am Ende der Seite steht ein kleiner Text, den ich ganz gern horizontal und vertikal mittig ausgerichtet hätte. Vertikal ist jedoch am wichtigsten. Warum geht das nicht per vertical-align: middle? Ich sehe bei einem Reload zwar, dass sich der Text ein Mü nach unten verschiebt, aber das ist vielleicht 1px. Wie muss es richtig heißen?

5.) Sobald sich der Inhalt nach unten verlängert, bleibt die Navi stehen. Was muss ich verändern, damit sich Navi und IInhalt parallel verschieben? http://s3b.directupload.net/file/d/1...ku3qmf_jpg.htm

6.) Im Content-Bereich zwischen der Überschrift und dem Datum ist zu viel Platz. Ich weiß gar nicht, wo dieser Leerraum herkommt. Wie bekomme ich das Datum näher an die Überschrift heran?

7.) Kein richtiges Problem, aber mich wunderts: Da ich fast überall 2 Divs nebeneneinander habe, musste ich mit float arbeiten. Allerdings hat es nur geklappt, wenn ich dem linken Element float:left und dem rechten Element float:right gegeben habe

War das schon immer so? Müsste es nicht genau umgekehrt sein und müsste nicht nur das erste Element ein float besitzen?

Hier das StyleSheet:

HTML-Code:

/* -------------------------------------------------------------------------------------------------------------------> allgemein */
html { 
     height: 100%;   /*nötig, um ein DIV auf 100% Höhe zu bringen */
	 } 

Body {
/* -------------------------------------------------------------------------------------> Farben */
      background: #eaf4da;      

/* -------------------------------------------------------------------------------------> Schrift */
     font-family:  Arial;
     font-size:    12px;
    /* line-height:  1.3em;
     word-spacing: 0.3em;*/

/* -------------------------------------------------------------------------------------> Abstände */
     margin:      0px;
     height:      100%; /*nötig, um ein DIV auf 100% Höhe zu bringen */
     }

/* -------------------------------------------------------------------------------------> Links */
a         {  text-decoration: none;      } 
a:link    {  color:           #B5DBFF;   } 
a:visited {  color:           #B5DBFF;   } 
a:hover   {  color:           #B5DBFF; 
             text-decoration: underline; }
a:active  {  color:           #B5DBFF;   }

/* -------------------------------------------------------------------------------------> Listen */
/*li {
   list-style-image: url(Bilder/Liste.png);
   margin-left:25px;
   margin-right:10px;
   line-height: 13px;
   }*/

/* -------------------------------------------------------------------------------------> Formulare */
input      {    
           font-family:         Verdana;                
           font-size:           12px;
	   color:               #2969AD;                
           background-color:    #FFFFFF;
           border-color:        #FFFFFF;
           border-top-style:    solid;
           border-right-style:  solid;
           border-left-style:   solid;
           border-bottom-style: solid;  
           }	
			        
Textarea   {
           font-family:         Verdana; 
           font-size:           12px;               
           color:               #2969AD;                
           background-color:    #FFFFFF;
           border-color:        #FFFFFF;
           border-top-style:    solid;
           border-right-style:  solid;
           border-left-style:   solid;
           border-bottom-style: solid;                   	 
           }

/* -------------------------------------------------------------------------------------------------------------------> Huelle-gesamt */
#Huelle-gesamt {  
        position:    relative;
        margin-right: auto;
        margin-left: auto; 
        margin-top: 40px;
	width:       820px;
	height:      auto;   
        background: #FFFFFF;      
	}	
	   
/* -------------------------------------------------------------------------------------------------------------------> Rand oben */
#Rand-oben { 
	   width:           820px;
	   height:          19px;
	   background:      url(Bilder/Schatten-oben.gif);
           }	

/* -------------------------------------------------------------------------------------------------------------------> Huelle-klein */
#Huelle-klein {
		width: 820px;
		height: auto;
		background: url(Bilder/Schatten-mitte.gif) repeat-y;
		}

/* -------------------------------------------------------------------------------------------------------------------> Sub-Navi */
#Sub-Navi {
		width: 600px;
		height: 40px;
		background: #3e4d55;
		margin-left: 20px;
		float:left;
		color: #FFFFFF;
		}				 

#Sub-Navi ul li {
			margin-left:10px;
			display: inline;
			font-weight: bold;
			font-size: 13px;
			}

#Sub-Navi a {
		color: #FFFFFF;
		}

#Sub-Navi a:hover {
			text-decoration: none;
			color: #8cca42;
			}


/* -------------------------------------------------------------------------------------------------------------------> Login */
#Login {
		width: 180px;
		height: 40px;
		background: #3e4d55;
		margin-right: 20px;
		float:right;
		color: #FFFFFF;
		text-align: right;
		}

#Login ul li {
			margin-right: 10px;
			display: inline;
			font-weight: bold;
			font-size: 13px;
			}

#Login a {
		color: #FFFFFF;
		}

#Login a:hover {
			text-decoration: none;
			color: #8cca42;
			}

/* -------------------------------------------------------------------------------------------------------------------> Header-klein */
#Header-klein {
		width: 30px;
		height: 200px;
		background: #3e4d55;
		margin-left: 20px;
		float:left;
		}

/* -------------------------------------------------------------------------------------------------------------------> Header */
#Header {
		width: 740px;
		height: 180px;
		background: #9fe039 url(Bilder/Header.jpg) no-repeat;	
		margin-right: 20px;
		margin-top: 10px;
		margin-bottom: 10px;	
		float:right;		
		}

/* -------------------------------------------------------------------------------------------------------------------> Navi */
#Huelle-Navi {
		width: 250px;
		height: auto;
		background: #3e4d55;
		margin-left: 20px;
		float: left;
		color: #FFFFFF;
		}

#Huelle-Navi h1 {
			margin-top: 30px;
			margin-left: 50px;
			margin-bottom: 20px;
			font-weight: bold;			
			font-size: 17px;
			text-transform: uppercase;
			color: #8cca42;
			}


#Huelle-Navi ul li {
			margin-left: 30px;
			margin-right: 20px;			
			font-weight: bold;
			font-size: 14px;			
			line-height: 25px;
			text-align: right;
			border-bottom: 1px dashed #667e8b;
			list-style-image: url(Bilder/Liste-over.gif);
			}

#Huelle-Navi a {
			color: #FFFFFF;
			display: block;
			}

#Huelle-Navi a:hover {
			text-decoration: none;
			color: #8cca42;
			}

/* -------------------------------------------------------------------------------------------------------------------> Content */
#Huelle-Content {
			width: 530px;
			height: auto;
			background: #FFFFFF;
			margin-right: 20px;
			float: right;			
			}

#Huelle-Content h1 {
			margin-top: 30px;
			margin-left: 40px;
			margin-right: 20px;
			font-weight: bold;			
			font-size: 17px;
			text-transform: uppercase;
			color: #8cca42;
			border-bottom: 1px dashed #667e8b;
			}

#Huelle-Content h2 {
			margin-left: 40px;
			margin-bottom: 20px;
			font-weight: bold;			
			font-size: 12px;
			color: #8cca42;
			}

#Huelle-Content p {
			margin-left: 40px;
			margin-right: 20px;
			color: #787878;
			line-height:  1.3em;
    			word-spacing: 0.3em;
			}

#Huelle-Content a {
			color: #8cca42;
			font-weight: bold;
			}

/* -----------------------------------------------------------------------------------------------------------------> Footer */
#Huelle-Footer {
			width: 780px;
			height: 30px;
			background: #3e4d55;
			margin-top: 10px;
			margin-right: 20px;
			margin-left: 20px;		
			}

#Footer-Copyright {
			color: #bdbdbd;
			text-align: center;
			vertical-align: middle;
			}

/* -------------------------------------------------------------------------------------------------------------------> Rand unten */
#Rand-unten { 
		width:           820px;
		height:          19px;
		background:      url(Bilder/Schatten-unten.gif);
		}

/* -------------------------------------------------------------------------------------------------------------------> clear - Float aufheben */

.clear { 
		clear: both; 
		}

Hier der HTML-Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <link rel="stylesheet" type="text/css"
 href="styles.css">
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>test</title>
</head>
<body>
<div id="Huelle-gesamt">
<div id="Rand-oben"></div>
<div id="Huelle-klein">
<div id="Sub-Navi">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Impressum</a></li>
  <li><a href="#">Sitemap</a></li>
</ul>
</div>
<div id="Login">
<ul>
  <li><a href="#">Login</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="Header-klein"></div>
<div id="Header"></div>
<div class="clear"></div>
<div id="Huelle-Navi">
<h1>Navigation</h1>
<ul>
  <li><a href="#">der Studiengang</a></li>
  <li><a href="#">Bachelor</a></li>
  <li><a href="#">Master</a></li>
  <li><a href="#">Praktikum</a></li>
  <li><a href="#">FHTW</a></li>
  <li><a href="#">WiKo Family</a></li>
  <li><a href="#">Downloads</a></li>
  <li><a href="#">Kontakt</a></li>
  <li><a href="#">Links</a></li>
  <li><a href="#">Hilfe</a></li>
</ul>
</div>
<div id="Huelle-Content">
<h1>Herzlich Willkommen</h1>
<h2>15.10.2008, 13:45</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.</p>
<p><a href="#">weiterlesen</a></p>
<h1>Verlegung Sprechstunde</h1>
<h2>13.10.2008, 11:45</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem.</p>
<p> ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor.</p>
<p>invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
<p><a href="#">weiterlesen</a>
</p>
</div>
<div class="clear"></div>
<div id="Huelle-Footer"><span id="Footer-Copyright">Copyright
© 2008 | The best Team ever with Prof. Dr. Hase</span></div>
</div>
<div id="Rand-unten"></div>
</div>
</body>
</html>

Bin für jeden Ratschlag dankbar

Rayne · 15.10.08 19:33

Konnte alle Probleme lösen.

2 weitere Schwierigkeiten sind aufgetaucht:

test

1.) Im IE7 sind beim hover die kleinen grünen Pfeile um 1px nach oben verschoben, die beiden Pfeile sind also nicht deckungsgleich, was doof aussieht. Im FF sind sie deckungsgleich.

HTML-Code:

#Huelle-Navi {
		width: 220px;
		height: auto;
		background: #3e4d55;
		margin-left: 20px;
		float: left;
		color: #FFFFFF;
		padding-bottom: 32768px; /*equal hight columns*/
		margin-bottom: -32768px;
		}

#Huelle-Navi h1 {
			margin-top: 30px;
			margin-left: 50px;
			margin-bottom: 20px;
			font-weight: bold;			
			font-size: 17px;
			text-transform: uppercase;
			color: #8cca42;
			}


#Huelle-Navi ul li {
			margin-left: 50px;
			margin-right: 20px;			
			font-weight: bold;
			font-size: 14px;			
			line-height: 25px;
			text-align: right;
			border-bottom: 1px dashed #667e8b;
			list-style: none;
			background: url(Bilder/Liste.gif) no-repeat left center;
			}

#Huelle-Navi a {
			color: #FFFFFF;
			display: block;
			}

#Huelle-Navi a:hover {
			text-decoration: none;
			color: #8cca42;
			background: url(Bilder/Liste-over.gif) no-repeat left center;
			}

2.) Wie kann ich die Rahmenfarbe des Headers ändern? Ich habe versucht, die Hintergrundfarbe zu ändern, aber der Rahmen bleibt weiß.

HTML-Code:

#Header {
		width: 740px;
		height: 180px;
		background: #9fe039 url(Bilder/Header.jpg) no-repeat;	
		margin-right: 20px;
		margin-top: 10px;
		margin-bottom: 10px;	
		float:right;		
		}

Maik · 15.10.08 19:40

Hi,

nur mal nachgefragt: Wieso tauscht du die Pfeile nicht gegeneinander aus, sondern legst den "hover"-Pfeil über den anderen?

mfg Maik

Maik · 15.10.08 19:54

Zum Rahmen: Hast du das Design nicht selbst entworfen, um zu wissen, welches Element derzeit die "Rahmenfarbe" erzeugt?

mfg Maik

Rayne · 15.10.08 20:17

Wie tausche ich denn die Grafik ausß

Aber selbst dann würde man doch den kleinen Sprung nach oben erkennen.

Klar weiß ich, was den weißen Rahmen erzeugt, hab den Code dazu ja oben auch gepostet. Aber selbst, wenn die Hintergrundfarbe geändert wird, bleibt der Rahmen weiß, was ich nicht verstehe.

Maik · 15.10.08 20:24

Code :

#Huelle-Navi ul li {
                        margin-left: 50px;
                        margin-right: 20px;
                        font-weight: bold;
                        font-size: 14px;
                        line-height: 25px;
                        text-align: right;
                        border-bottom: 1px dashed #667e8b;
                        list-style: none;
                        [b]/*background: url(Bilder/Liste.gif) no-repeat left center;*/[/b]
                        }
 
#Huelle-Navi a {
                        color: #FFFFFF;
                        display: block;
                        [b]background: url(Bilder/Liste.gif) no-repeat left center;[/b]
                        }
 
#Huelle-Navi a:hover {
                        text-decoration: none;
                        color: #8cca42;
                        background: url(Bilder/Liste-over.gif) no-repeat left center;
                        }

Damit hab ich in den vergangenen acht Jahren noch nie einen Sprung des Hintergrundbildes nach oben erlebt

Wo soll denn deiner Meinung nach die Hintergrundfarbe für #Header durchblitzen, wenn schon sein Hintergrundbild ihn in seiner vollen Breite und Höhe ausfüllt?

mfg Maik

Maik · 15.10.08 20:36

Wenn die Außenabstände des Headers in Innenabstände umgewandelt, und sein Hintergrundbild von oben-links jeweils mit 10px positioniert wird, hast du mit der Hintergrundfarbe die Möglichkeit, eine "Rahmenfarbe" zu definieren.

mfg Maik

P.S. Falls es dennoch nicht klar sein sollte: Derzeit füllt die Grafik "Schatten-mitte.gif" mit ihrem übrigen weißen Hintergrund die "Rahmenkonstruktion" in dem Design aus.

Rayne · 15.10.08 20:57

Danke, beides funktioniert.

Hast du das mit dem Header so gemeint?

HTML-Code:

#Header {
		width: 730px;
		height: 180px;
		background: #FFFFFF url(Bilder/Header.jpg) no-repeat 10px 10px;	
		padding-right: 30px;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-right: 10px;	
		float:right;		
		}

Musste die Breite von 740 auf 730px ändern.

Ich habe gerade erfahren, dass das Design im IE6 zerschossen sein soll. Ich kanns leider nicht mit dem IE6 testen. Die Standalone-Version scheint auf Vista nicht mehr zu funktionieren. Kannst du mir da weiterhelfen? Ist es tatsächlich verschoben?

Maik · 15.10.08 21:05

Ich dachte da eher so:

Code :

#Header {
                width: 740px;
                height: 180px;
                background: #ff0000 url(Bilder/Header.jpg) no-repeat 10px 10px;
                margin-right: 10px;
                padding:10px;
                float:right;
                }

Zur Orientierung poste ich dir hier erstmal zwei IE6-Screenshots vom oberen und unteren Teil der Seite:

Wie setze ich dieses Layout um?-ie6_1.jpg

Wie setze ich dieses Layout um?-ie6_2.jpg

mfg Maik

Rayne · 15.10.08 21:15

Aber warum ist das Layout im IE6 so zerschossen Sieht fast so aus, als würde der die floats nicht richtig interpretieren. Habe ich da einen Fehler gemacht?

Maik · 15.10.08 21:36

Er interpretiert die floats soweit schon richtig, aber IE6 rückt floatende Boxen zu weit ein - was tun?

mfg Maik

Rayne · 15.10.08 22:15

Wie sieht es jetzt aus? Habe zu den floats zusätzlich display: inline; eingefügt.

Gibt es eine Möglichkeit, auch unter Vista den IE6 zu bekommen?

Maik · 15.10.08 22:34

Sieht nicht im Ansatz besser aus, da du entweder das aktuelle Stylesheet nicht hochgeladen, oder den Workaround an der/den falschen Stellen angewendet hast.

Zum Thema "IE6 als Standalone-Version unter Vista" hab ich gerade via

den Artikel Internet Explorer 6 in Windows Vista (IE6) - part 1 gefunden.

Ansonsten kannst du folgende Dienste nutzen, um die Darstellung einer Website im IE6 zu überprüfen:

http://browsershots.org/
http://meineipadresse.de/netrenderer/ (IE-only)

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Ist dieses Layout stabil

Ist dieses CSS-Layout ohne Fehler?

Wer knackt dieses Layout ;)

Wo finde ich dieses Layout? [76kb]

wie setze ich session?

E-Mail:

Abonnieren Abbestellen