Avatar billede Slettet bruger
12. april 2006 - 22:00 Der er 12 kommentarer og
1 løsning

Border på div - virker kun i IE

Hejsa,

Jeg er ved at designe en hjemmeside, hvor jeg helst vil undgå tabeller til designet.
Derfor forsøger jeg at bruge divs og det fungerer da også nogenlunde. Dog har jeg et mindre problem i firefox og netscape i forhold til explorer.

Siden kan ses på http://afterworld.dk

Problemet er at kanterne (borders) på den div, der hedder "containerContent" ikke bliver vist.
Det er vidst fordi at den slet ikke strækkes med ud sammen med de nestede divs. Dette sker altså kun i IE.

Hvordan kan jeg lave det sådan, at der kommer en ydre kant på siderne?
Avatar billede mclemens Nybegynder
13. april 2006 - 12:43 #1
Indsæt en div ligesom i nedenstående med clear:both i style ;)

...
Dette er en test, Dette er en test, Dette er en test, Dette er en test, Dette er en test,


                </div>
               
<div style="clear:both;">&nbsp;</div>
            </div>
               
            <div id="containerBottom">
...
Avatar billede mclemens Nybegynder
13. april 2006 - 12:49 #2
Den gav noget mellemrum... så denne er måske bedre...
<div style="clear:both;font-size:0px;line-height:0px;">&nbsp;</div>
Avatar billede Slettet bruger
13. april 2006 - 23:05 #3
Hvor skal den div indsættes?
Eller skal den eksisterende div have clear both?
Avatar billede mclemens Nybegynder
13. april 2006 - 23:07 #4
...
Dette er en test, Dette er en test, Dette er en test, Dette er en test, Dette er en test,


                </div>
              ^ ovenstående er dit tekst indhold

<div style="clear:both;">&nbsp;</div>
^ lige her indsættes en ny div
            </div>
^denne div slutter mellem indholdet

...nedenunder kommer dit bund indhold
             
            <div id="containerBottom">
...
Avatar billede mclemens Nybegynder
13. april 2006 - 23:07 #5
skal jeg poste hele filen?
Avatar billede mclemens Nybegynder
13. april 2006 - 23:08 #6
med <div style="clear:both;font-size:0px;line-height:0px;">&nbsp;</div>
istedet for den div jeg kom til at bruge i ovenstående eksempel :P
Avatar billede mclemens Nybegynder
13. april 2006 - 23:13 #7
poster lige det hele...
forkortede dog dit tekst indhold i indlægget...



<!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><title>
    Forsiden
</title><link href="App_Themes/SiteTheme/SiteTheme.css" type="text/css" rel="stylesheet" /></head>
<body>
    <form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjhkZMSblgourLAD5rMIzyPVf0esqYle" />
</div>

        <div id="containerSite">
       
            <div id="containerTop">

                <div id="topLeft"><img src="grafik/apples.jpg" width="160" height="125" alt="" /></div>
                <div id="topRightTop">Dette er et logo<br />Dette er et slogan</div>
                <div id="topRightBottom">

<a href="default.aspx">Coaching</a> |
<a href="default.aspx">Hypnose</a> |
<a href="default.aspx">Etik og standarder</a> | 

<a href="default.aspx">Sundhed</a> |
<a href="default.aspx">Kundeudtalelser</a>
</div>
            </div>
           
            <div id="containerContent">
                <div id="subMenuLeft">Test<br />Test</div>
               
                <div id="content">
                   


Dette er en test, Dette er en test, Dette er en test, Dette er en test, Dette er en test, Dette er en test,
<br />


                </div>
<div style="clear:both;font-size:0px;line-height:0px;">&nbsp;</div>
            </div>
               
            <div id="containerBottom">
                <div id="bottomLeft"></div>
                <div id="bottomRight">

<a href="default.aspx">Coaching</a> |
<a href="default.aspx">Hypnose</a> |
<a href="default.aspx">Etik og standarder</a> | 
<a href="default.aspx">Sundhed</a> |
<a href="default.aspx">Kundeudtalelser</a>
</div>
            </div>

           
        </div>
    </form>
</body>
</html>
Avatar billede mclemens Nybegynder
14. april 2006 - 00:35 #8
hjalp det?
Avatar billede Slettet bruger
14. april 2006 - 10:26 #9
JA!

Tak for hjælpen. Gidder du fortælle mig hvad det lige gik ud på med clear:both :-)
Det er da lidt mærkeligt at en næsten tom div (med undtagelse af et mellemrum) kan sørge for at borders på den ydre div strækkes med hele vejen :-)
Avatar billede mclemens Nybegynder
14. april 2006 - 12:11 #10
Problemet er at den ydre div ikke strækker sig ud så den passer med den indre div når man placerer absolute eller med float - så skal man bruge sådan en clear... den sørger for at kaste div'erne ind i deres omkransende div :)
Avatar billede roenving Novice
15. april 2006 - 13:10 #11
Med et floating element, kan det element jo ikke selvstændigt afsætte plads i højden, da det jo har den egenskab, at der skal kunne være elementer ved siden af (ligesom absolut positionerede også skal placeres uafhængigt af evt. andet indhold !-)

-- på grund af problematikken med beregning af højder, har w3c derfor valgt at fastslå, at den slags elementer ikke skal have indflydelse på omkringliggende elementers højde (hvilket dog ikke helt følges i alle browsere !-)

-- og en af grundene til dette er sandsynligvis, at der i html alerede eksisterer et element, der kan sætte andre elementer ved siden af hinanden og holde en højde på det højeste, nemlig tabel-rækken !o]

-- det clear så gør, er at aflyse floating-egenskaberne for dette og efterfølgende elementer, hvorfor det naturligvis må forekomme under de foranliggende elementer, og også have den funktion, at det strækker omkringliggende elementer !O)
Avatar billede Slettet bruger
15. april 2006 - 22:19 #12
Ok. Tak for svarene.
Jeg forstår det dog ikke 100%.
Jeg forsøgte nemlig selv med clear both (fordi jeg havde set det fra et tidligere indlæg), men det virkede ikke.
Her satte jeg dog værdien på den div, der i mit tilfælde hedder content, men her fik jeg ikke den ønskede effekt med at containerContent strækkede sig med content-div'en.

Men fedt at det virker med en div under content...

:-)
Avatar billede mclemens Nybegynder
15. april 2006 - 22:39 #13
tak for point :)
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