Sentrere mange "divs"..

Met_Fredrik · 1. august 2006

Har satt opp et design bestående av 14 bilder i hver sin div. Men får ikke sentrert. Har prøvd mange guider osv, men klarer ikke å sentrere det :hmm:

Er nok noe jeg ikke forstår.

Mulig jeg er rimelig dum

Er det fordi jeg har posisjonert de med position: absolute;?

Uansett, her er koden:

 <HTML>
<HEAD>
<TITLE>00122</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">
<!--

#design-01 {
position:absolute;
left:0px;
top:0px;
width:530px;
height:18px;
}

#design-02 {
position:absolute;
left:0px;
top:18px;
width:24px;
height:396px;
}

#design-03 {
position:absolute;
left:24px;
top:18px;
width:152px;
height:123px;
}

#design-04 {
position:absolute;
left:176px;
top:18px;
width:332px;
height:123px;
}

#design-05 {
position:absolute;
left:508px;
top:18px;
width:22px;
height:396px;
}

#design-06 {
position:absolute;
left:24px;
top:141px;
width:137px;
height:70px;
}

#design-07 {
position:absolute;
left:161px;
top:141px;
width:1px;
height:273px;
}

#design-08 {
position:absolute;
left:162px;
top:141px;
width:14px;
height:273px;
}

#design-09 {
position:absolute;
left:176px;
top:141px;
width:332px;
height:94px;
}

#design-10 {
position:absolute;
left:24px;
top:211px;
width:12px;
height:203px;
}

#design-11 {
position:absolute;
left:36px;
top:211px;
width:125px;
height:35px;
}

#design-12 {
position:absolute;
left:176px;
top:235px;
width:332px;
height:179px;
}

#design-13 {
position:absolute;
left:36px;
top:246px;
width:125px;
height:35px;
}

#design-14 {
position:absolute;
left:36px;
top:281px;
width:125px;
height:35px;
}

#design-15 {
position:absolute;
left:36px;
top:316px;
width:125px;
height:35px;
}

#design-16 {
position:absolute;
left:36px;
top:351px;
width:125px;
height:35px;
}

#design-17 {
position:absolute;
left:36px;
top:386px;
width:125px;
height:28px;
}

#design-18 {
position:absolute;
left:0px;
top:414px;
width:530px;
height:108px;
}

#design-19 {
position:absolute;
left:0px;
top:522px;
width:530px;
height:108px;
}

-->
</STYLE>
</HEAD>
<BODY STYLE="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<DIV ID="design-01">
<IMG SRC="images/design_01.gif" WIDTH=530 HEIGHT=18 ALT="">
</DIV>
<DIV ID="design-02">
<IMG SRC="images/design_02.gif" WIDTH=24 HEIGHT=396 ALT="">
</DIV>
<DIV ID="design-03">
<IMG SRC="images/design_03.jpg" WIDTH=152 HEIGHT=123 ALT="">
</DIV>
<DIV ID="design-04">
<IMG SRC="images/design_04.jpg" WIDTH=332 HEIGHT=123 ALT="">
</DIV>
<DIV ID="design-05">
<IMG SRC="images/design_05.gif" WIDTH=22 HEIGHT=396 ALT="">
</DIV>
<DIV ID="design-06">
<IMG SRC="images/design_06.jpg" WIDTH=137 HEIGHT=70 ALT="">
</DIV>
<DIV ID="design-07">
<IMG SRC="images/design_07.jpg" WIDTH=1 HEIGHT=273 ALT="">
</DIV>
<DIV ID="design-08">
<IMG SRC="images/design_08.jpg" WIDTH=14 HEIGHT=273 ALT="">
</DIV>
<DIV ID="design-09">
<IMG SRC="images/design_09.jpg" WIDTH=332 HEIGHT=94 ALT="">
</DIV>
<DIV ID="design-10">
<IMG SRC="images/design_10.jpg" WIDTH=12 HEIGHT=203 ALT="">
</DIV>
<DIV ID="design-11">
<IMG SRC="images/design_11.jpg" WIDTH=125 HEIGHT=35 ALT="">
</DIV>
<DIV ID="design-12">
<IMG SRC="images/design_12.jpg" WIDTH=332 HEIGHT=179 ALT="">
</DIV>
<DIV ID="design-13">
<IMG SRC="images/design_13.jpg" WIDTH=125 HEIGHT=35 ALT="">
</DIV>
<DIV ID="design-14">
<IMG SRC="images/design_14.jpg" WIDTH=125 HEIGHT=35 ALT="">
</DIV>
<DIV ID="design-15">
<IMG SRC="images/design_15.jpg" WIDTH=125 HEIGHT=35 ALT="">
</DIV>
<DIV ID="design-16">
<IMG SRC="images/design_16.jpg" WIDTH=125 HEIGHT=35 ALT="">
</DIV>
<DIV ID="design-17">
<IMG SRC="images/design_17.jpg" WIDTH=125 HEIGHT=28 ALT="">
</DIV>
<DIV ID="design-18">
<IMG SRC="images/design_18.gif" WIDTH=530 HEIGHT=108 ALT="">
</DIV>
<DIV ID="design-19">
<IMG SRC="images/design_19.gif" WIDTH=530 HEIGHT=108 ALT="">
</DIV>
</BODY>
</HTML>

Takk på forhånd!

Endret 1. august 2006 av Met_Fredrik

Atch · 1. august 2006

Hvorfor har du så mye kode for ingenting? Last opp bildene i den størrelsen de skal være -du behøver i alle fall ikke å definere høyde og bredde både i stilarket og i html-dokumentet. Fjern alt du har i stilarket, legg sentrert tekst i body, og lag en div til bildene med margin 0px auto. Da skal de sentreres.

Avean · 1. august 2006

Legg til text-align:center; under en bodytag i stilarket ditt. Da skal divlayerne sentrere seg.

Met_Fredrik · 1. august 2006

Legg til text-align:center; under en bodytag i stilarket ditt. Da skal divlayerne sentrere seg.

6594694[/snapback]

body { 
text-align: center;
}

Utgjør ingen forskjell.

Hvorfor har du så mye kode for ingenting? Last opp bildene i den størrelsen de skal være -du behøver i alle fall ikke å definere høyde og bredde både i stilarket og i html-dokumentet. Fjern alt du har i stilarket, legg sentrert tekst i body, og lag en div til bildene med margin 0px auto. Da skal de sentreres.

6593737[/snapback]

Hva mener du med å fjerne alt i stilarket? Det er jo der bildene er posisjonert.. De er som et slags puslespill :tease: Så jeg må ha en div for hvert bilde og posisjonere som det er gjort i css. Eller tar jeg feil?

Men at jeg ikke behøver å skrive with og height i html'n er jeg enig i

Takk for svar så langt!

Endret 1. august 2006 av Met_Fredrik

Kannutt · 1. august 2006

Da tror jeg du trenger alle divene....

Men forsøk å legge en div rundt hele siden din - altså alle elementene - og gi denne en text-align; center; Da tror jeg det ordner seg....

Endret 1. august 2006 av Kannutt

Met_Fredrik · 1. august 2006

Da tror jeg du trenger alle divene....
Men forsøk å legge en div rundt hele siden din - altså alle elementene - og gi denne en text-align; center; Da tror jeg det ordner seg....

6595345[/snapback]

Nå laget jeg en div foran den første bilde div'en som jeg kalte container.

Så skrev jeg i css'n,

#container {
                text-align: center;
                }

Men ingen forskjell.

Er bildene på en måte låst? For når jeg ser på css'n nå, så er jo hvert enkelt "festet" på den måten her:

 left:512px;
top:18px;

Kannutt · 1. august 2006

Da tror jeg du trenger alle divene....
Men forsøk å legge en div rundt hele siden din - altså alle elementene - og gi denne en text-align; center; Da tror jeg det ordner seg....

6595345[/snapback]

Nå laget jeg en div foran den første bilde div'en som jeg kalte container.

Så skrev jeg i css'n,
#container {
                text-align: center;
                }
Men ingen forskjell.

Er bildene på en måte låst? For når jeg ser på css'n nå, så er jo hvert enkelt "festet" på den måten her:
 left:512px;
top:18px;
6595380[/snapback]

Men containeren ligger nå til venstre i nettleservinduet, med alle bilde-divene inni, ikke sant. Bildene har nå en absolutt posisjon inne i containeren (som du har angitt). Dersom du også vil sentrere containeren i nettleservinduet, må du skrive text-align: center; i body-tagen.

PS!

Regner med at du har avsluttet container diven med </div> etter siste bilde.....

Met_Fredrik · 1. august 2006

Har avsluttet container div'en ja.

Jeg har også i stilarket:

body { text-align: center; }

Men ingen ting er forandret :hmm:

Kannutt · 1. august 2006

