Avatar billede visuel Nybegynder
30. august 2005 - 18:06 Der er 42 kommentarer og
2 løsninger

position af div

Jeg har en række div'er der udgør mit site. Mit spørgsmål går på, hvordan jeg får placeret dem rigtigt.

Det jeg skal have er, at den ene div overlapper en anden (som var det to lag). Det er heller ikke noget problem med en absoute position BORTSET fra, at den så ikke står samme sted altid, men afhængigt af, hvor bred skærmen er. Hvis jeg bruger en af de andre position-værdier placeres div'en med billedet uden for de andre div'er.

En anden ting er at jeg ikke kan få centreret min main-div andet end i IE.

Håber nogen kan hjælpe med dette hurtigt.
Avatar billede olebole Juniormester
30. august 2005 - 18:15 #1
<ole>

Du skal bare gøre noget andet, end det, du gør nu  :)

/mvh
</bole>
Avatar billede visuel Nybegynder
30. august 2005 - 18:21 #2
hmm.. så langt havde jeg tænk. ;) men hvad?

:)
Avatar billede olebole Juniormester
30. august 2005 - 18:26 #3
Nej, for så var du nok også kommet så langt i tankerækken, at du havde indset, vi intet kan sige om, hvad det er, du gør forkert, når vi ikke aner, hvad du gør  ;o)
Avatar billede visuel Nybegynder
30. august 2005 - 18:28 #4
Her er lidt kode hvis det kan hjælpe... Det er logoet der skal placeres så det overlapper contentarea i det ene hjørne. Håber I forstår

<div id="wrapper">

    <div class="logo"><img class="logo" src="images/logo.gif" alt=""></div>

    <div id="contentArea">
   
        <img class="slogan" src="images/slogan.gif" alt="">
       
        <div class="leftbar">
            <ul class="menu">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
            </ul>
           
            <div class="loginbox">
            </div>
        </div>
       
        <div class="mainContent">
           
            <h1></h1>           
            <p>p>
           
            <h1></h1>
            <p></p>
           
            <h1></h1>
            <p></p>
                       
        </div>
       
        <div class="footer"><p class="address"></p></div>
       
    </div>

</div>
Avatar billede visuel Nybegynder
30. august 2005 - 18:30 #5
og så lige lidt stylesheets ;)

#wrapper{
    padding: 0;
    margin: 20px 0 10px 0;   
}
#contentArea{
    width: 655px;
/*    height: 550px;*/
    padding: 0 0 0 0;
    margin: 20px 0 0 0;
    background: #FFFFFF;
    border: solid #666699 1px;
    text-align: left;
}

.logo{
    margin-left:270px;
    position: absolute;
    top: 6px;
Avatar billede visuel Nybegynder
30. august 2005 - 18:34 #6
og undskylder hvis jeg ikke forklarede mig ordenligt i første omgang. Det må være for indædt... :)
Avatar billede olebole Juniormester
30. august 2005 - 19:25 #7
Jeg bliver nok nødt til at se dokumentet, for der er flere ting, der afgør, hvad der skal stå ... og det er muligt, der skal rettes andre steder også.
Har du f.eks. en DTD øverst i dit dokument - og i så fald hvilken? Den er nemlig afgørende for, om IE overhovedet forstår CSS  :)

- og det er helt i orden, du ikke forklarede dig helt tydeligt. Det kan godt være svært at forklare sig, når man ikke er helt 'stiv i koderne'. Jeg drillede bare lidt i al venskabelighed  ;o)
Avatar billede visuel Nybegynder
30. august 2005 - 23:03 #8
yep jeg har en DTD, men det virker også fint i IE som den eneste browser:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Jeg kan desværre ikke vise dig hele dokumentet, da det indeholder fortrolige oplysninger jeg først skal sortere fra.

