Notifikationer

Markér alle som læst Log ud

viggosmor Nybegynder

13. september 2008 - 10:11 Der er 37 kommentarer og
1 løsning

float i firefox

Hej

Har siddet og lavet følgende side:

http://soederberg-webdesign.dk/astrid2/aktuelt.html

Der fungerer float ikke på elemnterne i venstre side, altså bøgerne og teksten til bøgerne..

Min xhtml kode, ser således ud:

<h1>Aktuelt</h1>
<p>I 2008 er jeg debuteret som forfatter med en krimi til de 12-15-årige. <strong>”Sos: Under jorden”</strong> er udkommet på forlaget Carlsen.</p>
<div id="bog1"><img src="images/lille/sos.jpg" alt="Sos: Under jorden - af Astrid Heise-Fjeldgren" /></div>
<div id="bog1tekst"><p>I weekendavisen skrev Damian Arguimbau: <em>"Det er en ret spændende historie med gode personportrætter, der virker godt inspireret af amerikanske tv-serier, når frømænd pludselig dukker op for at forpurre hemmelige våbentransporter. Men det hele foregår i et genkendeligt København og vil fange selv de mest forhærdede læsetrætte elever i skolens ældste klasser."</em> (Weekendavisen 22.8.08)</p></div>

<div id="clear">
<div id="bog2"><img src="images/lille/tegn.jpg" alt="Tegn i sandet - af Astrid Heise-Fjeldgren" /></div>
<div id="bog2tekst"><p>Jeg har ogsåskrevet novellen <strong>”To kugler med det hele”</strong> til samlingen ’Tegn i sandet’ fra Politikens forlag.</p>
<p>Om novellen skrev Steffen Larsen i Politiken:</p>
<p><em>”Alle forfattere er af hunkøn, og der er kun én enkelt historie med en dreng i hovedrollen. Det er til gengæld en af de bedste. Astrid Heise-Fjeldgren har fat i de små ting, som kan sige det hele.”</em></p>
<p><strong>(Politiken 7. juni 2008)</strong></p></div>
</div>
</div>

Og min css kode:

#bog1 {
float: left;
padding-right: 30px;

}

#bog1tekst {
float: right;
padding-right: 25px;
}

#bog2 {
float: left;
padding-right: 30px;
padding-bottom: 40px;
}

#bog2tekst {
float: right;
}

#clear{
clear: left;
padding-top: 10px;
padding-right: 25px;
}

Er der noget jeg gør galt?

Samtidig vil jeg godt vide, hvordan jeg får selve indholdet ned på siden i firefox... på nuværende tidspunkt står indholdet helt oppe ved menuen...

Takker på forhånd... :)

Synes godt om

roenving Novice

13. september 2008 - 10:21 #1

Skal du ikke bare fjerne float:right ?-)

-- og så indsætte en clear-div _imellem_ elementerne ...

.clearDiv{clear:both;font-size:0;line-height:0;}

<div class="clearDiv"> </div>

Synes godt om

viggosmor Nybegynder

13. september 2008 - 10:29 #2

Mellem hvilke elementer?

Er ikke heeelt med på hvad du mener...

Jeg skal altså ikke have float: right på div id="bog1" og bog2?

Synes godt om

roenving Novice

13. september 2008 - 11:05 #3

Du skal ikke have float på elementer, der skal være bagved floatede elementer, se dette eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<style type="text/css">
html,body{margin:0;padding:0;border:0;}
h1{padding:0;margin:30px 0 10px 0;}
h5{font-weight:400; font-size:medium;}
#site{width:960px;margin:0 auto;}
#bannermenu{height:120px;background-color:#c0baff;}
#content{}
.bogBillede{float:left;width:200px;height:300px;background-color:red;margin-right:25px;}
.bogTekst{margin:25px;padding:25px;}
.clearDiv{clear:both;font-size:0;line-height:0;}
.fed{font-weight:900;}
.kursiv{font-style:italic;}
</style>
</head>
<body>
<div id="site">
<div id="bannermenu">

