Forum PHP.pl > nierówna obramówka za tekstem

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: nierówna obramówka za tekstem

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

bykufgf

26.01.2012, 17:39:48

Witam. Mam taki problem. Dałem okno strony które będzie się tworzyć wraz z pisanym tekstem, ale problem polega na tym ,że końcówki środka strony wyjeżdżają za dolną część.Zaznaczyłem to na obrazku:

Kod HTML:

Kod

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Graf-Art</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen">
  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
  </head>
<body>
    <div id="container">
        <div id="pasek">
            <div class="menu">
                <ul>
                    <li class="blue">HOME</li>
                    <li><a class="link" href="#">Download</a></li>
                    <li><a class="link" href="#">Galeria</a></li>
                    <li><a class="link" href="#">Kontakt z Adminem</a></li>
                </ul>
            </div>
        </div>
        <div id="logo">Graf<br/>Art</div>
        <div class="clear"></div>
        <div id="naglowek">Ostatnio dodane:</div>
        <div id="nieb_pasek">
            <div class="menu">
                <ul>
                    <li><a class="link" href="#">Obrazek 1</a></li>
                    <li><a class="link" href="#">Obrazek 2</a></li>
                    <li><a class="link" href="#">Obrazek 3</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            <div id="obrazki_nag">
                <div class="menu">
                    <ul>
                        <li id="ob1"></li>
                        <li id="ob2"></li>
                        <li id="ob3"></li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        <div id="sr_srodek">
            <div id="sr_gora">
                <div id="sr_dol">
                        Jakis tekstJakis tekstJakis tekstJakis tekstJakis tekstJakis
                        Jakis tekstJakis tekst
                        Jakis tekstJakis tekst
                        Jakis tekstJakis tekst
                        Jakis tekstJakis tekst
                        Jakis tekstJakis tekst
                        Jakis tekstJakis tekst
                        Jakis tekstJakis tekstJakisJakis tekstJakis tekst
                        Jakis tekstJakis tekst
                        Jakis tekstJakis tekstJakis tekstJakis tekstJakis tekstJakis tekst
                        Jakis tekstJakis tekstJakis tekstJakis tekstJakis tekstJakis tekst
                        Jakis tekstJakis tekstJakis tekstJakis tekstJakis tekstJakis tekst

                </div>
            </div>
        </div>
        <div id="stopka"></div>
    </div>
</body>
</html>

Kod CSS:

Kod

@font-face {
    font-family: 'BroadwayRegular';
    src: url('../fonts/broadw-webfont.eot');
    src: url('../fonts/broadw-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/broadw-webfont.woff') format('woff'),
         url('../fonts/broadw-webfont.ttf') format('truetype'),
         url('../fonts/broadw-webfont.svg#BroadwayRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
background:#FFF;
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

#container {
margin:0 auto;
width:950px;
}

.clear{
clear:both;
}

/* Deklaracja linkow */
.link{
text-decoration:none;
color:black;
}
.link:hover{
color:blue;
}
.blue{
color:blue;
}
/* --------------------------------------------------------------------
                            =gorna czesc strony
*/

#pasek{
width:606px;
height:45px;
background:url(../images/pasek.png);
margin:150px auto;
}

.menu ul{
font-family: Tahoma;
font-size:14px;
font-weight: bold;
list-style:none;
text-shadow: 1px 2px 3px black;
}
.menu ul li{
float:left;
margin:15px 30px
}

#logo{
font-family:BroadwayRegular;
font-size:60px;
margin:-260px 50px;
}

#naglowek{
font-family:Tahoma;
font-size:12px;
margin:280px 173px;
}

#nieb_pasek{
background:url(../images/nieb_pasek.png);
width:608px;
height:198px;
margin: -270px auto;
}
#nieb_pasek .menu li{
margin: 20px 65px;
font-weight:normal;
text-shadow:none;
}

#obrazki_nag .menu li{
width:147px;
height:149px;
margin: -15px 23px;
}
/*---------------------------=ostatnio dodane obrazki---------------*/
#ob1{
background:url(../images/ob1.png)
}
#ob2{
background:url(../images/ob2.png)
}
#ob3{
background:url(../images/ob3.png)
}
/*--------------------------------------------------------------------*/
/*---------------------------------------------------------------------
                        =koniec gornej czesci strony */
/*-----------------------------=srodkowa czesc strony---------------------*/
#sr_srodek{
background:url(../images/sr_srodek.png) repeat-y center top;
width:609px;
margin: 350px auto;
}

#sr_gora{
background:url(../images/sr_gora.png) no-repeat center top;
}

#sr_dol{
background:url(../images/sr_dol.png) no-repeat center bottom;
}
/*------------------------------=koniec srodkowej czesci strony----------------*/
/*--------------------------------=dolna czesc strony-----------------*/
#stopka{
background:url(../images/stopka.png);
width:606px;
height:45px;
margin:-200px auto;
}
/*---------------------------------koniec dolnej czesci strony---------*/

Damonsson

27.01.2012, 23:48:56

Daj link do tego online

bykufgf

28.01.2012, 09:12:30

Do szablonu czy strony?

Szablon:
http://www.speedyshare.com/file/reE8Q/StronaWWW2.rar

Strona:
http://digiartpolska.allalla.com/

Damonsson

28.01.2012, 12:07:26

Najprostszym wyjściem jak dla Ciebie będzie myślę...otwarcie tła górnego i dolnego w photoshopie i usunięcie tych przezroczystości, które odsłaniają tło środkowe.

A tak na przyszłość, to zainteresuj się border-radius.

bykufgf

29.01.2012, 18:29:53

Dzięki pomogło. Temat można zamknąć.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.