Forum Debian Users Gang

juliagoda · 2011-06-23 20:46:20

Hej. Mam nadzieję że to dobry dział, mam problem z jednym atrybutem w CSS. Męczę się cały dzień i nie mogę wykombinować. Mam logo na samej górze, menu poziome na samym środku, a teraz nie wiem jak zrobić jakby taki biały arkusz pod tym menu. Ogólnie tło strony jest szare. A chcę właśnie, żeby umieścić ten biały arkusz na treść strony. Ten arkusz ma odpowiadać szerokości poziomego menu oraz długości całej strony. Wie ktoś, jaki będzie najlepszy sposób, obciążający najmniej stronę i pozwalający na odczyt przez większość przeglądarek?

// „Elektronika i Programowanie” jak dla mnie — ArnVaker

jezoo · 2011-06-23 20:58:11

Po pierwsze niestety nie ten dział :)
Po drugie:

Kod:

* {margin: 0; padding: 0;}
.wrapper {width: 800px; margin: 0 auto;}
.main {width: 800px; float: left;}
.main .banner {width: 800px; float: left;}
.main .menu {width: 800px; float: left; position: relative;}
.main .content {width: 800px; float: left; position: relative; background: #FFF;}
.main .footer {width: 800px; float: left; clear: both; margin-top: 15px;}

HTML

Kod:

<div class='wrapper'>
  <div class="main">
    <div class="banner">
    </div>
   <div class="menu"></div>
   <div class="content"></div>
   <div class="footer"></div>
</div>
</div>

juliagoda · 2011-06-23 21:13:34

Nic nie dało. Może lepiej podam CSS:

Kod:

img { border: none; }
 { border-bottom-style: ridge }

body {
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 1.0em;
    background: #C0C0C0;
    color: #000000;
    
}
#body {
    padding: 0;
    width: 100%;

}

#header {
    position: relative;
    background: #ffffff;
    border-bottom: 1px solid #b0b0b0;
    height: 125px;
    padding-left: 1em;

}

#header img {
    position: absolute;
    top: 12px;

}

#header h1 a {
    color: #f0f0f0;
    text-decoration: none;
}

/*#mainContentContainer div {
    min-width: 400px;
}*/


<h1 style="font-size: large" style="color: #000000; ">
</h1>


ul, ul li {
    display: block;
    list-style: none;
    padding-left: 90px;
    margin:0 auto!important;
}


    ul {
        float: center;
    background-color: #fff;
    padding: 1px 0 1px 1px;
    border: 1px solid #000;
        width:1100px;
        margin:0 auto;
        background-color: #fff;
        padding: 1px 0 1px 1px;
        overflow:auto;
        height: 35px;
}
    


ul li {
    float: left;
        overflow: hidden;

}

ul a:link, ul a:visited {
    text-decoration: none;
    display: block;
    font-weight: bold;
        width: 187px;
        text-align: center;
    background: #000 url("menu_poziome_tlo.gif") repeat-x center;
    color: #fff;
    padding: 10px 16px;
    border-right: 1px solid #fff;
    border-right: 1px solid #fff;

}

ul a:hover {
    background-color: #800;
    background-image: url("menu_poziome_tlo2.gif");

* {margin: 0; padding: 0;}
.wrapper {width: 800px; margin: 0 auto;}
.main {width: 800px; float: left;}
.main .banner {width: 800px; float: left;}
.main .menu {width: 800px; float: left; position: relative;}
.main .content {width: 800px; float: left; position: relative; background: #FFF;}
.main .footer {width: 800px; float: left; clear: both; margin-top: 15px;}

Minio · 2011-06-23 21:25:56

Podaj jeszcze HTML, bo sam CSS to na niewiele się zda.

juliagoda · 2011-06-23 21:30:19

Kod:

</head>

<body>

<div id="body">

    <div id="header">

        <a href="adres"><img src="Logo.png" alt="Strona główna" title="Strona główna"></a>

        <div id="search">

            <form action="/search.php" method="get">
            </form>
            <script type="text/javascript">
              <!--
                  disable_buttons()
                -->
            </script>
        </div>

    </div>

<ul>
<li><a href="czcionki.html">jjj</a></li>
<li><a href="tekst.html">hhh</a></li>
<li><a href="tlo.html">kkk</a></li>
<li><a href="marginesy.html">FAQ</a></li>
<li><a href="obramowanie.html">Kontakt</a></li>
</ul>
<div class='wrapper'>
  <div class="main">
    <div class="banner">
    </div>
   <div class="menu"></div>
   <div class="content"></div>
   <div class="footer"></div>
</div>
</div>


</body></html>

Ostatnio edytowany przez juliagoda (2011-06-23 22:00:37)

Minio · 2011-06-23 22:06:00

Dam rybę a nie wędkę, niech stracę.
Chodzi o coś takiego?

Kod:

<!DOCTYPE html>
<head>
        <style>

body, div, p, ul, li {
        margin: 0;
        padding: 0;                                                                                                                                    
        /* poszukaj jakiegoś dobrego resetowania CSS */                                                                                                
}                                                                                                                                                      
img { border: none; }                                                                                                                                  
/* a to skąd?                                                                                                                                          
{ border-bottom-style: ridge }*/                                                                                                                       
                                                                                                                                                       
body {                                                                                                                                                 
    font-family: Verdana, Arial, Sans-Serif;                                                                                                           
    font-size: 1.0em;                                                                                                                                  
    background: #C0C0C0;                                                                                                                               
    color: #000000;                                                                                                                                    
                                                                                                                                                       
}                                                                                                                                                      
#body {                                                                                                                                                
    padding: 0;                                                                                                                                        
    width: 100%;                                                                                                                                       

}

#header {
    background: #ffffff;
    border-bottom: 1px solid #b0b0b0;
    height: 125px;
    padding-left: 1em;

}

