Avatar billede Slettet bruger
02. oktober 2006 - 20:46 Der er 3 kommentarer og
2 løsninger

Horisontale elementer

Hej,

<div id='resultset'>
  <span id='item1'>Skal stå til venstre</span>
  <span id='item2'>Skal stå i midten</span>
  <span id='item3'>Skal stå til højre</span>
</div>

Dette er HTML til en navigations ting, der ligger i bunden af min side. Item 1 skal stå til venstre på siden (eller containeren), item 2 skal stå på midten af siden, og item 3 til højre på siden.

Hvordan vil I skrive CSS til dette så det virker i både Firefox, IE og Opera?

Følgende virker med ikke i Opera, hvor item 2 står oven i item 1. Endvidere er afstanden mellem item 1 og item 2 og mellem item 2 og item 3 ikke helt ens i hverken Firefox eller IE.

#resultset {
    width: 880px;
    text-align: center;
}

#item1 {
    float: left;
}

#item2 {
    position: absolute;
}

#item3 {
    float: right;
}

#resultset:after { /* firefox to clear after the resultset - else it goes into footer */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
Avatar billede Slettet bruger
02. oktober 2006 - 21:02 #1
Dette virker i alle 3 browsere, men er ikke alt for kønt:

#resultset {
    width: 880px;
    text-align: center;
}

#item1 {
    width: 293px;
    float: left;
    text-align: left;
}

#item2 {
    width: 293px;
    float: left;
}

#item3 {
    float: right;
    text-align: right;
}

#resultset:after { /* firefox to clear after the resultset - else it goes into footer */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
Avatar billede notes2c Nybegynder
03. oktober 2006 - 08:37 #2
Hvis man antager du også kender bredden på item3. Vil du kunne centrere item2 ved at justere margin

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

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}
#resultset {
    width: 880px;
    text-align: center;
}

#item1 {
    width: 293px;
    float: left;
    text-align: left;
    background: lightblue;
}

#item2 {
    width: 293px;
    float: left;
    background: silver;
    margin-left: 97px;
}

#item3 {
    float: right;
    text-align: right;
    background: lightgreen;
    width: 100px;
}

#resultset:after { /* firefox to clear after the resultset - else it goes into footer */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
-->
</style>
<script type="text/javascript">
</script>
</head>

<body>

<div id='resultset'>
  <span id='item1'>Skal stå til venstre</span>
  <span id='item2'>Skal stå i midten</span>
  <span id='item3'>Skal stå til højre</span>
</div>

</body>
</html>
Avatar billede sklagenberg Nybegynder
03. oktober 2006 - 17:00 #3
Prøv dette:


CSS:

#resultset {
    width: 880px;
    clear : both;
}

#resultset div {
    width: 66%;
    float : left;
}

#item1 {
    float : left;
    width : 50%;
}

#item2 {
    clear : right; /* Fix IE float */
    float : right;
    width : 50%;
}

#item3 {
    clear : right; /* Fix IE float */
    width : 34%;
    float : right;




HTML markup:

<div id="resultset">

  <div>
    <span id='item1'>Skal stå til venstre</span>
    <span id='item2'>Skal stå i midten</span> 
  </div>

  <span id='item3'>Skal stå til højre</span>

</div>

testet i IE6, FF og O9.
Avatar billede sklagenberg Nybegynder
03. oktober 2006 - 17:02 #4
Ignorer "clear : both" i "#resultset"
Avatar billede notes2c Nybegynder
03. oktober 2006 - 23:45 #5
sklagenberg >> Du kan ikke bruge span for det er et inline element og kan efter definitionen ikke have en "width". Og du "clear:both" skal du måske bruge... Eksemplet er jo taget ud af en context som er ukendt... Men jeg ville nok flytte den inder under #resultset. For her giver det mere mening hvis der findes float elementer før #resultset...
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