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
Variabler som ikke virker Af Frits Jensen i HTML 2 30/10/202409:37 30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML 2 29/09/202410:58 30/09/202412:04
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
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 15:53 Ccleaner og Avast Premium Af nu_igen i Andet software
I går 14:41 Fremme e-mail konti, YouSee Webmail, i Outlook.com (gratis) Af mort1 i E-mail programmer
I går 13:13 Returnere korrekt værdi ved dubletter Af karina1971 i Excel
I går 08:56 HP support Af gerhardpet i Printere
03/1116:41 Me.Form.Painting = True/False ore Me.Painting = True/false Af per2edb i Access
White papers
Flere white papers »


Premium
Teaser billede
Forslag til dansk AI-lov sendes nu i høring: Skal træde i kraft om få måneder - se det her
Læs mere »
It-leverandør ramt af flodbølge af erstatningskrav fra kunder efter cyberangreb
Vokseværk: Så meget er Digitaliseringsstyrelsen vokset på to år
Microsoft: Sådan stjæler hackere data fra vores kunder
Se alle »
Computerworld
Teaser billede
Russisk domstol: Google skal betale 20 kvintilliarder dollar i bøde - fordobles løbende
Læs mere »
Test: Det er nærmest vanedannede at anvende disse mini-tastaturer
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Test af Apple Watch Series 10: Apples jubilæums-model er blevet lidt af en mester af det hele
Se alle »
CIO
Teaser billede
It-leverandør ramt af flodbølge af erstatningskrav fra kunder efter cyberangreb
Læs mere »
Novo Nordisk satsede på HoloLens, men nu har Microsoft dræbt produktet
Microsoft: Sådan arbejder Google målrettet på at skade os i det skjulte
Jyske Bank er en af de største ejere af Bankdata – men nu har banken købt et nyt system hos konkurrenten BEC
Se alle »
Job & Karriere
Teaser billede
Pludselig exit fra Schultz kom som en overraskelse for Merete Søby: Derfor stoppede samarbejdet
Læs mere »
Danske Aeven flytter hele hovedkontoret med 600 medarbejdere til ny adresse og tager Sentia med
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Top-profilen Helle Huss ny direktør i Microsoft Danmark - tiltræder om to måneder
Se alle »
White paper
Teaser billede
SMB og cybertrusler: Brug sikkerhedsressourcerne optimalt
Læs mere »
Sådan får du overblik og beskytter dine cloudapplikationer
Sådan gør du: Elektronisk dokumentudveksling i praksis
Sikkerhed uden grænser: Cisco Hypershield
Se alle »

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