Søg
Avatar billede triple-x Nybegynder
10. februar 2006 - 14:23 Der er 27 kommentarer og
1 løsning

divs der ik vil som jeg

Kære Eksperten

Jeg er efterhånden gråhåret, og i frygt af jeg taber de sidste totter hår ved at arbejde med disse divs, må jeg søge til hjæp herinde.

Forstil jer at jeg har en container hvor der er nogle divs i, denne container skulle gerne udvide sig i takt med mine divs i containeren udvider sig. Det gør den ikke.

Derudover har jeg 3 divs lige under hinanden, når den midterste udvider sig, følger den nederste ikke med. Er der en løsning på dette problem?

Kom gerne med simple eksempler evt.

På forhånd mange tak.
Avatar billede webstuff Nybegynder
10. februar 2006 - 14:33 #1
Har du position:absolute; sat til?
Avatar billede triple-x Nybegynder
10. februar 2006 - 14:37 #2
Ja det har jeg, men jeg har ikke 100% styr på hvornår det skal være relative absolute etc.
Avatar billede fixxxer Nybegynder
10. februar 2006 - 14:41 #3
Det er nu engang meget nemmere at forholde sig til, hvis du skriver dit markup og dit stylesheet herind.

I øvrigt kan man tillære sig meget viden ved at læse dokumentation :)
http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme



"relative
    The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
absolute
    The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins."
Avatar billede olebole Juniormester
10. februar 2006 - 14:42 #4
<ole>

Elementer, der er positioneret absolut, optager i fysisk plads i dokumentets flow, hvorfor de ikke 'skubber' til andre elementer  :)

/mvh
</bole>
Avatar billede triple-x Nybegynder
10. februar 2006 - 14:47 #5
Det hjælper bare ikke så meget at bruge relative, den skubber sig ikke, skal man på en måde angive hvilket andet div den skal skubbe sig i forhold til?
Avatar billede olebole Juniormester
10. februar 2006 - 14:56 #6
Hvad der hjælper og hvad du evt. skal gøre, har vi ikke kinamands chance for at vide, når vi ikke ved, hvad du gør  :)
Avatar billede triple-x Nybegynder
10. februar 2006 - 15:18 #7
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#div1 {
    position:absolute;
    width:228px;
    height:-3px;
    left: 0px;
    top: 95px;
}

#div2 {
    position:absolute;
    width:228px;
    height:-3px;
    left: 0px;
    top: 115px;
}

#div3 {
    position:absolute;
    width:228px;
    height:-3px;
    left: 0px;
    top: 135px;
}
-->
</style>
</head>

<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>
Avatar billede triple-x Nybegynder
10. februar 2006 - 15:19 #8
det er bare en test der er lavet, men her er problemet det samme. Jeg ved jeg har brugt absolute, men det er fordi det var her mit problem startede.
Avatar billede roenving Novice
10. februar 2006 - 16:24 #9
Virker det ikke, hvis du bare fjerner position ?-)
Avatar billede triple-x Nybegynder
10. februar 2006 - 16:35 #10
Hej Roenving

Jo i pågældende eksempel gør det. Men hvis jeg både skal have div'et til at sidde i en bestemt position, og udvide sig udfra den. Så kan jeg ikke bare fjerne den. Da jeg så ikke længere har mulighed for at placere div'et

Eller overser jeg noget?
Avatar billede roenving Novice
10. februar 2006 - 16:41 #11
Jamen, så kan du jo bare give de forankommende elementer en minimumshøjde, der gør det ?-)
Avatar billede triple-x Nybegynder
10. februar 2006 - 16:41 #12
Den forstod jeg ikke helt, sorry!
Avatar billede triple-x Nybegynder
10. februar 2006 - 16:43 #13
Lad os tage overstående eksempel.

Hvis jeg nu vil have de 3 divs til at stå 500px fra left, og 200px fra top.
Dernæst vil jeg have at div1 er absolute, div2 skal kunne udvides sig hvis der kommer tekst, og div3 skal følge med ned.

Håber du forstår
Avatar billede triple-x Nybegynder
11. februar 2006 - 10:43 #14
God formiddag,

