✔ Navigation verschoben

GFX-Händchen · 13. Juni 2010

Hi all,

vorweg sei gesagt, dass ich seit längerem nichts mehr gemacht habe und nun eben nur meine Grundkenntnisse wieder auffrischen möchte.

Daher habe ich mir einfach eine kostenlose PSD heruntergeladen und gesliced.
Jetzt möchte ich das Ganze in DW zusammenfügen, doch hänge bei der Navigation fest.

Die Navigation besteht aus mehreren Grafiken und wird komischerweise verschoben.

.

Hab bestimmt mehr im Code als nötig.:-(

HTML-Code

HTML:

<!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>Unbenanntes Dokument</title>
<link href="test2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
  <div id="header">
      Raum für den Inhalt von  id "header"</div>
  <div id="navi">
    <ul>
    <li class="nav_leer"></li>
    <li class="btn1_img"><a href="#">Home</a></li>
    <li class="btn2_img"><a href="#">Next1</a></li>
    <li class="btn3_img"><a href="#">Next2</a></li>
    <li class="btn4_img"><a href="#">Next3</a></li>
    <li class="nav_album"></li>
    </ul>
       
        
      </div> <!-- ende navigation -->
      <div id="content">
<div id="content_left"></div>
  <div id="content_right"></div>
  </div> <!-- ende content -->
  <div id="footer"></div>
</div>
</body>
</html>

Code:

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	background-color: fff;
}
#wrapper {
	height: 650px;
	width: 750px;
	margin-top: 50px;
	margin-right: auto;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #999;
	border-right-color: #999;
	border-bottom-color: #999;
	border-left-color: #999;
	display: block;
}
#header {
	background-image: url(Bilder/header.jpg);
	margin: 0px;
	height: 70px;
	width: 750px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #00F;
	border-right-color: #00F;
	border-bottom-color: #00F;
	border-left-color: #00F;
	display: block;
}
#navi {
	margin: 0px;
	height: 40px;
	width: 750px;
	display: block;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0F0;
	border-right-color: #0F0;
	border-bottom-color: #0F0;
	border-left-color: #0F0;
}
.btn1_img {
	background-image: url(Bilder/w3.jpg);
	height: 40px;
	width: 117px;
}
.btn2_img {
	background-image: url(Bilder/w4.jpg);
	height: 40px;
	width: 114px;
	margin: 0px;
}
.btn3_img {
	background-image: url(Bilder/w5.jpg);
	height: 40px;
	width: 115px;
	margin: 0;
}
.btn4_img {
	background-image: url(Bilder/w6.jpg);
	height: 40px;
	width: 117px;
	margin: 0;
}

.nav_leer {
	background-image: url(Bilder/w2.jpg);
	margin: 0px;
	height: 40px;
	width: 49px;
	background-repeat: no-repeat;
	float: left;
}

.nav_btn1 {
	background-image: url(Bilder/w3.jpg);
	background-repeat: no-repeat;
	margin: 0px;
	float: left;
	height: 40px;
	width: 117px;
	display: block;
}
.nav_btn2 {
	background-image: url(Bilder/w4.jpg);
	background-repeat: no-repeat;
	margin: 0px;
	float: left;
	height: 40px;
	width: 114px;
	display: block;
}
.nav_btn3 {
	background-image: url(Bilder/w5.jpg);
	background-repeat: no-repeat;
	margin: 0px;
	float: left;
	height: 40px;
	width: 115px;
	display: block;
}
.nav_btn4 {
	/* [disabled]background-image: url(Bilder/w6.jpg); */
	background-repeat: no-repeat;
	margin: 0px;
	float: left;
	height: 40px;
	width: 117px;
	display: block;
}
.nav_album {
	background-image: url(Bilder/w7.jpg);
	background-repeat: no-repeat;
	margin: 0px;
	float: left;
	height: 40px;
	width: 238px;
	/* [disabled]display: block; */
}
#navi ul {
	margin: 0px;
	height: 40px;
	width: 750px;
	float: left;
}
#navi ul li a {
	float: left;
	list-style-type: none;
	/* [disabled]background-image: url(Bilder/w3.jpg); */
	background-repeat: no-repeat;
	height: 20px;
	/* [disabled]width: 117px; */
	margin-top: 20px;
	margin-left: 40px;
}

#navi ul li {
	float: left;
	list-style-type: none;
}

#content {
	margin: 0px;
	clear: both;
	height: 502px;
	width: 750px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #F00;
	border-right-color: #F00;
	border-bottom-color: #F00;
	border-left-color: #F00;
}


#content_left {
	background-image: url(Bilder/contl.jpg);
	margin: 0px;
	height: 502px;
	width: 530px;
	float: left;
}
#content_right {
	background-image: url(Bilder/contr.jpg);
	margin: 0px;
	float: right;
	height: 502px;
	width: 220px;
}
#footer {
	margin: 0px;
	clear: both;
	height: 38px;
	width: 750px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #00F;
	border-right-color: #00F;
	border-bottom-color: #00F;
	border-left-color: #00F;
}

Maik · 13. Juni 2010

Hi,

ohne mir den Code im Browser angeschaut zu haben, erweiter den Regelblock für den Selektor #navi ul mit padding:0.

mfg Maik

GFX-Händchen · 13. Juni 2010

Uff

, das wars!

Menno und ich mach da Stunden dran rum.

Gibt es eine bessere Lösung als die welche ich angegangen bin mit dem ganzen Code?

queicherius · 13. Juni 2010

GFX-Händchen hat gesagt.:
Gibt es eine bessere Lösung als die welche ich angegangen bin mit dem ganzen Code?

DW erzeugt sehr viel unnützen Code... so wird aus deinem oberen CSS mit dem CSS-Beautifier das hier:

