Avatar billede PiaOtium Nybegynder
14. marts 2011 - 11:19 Der er 8 kommentarer

Ændring af hvid kant rund om dropdown menu fra CSS Menu Generator

Jeg ønsker mig en hjemmeside med sort baggrundsfarve.
Jeg er helt ny på området.Når jeg benytter den gule dropdown menu fra CSS Menu Generator kommer der en hvid kant rundt om, hvordan får jeg den sort.

Jeg benytter Adobe Dreameaver CS5 til PC
Avatar billede pstidsen Novice
14. marts 2011 - 12:02 #1
Læs noget kildekode ind eller link til siden.
Avatar billede PiaOtium Nybegynder
14. marts 2011 - 15:54 #2
Mener du at jeg skal lægge alle kode til menuen her? Jeg har ikke lagt siden ud på nettet endnu.
Vh.Pia
Avatar billede Bdev Nybegynder
15. marts 2011 - 19:05 #3
Ja, for at kunne hjælpe er det nødvendigt at se koderne.

Både html og CSS koderne.
Avatar billede PiaOtium Nybegynder
16. marts 2011 - 10:11 #4
Hej
Her er så mine koder i html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Otium</title>
<link rel="stylesheet" type="text/css" href="menu/menu_style.css" />

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="body">
<div id="wrapper">

<div id="header">
    <div id="headerTop"></div><!--headerTop slut-->
    <div id="headerBottom">

        <div class="nav-container-outer">
          <img src="menu/images/nav-bg-l.jpg" alt="" class="float-left" />
          <img src="menu/images/nav-bg-r.jpg" alt="" class="float-right" />
          <ul id="nav-container" class="nav-container">
              <li><a class="item-primary" href="index.html" target="_self">Forsiden</a>
                <ul style="width:150px;">
                    <li><a href="kontakt.html" title="Kontakt" target="_self" >Kontakt</a></li>
                </ul>
              </li>
              <li><span class="divider divider-vert" ></span></li>
              <li><a class="item-primary" href="nyheder.html" target="_self">Nyheder</a>
              </li>
              <li><span class="divider divider-vert" ></span></li>
              <li><a class="item-primary" href="ego.html" target="_self">Hvem er jeg</a>
              </li>
              <li><span class="divider divider-vert" ></span></li>
              <li><a class="item-primary" href="killinger.html" target="_self">Killinger</a>
                <ul style="width:150px;">
                    <li><a href="nyestekuld.html" title="Til salg" target="_self" >Til salg</a></li>
                    <li><a href="kuld.html" title="Tidligere kuld" target="_self" >Tidligere kuld</a></li>
                </ul>
              </li>
              <li><span class="divider divider-vert" ></span></li>
              <li><a class="item-primary" href="galleri.html" target="_self">Galleri</a>
                <ul style="width:150px;">
                    <li><a href="hunkat.html" title="Hunkatte" target="_self" >Hunkatte</a></li>
                    <li><a href="gamlekatte.html" title="Katte jeg har ejet" target="_self" >Katte jeg har ejet</a></li>
                </ul>
              </li>
              <li><span class="divider divider-vert" ></span></li>
              <li><a class="item-primary" href="hjem.html" target="_self">Her bor vi</a>
              </li>
              <li><span class="divider divider-vert" ></span></li>
              <li><a class="item-primary" href="gaestebog.html" target="_self">Gæstebog</a>
              </li>
              <li><span class="divider divider-vert" ></span></li>
              <li><a class="item-primary" href="links.html" target="_self">Links</a>
              </li>
              <li><span class="divider divider-vert" ></span></li>
              <li class="clear"> </li>
          </ul>
        </div>
    </div><!--headerBottom slut-->
</div><!--header slut-->

<div id="content">
    <div id="contentTxtbox">
   
        <div id="contentTxt">Velkommen til Otium</div>
        <div id="cTxtright">Opdræt af Siameser siden 1987</div>
      </div><!--contentTxtbox slut-->
   
        <div id="contentBilled"><img src="ing/IMG_0254.jpg" /></div>
        <div class="cBxt">Foto Ela Zmich</div>
     
</div><!--content slut-->

    <div id="footer">
    <div id="footerTxt">
        <div><ul class="ul">
            <li class="liL">mit navn</li>
            <li class="li">min adresse</li>
            <li class="li">min by</li>
            <li class="liRight">Tlf. </li>
        </ul></div><!--liste slut-->
    </div><!--slut footerTxt-->
    </div><!--footer slut-->
</div><!--wrapper slut-->
</div><!--boddy slut-->
</body>
</html>

og her er CSS style

@charset "utf-8";
/* CSS Document */

#body{
   
}
#wrapper{
    height:900px;
    width:960px;
    background-color:#000;
    color:#C93;
}
#header{
    height:150px;
    width:960px;
}
#headerTop{
    height:50px;
    width:960px;
    font-size:30px;
    margin-left:25px;
   

}
#headerBottom{
    height:50px;
    width:960px;
}
#content{
    height:785px;
    width:960px;
}
#billed{
    height:310px;
    width:350px;
    margin-left:auto;
    margin-right:auto;
    margin-top:40px;
}
#billednæste{
    height:310px;
    width:350px;
    margin-left:auto;
    margin-right:auto;
    margin-top:40px;
}
#contentBilled{
    height:315px;
    width:320px;
    margin-left:auto;
    margin-right:auto;
    margin-top:40px;
}
.cBxt{
    height:20px;
    width:320px;
    margin-left:auto;
    margin-right:auto;
    font-size:12px;
    color:#CCC
}

#contentTxtbox{
    height:30px;
    width:480x;
   
    margin-top:40px;
    font-size:30px;
   
}
#contentTxt{
    height:30px;
    width:480x;
    padding-left:20px;
    float:left;
}
#cTxtright{
    height:30px;
    width:480x;
    float:right;
    padding-right:20px;
}

#footer{
    height:35px;
    width:960px;
    float:left;
}
#footerTxt{
    height:30px;
    width:455px;
    margin-left:auto;
    margin-right:auto;
}
.ul{
    font-size:12px;
}

.li{
    float:left;
    margin-right:20px;
}
.liL{
    list-style-type:none;
    float:left;
    margin-right:20px;
}
.liRight{
    float:left;
    margin-right:none;
}






til sidst er CSS  menu style

@charset "utf-8";
/* CSS Document */

/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(images/nav-bg.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}

/*^'^ Primary Items ^'^*/   
#nav-container a{   
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(images/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}

#nav-container a:hover{
color: #6C3600;
background: url(images/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}

/*^'^ Secondary Items Container ^'^*/   
#nav-container div, #nav-container ul{   
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(images/item-secondary-container-bg.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}

/*^'^ Secondary Items ^'^*/   
#nav-container div a, #nav-container ul a{   
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(images/item-secondary-bg.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}

/*^'^ Secondary Items Hover State ^'^*/   
#nav-container div a:hover, #nav-container ul a:hover{   
background-color: #FFFFFF;
background: url(images/item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#CC0000;
}

/*^'^ Secondary Item Titles ^'^*/   
#nav-container .item-secondary-title{   
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(images/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}

/*^'^ Horizontal Dividers ^'^*/   
#nav-container .divider-horiz{   
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}

/*^'^ Vertical Dividers ^'^*/   
#nav-container .divider-vert{   
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}

mon det er nok der er også billeder til menu style skal du også have dem?
Pia
Avatar billede Bdev Nybegynder
22. marts 2011 - 15:22 #5
Har du fået løst dit problem. Jeg ser først nu at du har lagt koden op. Beklager.

Jeg prøvede lige koderne og kan ikke helt forstå dit problem.

Jeg får en orange dropdown, men ingen hvid ramme.

Hvilken browser bruger du. I IE og Firefox får jeg ikke ramme.

Har jeg misforstået dig?
Avatar billede Bdev Nybegynder
22. marts 2011 - 17:00 #6
Jeg kiggede lige igen. Hvis det er den hvide margin rundt om selve siden, så skal du tilføje følgende til CSS siden

body {
margin: 0px;
}

Derudover skal du rette samme CSS side:

#wrapper{
    height:900px;
    width:960px;
    background-color:#000;
    color:#C93;

skal rettes til fx

#wrapper{
    height:100%;
    width:100%;
    background-color:#000;
    color:#C93;

Hvis du har nogen spørgsmål kan du kontakte mig via http://www.nolas.dk
Avatar billede PiaOtium Nybegynder
23. marts 2011 - 09:32 #7
Hej
Jeg rettet som du har foreslået. Men det hjælper ikke. Hvis du har menuen uden baggrundsfarve kan man ikke se den hvide kant. Men jeg vil gerne have sort baggrund og så kommer kanten rund om menuen.
Vh Pia
Avatar billede pstidsen Novice
25. oktober 2011 - 19:10 #8
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Alle kurser indenfor Microsoft 365 – både til begyndere og øvede.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester