Diskuze: Přetékání

Petr Nymsa

Redaktor

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

David Čápka

Tým ITnetwork

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

Petr Nymsa

Redaktor

Odpovídá na David Čápka
Petr Nymsa:21.11.2012 19:36

Moje blbost. http://www.zirko.g6.cz/

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!

matesax

Redaktor

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

Petr Nymsa

Redaktor

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

matesax

Redaktor

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

Junior programátor, plat 50.000 Kč/měsíc. Líbí? Do 6.000 Kč ho z tebe uděláme.

Zjistit více...

Junior programátor, plat 50.000 Kč/měsíc. Líbí? Do 6.000 Kč ho z tebe uděláme.

Vyzkoušet zdarma

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.