Midtstilling og float

svamp · 30. mai 2004

Hei

Jeg har en meny-div med linker. På hver link har jeg brukt CSS-rollover-metoden med 2 bilder pr link som ligger på f.eks. absentvoid.

Siden min er 700px bred, og hver link er 81px bred. Jeg har bare 5 linker, og derfor fyller ikke linkene hele bredden på 700 px.

Jeg har brukt float:left for at linkene skal legge seg etter hverandre. (men det er kanskje ikke nødvendig?)

Hvordan kan jeg øke avstanden mellom hver link, og i tillegg midtstille hele rekken av linker? :hmm:

Cucum(r) · 30. mai 2004

Keyword: margin

Haraldson · 30. mai 2004

Bruk margin-right: XXpx; på hvert menyelement, samtidig som du midstiller meny-div'en med margin: 0 auto 0 auto;

svamp · 30. mai 2004

Aha, at jeg ikke tenkte på den

Ok, da var mellomrommet fiksa

Edit:

.....men den margin : 0 auto 0 auto var det ikke mye tak i... Skjedde ingenting.

Endret 30. mai 2004 av svamp

B4stian · 30. mai 2004

Aha, at jeg ikke tenkte på den
Ok, da var mellomrommet fiksa

Edit:

.....men den margin : 0 auto 0 auto var det ikke mye tak i... Skjedde ingenting.

prøv med:

margin: 0 auto;

Cucum(r) · 30. mai 2004

heller margin: 0px auto;

svamp · 30. mai 2004

Ingen av dem virket

Her er relevante deler av css'en:

html, body {
margin: 0;
padding: 0;
}

#meny {
padding : 2px;
height : 30px;
width : 700px;
margin: 0 auto;
 position : relative;
margin : 0px auto; /* den her gir ikke "utslag" */
}

#menyelement {
background : url(index.jpg);
width : 81px;
height : 21px;
float : left;
padding : 0px;
margin-right : 5px;
}

Kan noe av dette være "feil" i forhold til midtstillingen?

Haraldson · 30. mai 2004

Prøv 0px auto 0px auto, da...

Og; background-image: url(index.jpg);

Roberto · 30. mai 2004

Prøv 0px auto 0px auto, da...

Hva med dette da?

margin-left: auto;
margin-right: auto;

For å sentrere, vel og merke.

svamp · 30. mai 2004

Prøv 0px auto 0px auto, da...

Og; background-image: url(index.jpg);

Det gikk heller ikke. Ingen reaksjon, bortsett fra at når jeg la til image på

#header (headeren), forsvant den i IE.

svamp · 30. mai 2004

Hva med dette da?
margin-left: auto;
margin-right: auto;
For å sentrere, vel og merke.

Ingen reaksjon der heller, dessverre.

Jeg blir vel nødt til å finne på noen flere knapper og øke mellomrommet da

Haraldson · 30. mai 2004

Ingen reaksjon, bortsett fra at når jeg la til image på
#header (headeren), forsvant den i IE.

:dontgetit:

Nå skjønner jeg heller lite...

Har du prøvd uten alle disse mellomromene mellom selektor og verdi?

PoleCat · 30. mai 2004

Midtstilling:

Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

samt:

margin: 0 auto;

Skal funke!

svamp · 30. mai 2004

Det er jo bare ett mellomrom på hver side av kolon..

Og margin : 0 auto; fungerer jo siden alle div'ene blir midtstilt på siden.

svamp · 30. mai 2004

Midtstilling:

Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

samt:

margin: 0 auto;

Skal funke!

Jeg har doctype transitional nå. Er det forskjell i visningen om jeg bruker strict altså?

PoleCat · 30. mai 2004

Jeg har doctype transitional nå. Er det forskjell i visningen om jeg bruker strict altså?

Skulle mene det ja. Bare å prøve det. :thumbup:

Roberto · 30. mai 2004

Jeg har doctype transitional nå. Er det forskjell i visningen om jeg bruker strict altså?

Ja, transitional har mer "fri" tøyler.

Endret 30. mai 2004 av PiRANhA

svamp · 30. mai 2004

Ingen reaksjon med strict heller.

Nå slenger jeg ut all koden så det blir litt sammenheng her.

CSS

body {
background : #075E8B;
font-family : Trebuchet MS, tahoma, verdana, arial, sans-serif;
font-size : 10pt;
color : #FFFFFF;
}

html, body {
margin: 0;
padding: 0;
}

a {
text-decoration : underline;
color : #FFFFFF;
}

a:hover {
text-decoration : underline;
color : #000000;
}

#header {
background : url(grafikk/header.jpg) no-repeat;
width : 700px;
height : 170px;
margin: 0 auto;
 position : relative;
}

#meny {
padding : 2px;
height : 30px;
width : 700px;
margin: 0 auto;
 position : relative;
}

#innhold {
padding : 0px;
width : 700px;
margin: 0 auto;
 position : relative;
}

#menyelement1 {
background : url(grafikk/k_index.jpg);
width : 81px;
height : 21px;
float : left;
padding : 0px;
margin-right : 5px;
display : block;
}

#menyfjell:hover {
background : url(grafikk/k_index_h.jpg);
}

(Har tatt vekk alle de andre link-IDene, for de er jo like som den første.

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="Content-Language" CONTENT="no">
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>

<BODY>
<DIV id="header">
<br>
</DIV>
<DIV id="meny">
 <A id="menyelement1" href="#"></A>
 <A id="menyelement2" href="#"></A>
 <A id="menyelement3" href="#"></A>
 <A id="menyelement4" href="#"></A>
 <A id="menyelement5" href="#"></A>	
</DIV>
<DIV id="innhold">
</DIV>
<DIV id="footer">
</DIV>
</BODY>

</HTML>

Sånn. Klarnet dette opp på noen måte?

Duke Soforth · 30. mai 2004

*brrrrr* store bokstaver...

Lag menyen med en liste slik:

<div id="meny">
 <ul>
   <li><a id="menyelement1" href="#"></a></li>
    .....
 </ul>
</div>

Følgende CSS:

#meny ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 width: 100%;
 text-align: center;
}
#meny li {
 display: inline;
}
#meny li a {
 padding: 0 1em;
}
#menyelement1 {
 background: url(grafikk/k_index.jpg);
 width: 81px;
 height: 21px;
 padding: 0px;
 margin: 5px;
}

Ta med andre ord bort float: left og display: block fra menyelement. Skulle være et ok utgangspunkt!

Endret 30. mai 2004 av mortenj

haugsand · 30. mai 2004

margin: 0; er foretrukket foran margin: 0px; siden 0 uansett er 0, og er dessuten mindre å skrive for oss late

Midtstilling og float

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer