CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede anders_lun Nybegynder
11. februar 2008 - 08:36 Der er 9 kommentarer og
1 løsning

Placering af divs?

Hejsa, har placeret mine divs via css, og med maksimeret/fuld skærm ser det helt ud som det skal.. men hvis jeg gør vinduet mindre så hoppe de forskellige divs væk fra deres positioner og kommer til at blive rodet :S..

Alle min divs koder ser ud som flg.:
#avispic {
    position:absolute;
    left:270px;
    top:205px;
    width:221px;
    height:118px;
    z-index:8;
}
<div id="avispic"><img src="images/avisbilled.JPG" width="190" height="98"></div>

Kan i hjælpe med at sige hvad jeg gør galt?
Avatar billede anders_lun Nybegynder
11. februar 2008 - 11:31 #1
Kan lige smide min kode op.. Mit problem er at hvis jeg resizer i IE bliver diverne ikke på deres plads. Håber i kan hjælpe.

<html>
<head>
<title>Dorch &amp; Danola A/S - Totalleverand&oslash;r til Dansk Industri</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    background-color: #281e1f;
}
#blaaline1 {
    position:absolute;
    left:496px;
    top:584px;
    width:5px;
    height:162px;
    z-index:1;
}
#blaaline2 {
    position:absolute;
    left:742px;
    top:584px;
    width:5px;
    height:162px;
    z-index:1;
}
.style1 {
    font-size: 12px;
    font-weight: bold;
}
#nyhedoverskrift {
    position:absolute;
    left: 300px;
    top:353px;
    width:177px;
    height:27px;
    z-index:2;
    font-size: 14px;
    font-family: verdana;
    font-weight: bold;
}
#bluelineflow {
    position:absolute;
    left:287px;
    top:367px;
    width:190px;
    height:8px;
    z-index:3;
}

#bluelineflow2 {
    position:absolute;
    left:287px;
    top:572px;
    width:190px;
    height:8px;
    z-index:3;
}
#tilbyder {
    position:absolute;
    left:510px;
    top:580px;
    width:175px;
    height:31px;
    z-index:4;
    font-size:14px;
    font-family: verdana;
    font-weight:bold;
}
#nyhedsbrev {
    position:absolute;
    left:760px;
    top:578px;
    width:135px;
    height:33px;
    z-index:5;
    font-size:14px;
    font-family: verdana;
    font-weight: bold;
}
#butiklogo {
position:absolute;
left: 287px;
top: 600px;
z-index:1;

}
#apDiv1 {

}
.tilbudsavistext {
    font-family: verdana;
    font-weight: bold;
    font-size: 14px;   
    position:absolute;
    left:286px;
    top:186px;
    width:228px;
    height:30px;
    z-index:6;
}
#bluelineflow3 {
    position:absolute;
    left:287px;
    top:200px;
    width:172px;
    height:8px;
    z-index:7;
}
#avispic {
    position:absolute;
    left:270px;
    top:205px;
    width:221px;
    height:118px;
    z-index:8;
}
#velkomsttext {
    position:absolute;
    left:520px;
    top:400px;
    width:528px;
    height:219px;
    z-index:9;
    font-family: verdana;
    font-size:12px
}
#netbutiktext {
    position:absolute;
    left:290px;
    top:580px;
    width:159px;
    height:24px;
    z-index:10;
    font-family:verdana;
    font-size:14px;
    font-weight:bold;
}
#vitilbydertext {
    position:absolute;
    left:520px;
    top:610px;
    width:172px;
    height:149px;
    z-index:11;
    font-size:12px;
    font-family:verdana;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


<table width="731" height="775" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01" bgcolor="#FFFFFF">
<tr>
        <td colspan="6">
            <img src="images/banner.jpg" width="724" height="101" alt=""></td>
        <td width="7" rowspan="12" bgcolor="281e1f"></td>
  </tr>
    <tr>
        <td colspan="6">
            <img src="images/hvidstreg.jpg" width="724" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="6">
            <img src="images/menu.jpg" width="724" height="31" alt=""></td>
  </tr>
    <tr>
        <td colspan="2" width="238" height="160">&nbsp;</td>
  <td colspan="3" rowspan="3">
            <img src="images/billedboks.jpg" width="471" height="217" alt=""></td>
        <td width="15" rowspan="9">
            <img src="images/danolaslice2_06.jpg" width="15" height="100%" alt=""></td>
