[CSS] Liquid/fixed Layout - Softwareontwikkeling

dinsdag 26 mei 2009 13:11

Acties:

0 Henk 'm!

int(e^x) = f(u)^n

Topicstarter

All,

ik ben wat aan het testen met CSS layouts (liquid, fixed, ....) maar ik kom nu het volgende tegen:

- De content DIV wordt in FF onder het menu geplaatst, waar hij dit correct ernaast plaatst in IE7.
- In IE7 is dit liquid en blijft ook naast het menu staan (correct), maar in FF dus niet (zie eerste punt).
- Wanneer ik de 'NavBar' instel als: display:none , dan vergroot de content ook (wat de bedoeling is) maar in FF dus niet

Wat is nu eigenlijk de bedoeling: Het wordt een C# project'je waarbij in de Header een flash geladen wordt met een menu. Via dit menu kan je je inloggen, maar zolang je niet ingelogd bent zie je geen 'persoonlijk menu' aan de linkerkant komen. (hier zou de content dus over de hele breedte moeten gaan) en nadat je succesvol ingelogd bent, komt er aan de linkerkant jou persoonlijke menu te staan.

Ik heb al verschillende zaken zitten testen met o.m. spelen met de 'floating', width, positioning etc... properties maar ik krijg het niet voor elkaar.

Ik denk dat het iets vrij 'simpel' zal zijn, maar het zijn meestal de simpele zaken die moeilijk te vinden zijn

HTML:

<body>
<div id="wrapper">
<div id="header">
    <h1>Flash(766px)</h1>
</div>
<div id="navbar">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>                             
    </ul>
</div>
<div id="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="footer"></div>
</div>
</body>

Cascading Stylesheet:

<style type="text/css">
body
{
    margin: 1px;
    padding: 1px;
    font-family: arial, helvetica, sans-serif;
    text-align:center;
}
        
#wrapper
{
    width:90%;
    margin:0 auto;
    text-align:left;
}

#header
{
    height: 50px;
    background-color: #666;
    margin-bottom: 10px;
}

#navbar
{
    float: left;
    width: auto;
    background-color: #bbb;
    margin-bottom: 10px;
}

#content
{
    float:left;
    /*width: 100%;*/
    background-color: #bbb;
    margin-bottom: 10px;
}

#footer
{
    clear: both;
    height: 50px;
    background-color: #666;
}

h1
{
    margin: 0;
    padding: 5px;
}

h2
{
    margin-top: 0;
    padding-top: 7px;
}

h2, p
{
    margin-left: 7px;
    margin-right: 7px;
}

</style>

ps: ik weet dat het niet op veel trekt, maar ben nu in eerste instantie aan het zoeken hoe ik de 'html' layout voor elkaar krijg....

[ Voor 1% gewijzigd door dj_vibri op 26-05-2009 13:14 . Reden: Css code beter uitgelijnd ]

Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling.

dinsdag 26 mei 2009 13:21

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Waarom zou je je content willen floaten?

En je navbar toggle je dan met display: none;

[ Voor 39% gewijzigd door BtM909 op 26-05-2009 13:23 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 26 mei 2009 13:29

Acties:

0 Henk 'm!

dj_vibri

int(e^x) = f(u)^n

Topicstarter

BtM909 schreef op dinsdag 26 mei 2009 @ 13:21:
Waarom zou je je content willen floaten?

echt overgekeken dus

Nog een bijkomend vraagje: Als ik nu mijn browser (FF, IE,...) resize dan maakt hij inderdaad de content kleiner maar uiteindelijk zal hij de overige content onder het menu laten gaan....

Ik ga nog wat zoeken want zal ook niet zo ingewikkeld zijn

Heb iets gevonden, geen idee of dit de correct manier is....
Als ik de margin-left van content wijzig naar bv. 150px (veel te veel maar bon) dan lukt het

dus nu nog uitzoeken wat de max. width van de menu zal worden.

merci!!!

En nu voel ik me echt .....

Mijn flash is 766px (fixed) dus kan ik gewoon mijn layout centreren en moet de content helemaal niet dynamisch zijn

en dan werkt het meteen (door oplossing van BtM

[ Voor 35% gewijzigd door dj_vibri op 26-05-2009 13:39 . Reden: mogelijke oplossing :) ]

Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling.