[CSS] Faux Columns weigeren dienst... - Softwareontwikkeling

maandag 25 februari 2008 12:34

Acties:

Topicstarter

Hi everybody,

ik zit al een paar dagen met het volgende probleem en ik kan er maar geen oplossing voor vinden. Heel simpel gezegd wil ik een site maken met daarin een header, navigatiebar, footer en natuurlijk content. (Iets wat me overigens in frames of tables feilloos lukt)

Dit als geheel wil ik in de browser gecentreerd weergeven met een maximale breedte van 1004 (1024px - 20px Browserchrome om zo de horizontale scrollbar niet te tonen, en dus meer ruimte over te houden).

Ik heb middels div's de pagina opgedeeld in secties, en met CSS de layout proberen aan elkaar te knopen. Helaas heb ik geen webspace dus kan ik niets uploaden momenteeel van site om te demonstreren... ik zal het met code alleen moeten doen.

HTML:

<body>
  <div class="MyClass" id="header">
    <img src="images/header1.png"/>
  </div>
  <div class="MyClass" id="container">
  <div class="MyClass" id="sidebar">
    <a>Home</a><br />
    <a>Info</a><br />
    <a>Gallerij</a><br />
    <a>Contact</a><br />
  </div>
  <div class="MyClass" id="content">
    <h1>Nieuws</h1>
    <h2>24 februari 2008</h2>
    <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</span>
  </div>
  <div class="MyClass" id="footer">
    <span>2008 ©</span>
  </div>
</div>
</body>

Cascading Stylesheet:

body  {
    background:url(images/bg.png);
    background-color:#FFB1EF;
    background-repeat:repeat-x;
    font-family:Calibri;
    margin:auto;
    text-align:center;
}
.MyClass #container {
    background: #BA4EA4 url(images/columns.png);
    background-repeat: repeat-y;
    margin:auto;
    text-align:left;
    width:1004px;
} 
.MyClass #content { 
    background: #FFFFFF;
    color: #000;
    float:right;
    margin-left: 200px;
    text-align: left;
    vertical-align: top;
    width: 804px;
} 
.MyClass #content h1{
    color:#009900;
    font-size:16px;
}
.MyClass #content h2{
    color:#009900;
    font-size:14px;
    text-align:right;
}
.MyClass #content span{
    color:#000;
    font-size:12px;
    text-align:justify;
}
.MyClass #footer { 
    background:#DB64BA;
    border: solid 1px #BE56AB;
    clear:both;
    height:25px;
    margin:auto;
    text-align:left;
    width:1004px;
} 
.MyClass #footer span{
    color:#FFFFFF;
    font-size:11px;
}
.MyClass #header {
    background:#b975a8;
    height:90px;
    margin:auto;
    width:1004px;
} 
.MyClass #sidebar {
    background: #803b71;
    border: solid 1px #B975A8;
    color:#000;
    float:left;
    text-align:left;
    vertical-align: top;
    width: 198px;
}
.MyClass #sidebar a{
    color:#FFFFFF;
    height:100%;
    padding-left:10px;
}

Zoals te zien is, gebruik ik bij de container het "Faux Columns" principe:
background: #BA4EA4 url(images/columns.png);
background-repeat: repeat-y;
maar, dit plaatje is dus niet in de browser te zien.... zowel in FF als IE niet

Tevens een probleem is dat de Header en de Footer wél prima gecentreerd worden weergeven, maar dat de Sidebar tegen de linkerscherm rand aanleunt, en de Content tegen de rechterschermrand. Terwijl beiden in een Container DIV zitten die 1004px breed is..... en dus áls ik al float:left / right doe.... tegen die DIV-rand aan moeten gaan plakken. Wellicht dat daardoor ook de Faux columns niet willen werken, maar ik vraag me af waarom. (De image daarentegen is wél juist, precies 1004px breed). Uiteraard zodra het principe wel werkt, dan haal ik uit de CSS de background bij de content en de sidebar weg.

Heb overigens bij de Sidebar margin-left op auto gezet, idem voor Content, maar ook dit mocht niet baten.

Kan iemand me helpen met wat ik over het hoofd zie? Want raar vind ik het wel.

[ Voor 5% gewijzigd door F-Tim op 25-02-2008 12:40 ]

Wanna play?

maandag 25 februari 2008 12:49

Acties:

marko77

Als ik zo even dit snel test werkt het idd niet.

Wat me opvalt is dat je classes en ids beide tegelijk in je stylesheet gebruikt, beetje nutteloos imo.
Als ik deze regel aanpas:

.MyClass #container

in

#container

Dan werkt het wel correct hier (FF2). Ik denk dat als je de id's alleen benoemd in je stylesheet dat het dan wel werkt, het loopt nu door elkaar (tis maandag dus kan even de exacte fout niet bepalen

).

Mijn rig

maandag 25 februari 2008 12:56

Acties:

MoietyMe

zij/haar

Je cleared je conteiner div nergens. Dit kun je oplossen met een clear:both; op je footer.

maandag 25 februari 2008 13:08

Acties:

Patriot

Fulltime #whatpulsert

Het feit dat hij nu naar elementen met de gegeven id's gaat zoeken IN elementen met de klasse MyClass speelt vast mee. Wat Marko77 dus in feite ook zegt, gewoon even .MyClass voor die id's weghalen.

maandag 25 februari 2008 13:18

Acties:

F-Tim

Topicstarter

Good Fella schreef op maandag 25 februari 2008 @ 12:56:
Je cleared je conteiner div nergens. Dit kun je oplossen met een clear:both; op je footer.

Die staat er wel degelijk in

kijk maar goed

Had overigens de klasse .MyClass, zodat ik naderhand de classe in een variabele kon zetten om zo evt middels state van CSS klasse te kunnen wisselen. Maargoed, das voor latere zorg. Eerst even de MyClass weghalen. Dan laat ik m'n bevindingen eventjes weten.

Heb de MyClass weggehaald, en dat heeft idd al enig voordeel, dat de div's zich tenminste binnen de container div plaatsen. En dus niet meer aan de rand van het scherm. Das al een vooruitgang.

Laatste probleem wat dan nu overblijft is dat de div's niet op dezelfde hoogte zitten, maar onder elkaar....

code:

1 2	[Div1] [Div2]

ipv
[Div1][Div2]....

nog even verder spelen ermee

[ Voor 27% gewijzigd door F-Tim op 25-02-2008 13:24 ]

Wanna play?

maandag 25 februari 2008 14:00

Acties:

marko77

De 2e div wordt right gefloat, als je die left float, zonder left margin gaat het wel goed.

Mijn rig

maandag 25 februari 2008 14:36

Acties:

F-Tim

Topicstarter

marko77 schreef op maandag 25 februari 2008 @ 14:00:
De 2e div wordt right gefloat, als je die left float, zonder left margin gaat het wel goed.

Problem, als ik die left float, zonder margin-left, dan toont hij het goed in IE, maar niet in FF

Heb het ondertussen al opgelost, geen float invullen. Margin-left op 200, en de Width ook weghalen (of op auto zetten). Dan toon hij ze wél naast elkaar, mét Faux columns en in IE en FF hetzelfde

Wanna play?

maandag 25 februari 2008 14:47

Acties:

Grijze Vos

marko77 schreef op maandag 25 februari 2008 @ 12:49:
Als ik zo even dit snel test werkt het idd niet.

Wat me opvalt is dat je classes en ids beide tegelijk in je stylesheet gebruikt, beetje nutteloos imo.
Als ik deze regel aanpas:

.MyClass #container

in

#container

Dan werkt het wel correct hier (FF2). Ik denk dat als je de id's alleen benoemd in je stylesheet dat het dan wel werkt, het loopt nu door elkaar (tis maandag dus kan even de exacte fout niet bepalen ).

Dat is niet zo gek, want die eerste regel zegt dus "een element met id=container in een element met class=MyClass".

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

maandag 25 februari 2008 15:03

Acties:

marko77

Grijze Vos schreef op maandag 25 februari 2008 @ 14:47:
[...]

Dat is niet zo gek, want die eerste regel zegt dus "een element met id=container in een element met class=MyClass".

Klopt als een bus, maar ja maandagochtend he

Mijn rig