CSS:

body {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
background-color:fff;
}

#wrapper {
height:650px;
width:750px;
margin-top:50px;
margin-right:auto;
display:block;
border-color:#999;
border-style:solid;
}

#header {
background-image:url(Bilder/header.jpg);
height:70px;
width:750px;
display:block;
border-color:#00F;
border-style:solid;
margin:0;
}

#navi {
height:40px;
width:750px;
display:block;
border-color:#0F0;
border-style:solid;
margin:0;
}

.btn1_img {
background-image:url(Bilder/w3.jpg);
height:40px;
width:117px;
}

.btn2_img {
background-image:url(Bilder/w4.jpg);
height:40px;
width:114px;
margin:0;
}

.btn3_img {
background-image:url(Bilder/w5.jpg);
height:40px;
width:115px;
margin:0;
}

.btn4_img {
background-image:url(Bilder/w6.jpg);
height:40px;
width:117px;
margin:0;
}

.nav_leer {
background-image:url(Bilder/w2.jpg);
height:40px;
width:49px;
background-repeat:no-repeat;
float:left;
margin:0;
}

.nav_btn1 {
background-image:url(Bilder/w3.jpg);
background-repeat:no-repeat;
float:left;
height:40px;
width:117px;
display:block;
margin:0;
}

.nav_btn2 {
background-image:url(Bilder/w4.jpg);
background-repeat:no-repeat;
float:left;
height:40px;
width:114px;
display:block;
margin:0;
}

.nav_btn3 {
background-image:url(Bilder/w5.jpg);
background-repeat:no-repeat;
float:left;
height:40px;
width:115px;
display:block;
margin:0;
}

.nav_btn4 {
background-repeat:no-repeat;
float:left;
height:40px;
width:117px;
display:block;
margin:0;
}

.nav_album {
background-image:url(Bilder/w7.jpg);
background-repeat:no-repeat;
float:left;
height:40px;
width:238px;
margin:0;
}

#navi ul {
height:40px;
width:750px;
float:left;
margin:0;
}

#navi ul li a {
float:left;
list-style-type:none;
background-repeat:no-repeat;
height:20px;
margin-top:20px;
margin-left:40px;
}

#navi ul li {
float:left;
list-style-type:none;
}

#content {
clear:both;
height:502px;
width:750px;
border-color:red;
border-style:solid;
margin:0;
}

#content_left {
background-image:url(Bilder/contl.jpg);
height:502px;
width:530px;
float:left;
margin:0;
}

#content_right {
background-image:url(Bilder/contr.jpg);
float:right;
height:502px;
width:220px;
margin:0;
}

#footer {
clear:both;
height:38px;
width:750px;
border-color:#00F;
border-style:solid;
margin:0;
}

(-40%)

GFX-Händchen · 13. Juni 2010

Danke für den Hinweis.

Wärt ihr die ganze Sache auch so angegangen wie ich oder gibts eine bessere Möglichkeit/Lösung?

Maik · 13. Juni 2010

GFX-Händchen hat gesagt.:
Gibt es eine bessere Lösung als die welche ich angegangen bin mit dem ganzen Code?

Den ganzen Code würde ich mal etwas komprimieren, durch geschicktes Zusammenfassen der Regeln, und Gruppieren der Selektoren

Beispielsweise sowas hier:

CSS:

#wrapper {
	...
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #999;
	border-right-color: #999;
	border-bottom-color: #999;
	border-left-color: #999;
	...
}

lautet dann:

CSS:

#wrapper {
	...
	border: solid #999 thin;
	...
}

Oder auch die Formatierung der Menüpunkte, wo sich gleichlautende Eigenschaften mehrfach wiederholen.

Diese können in einem gruppierten Selektor zusammenfasst werden - schematisch so:

CSS:

.btnKlasse1,
.btnKlasse2,
.btnKlasse3 {
float:left;
height:40px;
}

margin:0 und padding:0 brauchst du auch nicht in jedem Element angeben, wenn du stattdessen zu Beginn deines Stylesheets den Universal-Selektor * dafür nutzt.

mfg Maik

GFX-Händchen · 13. Juni 2010

Das hab ich langsam kapiert.

Danke für den Hinweis mit dem *-Selektor, das hatte ich total vergessen.

Ich meinte, ob ihr - im großen und ganzen - das aber auch so mit der Navigation etc. gelöst hättet oder ob es dafür eine einfachere Möglichkeit gibt?!

Maik · 13. Juni 2010

GFX-Händchen hat gesagt.:
Wärt ihr die ganze Sache auch so angegangen wie ich oder gibts eine bessere Möglichkeit/Lösung?

GFX-Händchen hat gesagt.:
Ich meinte, ob ihr - im großen und ganzen - das aber auch so mit der Navigation etc. gelöst hättet oder ob es dafür eine einfachere Möglichkeit gibt?!

Die Umsetzung mit Hilfe der float-Eigenschaft ist da gängige Praxis.

mfg Maik

GFX-Händchen · 13. Juni 2010

Ok, dann hab ich also - wenn man einmal vom etwas aufgeblähten Code absieht - alles soweit richtig bzw. so gemacht wie ihr es auch umgesetzt hättet?

Maik · 13. Juni 2010

Jo - sagte ich das nicht bereits in meinem letzten Post? ;-)

mfg Maik

✔ Navigation verschoben

GFX-Händchen

Erfahrenes Mitglied

Maik

GFX-Händchen

Erfahrenes Mitglied

queicherius

♥ PHP ♥

GFX-Händchen

Erfahrenes Mitglied

Maik

GFX-Händchen

Erfahrenes Mitglied

Maik

GFX-Händchen

Erfahrenes Mitglied

Maik

Neue Beiträge