Ik ben net begonnen aan een website, helemaal geprogrammeerd en volgens de standaarden.
Ik heb enkel één probleem:
Mijn container staat op 100% breedte en hoogte maar toch wil die op grote computerschermen niet over heel mijn website staan. Op mijn laptop wordt die goed weergegeven, maar op mijn vaste niet?
Kan iemand me vlug uit de nood helpen aub?
Weergegeven resultaten: 1 t/m 10 van 19
Discussie: Container staat niet op volledig scherm
-
27 november 2011, 19:05 #1Up-to-date
- Geregistreerd
- 7 september 2009
- Berichten
- 46
- Bedankjes
- 20
- Bedankt
- 54 keer in 18 posts
Container staat niet op volledig scherm
-
27 november 2011, 19:22 #2Expert
- Geregistreerd
- 9 juni 2006
- Berichten
- 632
- Bedankjes
- 34
- Bedankt
- 583 keer in 373 posts
linkje of je code ?
PHP-code:function handleException($e) { echo $e->getMessage(); }
set_exception_handler("handleException");
throw new Exception("There is always a way");
echo "You caught me!";
-
27 november 2011, 19:30 #3Up-to-date
- Geregistreerd
- 7 september 2009
- Berichten
- 46
- Bedankjes
- 20
- Bedankt
- 54 keer in 18 posts
Ok komt er aan:
mijn container staat op grote schermen gewoon niet op heel het scherm.
@charset "UTF-8";
/* CSS Document */
body
{
background-color: #333333;
}
#container
{
overflow: auto;
}
#top
{
width: 100%;
background-image: url('../images/top.png');
height: 130px;
}
#menu
{
width: 782px;
height: 50%;
margin-left: auto;
margin-right: auto;
padding-top: 3px;
}
#menu li
{
display: inline;
padding-left: 10px;
}
#menu ul li a:link, #menu ul li a:visited, #menu ul li a:hover, #menu ul li a:active
{
text-decoration: none;
color: white;
font-size: 18px;
font-family: Helvetica;
height: 27px;
line-height: 25px;
display: inline;
}
#logo
{
width: 960px;
background-image: url('../images/logo.png');
background-repeat: no-repeat;
height: 110px;
margin-left: auto;
margin-right: auto;
margin-top: -88px;
}
#wolk1
{
width: 100px;
background-image: url('../images/wolk1.jpg');
background-repeat: no-repeat;
height: 60px;
margin-left: 40px;
margin-top: -100px;
}
#wolk2
{
width: 100px;
background-image: url('../images/wolk2.jpg');
background-repeat: no-repeat;
height: 60px;
float: right;
margin-right: 40px;
margin-top: -60px;
}
#header
{
width: 752px;
height: 328px;
background-image: url('../images/web1.png');
background-repeat: no-repeat;
margin-top: 18px;
border: 4px solid #cc6633;
border-top: none;
margin-left: auto;
margin-right: auto;
}
#title
{
width: 752px;
height: 30px;
background-color: white;
margin-left: auto;
margin-right: auto;
border: 4px solid #99cccc;
margin-top: 20px;
margin-bottom: 20px;
padding-top: 13px;
}
#title h1
{
font-size: 22px;
font-family: Trebuchet MS, sans serif;
font-weight: bold;
padding-left: 15px;
}
#content
{
width: 752px;
height: auto;
background-color: white;
margin-left: auto;
margin-right: auto;
border: 4px solid #99cccc;
margin-top: 20px;
margin-bottom: 20px;
}
#content p
{
font-size: 14px;
font-family: Trebuchet MS, sans serif;
line-height: 12pt;
padding-left: 15px;
padding-bottom: 20px;
}
.first
{
font-size: 14px;
font-family: Helvetica, sans serif;
line-height: 10px;
padding-left: 15px;
padding-top: 20px;
}
#block
{
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('../images/footer.png');
background-repeat: repeat-x;
}
#footer
{
width: 752px;
height: 180px;
margin-left: auto;
margin-right: auto;
}
#navigeren
{
width: 305px;
height: 180px;
float: left;
}
#navigeren h1
{
color: white;
font-size: 25px;
padding-bottom: 5px;
padding-top: 20px;
}
#navigeren ul li a:link, #navigeren ul li a:visited, #navigeren ul li a:hover, #navigeren ul li a:active
{
text-decoration: none;
color: white;
font-size: 18px;
height: 27px;
line-height: 25px;
}
#socialmedia
{
width: 221px;
height: 180px;
float: left;
}
#socialmedia h1
{
color: white;
font-size: 25px;
padding-bottom: 5px;
padding-top: 20px;
padding-bottom: 20px;
}
#monsters
{
width: 200px;
height: 160px;
margin-top: 20px;
background-image: url('../images/monster.png');
background-repeat: no-repeat;
float: right;
}Laatst gewijzigd door Visaversa; 27 november 2011 om 19:32
-
27 november 2011, 19:34 #4Up-to-date
- Geregistreerd
- 7 september 2009
- Berichten
- 46
- Bedankjes
- 20
- Bedankt
- 54 keer in 18 posts
Hier is de XHTML ook:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/screen.css" />
<title>Portfolio</title>
</head>
<body>
<div id="container">
<div id="top">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Web</a></li>
<li><a href="#">Fotografie</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> <!--end menu-->
</div><!-- end top-->
<div id="logo">
</div><!--end logo-->
<div id="wolk1">
</div><!-- end wolk1-->
<div id="wolk2">
</div><!--end wolk2-->
<div id="header">
</div><!--end header-->
<div id="title">
<h1>Hi There!</h1>
</div><!-- end title-->
<div id="content">
</div><!-- end content-->
<div id="block">
<div id="footer">
<div id="navigeren">
<h1>Snel navigeren</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Web</a></li>
<li><a href="#">Fotografie</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- end navigeren-->
<div id="socialmedia">
<h1>Sociale media</h1>
<img src="images/facebook.png" alt="facebook"/>
<img src="images/linkedin.png" alt="linkedin"/>
<img src="images/twitter.png" alt="twitter"/>
</div><!--end socialmedia-->
<div id="monsters">
</div><!---end monsters-->
</div><!--end footer-->
</div><!--end block-->
</div><!-- end container-->
</body>
</html>
-
27 november 2011, 22:21 #5Expert
- Geregistreerd
- 9 juni 2006
- Berichten
- 632
- Bedankjes
- 34
- Bedankt
- 583 keer in 373 posts
Je css van je container bevat alleen een overflow en geen width
ps gebruik de volgende keer code tags als e code plaatstCode:#container { overflow: auto; }PHP-code:function handleException($e) { echo $e->getMessage(); }
set_exception_handler("handleException");
throw new Exception("There is always a way");
echo "You caught me!";
-
27 november 2011, 23:55 #6Up-to-date
- Geregistreerd
- 7 september 2009
- Berichten
- 46
- Bedankjes
- 20
- Bedankt
- 54 keer in 18 posts
Het probleem is nog niet van de baan. Ik blijf mijn achtergrond steeds achter mijn footer zien als ik op een groter scherm zit.
Ik merk wel op dat het op safari werkt.
Firefox en Chrome doen het nog niet.
Hier kan je zien wat ik bedoel:
Laatst gewijzigd door Visaversa; 28 november 2011 om 00:04
-
28 november 2011, 01:27 #7Up-to-date
- Geregistreerd
- 7 september 2009
- Berichten
- 46
- Bedankjes
- 20
- Bedankt
- 54 keer in 18 posts
Opgelost!
Ik heb de container een relatieve positie meegegeven, mijn footer een absolute positie meegegeven en dan heb ik die positie een bottom meegegeven die op 0 en auto staat.
-
28 november 2011, 18:57 #8Up-to-date
- Geregistreerd
- 7 september 2009
- Berichten
- 46
- Bedankjes
- 20
- Bedankt
- 54 keer in 18 posts
Te vroeg gejuigd, het was beter in Firefox, maar het probleem doet zich nog steeds voor!
-
28 november 2011, 20:56 #9Expert
- Geregistreerd
- 9 juni 2006
- Berichten
- 632
- Bedankjes
- 34
- Bedankt
- 583 keer in 373 posts
Kan je alles in een zipje doen dus incl de afbeeldingen en een screenshot wa je anders wilt hebben.
Dan kunnen we het fixen voor je.PHP-code:function handleException($e) { echo $e->getMessage(); }
set_exception_handler("handleException");
throw new Exception("There is always a way");
echo "You caught me!";
-
De volgende gebruiker bedankt Butterflyice voor deze nuttige post:
Visaversa (28 november 2011)
-
28 november 2011, 22:37 #10Up-to-date
- Geregistreerd
- 7 september 2009
- Berichten
- 46
- Bedankjes
- 20
- Bedankt
- 54 keer in 18 posts
Oké doe ik,..Het is de bedoeling dat de footer steeds beneden komt en er niet al te veel plaats komt tussen content en footer. Screenshots, CSS files en HTML bestanden zitten in de downloadlink.
Ik ben benieuwd, want ik zoek me maar te pletter :(
https://rapidshare.com/files/2235004186/Bestanden.zipLaatst gewijzigd door Visaversa; 28 november 2011 om 22:39
-
De volgende gebruiker bedankt Visaversa voor deze nuttige post:
compuchrisje (28 november 2011)
Discussie informatie
Users Browsing this Thread
Momenteel bekijken 1 gebruikers deze discussie. (0 leden en 1 gasten)
Soortgelijke discussies
-
windows 2000 en geen volledig scherm
Door alpha in forum WindowsReacties: 9Laatste bericht: 8 februari 2009, 12:03 -
site niet meer volledig te zien
Door Sarana in forum InternetReacties: 2Laatste bericht: 20 maart 2007, 21:37 -
beeldscherm gaat niet alleen tv scherm
Door icy in forum Grafische kaarten & monitorsReacties: 2Laatste bericht: 17 november 2006, 19:11 -
Webcam staat niet als standaart op msn
Door kurt0015 in forum AudiovisueelReacties: 1Laatste bericht: 28 januari 2006, 19:46 -
Telemeter staat NIET op nul
Door Filiberken in forum InternetReacties: 1Laatste bericht: 3 januari 2006, 21:08
Regels voor berichten
- Copyright © 2004 - 2012, Minatica.be
Digital Point modules: Sphinx-based search -
Powered by vBulletin®, versie 4.2.0
Copyright © 2012 vBulletin Solutions, Inc. - Webhosting door 1-Eurohost.be
- Design door Sweetntasty.be
- Icons door Pinvoke.com
Favorieten/bladwijzers