Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien
Toon posts:

[HTML/CSS] Achtergrond loopt niet door

Pagina: 1
Acties:
  • 131 views sinds 30-01-2008
  • Reageer

Verwijderd

Topicstarter
hallo allen

Ik maak sinds kort mijn sites in divs ipv met tabellen. Ben er tot nu toe erg tevreden over, alleen heb ik een probleem waar ik maar niet uit kom.
Als je hier kijkt http://www. zie je in IE7 dat er bijna helemaal geen achtergrond getoond word, en in ff loopt hij niet helemaal door aan de onderkant. Met de firebug plug-in in ff heb ik gezien dat de body div daar gewoon stopt, misschien ligt het daaraan. Zou iemand er naar kunnen kijken?

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html lang="nl" xml:lang="nl" xmlns="http://www.w3.org/1999/xhtml">
    <meta name="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <meta name="Content-Style-Type" content="text/css" />
    <meta name="Content-Script-Type" content="text/javascript" />
    <meta name="generator" content="Eclipse" />

<!--


-->

    <title>Mijn site</title>

    <link rel="icon" href="/stage/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/stage/favicon.ico" type="image/x-icon" />
    <link rel="home" href="/" title="Homepage" />
    <link type="text/css" rel="stylesheet" media="screen, tv, projection" href="/stage/common.css" />

</head>

