CSS - feil, width vil ikke lystre ?

Wackamole · 16. september 2008

Hei

Har denne biten med css kode:

#menu {
background-image: url('images/button_placeholder.png');
height: 41px;
padding: 14px;
margin: -2px;
background-repeat: repeat-x;
width: 812px;
}

Men width: 812px; vil ikke lystre, den totale bredden på siden er 900px, og menyen som jeg har er delt opp slik:

  <div align="center" id="menu">
<a href="#" id="menu_button">Hjem</a>
<a href="#" id="menu_button">Nyheter</a>
<a href="#" id="menu_button">Produkter</a>
<a href="#" id="menu_button">Tjenester</a>
<a href="#" id="menu_button">Priser</a>
<a href="#" id="menu_button">Webshop</a>
<a href="#" id="menu_button">Om siden</a>
<a href="#" id="menu_button">Kontakt meg</a>
</div>

Btw: jeg vet jeg skal bruke class="menu_button" og ikke id, skal fikse det senere

Men siden ser slik ut!:

Er det noen som kan fortelle meg hva jeg har gjort feil?

Hilsen

-Fredrik aka Famen

Cii · 16. september 2008

Hei.

Har slitt mye med dette selv og jeg er ikke spesielt god. Men en ting som kan løse dette er å besteme at selv <ul></ul> skal være 812px ved å si i css fila

#menu ul {

width: 812px;

}

Håper dette skal fungere. Har mye problemer med list og størelse begrensning. Tror dette har noe med at lista blir uansett større en hva høyde og vide er definert. Må da eventuelt minke fonten. til lista.

Endret 16. september 2008 av Cii

Dieter · 16. september 2008

width: 812px;

+

padding: 14px;

Vil gi en bredde på 840px (812px + 14 px padding på hver side)

Cii · 16. september 2008

width: 812px;

+

padding: 14px;

Vil gi en bredde på 840px (812px + 14 px padding på hver side)

Er det fordi widit i CSS gjelder for selve elementet og ikke paddingen og marginen til et element?

Dieter · 16. september 2008

Paddingen er inne i en boks mens margin er utenfor boksen. det vil si at padding vil utvide boksen mens margin ikke vil påvirke boksens bredde

Cii · 16. september 2008

Paddingen er inne i en boks mens margin er utenfor boksen. det vil si at padding vil utvide boksen mens margin ikke vil påvirke boksens bredde

Ok takk. Sorry for lit kapring av tråden, men tror han svarte på trådstarter sitt problem også

Så også at du hadde div id/class="menu button". Den treger du ikke hvis jeg skjønner dette riktig i stede kan du bruke i CSS fila da.

#menu a {
  bacground: url
  osv
}

Endret 16. september 2008 av Cii

Wackamole · 16. september 2008

Føler meg veldig dom nå :/

Dette er koden jeg har nå, utifra det du sa, så skulle margin holde seg inni elementet, og padding legger på utenpå elementet?

#menu {
background-image: url('images/button_placeholder.png');
height: 41px;
margin: 14px;
background-repeat: repeat-x;
width: 812px;
}

Fikk et annet resultat, men ble ikke riktig fordeom :/

Cii · 16. september 2008

Kunne du lagt ut css fila de og index filen din. Så kan det være litt lettere for oss å se hva som er feil. Kan hende det er noe annet som fører til problemet.

Dieter · 16. september 2008

det var en merkelig måte å lage en meny på forresten. Ta en titt her så går det nok bedre

http://css.maxdesign.com.au/listamatic/

Wackamole · 16. september 2008

CSS fila: style.css

Klikk for å se/fjerne innholdet nedenfor

* {margin: 0; padding: 0; list-style-type: none; border: none; } /* Nullstiller nettleserforskjeller */

* .hidden { display: none; }

/* Styles */
/* Footer Style */
.style1 {
font-family: Arial, Helvetica, sans-serif;
color: #919799;
font-size: 14px;
}
#margin-left {
padding-left: 85px;
float: left;
}
img#host {
float: absolute;
}
/*Headers, menus etc.*/
h1 {
background: url(images/header.png) no-repeat top left;
width: 812px;
height: 93px; 
}

body, html {
background-color: #FFF;
}

div#wrapper {
margin: 0 auto;
width: 812px;
}
div#innhold {
float: left;
width: 812px;
height: auto;
background: url(images/wrapper_bg.png);
}
img#logo {
padding-left: 28px;
padding-top: 30px;
}

