[CSS] Tworzenie header'a

0

Mam dwa obrazki:

user image oraz user image

Chce z tego skontrulowac header taki jak widzicie powyzej ;] Tyle ze ten powyzej to jeden duzy obrazek.

Niby wszystko proste, dwa divy w jednym takie tlo, w drugim drugie tlo. Jednakze trzeba uwzglednic kolejny div m.in. ten ktory wyswietla informacje i podreczne linki: "Logowanie | Rejestracja...". Jezeli login usera bedzie za dlugi, caly tekst nie zmiesci sie w prawym divie i tekst sie rozjedzie :/

Jak to najlepiej wykonac?

0

Hmm... Próbowałbym zrobić to trochę inaczej - To menu górne (cały ten zielony pasek) zrobić niezależne, natomiast samo logo skonstruować z tej części po lewej stronie i tego co jest po prawej, tylko bez tego zielonego na górze. Dodatkowo pozycjonowany absolutnie div złożony z tego obrazka kończącego menu i całej reszty na zielonym tle. Wówczas elementy te będą poniekąd niezależne (pozycjonowany absolutnie div powinien nachodzić na tego, który jest normalnie pozycjonowany bez problemu), a dodatkowo w razie nachodzenia tego menu na tą lewą część logo (zieloną) nie będzie powodować głupich efektów graficznych, tylko menu się po prostu ładnie rozciągnie.

0

Dzieki za sugestie. Poszedlem tym tropem i wymyslilem cos innego bez koniecznosci pozycjonowania absolutnego. Efekt jest znakomity na Operze i FF (na IE sie wszystko sypie). Wpadlem na to przez przypadek. Otoz ustawilem obok siebie dwa puste divy. Jeden mial wyswietlac lewa czesc headera (logo) a drugi cala reszte.

W CSS wygladalo to tak:

.div1
{  
	width:			100%;
	height:			146px; 	
	background:		url("images/header_left.gif") no-repeat;
	float:			left;

}

.div2
{
	background:		url("images/header_right.gif") repeat-x;
	height:			146px;	 	
}

Nie wiem jak to dziala gdyz przeciez w pierwszym divie ustailem szerokosc na 100% ! Ale to dziala, lewa czesc sie wyswietla znakomicie, wszystko jest ok! Ale IE zachowuje sie w tym wypadku bardziej przytomnie poniewaz pierwszy div jest rozciagniety na 100% tak wiec drugi nie ma sie gdzie zmiescic wiec jest pod spodem ;)

Pytanie, czy ktos wie jak to rozwiazac aby dzialalo pod IE? [green]

0

Hmm... A jest gdzieś w necie jakaś testowa stronka z tym, prościej by było się bawić i testować...

0

Prosze Cie bardzo: http://www.tvk.wroc.pl/~tvk324a/4p-test/

Obecnie nadalem "sztywna" szerokosc. Na IE i FF ok. Na IE widoczna "szparka" pomeidzy dwoma divami (nie wiem czemu).

0

<div style="height:487px;background: white url('header_right.gif') repeat-x"><img src="header_left.gif" alt="logo" width="487" height="146" /></div>

Albo, żeby dodać inne też elementy:

<div style="height:487px;background: white url('header_right.gif') repeat-x"><img src="header_left.gif" alt="logo" width="487" height="146" style="float:left" /><p style="margin-top:5px">TUTAJ MENU</p></div>

0

maniek_2: to byloby najprostsze rozwiazanie :D Hehe, powiem szczerze ze nawet nie pomyslalem o tym zeby ten obrazek robil za klikalny img :] Na ten obrazek musialaby byc jeszcze nakladana jeszcze jedna warstwa (zobacz jak to jest teraz w serwisie, u gory masz zielony pasek:

Strona główna :: Forum :: Programowanie :: JS/PHP/XML

Pewnie da sie ja nalozyc przy pomocy position: absolute.

Druga sprawa jest nastepujaca. Spojrz w lewy gorny rog loga. Jest on lekko zakraglony, ten rog obrazka jest przezroczysty. W twoim rozwiazaniu nie byloby tego efektu. Pewnie daloby sie to jakos rozwiazac przy pomocy background-position ale poczekam jeszcze na inne sugestie :)

Mimo wszystko - thx.

0

Problem tak na prawde leży w tym rogu, który ma być prześwitujący. Bo jeżeli damy:

<div style="background: transparent url('header_left.gif') no-repeat;height:146px">
<p style="width:484px;float:left;margin-top:120px">fffffffffffffffffffff</p>
<p style="background: url('header_right.gif') repeat-x;height:146px;padding-top:5px;margin-left:484px;">sssssssssssssssssss</p>
</div>

To widać rwanie. Ale trzeba było troche margin skrócić bo w IE robi mały odstęp. Dlatego bym wykorzystał mój pierwszy poimysł (tylko zamiast img dać jakiegoś p z tłem) a róg rysunku nie robił bym prześwitujący tylko wypełnił zbliżonym kolorem do tła.

0
Adam Boduch napisał(a)

Obecnie nadalem "sztywna" szerokosc. Na IE i FF ok. Na IE widoczna "szparka" pomeidzy dwoma divami (nie wiem czemu).

To dość dziwne ale gdy do .headerContent dopisałem: position:relative; left:5px; szparka na IE zniknęła, tylko jest przerwa z lewej strony więc ten wariant odpada. Ale wciąż nie rozumiem dlaczego jest ta przerwa pośrodku. W IE prawy obrazek nie sięga lewej krawędzi tylko zaledie 5px od prawej krawędzi lewego obrazka. Poza tym lewy obrazek ma białe tło. Trochę to dziwne.

0

Dobra jest rozwiązanie. Jest to znany bug pod IE. Gdy dajemy float:left to element go opływający po prawej zawsze jest odbity od elementu opływanego o 3px. Rozwiązanie mam takie:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>tytuł</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"> 
* {
 padding:0;
 margin:0;
}
body {
cursor:default;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
}
#headleft
{
 float:left;
 background: url('header_left.gif') no-repeat;
 width:487px;
 height:146px;
}
#headright {
 background: url('header_right.gif') repeat-x;
 height:146px;
}
</style>
<!--[if IE]>
<style type="text/css"> 
#headleft{margin-right:-3px;}
</style>
<![endif]-->
</head>
<body> 
<div id="headleft">TUTAJ ELEMENTY DLA LEWEGO NAGŁOWKA</div>
<div id="headright">TUTAJ ELEMENTY DLA PRAWEGO NAGŁOWKA</div>
</body> 
</html>
0

Hehe, dzieki wielkie, moglem od razu pomyslec ze to jest blad IE :]
Pomeczylem sie i wyszlo, wyglada mniej wiecej tak samo na wszystkich przegladarkach (tj. testowalem na IE 6, Opera 8 i FF 1.5):

http://www.tvk.wroc.pl/~tvk324a/4p-test/foo.html

Jedna niedogodnosc jest taka (moze znacz rozwiazanie) iz na FF i Operze szerokosc paska dostosowuje sie do szerokosci tekstu (czyli prawidlowo), a na IE rozciaga sie na cala szerokosc diva.

Adam.Pilorz: Twoje rozwiazanie z pozycjonowaniem absolutnym powoduje sporo problemow ;) Poki co tego nie zrobilem gdyz: na IE i FF jest ok, na Operze pasek wystaje 1px poza diva (w przypadku absolutnego oczywiscie); przy zmniejszaniu rozdzielczosci pasek sie przesuwa rowniez o 1px na wszystkich przegladarkach :/ Nie wyglada to rewelacyjny. Teraz natomiast pasek sie rozjezdza jezeli zmniejszymy rozdzielczosc do 800x600 (przechodzi na sam dol bo nie miesci sie w divie).

Rece opadaja :/

0

user image
800x600

Ach, widzę, że Adam o tym wspomniał.. no ale screen dla potwierdzenia ;)

0

to może po prostu zmienić założenia i nie 2 a 3 obrazki - pierwszy wąski z tym przeźroczystym i on w lewym divie, drugi szeroki jako img w prawym divie z trzecim repeat-x jako tło

0

Hmm... szczerze mowiac Adamo nie wiem za bardzo o co Ci chodzi. W kazdym razie juz sa 3 obrazki ;)

Oto jaki jest efekt finalny: http://www.tvk.wroc.pl/~tvk324a/4p-test/foo.html

Na FF wyglada idelnie, na IE tez daje rade chociaz pasek jest nieco za szeroki i sie rozwala jezeli zmniejszymy okno przegladarki dosc znacznie.
Na Operze jest podobnie jak na FF z tym ze pasek nieznacznie wystaje poza macierzystego diva :/

0
Adam Boduch napisał(a)

Na FF wyglada idelnie
Na którym? Bynajmniej nie na 1.5.0.3
user image

0

Heh, szczerze mowiac nawet tego nie zauwazylem :|
No coz... wiec na razie pozostaje stala szerokosc strony bo inaczej sie nie da :/ Albo po prostu nikt nie znalazl optymalnego rozwiazania ;)

0

Nie no, Adam... wystarczy ten mini pionowy obrazek przesunąć w lewo :) tzn. nie na stronie ale w programie gfaficznym.. przewinać jakby, nie wiem jak to nazwać.. :P

0

Nie nie, to jest akurat najmniejszy problem ;) chodzi mi o to odpowiednie wypozycjonowanie elementow, jak pisalem w poprzednim poscie.

0

Skoro nie moge sobie poradzic z poprawnym wyswietleniem headera na roznych przegladarkach postanowilem uzyc instrukcji warunkowych dla IE. Ufff... prawie jest ok. Na Operze 7 i 8, FF 1.5, IE 5.0, IE 5.5, IE 6.0 oraz IE 7.0. Nie myslalem jednak ze bede mial problemy z FF 1.0.5 oraz Mozilla:

www.tvk.wroc.pl/~tvk324a/4p-test/6149208.jpg
www.tvk.wroc.pl/~tvk324a/4p-test/6149211.jpg
www.tvk.wroc.pl/~tvk324a/4p-test/6149212.jpg

Na moim FF 1.5 jest ok. Mam nadzieje ze jak uda mi sie z tym poradzic :| to wreszcie bedzie mozna umiescic to na serwerze.

Aktualnie to co zrobilem:
www.tvk.wroc.pl/~tvk324a/4p-test/bar.html

Pozostaje jeszcze problem z lewym gornym rogiem i brakiem przezroczystosci ale mysle ze to akurat najmniejszy problem :]

1 użytkowników online, w tym zalogowanych: 0, gości: 1