Umieszczenie div'a pod div'em

pytanie zadane 8 lipca 2018 w Sieci komputerowe, internet przez extr4v3rT Początkujący (440 p.)
zamknięte 8 lipca 2018 przez extr4v3rT

witam, tak więc chciałbym aby niebieski div był pod czerwonym - pierwotnie wyswietla sie w tym miejscu jakim jest i zasłania kawałek czerwonego a chce zeby był tam gdzie prowadzi strzałka. Jestem początkującym także prosze o pomoc. Pozdrawiam

komentarz zamknięcia: Wyjasnione

2 odpowiedzi

odpowiedź 8 lipca 2018 przez toffik93 Bywalec (2,820 p.)

Dodaj w CSS dla diva niebieskiego:

position:absolute;
bottom:0;
width:100%;

To powinno pomóc.

komentarz 8 lipca 2018 przez extr4v3rT Początkujący (440 p.)

teraz wyglada to tak ;/

komentarz 8 lipca 2018 przez toffik93 Bywalec (2,820 p.)

spróbuj zostawić to tak, jak było i po prostu zwiększ wysokość diva czerwonego. Nie widzę kodu, dlatego próbuję zgadywać.

komentarz 8 lipca 2018 przez extr4v3rT Początkujący (440 p.)

nizej wysłałem kody :c

komentarz 8 lipca 2018 przez toffik93 Bywalec (2,820 p.)

@extr4v3rT, możesz jeszcze spróbować zmienić absolute na fixed

odpowiedź 8 lipca 2018 przez Berci2k Nowicjusz (140 p.)

Pokażesz kod tych divów? Bo z tego co wiem to divy standardowo układają się pod sobą.

komentarz 8 lipca 2018 przez Berci2k Nowicjusz (140 p.)

<!DOCTYPE html>
<html lang="pl-PL">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="Stylesheet" type="text/css" href="style.css"/>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html"; charset=iso-8859-2">
        <meta charset="UTF-8">
        <meta name="Description" content="Tu wpisz opis zawartości strony" />
        <meta name="Keywords" content=""/>
        <title></title>
    </head>
    <body>
            
                    <h1><b>-----</b></h1>
                    <h2><b>----</b></h2>
            <div class="container">
                
                <div class="content">
                
                    <figure>                
                    <img src="tlo2.png">
                    <img src="tlo3.png">
                    <img src="tlo4.png">
                    <img src="tlo5.png">
                    <img src="tlo2.png">
                    </figure>

                    <p class="logo">
                        <img src="logo2.png" alt="LightRP" align="top">
                    </p>
                
                    <div class="menu">
                        <ul id="menu">
                            <li class="join">------</li>    
                            <li class="wl">------</li>
                            <li class="discord">
                                <a href="https://discord.gg/------">Discord</a>
                            </li>
                            <li>Zespół</li>
                            <li>Cechy</li>
                        </ul>
                    </div>                        
                </div>
                <div class="cechy">
                    <h3 class="cechyserwera">--------</h3>
                </div>

            <div class="zespol">
            </div>
            <div class="zaproszenie'>
                <p>--------</p>
                <p>------------</p>
            </div>
            <div class="stopka">
            </div> 
            </div>
    </body>
</html>

@font-face {
    font-family: mojaczcionka;
    src: url(Poppins-Medium.ttf);
}
@font-face{
    font-family: mojaczcionkaBold;
    src: url(Poppins-Bold.ttf);
}
@font-face {
    font-family: ubuntumedium;
    src: url(ubuntu-medium.ttf);
}
@font-face{
    font-family: ubunturegular;
    src: url(ubuntu-regular.ttf);
}
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

* {
     margin: 0px 0px;
     padding: 0px 0px;
}
    

.container {
    max-width: 1900px;
    overflow: hidden;
    height: auto;
    height: 100%;

}
#menu, li {
    list-style: none;
    display: inline;
    float: left;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    padding: 5px 2px;
    position: relative; 
    left: -120px; top: 10px;

}

