[CSS]Hulp met "DIV-iseren" website - Softwareontwikkeling

vrijdag 20 mei 2005 18:14

Acties:

It might get loud

Topicstarter

Ik heb een website die bestaat uit een frameset, met in het middelste frame weer een php pagina die is opgebouwd uit DIV's (het is wen weblogsysteem dat met DIV's werkt

):

Afbeeldingslocatie: http://img198.echo.cx/img198/7425/mo18ty.png

Ik wil hiervan een compleet met DIV's gamaakte pagina maken. Eigenlijk wil ik dat het "witte gedeelte", ongeacht een wel/niet gemaximaliseerd scherm, altijd gecentreerd staat en dat natuurlijk alle plaatjes op elkaar aansluiten. Enkele mogelijke mthodes die ik bedacht heb:
Afbeeldingslocatie: http://img280.echo.cx/img280/2062/mo27pt.png

Afbeeldingslocatie: http://img280.echo.cx/img280/2062/mo27pt.png

Nadeel: horizontaal centreren is erg lastig...

Afbeeldingslocatie: http://img280.echo.cx/img280/4259/mo31ok.png

Nadeel: verticaal centreren erg lastig

Afbeeldingslocatie: http://img280.echo.cx/img280/7452/mo47ge.png

Bij dit ontwerp weet ik helemaal niet of centreren wel mogelijk is...

Wat kan ik het best doen?

leoaq.fm // Jeune Loop

vrijdag 20 mei 2005 18:25

Acties:

Not Pingu

Dumbass ex machina

Heh? Centreren is toch niet moeilijk?

code:

css:

body{ text-align: center; width: 100%; height: 100%;} /*voor IE */

div#container{ text-align: left; margin: 0 auto;}


html:

<doctype enzo>
<html>
<body>
    <div id="container">
        ...je site hier...
    </div>
</body>
</html.

[ Voor 17% gewijzigd door Not Pingu op 20-05-2005 18:25 ]

Certified smart block developer op de agile darkchain stack. PM voor info.

vrijdag 20 mei 2005 18:31

Acties:

Verwijderd

http://annevankesteren.nl/test/templates/center-hv

Zoiets? Anders graag wat specifieker met eventueel wat probeersels van jezelf.

vrijdag 20 mei 2005 19:35

Acties:

Blaise

Als je je layout absoluut positioneert krijg je gezeik met het selecteren van tekst in IE. Als je hetzelfde effect ook met relatief positioneren kan bereiken kan je beter relatief doen, dan heb je dat selecteer-probleem niet.

Horizontaal positioneren vind ik overigens het makkelijkst, met een containerdiv:

Cascading Stylesheet:

html,body{
  margin:0;
  padding:0;
}

.container{
  position:relative;
  left:50%;
  width:700px;
  margin:0 0 0 -350px; /* helft 700 */
}

vrijdag 20 mei 2005 19:37

Acties:

HunterPro

volgens mij heb je het niet begrepen als je frameset-elementen nu in div's gaat prakken... keywords: ' semantisch correcte html '.

vrijdag 20 mei 2005 19:37

Acties:

Rowanov

Kop eens wat anders...

Dit werkt ook gewoon in de meest gebruikte browsers en is wat korter:

Cascading Stylesheet:

.container {
   width: 700px;
   margin: 0 auto;
}

edit:
Met dank aan HunterPro voor het op het idee brengen, hier een linkje over semantiek!

[ Voor 36% gewijzigd door Rowanov op 20-05-2005 19:38 ]

vrijdag 20 mei 2005 19:44

Acties:

sjaakaq

It might get loud

Topicstarter

Hmm dat van Anne werkt maar er is 1 probleem: de schaduw. De situatie zoals bij Anne's oplossing:
Afbeeldingslocatie: http://img271.echo.cx/img271/3281/13au.gif

Afbeeldingslocatie: http://img271.echo.cx/img271/3281/13au.gif

Perfect. Echter, ik wil dus een schaduw om "inhoud" heen. Mogelijke oplossingen:

-"inhoud" krijgt als bg-plaatje een schaduwplaatje (ze de schaduwranden zijn 20px), en alles binnen schaduw krijgt een margin van 20px. Echter op deze manier komt de scrollbalk dus over de schaduw heen:
Afbeeldingslocatie: http://img271.echo.cx/img271/4196/24gf.jpg

Afbeeldingslocatie: http://img271.echo.cx/img271/4196/24gf.jpg

Dus ik denk, ik doe het zo:
Afbeeldingslocatie: http://img271.echo.cx/img271/7328/34hp.jpg

Ik maak dus een extra DIV:

Cascading Stylesheet:

div#inner2{
   text-align: left;
   background-color: #fff;
   overflow-y: scroll;
   overflow-x: hidden;
   margin: 20 20 20 20;
}

In de PHP file:

PHP:

[...]
<div id="horizon">
  <div id="inner">
    <div id="inner2">
    <div id="deinhoudenzo">
         Inhoud dus
         </div>
    </div>
 </div>
</div>
[...]

Resultaat (in IE; daarin MOET ie iig werken):
Afbeeldingslocatie: http://img268.echo.cx/img268/1984/slecht9of.jpg

De margin lijkt niet echt te werken, de achtergrondkleur werkt niet, etc. Waar ligt dit aan dan?

[ Voor 8% gewijzigd door sjaakaq op 20-05-2005 19:47 ]

leoaq.fm // Jeune Loop

vrijdag 20 mei 2005 19:46

Acties:

Rowanov

Kop eens wat anders...

Lees de link uit mijn vorige post eens en denk eens na over semantiek. Wat jij wil kan met gemak, alleen houdt je nu zo vast aan het frames idee dat het nooit gaat werken.
//edit
Als je positioning gebruikt trek je een element uit de normale document flow, daar zou het wel eens aan kunnen liggen. Ter info, document flow is de volgorde waarop het normaal wordt weergegeven met nests etc.

[ Voor 40% gewijzigd door Rowanov op 20-05-2005 19:48 ]

vrijdag 20 mei 2005 19:50

Acties:

sjaakaq

It might get loud

Topicstarter

EDIT: bovenstaande werkte niet omdat de "echte inhoud" layers (dus de tekst en de grijze boxes rechts etc.) allemaal nog absoluut gepositioneerd waren (i.v.m. de "oude layout")

Nu ziet t er bijna goed en ga ik er wel uitkomen denk en hoop ik

Dank voor de hulp.

Hoezo frames? Ik probeer toch een layout en de opmaak daarvan (kleuren, achtergrond, plaatsing etc.) te vatten in CSS. De inhoud (de tekst dus) staat in een PHP bestand...of anders snap ik niet wat je bedoelt met "frames idee" want op dst screenshot is er geen enkel frame "in werking" hoor...

[ Voor 36% gewijzigd door sjaakaq op 20-05-2005 19:54 ]

leoaq.fm // Jeune Loop

vrijdag 20 mei 2005 19:57

Acties:

Verwijderd

Je kunt voor die schaduw de custom corners techniek van ALA wel gebruiken. Nu loopt je contents uit je shadow.

vrijdag 20 mei 2005 23:48

Acties:

Verwijderd

Zet 'overflow' op 'auto'. En gebruik niet de afzondelijke properties hiervoor. Overbodig en niet cross browser. (In ieder geval niet met Firefox 1.0 en Opera.)