✔ Navigationsleiste / Button(Grafik) Probleme

-Raid- · 1. August 2008

Hi,
ich bin's mal wieder...
Und zwar habe ich folgende zwei Probleme:

Das eine ist auf dem Bild (hoffentlich) zu erkennen. Der Home Button ist normal, der "Preise-Button" ist im Rollover.
Im normalen "Modus" haben die Buttons einen Pixel zuviel Platz nach oben, im Rollover "Modus" erscheint ein Pixel zuviel nach unten.

Das zweite Problem ist, dass ich die Bilder nicht direkt auf eine größe setzen kann, sondern die größe auf umwegen einstellen muss:

Code:

<ul id="navigation">
			<li class="home"><a href="index.php">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a></li>
			<li class="preise"><a href="index.php?page=preise">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a></li>
			<li class="bilder"><a href="index.php?page=bilder">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a></li>
			<li class="gaestebuch"><a href="index.php?page=gaestebuch">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a></li>
			<li class="links"><a href="index.php?page=links">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a></li>
		</ul></center>

Layout.css

Code:

* {
	margin:0;
	padding:0;
}

html,body {
	margin:0;
	padding:0;
	height:100%;
}

body {
	font-size:100.01%;
	font-family: Times New Roman;
	background: #270341;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 100%;
	clear: both;
	visibility: hidden;
}

	.clearfix {display: inline-block;}

	/* Hides from IE-mac \*/
	* html .clearfix {height: 1%;}
	.clearfix {display: block;}
	/* End hide from IE-mac */

h1#header {
	font-size: 1.0em;
	margin: 0px 0px -2px 0px;
	padding: 60px;
	background: url(images/header.jpg);
}
ul#navigation {
	text-align: center;
	font-size: 26px;
	width: 100%;
	height: 27px;
	background: url(images/inhaltsleiste.jpg);
}

ul#navigation li {
	list-style: none;
    display: inline;
}

ul#navigation li.home a:link {
	background: url(images/home.jpg);
}

ul#navigation li.home a:visited {
	background: url(images/home.jpg);
}

ul#navigation li.home a:hover {
	text-decoration: none;
	background: url(images/homeover.jpg); color: grey;
}

ul#navigation li.preise a:link {
	display: inline;
	background: url(images/preise.jpg);
	color: white;
	text-decoration:none;
	text-align:center;
}

ul#navigation li.preise a:visited {
	background: url(images/preise.jpg);
	color: white;
	text-decoration:none;
	text-align:center;
}

ul#navigation li.preise a:hover {
	text-decoration: none;
	background: url(images/preiseover.jpg); color: grey;
}

ul#navigation li.bilder a:link {
	display: inline;
	background: url(images/bilder.jpg);
	color: white;
	text-decoration:none;
	text-align:center;
}

ul#navigation li.bilder a:visited {
	background: url(images/bilder.jpg);
	color: white;
	text-decoration:none;
	text-align:center;
}

ul#navigation li.bilder a:hover {
	text-decoration: none;
	background: url(images/bilderover.jpg); color: grey;
}

ul#navigation li.gaestebuch a:link {
	display: inline;
	background: url(images/gaestebuch.jpg);
	color: white;
	text-decoration:none;
	text-align:center;
}

ul#navigation li.gaestebuch a:visited {
	background: url(images/gaestebuch.jpg);
	color: white;
	text-decoration:none;
	text-align:center;
}

ul#navigation li.gaestebuch a:hover {
	text-decoration: none;
	background: url(images/gaestebuchover.jpg); color: grey;
}

ul#navigation li.links a:link {
	display: inline;
	background: url(images/links.jpg);
	color: white;
	text-decoration:none;
	text-align:center;
}

ul#navigation li.links a:visited {
	background: url(images/links.jpg);
	color: white;
	text-decoration:none;
	text-align:center;
}

ul#navigation li.links a:hover {
	text-decoration: none;
	background: url(images/linksover.jpg); color: grey;
}

ul#inhaltsleiste {
	color: #ec44ef;
	font-size: 14px;
	margin: 0px 0px 0px 0px;
	padding: 0px 2px;
	background: url(images/inhaltsleistend.jpg);
}

ul#inhaltsleiste li{
	list-style: none;
	display: inline;
	padding: 0 25px 0 0;
}

ul {
	list-style:none;
}

div#Inhalt {
	width: 95.5%;

	background: #340549;
	margin: 1.6% 0px 7% 23px;
	padding: 0 0%;
	color: #ec44ef;
}

div#Inhalt h2 {
		text-align: center;
        font-size: 1em;
        margin: 0 !important;
        margin:0 0 0 -3px;
        padding: 0 0 0 0;
        background: url(images/Inhalttop.jpg);
        height:1%;
}

div#Inhalt h3 {
		text-align: center;
        font-size: 5px;
        margin: 0 0px 0px 0px;
        padding: 0 0 0 0;
        background: #650097;
		width: 100%;
		height: 1px;
}

div#Inhalt ul.admin {
	text-align: center;
	font-size: 1em;
	margin: 0em 0em;
	background: url(images/Inhalttop.jpg);
	height:1%;
}

div#Inhalt a:link {
	color: white;
}	
	
div#Inhalt a:visited{
	color: white;
}  

div#Inhalt a:hover{
	color: #970202;
	text-decoration:none;
}    

div#Inhalt p.center {
	text-align: center;
	font-size: 1em;
	margin: 0em 0em;
	padding: 0.8em 1em;
	margin-bottom: 0em;
}