</tr>
    <tr>
        <td colspan="2" height="49">&nbsp;</td>
  </tr>
    <tr>
        <td colspan="2" rowspan="2" width="238" height="27"></td>
  </tr>
    <tr>
        <td colspan="3" rowspan="2">
            <img src="images/blaabox.jpg" width="471" height="177" alt="">
<div id="velkomsttext">
Velkommen til Dorch &amp; Danola' hjemmeside.
<br>   
<br>
Dorch &amp; Danola A/S har  Danmarks bredeste program til den<br> Danske Industri.
<BR><BR>
Bes&oslash;g vores  netbutik for at se en del af vores store udvalg.<BR>
Tryk her for at bes&oslash;g vores <A href="http://www.dorchdanola-netbutik.dk" target="_parent">Netbutik</A> </div>
<div id="vitilbydertext">Dorch &amp; Danola tilbyder alt indenfor:<br> Fynske olier, slib, slibeservice, sk&aelig;rende v&aelig;rkt&oslash;j, el-v&aelig;rkt&oslash;j, sikkerheds arbj. t&oslash;j &amp; sko, industrilime, reparation af v&aelig;rkt&oslash;j
</div>
<div id="netbutiktext">NETBUTIK</div>
<div id="blaaline1"><img src="images/blueline.jpg" width="5" height="156"></div>
<div id="blaaline2"><img src="images/blueline.jpg" width="5" height="156"></div>
<div class="style3" id="nyhedoverskrift">NYHEDER</div>
<div id="bluelineflow"><img src="images/bluelineflow.JPG" width="197" height="5"></div>
<div id="nyhedsbrev">NYHEDSBREV</div>
<div class="tilbudsavistext" id="apDiv1">SE VORES TILBUDSAVIS</div>
<div id="bluelineflow3"><img src="images/bluelineflow.JPG" width="197" height="5"></div>
<div id="avispic"><img src="images/avisbilled.JPG" width="190" height="98"></div>

<div id="bluelineflow2"><img src="images/bluelineflow.JPG" width="197" height="5"></div>

          </td>
  </tr>
    <tr>
        <td colspan="2" height="158">
        <div id="tilbyder">VI TILBYDER</div>
        </td>
  </tr>
    <tr>
        <td colspan="5" width="709" height="29">
            </td>
</tr>
    <tr>
        <td width="230" height="187">
        <div id="butiklogo"><img src="images/forsidepic.jpg"></div></td>
  <td colspan="2" width="237">&nbsp;</td>
        <td width="21" height="187"></td>
  <td width="221">&nbsp;</td>
</tr>
    <tr>
        <td colspan="5" width="709"><div align="center" class="style1">Dorch &amp; Danola A/S | Ove Gjeddes Vej 7 | 5220 Odense S&Oslash; | Telefon: 66155040/66154871<br>
        Email: info@dorchdanola.dk | Fax: 66155099/66184803</div></td>
  </tr>
    <tr>
        <td width="230" height="5"></td>
        <td width="8"></td>
  <td width="229"></td>
  <td width="21"></td>
        <td width="221"></td>
  </tr>
</table>

</body>
</html>
Avatar billede olebole Juniormester
11. februar 2008 - 19:30 #2
<ole>

Jo, dine div bliver lige netop på deres plads - mens alt andet flytter sig  ;o)

Problemet er, at du positionerer dine div absolut. Derved bliver de stående på samme plads, målt fra øverste venstre hjørne. Undlad absolut positionering

/mvh
</bole>
Avatar billede anders_lun Nybegynder
12. februar 2008 - 06:36 #3
Hej Ole, kan du give evt. mig et eksempel på hvordan jeg skal gøre i stedet?

