login  Naam:   Wachtwoord: 
Registreer je!
 Forum

topbalk grootte adhv grootte scherm (Opgelost)

Offline Roow - 15/12/2010 21:43 (laatste wijziging 15/12/2010 21:47)
Avatar van RoowLid Ik wil een balk boven de site, maar aan de kant ronde hoeken, dus hij moet niet helemaal doorlopen.
Ik wil alleen dat de balk iets kleiner is dan het scherm, maar wel een minimum width 700px heeft.

Ik heb nu de volgende code, maar verschillende groottes gaan nu sowieso de fout in door die width in percentages:
De HTML
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="top">
  2.         <div class="leftcorner"></div>
  3.         <div class="middle"></div>
  4.         <div class="rightcorner"></div>
  5. </div>


De CSS:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. <style>
  2. .top {
  3. 	position: absolute;
  4. 	left: 0px;
  5. 	top: 0px;
  6. 	height: 40px;
  7. 	width: 100%;
  8. }
  9. .leftcorner {
  10. 	position: absolute;
  11. 	left: 0px;
  12. 	top: 0px;
  13. 	background-image:  url(images/top/leftcorner.png);
  14. 	height: 40px;
  15. 	width: 42px;
  16.  
  17. }
  18. .middle {
  19. 	position: absolute;
  20. 	top: 0px;
  21. 	left: 42px;
  22.  
  23. 	background-image: url(images/top/background.png);
  24. 	height: 40px;
  25. 	width: 95%;
  26. 	background-repeat: repeat-x;
  27. }
  28. .rightcorner {
  29. 	position: absolute;
  30. 	right: 0px;
  31. 	top: 0px;
  32. 	background-image:  url(images/top/rightcorner.png);
  33. 	height: 40px;
  34. 	width: 42px;
  35. }
  36. </style>

Probleem is dus: hij past automatisch aan aan de grootte van het scherm, maar alleen het middenstuk staat niet goed. Middle moet dus eigenlijk 42px van de linkerkant en 42px van de rechterkant beginnen. Maar hoe??
Alvast bedankt

4 antwoorden

Gesponsorde links
Offline Realtec - 15/12/2010 22:37 (laatste wijziging 15/12/2010 22:39)
Avatar van Realtec HTML interesse Je hebt bij class middle width: 95%.
De overige 5% zal in de meeste gevallen geen 2x 42px zijn.
Heb je width: 100% al geprobeerd?

Of misschien alles relative maken en alles float left en de middelste op 100%

met z-index kun je het middenstuk erachter plaatsen over de 100% gooien en die twee zij kantjes erboven.

Kan het nu ff niet testen want ik ga nu plat.
Offline Roow - 16/12/2010 09:08
Avatar van Roow Lid Realtec, bedankt voor je reactie,

maar de achtergrond plaatjes hebbeneen kleine shadow, en als die dubbelop is dan zie je dat heel lelijk natuurlijk, ik zal even dat floatleft proberen!
Offline Realtec - 16/12/2010 11:47
Avatar van Realtec HTML interesse realtec.nl/css_test

Heb hier ff mee zitten stressen maar bekijk dit maar ff 
Bedankt door: Roow
Offline Roow - 16/12/2010 23:03
Avatar van Roow Lid Dat is precies wat ik bedoel! geniaal, bedankt!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.356s