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/
css code - Bekijk de code zonder highlighting - Klap code in 
  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/

html code - Bekijk de code zonder highlighting - Klap code in 
  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:

css code - Bekijk de code zonder highlighting - Klap code in 
  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:

css code - Bekijk de code zonder highlighting - Klap code in 
  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.176s