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 dag 00:54 Windows 11 Pro - IIS Af bsn i Windows
I går 18:46 Omdanne stik på router til USB Af valby i Routere & Switches
I går 10:49 Ændring finansår C5 Af Lene i Økonomiprogrammer
25/1117:29 Proceslinje Af luffe1955 i Windows
25/1115:07 videoredigering med DaVinci Resolve Af gerhardpet i Andet software
White papers
Flere white papers »


Premium
Teaser billede
Microsoft hæver priserne på M365: Sådan kommer de nye priser til at ramme
Læs mere »
Efter annullering: Nu åbner Energinet igen for DevOps-aftale til 164 millioner kroner
Står klar med 50 millioner kroner til indkøb af specialiserede it-konsulenter
AI-bølgen har fået markedsværdi for 139 år gammelt hardware-firma til at eksplodere: Steget med 400 procent siden nytår
Se alle »
Computerworld
Teaser billede
Microsofts nye pc er ekstrem billig – men kan blive ekstrem sikker og fleksibel
Læs mere »
Stort Microsoft-nedbrud rammer flere kunder: Problemer med Teams og mails
Test: Den snusfornuftige Volkswagen ID.3 blevet til lidt af el-bisse
Kæmpe datalæk på hospital: 750.000 patienters fortrolige data lækket
Se alle »
CIO
Teaser billede
Stort Microsoft-nedbrud rammer flere kunder: Problemer med Teams og mails
Læs mere »
Microsoft hæver priserne på M365: Sådan kommer de nye priser til at ramme
Konsulenthus vil rulle Microsoft 365 Copilot ud til 200.000 ansatte
Kæmpe-opgave for Danske Bank har banet vej for fuldautomatiseret migrering til cloud: Nu udbredes metoden i hele AWS
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Topchef Sara Green mener, at der er brug for et radikalt nyt syn på it-ledelse - særligt én ny trend hader hun som pesten
Se alle »
White paper
Teaser billede
Managed Detection & Response: Forsvar din virksomhed mod cybertrusler døgnet rundt
Læs mere »
Governance, Risk & Compliance: Knyt stærke bånd mellem forretning og sikkerhed
Sikkerhed uden grænser: Cisco Hypershield
Derfor kræver AI, cloud og sikkerhed et stærkere netværk
Se alle »

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