</div>
<div id="content">
<h1>Aktuelt</h1>
<h5>I 2008 er jeg debuteret som forfatter med en krimi til de 12-15-årige. <span class="fed">"Sos: Under jorden"</span> er udkommet på forlaget Carlsen.</h5>
<div class="bogBillede"> </div>
<div class="bogTekst">
I weekendavisen skrev Damian Arguimbau: <span class="kursiv">"Det er en ret spændende historie med gode personportrætter, der virker godt inspireret af amerikanske tv-serier, når frømænd pludselig dukker op for at forpurre hemmelige våbentransporter. Men det hele foregår i et genkendeligt København og vil fange selv de mest forhærdede læsetrætte elever i skolens ældste klasser."</span> (Weekendavisen 22.8.08)
</div>
<div class="clearDiv"> </div>
<h5>Jeg har også skrevet novellen <span class="fed">"To kugler med det hele"</span> til samlingen <span class="kursiv">'Tegn i sandet'</span> fra Politikens forlag.</h5>
<div class="bogBillede"> </div>
<div class="bogTekst">
Om novellen skrev Steffen Larsen i Politiken: <span class="kursiv">"Alle forfattere er af hunkøn, og der er kun én enkelt historie med en dreng i hovedrollen. Det er til gengæld en af de bedste. Astrid Heise-Fjeldgren har fat i de små ting, som kan sige det hele."</span> (Politiken 7. juni 2008)
</div>
<div class="clearDiv"> </div>
</div>
</div>
</body>
</html>

-- og det er ikke tilfældigt, at jeg har ændret doctype og ikke bruger html3.2-style formatterings-elementer ...

-- xhtml1 transitional _må_ ikke tolkes som andet end html4.01, men må indeholde elementer fra html3.2, så det er bedre at øve sig (på en kommende virkende xhtml) med html4.01 strict end med xhtml1 !-)

-- ovenstående måde at kode på kræver kun ganske små ændringer før det er gyldigt xhtml2, mens din markup på mange måder kan give problemer, bl.a. er brugen af <strong> og <em> absolut deprecated siden 1998 !o]

Synes godt om

viggosmor Nybegynder

13. september 2008 - 12:34 #4

skal der ikke være noget i <div class="clearDiv"> </div>?

Kan ikke helt få det til at fungere...

Har lavet en test side her:

http://soederberg-webdesign.dk/astrid2/aktuelt2.html

Har ikke rettet fed og kursiv endnu...

Synes godt om

viggosmor Nybegynder

13. september 2008 - 12:42 #5

Hele min kode er:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Ipamki - Forfatter Astrid Heise-Fjeldgren - Aktuelt</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="Ikke-Pasta-Med-Kødsovs-Igen!" />
<meta name="keywords" content="Astrid Heise-Fjeldgren, forfatter, Ipamki" />

<meta name="author" content="http://soederberg-webdesign.dk" />

<style type="text/css" media="all">
@import "ipamki.css";
</style>
</head>

<body>
<div id="content">

<div id="banner1">
<img src="images/bannerStreg.jpg" alt="Ipamki" />
</div>
<div id="banner2">
<img src="images/banner8.jpg" alt="Astrid Heise-Fjeldgren" />
</div>
<ul id="menu">
<li><a href="index.html" target="_self">Forside</a></li>
<li><a href="starten.html" target="_self">Starten</a></li>
<li><a href="firmaet.html" target="_self">Bag firmaet</a></li>
<li><a href="aktuelt.html" target="_self">Aktuelt</a></li>
<li><a href="projekter.html" target="_self">Projekter</a></li>
<li><a href="links.html" target="_self">Links</a></li>
<li><a href="#" target="_self">Blog</a></li>
<li><a href="kontakt.php" target="_self">Kontakt</a></li>
</ul>

<div id="sidebar2">
<center><img src="images/lille/4.jpg" alt="Skrivemaskine knapper" /></center>
<br/>
<center><img src="images/lille/as10.jpg" alt="Projekt af Astrid Heise-Fjeldgren" /></center>

</div>

<div id="indhold">
<h1>Aktuelt</h1>
<p>I 2008 er jeg debuteret som forfatter med en krimi til de 12-15-årige. <strong>”Sos: Under jorden”</strong> er udkommet på forlaget Carlsen.</p>
<div id="bog1"><img src="images/lille/sos.jpg" alt="Sos: Under jorden - af Astrid Heise-Fjeldgren" /></div>
<div id="bog1tekst"><p>I weekendavisen skrev Damian Arguimbau: <em>"Det er en ret spændende historie med gode personportrætter, der virker godt inspireret af amerikanske tv-serier, når frømænd pludselig dukker op for at forpurre hemmelige våbentransporter. Men det hele foregår i et genkendeligt København og vil fange selv de mest forhærdede læsetrætte elever i skolens ældste klasser."</em> (Weekendavisen 22.8.08)</p></div>

