• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

nav button sollen etwas nach unten...

Marco22

New member
guten morgen Ihr lieben,


ich habe 1 probleme.

das 1 ist ich würde gerne die Navbutton etwas nach unten haben damit sie sich nach oben öffnen können und dadrunter einen schwarzen strich. Ich bekomme es nicht hin bin ich doof?

Ja bin ich:)

danke

hier sind die Daten:

Marco Hoppe[homepage]

php

Code:
		<TITLE>Marco Hoppe[homepage]</TITLE>

<link rel="stylesheet" type="text/css" href="style1.css"/>
<style type="text/css">

</style>


</head>

<body>
	<div id="gesamt" style="margin-top:90px">
				
				<div class="animatedtabs">
						<ul>
						 <!-- CSS Tabs -->
							<li><a href="index.php"><span>Startseite</span></a></li>
							<li><a href="Übermich.php"><span>Über mich</span></a></li>
							<li><a href="Services.php"><span>Service / Leistung</span></a></li>
							<li><a href="Kontakt.php"><span>Kontakt/Impressum</span></a></li>
							<li><a href="Projekte.php"><span>Projekte</span></a></li>

						</ul>
				
			
				
				
				</div>
				
			
	</div>	
</body>

css
Code:
body, .bet {
 background-image: url(stripe1.png);
 }

 #gesamt {
 margin:0 auto;
 width:600px;
 height:600px;
 text-algin:left;
 background:#FFFFFF url(container.jpg) repeat-y;
 border:2px solid #000000;                                                     
                            
					  
 }

div{
	padding: 0 px;
	width: 600px;
	height: 700px; 
	border: 2 px;
	margin: 0 auto;
	background: url(container1.gif) ;
	text-align: left;
	background-position: 0 auto; /* Containerabstand zu #gesamt nach oben*/
	background-repeat: no-repeat;
	}
	

h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
	}
	

    body {
        margin:0;
        padding:0;
        font: bold 11px/1.5em Verdana;
}

h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}

<style type="text/css">
    
.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}


.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 1px; /*offset of first tab relative to page left edge*/
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: center;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Abstand zu nächsten TAB*/
padding: 0 0 0 9px;
text-decoration: none;

}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */


.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

</style>

ich danke schon mal im Vorraus
 
Moin,
HTML Tags gehören nicht in ein Stylesheet, Also raus mit '<style type="text/css"> ' und auch dem Endtag. Dann passt Du das Menü an. Außerdem braucht Deine Seite einen richtigen Doctype. Und der schließende HTML-Tag fehlt im Markup. Diese Fehler bekommst Du schnell raus, wenn Du HTML und CSS validierst.

Edit: Ach ja, Deine extra Angabe im CSS zu 'div' musst Du überdenken, da diese sich auf alle Divs auswirkt. Nimm sie mal raus. Dann siehst Du, dass Deine Linie, die Du in der Klasse 'animatedtabs' difiniert hast, auch angezeigt wird.
Außerdem kannst Du dann in dieser klasse über 'margin-top' auch einen Menüabstand nach oben einrichten.
Und wenn Du dann noch aus Deinem Html die Angabe 'margin-top:90px' rausnimmst und ins CSS zur ja schon definierten ID '#gesamt' setzt, sieht das Ganze schon besser aus.
 
Zuletzt bearbeitet:
supi klar und verständlich:) sorry.

PS: kannst Du mir jetzt vielleicht noch sagen wo ich es was ändern muss damit es nach oben geht und nicht nach unten?

1000 Dank
 
Du hast Dir das Menü bei Dynamic Drive rausgesucht. Hab jetzt mal das CSS angepasst. Du musst noch die Menüimages auf Deine Seite verlinken, also die URLs anpassen. (Edit: CSS geändert)
PHP:
body, .bet {
 background-image: url(http://www.bauchabformungen.de/netzwerk-md/stripe1.png);
 }
 #gesamt {
 margin:90px auto 0;
 width:700px;
 height:600px;
 text-algin:left;
 background:#FFFFFF url(http://www.bauchabformungen.de/netzwerk-md/container.jpg) repeat-y;
 border:2px solid #000000;
 }
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}
.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}
.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}
.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(http://www.dynamicdrive.com/cssexamples/media/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(http://www.dynamicdrive.com/cssexamples/media/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
Edit: Ich würde noch in der Klasse '.animatedtabs' einen kleinen Abstand nach oben mit 'margin-top' festlegen, damit das Menü nicht ganz oben klebt.
Außerdem musst Du noch jeweils die Menüpunkte auf den verschiedenen Seiten mit der Klasse 'selected' ausstatten, z.B.
PHP:
	<li class="selected"><a href="index.php"><span>Startseite</span></a></li>
 
Zuletzt bearbeitet:
hi anna:)

danke erstmal für die schnelle hilfe aber warum brauch ich "selected"? ich würde gerne die Button wie reiter haben wollen das sie sich wie im Orginal nach oben bewegen:))))

selected macht diese doch fest oder?


LG Marco
 
.. aber warum brauch ich "selected"? ich würde gerne die Button wie reiter haben wollen das sie sich wie im Orginal nach oben bewegen:))))

selected macht diese doch fest oder?

Ja, die Klasse 'selected' lässt den Button oben. Du sollst natürlich auch nicht auf allen Deinen Seiten jedem Menüpunkt diese Klasse geben, sondern immer nur dem Punkt auf der jeweiligen Seite, die die aktive ist, die der User sich also ansieht. So weiß man beim Hin- und Herblättern, welcher Menüpunkt gerade der aktive ist.

Sichere doch mal Dein CSS und setzte mal zum Probieren meines aus dem letzten Post ein. Die Buttons bewegen sich nach oben und nur einer - im Postbeispiel die Startseite - ist fest.
 
Ja, die Klasse 'selected' lässt den Button oben. Du sollst natürlich auch nicht auf allen Deinen Seiten jedem Menüpunkt diese Klasse geben, sondern immer nur dem Punkt auf der jeweiligen Seite, die die aktive ist, die der User sich also ansieht. So weiß man beim Hin- und Herblättern, welcher Menüpunkt gerade der aktive ist.

Sichere doch mal Dein CSS und setzte mal zum Probieren meines aus dem letzten Post ein. Die Buttons bewegen sich nach oben und nur einer - im Postbeispiel die Startseite - ist fest.


Hallo Anna nun weiss ich was Du meinst:) aber warum bewegen sich meine Button nach unten? Ich werde morgen mal etwas testen falls Du eine Idee hast sag es mir einfach danke Marco
 
Wenn Du gegenüber dem Originalscript etwas veränderst, dann mach das am besten Schritt für Schritt und schau Dir immer an, ob's noch so aussieht, wie Du es haben willst.

Also: Deine Klasse '.animatedtabs a' hast Du geändert. 'position:center;' gibt es nicht:
position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Lass hier 'relative' stehen.

Dann fehlt die korrekte Pfadangabe (oder das Bild komplett): www.dynamicdrive.com/cssexamples/media/tab-blue-left.gif

Und bei 'padding' hast Du den linken Abstand zu 1px geändert, da setzt Du wieder 9px ein.

Wenn Du erreichen möchtest, dass die Navi mittig platziert ist, dann ändere in der Klasse '.animatedtabs ul' die margin-left-Angabe von 10px auf 14px.
 
Zurück
Oben