Skocz do zawartości

  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • ✅ Pełny dostęp do działów i ukrytych treści
    • ✅ Możliwość pisania i odpowiadania w tematach
    • ✅ System prywatnych wiadomości
    • ✅ Zbieranie reputacji i rozwijanie swojego profilu
    • ✅ Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz

Problem z szablonem na div'ach.

Gość Szaki22

Przez Gość Szaki22
w Niezbędnik Programisty - Archiwum

Rekomendowane odpowiedzi

Gość

Gość

Opublikowano

Gość

Opublikowano

Witam, tworząc pierwszą swoją stronę od 5 lat natknąłem się na mały problem. Nie wiem jak to opisać nie jestem zbytnio obeznany ale jak widać na zdjęciu niżej panel menu u góry wystaję poza div'a w którym się znajduję, a chciałem by był równy z div'em. ;)

 

Zdjęcie

 

 

53676536374785850397.png

 

 

Kod HTML

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


    <title>Szablon</title>


    <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />


    <meta name="language" content="pl" />


    <meta name="keywords" content="" />


    <meta name="description" content="" />


    <link href="style.css" rel="stylesheet" type="text/css" />


</head>


<body>


    <div id="main">


        <div id="header">Header...</div>


        <div id="menu"><ul>
<li><a href="czcionki.html">Czcionki</a></li>
<li><a href="tekst.html">Tekst</a></li>
<li><a href="tlo.html">Tło</a></li>
<li><a href="marginesy.html">Marginesy</a></li>
<li><a href="obramowanie.html">Obramowanie</a></li>
</ul>
</div>


        <div id="middle">


            <div id="left">


 <center><h3>...</h3></center>


            </div>


            <div id="cent">


                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla hendrerit lacus at metus. Maecenas venenatis rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin lobortis nisi nec nisi. Morbi mattis fermentum lectus. Nam vestibulum arcu vulputate ante. Maecenas rutrum dui nec quam.</p>


                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum tortor a purus. Quisque convallis nisl ac augue. Nulla aliquam dui. Etiam convallis enim tincidunt erat dapibus tincidunt.</p>


                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla hendrerit lacus at metus. Maecenas venenatis rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin lobortis nisi nec nisi. Morbi mattis fermentum lectus. Nam vestibulum arcu vulputate ante. Maecenas rutrum dui nec quam.</p>


                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum tortor a purus. Quisque convallis nisl ac augue. Nulla aliquam dui. Etiam convallis enim tincidunt erat dapibus tincidunt.</p>


                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla hendrerit lacus at metus. Maecenas venenatis rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin lobortis nisi nec nisi. Morbi mattis fermentum lectus. Nam vestibulum arcu vulputate ante. Maecenas rutrum dui nec quam.</p>


                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum tortor a purus. Quisque convallis nisl ac augue. Nulla aliquam dui. Etiam convallis enim tincidunt erat dapibus tincidunt.</p>


                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla hendrerit lacus at metus. Maecenas venenatis rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin lobortis nisi nec nisi. Morbi mattis fermentum lectus. Nam vestibulum arcu vulputate ante. Maecenas rutrum dui nec quam.</p>


                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum tortor a purus. Quisque convallis nisl ac augue. Nulla aliquam dui. Etiam convallis enim tincidunt erat dapibus tincidunt.</p>


                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla hendrerit lacus at metus. Maecenas venenatis rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin lobortis nisi nec nisi. Morbi mattis fermentum lectus. Nam vestibulum arcu vulputate ante. Maecenas rutrum dui nec quam.</p>


                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum tortor a purus. Quisque convallis nisl ac augue. Nulla aliquam dui. Etiam convallis enim tincidunt erat dapibus tincidunt.</p>


                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla hendrerit lacus at metus. Maecenas venenatis rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin lobortis nisi nec nisi. Morbi mattis fermentum lectus. Nam vestibulum arcu vulputate ante. Maecenas rutrum dui nec quam.</p>


            </div>


            <div id="right">


                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum tortor a purus. Quisque convallis nisl ac augue. Nulla aliquam dui. Etiam convallis enim tincidunt erat dapibus tincidunt.</p>


                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla hendrerit lacus at metus. Maecenas venenatis rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin lobortis nisi nec nisi. Morbi mattis fermentum lectus. Nam vestibulum arcu vulputate ante. Maecenas rutrum dui nec quam.</p>


                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum tortor a purus. Quisque convallis nisl ac augue. Nulla aliquam dui. Etiam convallis enim tincidunt erat dapibus tincidunt.</p>


                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla hendrerit lacus at metus. Maecenas venenatis rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin lobortis nisi nec nisi. Morbi mattis fermentum lectus. Nam vestibulum arcu vulputate ante. Maecenas rutrum dui nec quam.</p>


            </div>


        </div>


        <div id="footer">2014</div>


    </div>


</body>


</html>

 

 

Kod CSS

 

 

body {
    margin: 0;
    padding: 0;
    font: 14px Arial, Helvetica, sans-serif;
    text-align: center;
    color: #8A7660;
    background: #ffffff url(images/background.jpg) fixed;
}






p {


    margin: 0;


    padding: 10px 0;


    text-align: justify;


}






#main {


    margin: 0 auto;


    padding: 0;


    width: 960px;


    text-align: left;


    background: #ffffff;


    border-left: 1px solid #EBB86C;


    border-right: 1px solid #EBB86C;


}






#header {
    height: 120px;
    background: #777777;


}






#menu {


    height: 22px;


    background: #999999;


}






middle {


}






#left {
    float: left;
    padding: 10px;
    width: 200px;
    background: #ffffff;


}






#cent {


    float: left;


    padding: 10px;


    width: 500px;


}






#right {


    float: right;


    padding: 10px;


    width: 200px;


    background: #ffffff;


}






#footer {
    clear: both;
    height: 25px;
    padding:5px;
    line-height: 40px;
    text-align: center;
    background: #ffffff;
}


ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}


ul {
text-align: center;
border-bottom: 1px solid #888;
padding-bottom: 5px;
}


ul li {
display: inline;
white-space: nowrap;
margin-right: 5px;
}


ul a:link, ul a:visited {
text-decoration: none;
background-color: #ccc;
color: #000;
border: 1px solid #888;
padding: 5px;
}


ul a:hover {
background-color: #fff;
border-bottom-color: #fff;
}

 

 

 

Od razu mówię że nie pisałem tego szablonu od podstaw. Szkielet oraz menu znalazłem w sieci. ;) Pozdrawiam i przepraszam za chaotycznie napisanie tematu, ale z racji późnej godziny ledwo dycham.

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy
×
×
  • Dodaj nową pozycję...