Forum PHP.pl > [CSS] Menu wychodzi za content

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Menu wychodzi za content

Zmorcia

22.02.2010, 15:44:59

Witajcie, mam taki problem: oto moja strona: http://rapowisko.pl/sklep/product.php?id=1 zauważcie, że menu wychodzi za content, a nie powinno tak być. Content powinien być równy Menu. Jaki błąd popełniłem?

pedro84

22.02.2010, 16:00:49

Overflow auto dla content_wrapper.

Kod masakra

Zmorcia

22.02.2010, 16:47:50

niestety nie dziala.

krzysztof_kf

22.02.2010, 17:22:11

css do porządku ;/ bajzer ale zaraz postaram ci tu zrobić porządek

powiem tak brak wiedzy na temat css i reszty poucz się trochę ;/

css

Kod

body{ margin:0 auto; padding:0; background: #37383c url('../images/bg-repeat.gif') repeat-x; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
a{ color: #a00b00; }
a:hover{ color: #37383c; }

#main_container{ position: relative; width: 962px; margin: 0 auto; background: #dfe2e4; }
#top_section{ background: #EAEAEA; width: 962px; height: 126px; background: url('../images/top-logo.gif'); }
#content_wrapper{ background: #EAEAEA; height: 100%; float: left; width: 100%; }
#column {width: 962px; height: 100%; background: #EAEAEA; }
#column-left {width: 230px; margin: 6px 0 0 6px; float: left;}
#column-right {width: 732px; margin: 6px 0 0 6px; float: left;}
#footer{ text-align: right; width:962px; background: #37383c; color: #FFF; padding: 4px 0; }

.product_box{ width: 152px; height: 315px; display: inline-block; margin: 5px; margin-left: 12px;}
.product_box img{ margin: 3px; border: 3px solid #fff;}

.product_info{ margin: 6px; color: #37383c;}
.product_cost{ margin: 6px; margin-top: 10px; color: #a00b00; font-size: 16px;}
.product_cost_normal { float: right; font-size: 14px; font-weight: bold;}
.product_cost_pre { font-size: 12px; }

.product_name{ margin: 6px; margin-top: 5px; color: #a00b00; font-size: 16px;}
.product_name_normal { font-size: 14px; font-weight: bold; display: block;}
.product_name_producer { font-size: 12px; display: block; }

#bar_polecane_ubrania{ width: 700px; height: 28px; background: url('../images/bar-polecane.gif') no-repeat; margin-top: 10px; margin-bottom: 15px; }
#bar_hot_ubrania{ width: 700px; height: 28px; background: url('../images/bar-hot.gif') no-repeat; margin-top: 10px; margin-bottom: 15px; }
#bar_produkt{ width: 700px; height: 28px; background: url('../images/bar-produkt.gif') no-repeat; margin-top: 10px; margin-bottom: 15px; }

.product_hot_cost{ position: relative; top: -185px; right: -85px; }
.star_cost{ width: 93px; height: 57px; background: url('../images/cost-star.png'); text-align: center; color: #fff; font-size: 19px; font-weight: bold; padding-top: 35px; }
.content_padding{margin: 10px;margin-top: 0;}

.product-menu img{ border: none; }
.product-menu-last{ display: block; }
.product-menu-last{ display: block; margin-bottom: 20px; }

Kod

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
<title>Dynamic Drive: CSS Fixed Layout #2.1- (Fixed-Fixed)</title>
<link rel="stylesheet" media="screen" type="text/css" href="product.php_pliki/main.css" title="">
</head><body>

   <div id="main_container">
  <div id="top_section"></div>
  <img src="product.php_pliki/top-navbar-glowna.gif" alt=""><img src="product.php_pliki/top-navbar-top10.gif" alt=""><img src="product.php_pliki/top-navbar-kategorie.gif" alt=""><img src="product.php_pliki/top-navbar-marki.gif" alt=""><img src="product.php_pliki/top-navbar-onas.gif" alt=""><img src="product.php_pliki/top-navbar-regulamin.gif" alt=""><img src="product.php_pliki/top-navbar-kontakt.gif" alt="">

  <img src="product.php_pliki/content-gora.gif" alt="">

  <div id="content_wrapper">

    
  <div id="column">
  <div id="column-left">
    <span class="product-menu"><img src="product.php_pliki/product-menu-new.gif" alt=""></span>
    <span class="product-menu"><img src="product.php_pliki/product-menu-top10.gif" alt=""></span>
    <span class="product-menu"><img src="product.php_pliki/product-menu-categories.gif" alt=""></span>

    <span class="product-menu"><img src="product.php_pliki/product-menu-bg.htm" alt=""></span>
        <span class="product-menu"><a href="http://rapowisko.pl/sklep/products.category.php?id=1"><img src="product.php_pliki/product-menu-categories-koszulki.gif" alt=""></a></span>
        <span class="product-menu"><a href="http://rapowisko.pl/sklep/products.category.php?id=2"><img src="product.php_pliki/product-menu-categories-buty.gif" alt=""></a></span>
        <span class="product-menu"><a href="http://rapowisko.pl/sklep/products.category.php?id=3"><img src="product.php_pliki/product-menu-categories-spodenki-krotkie.gif" alt=""></a></span>
        <span class="product-menu"><a href="http://rapowisko.pl/sklep/products.category.php?id=4"><img src="product.php_pliki/product-menu-categories-bluzy.gif" alt=""></a></span>
        <span class="product-menu"><a href="http://rapowisko.pl/sklep/products.category.php?id=5"><img src="product.php_pliki/product-menu-categories-dresy.gif" alt=""></a></span>
        <span class="product-menu"><a href="http://rapowisko.pl/sklep/products.category.php?id=6"><img src="product.php_pliki/product-menu-categories-kurtki.gif" alt=""></a></span>
        <span class="product-menu"><a href="http://rapowisko.pl/sklep/products.category.php?id=7"><img src="product.php_pliki/product-menu-categories-czapki.gif" alt=""></a></span>
        <span class="product-menu"><a href="http://rapowisko.pl/sklep/products.category.php?id=8"><img src="product.php_pliki/product-menu-categories-swetry.gif" alt=""></a></span>
        <span class="product-menu"><a href="http://rapowisko.pl/sklep/products.category.php?id=9"><img src="product.php_pliki/product-menu-categories-akcesoria.gif" alt=""></a></span>
        <span class="product-menu"><a href="http://rapowisko.pl/sklep/products.category.php?id=10"><img src="product.php_pliki/product-menu-categories-koszule.gif" alt=""></a></span>
        <span class="product-menu"><a href="http://rapowisko.pl/sklep/products.category.php?id=11"><img src="product.php_pliki/product-menu-categories-bielizna.gif" alt=""></a></span>
        <span class="product-menu"><img src="product.php_pliki/product-menu-bg.htm" alt=""></span>

    <span class="product-menu"><img src="product.php_pliki/product-menu-marki.gif" alt=""></span>
    <span class="product-menu"><img src="product.php_pliki/product-menu-onas.gif" alt=""></span>
    <span class="product-menu"><img src="product.php_pliki/product-menu-regulamin.gif" alt=""></span>
    <span class="product-menu-last"><img src="product.php_pliki/product-menu-faq.gif" alt=""></span>

    <img src="product.php_pliki/box-wysylka.gif" alt=""><br><br>
   </div>
  </div>
      
  <div id="column-right">
  <img src="product.php_pliki/content-dol.gif" alt=""><br>
  </div>

     <img src="product.php_pliki/promo-wysylka.gif" alt=""><br>
     <div id="bar_produkt"> </div>
     dfgdfgdfgdfg
    </div>
   </div>
  </div>
  <div id="footer">
   <img src="product.php_pliki/footer-nav.gif" alt="">
  </div>
</div>


</body></html>

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.