Diskuze: Přetékání

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

Aktivity

Petr Nymsa

Tvůrce

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 Hartinger

Vlastník

David Hartinger: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

New kid back on the block with a R.I.P

Petr Nymsa

Tvůrce

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

matesax

Tvůrce

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

Tvůrce

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

Tvůrce

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.