#header img {
    position: absolute;
    top: 12px;

}

#header h1 a {
    color: #f0f0f0;
    text-decoration: none;
}

/*#mainContentContainer div {
    min-width: 400px;
}*/


ul, ul li {
    display: block;
    list-style: none;
    margin: 0 auto!important;
}


ul {
        overflow:auto;
        padding-bottom: 1em;
}
    


ul li {
        float: left;
        overflow: hidden;
}

ul a:link, ul a:visited {
    text-decoration: none;
    display: block;
    font-weight: bold;
        width: 187px;
        text-align: center;
    background: #000 url("menu_poziome_tlo.gif") repeat-x center;
    color: #fff;
    padding: 10px 16px;
    border-right: 1px solid #fff;

}

ul a:hover {
    background-color: #800;
         background-image: url("menu_poziome_tlo2.gif");
 }

 #wrapper {
        background-color: #fff;
        padding: 1px 0 1px 1px;
        border: 1px solid #000;
        width:1100px; /*this is so wrong*/
        margin: 0 auto;
        padding: 1px 0 1px 1px;
 }

</style>
</head>

<body>

<div id="body">
    <div id="header">
        <a href="adres"><img src="Logo.png" alt="Strona główna" title="Strona główna"></a>
        <div id="search">
            <form action="/search.php" method="get">
            </form>
        </div>
          </div>
          <div id="wrapper">
                <ul>
                        <li><a href="czcionki.html">Fora internetowe</a></li>
                        <li><a href="tekst.html">Szkoły oraz uczelnie</a></li>
                        <li><a href="tlo.html">Akcje charytatywne</a></li>
                        <li><a href="marginesy.html">FAQ</a></li>
                        <li><a href="obramowanie.html">Kontakt</a></li>
                </ul>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris turpis sem, cursus vitae lacinia vitae, bibendum ut nisi. Ut a mauris felis, vel vehicula dolor. Nunc est elit, sodales sed interdum vel, gravida a nunc. Donec blandit ullamcorper risus, sed sollicitudin enim consequat in. Aliquam mattis leo a est pulvinar vulputate. Integer tempus congue dolor, ut posuere turpis consectetur ut. Sed adipiscing luctus lectus vehicula vehicula. Duis lacinia aliquet sapien, ut blandit ligula vehicula et. Cras nec sem felis, sit amet congue velit. Donec congue felis sit amet lacus egestas at vulputate libero aliquet.</p>
                 <p>In in luctus erat. Phasellus ornare dui vel augue scelerisque ac ultrices massa tincidunt. Maecenas placerat molestie urna, et interdum erat gravida vel. Sed sapien leo, pellentesque ut imperdiet vitae, ultricies in est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus condimentum, nibh a semper vestibulum, mauris turpis suscipit nisl, at tristique enim ipsum id lorem. Duis ac orci ut tellus eleifend consequat vitae ut est. Quisque lobortis mi laoreet ante mollis ac ultricies tortor dignissim. Duis rhoncus pharetra laoreet. Aenean suscipit, mi vitae commodo pharetra, quam quam porta urna, at vehicula tellus neque et ante. Praesent vel quam felis. Etiam quis faucibus felis.</p>
         </div>
</div>
</div>


</body>
</html>

Polecam też poczytać trochę o HTML i CSS, bo sposób w jaki próbowałeś(-aś?) wykorzystać poradę jezoo wskazuje, że temat jest Ci raczej obcy.

juliagoda · 2011-06-23 22:29:03

Arkusza CSS jeszcze nie "posprzątałam" stąd taki bałagan a mi się nie chciało narazie kasować zbędności bo wzorowałam się poniekąd na innej stronie. Teraz to widzę, nie doczytałam tylko wzięłam kopiuj i wklej. Moje niedopatrzenie. A i to nie to ale wielkie dzięki, znalazłam inną alternatywę. Wyrównałam logo do menu poprzez marginesy w CSS i umieściłam pionowe linie po obu stronach ale dzięki.

Ostatnio edytowany przez juliagoda (2011-06-23 22:29:30)

Forum Debian Users Gang

Ogłoszenie

#1 2011-06-23 20:46:20

juliagoda - Użytkownik

Modyfikacja w CSS

#2 2011-06-23 20:58:11

jezoo - Dzięcioł

Re: Modyfikacja w CSS

Kod:

Kod:

#3 2011-06-23 21:13:34

juliagoda - Użytkownik

Re: Modyfikacja w CSS

Kod:

#4 2011-06-23 21:25:56

Minio - Użyszkodnik

Re: Modyfikacja w CSS

#5 2011-06-23 21:30:19

juliagoda - Użytkownik

Re: Modyfikacja w CSS

Kod:

#6 2011-06-23 22:06:00

Minio - Użyszkodnik

Re: Modyfikacja w CSS

Kod:

#7 2011-06-23 22:29:03

juliagoda - Użytkownik

Re: Modyfikacja w CSS

Stopka forum