X

Strona www, DHTML, menu nie działa poprawnie.

Kamerzysta 18 Mar 2007 15:24
  • #1 18 Mar 2007 15:24
    Kamerzysta
    Level 17  
    Helpful post? (0)
    Witam
    Oto stronka www.mdkbarcin.nazwa.pl
    Jak zobaczycie sami.. menu nie działa poprawnie.. nie mam zielonego pojęcia dlaczego. Jest odsunięte za bardzo na prawo.
    Menu te ściągnąłem ze strony
    http://dynamicdrive.com/dynamicindex1/chrome/index.htm

    a oto kod css
    .chromestyle{
    width: 99%;
    font-weight: bold;
    }

    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .chromestyle ul{
    border: 1px solid #BBB;
    width: 100%;
    background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    text-align: center; /*set value to "left", "center", or "right"*/
    }

    .chromestyle ul li{
    display: inline;
    }

    .chromestyle ul li a{
    color: #494949;
    padding: 0px 0px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    }

    .chromestyle ul li a:hover{
    background: url(chr_over.gif) center center repeat-x; /*THEME CHANGE HERE*/
    }

    .chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
    content: " v";
    /*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
    }


    /* ######### Style for Drop Down Menu ######### */

    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #BBB; /*THEME CHANGE HERE*/
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:10;
    background-color: white;
    width: 200px;
    visibility: hidden;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
    }


    .dropmenudiv a{
    position: relative;
    width: auto;
    display: inline;
    text-indent: 3px;
    border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }

    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }

    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-color: #F0F0F0;
    }
    ---------------------------
    a oto schemat drugi do pozostałych ustawień
    body{
    margin: 7px;
    padding: 0;
    background: #FFFFFF;
    color: #4A2500;
    text-align: center;
    }

    * {font-family: verdana, tahoma, arial, sans-serif; font-size: 12px}

    .podstawa {
    padding: 0;
    background: #FFFFFF;
    margin: auto;
    width: 760px;
    height: 600px;
    position: relative;
    text-align: center;
    }

    .left {
    text-align: left;
    }

    .center {
    text-align: center;
    }

    .lista {
    list-style: normal;
    text-align: left;
    }

    .top {
    height: 210px
    }

    .logo1 {
    width: 760px;
    height: 60px;
    position: relative;
    }

    /*druga warstwa składaj±ca się na logo*/
    .logo2 {
    width: 760px;
    height: 20px;
    margin-top: 60px;
    position: absolute;
    top: 140px;
    left: 0px
    }


    #lewa {
    float: left;
    width: 115px;
    height: 660px;
    background: url('../pic/belka.jpg');
    padding: 0px;
    }


    #prawa {
    float: right;
    width: 115px;
    height: 660px;
    background: url('../pic/belka.jpg');
    padding: 0px;
    }


    #srodek {
    background: #FFFFFF;
    margin-top: 10px;
    margin: auto;
    height: auto;
    }

    stopka {
    clear: both;
    background-color: #FFFFFF;
    height: 50px;
    width: auto;
    }

    hr {
    color: #312C29;
    background: transparent;
    size: 1;
    }

    .menu{
    width: 115 px;
    height: auto;
    padding: 0px;
    margin-top:100 px;
    text-align: justify;
    }
    .link{
    font-family: Courier, Tahoma, Verdana, 'Times New Roman', sans-serif;
    font-size: 13pt;
    color: black;
    display: block; /* elementy będ&plusmn; wy&para;wietlane w bloku - nie będzie trzeba stosować <br /> */
    text-decoration: none; /* bez "dekoracji", czyli bez podkre&para;lenia*/
    }
    .link:hover /* "gdy myszka nad" */{
    font-family: Courier, Tahoma, Verdana, 'Times New Roman', sans-serif;
    font-size: 13pt;
    color: #C66300;
    display: block;
    text-decoration: none;
    border-bottom: gray dotted 1px; /* podkre&para;lenie */
    border-width: normal; /* "szeroko&para;ć" podkre&para;lenia */
    }
    ------------------------
    Wywołanie tego menu jest w divie srodek.
    Proszę o wskazówki
  • #2 18 Mar 2007 15:38
    krzychoocpp
    VIP Zasłużony dla elektroda
    Helpful post? (0)
    Witam, proponuję żebyś wyrzucił to menu i zastosował np. takie: http://alistapart.com/articles/dropdowns . Czysty CSS, bez żadnych zabaw w JS (oprócz kilku linii, ale to dla IE). Nie ma z nim takich problemów i nikt nie każe wklejać notek do pliku.

    Pozdrawiam, Krzysztof.
  • #3 18 Mar 2007 17:37
    Kamerzysta
    Level 17  
    Topic author Helpful post? (0)
    Wrzuciłem nowe menu.. ale znów są problemy.. rozjechał się baner.
    Tło ustawiłem narazie takie samo jak na tamtej stronie.. ale jest przejrzyste.. :(
  • Helpful post
    #4 18 Mar 2007 19:48
    krzychoocpp
    VIP Zasłużony dla elektroda
    Helpful post? (0)
    Witam,
    Kamerzysta wrote:
    rozjechał się baner
    Bo mu tak kazałeś:
    Code:
    p {padding: 1.25em 1.25em 0.25em 0.25em;}
    A że baner jest w 'p' to odjeżdża o ustalone wartości. Tło się nie wyświetla, bo jest ustawione na obrazek. Skopiowałeś prawie cały CSS z tamtej strony (trzeba było cały, wtedy menu wyglądałoby tak jak tam :) ), ale nie skopiowałeś obrazków. Ustaw tło jako kolor.

    Pozdrawiam, Krzysztof.
  • #5 19 Mar 2007 00:14
    Kamerzysta
    Level 17  
    Topic author Helpful post? (0)
    Zmiana tej lini nie pomogła.. musiałem zmienić także inne linie z paddingiem.. bynajmniej cieszę się za wskazanie problemu. Dziękuję :)
  Search 4 million + Products
Browse Products