WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   Hjälp med positionsring css (https://www.wn.se/forum/showthread.php?t=1048684)

mojitoo 2011-06-15 19:01
Hjälp med positionsring css
 
Hej!

Jag behöver lite hjälp med att få en del av min meny att ligga korrekt.

Jag vill nämligen att den blå rutan ska ligga här:
http://topmenu.tempopage.com/img/correct_place.jpg

Medan den ligger här i verkligheten:
http://topmenu.tempopage.com/

Min css kod ser ut såhär:
Kod:
#top{
        background-color:#212121;
        background:url('../img/top_menu_bg.jpg') repeat-x;
        position:fixed;
        width:100%;
        height:75px;
        top:0;
        left:0;
}

#top_content{
        width:980px;
        margin-left:auto;
        margin-right:auto;
}


#topmenu ul{ float: left; margin: 0; padding: 0; font-family:verdana; font-size:14px; font-weight:bold;}
#topmenu li{display: inline;}
#topmenu ul a{float: left; text-decoration: none; padding: 5px 15px; height:65px; border-right:1px solid #333333; line-height: 85px;}

#topmenu a:link{color: #ffffff;}
#topmenu a:visited{color: #ffffff;}
#topmenu a:hover{background:url('../img/top_menu_bg_hover.jpg') repeat-x;}
#topmenu a#current{background: #ffffff; color: #000000;}


#topmenu_extra_buttons{
        background:url('../img/top_menu_extra.png');
        width:131px;
        height:24px;
}


#page{
        margin-top:100px;
        width:980px;
        margin-left:auto;
        margin-right:auto;
}
Om ni ser något som ni vet att inte kommer att fungera i koden får ni även gärna rätta till det men huvudgrejen är att jag vill få den blåa rutan till andra sidan. Tack på förhand! :)

allstars 2011-06-15 20:24
eftersom du har float i menyn måste du göra en clear:both på det #topmenu_extra_buttons.
För att högerställa kör också text-align:right.
använd inte height eller width på elementet. flytta även background-color till
#topmenu_extra_buttons a{}

Om du vill ha lite mer mellanrum runt om texten använd padding

mojitoo 2011-06-15 23:20
Tack så mycket men varför skulle jag flytta background color till #topmenu_extra_buttons a{} ?

Finns det någon bra förklaring/anledning till vad man ska lägga i vad?

eliasca 2011-06-16 02:53
Sätt position:relative på #page, och sedan lägg top_menu_extra_buttons i page och sätt right:0;top:0;

allstars 2011-06-16 08:21
mojito: annars blir bakgrunden över hela raden vilket inte din skiss illustrerar.

mojitoo 2011-06-16 18:56
Tack så mycket för er hjälp, dock så skulle jag behöva lite mer hjälp av er... så hoppas att ni kan hjälpa mig med följande.

Om ni går in på samma sida som förut:
http://topmenu.tempopage.com/

Så ser ni att jag har lagt till en slider där vilket ställer till det för mig. Som ni säkert har förstått så vill jag att min header med menyn alltid ska ligga överst men om jag scrollar ned på sidan så hamnar bilden ovanför och jag kan verkligen inte förstå varför. Jag har försökt ändra på en hel del inställningar men kan inte hitta vad som säger att den ska ligga över min meny och vänder mig därför till er för lite hjälp.

css koden till slidern hittar ni här:
Kod:
/* Egna inställningar */
 #slider {
    /*position:relative;*/
    width:980px; /* Change this to your images width */
    height:652px; /* Change this to your images height */
    background:url(../img/slider/interface/ajax-loader.gif) no-repeat 50% 50%;
}
#slider img {
    /*position:absolute;*/
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}


.nivo-controlNav {
        position:absolute;
        left:490px;
        bottom:42px;
}
.nivo-controlNav a {
        display:block;
        width:22px;
        height:22px;
        background:url(../img/slider/interface/bullets.png) no-repeat;
        text-indent:-9999px;
        border:0;
        margin-right:3px;
        float:left;
}
.nivo-controlNav a.active {
        background-position:0 -22px;
}

.nivo-directionNav a {
        display:block;
        width:30px;
        height:30px;
        background:url(../img/slider/interface/arrows.png) no-repeat;
        text-indent:-9999px;
        border:0;
}
a.nivo-nextNav {
        background-position:-30px 0;
        right:15px;
}
a.nivo-prevNav {
        left:15px;
}

.clear {
        clear:both;
}
 
 
 
/* The Nivo Slider styles */
.nivoSlider {
        position:relative;
}
.nivoSlider img {
        position:absolute;
        top:0px;
        left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        border:0;
        padding:0;
        margin:0;
        z-index:6;
        display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
        display:block;
        position:absolute;
        z-index:5;
        height:100%;
}
.nivo-box {
        display:block;
        position:absolute;
        z-index:5;
}
/* Caption styles */
.nivo-caption {
        position:absolute;
        left:0px;
        bottom:0px;
        background:#000;
        color:#fff;
        opacity:0.8; /* Overridden by captionOpacity setting */
        width:100%;
        z-index:8;
}
.nivo-caption p {
        padding:5px;
        margin:0;
}
.nivo-caption a {
        display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
        position:absolute;
        top:45%;
        z-index:9;
        cursor:pointer;
}
.nivo-prevNav {
        left:0px;
}
.nivo-nextNav {
        right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
        position:relative;
        z-index:9;
        cursor:pointer;
}
.nivo-controlNav a.active {
        font-weight:bold;
}
Om ni skulle vilja hitta någon mer kod för t.ex. scriptet så hittar ni den i visa källa i webbläsaren men jag antog att css koden var den mest relevanta.

Tack på förhand för er hjälp återigen! :)

allstars 2011-06-16 21:50
det har inte med slidern att göra utan du har väl position:fixed på menyn, eller?

Lägg till "z-index: 200" (tror att slidern har 100) på #top så fixar det sig säkert

mojitoo 2011-06-17 00:31
Citat:
Ursprungligen postat av allstars (Inlägg 20408843)
det har inte med slidern att göra utan du har väl position:fixed på menyn, eller?

Lägg till "z-index: 200" (tror att slidern har 100) på #top så fixar det sig säkert
Tackar å det varmaste allstars, du är verkligen en räddare i nöden! :)


Alla tider är GMT +2. Klockan är nu 14:46.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson