Gå til innhold

Midtstilling og float

svamp

Anbefalte innlegg

svamp

svamp

Skrevet
Skrevet

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:

Videoannonse

Videoannonse
Annonse
svamp

svamp

Skrevet
  • Forfatter
Skrevet (endret)

Aha, at jeg ikke tenkte på den :D

Ok, da var mellomrommet fiksa

 

 

Edit:

 

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

Endret av svamp
B4stian

B4stian

Skrevet
Skrevet
Aha, at jeg ikke tenkte på den :D

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;

svamp

svamp

Skrevet
  • Forfatter
Skrevet

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?

svamp

svamp

Skrevet
  • Forfatter
Skrevet
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

svamp

Skrevet
  • Forfatter
Skrevet
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

Haraldson

Skrevet
Skrevet
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

PoleCat

Skrevet
Skrevet

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

svamp

Skrevet
  • Forfatter
Skrevet

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

svamp

Skrevet
  • Forfatter
Skrevet
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å?

Roberto

Roberto

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

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

Endret av PiRANhA
svamp

svamp

Skrevet
  • Forfatter
Skrevet

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

Duke Soforth

Skrevet
Skrevet (endret)

*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 av mortenj

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...