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

[Lejto]

Mam problem z css i obrazkami w topie strony.
FF
(IMG:http://img715.imageshack.us/img715/8826/30816085.gif)
IE
(IMG:http://img188.imageshack.us/img188/5271/11603717.gif)
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 (IMG:style_emoticons/default/smile.gif)

[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 (IMG:style_emoticons/default/smile.gif) Firefox 3.5.7, pod dwójką nie sprwdzałem (IMG:style_emoticons/default/smile.gif)

[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 (IMG:style_emoticons/default/smile.gif)

[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

[bmL]

Ta a google indexuje to co jest przesunięte poza obszar strony... Właśnie do tego dąży albo już tak jest że ignoruje takie rzeczy BA! nawet usuwa strony ze swojej bazy danych za tworzenie niewidocznych dla użytkownika tagów. Więc życzę powodzenia z takim podejściem. A nie liczy się to ile jest divów tylko żeby rozwiązanie było praktyczne i czytelne teraz jeżeli będzie coś chciał w przyszłości wstawić np. po prawej strone reklamę (na przykład) to nie ma z tym problemu. Dodatkowo miłym rozwiązaniem jest ustawienia dla loga strony link przekierowujący na stronę główną ciekawe jak ustawisz to dla diva... javascriptem?... Najlepiej w ogóle wyeliminować ze swojej strony tag img bo po co on nam skoro można wstawić diva z tłem...

[pedro84]

Ta a google indexuje to co jest przesunięte poza obszar strony... Właśnie do tego dąży albo już tak jest że ignoruje takie rzeczy BA! nawet usuwa strony ze swojej bazy danych za tworzenie niewidocznych dla użytkownika tagów. Więc życzę powodzenia z takim podejściem. A nie liczy się to ile jest divów tylko żeby rozwiązanie było praktyczne i czytelne teraz jeżeli będzie coś chciał w przyszłości wstawić np. po prawej strone reklamę (na przykład) to nie ma z tym problemu. Dodatkowo miłym rozwiązaniem jest ustawienia dla loga strony link przekierowujący na stronę główną ciekawe jak ustawisz to dla diva... javascriptem?... Najlepiej w ogóle wyeliminować ze swojej strony tag img bo po co on nam skoro można wstawić diva z tłem...

Oj Kolego, chcesz mi powiedzieć, że alt img jest bardziej atrakcyjny dla Google niżeli

[HTML] pobierz, plaintext 
<h1><a href="strona.com">Strona.com - slogan strony</a></h1>
[HTML] pobierz, plaintext 

? Powodzenia życzę w takim razie zamykając radząc poczytać o poprawnych praktykach. A poprawność kodu ma znaczenie, jeśli o tym nie wiesz, poczytaj. EOT. Pozdrawiam.

[bmL]

Kolego czy ty przeczytałeś co napisałem (ze zrozumieniem)? Próbuję Ci powiedzieć że twoje ukrywanie tekstu poprzez text-indent:-999em jest łamaniem regulaminu, czy niewyraźnie jest to napisane?

A poprawność kodu ma znaczenie, jeśli o tym nie wiesz, poczytaj.

A co ma piernik do wiatraka? Mój kod jest poprawny to twoje ukrywanie tekstu jest dziwnym wymysłem daleko oddalonym od standardów w3c.

Ten post edytował bmL 27.01.2010, 18:26:32

[Lejto]

heh, dzięki chłopaki za rady (IMG:style_emoticons/default/smile.gif)
jak już wspomniałem ten input źle działa pod IE wyświetla się na dole strony, jak temu zaradzić?

[pedro84]

Kolego czy ty przeczytałeś co napisałem (ze zrozumieniem)? Próbuję Ci powiedzieć że twoje ukrywanie tekstu poprzez text-indent:-999em jest łamaniem regulaminu, czy niewyraźnie jest to napisane?
A co ma piernik do wiatraka? Mój kod jest poprawny to twoje ukrywanie tekstu jest dziwnym wymysłem daleko oddalonym od standardów w3c.

Chłopie, przecież Ty mówisz o czymś zupełnie innym. Ukrywanie tekstu za pomocą display:none; jest zabronione. Z resztą, poczytaj.

[bmL]

Odgrzeję naleśnika ale wcześniej nie zauważyłem odpowiedzi, oryginalny problem pewnie już jest rozwiązany ale w sprawie ukrywania tekstu zapraszam tutaj:
http://www.456bereastreet.com/archive/2005...s_to_hide_text/
Radzę dobrze się wczytać. Wpis co prawda sprzed 5 lat ale skoro wtedy ostrzegali że to może się zmienić to teraz pewnie nadal tak jest.

Ten post edytował bmL 18.02.2010, 15:21:30