Har avsluttet container div'en ja.
Jeg har også i stilarket:
body { text-align: center; }
Men ingen ting er forandret

6595560[/snapback]

Har du en link til siden?

Avean · 1. august 2006

Tok å kopiert koden din og får ikke midstillt det selv. Laget til og med en container hvor divsa dine skulle posisjonere seg relativt etter containeren men funka heller ikke. Det er noe som stopper divsa i å flytte på seg. Har fått de til å flytte enten helt til høyre eller helt til venstre hehe.

Det er garantert en bagatell men jeg ser den ikke. Irriterer meg MYE at jeg ikke får til å hjelpe deg. Er så mange divs at jeg har vanskeligheter for å se om det er noe som kræsjer.

Met_Fredrik · 1. august 2006

Tok å kopiert koden din og får ikke midstillt det selv. Laget til og med en container hvor divsa dine skulle posisjonere seg relativt etter containeren men funka heller ikke. Det er noe som stopper divsa i å flytte på seg. Har fått de til å flytte enten helt til høyre eller helt til venstre hehe.

Det er garantert en bagatell men jeg ser den ikke. Irriterer meg MYE at jeg ikke får til å hjelpe deg. Er så mange divs at jeg har vanskeligheter for å se om det er noe som kræsjer.

6595646[/snapback]

Men se, det eneste som jeg ser nå at det kan være er vel at hver enkelt div er satt opp i css'n som: left: 140px, top: 40px. etc.

For når de er midtstilt stemmer jo ikke de pixelsa lengre?

EDIT, legger ut en link litt senere Kannut, ligger kun på min pc atm, og jeg må ut en tur

Takker for alle svar så langt :w00t:

Endret 1. august 2006 av Met_Fredrik

Avean · 1. august 2006

Ok nå tror jeg vet feilen. Du har angitt posisjonen på alle divsa og de vil holde seg der uansett om resten av siden er midtstillt. Du må fjerne left,top osv og kun ha position,width og height. Mer trenger du ikke. Men med layouten din så skal jo ikke alle divsa være midtstillt i den forstand. Du har jo en meny blant annet som skal ligge litt til venstre. Så jeg villet startet på nytt og lagt til layerne igjen.

Det øverste layeret ditt legger du som position:relative; og resterende som position:absolute; som du har gjort. Det øverste layeret vil nå sentrere seg og det vil resten av layerne også gjøre. Men de sentrerer seg ETTER det øverste layeret hvis du skjønner. Sånn at du kan ha ett layer litt til venstre, ett layer midt på og ett til høyre.

Men start på nytt å gjør dette. Funker ikke hvis du cutter og limer inn alt igjen i ett layer som er relative.

Hvis du er fortsatt usikker så kunne jeg gjort det for deg. Det er litt vanskelig å sette opp divsa når jeg ikke ser bildene.

Endret 1. august 2006 av Avean

Kannutt · 1. august 2006

Her er kode som funker:

body { background-color:white; text-align: center; margin: 0; }
#container { background-color: blue; text-align: left; position: relative; margin: 0 auto; width: 800px; height: auto; border: solid 2px black; }

#design-01 {

position:absolute;

left:0px;

top:0px;

width:530px;

height:18px;

}

#design-02 {

position:absolute;

left:0px;

top:18px;

width:24px;

height:396px;

}

#design-03 {

position:absolute;

left:24px;

top:18px;

width:152px;

height:123px;

}

#design-04 {

position:absolute;

left:176px;

top:18px;

width:332px;

height:123px;

}

#design-05 {

position:absolute;

left:508px;

top:18px;

width:22px;

height:396px;

}

#design-06 {

position:absolute;

left:24px;

top:141px;

width:137px;

height:70px;

}

#design-07 {

position:absolute;

left:161px;

top:141px;

width:1px;

height:273px;

}

#design-08 {

position:absolute;

left:162px;

top:141px;

width:14px;

height:273px;

}

#design-09 {

position:absolute;

left:176px;

top:141px;

width:332px;

height:94px;

}

#design-10 {

position:absolute;

left:24px;

top:211px;

width:12px;

height:203px;

}

#design-11 {

position:absolute;

left:36px;

top:211px;

width:125px;

height:35px;

}

#design-12 {

position:absolute;

left:176px;

top:235px;

width:332px;

height:179px;

}

#design-13 {

position:absolute;

left:36px;

top:246px;

width:125px;

height:35px;

}

#design-14 {

position:absolute;

left:36px;

top:281px;

width:125px;

height:35px;

}