<div id="clear">
<div id="bog2"><img src="images/lille/tegn.jpg" alt="Tegn i sandet - af Astrid Heise-Fjeldgren" /></div>
<div id="bog2tekst"><p>Jeg har ogsåskrevet novellen <strong>”To kugler med det hele”</strong> til samlingen ’Tegn i sandet’ fra Politikens forlag.</p>
<p>Om novellen skrev Steffen Larsen i Politiken:</p>
<p><em>”Alle forfattere er af hunkøn, og der er kun én enkelt historie med en dreng i hovedrollen. Det er til gengæld en af de bedste. Astrid Heise-Fjeldgren har fat i de små ting, som kan sige det hele.”</em></p>
<p><strong>(Politiken 7. juni 2008)</strong></p></div>
</div>
</div>

<div id="footer">
<p align="center">Design af <a href="http://soederberg-webdesign.dk">soederberg-webdesign</a> Copyright © Astrid Heise-Fjeldgren</p>
</div>
</div>
</body>
</html>

Synes godt om

viggosmor Nybegynder

13. september 2008 - 12:43 #6

Sorry det var den forkerte kode, den rigtige er her:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Ipamki - Forfatter Astrid Heise-Fjeldgren - Aktuelt</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="Ikke-Pasta-Med-Kødsovs-Igen!" />
<meta name="keywords" content="Astrid Heise-Fjeldgren, forfatter, Ipamki" />

<meta name="author" content="http://soederberg-webdesign.dk" />

<style type="text/css" media="all">
@import "ipamki.css";
</style>
</head>

<body>
<div id="content">

<div id="banner1">
<img src="images/bannerStreg.jpg" alt="Ipamki" />
</div>
<div id="banner2">
<img src="images/banner8.jpg" alt="Astrid Heise-Fjeldgren" />
</div>
<ul id="menu">
<li><a href="index.html" target="_self">Forside</a></li>
<li><a href="starten.html" target="_self">Starten</a></li>
<li><a href="firmaet.html" target="_self">Bag firmaet</a></li>
<li><a href="aktuelt.html" target="_self">Aktuelt</a></li>
<li><a href="projekter.html" target="_self">Projekter</a></li>
<li><a href="links.html" target="_self">Links</a></li>
<li><a href="#" target="_self">Blog</a></li>
<li><a href="kontakt.php" target="_self">Kontakt</a></li>
</ul>

<div id="sidebar2">
<center><img src="images/lille/4.jpg" alt="Skrivemaskine knapper" /></center>
<br/>
<center><img src="images/lille/as10.jpg" alt="Projekt af Astrid Heise-Fjeldgren" /></center>

</div>

<div id="indhold">
<h1>Aktuelt</h1>
<p>I 2008 er jeg debuteret som forfatter med en krimi til de 12-15-årige. <strong>”Sos: Under jorden”</strong> er udkommet på forlaget Carlsen.</p>
<div class="bogBillede"><img src="images/lille/sos.jpg" alt="Sos: Under jorden - af Astrid Heise-Fjeldgren" /></div>
<div class="bogTekst"><p>I weekendavisen skrev Damian Arguimbau: <em>"Det er en ret spændende historie med gode personportrætter, der virker godt inspireret af amerikanske tv-serier, når frømænd pludselig dukker op for at forpurre hemmelige våbentransporter. Men det hele foregår i et genkendeligt København og vil fange selv de mest forhærdede læsetrætte elever i skolens ældste klasser."</em> (Weekendavisen 22.8.08)</p></div>
<div class="clearDiv"> </div>
<div class="bogBillede"><img src="images/lille/tegn.jpg" alt="Tegn i sandet - af Astrid Heise-Fjeldgren" /></div>
<div class="bogTekst"><p>Jeg har også skrevet novellen <strong>”To kugler med det hele”</strong> til samlingen ’Tegn i sandet’ fra Politikens forlag.</p>
<p>Om novellen skrev Steffen Larsen i Politiken:</p>
<p><em>”Alle forfattere er af hunkøn, og der er kun én enkelt historie med en dreng i hovedrollen. Det er til gengæld en af de bedste. Astrid Heise-Fjeldgren har fat i de små ting, som kan sige det hele.”</em></p>
<p><strong>(Politiken 7. juni 2008)</strong></p></div>
</div>
</div>
<div class="clearDiv"> </div>
</div>