Det eneste jeg er ude efter er, om det er muligt at lave en overlapning (flere lag) uden brug af position:absulute, da den som sagt ikke placere elementet i forhold til parent-element, men i forhold til browserens yderpunkter.
Det andet spørgsmål er om det ikke er muligt at centrere en div i browseren i andre browserer end IE?
Avatar billede ztyxx Nybegynder
30. august 2005 - 23:15 #9
Avatar billede visuel Nybegynder
31. august 2005 - 10:16 #10
jeg har kigget diverse sites igennem og er ikke kommet frem til en løsning... Derfor jeg spørger her. Mit spørgsmål går ikke på hvordan man lærer css (det kan jeg sagtens i forvejen), men konkret:

Er det muligt at lave 2 div'er der i 2 lag overlapper hinanden og det øverste lag IKKE bliver placeret i forhold til browserens højreside, men evt i forhold til enten centrum af skærmen (da jeg også skal have centreret min div!???) eller en i forvejen eksisterende div?

Er jeg virkelig så dårlig til at forklare mig?
Avatar billede Slettet bruger
01. september 2005 - 00:01 #11
utrolig meget code til lidt???
begræns det til ??
Avatar billede roenving Novice
01. september 2005 - 08:42 #12
Og præcis de to links er herostratisk berømte for meget alvorlige misforståelser omkring benyttelsen af css, rent bortset fra de mange faktuelle fejl ...
Avatar billede visuel Nybegynder
01. september 2005 - 12:38 #13
øhh. undskyld, men her tabte i mig... picro, hvad mener du?
Avatar billede olebole Juniormester
01. september 2005 - 12:41 #14
Tag dig ikke af picro. Han har det med at ryge for store totter af sin mormors hår - og efterfølgende gå på Eksperten og søge opmærksomhed. Distrikstspsykiatrien ville klart være et bedre forum  :o|
Avatar billede visuel Nybegynder
01. september 2005 - 12:49 #15
LOL,

nåh, men eftersom nogle af de dygtigste folk endnu ikke har kunne svare på mit spørgsmål, er det vel fordi det ikke kan lade sig gøre... Så må man jo bare ty til tabeller og images. øvøv. Er der ikke andre gode forslag? Det jeg har er en div (contentarea) med en border og ovenpå den border skal der ligge et billede (logo).

Lader den lige stå lidt endnu, hvis jeg skulle være så heldig at der skulle komme en forbi der havde løsningen.
Avatar billede olebole Juniormester
01. september 2005 - 12:57 #16
Jeg er stadig ikke helt klar på, hvad det præcist er, du vil - men du kan jo f.eks. altid bruge en kombination af et relativt og et absolut positioneret element:

<div style="position:relative;width:200px;height:150px;border:1px solid red;margin:200px">
<div style="position:absolute;width:100px;height:20px;background-color:yellow;top:-10px;left:-30px">blabla</div>
</div>

Jeg ved ikke, om det kan være til hjælp?  :)
Avatar billede visuel Nybegynder
01. september 2005 - 13:18 #17
ok - prøver lige at forklare på en anden måde.

1. Jeg har en div navngivet contentArea. Forestil jer at det er det hvide område her på exp. Den div har en border ligesom den sorte her på exp (dette er egentlig irrelevant).

2. jeg har et logo-image lagt i en div navngivet logo. Forestil jer at det er exp's blå logo i øverste venstre hjørne (mit sidder så bare i højre).

Det jeg vil have er at logoet bliver flyttet så det ex. centrum af logoet er lige på hjørnet af contentArea. Dvs. at logoet både går ud i det blå område og ind i det vide.

Hjalp det?
Avatar billede visuel Nybegynder
01. september 2005 - 13:18 #18
*hvide
Avatar billede olebole Juniormester
01. september 2005 - 13:21 #19
Jamen, så prøv lige at kaste det eksempel, jeg skrev i en browser  ;o)
Avatar billede olebole Juniormester
01. september 2005 - 13:25 #20
Tricket er: Et absolut positioneret element placerer sig:

1. i forhold til det først omkransende positionerede element (relativt eller absolut er ligemeget).
2. Findes et sådan ikke, placerer det sig i forhold til body-elementet

- mange kender kun punkt 2 ... men punkt 1 er faktisk meget vigtigt  ;o)
Avatar billede visuel Nybegynder
01. september 2005 - 13:34 #21
HVOR ER DET DOG SMUKT :D

4  milliarder mange tak for hjælpen ole

Kan du så også svare på hvordan jeg får centreret min wrapper (som er den der nu har fået en position relativ!) i forhold til body og så det virker i alle browserer? :P
Avatar billede roenving Novice
01. september 2005 - 13:40 #22
margin:0 auto;

-- det kræver så, at du ikke disabler væsentlige dele af css i IE ved ikke at angive en fuldt kvalificeret doctype inklusive dtd-link !-)

F.eks. kan du bruge:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

...
Avatar billede olebole Juniormester
01. september 2005 - 13:45 #23
Det kræver, du bruger en DTD aller øverst (linjen før <html>) med definitions-URL'en i. Det kunne f.eks. være:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

- ellers er der enorme huller i IE's CSS-fortolkning  :)

Dernæst sætter du margin-left og margin-right til auto på elementet, der skal centreres. Barberet helt ned:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>

<div style="width:800px;border:1px solid blue;margin:0 auto">

    <div style="position:relative;width:200px;height:150px;border:1px solid red;">
        <div style="position:absolute;width:100px;height:20px;background-color:yellow;top:-10px;left:-30px">blabla</div>
    </div>
   
</div>

</body>
</html>

- men som du ser (når du tester eksemplet), skal du så også centrere inde i din wrapper, hvis det er, hvad du ønsker  :)
Avatar billede olebole Juniormester
01. september 2005 - 13:47 #24
Læg mærke til, dit wrapper-element skal have sat en bredde. Ellers fylder div'et jo hele bredden - og så giver det ingen mening at centrere elementet, horisontalt  ;o)
Avatar billede visuel Nybegynder
01. september 2005 - 14:19 #25
Det er jo perfekt :)

Jeg kunne ikke blive gladere menneske lige nu. Mange tak

Pointene står i kø for at komme til jer, så skynd jer ;)
Avatar billede roenving Novice
01. september 2005 - 14:38 #26
Det må vel være oles !-)
Avatar billede visuel Nybegynder
01. september 2005 - 14:43 #27
joh, men du var jo hurtigst med centreringsspørgsmålet...  Hvis vi nu laver en procentfordeling så alle er glade... Synes i begge skal have lidt, men klart ole skal have flest ;)
Avatar billede olebole Juniormester
01. september 2005 - 16:44 #28
- egentlig burde picro vel have dem alle. Det virker, somom han aldrig får noget - og det er jo lidt synd  :D

roenving >> læg du nu bare et svar, så vi kan få delt pointene. Det finder jeg også yderst rimeligt  ;o)
Avatar billede roenving Novice
01. september 2005 - 16:48 #29
Ja, ja, da, men jeg skal i hvert fald maksimalt have ¼ af pointene '-)
Avatar billede visuel Nybegynder
01. september 2005 - 17:03 #30
Så er pointene delt ud :D

Utroligt at eksperten endnu ikke har lavet systemet så det er muligt at tildele flere point hvis man finder det rimeligt. <- ET FORSLAG TIL FORBEDRING ;)

Føler mig ellers gavmild og glad og ville ha' fordelt pointene 80-40. Det ville ha været mest rimeligt. :)

Endnu engang tak for hjælpen. og på genchat (eller hvad sådan noget nu hedder)

Ha' en god aften og en god weekend

:)
Avatar billede visuel Nybegynder
01. september 2005 - 17:08 #31
Btw ole