mvh. Anders
Avatar billede anders_lun Nybegynder
12. februar 2008 - 08:26 #4
Har lige prøvet og rodde lidt med det, og kan det passe at hvis jeg får min Tabel til at være i left eller default, så bliver diverne præcis hvor de skal være, lige meget hvor meget du skalere vinduet?

Hvis dette er tilfældet, hvorfor kan diverne ikke blive på deres plads når tabel bliver sat til at skal være centret ?

mvh. anders
Avatar billede olebole Juniormester
12. februar 2008 - 22:09 #5
Et absolut positioneret element placerer sig i forhold til det første, omkransende element, der er positioneret (det omkransende element kan være enten absolut eller relativt positioneret.
Findes ikke et omkransende, positioneret element, placerer elementet sig i forhold til body-elementet.

En vigtig detalje er dog, at det ikke nytter at positionere et td relativt - for at få et absolut positioneret 'barn' til at placere sig i forhold til cellen. Der skal f.eks. indskrives et relativt positioneret div i cellen.

Dine div placerer sig i forhold til body-elementet - både, når det er venstrestillet og når det er centreret. Dét er dit problem.
Problemet løses - som jeg nævnte i mit første indlæg - ved at undgå absolut positionering. Brug i stedet dokumentets normale element-flow.
Mere om positionering:
    http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-position

Derudover er det en misforståelse af CSS at basere sin kode på ID-selectors. Hele idéen med CSS er arv gennem klasser - element klasser såvel som CSS-klasser  ;o)
Avatar billede anders_lun Nybegynder
13. februar 2008 - 07:35 #6
Ok lige et spørgsmål.. bruger nu relative positioner.. Men til tider begynder den og lave min grafik 2 gange, fx hvis jeg har et billede kan den lægge samme billede lige ved siden af, eller vil lave tomme luft huller :S kan du svare på hvad jeg gør forkert?
Avatar billede olebole Juniormester
14. februar 2008 - 00:53 #7
Måske, hvis jeg ser koden. Alle mulige fejl kan være skyld i alle mulige symptomer ... kombinationerne og 'kreativiteten' er voldsomme størrelser at overskue  =)
Avatar billede anders_lun Nybegynder
14. februar 2008 - 06:58 #8
ok =).. Her er koden;


<style type="text/css">
<!--
body {
    background-color: #281e1f;
}
#blaaline1 {
    position:absolute;
    left:496px;
    top:584px;
    width:5px;
    height:162px;
    z-index:1;
}
#blaaline2 {
    position:absolute;
    left:742px;
    top:584px;
    width:5px;
    height:162px;
    z-index:1;
}
.style1 {
    font-size: 12px;
    font-weight: bold;
}
#nyhedoverskrift {
    position:relative;
    left: -217px;
    top:-190px;
    width:177px;
    height:27px;
    z-index:2;
    font-size: 14px;
    font-family: verdana;
    font-weight: bold;
}
#bluelineflow {
    position:absolute;
    left:287px;
    top:364px;
    width:190px;
    height:8px;
    z-index:3;
}

#bluelineflow2 {
    position:absolute;
    left:287px;
    top:572px;
    width:190px;
    height:8px;
    z-index:3;
}
#tilbyder {
    position:absolute;
    left:510px;
    top:580px;
    width:175px;
    height:31px;
    z-index:4;
    font-size:14px;
    font-family: verdana;
    font-weight:bold;
}
#nyhedsbrev {
    position:absolute;
    left:760px;
    top:578px;
    width:135px;
    height:33px;
    z-index:5;
    font-size:14px;
    font-family: verdana;
    font-weight: bold;
}
#butiklogo {
position:absolute;
left: 287px;
top: 600px;
z-index:1;

}

.tilbudsavistext {
    font-family: verdana;
    font-weight: bold;
    font-size: 14px;   
    position: relative;
    left:-217px;
    top:-405px;
    width:228px;
    height:30px;
    z-index:6;
}
#bluelineflow3 {
    position: relative;
    left:-217px;
    top:-421px;
    width:172px;
    height:8px;
    z-index:7;
}
#avispic {
    position:relative;
    left:-217px;
    top:-425px;
    width:221px;
    height:118px;
    z-index:8;
}
#velkomsttext {
    position:relative;
    left:20;
    top:20;
    width:440;
    height:177;
    z-index:9;
    font-family: verdana;
    font-size:12px;
    background-image:url(images/blaabox.jpg);
    visibility: visible;
}
#netbutiktext {
    position:absolute;
    left:290px;
    top:580px;
    width:159px;
    height:24px;
    z-index:10;
    font-family:verdana;
    font-size:14px;
    font-weight:bold;
}
#vitilbydertext {
    position:absolute;
    left:520px;
    top:610px;
    width:172px;
    height:149px;
    z-index:11;
    font-size:12px;
    font-family:verdana;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


<table width="724" height="775" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01" bgcolor="#FFFFFF">
<tr>
        <td colspan="6">
            <img src="images/banner.jpg" width="724" height="101" alt=""></td>
        <td width="7" rowspan="12" bgcolor="281e1f"></td>
  </tr>
    <tr>
        <td colspan="6">
            <img src="images/hvidstreg.jpg" width="724" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="6">
            <img src="images/menu.jpg" width="724" height="31" alt=""></td>
  </tr>
    <tr>
        <td colspan="2" width="238" height="160">&nbsp;</td>
  <td colspan="3" rowspan="3">
            <img src="images/billedboks.jpg" width="471" height="217" alt=""></td>
        <td width="15" rowspan="9">
            <img src="images/danolaslice2_06.jpg" width="15" height="100%" alt=""></td>
</tr>
    <tr>
        <td colspan="2" height="49">&nbsp;</td>
  </tr>
    <tr>
        <td colspan="2" rowspan="2" width="238" height="27"></td>
  </tr>
    <tr>
        <td colspan="3" rowspan="2" height="177" width="471">
<div id="velkomsttext">
Velkommen til Dorch &amp; Danolas hjemmeside.
<br>
<br>
Dorch &amp; Danola A/S har Danmarks bredeste program til den danske industri.
<BR><BR>
Bes&oslash;g vores  netbutik for at se vores store udvalg.<BR>
Tryk her for at bes&oslash;g vores <A href="http://www.dorchdanola-netbutik.dk" target="_parent">Netbutik</A> </div>
<div id="vitilbydertext">Dorch &amp; Danola tilbyder alt indenfor:<br> Fynske olier, slib, slibeservice, sk&aelig;rende v&aelig;rkt&oslash;j, el-v&aelig;rkt&oslash;j, sikkerheds arbj. t&oslash;j &amp; sko, industrilime, reparation af v&aelig;rkt&oslash;j
</div>
<div id="netbutiktext">NETBUTIK</div>
<div id="blaaline1"><img src="images/blueline.jpg" width="5" height="156"></div>
<div id="blaaline2"><img src="images/blueline.jpg" width="5" height="156"></div>
<div class="style3" id="nyhedoverskrift">NYHEDER</div>
<div id="bluelineflow"><img src="images/bluelineflow.JPG" width="197" height="5"></div>
<div id="nyhedsbrev">NYHEDSBREV</div>
<div class="tilbudsavistext" id="apDiv1">SE VORES TILBUDSAVIS</div>
<div id="bluelineflow3"><img src="images/bluelineflow.JPG" width="197" height="5"></div>
<div id="avispic"><img src="images/avisbilled.JPG" width="190" height="98"></div>
<div id="bluelineflow2"><img src="images/bluelineflow.JPG" width="197" height="5"></div>
</td>
  </tr>
    <tr>
        <td colspan="2" height="158">
        <div id="tilbyder">VI TILBYDER</div>
        </td>
  </tr>
    <tr>
        <td colspan="5" width="709" height="29">
            </td>
</tr>
    <tr>
        <td width="230" height="187">
        <div id="butiklogo"><img src="images/forsidepic.jpg"></div></td>
  <td colspan="2" width="237"></td>
        <td width="21" height="187" valign="top">&nbsp;</td>
  <td width="221"></td>