<div id="footer">
<p align="center">Design af <a href="http://soederberg-webdesign.dk">soederberg-webdesign</a> Copyright © Astrid Heise-Fjeldgren</p>
</div>
</div>
</body>
</html>

Synes godt om

roenving Novice

13. september 2008 - 12:45 #7

Ja, husk bare at indsætte   alle steder, da en del browsere ikke renderer tomme elementer uden udbredelse, og så mistes effekten (og jeg går ud fra, at du har indsat det relevante i dit stylesheet !-)

Synes godt om

roenving Novice

13. september 2008 - 12:46 #8

-- og ovenstående var til 12:34:40

Synes godt om

viggosmor Nybegynder

13. september 2008 - 12:48 #9

Ja, det ser sådan her ud:

.clearDiv{clear:both;font-size:0;line-height:0;}

.bogBillede{float:left;width:200px;height:300px;background-color:white;margin-right:25px;}
.bogTekst{margin:25px;padding:25px;}

Synes godt om

roenving Novice

13. september 2008 - 12:48 #10

-- betænk dog også mine kommentarer om doctype, det er dumt at lære alt for meget, man skal aflære senere !-)

-- og jeg håber i øvrigt, at du har bemærket, at jeg har brugt class en hel del, da det i meget højere grad så læger sig op af W3Cs intentioner ...

Synes godt om

viggosmor Nybegynder

13. september 2008 - 12:54 #11

Ja, du er ikke den første der siger det med doctype....

Det er bare svært at gå bort fra det når det er det jeg startede ud med at lære på min udd...

Synes godt om

viggosmor Nybegynder

13. september 2008 - 12:57 #12

Hvorfor er der sådan et stort mellemrum der hvor clearDiv er?
Og billederne vises ikke i sin fulde størrelse?

Synes godt om

w13 Novice

13. september 2008 - 13:30 #13

Hvis clearDiv giver et stort mellemrum, så prøv at sætte height:1px; på den.

Synes godt om

roenving Novice

13. september 2008 - 13:37 #14

-- den med billederne kan jeg ikke gennemskue, men clear-diven clearer jo også for det indhold du har til højre, det kan der laves to løsninger på:

-- At der laves to forskellige elementer, hvor det ene indeholder dit indhold til højre

-- eller kun at cleare left med clearDiv'en ...

Synes godt om

zips Juniormester

13. september 2008 - 13:43 #15

Hvis du sletter float: right; på #bog1tekst og #bog2tekst falder den så ikke ind på plads?

Synes godt om

viggosmor Nybegynder

13. september 2008 - 13:49 #16

Så har jeg sat height 1px; på clearDiv, og kun clearet left...

Det hjalp i firefox men ser stadig forkert ud i ie7...billederne vises ikke korrekt...

Synes godt om

viggosmor Nybegynder

13. september 2008 - 13:52 #17

Zips- BINGO!!

Skulle der ikke andet til hehe....

Det kan ses på:

http://soederberg-webdesign.dk/astrid2/aktuelt.html

Synes godt om

viggosmor Nybegynder

13. september 2008 - 13:54 #18

Hov nej det funker stadig ikke i ie...

Ihhh.... altså troede det lige....

Synes godt om

roenving Novice

13. september 2008 - 13:55 #19

Jeg gik da ud fra, at du havde taget min allerførste kommentar alvorligt, men sådan er det jo engang imellem, man fokuserer på at tilpasse/tilføje, og glemmer rent at rense ud i koden !-)

Synes godt om

viggosmor Nybegynder

13. september 2008 - 14:08 #20

Hmm, kunne ikke helt forstå hvad du mente i starten... :)

Men nu ser det oki ud i firefox, og det har rykket sig sammen i ie men billederne vil stadig ikke vises...

Synes godt om

zips Juniormester

13. september 2008 - 14:26 #21

Hvad hvis du sætter height på din bog1 og bog2
Din side ser nu rigtigt ud i IE6, FF og Chrome men ikke i IE7 :(

Synes godt om

viggosmor Nybegynder

13. september 2008 - 14:28 #22

Det har jeg gjort... det er meget mystiskt...

Synes godt om

roenving Novice

13. september 2008 - 14:36 #23

Har du gjort det i stylesheetet ?-)