Mon det kunne tænkes at i efter en god nats søvn havde et nyt syn på sagen der kunne hælpe mig videre?
Avatar billede johan.o Nybegynder
11. februar 2006 - 11:50 #15
Hvis du nu fjerne position attributten i de tre styles du har i dit eksempel og så tilføjer denne style :

.ekstra {
position: absolute;
left: 100px;
top: 100px; }

og så tilføjer en ekstra div til din html :

<body>
<div class="ekstra">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>
</body>

for du så noget du kan bruge ?

Mvh. Johan
Avatar billede triple-x Nybegynder
11. februar 2006 - 12:58 #16
Hej Johan,

Det virker desværre ikke rigtig. Den positionere ikke de 3 divs 100px fra left
Avatar billede roenving Novice
11. februar 2006 - 14:11 #17
-- har du mulighed for at vise et realistisk eksempel på, hvad det er, du ønsker (f.eks. et link ?-)
Avatar billede triple-x Nybegynder
11. februar 2006 - 14:22 #18
Det kan du tro
http://tygsen.dk/test/exp.html
Menu skal sidde til venstre, og annoncer skal sidde til højre, de skal kunne udvide sig uafhængigt af hinanden

Jeg ved godt der er noget css i style der ikke bruges i eksemplet, men det er fordi jeg har skåret noget væk så problemet nemmere kan ses.
Avatar billede johan.o Nybegynder
11. februar 2006 - 14:41 #19
Hm, jeg kan ikke lige gennemskue dit link men du skriver :

'Den positionere ikke de 3 divs 100px fra left'.

Prøv at sætte dette ind i et body tag :

<div style="position: absolute; left: 0px; top: 0px; width: 100px; height: 100px; border: 1px solid black; text-align: center;">100px*100px</div>

<div style="position: absolute; left: 100px; top: 100px; border: 1px solid blue;">
<div style="position: relative; width: 228px; border: 1px solid red;">div1</div>
<div style="position: relative; width: 228px; border: 1px solid red;">div2</div>
<div style="position: relative; width: 228px; border: 1px solid red;">div3</div>
</div>

De tre div's skulle gerne være 100px fra venstre og 100px fra toppen. De er 'afhængige' af hinanden, det vil sige hvis div 1 udvider sig flytter de andre to sig nedad. Hvis du vil have en fast height på div 1, så sætte du blot den med style="height: ..px;" så flytter de andre to sig nedad i forhold til det.

Har jeg fuldstændigt misforstået hvad det er du mener ?

Mvh. Johan
Avatar billede triple-x Nybegynder
11. februar 2006 - 14:46 #20
Hej Johan

Det er somend rigtig nok forstået, så langt er jeg kommet siden jeg stillede spørgsmål.

Nu er mit problem så at jeg vil have 2 af disse 3divs blokke ved siden af hinanden. Når den ene divblok udvider sig skal den anden bare blive hvor den er, altså ikke begynde at udvide sig.
For at gøre det endnu vanskligere, så er de 2 divblokke ikke på linie, altså tænker fra oppen ned til selve blokken.

Jeg ved det er kringlet at forstå, men jeg synes det er svært at forklare.

Hvis vi tager udgangspunkt i mit link, så skal menu blokken op ved siden af annonce blokken, som skal rykkes til højre.

Håber i forstår, jeg synes efterhånden jeg har prøvet rigtig meget
Avatar billede johan.o Nybegynder
11. februar 2006 - 14:58 #21
Lyder som om du kunne bruge en tabel, hvad med noget ala :

<div style="position: absolute; left: 0px; top: 0px; width: 100px; height: 100px; border: 1px solid black; text-align: center;">100px*100px</div>

<table style="position: absolute; left: 100px; top: 100px; border: 1px solid blue; border-collapse: collapse;" cellspacing="0" cellpadding="0">
<tr>
<td style="vertical-align: top;">
<div style="position: relative; width: 228px; border: 1px solid red;">div1</div>
<div style="position: relative; width: 228px; border: 1px solid red;">div2</div>
<div style="position: relative; width: 228px; border: 1px solid red;">div3</div>
</td>
<td style="vertical-align: top;">
<div style="position: relative; width: 228px; border: 1px solid red;">div1</div>
<div style="position: relative; width: 228px; border: 1px solid red;">div2</div>
<div style="position: relative; width: 228px; border: 1px solid red;">div3</div>
</td>
</tr>
</table>

Mvh. Johan
Avatar billede triple-x Nybegynder
11. februar 2006 - 15:00 #22
Hej Johan, det ser ikke helt værst ud, jeg tror måske det er løsningen.

Jeg forsøger mig lige med dit forsøg, og jeg vil gerne lige takke mange gange for din tid du bruger her på eksperten.

Smid et svar i mellemtiden hvis dette løser mit problem der har givet mig grå hår.
Avatar billede triple-x Nybegynder
11. februar 2006 - 15:33 #23
Hej igen

Så er den godt nok ved at være der :) tusind tak.

Et sidste spørgsmål, hvis vi nu skal have en stor div uden om alt, som udvider sig når tabellen udvider sig, hvordan skal den lige se ud? jeg har svært ved at få den jeg kalder container2 til at udvide sig i takt med min nye fine tabel.

(point forøget til 150 så der er lidt mere at give af)
Avatar billede johan.o Nybegynder
11. februar 2006 - 15:57 #24
<div style="position: absolute; left: 100px; top: 100px;">
<table style="position: relative;">
  <tr>...osv....osv..
  </tr>
</table>
</div>

Men hvis du kun _styler_ på den ekstra div, kan du jo ligeså godt style på tabellen istedet og glemme den ekstra div.

Og med hensyn til tiden på eksperten så er det faktisk rigtigt godt at kigge på spørgsmål herinde når man ikke lige er igang med et projekt selv, så får man banket noget rust af på nogle ting og lærer også nye ting, så velbekomme og selv tak :)

Jeg ligger et svar, så må du selv vurdere hvordan du vil fordele point, men 150 til mig alene er i mine øjne for meget for dette spørgsmål. Faktisk var det næsten sværere for dig at formulere spørgsmålet end det var for os at svare :), så tag lidt selv også :)

Mvh. Johan
Avatar billede triple-x Nybegynder
11. februar 2006 - 18:02 #25
Hej igen Johan,

Din løsning virker i IE, men i FF vil divet ikke bevæge sig med ned. At style tabellen alene kan jeg desværre ikke i dettte tilfælde.

Hvis du kan løse det sidste problem med IE/FF så får du alle point som tak for hjælpen... Andre er naturligvis også velkomne
Avatar billede johan.o Nybegynder
11. februar 2006 - 18:28 #26
Hm, jeg syntes da det virker fint, er du sikker på du har skrevet hvad jeg foreslog ?

Prøv dette :

<body>

<div style="position: absolute; left: 0px; top: 0px; width: 100px; height: 100px; border: 1px solid black; text-align: center;">100px*100px</div>

<div style="position: absolute; left: 100px; top: 100px; border: 3px solid green;">
<table style="position: relative; border: 1px solid blue; border-collapse: collapse;" cellspacing="0" cellpadding="0">
<tr>
<td style="vertical-align: top;">
<div style="position: relative; width: 228px; border: 1px solid red;">div1</div>
<div style="position: relative; width: 228px; border: 1px solid red;">div2</div>
<div style="position: relative; width: 228px; border: 1px solid red;">div3</div>
</td>
<td style="vertical-align: top;">
<div style="position: relative; width: 228px; border: 1px solid red;">div1</div>
<div style="position: relative; width: 228px; border: 1px solid red;">div2</div>
<div style="position: relative; width: 228px; border: 1px solid red;">div3</div>
</td>
</tr>
</table>

</body>

Mvh. Johan
Avatar billede triple-x Nybegynder
19. februar 2006 - 10:51 #27
Tusind tak for hjælpen Johan.

Hvis andre føler sig snydt, så sig til :)
Avatar billede johan.o Nybegynder
19. februar 2006 - 10:58 #28
Det var så lidt, og tak for points :)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 14:53 TV4ever 3.0 Af valby i Diverse
01/0816:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
01/0809:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
White papers
Flere white papers »