Søg
Avatar billede dennism Nybegynder
28. august 2009 - 23:38 Der er 14 kommentarer og
1 løsning

CSS: To div oveni hinanden

Jeg har lavet en lille test-side her:
http://www.dennismadsen.com/uploads/test.html

Det ser måske lidt underlidt ud og virker måske også ret skørt. Men jeg skal bruge det til noget jQuery hvor jeg skal fade nogle billeder. Derfor er jeg interesseret i, at det inderste div ("fade div" i CSS'en) ligger ovenpå det andet div, så man kun kan se det sidste logo.

Håber nogen kan hjælpe mig med det? Jeg vil meget gerne beholde den første div med float:left, som den er nu, da det skal bruges i designet.
Avatar billede Slettet bruger
28. august 2009 - 23:48 #1
Dette kan klares med CSS attributen "position". Du kan læse lidt om den her: http://www.w3schools.com/Css/pr_class_position.asp
Følgende placerer nederste div 65 pixels (størelsen på logoet) over dens oprindelige position, og derved over det andet logo.

.fade div {
position:relative;
top:-65px;
}
Avatar billede dennism Nybegynder
28. august 2009 - 23:52 #2
Tak for dit svar.
Det har jeg også forsøgt mig med, som du kan se på dette link:
http://www.dennismadsen.com/uploads/test2.html

Problemet er bare, at det fungerer rigtig godt i FF men i IE8 kan man stadig se lidt af kanten på det bagerste logo :(
Avatar billede dennism Nybegynder
29. august 2009 - 00:19 #3
Jeg har også lavet en anden test:
http://www.dennismadsen.com/uploads/test3.html

Når du kører musen over logoet viser den det inderste logo. Som du kan se, så skubber den også rundt på contant-boksen. Hvordan kan man undgå det?
Avatar billede ebusiness Nybegynder
29. august 2009 - 00:36 #4
Du bruger position:relative, det er lidt svært at arbejde med, basalt set bliver siden layoutet som om du ikke havde flyttet på elementet, bortset fra at elementet er flyttet. position:absolute synes jeg normalt er lettest at arbejde med, den eneste hage er at browsere af en eller anden grund har problemer med position:absolute hvis ikke det omgivende element er placeret med enten position:absolute eller position:relative, men du kan altid bare smække position:relative ind i det omgivende element, hvilket alene ikke gør andet end at løse problemet.

I øvrigt kan du også bruge positions-CSS direkte på et img element, så din container div omkring andet billede er unødvendig.
Avatar billede olebole Juniormester
29. august 2009 - 01:04 #5
<ole>

Browserne har ingen problemer med position absolute - men ikke alle kodere har forstået, hvordan position virker i CSS  =)

Reglen lyder:
Et absolut positioneret element skal placere sig i forhold til det første omkransende element, som er positioneret.

Findes et sådan ikke, skal det positioneres i forhold til body elementet.


Problemet er, at den DTD, du bruge sætter IE i quirs mode - og så understøttes store dele af CSS standarden ikke. Du skal bruge enten:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

- eller endnu bedre:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Så kan du f.eks. skrive:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>TITLE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
    .fade {
        position:relative;
        float:left;
        margin-left:140px;
        margin-top:40px;
    }

    .fade .logo {
        position:absolute;
        left:0;
        top:0;
    }
</style>
</head>
<body>

<div class="fade">
    <img src="http://www.whitehatsec.com/home/files/logosNEWS/logo_PCworld.jpg" style="width:203px;height:60px;" alt="">
    <img class="logo" src="http://www.eksperten.dk/images/eksperten_logo.gif" style="width:188px;height:65px;" alt="">
</div>

</body>
</html>



/mvh
</bole>
Avatar billede Slettet bruger
29. august 2009 - 01:38 #6
Undskyld at jeg ikke var kommet frem til oventstående noget før, men havde, ligesom så mange andre, ikke rigtigt forstået hvad absolute positionerede i forhold til. Troede faktisk at det altid var i forhold til body elementer, men nu har ole jo vist mig noget andet.
Avatar billede dennism Nybegynder
29. august 2009 - 10:23 #7
Mange tak for dit svar, Ole. Det hjalp rigtig meget!

Eneste problem jeg har nu, er at jeg kan se på W3 validatoren, at man med den doctype f.eks. ikke skal afslutte img-tags med <img />. Det synes jeg er lidt "grimt" da jeg er blevet vant til det - men det skal jeg måske bare prøve at overleve? Eller findes der en XHTML-version af samme doctype, hvor det er lovligt?
Avatar billede olebole Juniormester
29. august 2009 - 11:26 #8
dennism >> Det er ikke spor grimt - og det opfylder til fulde både HTML 4.01 og det mere grundlæggende SGML. XHTML-lukningen strider derimod mod SGML, hvor den betyder noget fuldstændig andet.

Derudover er der formodentlig aldrig en sjæl, der har haft glæde af din XHTML-kode. Det er kun ganske, ganske få promiller af de websider på WWW med en XHTML-DTD, som faktisk kan parses som X(HT)ML. Det er et ekstremt lille fåtal, som har gidet at sætte sig ind i, hvad XHTML i virkeligheden er - hvordan det virker - og hvordan det bruges  =)

