Probleem met doorlopen achtergrond * - Softwareontwikkeling

zaterdag 5 december 2009 10:24

Acties:

0 Henk 'm!

Topicstarter

Ik ben (nu) momenteel bezig het het vernieuwen en HTML/CSS Valid maken van mijn site. Alleen wil het nog net niet lukken.

Als ik het volgende bovenaan mijn index.php zet:

code:

<!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" />

Dan zit m'n achtergrond (onderaan) opeen een heel stuk naarboven.
Als ik het bovenstaande verander naar bijv:

code:

<link rel="stylesheet" href="includes/styles.css" type="text/css" /><!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" />

Dan is er opeens niks aan de hand en lopen de achtergronden (boven/onder) gewoon mooi door. Maar dan is de pagina niet meer HTML Valide

Dit is het css deel waar het over gaat:

code:

div#wrap {
    min-height: 100%;
    background-image:url('images/bottombg.jpg');
    background-repeat:repeat-x;
    background-position:bottom left;
}

Iemand een idee/suggestie/oplossing?

zaterdag 5 december 2009 10:53

Acties:

0 Henk 'm!

kwaakvaak_v2

sinds wanneer hoort een style voor het doctype te staan dan? Kom op zeg.. je validator verteld je waarschijnlijk zelfs nog wat er aan de hand is. Dit is wel erg triviale basis kennis.

Driving a cadillac in a fool's parade.

zaterdag 5 december 2009 11:20

Acties:

0 Henk 'm!

sdevos13

Topicstarter

Dat begrijp ik ook wel. Maar dat had ik dus voorheen op me site, ik ben hem nu HTML valid aan het maken.
Maar als ik dus style's voor het doctype weghaalt krijg ik opeens problemen met m'n achtergrond (onderkant).

zaterdag 5 december 2009 11:22

Acties:

0 Henk 'm!

CoolGamer

What is it? Dragons?

XML:

<!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" />
<link rel="stylesheet" href="includes/styles.css" type="text/css" />

Dit werkt ongetwijfeld ook. Link is een element wat onder head thuis hoort.

¸.·´¯`·.¸.·´¯`·.¸><(((º>¸.·´¯`·.¸><(((º>¸.·´¯`·.¸.·´¯`·.¸.·´¯`·.¸<º)))><¸.·´¯`·.¸.·´¯`·.¸.·´¯`·.¸

zaterdag 5 december 2009 11:23

Acties:

0 Henk 'm!

Onbekend

...

In welke browsers test je?
Is die opmaak het enige probleem nog?

Speel ook Balls Connect en Repeat

zaterdag 5 december 2009 11:31

Acties:

0 Henk 'm!

sdevos13

Topicstarter

Ik test in Mozilla Firefox.
En het is nu opgelost (voor firefox dan)
In IE zie ik nogsteeds een grijze rand onderaan.

Test pagina is trouwens: http://85.146.173.209/projects/new/

zaterdag 5 december 2009 11:36

Acties:

0 Henk 'm!

Duroth

No rest for the tweaked

Je geeft de CSS-styling voor het element <div id="wrap">, maar laat dit element niet in je voorbeeldcode zien.

My guess:
Jouw div#wrap is een element dat net binnen de <body> staat, en dus als 'container' of wrapper dient voor de rest van je HTML. Deze div is zo groot als je body, zodat de bottombg.jpg achtergrond netjes onderaan het scherm komt te staan.

Dit heeft altijd gewerkt, omdat er een <link> element voor je doctype definitie stond, waardoor deze (je doctype) ongeldig was, en je dus in quirks mode zat te werken.

In quirks mode vond je browser dat de body minstens tot de onderkant van je browser window door moest lopen. Een soort impliciete min-height: 100%; dus. Nu je doctype wel word geaccepteerd, besluit de rendering engine van je browser dat de body stopt met het laatste element op je pagina, en *niet* meer automatisch doorloopt tot de onderkant van je window.

Wat je kan proberen, is om je body, en eventueel je <html> element, ook een min-height:100% mee te geven, al zal IE dit waarschijnlijk niet slikken. Maar, tenzij je veelvoudig gebruik maakt van position:absolute;, zal je achtergrondafbeelding mooi mee verplaatsen naarmate je meer content op je website krijgt, waardoor je probleem zichzelf op een wat vollere pagina vanzelf wel oplost.

Dit is puur speculatie, zoveel info hebben we niet van je gekregen, helaas

Edit: Sneller typen, Duroth

In zowel Firefox als IE8 ziet je site err hetzelfde uit. In welke IE versie test je?

[ Voor 4% gewijzigd door Duroth op 05-12-2009 11:38 ]

zaterdag 5 december 2009 11:38

Acties:

0 Henk 'm!

sdevos13

Topicstarter

Alstu:

code:

<!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>Soved</title>
<link rel="stylesheet" href="includes/styles.css" type="text/css" />
<script type="text/javascript" src="includes/js/prototype.js"></script>
<script type="text/javascript" src="includes/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="includes/js/lightbox.js"></script>
<link rel="stylesheet" href="includes/lightbox.css" type="text/css" media="screen" />

<link rel="shortcut icon" href="includes/images/favicon.gif" />
</head>

<body>

<div id="wrap">
<div id="container">
<div id="header">
    <h1><a href="">Soved</a></h1>
    <h2>Welkom bij Soved!</h2>
</div>
<?php if(!isset($_GET['p'])) { $page = ""; } else { $page = ($_GET['p']); } ?>
<div id="nav"><ul>
    <li><a href="index.php" <?php if(!isset($_GET['p'])) { echo 'class="selected"'; } ?> title="Home Page">Home</a></li>
    <li><a href="index.php?p=examples" <?php if ($page == "examples" || $page == "vip") { echo 'class="selected"'; } ?> title="VIP Area">VIP Area</a></li>
    <li><a href="index.php?p=contact" <?php if ($page == "contact") { echo 'class="selected"'; } ?> title="Contact">Contact</a></li>
</ul><br class="clear" /></div>
<div id="content"><div class="top-panel"><div>

<?php 
if(!isset($_GET['p'])) { echo '<h3>Welkom!</h3><p>Bij Soved heb je verschillende pagina's. De link naar deze onderdelen vind je hierboven en rechts van de pagina.</p><p>Screenshots van deze pagina's vind je hieronder! Veel succes!</p>'; } 
if ($page == "examples") { echo '<h3><a href="index.php?p=registreren">Word VIP!</a></h3><p><a href="">Registreer je nu als VIP!</a><br /></p>'; } 
if ($page == "contact") { echo '<h3>Contact!</h3><p>Heb je hulp of antwoord op vragen nodig? Vul dan het onderstaande formulier in!</p>'; } 
?>

</div></div>
<div class="page-wrap"><div class="page">
<!-- begin main content -->
<?php if(!isset($_GET['p'])) { ?>
<div class="Home"><h4>
<a href="includes/images/10.JPG" rel="lightbox[roadtrip]" title="Criminolz"><img src="includes/images/9.JPG" alt="" width="160" height="91" /></a> <br/>
    <a href="http://www.gangstercrimes.com/" onclick="window.open('http://www.gangstercrimes.com/', 'GangsterCrimes', ''); return false">GangsterCrimes</a><br /><br /><br />
<a href="includes/images/12.JPG" rel="lightbox[roadtrip]" title="EyeOS"><img src="includes/images/11.JPG" alt="" width="160" height="91" /></a> <br/>
    <a href="eyeOS">EyeOS</a> &gt; Online Cloud Comping<br /><br /><br />
<a href="includes/images/14.JPG" rel="lightbox[roadtrip]" title="Chatbox"><img src="includes/images/13.JPG" alt="" width="160" height="91" /></a> <br/>
    <a href="chatbox">Chatbox</a> &gt; Soved Chatbox<br /><br /><br />
<a href="includes/images/16.JPG" rel="lightbox[roadtrip]" title="Mail"><img src="includes/images/15.JPG" alt="" width="160" height="91" /></a> <br/>
    <a href="roundcube">Mail</a> &gt; Only VIP 
</h4></div>
<?php   
} else {
if ($page == "index") {
    exit;
} else {
if(!file_exists('includes/'.$page.'.php')) {
    echo '<img src="http://www.soved.eu/404.jpg">';
} else {
     include('includes/'.$page.'.php');
}}}
?>
<!-- end main content -->
</div>

<div class="sidebar"><h4>Updates</h4><ul>
    <li><a>Database geoptimaliseerd</a></li>
    <li><a>Lightbox 2.04 geinstalleerd</a></li></ul>
</div>

<div class="sidebar"><h4>Links</h4><ul>
    <li><a href="http://www.gangstercrimes.com/" onclick="window.open('http://www.gangstercrimes.com/', 'GangsterCrimes', ''); return false">GangsterCrimes</a></li>
    <li><a href="eyeOS" onclick="window.open('eyeOS', 'EyeOS', ''); return false">EyeOS</a></li>
    <li><a href="chatbox" onclick="window.open('chatbox', 'Chatbox', ''); return false">Chatbox</a></li>
    <li><a href="roundcube" onclick="window.open('roundcube', 'Mail', ''); return false">Mail</a></li></ul>
</div>

<div class="clear"></div>
</div></div>
<div id="footer">
    <p><a href="stats">&copy; 2009 Soved All Rights Reserved</a></p>
</div>

</div>
</div>

</body>
</html>

zaterdag 5 december 2009 11:46

Acties:

0 Henk 'm!

Duroth

No rest for the tweaked

Iets teveel code gecopy-paste, je PHP had je er sowieso wel even uit mogen halen ;-) Wel zie ik dat ik gelijk had in mijn gokje. Overigens heb je hetzelfde probleem in Firefox; je body eindigt inderdaad na alle content, en niet aan het einde van je browser window. Dit is duidelijk zichtbaar op b.v. de VIP area.

Wat ik zelf zou doen:

Maak je body BG zwart, en geef je div#wrap de grijze achtergrondkleur mee naast de BG image. Op die manier los je het probleem niet echt op, je zorgt er wel voor dat gebruikers het nooit zullen merken.

zaterdag 5 december 2009 11:49

Acties: