login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[CSS] Content niet op goede plaats (Opgelost)

Offline shibble - 20/06/2007 18:00 (laatste wijziging 21/06/2007 00:01)
Avatar van shibbleMySQL interesse allo allemaal,

Ik ben nieuw in CSS en ben nu dus bezig met een website in CSS met image's dus nu heb ik al het volgende:

http://www.shibble.eu/dislike

een heel eind gekomen maar nu zit ik dus vast met de content hij plaats zig niet goed, (bekijk met firefox want ik hoorde dat met IE er bugs inzitten met IE7 vindt ik ze niet maar wss oudere versie's wel)
de content moet onder Headlines & matches komen.

de CSS kan je hier vinden:

http://www.shibble.eu/dislike/dislike.css

Iemand die me hierbij verder kan helpen?

12 antwoorden

Gesponsorde links
Offline Metalhead - 21/06/2007 07:54
Avatar van Metalhead HTML gevorderde Ik begrijp het probleem misschien niet helemaal goed, maar als je de regel "width: 527px;" gewoon weg laat in de #content, is het toch gewoon goed?
Offline shibble - 21/06/2007 12:11
Avatar van shibble MySQL interesse Nope dat komt niet uit dan, die div moet een breedtje van 527 pixels hebben,
en onder headlines & recent matches komen,
maar als ik eht op jouw manier doe dan kom ie tot een kwart van recent matches als ik de letters aan elkaar heb en als ik gewron zinnen makeen gaat ie bij elke enter een nieuwe regel.
Offline Xan - 21/06/2007 12:21 (laatste wijziging 21/06/2007 12:29)
Avatar van Xan HTML interesse Je moet die #leftContainer, #headlines #matches en #content in één div gooien met een x-aantal pixels breedte.

vervolgens pas je op #leftContainer float:left toe en de rest float:right;

of je maakt 2 divjes aan:

_____
| | |
| | |

links en rechts, dus gooi je in de linker #leftContainer en in de rechter je content, de matches etc.
Offline shibble - 21/06/2007 12:29 (laatste wijziging 21/06/2007 12:30)
Avatar van shibble MySQL interesse Nope dat is het niet,
maar als je nu dus kijkt
http://www.shibble.eu/dislike
zie je dat het wel op degoede plaats is alleen dan onder de layout helemaal inplaats onder headlines en recent matches nu moet ie daar nog onder.

(Of zal ik ook nog 1 container moeten maken waar ik de div's healdines, matches & content in moet zetten)

hmmm zo heb ik het niet in artikels gelezen . voor elke column die je hebt een aparte div en daarin div's zo heb ik hetgelezen. alleen omdat ik bij 1 column dus 2 blokken naast elkaar en 1 eronder wilt weet ik niet hoe die bij die moet.
Offline Xan - 21/06/2007 12:33 (laatste wijziging 21/06/2007 12:44)
Avatar van Xan HTML interesse De reden waarom die content eronder blijft staan is denk ik omdat de breedte te groot is en daarom niet naast #leftContainer kan staan.

Wat je kunt doen is overal even een zwarte rand omheen doen, zo kun je zien wat elkaar overlapt.

ik stop altijd alles in 1 content div, met bijv een breedte van 800px;

maak je daar een menu in die links uitlijnt met een breedte 300px; dan kan daarnaast alleen nog maar een vakje van 500px;

voeg je een margin aan dat menu toe, bijv margin:0 5px 0 0; ( margin rechts van 5px) dan moet de breedte van het rechter vakje 495 px; worden.
anders komt dat vakje (zoals bij jou content) er automatisch onder te staan.
Mocht je nou padding gaan gebruiken in het menu, bijv padding:0 0 0 5px; ( padding van 5px rechts ) dan gaat dit van de breedte van het menu af, dus word het menu 295px;

zo tel ik altijd alles in de breedte op om te kijken of het uberhaupt wel in mijn content past, past het niet dan moet je even kijken hoeveel pixels je erover heen zit en dit ergens weg halen.

ik hoop dat je een beeetje begrijpt wat ik bedoel 
Offline shibble - 21/06/2007 12:43
Avatar van shibble MySQL interesse Dat is het hem juist ik heb het uitgerekent op de pixels naukerig er is zelfs nog genoeg ruimte over :O.
Offline Xan - 21/06/2007 12:44 (laatste wijziging 21/06/2007 12:45)
Avatar van Xan HTML interesse hm vreemde zaak

Het makkelijkst is nu denk ik die hele content even opnieuw opbouwen, dus alles er weer even uit en beginnen in een #content div en van daaruit alles weer opbouwen
Offline shibble - 21/06/2007 13:30 (laatste wijziging 21/06/2007 13:37)
Avatar van shibble MySQL interesse Jap, ik ben nu alles opnieuw aan het opbouwen,
ik heb nu een centerContainer er bijgezet,
en heb nu de headlines & recent matches erin gezet en staat goed naast elkaar nu de content gaan proberen !


EDIT

Het probleem is opgelost alleen nu zit ik dus nog met 1 probleem ben weer is te slim om te snel op de probleem opgelost te drukken,

http://www.shibble.eu/dislike

Als je nu kijkt heb ik aan de zijkanten de balken niet meer 
iemand die de oplossing weet
Offline Xan - 21/06/2007 13:42
Avatar van Xan HTML interesse voeg eens overflow:hidden toe aan #siteContainer
Offline shibble - 21/06/2007 13:47
Avatar van shibble MySQL interesse Ok,

Dat heeft hetprobleem van me zijkanten opgelost,
en dan echt de laatste vraag,

als je mijn menu tekst bekijkt, dan zie je dat het links bovenin is gecentreerd hoe kan ik dat mooi in het midden krijgen en over de hele balk verdeeld? is dat mogelyk?
Offline Xan - 21/06/2007 13:51
Avatar van Xan HTML interesse Om het te verdelen over de hele balk zul je de li's een breedte mee moeten geven zodat je het over de hele balk positioneerd.

Om de tekst mooi in het midden te krijgen moet je werken met padding:

Je zult even moeten experimenteren met hoeveel pixels dat is
om te beginnen: padding: 7px 0 0 0;
dan moet je de height van je menu veranderen naar -7px, dus 30px;
Offline shibble - 21/06/2007 13:53 (laatste wijziging 21/06/2007 14:45)
Avatar van shibble MySQL interesse Hmm hopelijk begrijp ik je goed, ik ga is ff experimenteren ik laat het je zo horen als het me gelukt is:D!

EDIT 1

Ok dat met de padding begrijp dat lukt . zit op 10 px ongeveer goed:) dus heb height naar 27px gezet.


EDIT 2
Dat menu maakt me niet zoveel uit maar ik weet wel hoe ik het nu kan doen want ik heb het bij recent matches gedaan met de volgende codes:

CSS
php code - Bekijk de code zonder highlighting - Klap code in 
  1. .rmatches_game {
  2. 	float: left;
  3. 	width: 18px;
  4. 	margin: 0;
  5. 	padding: 2px 0 0 5px;
  6. }
  7. 	.rmatches_oppo {
  8. 	float: left;
  9. 	width: 140px;
  10. 	margin: 0;
  11. 	padding: 2px 0 0 40px;
  12. }
  13. .rmatches_score {
  14. 	float: left;
  15. 	width: 40px;
  16. 	margin: 0;
  17. 	padding: 2px 0 0 0;
  18. }


html
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <li>
  2. 					<div class="rmatches_game"><img src="images/games/cs.gif" border="0" alt="CS" /></div>
  3. 					<div class="rmatches_oppo"><a href="#">vs digitalMind</a></div>
  4. 					<div class="rmatches_score">30-30</div>
  5.  
  6. 				</li>
  7. 				<li>
  8. 					<div class="rmatches_game"><img src="images/games/cs.gif" border="0" alt="CS" /></div>
  9. 					<div class="rmatches_oppo"><a href="#">vs digitalMind</a></div>
  10. 					<div class="rmatches_score">15-15</div>
  11. 				</li>
  12. 				<li>
  13. 					<div class="rmatches_game"><img src="images/games/cs.gif" border="0" alt="CS" /></div>
  14.  
  15. 					<div class="rmatches_oppo"><a href="#">vs digitalMind</a></div>
  16. 					<div class="rmatches_score">15-15</div>
  17. 				</li>
  18. 				<li>
  19. 					<div class="rmatches_game"><img src="images/games/cs.gif" border="0" alt="CS" /></div>
  20. 					<div class="rmatches_oppo"><a href="#">vs digitalMind</a></div>
  21. 					<div class="rmatches_score">15-15</div>
  22.  
  23. 				</li>
  24. 				<li>
  25. 					<div class="rmatches_game"><img src="images/games/cs.gif" border="0" alt="CS" /></div>
  26. 					<div class="rmatches_oppo"><a href="#">vs digitalMind</a></div>
  27. 					<div class="rmatches_score">15-15</div>
  28. 				</li>


en ga nu eindelyk met me favoriete deel beginnen:)

TemplatePower
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.42s