Derfor betyder det heller ikke så meget, at W3C har droppet udviklingen af XHTML og igen har fuld fokus på HTML. HTML 4.01 er (som den hele tiden har været) den seneste standard, der er understøttet på WWW. Samtidig har man altså nu endelig indset, at XHTML var et vildspor, som var alt for komplekst i forhold til gennemsnits webkoderens kompetencer og lyst til videnstilegnelse.

Den næste markup standard kommer til at hedde HTML5. Den ventes færdig i 2012, hvorefter planen siger 10 års test og videreudviklings arbejde  =)
Avatar billede olebole Juniormester
29. august 2009 - 11:28 #9
- og ganske kort om W3C og XHTML kontra HTML5:
    http://dengodekode.dk/xhtml
Avatar billede dennism Nybegynder
29. august 2009 - 12:40 #10
Mange tak for dit svar! Meget brugbare. Vil du smide et svar? Jeg var så heldig, at alle de IE-problemer jeg havde med mit site blev løst, da jeg skiftede til den strict doctype.
Avatar billede dennism Nybegynder
29. august 2009 - 16:45 #11
Jeg kan dog se, at jeg også får en fejl, fordi jeg har et <a ... target="_blank">. Det er validatoren ikke tilfreds med. Umiddelbart ser det ud til, at target-attributten ikke findes, kan det passe? Virker mærkeligt, hvis man ikke har mulighed for at vælge at et link skal åbnes i et nyt vindue.

På forhånd tak for hjælpen.
Avatar billede olebole Juniormester
29. august 2009 - 17:32 #12
Det er helt korrekt, at target ikke er del af HTML 4.01. Måden, man gør det på, er:

<a href="http://google.dk" onclick="window.open(this.href,'_blank')">Link</a>
Avatar billede olebole Juniormester
29. august 2009 - 17:32 #13
Ups  =)

<a href="http://google.dk" onclick="window.open(this.href,'_blank');return false">Link</a>
Avatar billede olebole Juniormester
30. august 2009 - 15:34 #14
Tak for points  =)
Avatar billede dennism Nybegynder
31. august 2009 - 09:09 #15
Tak for hjælpen :)
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
IT-JOB

Supporters A/S

It-driftskonsulent i Jylland

Netcompany A/S

Network Engineer

Netcompany A/S

IT Consultant

Forsvarsministeriets Materiel- og Indkøbsstyrelse

BI-koordinator / IT & administrativ support

Netcompany A/S

Test Consultant
Seneste spørgsmål Seneste aktivitet
I går 22:10 Data vises ikke i stifinder på ekstern HDD i Dockingstation (USB)... (som virker med andre HDD'ere) Af nUUK i Andet hardware
I går 12:00 Ekstern harddisk frsvundet Af barth i NAS & storage
10/0115:51 Slet album i Google foto Af gerhardpet i Andet software
09/0108:19 Gendan W10 efter nulstillet computer Af barth i Andet software
08/0112:38 Kopiere fra stifinder Af hkprofil i Office & Kontorpakker
White papers
Flere white papers »