</tr>
    <tr>
        <td colspan="5" width="709"><div align="center" class="style1">Dorch &amp; Danola A/S | Ove Gjeddes Vej 7 | 5220 Odense S&Oslash; | Telefon: 66155040/66154871<br>
        Email: info@dorchdanola.dk | Fax: 66155099/66184803</div></td>
  </tr>
    <tr>
        <td width="230" height="5"></td>
        <td width="8"></td>
  <td width="229"></td>
  <td width="21"></td>
        <td width="221"></td>
  </tr>
</table>
Avatar billede anders_lun Nybegynder
28. august 2008 - 10:13 #9
lukker
Avatar billede anders_lun Nybegynder
28. august 2008 - 10:13 #10
j
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
Bredde på div elementer Af dane022 i HTML 2 16/02/202408:29 20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML 2 21/12/202322:51 22/12/202308:03
validering <input tlfnr. Af slein55 i HTML 5 15/10/202311:43 15/10/202314:51
Link fra form input Af jnrmgs i HTML 9 19/09/202319:10 23/09/202313:11
includere i HTML Af slein55 i HTML 3 15/09/202313:47 16/09/202309:40
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
IT-JOB

Cognizant Technology Solutions Denmark ApS

Test Architect - Projects

Udviklings- og Forenklingsstyrelsen

Business Analyst med flair for test

HusCompagniet A/S

Application Manager

Mobilplan ApS

Content Creator

Finanstilsynet

Application manager/Systemforvalter til Finanstilsynet
Seneste spørgsmål Seneste aktivitet
Lige nu strømforsyning Af Shamanji i Andet software
I går 20:17 vlc viser kegle-icon Af casablanca i Andet software
I går 14:01 Oprette / gemme et par fotos i en mappe - Samsung Galaxy A 14 5G ? Af Ikke-ekspert i Mobiltelefoner
I går 11:14 Bærbar til Sims 3? Af idamarie i PC
I går 10:49 Adobe til excel Af densortehingst i Andet software
White papers
Flere white papers »


Premium
Teaser billede
”Det største it-nedbrud i historien” lammede store dele af verden: Nu giver CrowdStrike sine kunder en kop kaffe som undskyldning
Læs mere »
Top-CIO Rasmus Lundgaard Pedersen balancerer hele tiden mellem to poler
5.000 flyafgange i verden blev aflyst som følge af Crowdstrike-nedbrud: Vil Københavns Lufthavn søge erstatning?
Hackere udnytter CrowdStrike-nedbruddet: Spreder malware ved hjælp af falske løsninger
Se alle »
Computerworld
Teaser billede
Microsoft-nedbrud spreder sig: It-systemer i lufthavne verden over er ramt
Læs mere »
Test: Denne mikro-pc er smartere end de stærkeste desktop-maskiner - men flopper alligevel
Elon Musk dropper CrowdStrike efter kæmpe nedbrud
Hundredevis af flyafgange ramt af stort Microsoft-nedbrud
Se alle »
CIO
Teaser billede
Microsoft er på sagen: I gang med at løse kæmpe nedbrud efter katastrofal Crowdstrike-fejl
Læs mere »
Så mange Microsoft-enheder blev ramt af gigantisk Crowdstrike-koks
Telenor skrotter ældre it-system: Nyt system er en hyldevare
Derfor står Danske Bank foran en kæmpe AWS-transformation: Ellers skulle vi bygge en ny infrastruktur for at følge med
Se alle »
Job & Karriere
Teaser billede
Efter 12 år er NNIT's hovedkvarter i Søborg nu ryddet og tomt - alle arbejder hjemme: "Det er med et vist vemod"
Læs mere »
Norlys skal splittes op i fem selskaber: Nu bliver flere ansatte og ledere fyret
Dansk top-profil trækker sig fra Microsoft: Skal være direktør i TDC Erhverv
KMD-direktør forlader selskabet: Det skal hun nu
Se alle »
White paper
Teaser billede
Sådan høster du forretningsfordelene ved Internet of Things
Læs mere »
Optimering af Source-to-Pay: Identificér oplagte gevinster og skær omkostninger
Vejen væk fra WAN: Sådan skifter du til en moderne infrastruktur
Sådan får du overblik og beskytter dine cloudapplikationer
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »