Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag16.03.2010 um 14:13 (UTC)    
Titel: Hilfe brauche richtigen Code

Hi,

ich hab auf meiner Page links 4 Buttons, die ich mit diesem Code platziert habe:

Code:
<div style="position: fixed; left: 0px; top: 30%; background-image:url();background-color: transparent; width: 48px; height: 48px;"> <a href="Adress-URL"><img src="Bild-URL" border="0" alt="" /></a></div>


Aber ich suche einen Code der die Buttons (ich mach dann andere) beim drübergehen von links nach rechts rauszieht , also verlängert mit so einem slide-effekt.

Wer kann da helfen ?

Gruss Paddy
______________


Zuletzt bearbeitet von depongo am 16.03.2010, 15:19, insgesamt 2-mal bearbeitet
Beitrag16.03.2010 um 14:24 (UTC)    
Titel:

Das nennt man Tabs,
dafür musst du die Grafiken in der langen und abgeschnittenen Form
speichern. Der Code wäre dann folgender.

CSS (ohne Style-Tags) :
Zitat:
#tabbar{
width: XXpx;
height: XXpx;
margin-top: XXpx;
margin-bottom: XXpx;
margin-left: XXpx;
float: right/left;
}

#tabbar li{
clear: both;
}

li.tab1 a, li.tab2 a{
height:XXpx;
width: XXpx;
display:block;
}

li.tab3 a, li.tab4 a{
height:XXpx;
width: XXpx;
display:block;
}

li.tab1 a{
background-image: url(Eingefahrener Tab);
}

li.tab1 a:hover{
background-image: url(Ausgesfahrener Tab);
}

li.tab2 a{
background-image: url(Eingefahrener Tab);
}

li.tab2 a:hover{
background-image: url(Ausgesfahrener Tab);
}

li.tab3 a{
background-image: url(Eingefahrener Tab);
}

li.tab3 a:hover{
background-image: url(Ausgesfahrener Tab);
}

li.tab4 a{
background-image: url(Eingefahrener Tab);
}

li.tab4 a:hover{
background-image: url(Ausgesfahrener Tab);
}



Text über dem Design:
Zitat:
<div id="tabbar">
<ul>
<li class="tab1"><a href="Zieladresse""></a></li>
<li class="tab2"><a href="Zieladresse"></a></li>
<li class="tab3"><a href="Zieladresse"></a></li>
<li class="tab4"><a href="Zieladresse"></a></li>
</ul>
</div>


Rot : Anzugebende Pixelwerte, für Position und Größe
Blau : An dieser Stelle muss eine Grafikadresse
eingetragen werden
Grün : An dieser Stelle muss ein Link eingetragen werden


Zuletzt bearbeitet von servicecheck am 16.03.2010, 15:33, insgesamt 4-mal bearbeitet
Beitrag16.03.2010 um 14:40 (UTC)    
Titel:

danke aber wie krieg ich es hin das es immer links am bildschirmrand ist und beim scrollen da bleibt ?
______________
Beitrag16.03.2010 um 14:45 (UTC)    
Titel:

Im Code einige Werte ändern, am wichtigsten sind diese hier:
Zitat:
#tabbar{
width: XXpx;
height: XXpx;
margin-top: 23px;
margin-bottom: 23px;
margin-left: -16px;
float: right;
}

Allerdings benötigt jede Seite eigene Werte. Du musst also die Rot markierten
Werte noch einmal überarbeiten.


Zuletzt bearbeitet von servicecheck am 16.03.2010, 15:45, insgesamt einmal bearbeitet
Beitrag16.03.2010 um 14:55 (UTC)    
Titel:

Ich bin echt zu blöd dafür Very Happy
______________
Beitrag16.03.2010 um 15:34 (UTC)    
Titel:

Du solltest vielleicht erstmal mehr CSS lernen, bevor du dich an Tabs wagst.
Diese sind wirklich schweres CSS, und eigentlich nur für Profis.
Beiträge der letzten Zeit anzeigen:   


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