Willkommen in der Webstatt Zum Webstatt Blog und Stories
Chi Wang Chi Wang 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?
der_nic der_nic 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

Chi Wang Chi Wang 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

leo 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ß, leo

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

leo 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ß, leo

_Max_ _Max_ am 14.03.06 22:30

Quote
Original von leo
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ß, leo


wollte ich auch grade posten,warste wohl nen weng shneller :)

Chi Wang Chi Wang 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*

leo 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ß, leo

Chi Wang Chi Wang am 15.03.06 12:39

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

leo 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ß, leo

Chi Wang Chi Wang 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