-- jeg oplevede engang, at den udviklingsserver, vi brugte cachede alle den slags filer ret lang tid, så indtil administratoren fik fundet knappen så måtte vi arbejde med inline stylesheets og scripts, mens vi udviklede !-)

Synes godt om

viggosmor Nybegynder

13. september 2008 - 14:42 #24

Ja min css ser således ud på bog 1 og 2:

#bog1 {
float: left;
padding-right: 30px;
height: 280px;
}

#bog2 {
float: left;
padding-right: 30px;
padding-bottom: 40px;
height: 280px;

}

Men det er så i det externe stylesheet, mener du måske at det skal ligge internt?

Synes godt om

viggosmor Nybegynder

13. september 2008 - 14:58 #25

Har nu forsøgt med height: 100%;
Men ligemeget hjælper det...

Det er da pokkers...

Synes godt om

zips Juniormester

13. september 2008 - 15:46 #26

Så er hunden luftet og jeg fik tænkt lidt over dit problem :)

Hvis jeg sletter dit <em> i teksten bog1tekst vises dit billede helt, men hvorfor gør den det?

Synes godt om

viggosmor Nybegynder

13. september 2008 - 15:54 #27

Ja, det var da mystiskt, har nu slettet em også og nu ser de fine ud...!

Jamen, det behøver jo heller ikke være i kursiv, så jeg takker mange gange...

Men underligt er det da... :)

Synes godt om

viggosmor Nybegynder

13. september 2008 - 16:01 #28

Vil I dele i porten, hvad angår point?

Synes godt om

roenving Novice

13. september 2008 - 16:03 #29

-- gør den det også, hvis du bruger den 'rigtige' metode med spans ?-)

Synes godt om

viggosmor Nybegynder

13. september 2008 - 16:06 #30

Det har jeg ikke testet he he, er ikke så meget inde i spans, men vil da lige søge på det, og se om det har betydning....

Synes godt om

zips Juniormester

13. september 2008 - 16:06 #31

Point er roenvings, jeg springer over da det jo er ham som har gjort det meste arbejde her :)

Synes godt om

roenving Novice

13. september 2008 - 16:12 #32

-- som jeg viste det i mit eksempel:

.kursiv{font-style:italic;}

<div class="bogTekst">
I weekendavisen skrev Damian Arguimbau: <span class="kursiv">"Det er en ret spændende historie med gode personportrætter, der virker godt inspireret af amerikanske tv-serier, når frømænd pludselig dukker op for at forpurre hemmelige våbentransporter. Men det hele foregår i et genkendeligt København og vil fange selv de mest forhærdede læsetrætte elever i skolens ældste klasser."</span> (Weekendavisen 22.8.08)
</div>

-- og jeg har absolut ikke noget imod at dele !-)

Velbekomme '-)

Synes godt om

viggosmor Nybegynder

13. september 2008 - 16:20 #33

Oki, helt fint...

roenving, det gjorde det også selvom jeg brugte span...

Synes godt om

viggosmor Nybegynder

13. september 2008 - 16:25 #34

Nu har jeg gjort som du skrev og det er det samme....

DET er da underligt hehe....

Synes godt om

zips Juniormester

13. september 2008 - 16:38 #35

Hvis du sætter margin-left:220px; på din bog1tekst og bog2tekst så virker din kursiv :)

Synes godt om

viggosmor Nybegynder

13. september 2008 - 16:46 #36

Perfekt!

Nu funker det hele som det skal...

Takker Zips, jeg opretter altså lige et spørgsmål med point til dig også, du skal ikke snydes...

Jeg er meget taknemmelig for jeres hjælp...

Synes godt om

roenving Novice

13. september 2008 - 22:33 #37

-- hrm, jeg har ikke testet, men jeg kommer til at tænke på den gamle dobbelt-margin-bug i IE ...

-- men i hvert fald: Tak for point ;~}

Synes godt om

roenving Novice

13. september 2008 - 22:57 #38

-- og så er det en god ide at lægge et link til en point-overførsel, så den kan findes og det er nemt at eliminere grimme mistanker om ulovlig pointoverførsel: http://www.eksperten.dk/spm/845259

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS