[HTML][CSS] top strony problem w ie Opcje

[Lejto]

Mam problem z css i obrazkami w topie strony.
FF

IE

Jak widać pod ie się rozwala.
Oto kod css i html, co tu jest nie tak? Myślę że winni tu między innymi input.

[HTML] pobierz, plaintext 
	<div id="img"></div>
	<div id="img2"></div>
    <span style="float:left;"><form action="szukaj" method="post"><input type="text" size="22" name="user" /><input value="" type="submit" id="img3" /></form></span>
     <div id="img4"></div>
    <div id="img5"></div>
 	<div id="img6"></div>
[HTML] pobierz, plaintext 

i css

[HTML] pobierz, plaintext 
<style>
#img{
	background-image : url('../images/bl_01.gif');
	background-repeat: no-repeat;
	width:900px;
	height:69px;
	float: left;
}
#img2{
	background-image : url('../images/bl_02.gif');
	width:16px;
	height:24px;
	float: left;
}
#img3{
	background-image : url('../images/bl_05.gif');
	width:53px;
	height:24px;
	float: right;
}
#img4{
	background-image : url('../images/bl_06.gif');
	width:465px;
	height:24px;
	float: left;
	margin-left:3px;
}
#img5{
	background-image : url('../images/bl_09.gif');
	width:30px;
	height:24px;
	float: left;
}
#img6{
	background-image : url('../images/bl_12.gif');
	width:900px;
	height:50px;
	float: left;
}
 
</style>
[HTML] pobierz, plaintext 

[pedro84]

Chłopie, na co Ci tyle tych divów? Przecież to bez sensu. W ogóle to ten <span> problematycznie wygląda.

[Lejto]

no bo musiałem jakoś te obrazki umieścić dlatego musiałem tyle napisać? jak to inaczej zrobić
no span wygląda problematycznie, przez ten input no ale jak to poprawić?

[pedro84]

no bo musiałem jakoś te obrazki umieścić dlatego musiałem tyle napisać? jak to inaczej zrobić
no span wygląda problematycznie, przez ten input no ale jak to poprawić?

Można było to zrobić o wiele lepiej, moim zdaniem.

Jak naprawić? Position:absolute i relative (dla elementu nadrzędnego).

[Lejto]

Można było to zrobić o wiele lepiej, moim zdaniem.

Jak naprawić? Position:absolute i relative (dla elementu nadrzędnego).

ok, jak byś to zrobił?

[pedro84]

To jest element topu strony tak? Zarzuć jakimś większym screenem, a najlepiej to linkiem, to wtedy Ci mogę powiedzieć.

[Lejto]

http://lukasz-code.nspace.pl/blogi

[cook]

Może stwórz osobny arkusz dla IE i tam rób tak żeby tylko wszystko wyglądało dobrze pod IE: http://leksykot.top.hell.pl/notatki/www/ie-hacks.shtml

[Lejto]

no z drugiej strony też racja

[pedro84]

Wiesz...najpierw to popraw kod, bo w FF też Ci nie wyświetla poprawnie...

Moje propozycje:
Tworzysz div główny, #header

Kod

#header {
width:900px;
margin:0 auto;
height://tutaj wysokość obrazka
}

Nadajesz mu atrybut background:url(obrazek) top left; Jako obrazek podajesz, cały obrazek, bez cięcia. Zapisałbym go jako jpg z kolorem tła.

Nadajesz #header attrubyt position:relative;

Input, bez span, pozycjonujesz w nim relatywnie. To jest najlepsze rozwiązanie, masz jeden div i wszystko Ci będzie działać, bez hacków.

[Lejto]

ok, ale jakie błędy widzisz pod ff?
u mnie wszystko ok widać chyba
zrób screena
czyli w <div id="header"> wrzucić resztę tak?

[pedro84]

ok, ale jakie błędy widzisz pod ff?
u mnie wszystko ok widać chyba
zrób screena
czyli w <div id="header"> wrzucić resztę tak?

Tak, i tylko jeden obrazek, bez ensu tak ciąć i tworzyć n divów.

Jaki błąd? img4 przesunięty w prawo o 2px

[Lejto]

ok, zobaczę jak to będzie
może nie dopatrzyłem tego
używasz najnowszego firefoxa?

posklejałem ten header w całość wrzuciłem w diva potem 2 div dla input postion absolute marginesy i gra ale tylko pod ff w ie spada na dół input

[pedro84]

ok, zobaczę jak to będzie
może nie dopatrzyłem tego
używasz najnowszego firefoxa?

posklejałem ten header w całość wrzuciłem w diva potem 2 div dla input postion absolute marginesy i gra ale tylko pod ff w ie spada na dół input

Ja tam widzę dalej trzy, bez sensu trochę rozwiązanie Firefox 3.5.7, pod dwójką nie sprwdzałem

[Lejto]

bo nie aktualizowałem na serwerze ;p

[pedro84]

posklejałem ten header w całość wrzuciłem w diva potem 2 div dla input postion absolute marginesy i gra ale tylko pod ff w ie spada na dół input

To jak chcesz pomocy to zaktualizuj

[Lejto]

już zaktualizowane ; p

[pedro84]

już zaktualizowane ; p

No i teraz git. W FF 3.5.7 jest wszystko ok.

[bmL]

Zauważ że takich rzeczy jak loga nie wrzuca się jako tło divów z prostej przyczyny: dla tła diva nie ustawisz atrybutu alt. Takie zastosowanie eliminuje przeglądarki które nie obsługują obrazków, boty które indeksują twoją stronę itp. Nie wspominam już o osobach niepełnosprawnych.
Tak orientacyjnie:

[HTML] pobierz, plaintext 
<div id="top">
  <div class="left">
     <form action="szukaj" method="post"><input type="text" size="22" name="user" /><input value="" type="submit" id="img3" /></form>
  </div>
  <div class="center">
     <img src="...logo.gif" alt="Blog-Video Blog.oferta.com">
  </div>
  <div class="right"></div>
</div>
[HTML] pobierz, plaintext 

css

[HTML] pobierz, plaintext 
div#top {
  margin:0 auto;
  width: 900px; // nie wiem ile tam powinno być
  height: 300px; // nie wiem ile powinno byc
}
div#top div {
  float: left; // zeby byly w poziomie
  height: inherit; // wysokość taka sama jak w divie top
}
dv#top div.left form {
   margin: 100px 0 0 100px;
}
div#top div.left {
  background: url('...');
  width: xxPX;
}
div#top div.cnt {
  background: url('...');
  width: xxPX;
}
div#top div.right {
  background: url('...');
  width: xxPX;
}
[HTML] pobierz, plaintext 

No i taki kod powinien się sprawować tak samo we wszystkich przeglądarkach. Upewnij się też że masz ustawione na stronie odpowiedni doctype.

[pedro84]

@bmL Nie mieszaj chłopakowi z tym kodem, przecież to masakra. Więcej divów nie mogłeś zrobić? Poza tym, tło ustawia się, ustawia. Jak najbardziej. Dajesz wtedyu <h1> w nim tytuł strony, slogan i nadajesz mu atrybut text-indent:-999em;. Ta metoda działa zdecydowanie lepiej niż alt dla <img>. Poczytaj trochę zanim kogoś wprowadzisz w błąd.

Ten post edytował pedro84 27.01.2010, 12:10:24