login  Naam:   Wachtwoord: 
Registreer je!
 Forum

bar onderaan pagina (Opgelost)

Offline rolos - 03/06/2010 11:09 (laatste wijziging 03/06/2010 11:12)
Avatar van rolosNieuw lid hallo allemaal,

het zal vast simpel op te lossen zijn maar na alles geprobeerd te hebben en gezocht op google kom ik toch weer hier uit.
Ik wil namelijk een bar onderaan de pagina hebben, maar nou is elk beeldscherm weer een andere grootte/resolutie hoe boks ik het voor mekaar zodat op elk beeldscherm de balk helemaal onderaan komt(zonder naar beneden te scrollen)? (het gaat om de div #banneronder)

tweede probleem: die bar waar ik het over heb heeft een width van 100% zodat hij op elk beeldscherm even lang is. Nou dat werkt op zich wel alleen kan ik best wel ver opzij scrollen, komt dit door die 100% width? of zit hier toch een andere oorzaak achter?

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link href="include/opmaak.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  10. 		<div id="bannerboven">
  11. 		<img src="images/dwebber-logo.png" border="0" />
  12. 		</div>
  13.  
  14.  
  15.  
  16. <div id="container">
  17. 	<div id="banner">
  18. 	<div id="bannerfoto"></div>
  19. 	</div>
  20.  
  21.  
  22.             <div id="links">
  23.             <img src="images/driehoek.png" border="0" />
  24.             <img src="images/prijslijst.png" border="0" />
  25.             <img src="images/portfolio.png" border="0" />
  26.             <img src="images/portfolio.png" border="0" />
  27.             </div>
  28.  
  29. <div id="tekst">
  30. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non eros nec felis tempor aliquam. Mauris turpis felis, fringilla quis fermentum non, malesuada sed nunc. Nam sit amet mi non tortor pharetra sollicitudin. Suspendisse rutrum auctor dapibus. Curabitur blandit, enim ac convallis tincidunt, nibh mi tempus diam, in blandit nibh libero quis arcu. Sed pharetra ligula nec nunc ultricies sollicitudin imperdiet libero pulvinar. Proin enim orci, dictum eget hendrerit nec, molestie quis nibh. Donec lectus sapien, mattis sit amet adipiscing consequat, dapibus eget dolor. Nullam bibendum, ligula eget rutrum posuere, nisi lacus rhoncus eros, vel egestas elit velit et lorem. Duis etpharetra velit. Aenean pharetra pharetra mauris, sed consequat leo sodales et. 
  31. </div>
  32. </div>
  33.  
  34.  
  35. <div id="banneronder"></div>
  36. </body>
  37. </html>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4.  
  5. body {
  6. 	background-image: url(../images/wit%20gebroken.jpg);
  7. 	background-repeat: repeat-x;
  8. }
  9.  
  10.  
  11. * {
  12. 	margin: 0px;
  13. 	padding: 0px;
  14.  
  15. }
  16.  
  17. /*------------------------------------------------------------------
  18.  
  19. Index Id's 
  20.  
  21. ------------------------------------------------------------------*/
  22. #container {
  23. 	background-color: #FFFFFF;
  24. 	height: 799px;
  25. 	width: 1005px;
  26. 	background-image: url(../images/container-bg.png);
  27. 	margin: auto;
  28. 	padding-top: 1px;
  29. }
  30.  
  31. #banner {
  32. 	height: 250px;
  33. 	width: 1000px;
  34. 	margin: auto;
  35. 	background-image: url(../images/banner-bg.png);
  36. }
  37.  
  38. #bannerboven {
  39. 	background-color: #000000;
  40. 	height: 63px;
  41. 	width: 100%;
  42. 	padding-left: 30%;
  43. 	padding-top: 5px;
  44. 	margin-bottom: 50px;
  45. }
  46.  
  47. #links {
  48. 	height: 350px;
  49. 	width: 325px;
  50. 	float: left;
  51. 	padding-left: 75px;
  52. }
  53.  
  54. #tekst {
  55. 	height: 340px;
  56. 	width: 590px;
  57. 	float: right;
  58. 	padding-top: 10px;
  59. 	padding-right: 10px;
  60. }
  61.  
  62. #bannerfoto {
  63. 	height: 225px;
  64. 	width: 426px;
  65. 	float: right;
  66. 	margin-top: 10px;
  67. 	margin-right: 10px;
  68. }
  69.  
  70. #banneronder {
  71. 	background-color: #000000;
  72. 	height: 20px;
  73. 	width: 100%;
  74. 	padding-left: 30%;
  75. 	padding-top: 5px;
  76. 	margin-top: 330px;
  77. }
  78.  
  79. /*------------------------------------------------------------------
  80.  
  81. Index classes 
  82.  
  83. ------------------------------------------------------------------*/
  84.  
  85. .scanvlieger {
  86. 	float: right;
  87. 	margin-right: 12px;
  88. 	margin-top: 10px; 
  89.  
  90. }

4 antwoorden

Gesponsorde links
Offline Jelmerholland - 03/06/2010 12:33
Avatar van Jelmerholland PHP beginner Hoe breed is het scherm waar jij op test?


== Offtopic
Even een opmerking op je CSS, jij sorteert het op Id's en classes, je kan het beter sorteren op:
- Navigation
- Subnav (right or left)
- Main
--- Main left
--- Main right
- Footer

etc. Dan vind je veel makkelijker je codes terug Zeker als je op een gegeven moment een lijst code hebt die 1000 lines lang is bijvoorbeeld 
Offline WouterJ - 03/06/2010 17:08
Avatar van WouterJ HTML gevorderde
rolos schreef:
Ik wil namelijk een bar onderaan de pagina hebben, maar nou is elk beeldscherm weer een andere grootte/resolutie hoe boks ik het voor mekaar zodat op elk beeldscherm de balk helemaal onderaan komt(zonder naar beneden te scrollen)? (het gaat om de div #banneronder)

Geef de #banneronder een position: fixed; mee en zeg dan bottom: 0px; dan blijft hij altijd tegen de onderkant van het beeldscherm plakken. Ook als je naar beneden scrolled.
rolos schreef:
tweede probleem: die bar waar ik het over heb heeft een width van 100% zodat hij op elk beeldscherm even lang is. Nou dat werkt op zich wel alleen kan ik best wel ver opzij scrollen, komt dit door die 100% width? of zit hier toch een andere oorzaak achter?

Dat komt door de padding-left: 30%; die je geeft, daardoor schuift de banner 30% op. Je kan dit oplossen door de tekst in de banner in een <p> tag te zetten en die p tag padding-left: 30%; mee te geven.

Succes!
Offline kiwi - 03/06/2010 21:18
Avatar van kiwi Nieuw lid
Waldio schreef:
[..quote..]
Dat komt door de padding-left: 30%; die je geeft, daardoor schuift de banner 30% op. Je kan dit oplossen door de tekst in de banner in een <p> tag te zetten en die p tag padding-left: 30%; mee te geven.
Succes!


Of je kan width op 70% zetten 
Offline rolos - 16/06/2010 13:46
Avatar van rolos Nieuw lid Hey,

Ik zat een paar dagen zonder internet dus had geen kans om te reageren.
Heel erg bedankt voor deze simpele oplossing. Soms zie je gewoon door het bomen het bos niet meer 

probleem opgelost 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.212s