Pouze tento týden sleva až 80 % na e-learning týkající se PHP. A zároveň využij akce až 30 % zdarma při nákupu e-learningu. Více informací.
Hledáme asistenty pro kurzy programování - pohodová brigáda. Více info
discount 30
Avatar
Petr Nymsa
Redaktor
Avatar
Petr Nymsa:21.11.2012 19:19

Ahoj, potřeboval bych mírně píchnout. V tovrbě webů nejsem žádný mistr a pravděpodobně jej programuju špatně. Každopádně k věci. Mám jednoduchý layout. V hlavičce je logo a menu. Poté následuje content. A ten mi, nevím proč, přetéká přes hlavní div. Nejsem si jist zda to popisuju správně. Posílám jak HTML tak CSS kód.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />

<title>ZirkoTech - Kdo jsem</title>
</head>

<body>
        <div id="main">
        <div id="headerMenu">
                 <ul>
             <li><a href="#">Kdo jsem</a> |</li>
             <li><a href="#">Tvorba</a> |</li>
             <li><a href="#">Kontakt</a></li>
            </ul>
        </div>
        <div id="headerLogo"></div>
        <img alt="line" src="graphics/line.png"class="line" />
        <div id="content">
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar molestie venenatis. Duis molestie neque in turpis tincidunt consectetur. In quis enim sed nisl vestibulum consequat id ac quam. Praesent magna dui, tempus ut consequat id, rhoncus id velit. Duis leo ipsum, vehicula ac feugiat at, cursus quis quam. Sed non libero at erat accumsan gravida. Praesent fringilla laoreet tincidunt. In accumsan, arcu a euismod feugiat, quam nibh viverra turpis, ac pharetra orci arcu vitae felis.

Suspendisse vitae urna justo. Nullam consectetur consequat orci, a scelerisque nisi fringilla quis. Etiam id risus quis libero posuere tempus ut vitae est. Quisque et urna id quam malesuada pharetra. Aliquam ac mattis tortor. Suspendisse potenti. Sed ornare semper luctus. Vestibulum molestie molestie mattis. Donec eget nunc eget quam vestibulum pretium. Nam luctus ultrices purus at posuere. Sed consequat malesuada mollis. </p>
        </div>
    </div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
@font-face {font-family: Calibri; src: url('font/calibri.otf');}
body
{
        background:url(Graphics/background.png) repeat;
        margin:0px;
        padding:0px;
        color: #FFF;
}

p
{font-family:Calibri;}

#main
{
        clear:both;
        margin-left:auto;
        margin-right:auto;
        width:1024px;
        height:auto;
        border-style:solid;
        border-radius:15px;
        border-color:#F60;

}
#headerLogo
{
        width:251px;
        height:144px;
        position:relative;
        float:left;
        left:15px;
        top:10px;
        background:url(Graphics/headerLogo.png) no-repeat;
}
#headerMenu
{
        float:right;
        width:724px;
        height:168px;
        border-radius:15px;
        position:relative;
        left:0px;
        background:url(Graphics/headerMenu.png) no-repeat;

}
#headerMenu ul
{margin:0px;}
#headerMenu li
{
        position:relative;
        display:inline;
         margin:0px;
         left:15px;
        top:50px;
        font-family:Calibri,Verdana;
        font-size:36px;
        font-weight:bold;
}
#headerMenu a
{text-decoration:none;}
#headerMenu a:visited
{color:#FFF;}
#headerMenu a:hover
{color:#C00;}

#content
{
        clear:both;
        position:relative;
        background-color:#F60;
        border-style:solid;
        border-color:#F60;
        border-radius:15px;
        left:8px;
        top:8px;
        width:1000px;
        height:auto;
}


.line
{
        margin:0px;
        padding:0px;
        border:none;
}
Odpovědět
21.11.2012 19:19
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Petr Nymsa
David Čápka:21.11.2012 19:29

Potřeboval bych to vidět někde běžet, nemám ty obrázky, takže mi nic nevytéká.

Nahoru Odpovědět
21.11.2012 19:29
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Petr Nymsa
Redaktor
Avatar
Nahoru Odpovědět
21.11.2012 19:36
Pokrok nezastavíš, neusni a jdi s ním vpřed
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
matesax
Redaktor
Avatar
Odpovídá na Petr Nymsa
matesax:21.11.2012 19:49

Místo těch pevných pozic používej padding...

 
Nahoru Odpovědět
21.11.2012 19:49
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na matesax
Petr Nymsa:21.11.2012 20:05

Díky padding pomohl :)

Nahoru Odpovědět
21.11.2012 20:05
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
matesax
Redaktor
Avatar
Odpovídá na Petr Nymsa
matesax:21.11.2012 20:14

Je zbytečné uvádět některé rozměry a i jiné styly. Ale hlavně - doufám, že to bude v HTML5. :) (Padding vytvoří mezeru nezávisle na rozměrech - kdežto pozice jen napozicuje...)

Editováno 21.11.2012 20:16
 
Nahoru Odpovědět
21.11.2012 20:14
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 6 zpráv z 6.