IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Osobní web - problém s containerem

Aktivity
Avatar
Jan Demel
Tvůrce
Avatar
Jan Demel:15.12.2013 16:04

Ahojte. Dělám si osobní web a narazil jsem na takovou celkem velkou chybu. Na id container mám dané bíle pozadí, ale když mám pod tím jiné id, tak ten background nefunguje :/ Funguje jenom, když mám nastavený height, ale já chci, aby to bylo automatické. Pomohli by jste mi někdo ?

style_main.css

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 15.12.2013, 14:42:29
    Author     : Asus
*/

a{
    font-family: "Playfair Display", serif;
    text-decoration:none;
    color:#9A9A9A;
}

h1 {
    font-family: "Playfair Display", serif;
    font-size:30px;
    color:#9A9A9A;
}

span {
    font-family: "Playfair Display", serif;
    color:#C0C0C0;
}

body {
    background-color:#336699;
}

nav {
    width:600px;
}

nav ul li {
    list-style-type:none;
    float:left;
    padding-top:20px;
    padding-bottom: 20px;
    padding-left: 25px;
    padding-right: 25px;
}

nav ul li:hover {
    text-decoration: underline;
}

#container {
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFFFF;
    border-radius:50px;
}

#header{
    width:400px;
    height:100px;
    border-top-left-radius:50px;
    float:left;
    text-align:center;
}

#menu{
    width:600px;
    height:90px;
    margin-top:10px;
    border-top-right-radius:50px;
    float:left;
}

#left {
    width:500px;
    float:left;
    text-align:center;
}

#left h2 {
    font-size:50px;
    text-decoration: underline;
}

#main {
    border-top-color: black;
}

HTML

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/style_main.css" type="text/css">
        <link href='http://fonts.googleapis.com/css?family=Playfair+Display|Pathway+Gothic+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <title>DEMEL Webdesign</title>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1>JAN DEMEL</h1>
                <span>Webdesign studenta</span>
            </div>
            <div id="menu">
                <nav>
                    <ul>
                        <li><a href="#">Domů</a></li>
                        <li><a href="#">O mně</a></li>
                        <li><a href="#">Portfólio</a></li>
                        <li><a href="#">Kontakt</a></li>
                        <li><a href="#">Youtube</a></li>
                    </ul>
                </nav>
            </div>
            <div id="main">
                <div id="left">
                    <h2>Domů</h2>
                </div>
                <div id="right">

                </div>
            </div>
            <div id="case1">

            </div>
            <div id="case2">

            </div>
            <div id="case3">

            </div>
            <div id="footer">
            </div>
        </div>
    </body>
</html>

Předem moc děkuju :)

Odpovědět
15.12.2013 16:04
To co se zdá být nemožné, je vždy možné.
Avatar
Juraj Mlich
Tvůrce
Avatar
Juraj Mlich:15.12.2013 16:10

Nepoužívaj div-ka. Nauč sa Html5.

 
Nahoru Odpovědět
15.12.2013 16:10
Avatar
Jan Demel
Tvůrce
Avatar
Odpovídá na Juraj Mlich
Jan Demel:15.12.2013 16:18

Děkuju za tip, ale alespoň pro tento projekt použiju DIV... Nevíš, kde je problém ?

Nahoru Odpovědět
15.12.2013 16:18
To co se zdá být nemožné, je vždy možné.
Avatar
Juraj Mlich
Tvůrce
Avatar
Odpovídá na Jan Demel
Juraj Mlich:15.12.2013 16:32

Ja nechápem tvojmu problému :)

 
Nahoru Odpovědět
15.12.2013 16:32
Avatar
Jan Demel
Tvůrce
Avatar
Odpovídá na Juraj Mlich
Jan Demel:15.12.2013 16:42

Problém je ten, že všechno co je na té stránce napsané by mělo být na bílém pozadí ... No a ono není :)

Nahoru Odpovědět
15.12.2013 16:42
To co se zdá být nemožné, je vždy možné.
Avatar
Uživatel sítě
Tvůrce
Avatar
Uživatel sítě :15.12.2013 16:46

U '<div id="container">', nemáš určený 'height', máš tam pouze width.

 #container {
     width:1000px;
     margin-left:auto;
     margin-right:auto;
     background-color:#FFFFFF;
     border-radius:50px;
     **min-height: 200px;**
}
Nahoru Odpovědět
15.12.2013 16:46
Chybami se člověk učí, běžte se učit jinam!
Avatar
Jan Demel
Tvůrce
Avatar
Odpovídá na Uživatel sítě
Jan Demel:15.12.2013 16:48

Chápu správně, ten height tam musí být určený vždy ?

Nahoru Odpovědět
15.12.2013 16:48
To co se zdá být nemožné, je vždy možné.
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na Jan Demel
Uživatel sítě :15.12.2013 16:51

To byla spíže ukázka, důvod proč se ti pozadí nedělá je to, že nějaký obsah, který je větší než ta velikost není závislá na '#container'.

Takže, když '#left', zrušíš 'float: left;', začne být závislé na tom, avšak pokud to bude pouze menu tak to stačí udělat na '#right', které ještě nemáš nastylované..

Nahoru Odpovědět
15.12.2013 16:51
Chybami se člověk učí, běžte se učit jinam!
Avatar
Vojtěch Mašek (Woyta)
Tvůrce
Avatar
Vojtěch Mašek (Woyta):15.12.2013 16:54

Tohle vlož před konec kontejneru:

<div style="clear: both;"></div>
Nahoru Odpovědět
15.12.2013 16:54
Výraz "to nejde" není v mém slovníku
Avatar
Uživatel sítě
Tvůrce
Avatar
Uživatel sítě :15.12.2013 16:55

Nebo pod right, dej třeba toto '<div style="clear: both;"></div>', ten bym ěl zařídit, bílé pozadí a float můžeš mít..

Nahoru Odpovědět
15.12.2013 16:55
Chybami se člověk učí, běžte se učit jinam!
Avatar
Vojtěch Mašek (Woyta)
Tvůrce
Avatar
Odpovídá na Jan Demel
Vojtěch Mašek (Woyta):15.12.2013 16:58

Tady máš k tomu nějakou dokumentaci:
http://www.w3schools.com/…ss_clear.asp

Editováno 15.12.2013 16:59
Nahoru Odpovědět
15.12.2013 16:58
Výraz "to nejde" není v mém slovníku
Avatar
Jan Demel
Tvůrce
Avatar
Odpovídá na Uživatel sítě
Jan Demel:15.12.2013 17:06

No ... tak jsem tak něják zkoušel, co jsi mi tu napsal. Takže jsem pochopil, že když má něco nastavené float tak to nejde ... No tak jsem se rozhodl, že nastavím každému DIVu vlastní pozadí ... je to správný postup, nebo jsem to zmršil úplně ?

--> omlouvám se, tahle odpověd je stará ... už to funguje tak jak má.

Editováno 15.12.2013 17:09
Nahoru Odpovědět
15.12.2013 17:06
To co se zdá být nemožné, je vždy možné.
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na Jan Demel
Uživatel sítě :15.12.2013 17:51

Udělej to jak ti radil 'Woyta', já ti pouze naznačoval když to není na ničem závislé výškou tak to nereaguje, podobně jako kdyby si to měl napozicovaný absolutně.

Nahoru Odpovědět
15.12.2013 17:51
Chybami se člověk učí, běžte se učit jinam!
Avatar
Jan Demel
Tvůrce
Avatar
Odpovídá na Uživatel sítě
Jan Demel:15.12.2013 18:15

Jojo už to mám :) Teďka to hodím na kritiku webu.

Nahoru Odpovědět
15.12.2013 18:15
To co se zdá být nemožné, je vždy možné.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 14 zpráv z 14.