div#Inhalt p {
	font-size: 1em;
	margin: 0em 0em;
	padding: 0.8em 1em;
	margin-bottom: 0em;
}
	
div#footer {
	text-align: right;
	margin:0 0px 0 0px;
	padding: 0;
	position:absolute;
	bottom:0;
	width: 100%;
	clear:left;
	color: #ec44ef;
	background: url(images/footer.jpg);
}

div#footer p {
	font-size: 1em;
	margin: 0 0;
	padding: 0em 0.4em;
}
	
div#footer a:link {
	text-decoration: none;
	color: #ec44ef;
}	
	
div#footer a:visited{
	text-decoration: none;
	color: #ec44ef;
}  

div#footer a:hover{
	color: #ab05ae;
	text-decoration:none;
}

Mit freundlichen Grüßen,
-Raid-

Maik · 1. August 2008

Hi,

ich empfehle dir, die Links (bei einer horizontalen Ausrichtung) mit der float:left-Eigenschaft auszuzeichnen, damit sie so "Block-Level-Charakteristika" erhalten, um sie dann im zweiten Schritt mit der Breite und Höhe zu formatieren, die der Dimension ihres Hintergrundbildes entspricht.

Das erspart dir nämlich das inflationäre Einfügen des geschützten Leerzeichens   in den Links, um ihnen auf diese Weise eine Breite zu verpassen, damit das Hintergrundbild überhaupt erscheint, und dürfte das Problem mit dem wechselnden Abständen aus der Welt schaffen.

mfg Maik

-Raid- · 6. August 2008

Hi,
ich war in den letzten Tagen leider verhindert und konnte so nicht antworten.
Leider schaff ich es nicht, die Buttons mit einer festen Breite zu versehen.
Könntest du mir vielleicht den Code anpassen und mir zeigen, was du gemacht hast?
Wäre sehr nett.

Zudem kommt nun noch ein kleiner Fehler hinzu.
Ich habe ein Dropdown-Menü in meine Seite eingebaut.
Das Problem ist, das dass Dropdown-Menü mit der allgemeinen Navigation (margin der Schrift) skaliert.

Mit freundlichen Grüßen,
-Raid-

Maik · 6. August 2008

Hi,

wieso schaffst du es nicht, die Links mit der Dimension auszustatten, die ihrem Hintergrundbild entspricht?

Ich hab dir hierfür doch die zwei Arbeitsschritte genannt.

mfg Maik

-Raid- · 6. August 2008

Tjoa, warum schaff ich das nicht...

Code:

ul#navigation li.home a:link {
	float:left;
	width:91px;
	height: 30px;
	margin: 0px 0px 0px 85px;
	background: url(images/home.jpg);
}

Der erste Button wird richtig angezeigt, danach erscheinen keine mehr.

Und, was ist mit dem Banner, darf ich die Grafik benutzen?

Maik · 6. August 2008

Code:

ul#navigation li {
float: center;
position: relative;
margin: 0px -77px 25px 70px;
list-style: none;
display: inline;
}

gibt's schon mal nicht in der CSS-Spezifikation.

Und dann würde ich mal die horizontalen Außenabstände der einzelnen Links auf ihre Sinnhaftigkeit überprüfen.

mfg Maik

-Raid- · 6. August 2008

Das gehört zum Dropdown-Menü (nicht hauen)

Hab's in

Code:

text-align: center;

geändert.

Margin in der ul#navigation li { in folgendes verändert.

Code:

	margin: 0px 0px 0px 0px;

Ah, das Dropdown-Menü wird jetzt immerhin fast richtig angezeigt.

Maik · 6. August 2008

Tja, dass die übrigen Hintergrundbilder nicht angezeigt werden, liegt einfach daran, dass für diese Links keine Breite und Höhe deklariert ist.

Der unnötig aufgeblähte CSS-Code lässt sich aber auch durch ein geschicktes Gruppieren der Selektoren mit gleichlautenden CSS-Regeln dezimieren - hier exemplarisch für die ersten beiden Menüpunkte:

Code:

ul#navigation li a { /* gilt für alle Links! */
        float:left;
        height:31px;
}

ul#navigation li.home a:link, ul#navigation li.home a:visited {
        width:91px;
        margin: 0px 0px 0px 85px;
        background: url(images/home.jpg);
}

ul#navigation li.home a:hover {
        background: url(images/homeover.jpg);
}

ul#navigation li.bilder a:link, ul#navigation li.bilder a:visited {
        width:86px;
        background: url(images/bilder.jpg);
}

ul#navigation li.bilder a:hover {
        background: url(images/bilderover.jpg);
}

Und wieso verwendest du hier überhaupt jeweils einen Klassenbezeichner, wenn die Menüpunkte doch eindeutig sind bzw. jeweils nur einmal im Dokumentbaum enthalten sind?

mfg Maik

-Raid- · 6. August 2008

Code:

ul#navigation li a { /* gilt für alle Links! */
        float:left;
        height:30px;
}

Und wieder was gelernt.
Danke, die Navigation funktioniert nun einwandfrei.

Guckst du mal wegen dem Banner unter dem Link "Links".
Kann ich den verwenden?

Maik · 6. August 2008

Meinst du den "tutorials.de"-Banner?

mfg Maik

✔ Navigationsleiste / Button(Grafik) Probleme

-Raid-

Mitglied

Maik

-Raid-

Mitglied

Maik

-Raid-

Mitglied

Maik

-Raid-

Mitglied

Maik

-Raid-

Mitglied

Maik

Neue Beiträge