zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigations Bar anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.06.2011, 14:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.06.2011
Beiträge: 4
snakemaster befindet sich auf einem aufstrebenden Ast
Standard Navigations Bar anpassen

Hallo miteinander

ich habe ein kleines problem ich würde gerne diese navigations bar hier unten



gerne so anpassen das sie zu einander passt. Da ich das schon probiert habe mit dem CSS und bis jetzt nichts herausfinde. würde ich gerne wissen ob ihr irgend etwas wisst. Oh ja und die second funktion habe ich gemacht die war noch nicht dabei.

Code:
/*===== header =====*/
#header .menu {
	background:url(images/menu-right.gif) 100% 0 no-repeat #fff;
}
	#header .menu .wrapper {
		background:url(images/menu-left.gif) 0 0 no-repeat;
		height:80px;
	}

#header .nav {
	float:left;
}
	#header .nav li {
		float:left;
		background:url(images/divider.gif) 100% 0 repeat-y;
	}
		#header .nav li a {
			padding:0 118px 0 32px;
			float:left;
			line-height:80px;
			text-decoration:none;
			color:#313131;
			text-decoration:none;
			font-size:20px;
		}
		#header .nav li a:hover, #header .nav li a.current {
	background:url(images/nav-bg1.gif) 0 0 repeat-x;
	color:#fff;
	text-align: center;
		}
		#header .nav li.first a {
			padding:0;
		}
			#header .nav li.first a b {
				float:left;
				padding:0 52px 0 32px;
			}
			#header .nav li.first a:hover b, #header .nav li.first a.current b {
				background:url(images/menu-left-act.gif) no-repeat 0 0;
			}
		#header .nav li.second a {
			padding:0;
		}
			#header .nav li.second a b {
				float:left;
				padding:0 52px 0 32px;
			}
			#header .nav li.second a:hover b, #header .nav li.second a.current b {
				background:url(images/menu-right-act.gif) no-repeat 0 0;
			}
Ich danke euch shcon mal im vorraus.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.06.2011, 14:38
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

Was passt denn nicht?
__________________
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
  #3 (permalink)  
Alt 12.06.2011, 14:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.06.2011
Beiträge: 4
snakemaster befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Thielo Beitrag anzeigen
Was passt denn nicht?
Nun es ist so ich möchte gerne das der contact ganz am rand ist und so ist wie der Main einfach spiegel verkehrt und nicht grün und das zwischen drin gleich mässig abstand hat.
Mit Zitat antworten
  #4 (permalink)  
Alt 12.06.2011, 17:52
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Das sind 5 Felder (li) --> jeweils "width: 20%; text-align: center;"
Vorausgesetzt, das übergeordnete Element hat eine Breite.

Manfred
Mit Zitat antworten
  #5 (permalink)  
Alt 12.06.2011, 23:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.06.2011
Beiträge: 4
snakemaster befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
Das sind 5 Felder (li) --> jeweils "width: 20%; text-align: center;"
Vorausgesetzt, das übergeordnete Element hat eine Breite.

Manfred
Nun ich hab das problem gelöst aber jetzt ist wieder eins auf getaucht am ende von Contact gibt es eine grauliche linie die mit dem befehl

Code:
}
	#header .nav li {
		float:left;
		background:url(images/divider.gif) 100% 0 repeat-y;
	}
gemacht wird. Und ich will irgend wie machen das ich nur 4 von diesen linien benutzen und nicht 5.
Mit Zitat antworten
  #6 (permalink)  
Alt 12.06.2011, 23:29
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

gib dem contact Link eine extra class ohne background Grafik.

Manfred
Mit Zitat antworten
  #7 (permalink)  
Alt 12.06.2011, 23:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.06.2011
Beiträge: 4
snakemaster befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
gib dem contact Link eine extra class ohne background Grafik.

Manfred
habe ich schon gemacht

CSS

Code:
/*===== header =====*/
#header .menu {
	background:url(images/menu-right.gif) 100% 0 no-repeat #fff;
}
	#header .menu .wrapper {
		background:url(images/menu-left.gif) 0 0 no-repeat;
		height:80px;
	}

#header .nav {
	float:left;
}
	#header .nav li {
		float:left;
		background:url(images/divider.gif) 101% 0 repeat-y;
	}
		#header .nav li a {
			padding:0 100px 0 0px;
			float:left;
			line-height:80px;
			text-decoration:none;
			color:#313131;
			text-decoration:none;
			font-size:20px;
		}
		#header .nav li a:hover, #header .nav li a.current {
	background:url(images/nav-bg1.gif) 0 0 repeat-x;
	color:#fff;
	text-align: center;
		}
		#header .nav li.first a {
			padding:0;
		}
			#header .nav li.first a b {
				float:left;
				padding:0 32px 0 32px;
			}
			#header .nav li.first a:hover b, #header .nav li.first a.current b {
				background:url(images/menu-left-act.gif) no-repeat 0 0;
			}
		#header .nav li.second a {
			padding:0;
		}
			#header .nav li.second a b {
				float:right;
				padding:0 20px 0 20px;
			}
			#header .nav li.second a:hover b, #header .nav li.second a.current b {
				background:url(images/menu-right-act.gif) no-repeat 100% 0;
			}
				#header .nav li.third a {
			padding:0;
		}
			#header .nav li.third a b {
				float:right;
				padding:0 30px 0 25px;
		}
				#header .nav li.forth a {
			padding:0;
		}
			#header .nav li.forth a b {
				float:right;
				padding:0 20px 0 20px;
		}
				#header .nav li.fifth a {
			padding:0;
		}
             #header .nav li.fifth a b {
				float:right;
				padding:0 14px 0 13px;
		}
Html

Code:
</head>

<body id="page1">
  <!-- header -->
  <div id="header">
  	<div class="tail-left"></div>
    <div class="bg">
      <div class="container">
        <div class="menu">
          <div class="wrapper">
            <!-- .nav -->
            <ul class="nav">
              <li class="first"><a href="index.html"><b>main</b></a></li>
              <li class="third"><a href="index-1.html"><b>about</b></a></li>
              <li class="forth"><a href="index-2.html"><b>service</b></a></li>
              <li class="fifth"><a href="index-3.html" class="current"><b>portfolio</b></a></li>
              <li class="second"><a href="index-4.html"><b>contact</b></a></li>
            </ul>
            <!-- /.nav -->
            <!-- .adv-nav -->
            <!-- /.adv-nav -->
          </div>
        </div>
        <div class="logo"><a href="index.html"><img src="images/arabiantransparent .png" alt="" width="231" height="451" /></a></div>
        <!-- .banners -->
        <!-- /.banners -->
      </div>
    </div>
  </div>
wie du siehst hab ich das schon erstellt.
Mit Zitat antworten
Antwort

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
Spry Menü bar falsch dargestellt im IE Hilltono CSS 2 02.12.2010 23:01
Div Höhe an Bildschirm Resthöhe anpassen amiroo CSS 3 10.03.2010 20:08
Navigation Bar ausblenden akma82 Javascript & Ajax 1 05.03.2010 20:31
CSS-Layout der Browsergröße anpassen Jen CSS 3 14.11.2008 09:39
<div>-Grösse anpassen arkanis CSS 3 01.10.2004 11:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:57 Uhr.