Avatar billede websitebasen Nybegynder
03. november 2008 - 14:41 Der er 8 kommentarer og
2 løsninger

Fuld størrelse af tab

Hej Eksperter,

Er i gang med at sætte et design op, og skal lave menuen. Men støder på et problem baggrundsbilledet i tab'en er kun så stor som teksten er, og den skal være dens ejen størrelse. Svært at beskrive så du kan se det live her: http://www.gigavind.dk/test/ .

og her er noget kode.

index.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>Untitled Document</title>
<link href='style.css' type='text/css' rel='stylesheet' />
</head>
<body><center>
        <!-- Logoet -->
    <div id='logo'><img src='logo.png' alt='0' border='0' /></div>
   
        <!-- Containeren -->
    <div id='container'>
   
        <!-- Menuen -->
    <div class='links'>
    <img src='images/nav.jpg' alt='0' />
    <a class="a" href="#">Forside</a>
    </div>
   
    </div>
</center></body>
</html>

Style.css:
body {
background-color: #00586b;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center;
width: 897px;
height: 537px;
margin: 0;
padding: 0;
}

.links {
width: 183px;
height: 410px;
}

#container {
width: 897px;
}

#logo {
width: 400px;
height: 80px;
}

.a {
background-image: url(images/menu.jpg);
background-repeat: no-repeat;
width: 183px;
height: 24px;
font-family: tahoma;
font-size: 11px;
color: #000000;
text-decoration: none;
margin-top: 3px;
}   

Håber i kan hjælpe mig :P
Avatar billede w13 Novice
03. november 2008 - 15:53 #1
Du kan ikke sætte width og height på et inline-element, såsom a-tag'et. Det skal være et block-level-element. Det kan du gøre det til ved at smide display:block; på, men så vil hvert a-tag stå på en ny linje. Så kan du prøve at smide float:left; på også, og se om det ikke hjælper. =)
Avatar billede websitebasen Nybegynder
03. november 2008 - 17:32 #2
Forstår dig ikke helt præcis. Vil du prøve at illustere det med lidt kode :D
Avatar billede w13 Novice
03. november 2008 - 17:33 #3
Ret:

.a {
background-image: url(images/menu.jpg);
background-repeat: no-repeat;
width: 183px;
height: 24px;
font-family: tahoma;
font-size: 11px;
color: #000000;
text-decoration: none;
margin-top: 3px;
}   

til:

.a {
display:block;
float:left;
background-image: url(images/menu.jpg);
background-repeat: no-repeat;
width: 183px;
height: 24px;
font-family: tahoma;
font-size: 11px;
color: #000000;
text-decoration: none;
margin-top: 3px;
}
Avatar billede websitebasen Nybegynder
03. november 2008 - 20:07 #4
Har gjordt det og det virker ;P men jeg kan ikke lave padding-top så teksten bliver rykket lidt ned, har du en løsning til en måde jeg kan ordne det på ?
Avatar billede ssv Nybegynder
03. november 2008 - 20:16 #5
Jeg bruger en teknik - jeg skal ærligt indrømme at jeg ikke ved hvor browserkompatibel den er :-) - med at sætte line-height til boksens størrelse. I det her tilfælde kan du så bruge:

.a {
display:block;
float:left;
background: url(images/menu.jpg) no-repeat;
width: 183px;
height: 24px;
font: 11px/24px Tahoma, sans-serif;
color: #000;
text-decoration: none;
margin-top: 3px;
}
Avatar billede ssv Nybegynder
03. november 2008 - 20:17 #6
Vælger du padding skal du modregne det i boksens samlet størrelse - således:

.a {
display:block;
float:left;
background: url(images/menu.jpg) no-repeat;
width: 183px;
height: 20px; /* Padding-top modregnet: 24-4 = 20 */
font: 11px Tahoma, sans-serif;
color: #000;
text-decoration: none;
margin-top: 3px;
padding: 4px 0 0 0;
}
Avatar billede websitebasen Nybegynder
05. november 2008 - 17:09 #7
Mange tak ssv, og w13 lig begge et svar, så deler i point.
Avatar billede w13 Novice
05. november 2008 - 17:26 #8
:)
Avatar billede ssv Nybegynder
06. november 2008 - 11:41 #9
Velbekomme :-)
Avatar billede w13 Novice
06. november 2008 - 16:47 #10
Tak for points! :)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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