<body>

    <div id="body">&nbsp;
        <div id="container">

            <div id="header">&nbsp;
                <div id="headervisual">&nbsp;
                </div>
            </div>
            <div id="content"><h1>Weblog Stage</h1>
            <div id="textboxje"><p class="textboxje">Mocht je nu meer info willen bezoek dan: <a href="http://www.mijnsite.nl" class="textboxje">mijnsite.nl</a></p></div>
                <div id="navbox">
                    <ul>
                        <li><a id="nav1" href="http://link1" target="blank">link 1</a></li>
                        <li><a id="nav2" href="http://link2" target="blank">link 2</a></li>
                        <li><a id="nav3" href="http://link3" target="blank">link 3</a></li>
                        <li><a id="nav4" href="http://link4" target="blank">link 4</a></li>
                        <li><a id="nav5" href="http://link5" target="blank">link 5</a></li>
                    </ul>
                    <div id="banners">
                        <a href="http://www.mijnsite.nl" target="_blank">
                            <img src="/stage/plaatje.JPG" alt="e-grip" border="0"/>
                        </a><br/>
                        <a href="http://www.mijnsite.nl" target="_blank">
                            <img src="/stage/plaatje.JPG" alt="gripnet" border="0"/>
                        </a>
                    </div>
                </div>
                <div id="newsbox">
                    <h2>2e week ten einde (14-9-2007)</h2>
                    <div id="lijntje">&nbsp;</div>
                    <p class="content">Nulla ullamcorper nunc ut leo. Vivamus suscipit. Morbi feugiat orci vel nibh. Pellentesque vitae nibh. Donec porttitor arcu viverra lectus. Donec dignissim placerat orci. Pellentesque et velit. Nam in lorem et massa lobortis lobortis. Vestibulum nec ligula. Proin sapien nisi, ultrices sit amet, faucibus vel, egestas vitae, dui. Curabitur ut augue. Aenean ut est. Sed tortor velit, dignissim at, vestibulum quis, condimentum eget, elit. Aenean risus magna, interdum fringilla, rhoncus nec, pulvinar ac, eros. Nam nulla mauris, ornare eget, aliquam vitae, viverra at, felis. Suspendisse ut enim suscipit orci euismod tincidunt. Morbi semper, lacus at fermentum sagittis, eros lorem laoreet nisl, sed imperdiet eros nunc vitae ante. Donec in ipsum id risus rhoncus laoreet.<br/></p>
                </div>
                <div id="newsbox">
                    <h2>Einde week 1 (7-9-2007)</h2>
                    <div id="lijntje">&nbsp;</div>
                    <p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse varius, elit eget tempor sollicitudin, quam dui facilisis tortor, et facilisis magna enim id mi. Integer ornare. Phasellus risus felis, euismod sed, fermentum sed, malesuada quis, lorem. Morbi libero urna, vulputate id, vulputate vel, faucibus sit amet, nisi. Cras eget pede sit amet ipsum molestie scelerisque. Etiam aliquet, magna at varius vestibulum, est dolor gravida turpis, vitae pellentesque urna ante cursus massa. Nam dapibus rutrum nisi. Cras justo ipsum, porttitor quis, gravida nec, malesuada et, sem. Cras lectus. Sed a ante eu quam hendrerit imperdiet. Donec facilisis massa eu erat. Fusce felis ligula, cursus quis, molestie ac, sodales vitae, enim. Cras consequat mattis arcu. Sed eget neque ut lacus posuere dictum. Sed auctor, risus eu tincidunt dictum, pede est dignissim libero, id porttitor augue lorem ac velit. Etiam fermentum venenatis velit.Nulla ullamcorper nunc ut leo. Vivamus suscipit. Morbi feugiat orci vel nibh. Pellentesque vitae nibh. Donec porttitor arcu viverra lectus. Donec dignissim placerat orci. Pellentesque et velit. Nam in lorem et massa lobortis lobortis. Vestibulum nec ligula. Proin sapien nisi, ultrices sit amet, faucibus vel, egestas vitae, dui. Curabitur ut augue. Aenean ut est. Sed tortor velit, dignissim at, vestibulum quis, condimentum eget, elit. Aenean risus magna, interdum fringilla, rhoncus nec, pulvinar ac, eros. Nam nulla mauris, ornare eget, aliquam vitae, viverra at, felis. Suspendisse ut enim suscipit orci euismod tincidunt. Morbi semper, lacus at fermentum sagittis, eros lorem laoreet nisl, sed imperdiet eros nunc vitae ante. Donec in ipsum id risus rhoncus laoreet. </p>
                </div>
                <div id="newsbox">
                    <h2>Einde week 1 (7-9-2007)</h2>
                    <div id="lijntje">&nbsp;</div>
                    <p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse varius, elit eget tempor sollicitudin, quam dui facilisis tortor, et facilisis magna enim id mi. Integer ornare. Phasellus risus felis, euismod sed, fermentum sed, malesuada quis, lorem. Morbi libero urna, vulputate id, vulputate vel, faucibus sit amet, nisi. Cras eget pede sit amet ipsum molestie scelerisque. Etiam aliquet, magna at varius vestibulum, est dolor gravida turpis, vitae pellentesque urna ante cursus massa. Nam dapibus rutrum nisi. Cras justo ipsum, porttitor quis, gravida nec, malesuada et, sem. Cras lectus. Sed a ante eu quam hendrerit imperdiet. Donec facilisis massa eu erat. Fusce felis ligula, cursus quis, molestie ac, sodales vitae, enim. Cras consequat mattis arcu. Sed eget neque ut lacus posuere dictum. Sed auctor, risus eu tincidunt dictum, pede est dignissim libero, id porttitor augue lorem ac velit. Etiam fermentum venenatis velit. Nulla ullamcorper nunc ut leo. Vivamus suscipit. Morbi feugiat orci vel nibh. Pellentesque vitae nibh. Donec porttitor arcu viverra lectus. Donec dignissim placerat orci. Pellentesque et velit. Nam in lorem et massa lobortis lobortis. Vestibulum nec ligula. Proin sapien nisi, ultrices sit amet, faucibus vel, egestas vitae, dui. Curabitur ut augue. Aenean ut est. Sed tortor velit, dignissim at, vestibulum quis, condimentum eget, elit. Aenean risus magna, interdum fringilla, rhoncus nec, pulvinar ac, eros. Nam nulla mauris, ornare eget, aliquam vitae, viverra at, felis. Suspendisse ut enim suscipit orci euismod tincidunt. Morbi semper, lacus at fermentum sagittis, eros lorem laoreet nisl, sed imperdiet eros nunc vitae ante. Donec in ipsum id risus rhoncus laoreet. </p>
                </div>
                <div id="footer">
                    <p class="footer">&copy; van mij 2007</p>
                </div>
            </div>

        </div>
    </div>
</body>
</html>


en bijbehorend css bestand

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/* CSS voor mijnsite.nl */

/* headers */

h1, h2, h3, h4, h5, h6 { margin: 0 0 0 0; padding-left: 15px; font-family: Verdana, Helvetica, sans-serif; color: #000000; }
h1 { font-size: 1.6em; padding-bottom: 14px; }
h2 { font-size: 1.1em; color: #E79E00; text-decoration: underline; padding-top: 8px;}
h3 { font-size: 1em; }

a, a:link { padding: 0 0 1px 0; color: #0000FF; text-decoration: none; }
a:visited { color: #0000FF; }
a:active { color: #0000FF; }
a:hover { color: #0000FF; }

p.content { font-family: Verdana, Helvetica, sans-serif; color: #000000; font-size: .8em; padding-left: 15px; padding-bottom: 7px; line-height: 12pt;}
p.footer { font-family: Verdana, Helvetica, sans-serif; color: #737573; font-size: .7em; text-align: center; padding-left: 15px;}
p.header { font-family: Verdana, Helvetica, sans-serif; font-size: 2em; text-align: left; padding-left: 5px;}
p.textboxje { font-family: Verdana, Helvetica, sans-serif; color: #E79E00; font-size: .7em; text-align: right;}

#body { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; background: url(/stage/bg3.gif); }
    #container { position: absolute; top: 0; left: 40px; width: 773px; background-color: #ffffff; border-left: 5px solid #404040; border-right: 5px solid #404040; }

    #header { top: 0; width: 62%; height:130px; }
        #headervisual { position: absolute; top: 0px; left: 11px; width: 750px; height: 122px; background: url(/stage/header1.jpg) top no-repeat transparent; }
        #textboxje { position: absolute; top: 115px; left: 260px; height: 15px; width: 500px;}
        #content { top: 0px; left: 20px; height: 100%; }
            #navbox { position: absolute; top: 214px; left: 589px; width: 170px; height: 370px; background-color: #ffffbd; border: 1px solid #404040; }
                #banners { position: relative; top: 40px; left: 4px; width: 170px; height: 150px; background-color: transparent; border: 0;}
                #navbox ul { list-style-type: none; margin: 0; padding-bottom: 2px; margin: 0em; padding: 0.3em}
                #navbox li { height: 20px; width: 140px; margin: .1em; padding: 5px 5px 5px 0px; border-bottom: 1px solid #E79E00;}
                    #navbox li a { display: block; width: 100%; height: 100%; font-family: Verdana, Helvetica, sans-serif; color: #E79E00; font-size: 0.8em; text-align: left; padding-bottom: 0px; padding-left: 7px; background-color: transparent; }
                         #nav1:hover { font-family: Verdana, Helvetica, sans-serif; color: #FFFFBD; font-size: 0.8em; text-align: left; padding-left: 6px; background-color: transparent;  background-image: url(/stage/mouseover.JPG); background-repeat: no-repeat; }
                         #nav2:hover { font-family: Verdana, Helvetica, sans-serif; color: #FFFFBD; font-size: 0.8em; text-align: left; padding-left: 6px; background-color: transparent;  background-image: url(/stage/mouseover.JPG); background-repeat: no-repeat; }
                         #nav3:hover { font-family: Verdana, Helvetica, sans-serif; color: #FFFFBD; font-size: 0.8em; text-align: left; padding-left: 6px; background-color: transparent;  background-image: url(/stage/mouseover.JPG); background-repeat: no-repeat; }
                         #nav4:hover { font-family: Verdana, Helvetica, sans-serif; color: #FFFFBD; font-size: 0.8em; text-align: left; padding-left: 6px; background-color: transparent;  background-image: url(/stage/mouseover.JPG); background-repeat: no-repeat; }
                         #nav5:hover { font-family: Verdana, Helvetica, sans-serif; color: #FFFFBD; font-size: 0.8em; text-align: left; padding-left: 6px; background-color: transparent;  background-image: url(/stage/mouseover.JPG); background-repeat: no-repeat; }
                        #newsbox { width: 550px; border: 1px; }
                #lijntje { height: 25px; padding-left: 15px; background: url(/stage/dotted.JPG) center left no-repeat transparent;}
            #footer { width: 100%; height: 30px; }

[ Voor 3% gewijzigd door Verwijderd op 17-09-2007 14:09 ]


Verwijderd

Misschien kun je de achtergrond uit het body element in de html halen, en hem via css op de achtergrond van de html te zetten. Waarom zet je de achtergrond niet fixed? is misschien ook wel aardig voor dit ontwerp :)

(Persoonlijke noot: ik zou een div nooit een id body meegeven, verwart alleen maar met het html element. Container ofzo vind ik persoonlijk netter.)

[ Voor 26% gewijzigd door Verwijderd op 17-09-2007 12:34 ]


  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 23:23
Je hebt een nogal euhh.. aparte stijl. Waarom heb je praktisch alles absoluut gepositioneerd?
Dat is in elk geval waar je probleem vandaan komt. #body heeft nu in IE geen hoogte omdat top: en bottom: niet goed ondersteund worden. In andere browsers wel, en daarom is #body daar zo hoog als de viewport.

Een id hoort trouwens ook uniek te zijn

Regeren is vooruitschuiven


Verwijderd

Topicstarter
T-MOB schreef op maandag 17 september 2007 @ 12:35:
Je hebt een nogal euhh.. aparte stijl. Waarom heb je praktisch alles absoluut gepositioneerd?
Alle tips zijn welkom, wat zou ik beter anders kunnen doen? Zo kreeg ik de boel het beste op z'n plaats, en omdat mijn site links van het scherm staat leek me het geen probleem want dan is hij alsnog in alle resoluties goed te bekijken.
T-MOB schreef op maandag 17 september 2007 @ 12:35:


Een id hoort trouwens ook uniek te zijn
Ja weet ik, dat zijn nog van die slordigheden die ik weg moet werken. Ik wil eerst dit oplossen voordat ik vader ga.

Verwijderd

Topicstarter
Het is gelukt, de achtergrond staat nu gewoon in de body tag en die hele body div heb ik gewoon verwijderd en voila..
Bedankt voor de hulp en verdere op of aanmerkingen zijn welkom!

  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 23:23
Verwijderd schreef op maandag 17 september 2007 @ 13:36:
Alle tips zijn welkom, wat zou ik beter anders kunnen doen? Zo kreeg ik de boel het beste op z'n plaats, en omdat mijn site links van het scherm staat leek me het geen probleem want dan is hij alsnog in alle resoluties goed te bekijken.
Browsers beginnen van zichzelf al linksbovenin te renderen. Je kunt gewoon met een enkele container af. Even uit de losse pols zou ik er zoites mee doen
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
 
<style type="text/css">
 html, body { height: 100%; margin: 0; padding: 0; min-height: 100%; }
 body { background: url("http://www.timvandermeel.nl/stage/bg3.gif"); }
 #container { margin: 0; width: 785px; background: white; border-right: 4px solid #000; border-left: 4px solid #000; min-height: 100%; margin-left: 40px; position: relative; }
 #header { margin: 0 10px; height: 122px; background: url("http://www.timvandermeel.nl/stage/header1.jpg"); display: block; }
 #header span { display: none; }

 #content { margin: 0 250px 10px 10px }

 #navigation { width: 230px; position: absolute; top: 132px; right: 10px; background: lime; }
</style>
</head>

<body>
 <div id="container">
  <strong id="header"><span>TimVanderMeel.nl</span></strong>
  
  <div id="content">
   <h1>Weblog Stage</h1>
   <dl id="overview">
    <dt>Item 1</dt>
    <dd>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.
    <dt>Item 2</dt>
    <dd>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.
    <dt>Item 3</dt>
    <dd>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.
  </dl>
 </div>
 
 <div id="navigation">
 <ul>
  <li>nav
  <li>nav
  <li>nav
 </ul>
 </div>
</div>

</body>
</html>

Regeren is vooruitschuiven


Verwijderd

Topicstarter
T-MOB schreef op maandag 17 september 2007 @ 14:21:
Browsers beginnen van zichzelf al linksbovenin te renderen. Je kunt gewoon met een enkele container af. Even uit de losse pols zou ik er zoites mee doen
Ja die #body had ik er inderdaad al uitgehaald. Ik grijp al snel naar position: absolute; wanneer ik iets niet lekker op de gewenste plaats krijg. Kan ook anders dus.. ik zal er op letten, bedankt
Pagina: 1