[CSS]rózne wyglądy.. Opcje

[Michał90]

Witam,
Dlaczego to jest inaczej pod inną przeglądarką. Jak zrobić, żeby było to tak jak na IE ?

(IMG:http://images37.fotosik.pl/89/32c932040313f7b8m.png)

[HTML] pobierz, plaintext 
#logotl{
	background-image : url('images/logotl.gif');
	background-repeat : repeat -x;
	height : 163px;
	margin : 0px 0px 0px 0px;
	width : auto;
}
#logo{
	background-image : url('images/logo.gif');
	background-repeat : repeat -x;
	height : 163px;
	margin : 0px 0px 0px 0px;
	width : 276px;
}
 
#str{
	background-image : url('images/st.gif');
	height : 20px;
	margin : 0px 5px 0px 0px;
	float:right;
	width : 108px;
}
#grafika{
	background-image : url('images/gr.gif');
	height : 20px;
	margin : 0px 5px 0px 0px;
	float:right;
	width : 57px;
}
#inne{
	background-image : url('images/inne.gif');
	height : 20px;
	margin : 0px 5px 0px 0px;
	float:right;
	width : 79px;
}
#kontakt{
	background-image : url('images/kontakt.gif');
	height : 20px;
	margin : 0px 20px 0px 0px;
	float:right;
	width : 56px;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id = "logotl"><div id = "logo"></div>
<div id = "kontakt"></div>
<div id = "inne"></div>
<div id = "grafika"></div>
<div id = "str"></div>
</div>
[HTML] pobierz, plaintext 

jestem początkującym w css (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Pozdrawiam

[hiszpanespaniol]

elementy nawigacyjne to nie są div'y lecz odnośniki.
Stwórz listę <ul> odnośników, tylko jej nadaj "id". Kolejnym pozycjom listy nadaj klasę (czyli pozamieniaj np #kontakt na .kontakt) i wtedy:

[HTML] pobierz, plaintext 
#menu {
float: right;
margin: 0;
height: 20px;
clear: both;
padding: 0 20px 0 0;
list-style-type: none;
}
#menu li {
margin: 0;
height: 20px;
float: left; /*żebyś w kodzie nie musiał pisać od końca */
}
#menu li a {
display: block;
height: 100%;
float: left; /* to dla ie6 */;
text-align: left;
text-indent: -999em;
background-position: left top;
background-repeat: no-repeat;
}
[HTML] pobierz, plaintext 

jeśli lelementy są floatowane, to szerokości już nie mają na 100%, każdy ma "auto". teraz używasz tych klas które zrobiłeś z "id" i definiujesz w nich tylko szerokość elementu i obrazek tła.

[HTML] pobierz, plaintext 
li.kontakt a {
background-image: url('images/kontakt.gif');
width: 56px;
}
[HTML] pobierz, plaintext 

jedyne co może się inaczej wyświetlać pod ie i pod Fx, to paddingi i marginesy całej listy. Poczytaj o odpowiednich deklaracjach typu dokumentu i wtedy będzie git wszędzie.

Nie ucz się niewłaściwego stosowania znaczników. Teraz (w Twoim kodzie) jak wyłączysz css, to menu znika, a powinno być czytelne i dostępne.

edit:
jeszcze osobną kwestią pozostaje to, czy jest sens tworzyć obrazki jeśli jest na nich właściwie tylko tekst.

Ten post edytował hiszpanespaniol 29.03.2009, 14:53:57