Suche im Forum:
Suchen


Autor Nachricht
Beitrag09.10.2009 um 22:34 (UTC)    
Titel: Naviprobleme - Buttons funzen nicht hover ohne Schriftlink

Hi,

ich bin gerade dabei meine Seite weiter zu überarbeiten.

Und zwar möchte ich es so, dass meine Navileiste von links nach rechts geht und aus einzelnen bildern besteht, welche vorbeschriftet sind. Leider bekomme ich folgendes nicht hin:

Arrow Buttons nebeneinander
Arrow Buttons so verlinken, dass hover erhalten bleibt, aber der textlink weg ist!

Kann mir jemand helfen?

Text über dem Design
Zitat:

<div id="grossheader"></div>

<div id="navigation1"> </div> <a href="home.htm"> Home</a> </div>
<div id="navigation2"> </div>
<div id="navigation3"> </div>
<div id="navigation4"> </div>
<div id="navigation5"> </div>
<div id="navigation6"> </div>





CSS-Codes ohne StyleTags
Zitat:

[...]
#navigation1 {
top:300;
left: 200px;
width: 125px;
height: 40px;
background-image: url(http://www.abload.de/img/nav_home_unhoverxyzi.png);
}

#navigation1:hover {
top:300;
width: 125px;
height: 40px;
background-image: url(http://www.abload.de/img/nav_hometb57.png);
}

#navigation a {
height: 51px;
padding-top: 15px;
font-size: 15px;
font-family:arial;
background-image: url();
color: transparent;
float: left;
}

#navigation a:hover {
color: #transparent;
}
}
[/code]
______________
Search Designs and Grafics? - Come to me!
Beitrag10.10.2009 um 06:05 (UTC)    
Titel: Re: Naviprobleme - Buttons funzen nicht hover ohne Schriftli

Hey,

Damit deine Navigation so aussieht, wie du das willst, mache ich es jetzt komplett anders.

1. Schritt: Navigation und Header einbauen (Text über Design):

Zitat:
<div id="grossheader"></div>
<div id="navigation">
<a href="Home.htm" class="home"></a>
<a href="Link1.htm" class="link1"></a>
<a href="Link2.htm" class="link2"></a>
Hier können weitere Punkte eingebaut werden
</div>


Erklärung:
Statt wie bisher einen Link mit einer Div-Klasse zu definieren, bearbeiten wir es jetzt, indem jeder Link eine eigenen Klasse im a-Tag bekommt. Ist einfacher, sieht besser aus und hilft noch bei einer anderen Sache.

2. Schritt: Navigation und Header positionieren - Horizontale Navigation (CSS-Code ohne Styletags)

Zitat:

#grossheader
{
background-image: url(BILDADRESSE);
width: 900px; /* Beliebige Breite einstellen */
height: 125px; /* Beliebige Höhe */
margin: 0 auto; /* positioniert es mittig, wenn du mein Tut genutzt hast, brauchst du das aber nicht */
}
#navigation {
width : 900px; /* Beliebige Breite */
height : 51px; /* Beliebige Höhe */
margin: 0 auto;
}
#navigation a {
height: 51px;
font-size: 0px;
float: left;
display: block;
}


Erklärung:
width und height definieren jeweils die Höhe und Breite der beiden Klassen, margin: 0 auto; setzt es mittig. Bei Navigation a wird die Höhe der Buttons eingestellt und das sie horizontal weitergehen (float: left;). display: block macht aus dem Link eine verlinkte Box.

3. Schritt: Einzelne Buttons definieren (CSS-Code ohne Styletags):

Zitat:

.home {
background-image: url(Button_Home); /*Bildadresse des Buttons */
width: 250px; /* Breite des Buttons */
}

.home:hover {
background-image: url(ButtonHover_Home); /* Bildadresse des Hovers */
}


Erklärung:
Da mit #navigation a (Schritt 2) schon fast alles für die Buttons definiert ist, muss man jetzt nur noch das Hintergrundbild ersetzen und eine Breite für den Button festlegen. Dies kann beliebig erweitert werden, hat man eine Klasse die kontakt heißt, einfach .kontakt und .kontakt:hover benutzen.

Das wärs.

mfg
______________
THE JOY OF NOT BEING SOLD ANYTHING
Beitrag10.10.2009 um 07:43 (UTC)    
Titel:

Vielen herzlichen Dank,

Du hast mich einen großen Schritt weiter gebracht =)
______________
Search Designs and Grafics? - Come to me!
Beitrag10.10.2009 um 08:53 (UTC)    
Titel:

grafic4you hat Folgendes geschrieben:
Vielen herzlichen Dank,

Du hast mich einen großen Schritt weiter gebracht =)

Kein Problem.

Damit hat sichs wohl erledigt.

closed
______________
THE JOY OF NOT BEING SOLD ANYTHING
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de