✔ Wie setze ich dieses Layout um?

Rayne · 14. Oktober 2008

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/1582/852kvwft_jpg.htm
http://s2b.directupload.net/file/d/1582/ut9rp8sq_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. Oktober 2008

Hi,

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

mfg Maik

Rayne · 14. Oktober 2008

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/1582/b885cbn3_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/1582/x69rix9k_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/1582/u63zbt4q_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/1583/e4ku3qmf_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:

/* -------------------------------------------------------------------------------------------------------------------> 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:

<!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. Oktober 2008

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:

#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:

#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. Oktober 2008

Hi,

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

mfg Maik

Maik · 15. Oktober 2008

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

mfg Maik

Rayne · 15. Oktober 2008

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. Oktober 2008

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;
                        /*background: url(Bilder/Liste.gif) no-repeat left center;*/
                        }

#Huelle-Navi a {
                        color: #FFFFFF;
                        display: block;
                        background: url(Bilder/Liste.gif) no-repeat left center;
                        }

#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 :suspekt:

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. Oktober 2008

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. Oktober 2008

Danke, beides funktioniert.

Hast du das mit dem Header so gemeint?

HTML:

#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?

✔ Wie setze ich dieses Layout um?

Rayne

Erfahrenes Mitglied

Maik

Rayne

Erfahrenes Mitglied

Rayne

Erfahrenes Mitglied

Maik

Maik

Rayne

Erfahrenes Mitglied

Maik

Maik

Rayne

Erfahrenes Mitglied

Neue Beiträge