Pagina 1 van 1
CSS site-layout probleempje
Geplaatst: 01 jan 2006, 23:16
door Stino
Toen ik bezig was aan het ontwerp voor een webapplicatie stuitte ik op hetvolgende probleem:
Ik wil in een content-blok, twee blokken naast elkaar zetten. Het is best dat je even in de bijgevoegde screenshot kijkt om te zien wat ik bedoel. De twee blokken binnen het grote blok wil ik naast elkaar krijgen.
Hier is de css die ik momenteel gebruik:
Code: Selecteer alles
body{margin: 0px; color: #333; font-family: verdana, arial, helvetica, sans-serif; background-color: #fff; font-size: 11px;}
img {border: 0px solid #000000;}
br {clear: left;}
a{font-weight: bold; font-size: 11px; color: #09c; text-decoration: none;}
a:link{color: #09c;}
a:visited{color: #07a;}
a:hover{color: #000;}
.menuleft{left: 10px; position: absolute; top: 37px;}
.menuright{right: 10px; position: absolute; top: 37px;}
.menu{padding: 10px; width: 100px; position: relative; margin-bottom: 10px; border: 1px solid #999; background: #eee;}
.contents{margin: 10px 10px 10px 140px;}
.content{border: 1px solid #999; background: #eee; padding: 10px; text-align: justify; margin-bottom: 10px; position: relative;}
.content_left{padding-top: 10px; margin-bottom: 10px; width: 40%; padding-left: 60%; position: relative;}
.content_right{padding-top: 10px; margin-bottom: 10px; padding-right: 60%; position: relative;}
.content_title{font-weight: bold;}
.header, .footer{border-top: 1px solid #999; border-bottom: 1px solid #999; background-color: #eee; text-indent: 10px; margin-top: 10px; height: 15px; width: 100%;}
op devolgende pagina:
Code: Selecteer alles
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
Application title
</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
Application title
</div>
<div class="contents">
<div class="content">
<span class="content_title">Title</span>
<div class="content_right">Lorem ipsum ... dolor sit amet.</div>
<div class="content_left">Duis autem ... aliquam erat volutpat.</div>
</div>
<div class="content">
<span class="content_title">Title</span>
</div>
<div class="content">
<span class="content_title">Title</span>
<p>Ut wisi ... nulla facilisi.</p>
<p>Nam liber ... commodo consequat.</p>
<p>Duis autem ... nulla facilisis.</p>
</div><!-- SECTION START menu_left -->
<div class="menuleft"><div class="menu">
<a href="index.php">Index</a>
<br />
</div><div class="menu">
<a href="#">Lorem</a><br />
<a href="#">Ipsum</a><br />
<a href="#">Dolor</a><br />
</div></div>
<!-- SECTION END menu_left --> </div>
<div class="footer">
</div>
</body>
</html>
Iemand een idee voor die twee 'sub'-blokken netjes naast elkaar te krijgen?
Geplaatst: 01 jan 2006, 23:46
door meon
Geplaatst: 01 jan 2006, 23:57
door Stino
Meon, dan blijven die elementen niet binnen dat content-blok. Ik heb er een screenshot aan toegevoegd van hoe het er dan uitziet.
Geplaatst: 02 jan 2006, 10:31
door meon
Hehe
Firefox s****. In IE zal het er wél goed uitzien (ik zit namelijk net met hetzelfde probleem).
Geplaatst: 02 jan 2006, 11:09
door wem
meon schreef:Hehe
Firefox s****. In IE zal het er wél goed uitzien (ik zit namelijk net met hetzelfde probleem).
ik denk dat er wel meer mensen met dat probleem zitten.
Hoe ik het gedeeltelijk heb kunnen oplossen is de div's die je naast elkaar wil in floats te zetten, en alles dat eronder moet komen komt ook in een float terecht. Zo kan je visueel wel bereiken wat je wil, maar het ziet er natuurlijk niet echt goed uit als je outlining opzet in je webdeveloper-plugin
Het grote probleem is (denk ik) dat er na een DIV de meeste browsers automatisch een endline zetten, terwijl deze in jou geval bijvoorbeeld echt niet gewenst is.
Voor een deel hebben browser hierin schuld, maar als ze dat nu in het goede veranderen, dan worden een heel aantal huidige pagina's niet meer "correct" weergegeven.
Als er enkel tekst in weergegeven moet worden heb je kans dat de p-tag bij jou ook werkt in plaats van de div-tag, maar daar heb je dan weer andere beperkingen :-S
Geplaatst: 02 jan 2006, 12:23
door Stino
Sorry dat ik u ga moeten teleurstellen meon, maar in IE ziet het er allemaal nog slechter uit. Merci voor de tips Wem, vanavond probeer ik verder.
Geplaatst: 02 jan 2006, 20:28
door laris
meon schreef:Hehe
Firefox s****. In IE zal het er wél goed uitzien (ik zit namelijk net met hetzelfde probleem).
Firefox s**** omdat ge ni mee CSS kunt werken tegoei (hiermee zeg ik niet dat ik er zoveel van ken)
Geplaatst: 02 jan 2006, 20:31
door meon
Mijn probleem is ondertussen opgelost met het toevoegen van "display:table" aan de parent.
Geplaatst: 02 jan 2006, 21:59
door wem
laris schreef:Firefox s**** omdat ge ni mee CSS kunt werken tegoei (hiermee zeg ik niet dat ik er zoveel van ken)
Een straffe uitspraak, kunt ge er ook meer gedetailleerd bijzegge waarom, want CSS aanpasse/make doe ik bijna uitsluitend in firefox (WebDeveloper plugin), dan valideren, en dan zien of andere browsers het ook goed weergeven.
Geplaatst: 03 jan 2006, 15:50
door Stino
meon schreef:Mijn probleem is ondertussen opgelost met het toevoegen van "display:table" aan de parent.
Merci meon, dat heeft bij mij ook geholpen. Ik heb bij beide de float op left gezet, zodat ze tegen elkaar steunen.
Het is nog niet helemaal naar mijn goesting, maar het komt al in de buurt!
Geplaatst: 03 jan 2006, 15:53
door laris
wem schreef:laris schreef:Firefox s**** omdat ge ni mee CSS kunt werken tegoei (hiermee zeg ik niet dat ik er zoveel van ken)
Een straffe uitspraak, kunt ge er ook meer gedetailleerd bijzegge waarom, want CSS aanpasse/make doe ik bijna uitsluitend in firefox (WebDeveloper plugin), dan valideren, en dan zien of andere browsers het ook goed weergeven.
Oei, oei slechte verwoording
Ik wou bedoelen hiermee dat firefox juist wél css goed weergeeft (of toch beter als IE), ongelukkig uitgedrukt
en dat meon vind dat firefox s**** omdat hij niet goed genoeg met css kan werken
Geplaatst: 03 jan 2006, 16:00
door meon
laris schreef:en dat meon vind dat firefox s**** omdat hij niet goed genoeg met css kan werken
Validate my xhtml/css2:
http://www.anigraphics.be/
Geplaatst: 03 jan 2006, 16:17
door wem
CSS: 25 warning (als 'k goe geteld heb), maar geen errors
XHTML: niks errors of warnings op homepage, maar op bv.
http://www.anigraphics.be/?projects.rmz
geeft dit het volgende resultaat: Result: Failed validation, 1 error
Geplaatst: 03 jan 2006, 16:20
door laris
meon schreef:laris schreef:en dat meon vind dat firefox s**** omdat hij niet goed genoeg met css kan werken
Validate my xhtml/css2:
http://www.anigraphics.be/
uwen xhtml is proper en css valt wel mee
Dan zijt ge een van de weinigen die vind da firefox s**** om mee css te werken
Geplaatst: 03 jan 2006, 16:30
door meon
laris schreef:uwen xhtml is proper en css valt wel mee
Dan zijt ge een van de weinigen die vind da firefox s**** om mee css te werken
Ik zei gewoon FireFox s****; ook FF doet niet altijd wat je verwacht in CSS. Dit is gewoon 1 geval waarbij IE bij mij wél renderde zoals ik verwachtte.
Nu, ik vind het nog altijd niet zaligmakend, het hele "webstandaarden"-verhaal. Zo moet je nog altijd omweg-technieken gebruiken om dingen klaar te krijgen, je kan gewoon niet alles definiëren.
Ik moet wel zeggen dat via de developer toolbar het realtime CSS-editen handig is, maar dit is niet FF, maar die toolbar (ergo third party tool).
Overigens is de CSS nog niet opgeruimd, het is nog steeds Work-In-Progress.
Geplaatst: 05 jan 2006, 16:05
door Snakehit
CSS Probleemke:
css
Zoals je waarschijnlijk ziet zijn de ondeste buttons niet helemaal correct geplaatst, je snapt denk ik wel wat ik wil bereiken?
Kan er me eens iemand uitleggen wat die positioning relative, absolute uitlegt.
Relative: is dat niet ten opzichte van het bovenliggende element?
Absolute: totaal van uw scherm. Maar als je dan resized trekt dat op niks meer.
Iemand ideeën?
Geplaatst: 05 jan 2006, 16:30
door meon
Vervang bij die knopkes eens de top en left en zet in de plaats eens: "float: left;" ?
Geplaatst: 05 jan 2006, 16:42
door Snakehit
css
Ziet er al veel beter uit, nu nog die dingen onderaan krijgen
Geplaatst: 05 jan 2006, 16:46
door Snakehit
Geplaatst: 05 jan 2006, 16:48
door meon
Steek die in een nieuwe <div>.
Je geeft namelijk in de HTML net aan dat die dingen over de achtergrond heen moet komen.
Geplaatst: 05 jan 2006, 18:34
door Snakehit
Code: Selecteer alles
<p class="center">
<img src="images/sfeerbeeld.gif" alt="sfeerbeeld" />
</p>
In de class="center"
Is dit de goede manier om uw afbeelding te centreren via css?
Ik denk van niet
Geplaatst: 05 jan 2006, 19:29
door laris
Ik denk dat het goed is zo
Geplaatst: 06 jan 2006, 14:02
door Snakehit
ondertussen heb ik een 2de site in css zitten samenwerken, echt beetje per beetje gaat css echt nice worden!
snakehit.be