Webstatt.org - Community seit 2006 - 2012 (2025?)

IE verschiebt die Nav nach unten? ôo

Avatar user-146
14.03.2006 16: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!
Avatar user-162
14.03.2006 16: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
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-146
14.03.2006 17: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-228
14.03.2006 20: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 lächeln
gruß, user-228
Avatar user-146
14.03.2006 21: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-228
14.03.2006 21: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ß, user-228
Avatar user-352
14.03.2006 21:30
Original von user-228
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ß, user-228


wollte ich auch grade posten,warste wohl nen weng shneller lächeln
new prepage available | www.maxi-hammes.de
Avatar user-146
14.03.2006 21:43
Ok danke erstmal..
Ich habs nun erstmal so gemacht:

HTML:
<div id="navigation">

  <ul id="navigation">

    <li id="<?=($location=="news"?"news_sel":"news"zwinkern?>"><a href="news.php"></a></li>

    <li id="<?=($location=="profil"?"profil_sel":"profil"zwinkern?>"><a href="profil.php"></a></li>

    <li id="<?=($location=="graphik"?"graphik_sel":"graphik"zwinkern?>"><a href="graphik.php"></a></li>

    <li id="<?=($location=="code"?"code_sel":"code"zwinkern?>"><a href="code.php"></a></li>

    <li id="<?=($location=="gaestebuch"?"gaestebuch_sel":"gaestebuch"zwinkern?>"><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-228
15.03.2006 11: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 zwinkern

gruß, user-228
Avatar user-146
15.03.2006 11:39
Ja hab ich beides wie gesagt gemacht ^^
Nur gehts net wirklich? ôo
user-228
15.03.2006 11: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ß, user-228
Avatar user-146
15.03.2006 16: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 >_<