Und zwar hab ich meine erste kleine Portofolio gecodet..
Es geht auch alles soweit? ôo
Nur macht der IE mal wieda Ärger -.-..
Und zwar macht er Whitespace da hin, wo keiner hin soll...
In Opera, FF und Safari geht alles wie es soll..
Internetexplorer - Screen
Firefox-Screen
Safari-Screen
Source
Das Weiße is wie man sieht, zwischen Header und Navigation -.-
Aja ^^..
Wunder euch net über den Chaosrollover Quelltext ^^.. Den hat mir Imageready ausgespuckt xD..
Werde den mal versuchen in CSS zu machen? ôo
Aber ich weiß net wie man das "selected" machen soll..
Also wenn den Button angeklickt wurde..
gibts da auch ne Pseudoclass wie :hover?
THNX SCHONMAL!
also wenn der Button angeklickt wird und noch nicht losgelassen wurde ist das :active
wenn der Link schon mal gedrückt wurde und losgelassen ist ist das :visited
ok..
Das Prop war einfach ein Zeilenumbruch im Quelltext? ôo
Hmmm...
Wär mal gucken will:
http://www.logd-game.de/zziemke/news.php
hallo,
ich empfehle dir folgendes tutorial für dein menu:
http://wellstyled.com/css-nopreload-rollovers.html
und das hier noch für deine "auto-auswahl":
http://24ways.org/advent/auto-selecting-navigation
bei fragen -> fragen :)
gruß, xyz-118
Hmm ich hab mir nun voher auf meinem Homeserver mein eigenes CSS Rollover gemacht? ôo
Mit <a> und 3 CSS Classes xD..
Aba nun sind die ganzen Buttons untereinander und netmehr nebeneinander? ^^
Kann mir wieder jmd. helfen plz? ôo
Naja, aber wenigstens konnte ich schonmal von gut 60 Imageready Navbuttongif auf 18 Gifs runter gehen xD...
das liegt einfach an dem display:block in deinem a
du machst einfach folgendes:
eine ungeordnete liste wie ungefähr:
<ul id="nav">
<li><a href="#" class="home">home</a></li>
usw...
</ul>
css:
ul#nav li {
display: inline;
}
ul#nav li a:link, ul#nav li a:visited {
display: block;
und die background-img geschichte aus dem einen link.
}
gruß, xyz-118
Quote
Original von xyz-118
das liegt einfach an dem display:block in deinem a
du machst einfach folgendes:
eine ungeordnete liste wie ungefähr:
<ul id="nav">
<li><a href="#" class="home">home</a></li>
usw...
</ul>
css:
ul#nav li {
display: inline;
}
ul#nav li a:link, ul#nav li a:visited {
display: block;
und die background-img geschichte aus dem einen link.
}
gruß, xyz-118
wollte ich auch grade posten,warste wohl nen weng shneller :)
Ok danke erstmal..
Ich habs nun erstmal so gemacht:
HTML:
<div id="navigation">
<ul id="navigation">
<li id="<?=($location=="news"?"news_sel":"news")?>"><a href="news.php"></a></li>
<li id="<?=($location=="profil"?"profil_sel":"profil")?>"><a href="profil.php"></a></li>
<li id="<?=($location=="graphik"?"graphik_sel":"graphik")?>"><a href="graphik.php"></a></li>
<li id="<?=($location=="code"?"code_sel":"code")?>"><a href="code.php"></a></li>
<li id="<?=($location=="gaestebuch"?"gaestebuch_sel":"gaestebuch")?>"><a href="gaestebuch.php"></a></li>
</ul>
</div>
CSS:
div#navigation {
padding-top:0px;
padding-bottom: 20px;
}
ul#navigation li {
display: inline;
}
li#news {
width:127px;
height:22px;
background-repeat:no-repeat;
background-image:url(../img/navbuttons/News.gif);
}
li#news:hover {
width:127px;
height:22px;
background-repeat:no-repeat;
background-image:url(../img/navbuttons/News-over.gif);
}
li#news_sel {
width:127px;
height:22px;
background-repeat:no-repeat;
background-image:url(../img/navbuttons/News-sel.gif);
}
li#profil {
width:127px;
height:22px;
background-repeat:no-repeat;
background-image:url(../img/navbuttons/Profil.gif);
}
li#profil:hover {
width:127px;
height:22px;
background-repeat:no-repeat;
background-image:url(../img/navbuttons/Profil-over.gif);
}
li#profil_sel {
width:127px;
height:22px;
background-repeat:no-repeat;
background-image:url(../img/navbuttons/Profil-sel.gif);
}
Aber nun zeigt er da garnix an? ôo
Nur Freiraum? ôo
Hab sicha was falsch xD..
Screen
URL vom Testserver: *klick*
mal als beispiel, so kann dein selector aussehen:
li a:link, li a:visited, {
display: block;
width:127px;
height:22px;
background-repeat:no-repeat;
background-image:url(../img/navbuttons/News.gif);
}
und dann entsprechend:
li a:hover {
blabla.
}
es bietet sich an auf die die beiden links, die ich anfangs gepostet habe zurückzugreifen - nur eine empfehlung ;)
gruß, xyz-118
Ja hab ich beides wie gesagt gemacht ^^
Nur gehts net wirklich? ôo
vergleich mal deinen css selektor mit meinem!
du änderst die eigenschaften von li, ich aber die von li a:link sowie li a:visited
gruß, xyz-118
Sorry, dass ich mich grade blöd anstelle -.-
aber meinste so?:
li news:link; news:visited {
width:127px;
height:22px;
background-repeat:no-repeat;
background-image:url(../img/navbuttons/News.gif);
}
Das will auch net >_<