| Autor |
Nachricht |
flohoto
Threadersteller
Dabei seit: 14.04.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 17.06.2008 14:20
Titel Horizontale ul-Navi |
  |
|
Servus.
Ich habe 4 Bilder als Menüelemente und will diese einfach mittig ausgerichtet nebeneinander in einem div sitzen haben.
Aber mit uls und lis macht mir das teil gar nix und mit float:right alles falsch.
Also CSS sieht so aus:
| Code: | /* ANFANG NAVICSS*/
#navcontainer{
border: 0;
padding:0;
margin: auto;
background-image: url(slice/navbg.jpg);
color: #FFF;
width: 100%;
text-align: center;
}
.mit{
text-align: center;
background-image: url(slice/navbg.jpg);
}
.over{
background-image:url(slice/navteil_06.gif);
width:157px;
height:51px;
display:block;
float: right;
}
.over:hover, .over:active, .over:focus{
background-image:url(slice/active_06.jpg);
}
.demo{
background-image:url(slice/navteil_05.gif);
width:157px;
height:51px;
display:block;
float: right;
}
.demo:hover, .demo:active, .demo:focus{
background-image:url(slice/active_05.jpg);
}
.vorteil{
background-image:url(slice/navteil_07.gif);
width:157px;
height:51px;
display:block;
float: right
}
.vorteil:hover, .vorteil:active, .vorteil:focus{
background-image:url(slice/active_07.jpg);
}
.flitzer{
float: right;
}
/* ENDE NAVICSS*/ |
Und html sieht dann so aus:
| Code: | <div id="navcontainer">
<a href="#"><img src="slice/navteil_03.gif" class="flitzer"/></a>
<a href="news.php" class="over"></a>
<a href="news.php" class="demo"></a>
<a href="news.php" class="vorteil"></a>
</div>
<!--ENDE NAV --> |
Alle Punkte werden dann aber ganz an den Rand rechts gepappt und ich will sie ja mittig haben deswgen auch: | Code: |
margin: auto; text-align: center; |
Also was mach ich falsch beziehungsweise wie mache ich das alternativ als ul-Navigation?
merci vielmals
|
|
| |
  |
 |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: 
|
|
| |
|
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 17.06.2008 14:59
Titel
|
|
|
| heiko_rs hat geschrieben: | | (sorry für Link auf "Fremdforum") |
Dafür braucht man sich hier sicher nicht entschuldigen. Top Sache da muss nicht
immer wieder alles vorgekaut werden.
|
|
| |
 |
|
flohoto
Threadersteller
Dabei seit: 14.04.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 17.06.2008 15:07
Titel
|
|
|
ehhm.
ohne jetzt irgendwie undankbar zu klingen.
aber mein problem ist eher nicht, dass die Navigation im ie 3.24 nicht dargestellt wird.
sondern dass firefox und safari schon alles falsch also wahrscheinlich richtig darstellen.
Ich bin jetzt in dem ganzen Webdevelopmentding nicht derart tief drin als dass ich mir das antun muss.
Gibt es nicht irgendeine Möglichkeit so etwas stinknormales auch stinknormal einfach zu machen.
Ich check schon wie ich mit ner liste eine horizontale navigation hinbekomme und ich vertshe auch wie ich unterschiedliche bilder mit unterschiedlichen hoverzuständen einbaue. Aber ich brauche das beides halt irgendwie kombiniert.
Und jetzt kommts:  Am besten CopyPaste, weil meine Augen brennen, oder zumindest irgendwas einfacheres.
trotzdem ehrlich danke für deinen link, aber das ist dann eher was für richtige Profis ( und da geh ich dann zu psd2html.com)
|
|
| |
|
|
Zeithase
Dabei seit: 09.05.2005
Ort: Erfurt
Alter: 39
Geschlecht:
|
Verfasst Di 17.06.2008 15:13
Titel
|
|
|
| flohoto hat geschrieben: | Ich bin jetzt in dem ganzen Webdevelopmentding nicht derart tief drin als dass ich mir das antun muss.
Gibt es nicht irgendeine Möglichkeit so etwas stinknormales auch stinknormal einfach zu machen. |
Ich wuesste nicht, was daran nicht "stinknormal einfach" waere. Wenn Du damit nicht klar kommst und es Dir nicht selbst "antun musst", hilft der Gang in die Jobboerse.
|
|
| |
|
|
Snifferdog
Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht:
|
Verfasst Di 17.06.2008 16:08
Titel Re: Horizontale ul-Navi |
|
|
Mh also mit Listenelementen sollte es eigentlich kein Problem sein. Wenn du dir den Link genauer anschaut hättest, den heiko gepostet hat, dann könntest du ja vergleichen und sehen wieso das Ganze bei dir nicht klappt, nech ? 
Hab dir hier mal son Grundgerüst zusamen gehauen ... brauchste jetzt nur noch auf deine Wünsche anpassen:
| Code: |
<style type="text/css">
li{
position: relative;
width: 100px;
margin: 0px;
padding: 0px;
border: 1px red solid;
float:left;
list-style-type: none;
}
</style>
<ul>
<li> Teil 1</li>
<li> Teil2</li>
<li> Teil3</li>
<li> Teil4</li>
</ul>
|
Funktioniert einwandfrei 
Gruß
EDIT: Ups .. da war ich wohl mal wieder zu schnell .. naja wie Zeithase schon sagt die Änderung für den Hover ist nicht sonderlich kompliziert: Da packst du deinen Hovercode einfach zwischen die Li Tags ^^ das wars
Zuletzt bearbeitet von Snifferdog am Di 17.06.2008 16:11, insgesamt 1-mal bearbeitet
|
|
| |
|
|
flohoto
Threadersteller
Dabei seit: 14.04.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 17.06.2008 17:35
Titel
|
|
|
|
Merci
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
CSS - Horizontale Navi hilfe
Horizontale Navi bei contenido
Horizontale Navi - Wie realisiere ich das am besten?
Hilfe! HOrizontale Navi mit horizontaler Subnavi
horizontale css navi mit horizontaler subnavi zentrieren
Horizontale Scrolleiste im IE
|
|
Willkommen auf dem Portal für Mediengestalter
