Problemer med divs (Problem løst.)

travis_g · 12. mai 2004

1. Har et par spørsmål. Hvordan får man en div midtstilt. Og..

Er det mulig å plassere en div til høyre og venstre i forrhold til den midtre?

Slik at alle 3 er midtsillt på en måte.

Jeg fant en fin side i går der det var satt opp eksempler, med kder og det hele, men klarer ikke å finne den i dag. Er det noen som har link til den?

2. Hvordan får jeg align=center i en div?

Endret 31. mai 2004 av travis_g

Loomy · 12. mai 2004

Du må plassere de tre div'ene i en container-div som du gir følgende egenskap:

margin: X auto Y auto; /* X = margin-top, Y = margin-bottom */

Sjekk eksempel på Prosjekt PureCSS i signaturen min.

Endret 12. mai 2004 av Loomy

Haraldson · 12. mai 2004

Det du må gjøre er å legge tre div's inne i en stor som går rundt alle tre. På denne div'en rundt skal marginen settes til margin:0px auto 0px auto f.eks...

Da vil det være 0px margin over og under, og auto til høyre og venstre, som betyr at den blir like langt fra kantene i browseren på hver side.

Videre må du gi div'ene inni attributter som float:left og float:right

EDIT: var litt sein der...

Endret 12. mai 2004 av Mr.Berg

travis_g · 12. mai 2004

Du må plassere de tre div'ene i en container-div som du gir følgende egenskap:
margin: X auto Y auto; /* X = margin-top, Y = margin-bottom */
Sjekk eksempel på Prosjekt PureCSS i signaturen min.

Vist man ikke har browseren i full størrelse når man ser på siden din, vil divene skli inn i hverandre. :no:

Jeg viol gjerne ha FAST størrelse på divene, slik at de blir stående likt uansett.

Haraldson · 12. mai 2004

Om du setter width:500px; Så vil div'en være 500px WHAT SO EVER. Husk å bruke pixler, ikke prosent.

EDIT: Position: relative + float?

Endret 12. mai 2004 av Mr.Berg

Zethyr · 12. mai 2004

Hicksdesign: Vertically centering a div

for horizontalt:

/* body can be replaced with the parent of the object you want to center */

body {

text-align: center; /* IE5.x/Win fix */

}

#center {

text-align: left; /* reset text aligning */

margin: 0 auto; /* the correct way */

}

/* you can modify the top and bottom margins, just leave left and right to auto */

travis_g · 25. mai 2004

Nå har jeg fått mine 3 diver inn i containeren og plassert dem høyre, venstre og midt.Det som er problemet nå, er at divene kommer etterhverandre i høyder. Slik:

[Div 1]

--------------[Div 2]

-----------------------------[Div 3]

Men jeg vil ha dem slik:

[Div 1]------[Div 2]-------[Div 3]

Hvordan får jeg til det?

CSS

#container {
margin: 0 auto;
width: 750px;
height: 500px;
border: 1px solid #000;
}

#container #tekst {
background: #cfc;
margin: 0 auto;
width: 200px;
border: 1px solid #000;
}

#container #meny {
width: 150px;
border: 1px solid #000;
}

#container #linker {
width: 150px;
float: right;
border: 1px solid #000;
}

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>Chicagos</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>

<body>

<center>
<!--- logo start --->
<img class=ramme src="images/logo.gif" width="489" height="71" align="middle"><br>
<!--- logo slutt --->
</center>

<div id="container">

       <!--- meny --->
       <div id="meny">

       <p>Her kommer menyen</p>

       </div>

       <!--- tekst --->
       <div id="tekst">

       <p>Her Kommer Teksten</p>

       </div>

       <!--- linker --->
       <div id="linker">

       <p>Linker</p>

       </div>

</div>

</body>
</html>

Endret 25. mai 2004 av travis_g

Mira · 25. mai 2004

Kunne vi fått html-koden også?

travis_g · 25. mai 2004

Den er nå lagt inn i min forrige post.

Haraldson · 25. mai 2004

Sett display: inline på en div som du legger rundt de tre.

Videre setter du display:block på de tre div'ene.

Sikkert ikke nødvendig med den diven, men det er alltid kjekt å ha en container.

Endret 25. mai 2004 av Mr.Berg

travis_g · 25. mai 2004

Bruker containeren slik at rutene er midstilt uansett hvor stort vinduet er, slik at ikke divene sklir inn i hverandre ol. Men det finnes sikkert en annen måte å gjøre det på. Og den vil jeg gjerne lære :dribble:

travis_g · 26. mai 2004

Det fungerte ikke med

display - kommandoen.

Noen flere forslag?

travis_g · 26. mai 2004

Det fungerte ikke med

display - kommandoen.

Noen flere forslag?

Edit: et eller annet som gikk galt, så den lagret seg 2 ganger

Endret 26. mai 2004 av travis_g

Haraldson · 26. mai 2004

Har du satt float: left og float: right på div'ene?

Zethyr · 26. mai 2004

... og clear:none; ??

travis_g · 27. mai 2004

Fungerte desverre ikke det heller. Har lagt ut siden:

HER

Så dere kan se om dere finner noe feil.

(Begynner å bli frustert nå)

EDIT: Som dere ser, aå er det nå bare den siste diven som ikke vil på plass.

Endret 27. mai 2004 av travis_g

nAD · 27. mai 2004

sleng inn float: left på menyen og legg inn noen margins, det blir ikke pent når borderene ligger tett på hverandre..

travis_g · 27. mai 2004

sleng inn float: left på menyen og legg inn noen margins, det blir ikke pent når borderene ligger tett på hverandre..

Glem rammene. De har jeg bare lagt på for at dere skal se hvordan de ligger. :yes:

De fjernes når codeproblemet er løst. Det gjør oxo scrollbaren. Bare så det er sagt.

Trenger bare hjelp til å plassere de divene riktig nå. Ikke noe annet.

TAKK! :green:

travis_g · 27. mai 2004

Jeg har prøvd litt forskjellig, og kommet fram til at alt går bra helt til jeg setter inn den midterste diven. (Der HTML koden ligger (id=tekst))

Den blir liggende riktig i forrhold til menyen (CSS koden (id=meny))

Men Den siste (Id=linker) Starter under disse. Som dere ser på siden.

travis_g · 27. mai 2004

Nå tror jeg jeg fant litt av problemet. Det fungerte vist jeg satt

DIV id=tekst : float: left/right. Da kom de opp pent på rekke.

Er det noe som som kan fungere som; float: center?

Endret 28. mai 2004 av travis_g

Problemer med divs (Problem løst.)

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