#design-15 {

position:absolute;

left:36px;

top:316px;

width:125px;

height:35px;

}

#design-16 {

position:absolute;

left:36px;

top:351px;

width:125px;

height:35px;

}

#design-17 {

position:absolute;

left:36px;

top:386px;

width:125px;

height:28px;

}

#design-18 {

position:absolute;

left:0px;

top:414px;

width:530px;

height:108px;

}

#design-19 {

position:absolute;

left:0px;

top:522px;

width:530px;

height:108px;

}

HTML

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=utf-8" />

<title>Test</title>

<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />

<style type="text/css">

</style>

</head>

<body>

<div id="container">

<div id="design-01">

<img src="images/design_01.gif">

</div>

<div id="design-02">

<img src="images/design_02.gif">

</div>

<div id="design-03">

<img src="images/design_03.jpg">

</div>

<div id="design-04">

<img src="images/design_04.jpg">

</div>

<div id="design-05">

<img src="images/design_05.gif">

</div>

<div id="design-06">

<img src="images/design_06.jpg">

</div>

<div id="design-07">

<img src="images/design_07.jpg">

</div>

<div id="design-08">

<img src="images/design_08.jpg">

</div>

<div id="design-09">

<img src="images/design_09.jpg">

</div>

<div id="design-10">

<img src="images/design_10.jpg" >

</div>

<div id="design-11">

<img src="images/design_11.jpg">

</div>

<div id="design-12">

<img src="images/design_12.jpg" >

</div>

<div id="design-13">

<img src="images/design_13.jpg">

</div>

<div id="design-14">

<img src="images/design_14.jpg">

</div>

<div id="design-15">

<img src="images/design_15.jpg">

</div>

<div id="design-16">

<img src="images/design_16.jpg" >

</div>

<div id="design-17">

<img src="images/design_17.jpg" >

</div>

<div id="design-18">

<img src="images/design_18.gif">

</div>

<div id="design-19">

<img src="images/design_19.gif">

</div>

</div>

</body>

Funker ihvertfall fin-fint her. Siden er midtstilt, og divene ligger i siden med de posisjonene som er oppgitt...

Quakeulf · 1. august 2006

Så mye unødvendig kode.

Sånn gjøres det så enkelt som mulig, med en kontainer <div>:

#div1, #div2, #div3, divosvosv
{
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
width: 760px;
}

Jeg registrerte meg kun for dette. :whistle:

Kannutt · 1. august 2006

Så mye unødvendig kode.

Sånn gjøres det så enkelt som mulig, med en kontainer <div>:
#div1, #div2, #div3, divosvosv
{
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
width: 760px;
}
Jeg registrerte meg kun for dette.

6599428[/snapback]

Blir det riktig da, når alle divene skal ha forskjellige absolutte posisjoner??

Met_Fredrik · 1. august 2006

Da skal du ihvertfall ha jækla god flaks

haugsand · 2. august 2006

Met_Fredrik: Er det mulig å få se et bilde av designet ditt?

Met_Fredrik · 2. august 2006

Met_Fredrik: Er det mulig å få se et bilde av designet ditt?

6599647[/snapback]

Beklager at det er tegnet over mye av bildet, skulle sende til en msn *atpåklatt* så ville jeg ikke at han skulle ta det. Så hvis det er super viktig for deg kan jeg laste opp en ny i morra :!:

Men her er den ihvertfall.

Design.zip

haugsand · 2. august 2006

Jeg anbefaler deg å forkaste koden din, og starte helt på nytt igjen. Å posisjonere en hel masse bilder er dårlig kodepraksis, og ikke minst upraktisk.

Del heller siden din inn i logiske deler:

- Ett div-element og bakgrunnsbilde for toppen

- Den venstre delen av designet ditt kan kalles en sidebar, og menyen bør settes inn ved hjelp av en liste. Hvert listepunkt inneholder én lenke, og har ett bakgrunnsbilde. Ul kan i tillegg ha et bakgrunnsbilde.

- Den høyre delen, innholdsdelen, legger du også i et eget div-element. For å få dynamisk høyde, kan du i utgangspunktet legge inn et bilde som repeteres vertikalt, og senere legge til ekstra element for å sette inn topp og bunn.

For å få to eller flere elementer til å bli plassert ved siden av hverandre, legger du til float: left; på hvert element. Rundt hele designet legger du til et div-element med angitt bredde, og med margin: 0 auto, for å få det midtstilt.

Sentrere mange "divs"..

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

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer