Diskuze: Osobní web - problém s containerem

HTML a CSS HTML a CSS Osobní web - problém s containerem American English version English version

Avatar
Jan Demel
Redaktor
Avatar
Jan Demel:

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
Redaktor
Avatar
Juraj Mlich:

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

Nahoru Odpovědět 15.12.2013 16:10
Vždy je lepšie učiť sa z cudzích chýb, než z vlastných chýb.
Avatar
Jan Demel
Redaktor
Avatar
Odpovídá na Juraj Mlich
Jan Demel:

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
Redaktor
Avatar
Odpovídá na Jan Demel
Juraj Mlich:

Ja nechápem tvojmu problému :)

Nahoru Odpovědět 15.12.2013 16:32
Vždy je lepšie učiť sa z cudzích chýb, než z vlastných chýb.
Avatar
Jan Demel
Redaktor
Avatar
Odpovídá na Juraj Mlich
Jan Demel:

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
Marek Z.
Redaktor
Avatar
Marek Z.:

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
Redaktor
Avatar
Odpovídá na Marek Z.
Jan Demel:

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
Marek Z.
Redaktor
Avatar
Odpovídá na Jan Demel
Marek Z.:

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):

Tohle vlož před konec kontejneru:

<div style="clear: both;"></div>
Nahoru Odpovědět  +1 15.12.2013 16:54
Výraz "to nejde" není v mém slovníku
Avatar
Marek Z.
Redaktor
Avatar
Marek Z.:

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
Odpovídá na Jan Demel
Vojtěch Mašek (Woyta):

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
Redaktor
Avatar
Odpovídá na Marek Z.
Jan Demel:

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
Marek Z.
Redaktor
Avatar
Odpovídá na Jan Demel
Marek Z.:

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  +1 15.12.2013 17:51
Chybami se člověk učí, běžte se učit jinam!
Avatar
Jan Demel
Redaktor
Avatar
Odpovídá na Marek Z.
Jan Demel:

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

Nahoru Odpovědět  +1 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.