logo elektroda
logo elektroda
X
logo elektroda
REKLAMA
REKLAMA
Adblock/uBlockOrigin/AdGuard mogą powodować znikanie niektórych postów z powodu nowej reguły.

Menu DHTML z dynamicdrive.com na stronie mdkbarcin.nazwa.pl przesunięte w prawo

Kamerzysta 18 Mar 2007 15:24 1559 4
REKLAMA
  • #1 3691622
    Kamerzysta
    Poziom 17  
    Posty: 532
    Pomógł: 6
    Ocena: 36
    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
  • REKLAMA
  • #2 3691681
    krzychoocpp
    VIP Zasłużony dla elektroda
    Posty: 1866
    Pomógł: 387
    Ocena: 58
    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.
  • REKLAMA
  • #3 3692175
    Kamerzysta
    Poziom 17  
    Posty: 532
    Pomógł: 6
    Ocena: 36
    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.. :(
  • REKLAMA
  • Pomocny post
    #4 3692691
    krzychoocpp
    VIP Zasłużony dla elektroda
    Posty: 1866
    Pomógł: 387
    Ocena: 58
    Witam,
    Kamerzysta napisał:
    rozjechał się baner
    Bo mu tak kazałeś:
    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 3693865
    Kamerzysta
    Poziom 17  
    Posty: 532
    Pomógł: 6
    Ocena: 36
    Zmiana tej lini nie pomogła.. musiałem zmienić także inne linie z paddingiem.. bynajmniej cieszę się za wskazanie problemu. Dziękuję :)
REKLAMA