Diskuze: Osobní web - problém s containerem

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Jan Demel

Tvůrce

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é.

Juraj Mlich

Tvůrce

Juraj Mlich:15.12.2013 16:10

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

Nahoru Odpovědět

15.12.2013 16:10

Jan Demel

Tvůrce

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é.

Juraj Mlich

Tvůrce

Juraj Mlich:15.12.2013 16:32

Ja nechápem tvojmu problému

Nahoru Odpovědět

15.12.2013 16:32

Jan Demel

Tvůrce

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é.

Uživatel sítě

Tvůrce

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!

Jan Demel

Tvůrce

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é.

Uživatel sítě

Tvůrce

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!

Vojtěch Mašek (Woyta)

Tvůrce

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

Uživatel sítě

Tvůrce

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!

Vojtěch Mašek (Woyta)

Tvůrce

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

Jan Demel

Tvůrce

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é.

Uživatel sítě

Tvůrce

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!

Jan Demel

Tvůrce

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.

Nejčastěji vyhledáváné

Diskuze: Osobní web - problém s containerem