Forum PHP.pl > [CSS] Problem z ustawieniem divów jeden pod drugim

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Problem z ustawieniem divów jeden pod drugim

mbaton

16.03.2015, 18:26:09

Witam. Nie mogę sobie poradzić z ustawieniem divów, jeden pod drugim. Ten co teraz wskoczył pod warstwę z kropkami na białym tle, chciałbym żeby był - jak każdy kolejny - jeden pod drugim. Czyli: najpierw div z grafiką główną i tymi gradientami, pod nim ten slogan i dalej każdy następny div ma być w podobny sposób usytuowany, pod poprzednim.

Zdaję sobie sprawę, że jest to proste, ale chyba za długo nad tym siedzę dzisiaj i nie potrafię znaleźć rozwiązania. Dzięki za pomoc;)

LINK: http://ffstudiofilm.pl/pg/oferta.html

Kod

<BODY>
<header class="top">
  <center><nav id="menu">
    <ul class="left">
        <li><a href="http://ffstudiofilm.pl"><img class="logo" src="../img/logo.png"></a></li>
    </ul>
    <ul class="right">
        <li><a href="../index.html">Start</a></li>
        <li><a href="oferta.html">Oferta</a></li>
        <li><a href="media.html">Media</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
</nav></center>
</header>

<div id="all">
<div id="container1-img">
   <div class="gradtop"></div>
   <div class="cont_gradtop"></div>
   <div class="cont_dots"></div>
   <div class="cont_gradbottom"></div>
   <div class="gradbottom"></div>
</div>

<div id="container2">
   <div class="title">
    FF STUDIO to my! <br> Profesjonalne usługi wideofilmowania
    <hr>
   </div>
</div>

</div>

<footer><div class="container">
    <div class="left">© 2015 <a href="http://ffstudiofilm.pl">ffstudiofilm.pl</a> Wszelkie prawa zastrzeżone.</div>
    <div class="right">Wykonanie <a href="mailto:mbaton14@o2.pl">mortas</a></div>
</div></footer>
</div>
</BODY>

Kod

* {margin: 0; padding: 0;}

html, body {background: none;
            background-color: #333333; height: 100%; text-align: center; font: 100% Tahoma;}

@font-face {
    font-family: Dosis-Light;
    src: url('../fonts/Dosis-Light.otf');
}
@font-face {
    font-family: Open Sans Medium;
    src: url('../fonts/OpenSans-Regular.ttf');
}
@font-face {
        font-family: Raleway Regular;
        src:url('../fonts/Raleway-Regular.ttf');
}
img{
   max-width: 100%;
   height:auto;
   width:auto;
}
#menu {  height: 100%;
        }
#menu ul.left { float: left; }
#menu ul.right { float: right; padding-top: 22px;}
#menu ul.right li a {
    text-shadow: 0px 0px 2px #333333;
    font: 180% Dosis-Light;
    margin-left: 15px;
    color:#DCDCDC;
    text-transform:uppercase;
    text-decoration:none;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}
#menu ul.right li a:hover
{
    color:#E43E3E;
}
#menu li { display: inline-block; }

header.top {
    height: 75px;
    position: fixed;
    width:100%;
    background: rgba(51, 51, 51, 1);
    margin:0px;
    padding: 15px 0 15px 0;
    z-index: 3;
}
#all {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        position: relative; }

#container1-img { position: relative; top: 111px; border-top: #171717 1px solid; border-bottom: #171717 1px solid; background: url('../img/img_main1.jpg') no-repeat center center;background-size:cover; width: 100%; height: 350px; }
#container1-img .gradtop { position: absolute; top: -8px; background: url('../img/gradmin.png') repeat-x; width: 100%; height: 8px; z-index: 2; }
#container1-img .gradbottom { position: absolute; bottom: -8px; background: url('../img/gradmin2.png') repeat-x; width: 100%; height: 8px; z-index: 2; }
#container1-img .cont_gradtop { position: absolute; top: 0px; background: url('../img/gradmax.png') repeat-x; width: 100%; height: 30px; z-index: 3; }
#container1-img .cont_gradbottom { position: absolute; bottom: 0px; background: url('../img/gradmax2.png') repeat-x; width: 100%; height: 30px; z-index: 3; }
#container1-img .cont_dots { background: url('../img/dots3x3.png'); background-repeat: repeat; width: 100%; height: 100%; opacity: 0.5; position: absolute; top: 0px; left: 0px; z-index: 1; }

#container2 {
    position: relative; clear: both; display: block;
    background: #fff;
    width: 100%;
    padding: 30px 0 30px 0;
    height: auto; }

#container2 .title {
    position: relative;
    text-align: center; }

wolguy

17.03.2015, 17:48:57

w akruszu w sekcji #container2 usun position:relative

mbaton

17.03.2015, 22:36:31

Nie pomaga....

jack1142

18.03.2015, 00:43:37

Problemem jest wartość top: 111px dla #container1-img.
Powinieneś albo ustawić dla każdego następnego diva tą wartość, co jest bezsensowne. Podkreślam bezsensowne.
Drugą opcją, która jest dużo lepsza to usunięcie wartości position: fixed dla header.top i wartości top: 111px dla #container1-img.

castagir

18.03.2015, 09:24:33

Sprawa nie jest trudna. Napisz mi co chciałbyś osiągnąć i jak miałaby wyglądać ta strona, a zaraz Ci ją zrobie, bo widzę w kodzie tyle młynu, że nie wiem czy jest sens to porawiać i chyba lepiej napisać od nowa.

mbaton

18.03.2015, 11:26:56

Cytat(jack1142 @ 18.03.2015, 00:43:37 )

A no faktycznie, rozumiem już zachowanie tych divów. Też wydawało mi się niepraktyczne wstawienie tego odsunięcia o 111px od góry, ale chciałbym zachować moje menu cały czas u góry strony. Często gęsto spotyka się takie menu, nie jest to po prostu rozwiązane właśnie atrybutem position: fixed?

@castagir
poszło pw

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.