Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akce až 50 % zdarma při nákupu e-learningu. Více informací:
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í.
Slevovy týden 3/50
Avatar
Petr Nymsa
Tvůrce
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
One of the most common causes of failure is the habit of quitting when one is overtaken by temporary defeat.
Avatar
Petr Nymsa
Tvůrce
Avatar
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
Avatar
matesax
Tvůrce
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
Tvůrce
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
Tvůrce
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.