li {
    display: relative;
    float: right;
    font-family: mojaczcionka;
    text-align: center;
    font-size: 20px;
    width: 120px;
    text-decoration: none;
    color: white;
    text-shadow: -2px 2px 5px black;
    
    margin: 0px -18px 1px 0px;
    background: linear-gradient(currentColor, #1cd7f9) bottom / 0 .1em no-repeat;
    transition-property: background-size;
    transition: 1s background-size;

}

#menu {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
    max-width: 1900px;
}

.content {
    width: 1900px;
    height: 1100px;
    background-repeat: no-repeat;
    position: absolute;
    left: 0px; top: 0px; 
    max-height: 850px;
}
a {
    text-decoration:none;
    color:#ffffff;
}
h1, h2 {
    position: relative; z-index: 3;
    font-family: ubuntu-medium;
    color: #ffffff;
    text-align: center;
    top: 350px;
    text-shadow: 7px 5px 5px black;
    line-height: 0.70cm;

}

.container > .content > .logo {
    display: inline;
    text-shadow: -1px 1px 5px black;
    position: fixed; 
    top: -190px;
    left: -230px;

    
}

h1{
    font-size: 48px;
    z-index: 3;

}

li:hover {
    background-size: 100% .1em;
    font-size: 25px;
}
.container > .content > .menu > #menu > li {
    margin-top: 2px;
    margin-right: 15px;

}
.container > .content > .menu > #menu {
    position: fixed;
    left: 0px;
}

body { margin: 0; } 
.content { overflow: hidden; }
.content figure img { width: 20%; float: left; }
.content figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
 
}
}
img{
   max-width: 100%;
   height:auto;
   width:auto;
}
body {
    width:100%;
}
.cechyserwera {
    position: relative;
    z-index: 3;
    text-align: center;
    font-size: 40px;
    font-family: mojaczcionka;
    color: #515151;
    clear: both;
}
.cechy {
    position: absolute;
    float: right;
    width: 100%;
    overflow: hidden;
    background-color: #f7f7f7;
    bottom: 300px;
    margin-left:auto;
    margin-right: auto;
    padding: 0;
    z-index: 3;
    height: 500px;
    clear: both;
    bottom:0;
    width:100%
    
}
 html, body {
    margin:0;
    padding:0;
    height:100%;
    text-align:center;
}

Proszę :)

komentarz 8 lipca 2018 przez extr4v3rT Początkujący (440 p.)

przepraszam, jestem nowy na portalu :/ Dziekuje, a czy pan zawarl rozwiazanie juz w tym kodzie ? ;P jesli tak to powie pan co zrobilem zle? Pozdrawiam.

komentarz 8 lipca 2018 przez Berci2k Nowicjusz (140 p.)

Ty chcesz te cechy na samym dole?

komentarz 8 lipca 2018 przez extr4v3rT Początkujący (440 p.)

bedzie pare takich divow

-cechy

-zespol

itd, itp. i chce zeby to wszystko bylo pod soba.

czyli najpierw ten div czerwony(div content)

pod nim cechy

a pod tym zespol itd

komentarz 8 lipca 2018 przez Patrycjerz Mędrzec (192,320 p.)

extr4v3rT, przeczytaj proszę ten poradnik. Bez tej podstawowej wiedzy nie powinieneś publikować pytań na forum.

komentarz 8 lipca 2018 przez extr4v3rT Początkujący (440 p.)

jest juz wszystko na swoim miejscu, zapamietam na przyszlosc ;)

komentarz 8 lipca 2018 przez toffik93 Bywalec (2,820 p.)

ja bym zrobił to tak:

.container
{
width:100%;
}

cechy
{
position: fixed;
width:100%;
bottom:0;		
}

Ja miałem kiedyś podobny problem i dodanie tych właściwości rozwiązało ten problem.

komentarz 8 lipca 2018 przez extr4v3rT Początkujący (440 p.)

Panie dziekuje <3

Podobne pytania

Zaloguj lub zarejestruj się, aby skomentować.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci