Forum PHP.pl > [CSS] Prośba o dobrą rade w związku z ułożeniem divów

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Prośba o dobrą rade w związku z ułożeniem divów

zaaap

8.12.2008, 22:22:37

Witam, chciałbym poprosic o porade na temat jak ułozyc taki układ divów.

Div 3. ma byc swego rodzaju containerem ograniczającym. I teraz zastanawiam się jak umieszczac kolejne divy, zeby IE to łykał. W IE zaciąłem sie juz na 6. divie, który przy ładowaniu sie pojawia, jak po całkowitym zaladowaniu zostaje jakby zakryty, gdyz znika.

Div No.6.

Kod

srodek_tytuly {
    background-color: #151c23;
    position: absolute;
    margin-top: 300px;
    height: 40px;
    padding-left: 10px;
}

Teraz uklad divow wyglada nastepujaco:

Kod

<div id="2">
    <div id="3">
        <div id="4">napis tytulowy
        </div>
        <div class="5">
        witamy<br/>
        zapraszamy do przegladania zawartosci i częstego jej odwiedzania
        </div>
        <div class="6">
            oto my!
        </div>


    </div>
</div>

FF to łapie, IE nie (6 div). Poza tym zastanawiam się jak je układac, zeby nie trzeba było cały czas z absolute leciec, bo przy roznych rozdzielczosciach to sie posypie (no niby mozna %, ale wolalbym na zasadzie odstępu w margin-top od diva znajdujące sie nad nim).

Prosze o pomoc

erix

8.12.2008, 22:34:16

Po pierwsze - nazwy nie mogą się zaczynać od cyfr.

Może zainteresuj się tym? http://www.yaml.de/en/home.html

zaaap

8.12.2008, 22:43:56

Cytat(erix @ 8.12.2008, 22:34:16 )

Po pierwsze - nazwy nie mogą się zaczynać od cyfr.

Może zainteresuj się tym? http://www.yaml.de/en/home.html

Jako cyfry widnieja na tym forum tylko dla potrzeb przejrzystosci i latwosci wyjasniania.

elmozaur

9.12.2008, 08:39:36

divy znikaja bo nie maja ustawionych z-indexow.
im wyzszy index tym "wyzej lezy div"

Pilsener

9.12.2008, 08:59:48

Proponuję:
http://kurs.browsehappy.pl/CSS/Float
I przemyśl układ strony - masz prosty: 2 kolumny, stała szerokość - nałożysz je na diva wyżej ujemnym marginesem, natomiast div nr 9 odsuniesz od topu diva prawego marginesem lub paddingiem. Pozycjonowanie absolutne to absolutna ostateczność.

zaaap

9.12.2008, 14:23:19

Wielkie dzieki za link i wyjasnienia. "pomogł" dam jak rozwiaze moj problem, zeby ktos tu jeszcze zajrzał do tej pory

, gdyz div 6. ma najwyzszy z-index, lecz na IE zdaje sie to nie robic zadnego wrazenia. Zachowanie takie samo jak poprzednio, czyli przy ladowaniu widac, po zaladowaniu znika.

Dodam, ze div 5 i 6 są na tym samym poziomie, wiec zupełnie nie rozumiem dziwnego zachowania IE. Nawet jesli div 6 dostanie z-index wiekszy niz 5. i cala reszta divow na stronie np. 1000 to dalej jest 'zakrywany'.

erix

9.12.2008, 17:23:56

Wrzuć gdzieś cały działający kod, bo tak, to możemy sobie co najwyżej zgadywać.

zaaap

9.12.2008, 17:38:52

OK to leci:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;  charset=iso-8859-2" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* hack na png w IE */
img, div, input { behavior: url("iepngfix.htc") }
 
</style>
<title>Anno</title>
</head>
<body>
<div id="szeroki_top">
    <div id="container">
 
        <div id="top_newsa">    
            <div class="tekst">
            kilka słow o nas
            </div>        
        </div>
        <div class="gora_index"><p>
        witamy<br />
        zapraszamy do przegladania zawartosci i częstego jej odwiedzania</p>
        </div>
 
        <div id="srodek_tytuly">
        oto my!
        </div>
 
 
    </div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

CSS:

Kod

/*divy

!!!!!!!!!!!!!!!!!!!!!!!!*/
#szeroki_top{
background-image:url(../img/tlo_gora3.png);
height:170px;
width:100%;
position:relative;
z-index: -2;
}

#container {
margin-left:auto;
margin-right:auto;
width:800px;
position:relative;
z-index: -1;
}

.tekst{
position: absolute;
font-family: Tahoma;
font-size: 40px;
color: white;
margin-left: 10px;
margin-top: 5px;
z-index: 1;

}
/*divy do tekstow!!!!!!!!!!!!!!!!!!!!!!!!!!*/
#top_newsa{
height:56px;
width:300px;
margin-top:30px;
background: url(../img/000.png);
position:absolute;
z-index: 1;
}
.gora_index{
width:600px;
margin-top:90px;
position:absolute;
line-height: 150%;
z-index: 1;
}
#srodek_tytuly {
     background-color: #151c23;
     position: absolute;
     margin-top: 300px;
     height: 40px;
     padding-left: 10px;
     z-index: 1000;
}

Włanie odkryłem, winowajce psucia mi tego diva 6. pod IE. Otoz jest to hack na IE do przezroczystosci .PNG.
W takiej formie

Kod

Div 6. bedzie wyswietlany, lecz png bedzie nieprzezroczysty. Jakies pomysły?
klik

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.