Willkommen in der Webstatt
User-1 am 14.03.06 17:16

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!

netcup.de Warum gibt es hier Werbung?
User-2 am 14.03.06 17:25

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

User-1 am 14.03.06 18:14

ok..
Das Prop war einfach ein Zeilenumbruch im Quelltext? ôo
Hmmm...

Wär mal gucken will:

http://www.logd-game.de/zziemke/news.php

User-3 am 14.03.06 21:05

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

User-1 am 14.03.06 22:14

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...

User-3 am 14.03.06 22:23

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

User-4 am 14.03.06 22:30

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 :)

User-1 am 14.03.06 22:43

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*

User-3 am 15.03.06 12:21

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

User-1 am 15.03.06 12:39

Ja hab ich beides wie gesagt gemacht ^^
Nur gehts net wirklich? ôo

User-3 am 15.03.06 12:49

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

User-1 am 15.03.06 17:42

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 >_<

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt