login  Naam:   Wachtwoord: 
Registreer je!
 Forum

tekst en tabel (Opgelost)

Offline joeyask - 06/02/2010 23:48 (laatste wijziging 06/02/2010 23:57)
Avatar van joeyaskOnbekend hallo sitemasters,

ik heb een scriptje met html en css,

en heb een klein probleempje.

ik heb een tekst en een tabel,

maar dat komt niet naast elkaar te staan.

wie kan mij zeggen hoe ik dat wel naast elkaar kan plaatsen??

mvg joey,
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  3. <title>keeway fact 50</title>
  4. <style type="text/css">
  5. <!--
  6. body {color:white; font-family:verdana; background-color:#333333;}
  7.  
  8. h2 {color:#993333; font-family:times new roman; font-style:italic;}
  9.  
  10. p {color:white; font-family:verdana; text-decoration:underline}
  11.  
  12. a:link { color: red }
  13. a:visited { color: #993333 }
  14. a:hover { color: purple }
  15. a:active { color: green }
  16.  
  17. .container {
  18. margin: -19px auto;
  19. border: 1px solid #white;
  20. width: 900px;
  21. height: 100px;
  22. background-color:black;
  23. }
  24.  
  25.  
  26. -->
  28.  
  29. </head>
  30.  
  32.  
  34.  
  35. <div class="container"><h2>mijn scooter!</h2></font>
  36. <p>dit is mijn scooter.<br>
  37. het is een keeway f-act 50.<br>
  38. bouwjaar 2008.</p>
  39.  
  40. <a href=""=""></a>
  41.  
  42.  
  43.  
  44. <img src="C:\Users\joey\Desktop\camera\Foto0020.jpg" widht="250" height="230">
  46.  
  47. <table border="1" bgcolor="#333333">
  48. <tr>
  49. <td><LI>menu</LI></tr></td>
  50. <tr><td>
  51. <LI>mijn scooter.</LI></tr></td>
  52. <tr>
  53. <td><LI>over mij.</LI></tr></td>
  55.  
  56. <a href="mailto:joey_de_best1@hotmail.com">mail voor meer info!</a>
  57. </div>
  58.  
  59. </body>
  60. </html>

18 antwoorden

Gesponsorde links
Offline Martijn - 07/02/2010 00:15
Avatar van Martijn Crew PHP http://validator.w3.org/#validate_by_input

zet daar je code is in en maak eerst eens die fouten die het geeft.

Bijvoorbeeld:
Je opent <center> (uberhaupt al een slechte code!), daarna je container <div>, dan je <p> met tekst. Daarna sluit je de <p>, daarna de <center> en dan je <div>

Dus, je div zet je in je center, maar je sluit m erna...?
Offline joeyask - 07/02/2010 00:31
Avatar van joeyask Onbekend ja omdat anders de rest ook wordt gecentreerd wat ik dus niet wil,

ik vind de code: <center> wel fijn werken, misschien oud maarja..
Offline Deloo - 07/02/2010 11:21 (laatste wijziging 07/02/2010 11:22)
Avatar van Deloo Lid Je moet echt wel meer aandacht besteden aan je code... In je tabel open je eerst de rij en dan de kolom (dat is nog juist) maar dan sluit je eerst je rij en dan pas je kolom... De juiste structuur is als volgt:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.    <tr>
  3.      <td>menu</td>
  4.    </tr>
  5.    <tr>
  6.      <td>mijn scooter</td>
  7.    </tr>
  8.    <tr>
  9.      <td>over mij</td>
  10.    </tr>


Het is ook beter om alle opmaak in je CSS bestand te zetten. Als je dan later de lay-out van bijvoorbeeld je tabellen wil veranderen moet je maar één bestand aanpassen in plaats van al je HTML bestanden...

Nu over je vraag. Ik denk dat het best is dat je je tekst en je tabel in twee aparte div's zet en deze dan via CSS naast elkaar laat liggen. Dit kun je door het volgende in je CSS-bestand te zetten

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .container {
  2.    float: left;
  3. }
  4.  
  5. .tekst {
  6.    float: left;
  7. }


Let er natuurlijk op dat de naam van je div in je CSS bestand en je HTML bestand overeenkomen...
Offline hrnsykk - 07/02/2010 21:55 (laatste wijziging 08/02/2010 15:35)
Avatar van hrnsykk Lid probeer jij het maar zo

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. Verwijderd

Martijn schreef:
Deze code was zeer onjuist!
Offline joeyask - 07/02/2010 22:15
Avatar van joeyask Onbekend ik kom er niet egt uit, maar vind het fyn dat mensen me wel proberen te helpen:D
Offline hrnsykk - 07/02/2010 22:26
Avatar van hrnsykk Lid kunt u het paint tekenen en doorsturen
Offline Martijn - 08/02/2010 12:22
Avatar van Martijn Crew PHP zo, voordat je verder gaat met vragen, gaan we eerst je site fixen.
@hrnsykk 1: Jouw code is mogelijk nóg fouter.
@hrnsykk 2: We doen niet aan paint we maken een screenshot, of we geven een werkend voorbeeld.
-----
1. Je CSS, regel 6 tot regel 23, zet je in een nieuw bestand, een css bestand. Zie Beginnen met Css
-----
2. de <center> van regel 34 haal je weg, en de sluitende tag ook. Als je wilt dat dat stuk gecentreerd wordt, zet je style="text-align:center" in de div op regel 35. Met <center> kom je alleen weg als je op de basisschool zit.
-----
3. Je hebt <LI> in je table. Allereerst schrijven we tags in kleine letters, <li> dus, ten tweede is LI kort voor List Item, en dat hoort niet zo thuis in een tabel. Zie HIER de juiste manier van LI
Als je zo;n balletje voor je tekst wilt doe je &bull;
-----
4.
-Op regel 36 heb je </font> maar nergens open je die -> weghalen.
- Je hebt als IMG source een absolute path. Zet je dit online werkt het niet. De foto in je html map zetten, en dan alleen foto.jpg neerzetten
- Je hebt in je img widht, dat moet width zijn
- Regel 40 -> a href=""=""> ?
-----
5. DOWNLOAD FIREFOX! en daarna htmlTidy. En leer er mee omgaan


Pas weer vragen stellen als je het bovenstaande gemaakt heb ;)
Offline joeyask - 08/02/2010 17:50 (laatste wijziging 08/02/2010 19:16)
Avatar van joeyask Onbekend oke heb alles verander:D

maar ik gebruik trouwens html-kit, weet niet of dat een goed programma is?

dit is nu mijn code:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  3. <title>keeway fact 50</title>
  4.  
  5. <link rel="stylesheet" href="style.css" type="text/css">
  6.  
  7. </head>
  8.  
  10. <div class="container" style="text-align:center">
  11. <h2>mijn scooter!</h2>
  12. dit is mijn scooter.<br>
  13. het is een keeway f-act 50.<br>
  14. bouwjaar 2008.<br>
  15.  
  16. <img src= "scooter.jpg" width= "350" height="230">
  17.  
  18.  
  19.  
  20. <table border= "1" bgcolor= "#333333">
  21. <ul>
  22. <tr>
  23. <td>
  24. <li>
  25. <a href="1e.htm">mijn scooter.</ul></tr></td></li></a>
  26. <tr>
  27. <td>
  28. <li>meer foto's.</tr></td></li>
  29. <tr>
  30. <td>
  31. <li>over mij.</tr></td></li></table></ul>
  32.  
  33.  
  34. <a href= "mailto:joey_de_best1@hotmail.com">mail voor meer info!</a>
  35.  
  36.  
  37. <p align="center"><embed src= "C:\Users\joey\Desktop\muziek\John Cena - My Time Is Now.mp3" width="140" height="50" autostart="false" loop="false"> 
  38.  
  39. </div>
  40.  
  41. </body>
  42. </html>
Offline Martijn - 08/02/2010 19:16
Avatar van Martijn Crew PHP Het is een heel stuk beter. Allen heb je nog een foutje, maar die zal tidy je vertellen.

Je vroeg via bericht hoe, ik zal het hier even uitleggen:
rechtsonder staat een icoontje met een kruisje, of een 'goedvink'-vinkje, of een vraagteken. Als je daar op dubbelclicked krijg je een scherm met de bron (het is ook toegankelijk door ctrl+U te toesten).
Linksonder heb je een vak met fouten, met als je daar op klikt de manier om te verbeteren rechtsonder
Offline joeyask - 08/02/2010 19:31 (laatste wijziging 08/02/2010 19:33)
Avatar van joeyask Onbekend oke heb het met de programma opgeschoond en dit is er van geworden:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2.   <head>
  4.       keeway fact 50
  5.     </title>
  6.     <link rel="stylesheet" href="style.css" type="text/css" />
  7.   </head>
  8.   <body>
  9.     <div class="container c3">
  10.  
  11.       <h2>mijn scooter!</h2>
  12. 			dit is mijn scooter.<br />
  13.       het is een keeway f-act 50.<br />
  14.       bouwjaar 2008.<br />
  15.       <img src="scooter.jpg" width="350" height="230" />
  16.       <table class="c1" border="1">
  17.         <tr>
  18.           <td>
  19.             <ul>
  20.               <li>
  21.                 <a href="1e.htm">mijn scooter.</a>
  22.               </li>
  23.  
  24.           </td>
  25.         </tr>
  26.          <tr>
  27.           <td>
  28.             <ul>
  29.               <li>meer foto's.
  30.              </li>
  31.            </td>
  32.          </tr>
  33.         <tr>
  34.           <td>
  35.             <ul>
  36.               <li>over mij.
  37.              </li>
  38.            </td>
  39.         </tr>
  40.       </table>
  41. 			<a href="mailto:joey_de_best1@hotmail.com">mail voor
  42.       meer info!</a>
  43.       <p class="c2">
  44.         <embed src=
  45.         "C:/Users/joey/Desktop/muziek/John%20Cena%20-%20My%20Time%20Is%20Now.mp3"
  46.         width="140" height="50" autostart="false" loop="false" />
  47.       </p>
  48.     </div>
  49.   </body>
  50.  
  51. </html>
Offline Deloo - 08/02/2010 19:48
Avatar van Deloo Lid Hieronder heb ik gezet hoe ik dit bestand zou veranderen, nog eens daaronder vind je nog wat uitleg... Enkele dingen zijn al gezegd maar werden nog niet aangepast, dus zeg ik het nog maar eens 

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.   <head>
  3.     <title>keeway fact 50</title>
  4.     <link rel="stylesheet" href="style.css" type="text/css">
  5.   </head>
  6.  
  7.   <body>
  8.     <div class="container">
  9.       <h2>mijn scooter!</h2>
  10.         <p>dit is mijn scooter.<br>
  11.         het is een keeway f-act 50.<br>
  12.         bouwjaar 2008.</p>
  13.  
  14.         <img src= "scooter.jpg" width= "350" height="230">
  15.  
  17.           <tr>
  18.             <td><a href="1e.htm">mijn scooter.</a></td>
  19.           </tr>
  20.           <tr>
  21.             <td>meer foto's.</td>
  22.           </tr>
  23.           <tr>
  24.             <td>over mij.</td>
  25.           </tr>
  26.         </table>
  27.  
  28.         <a href= "mailto:joey_de_best1@hotmail.com">mail voor meer
  29.         info!</a>
  30.  
  31.         <p align="center"><embed src= "background_song.mp3"
  32.         width="140" height="50" autostart="false" loop="false"></p>
  33.  
  34.     </div>
  35.   </body>
  36. </html>


Je werkt nu blijkbaar met een extern CSS bestand... Wat alleen maar toe te juichen is, maar je zou dan best alles in dat extern bestand zetten... Dus bijvoorbeeld ook de opmaak van je div en de opmaak van je table Dit kan je door gewoon het volgende toe te voegen aan je CSS-bestand:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .container {
  2.     text-align: center;
  3. }
  4.  
  5. table {
  6.      border: 1px solid #333333;
  7. }


Ik versta ook je gebruik van de 'unordered list' en tabel niet... Als je gewoon een opsomming wil maken moet je daar geen tabel voor gebruiken (ik veronderstel dat je gewoon wil opsommen omdat je tabel maar 1 kolom heeft). Als je toch echt met een tabel wil werken kun je, zoals Martijn al zei, '&bull;' typen op de plaatsen waar het bolletje moet komen...

Ook de structuur klopte nog niet helemaal. Hieronder een voorbeeld om te verduidelijken hoe je tag moet openen en sluiten... Eerst het slechte voorbeeld:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div>
  2.   <p>
  4.     </p>
  5.   </table>
  6. </div>


In het bovenstaande maak je een tabel die in een paragraaf zit die op zijn beurt in een div zit. Maar bij het afsluiten zeg je dat het een paragraaf is die in een tabel zit die in een div zit... Het klinkt ingewikkeld maar het is eigenlijk heel logisch, wat je het laatst geopend hebt moet je het eerst sluiten... Hieronder het goeie voorbeeld:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div>
  2.   <p>
  4.     </table>
  5.   </p>
  6. </div>


En zoals Martijn ook al zei, als je je site upload zal hij je muziekbestand niet vinden omdat er op je server geen map zal zijn met de naam die je opgaf... Beter is om beiden in dezelfde map te zetten en dan gewoon de naam van je bestand op te geven als source.

dat is het denk ik...
Offline joeyask - 08/02/2010 19:55
Avatar van joeyask Onbekend owke,

dat &bull werkt alleen in firefox,
daar komt wel een bolletje en bin internet explorer niet.

kan dit kloppen>?
Offline Deloo - 08/02/2010 20:07
Avatar van Deloo Lid Bij mij wordt het in beide browsers correct weergegeven... Vergeet er het punt-komma niet achter te zetten, misschien ligt het daaraan.
Bedankt door: joeyask
Offline joeyask - 08/02/2010 20:30 (laatste wijziging 09/02/2010 13:13)
Avatar van joeyask Onbekend oke bedankt voor de tip,

maar weer ff back on-topic,

die tabel staat nog niet naast dat plaatje,

en kom er zelf niet egt uit nog.

ik mail de code nog even:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "NL">
  3. <title>keeway fact 50</title>
  4. <link rel="stylesheet" href="style.css" type="text/css" />
  5. </head>
  6.  
  8. <div class="container c3">
  9. <h2>mijn scooter!</h2>
  10. dit is mijn scooter.<br />
  11. het is een keeway f-act 50.<br />
  12. bouwjaar 2008.<br />
  13. <img src="scooter.jpg" width="350" height="230" />
  14.  
  15. <table class="c1" border="1">
  16. <tr>
  17. <td>
  18. &bull; mijn scooter</tr>
  19. <tr>
  20. <td>
  21. &bull; meer foto's</td>
  22. <tr>
  23. <td>
  24. &bull; over mij</td></tr>
  26.  
  27. <a href="mailto:joey_de_best1@hotmail.com">mail voor meer info!</a>
  28. </p>
  29. </div>
  30. </body>
  31. </html>

css code - Bekijk de code zonder highlighting - Klap code in 
  1. body {color:white; font-family:verdana; background-color:#333333;}
  2.  
  3. h2 {color:#993333; font-family:times new roman; font-style:italic;}
  4.  
  5. p {color:white; font-family:verdana; text-decoration:underline;}
  6.  
  7.  
  8.  
  9.  
  10. a:link { color: red }
  11. a:visited { color: gray}
  12. a:hover { color: purple }
  13. a:active { color: green }
  14.  
  15. .container {
  16. margin: -19px auto;
  17. border: 1px solid #white;
  18. width: 970px;
  19. height: 440px;
  20. background-color:black;
  21. }
  22.  
  23. div.c3 {text-align:center}
  24. p.c2 {text-align: center}
  25. .c1{background-color: black; text-align: left}
Offline larssy1 - 09/02/2010 14:28 (laatste wijziging 09/02/2010 14:28)
Avatar van larssy1 MySQL beginner Als het vanavond tegen 5uur nog niet is opgelost, zal ik 't even goed maken voor je. Is niet al teveel werk, maar ben even druk bezig met werk =) Ik zal straks terug komen kijken.

edit: had ik misschien beter als Private Message kunnen versturen
Offline joeyask - 09/02/2010 16:14 (laatste wijziging 09/02/2010 17:45)
Avatar van joeyask Onbekend oke bedankt:)

ik zal nog ff verder klungelen en kijken of ik eruit kan komen.

edit: ik ben er nog niet uit:(
Offline Martijn - 09/02/2010 19:10
Avatar van Martijn Crew PHP oke, plaatje dit geven:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. style="float:left;"


als dat niet werkt, ook aan je tabel geven 
Offline joeyask - 09/02/2010 22:40 (laatste wijziging 09/02/2010 22:49)
Avatar van joeyask Onbekend het werkt prima:D

heel erg bedankt allemaal(L)
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.249s