login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div AND borders (Opgelost)

Offline Rlove - 27/05/2009 19:55 (laatste wijziging 27/05/2009 20:08)
Avatar van RloveNieuw lid Beste,

ik zit met een probleem. Ik probeer 5 borders naast elkaar te krijgen. Maar dat lukt niet. Ze blijven de heletijd onder elkaar.
Hoe moet ik het oplossen?

http://www.plaatscode.be/136676/
  1. body {
  2. background-color: black ;
  3. color: white;
  4. font-size: 11pt;
  5. border-style: ridge;
  6. border: 1;
  7. border-color: red;
  8. }
  9.  
  10. #top {
  11. text-align: center;
  12. border-style: ridge;
  13. border: 1;
  14. }
  15.  
  16. #topp {
  17. color: white;
  18. font-size: 18pt;
  19. }
  20. #toppp {
  21. color: red;
  22. font-size: 15pt;
  23. }
  24.  
  25. #menuu {
  26.  
  27. width: 100%;
  28.  
  29. }
  30. .menu1 {
  31. border-style: ridge;
  32. width: 20%;
  33. }
  34.  
  35. .menu2 {
  36. border-style: ridge;
  37. width: 20%;
  38. }
  39. .menu3 {
  40. border-style: ridge;
  41. width: 20%;
  42. }
  43. .menu4 {
  44. border-style: ridge;
  45. width: 20%;
  46. }
  47. .menu5 {
  48. border-style: ridge;
  49. width: 20%;
  50. }
  51.  
  52.  
  53. a:link {
  54. font-size: 11pt; color: purple; text-decoration: underline;
  55. }
  56. a:visited {
  57. font-size: 11pt; color: white; text-decoration: none;
  58. }
  59. a:hover {
  60. font-size: 11pt; color: red; text-decoration: underline;
  61. }
  62. a:active {
  63. font-size: 11pt; color: blue; text-decoration: underline;



&
http://www.plaatscode.be/136677/

  1. <html>
  2. <head>
  3. <title>Welcome on the MASTERMIND-site of Lilly</title>
  4. <link rel="stylesheet" type="text/css" href="mastermind1.css">
  5. </head>
  6.  
  7. <body >
  8.  
  9. <div id="top">
  10.  
  11. <p><div id="topp">Welcome on my site!</div></p>
  12. <p><div id="toppp">I hope you will enjoy the game's!</div></p>
  13.  
  14. </div>
  15.  
  16. <div id="menuu">
  17. <p> <div class="menu1"><a href="How-Mastermind.html"><h4>How I made Mastermind(NL)</h4></a></div>
  18. <div class="menu2"><a href="How-Hangman.html"><h4>How I made Hangman(NL)</h4></a></div>
  19. <div class="menu3"><a href="proef.html"><h4>The problems that I must deal with Mastermind (NL)</h4></a></div>
  20. <div class="menu4"><a href="proef2.html"><h4>The problems that I must deal with Hangman (NL)</h4></a></div>
  21. <div class="menu5"><a href="Gegevensinvul.html"><h4>Observation, problem or .... --> Contact me!</h4></a></div>
  22.  
  23. </p>
  24. </div>
  25.  
  26. <p>
  27. <a href="MASTERMIND.HTML"> <h4> Home</h4></div></a>
  28.  
  29. <h3>Mastermind the GAME!!</h3>
  30. <h4> &amp;</h4>
  31. <h3> Hangman the GAME</h3>
  32.  
  33. <a href="Blood-Magic-wallpapers-679.jpg"><h4>Play Mastermind!!</h4></a>
  34.  
  35. <a href="Blood-Magic-wallpapers-679.jpg"><h4>Play Hangman!!</h4></a>
  36.  
  37. <a href="screenshot-game.html"><h4>Screenshot of Mastermind</h4></a>
  38.  
  39. <a href="screenshot-game.html"><h4>Screenshot of Hangman</h4></a>
  40.  
  41. <u>Copyright © Lilly L.</u>
  42.  
  43. </body>
  44. </html>


zijn de codes.

6 antwoorden

Gesponsorde links
Offline Kwarde - 28/05/2009 15:39 (laatste wijziging 28/05/2009 15:46)
Avatar van Kwarde Nieuw lid Vervang de .menu1 tot .menu5 FF door de volgende code:

  1. .menu1 {
  2. border-style: ridge;
  3. left: 265px;
  4. position: absolute;
  5. width: 20%;
  6. }
  7.  
  8. .menu2 {
  9. border-style: ridge;
  10. position: absolute;
  11. left: 520px;
  12. width: 20%;
  13. }
  14. .menu3 {
  15. border-style: ridge;
  16. position: absolute;
  17. left: 780px;
  18. width: 20%;
  19. }
  20. .menu4 {
  21. border-style: ridge;
  22. position: absolute;
  23. left: 1045px;
  24. width: 20%;
  25. }
  26. .menu5 {
  27. border-style: ridge;
  28. width: 20%;
  29. }


En zet bij het BODY gedeelte van de CSS code, onderaan voordat je hem sluit:

WIDTH: 1340PX;
Dus dan krijg je:

  1. body {
  2. background-color: black ;
  3. color: white;
  4. font-size: 11pt;
  5. border-style: ridge;
  6. border: 1;
  7. border-color: red;
  8. width: 1340px;
  9. }



De uitleg:

Om een bepaalde.... ding een plek te geven, plaats je eerst de
''POSITION: absolute (of relative)". Dus het is dan bijv. position: absolute;
Dan gebruik je de LEFT:100px; Je kan ook de 100px veranderen in 100%, of 80px enz.
De left, 'waarde' telt vanaf de linkerkant van de webpagina naar rechts.


En wil je graag iets naar beneden plaatsen?
Gebruik dan de TOP.


greetz,
kefff
Offline roberini - 28/05/2009 16:00
Avatar van roberini HTML beginner width: 1340px;

Hiermee houd je niet rekening met veel mensen, die een kleinere scherm resolutie hebben.
Offline Kwarde - 28/05/2009 16:19 (laatste wijziging 28/05/2009 20:03)
Avatar van Kwarde Nieuw lid Oh, maar dat maakt niks uit, om 2 redenen:

1- Het is de border OM de pagina heen, dus je ziet er sowieso weinig van EN

2- Meestal past de browser de webpagina toe, zodat je toch nog 'FULLSCREEN' hebt, maar dan kleiner.

Maar Rlove, ik raad je wel aan om bijvoorbeeld 3 knoppen boven en daaronder nog 2 te doen!

greetz,
kefff
Offline jc2 - 29/05/2009 11:29
Avatar van jc2 PHP interesse Misschien in de css bij elk menu float:left; plaatsen?
Offline Martijn - 29/05/2009 12:01
Avatar van Martijn Crew PHP wat je hebt is dat elk 20% is. Daar komt dan ook nog 5x 1px van de border links en 5x 1px van de border rechts. Dat word dus 100% + 10px;
En dan past het niet naast elkaar nee 
Offline Kwarde - 29/05/2009 18:02
Avatar van Kwarde Nieuw lid Ik heb de code's bij mij al gekopieëerd, en opgeslagen als een
HTML
bestand, en hij deed het prima!:P

MSS moeten jullie ook FF kijken? Want misschien bedoelen jliie iets anders dan waar ik van uitga...
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.18s