når jeg nu har fat i dig vil jeg da lige minde dig om at du endnu ikke har svaret på http://www.eksperten.dk/spm/611507. Vil du ikke besvare den så du kan få dine point og jeg kan få lukket spg. ;)
Avatar billede roenving Novice
01. september 2005 - 17:08 #32
*lol*

Eksperten har et system til det !-)

Oppe til venstre under Funktioner findes der i åbne spørgsmål et punkt, som hedder 'Afsæt flere point' !o]

-- og jeg takker for point ;~}
Avatar billede visuel Nybegynder
01. september 2005 - 17:14 #33
DOH...

Har aldrig lagt mærke til det menupunkt der hed funktioner. Det beklager jeg ... Det burde du have point for at lære mig.. ;)

Jeg husker jer til en anden gang... så er der bonuspoint

ps. så et tip til forbedring.. Gør det muligt at den automatisk finder ud af at der er flere point på spil hvis man indtaster flere point end først angivet ved pointgivning.

:)
Avatar billede roenving Novice
01. september 2005 - 17:17 #34
Gider du smide det over i Eksperten --> Forslag !-)
Avatar billede olebole Juniormester
01. september 2005 - 17:30 #35
- og jeg takker naturligvis også for points. Jeg har i hvert fald fået rigeligt  ;o)
Avatar billede saudoo Nybegynder
09. september 2005 - 21:15 #36
olebole:
1. i forhold til det først omkransende positionerede element (relativt eller absolut er ligemeget).
...

Den første hvor du skriver, at det er ligemeget om man bruger relative, eller absolute, passer da ikke? :S

Hvis man nu tænker sig at man har en div på 500px i højde. Heri er placeret top andre divs der hver er 200 px høje (det hele selvfølgelig også med en bredde.. :P)..

Hvis man bruger position: absolute; så er vi enige om at den vil finde det hjørne man angiver, i den div den står i. Men hvis man bruger position: relative; så vil den da rette sig efter hvor den er placeret i koden. Altå en top: 15px; vil være det samme som at den hoppe 15px ned fra hvor den ellers ville have stået. Og ikke toppen af den div som den er placeret i.. :)
Avatar billede saudoo Nybegynder
09. september 2005 - 21:17 #37
Glemte lige at sig de positions var sat på den nederste.
Avatar billede olebole Juniormester
09. september 2005 - 22:01 #38
Det inderste div placerer sig i forhold til det yderste div, hvis det inderste er positioneret absolut og det yderste er positioneret absolut eller relativt.

Hvis du mener noget andet, så test. Får du et resultat, som ikke stemmer overens med, hvad jeg skriver, vil jeg meget gerne se koden  :)
Avatar billede saudoo Nybegynder
09. september 2005 - 23:15 #39
Hm.. er enig med dig på det punkt.. Men du sagde jo bare at det var ligemeget om man brugte absolute eller relativ.. :)
Avatar billede olebole Juniormester
09. september 2005 - 23:32 #40
Så har du vist ikke læst, hvad jeg skrev:

"Et absolut positioneret element placerer sig [...] i forhold til det først omkransende positionerede element (relativt eller absolut er ligemeget)"

Parentesen refererer da ret tydeligt til det omkransende element ... eller ...?  :)
Avatar billede olebole Juniormester
09. september 2005 - 23:35 #41
- og at det inderste er absolut positioneret er jo selve udgangspunktet i udsagnet :)
Avatar billede saudoo Nybegynder
09. september 2005 - 23:51 #42
Ah ja.. læste ved siden af, og troede du mente at det var ligemeget med den div der var inderst.. :P
Jeg undskylder for at jeg opholdte dig.. :)
Avatar billede olebole Juniormester
09. september 2005 - 23:53 #43
- no problemo, hombre  ;o)
Så er det pindet ud for den næste  :)
Avatar billede saudoo Nybegynder
10. september 2005 - 11:16 #44
Ja.. det er dog altid noget.. :P
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester