CSS site-layout probleempje

Plaats reactie
Stino
Plus Member
Plus Member
Berichten: 163
Lid geworden op: 03 jan 2004, 13:49

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">
         &nbsp;
      </div>
   </body>
</html>


Iemand een idee voor die twee 'sub'-blokken netjes naast elkaar te krijgen?
Bijlagen
template.gif
(14.81 KiB) 138 keer gedownload
Gebruikersavatar
meon
Administrator
Administrator
Berichten: 16609
Lid geworden op: 18 feb 2003, 22:02
Twitter: meon
Locatie: Bree
Uitgedeelde bedankjes: 564 keer
Bedankt: 759 keer
Contacteer:

Stino
Plus Member
Plus Member
Berichten: 163
Lid geworden op: 03 jan 2004, 13:49

Meon, dan blijven die elementen niet binnen dat content-blok. Ik heb er een screenshot aan toegevoegd van hoe het er dan uitziet.
Bijlagen
templatefloat.gif
(13.03 KiB) 135 keer gedownload
Gebruikersavatar
meon
Administrator
Administrator
Berichten: 16609
Lid geworden op: 18 feb 2003, 22:02
Twitter: meon
Locatie: Bree
Uitgedeelde bedankjes: 564 keer
Bedankt: 759 keer
Contacteer:

Hehe :-)

Firefox s****. In IE zal het er wél goed uitzien (ik zit namelijk net met hetzelfde probleem).
wem
Premium Member
Premium Member
Berichten: 666
Lid geworden op: 24 mei 2004, 14:48

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
Stino
Plus Member
Plus Member
Berichten: 163
Lid geworden op: 03 jan 2004, 13:49

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.
Bijlagen
templateie.gif
(13.89 KiB) 137 keer gedownload
laris
Plus Member
Plus Member
Berichten: 109
Lid geworden op: 07 jul 2005, 17:10
Locatie: Hove

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)
Gebruikersavatar
meon
Administrator
Administrator
Berichten: 16609
Lid geworden op: 18 feb 2003, 22:02
Twitter: meon
Locatie: Bree
Uitgedeelde bedankjes: 564 keer
Bedankt: 759 keer
Contacteer:

Mijn probleem is ondertussen opgelost met het toevoegen van "display:table" aan de parent.
wem
Premium Member
Premium Member
Berichten: 666
Lid geworden op: 24 mei 2004, 14:48

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.
Stino
Plus Member
Plus Member
Berichten: 163
Lid geworden op: 03 jan 2004, 13:49

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!
laris
Plus Member
Plus Member
Berichten: 109
Lid geworden op: 07 jul 2005, 17:10
Locatie: Hove

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
Gebruikersavatar
meon
Administrator
Administrator
Berichten: 16609
Lid geworden op: 18 feb 2003, 22:02
Twitter: meon
Locatie: Bree
Uitgedeelde bedankjes: 564 keer
Bedankt: 759 keer
Contacteer:

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/
wem
Premium Member
Premium Member
Berichten: 666
Lid geworden op: 24 mei 2004, 14:48

meon schreef:Validate my xhtml/css2: http://www.anigraphics.be/


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
laris
Plus Member
Plus Member
Berichten: 109
Lid geworden op: 07 jul 2005, 17:10
Locatie: Hove

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
Gebruikersavatar
meon
Administrator
Administrator
Berichten: 16609
Lid geworden op: 18 feb 2003, 22:02
Twitter: meon
Locatie: Bree
Uitgedeelde bedankjes: 564 keer
Bedankt: 759 keer
Contacteer:

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.
Gebruikersavatar
Snakehit
Elite Poster
Elite Poster
Berichten: 806
Lid geworden op: 05 mei 2004, 15:37
Locatie: Izegem, Belgie
Contacteer:

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? :?
Gebruikersavatar
meon
Administrator
Administrator
Berichten: 16609
Lid geworden op: 18 feb 2003, 22:02
Twitter: meon
Locatie: Bree
Uitgedeelde bedankjes: 564 keer
Bedankt: 759 keer
Contacteer:

Vervang bij die knopkes eens de top en left en zet in de plaats eens: "float: left;" ?
Gebruikersavatar
Snakehit
Elite Poster
Elite Poster
Berichten: 806
Lid geworden op: 05 mei 2004, 15:37
Locatie: Izegem, Belgie
Contacteer:

css

Ziet er al veel beter uit, nu nog die dingen onderaan krijgen 8)
Gebruikersavatar
Snakehit
Elite Poster
Elite Poster
Berichten: 806
Lid geworden op: 05 mei 2004, 15:37
Locatie: Izegem, Belgie
Contacteer:

Gefixt

CSS
Gebruikersavatar
meon
Administrator
Administrator
Berichten: 16609
Lid geworden op: 18 feb 2003, 22:02
Twitter: meon
Locatie: Bree
Uitgedeelde bedankjes: 564 keer
Bedankt: 759 keer
Contacteer:

Steek die in een nieuwe <div>.
Je geeft namelijk in de HTML net aan dat die dingen over de achtergrond heen moet komen.
Gebruikersavatar
Snakehit
Elite Poster
Elite Poster
Berichten: 806
Lid geworden op: 05 mei 2004, 15:37
Locatie: Izegem, Belgie
Contacteer:

Code: Selecteer alles

      
<p class="center">
    <img src="images/sfeerbeeld.gif" alt="sfeerbeeld" />
</p>


In de class="center"

Code: Selecteer alles

.center {
   text-align: center;
}


Is dit de goede manier om uw afbeelding te centreren via css?
Ik denk van niet :oops:
laris
Plus Member
Plus Member
Berichten: 109
Lid geworden op: 07 jul 2005, 17:10
Locatie: Hove

Ik denk dat het goed is zo
Gebruikersavatar
Snakehit
Elite Poster
Elite Poster
Berichten: 806
Lid geworden op: 05 mei 2004, 15:37
Locatie: Izegem, Belgie
Contacteer:

ondertussen heb ik een 2de site in css zitten samenwerken, echt beetje per beetje gaat css echt nice worden!

snakehit.be
Plaats reactie

Terug naar “Development”