div#footer {
float: left;
width: 812px;
height: 52px;
background: url(images/footer.png);
}
div#news1 {
padding-left: 30px;
width: 199px;
}
p#contenttxt {
padding-left: 55px;
width: 470px;
color: #efe3be;
}
img#stock {
height: 250px;
padding-left: 5px;
padding-right: 5px;
}
div#footertxt {
font-size: 12px;
padding: 14px;
color: #c7b299;
font-family: arial;
text-decoration: none;
}
div#footertxt a {
color: #c7b299;
font-family: arial;
text-decoration: underline;
}
h2#headline {
color: #efe3be;
text-decoration: underline;
padding-left: 55px;
margin-bottom: 20px;
}
div#footertxt a:hover {
color: #c7b299;
text-decoration: none;
}
#menu {
background-image: url('images/button_placeholder.png');
height: 41px;
margin: 14px;
background-repeat: repeat-x;
width: 812px;
}
#menu_button{
background-image: url('images/button.png');
height: 41px;
background-repeat: repeat-x;
color: #362f2d;
text-decoration: none;
padding: 15px;
margin: -2px;
font-family: "arial";
}
#menu_button:hover {
background-image: url('images/button_hover.png');
height: 41px;
background-repeat: repeat-x;
color: #362f2d;
text-decoration: underline;
padding: 15px;
margin: -2px;
font-family: "arial";
}

Index fila: index.html

Klikk for å se/fjerne innholdet nedenfor

<!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=ISO-8859-15" />
<title>FredrikMoe.com</title>
<meta name="description" content="Personal scripting page"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css"></style>
<!--
Fredrik Angell Moe - Opprettet Sommeren '08
fredrik[at]fredrikmoe[dott]com
-->
</head>

<body>

<div id="wrapper"> <!-- Starting of content wrapper-->

<h1><span class="hidden"></span></h1>
<div id="innhold">
<div></div>
 <div align="center" id="menu">
<a href="#" id="menu_button">Hjem</a>
<a href="#" id="menu_button">Nyheter</a>
<a href="#" id="menu_button">Produkter</a>
<a href="#" id="menu_button">Tjenester</a>
<a href="#" id="menu_button">Priser</a>
<a href="#" id="menu_button">Webshop</a>
<a href="#" id="menu_button">Om siden</a>
<a href="#" id="menu_button">Kontakt meg</a>
</div>
	<br>
 <h2 id="headline">Velkommen til LilleGard.no!</h2>
<p id="contenttxt">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?</p>
<br>
<p id="contenttxt">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<br><br>
</div>
<div id="footer">
 <div id="footertxt">
<p align="center">Design og kode av <a href="http://www.fredrikmoe.com">Fredrik Moe</a> - Copyright © 2008 - <a href="http://www.lillegard.no/">LilleGard.no</a></p>
 </div>
</div>

</div> <!--Ending content wrapper -->
</body>
</html>

Cii · 16. september 2008

Skal ta en titt på det når jeg får tid, men nå er det trening:D

Men Dieter sier. Bedre å lage menyen din i en liste, lettere å håndtere.

Wackamole · 16. september 2008

Okei, takker så mye for hjelpen, men jeg fikk det til ved og se på eksemplene på den linken som Dieter hadde

CSS

Klikk for å se/fjerne innholdet nedenfor

#navcontainer {
margin: 0 auto;
width: 758px; 
background-image: url("images/button_placeholder.png");
height: 41px;
}
#navcontainer a
{
list-style-type: none;
padding: 14px;
margin: 0;
display: block;
float: left;
background: url("images/button.png") repeat-x;
font-family: arial;
text-align: center;
height: 41px;
color: #362f2d;
text-decoration: none;
}
#navcontainer a:hover 
{ 
list-style-type: none;
padding: 14px;
margin: 0;
display: block;
float: left;
background: url("images/button_hover.png") repeat-x;
font-family: arial;
text-align: center;
height: 41px;
color: #362f2d;
text-decoration: underline;
}

Cii · 16. september 2008

Toppers!

Logg inn

CSS - feil, width vil ikke lystre ?

Anbefalte innlegg

Wackamole

Lenke til kommentar

Videoannonse

Cii

Lenke til kommentar

Dieter

Lenke til kommentar

Cii

Lenke til kommentar

Dieter

Lenke til kommentar

Cii

Lenke til kommentar

Wackamole

Lenke til kommentar

Cii

Lenke til kommentar

Dieter

Lenke til kommentar

Wackamole

Lenke til kommentar

Cii

Lenke til kommentar

Wackamole

Lenke til kommentar

Cii

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer