Toon posts:

[FF 1.5] Pagina doet niet wat ik wil...

Pagina: 1

Acties:

42 views sinds 30-01-2008
Reageer

zondag 25 december 2005 12:15

Acties:

It's a kind of magic

Topicstarter

Ik heb een probleem met FireFox 1.5. Ik weet overigens niet of het ook met een andere versie van FireFox is, maar mijn (nieuwe) lay-out voor mijn website is een beetje fucked up.
Wat is namelijk het geval:

Ik heb 3 div's gemaakt (1 voor menu, 1 voor de trackers aan de linkerkant en 1 voor de uiteindelijke content). De laatste 2 div's (dus die voor de trackers en de content) komen bij FireFox 1.5 naast het menu te staan, waar deze eigenlijk onder het menu zouden moeten komen.

Op http://www.flipdesign.nl/test.php staat het voorbeeld online en de CSS is te vinden op: http://www.flipdesign.nl/test.css

Echter, de pagina's zijn gewoon valid HTML + valid CSS (heb alleen wat waarschuwingen over de achtergrond kleur). Daarom snap ik ook niet wát er nou precies fout is aan de pagina.

Ik weet dat als je pagina succesvol door de pagina komen, dat je dan alleen maar voldoet aan de richtlijnen en dat je pagina dan niet per se semantisch gezien correct hoeft te zijn. Overigens is het wel zo, dat ik graag allebei zou willen, dus dat de pagina valid is én dat de pagina (semantisch gezien) correct is...

Resumerend is er dus het volgende:
Mijn nieuwe lay-out voor mijn website heeft correcte HTML + correcte CSS en toch laat FireFox de pagina niet zien zoals ik dat hebben wil.

Hier stond eerst nog wat code, maar heb ik verwijderd, lees een van de laatste postings door om te kijken welke code ik heb: [rml]GJ-tje in "[ FF 1.5] Pagina doet niet wat ik wil..."[/rml]

[ Voor 244% gewijzigd door CH4OS op 07-02-2006 19:28 ]

zondag 25 december 2005 12:53

Acties:

Devver

Pixelated

Geef je #nav een overflow:auto of hidden
Standard-compliant browsers clearen floats niet automatisch

Intentionally left blank

zondag 25 december 2005 12:57

Acties:

It's a kind of magic

Topicstarter

crisp schreef op zondag 25 december 2005 @ 12:53:
Geef je #nav een overflow:auto of hidden
Standard-compliant browsers clearen floats niet automatisch

Thnx, dit was de oplossing voor het probleem.

Echter is nu het menu niet meer zichtbaar, maar dit komt (denk ik) omdat er een hoogte mist of iets dergelijks, ik ga dit oplossen...

Opgelost door het menu een hoogte te geven...

Alleen snap ik dan nog niet de oplossing die ik moet hebben bij de trackers.
Ik wil daar namelijk dat die inspringing verdwijnt, die doe je (afaik) met margin / padding.
Ik heb deze (zoals hierboven aangegeven) ingesteld, maar alsnog werkt dit niet.
Zal ik dan voor de zekerheid een float moeten toevoegen?

<- Dat maakt dan een trapje ervan...

[ Voor 20% gewijzigd door CH4OS op 25-12-2005 13:02 ]

zondag 25 december 2005 17:43

Acties:

It's a kind of magic

Topicstarter

GJ-tje schreef op zondag 25 december 2005 @ 12:57:
[...]

Thnx, dit was de oplossing voor het probleem.

Echter is nu het menu niet meer zichtbaar, maar dit komt (denk ik) omdat er een hoogte mist of iets dergelijks, ik ga dit oplossen... Opgelost door het menu een hoogte te geven...

Alleen snap ik dan nog niet de oplossing die ik moet hebben bij de trackers.
Ik wil daar namelijk dat die inspringing verdwijnt, die doe je (afaik) met margin / padding.
Ik heb deze (zoals hierboven aangegeven) ingesteld, maar alsnog werkt dit niet.
Zal ik dan voor de zekerheid een float moeten toevoegen? <- Dat maakt dan een trapje ervan...

Ook dit probleem heb ik zojuist opgelost!

Kan ik weer verder met mijn lay-out...

maandag 26 december 2005 13:44

Acties:

It's a kind of magic

Topicstarter

Ik heb met FireFox 1.5 weer een ander probleem nu...
De div waar ik mijn uiteindelijke content wil presenteren, is op zich goed geplaatst, zoals te zien is aan de tekst, deze staat namelijk netjes iets op zij van de trackers (tracker div heeft een margin-right van 20px;).
Echter, ik heb voor de test even een border gedaan, om te zien waar en hoe dat ik werk en dat laat me een raar beeld zien in FireFox 1.5. Deze border begint namelijk helemaal links, over de tracker heen dus...

Heeft dit ook te maken met de door Crisp aangehaalde standard compliance mode? Of is er wat anders aan de hand?

De gebruikte CSS is als volgt:

Cascading Stylesheet:

div#trackers
{
    float: left;
    width: 200px;
    border-right: 1px solid #000;
    margin-right: 15px;
}

div#content
{
    border: 1px solid #000;
    width: 510px;
    padding: 10px;
    text-align: justify;
}

Een voorbeeldje is te zien op: http://www.flipdesign.nl/template.php

Kan het uiteraard oplossen door position te gebruiken, maar ik zie daar eigenlijk liever van af om eerlijk te zijn, omdat dit met de verschillende browsers overal een ander effect geeft helaas

Ik vind overigens wel dat FireFox 1.5 maar lastig doet hoor

[ Voor 21% gewijzigd door CH4OS op 26-12-2005 14:03 ]

maandag 26 december 2005 13:58

Acties:

Devver

Pixelated

Da's normaal; je #trackers is een float en valt dus buiten de normale flow. Derhalve begint je #content dus ook gewoon helemaal links, echter zal de inhoud van #content wel naar rechts worden 'gedrukt' vanwege de float.

Firefox interpreteerd itt IE de regels gewoon goed; als je IE als referentiekader neemt doe je het gewoon niet goed

[ Voor 23% gewijzigd door crisp op 26-12-2005 13:59 ]

Intentionally left blank

maandag 26 december 2005 14:04

Acties:

It's a kind of magic

Topicstarter

crisp schreef op maandag 26 december 2005 @ 13:58:
Da's normaal; je #trackers is een float en valt dus buiten de normale flow. Derhalve begint je #content dus ook gewoon helemaal links, echter zal de inhoud van #content wel naar rechts worden 'gedrukt' vanwege de float.

Firefox interpreteerd itt IE de regels gewoon goed; als je IE als referentiekader neemt doe je het gewoon niet goed

Nou ik ga dus gewoon uit van FireFox en ik wil het uiteraard ook goed hebben in FireFox, vandaar dat ik mijn probleem hier bij jullie neerleg, omdat ik geen oplossing meer weet voor dit... Als ik uitging van IE (en dus alleen IE zou supporten) had ik deze vraag niet eens gesteld...

Was alleen van mening dat FF 1.5 het raar doet, omdat ik er met FireFox < 1.5 nooit problemen hier mee heb gehad, vandaar...

Heb nu even je verhaal goed geïnterpreteerd... En heb het opgelost door #content ook een float: left te geven, thnx voor de hulp en dat met kerst

[ Voor 21% gewijzigd door CH4OS op 26-12-2005 14:08 ]

zaterdag 4 februari 2006 14:10

Acties:

It's a kind of magic

Topicstarter

Sorry dat ik mijn topic omhoog schop, maar ik heb weer een soortgelijk probleem als deze, alleen werkt het nu niet in FireFox en in Internet Explorer ook niet...

Ik heb geprobeerd om de code van Crisp weer te gebruiken, die van overflow: none; maar werkt niet... Of ik doe wat fout natuurlijk (en ik ga uit van het laatste).

De HTML-code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Flipdesign</title>
    <link rel="stylesheet" type="text/css" media="screen" href="test.css" />
</head>
<body>
    <div id="menu">
        Hier komt het menu
    </div>

    <div id="split">
        <div id="submenu">
            Laatste items $onderdeel:
            <ul>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>

                <li><a href="#">Item</a></li>
            </ul><br />
            Laatste items $anderonderdeel[1]:
            <ul>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>

                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul><br />
            Laatste items $anderonderdeel[2]:
            <ul>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>

                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul><br />
            Laatste reacties:
            <ul>
                <li><a href="#">Item</a></li>

                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul><br />

            Zoeken: 
            <form action="search.php" method="post">
                <table>
                    <tr>
                        <td><input name="zoekterm" /></td>
                        <td><input type="submit" value="Zoeken" /></td>
                    </tr>
                    <tr>
                        <td colspan="2">

                            <a href="search.php">Geavanceerd zoeken</a>
                        </td>
                    </tr>
                </table>
            </form><br />
            Tweakers.net:
            <ul>
                <li><a href="#">Item</a></li>

                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul><br />

            Frontpage.fok.nl:<br />
            <ul>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>

                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul><br />         
        </div>
        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean eu lorem quis sapien sodales luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus ac ipsum. Phasellus in ante. Quisque iaculis molestie orci. Nulla facilisi. Phasellus molestie felis sit amet magna. Sed mi diam, posuere nec, pulvinar non, cursus a, neque. Phasellus eu velit. Nunc turpis. Vestibulum pellentesque odio at dui vehicula dignissim. Quisque iaculis.</p>
            
            <p>Vivamus nec ipsum vel velit facilisis varius. Donec sapien odio, mattis mollis, elementum nec, lacinia non, diam. Pellentesque mauris. In eleifend euismod erat. Ut sed tortor. Vestibulum varius lacinia nunc. Nullam sit amet metus eu justo condimentum elementum. Duis eget eros. Vivamus in dolor ut urna eleifend pharetra. Praesent egestas. Aenean et quam sed mauris auctor aliquam.</p>

            
            <p>Fusce dignissim tristique diam. Nulla lobortis neque ut erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pharetra diam id pede. Maecenas adipiscing venenatis pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed bibendum massa sit amet justo. Curabitur porta molestie eros. Proin id lacus aliquet risus rhoncus varius. Ut et eros a urna hendrerit ultrices. Vestibulum quis odio id turpis euismod euismod. Etiam auctor purus id massa. Ut id nisl ut diam adipiscing feugiat. Aliquam vitae neque quis diam sagittis malesuada. Aenean tempus mi. Maecenas ut metus eget lorem dictum dictum. Suspendisse volutpat, ante id faucibus interdum, diam est cursus elit, ut eleifend elit magna eu sem. Integer iaculis ligula id nunc.</p>
            
            <p>Sed pulvinar consequat urna. Pellentesque volutpat. Proin sit amet lacus. Curabitur et quam. Vivamus accumsan felis nec nunc. In hac habitasse platea dictumst. Nulla facilisi. In quis quam id nunc vestibulum pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In lobortis risus vel arcu. Praesent leo nisl, facilisis eget, faucibus eget, pulvinar nec, turpis. Nunc suscipit tempus tellus. Praesent nunc. Cras nibh ipsum, malesuada et, condimentum vitae, hendrerit eget, leo. Aenean dictum. Aliquam ullamcorper mauris mollis pede. Integer eu metus. Suspendisse condimentum tellus.</p>
            
            <p>Vivamus tempor est id tellus. Fusce eros massa, eleifend at, placerat sed, bibendum eget, nisi. Suspendisse a est. Aliquam eu odio. Integer consequat molestie lorem. Praesent fringilla aliquet nisl. Cras ante mauris, pulvinar at, consectetuer ac, aliquet eget, odio. Mauris sed augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac neque. Mauris nec lectus quis urna blandit euismod. Pellentesque ante justo, iaculis pulvinar, vestibulum a, condimentum facilisis, odio. Praesent leo tellus, ornare ut, condimentum euismod, blandit in, sem. Nullam pede nisi, blandit ac, faucibus a, cursus ac, sapien. Duis blandit.</p>
            
            <p>Duis et metus id lacus elementum rhoncus. Duis nec quam. Mauris facilisis felis non justo euismod euismod. Mauris tempus purus non mi. Nunc nisl orci, vulputate id, facilisis in, adipiscing eu, lorem. Cras at erat. Aenean vitae diam in libero cursus rhoncus. Suspendisse pharetra purus eget nisi. Nam condimentum urna vitae tellus. Nunc dui arcu, eleifend non, accumsan a, consequat at, odio. Donec in nisl. Fusce sem. Vivamus neque. Proin molestie. Sed elementum, est sed lobortis tempor, tortor turpis ultricies tortor, placerat malesuada est quam tincidunt arcu.</p>
            
            <p>Curabitur interdum aliquam dui. Aliquam nonummy hendrerit neque. Vivamus dictum urna ut enim. In sit amet enim. Curabitur non neque. Aliquam ornare ante. Aenean pulvinar urna in libero. Proin ornare lorem ac pede. Donec quis augue id lacus vestibulum vestibulum. Vivamus diam tortor, dictum et, cursus nec, semper id, velit.</p>
            
            <p>Proin consequat pharetra sapien. Donec ut ipsum. Praesent metus nibh, fermentum non, rhoncus at, volutpat ut, velit. Nulla quam elit, pulvinar non, dignissim in, volutpat sit amet, neque. Nulla sit amet ipsum eget lectus sodales sagittis. Morbi ligula. Pellentesque lacus risus, viverra vitae, tempus sit amet, ultricies nec, tortor. Vestibulum diam. Sed non ante id massa vulputate pellentesque. In felis.</p>

            
            <p>Duis vitae lectus. Aenean condimentum felis nec velit. Maecenas iaculis tristique ligula. Sed blandit dui. Donec lacinia. In cursus fringilla augue. Curabitur et augue nec arcu feugiat congue. Fusce et urna fermentum lacus faucibus malesuada. Vestibulum venenatis viverra orci. Suspendisse potenti. Donec leo mi, placerat ut, aliquam sit amet, suscipit sit amet, massa. Vivamus luctus viverra neque. Suspendisse nec eros eget lorem rutrum auctor. Sed urna. Integer semper. Morbi eget metus. Vivamus commodo diam at nisi. Morbi vel leo. Vestibulum ut tortor.</p>
            
            <p>Nullam ultricies. Ut fermentum fringilla mi. Nulla vitae mauris. Duis sagittis, purus id aliquam euismod, pede augue egestas sem, eget ultricies sem risus sit amet magna. Sed lacus arcu, tempus vel, suscipit at, hendrerit vitae, leo. Proin varius convallis arcu. Fusce non eros lacinia diam interdum commodo. Morbi nibh orci, tristique nec, cursus vel, rutrum ut, dui. Vestibulum non elit. Nam nulla ante, gravida vitae, euismod sed, ornare quis, nisi. Vivamus ac magna sed nulla aliquam euismod. Ut sapien lectus, nonummy nec, eleifend a, fermentum quis, sapien. Integer eget quam eu tortor adipiscing consectetuer. Nulla ante eros, pretium ut, tincidunt et, ultricies quis, augue. In nunc. Pellentesque eget leo a metus auctor facilisis. Ut suscipit tincidunt nisl. Praesent sodales mollis est. Aliquam quis sem ac nunc blandit accumsan.</p>
            
            <p>In interdum pulvinar erat. Fusce id orci. Donec odio. In hac habitasse platea dictumst. Mauris lacinia, nulla quis consequat lacinia, lacus felis posuere eros, nec mollis orci sapien non nisl. Sed varius pede vel ipsum faucibus tristique. Aenean nisi risus, pretium nec, luctus in, laoreet quis, ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras vel neque. Ut diam augue, tristique eu, feugiat sed, laoreet eu, turpis. Quisque aliquam consectetuer quam. Aenean tincidunt lacinia ipsum. Etiam iaculis. Praesent tristique scelerisque nibh. Curabitur iaculis neque.</p>
            
            <p>Etiam metus est, molestie sed, facilisis sit amet, pretium at, nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ut massa quis risus lobortis molestie. Sed viverra vehicula odio. Praesent scelerisque turpis sed erat. Aenean ipsum lorem, pretium quis, porta ultrices, euismod a, diam. Praesent mattis nunc et elit. Curabitur vel dui ut tortor tincidunt porttitor. Pellentesque consequat mattis arcu. Ut a magna. Nunc rutrum eleifend nibh. Maecenas venenatis, mauris quis ornare mollis, nibh purus suscipit odio, non fermentum sapien tellus eu orci. Maecenas tincidunt. Curabitur malesuada.</p>
            
            <p>Integer leo. Suspendisse adipiscing ornare nibh. Integer convallis augue vel nunc. Donec neque enim, viverra eu, condimentum id, vehicula in, dolor. Sed consequat nibh sed tortor. Fusce tempor mi varius ipsum. Proin nec odio et purus auctor iaculis. Duis tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis metus ipsum, venenatis a, rutrum eu, tincidunt vitae, est. Nullam ut quam sed augue rutrum congue.</p>
            
            <p>Fusce bibendum adipiscing leo. Duis interdum turpis a diam. Cras laoreet blandit sapien. Quisque elementum egestas sem. Nam nulla pede, tempor id, placerat eu, suscipit a, leo. Cras consequat. Donec ut nisl. Integer eu pede. Maecenas porttitor posuere magna. Aliquam congue dui. Nam nisl nibh, iaculis sed, eleifend nec, placerat at, elit. Praesent in elit. Duis tincidunt luctus tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla a felis.</p>

            
            <p>Aenean ultrices. Integer aliquam, diam ac interdum lacinia, pede felis mollis ante, sed mattis velit velit nec magna. Cras hendrerit diam. Quisque auctor feugiat lorem. Aenean non nunc ut mi consequat varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec consequat tincidunt dolor. Duis ut urna ultrices neque fermentum cursus. Aliquam nunc nulla, eleifend pellentesque, consectetuer et, blandit eu, justo. Donec sit amet odio vitae felis molestie mattis. Mauris in enim in turpis euismod pretium. Proin tempor. Integer quis nisi ac lacus suscipit egestas. Nam tincidunt sagittis quam. Etiam commodo mollis justo. Praesent metus est, consequat in, varius nec, lobortis et, erat. Etiam suscipit mattis velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </div>
    </div>
</body>
</html>

En de CSS:

Cascading Stylesheet:

body
{
    font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Helvetica, sans-serif;
    margin: 0px;
    overflow: auto;
    
    background-image: url("bg_sides.gif");
    background-position: top;
    background-repeat: repeat-x;        
}

p
{
    margin-top: 0px;
}

input
{
    font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

div#menu
{
    width: 790px;
    height: 130px;
    
    background-image: url("bg_header.gif");
    background-position: center;
    
    color: #FFF;
    margin: auto;
    font-size: 12pt;
    
    text-align: center;
}

div#split
{
    background-image: url("bg.jpg");
    background-position: top;
    background-repeat: no-repeat;
    
    width: 790px;
    height: 1000px;
    
    margin: auto;
    padding-top: 10px;
    
    font-size: 10pt;
    overflow: none; /* Hier heb ik dus de oplossing van Crisp geprobeerd... */
}

div#submenu
{
    padding-left: 40px;
    margin-right: 15px;
    
    float: left;
    overflow: auto; /* Hier heb ik dus de oplossing van Crisp geprobeerd... */
}

div#submenu ul
{
    margin-left: 30px;
    list-style: none;
    padding: 0px;
    margin: 0px;
}

div#content
{
    padding-right: 40px;
    text-align: justify;
}

De pagina met het probleem is te bezichtigen op: http://www.flipdesign.nl/test.html. Ik zal de pagina door de validators heen gooien, misschien heb ik een foutje in de HTML en / of CSS...

Zowel HTML als CSS zijn goed bevonden volgens de validators...

[ Voor 26% gewijzigd door CH4OS op 04-02-2006 14:22 ]

zaterdag 4 februari 2006 14:23

Acties:

It's a kind of magic

Topicstarter

Voor FireFox is het probleem verholpen (de oplossing van Crisp werkte hier), echter wil IE nog niet zie ik nu...

Moet ik (voor IE) de div#content ook nog een float meegeven?

EDIT:
Ja, dit werkt voor IE, maar nu weigert FF weer dienst

Cascading Stylesheet:

body
{
    font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Helvetica, sans-serif;
    margin: 0px;
    overflow: auto;
    
    background-image: url("bg_sides.gif");
    background-position: top;
    background-repeat: repeat-x;        
}

p
{
    margin-top: 0px;
}

input
{
    font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

div#menu
{
    width: 790px;
    height: 130px;
    
    background-image: url("bg_header.gif");
    background-position: center;
    
    color: #FFF;
    margin: auto;
    font-size: 12pt;
    
    text-align: center;
}

div#split
{
    background-image: url("bg.jpg");
    background-position: top;
    background-repeat: no-repeat;
    
    width: 790px;
    height: 1000px;
    
    margin: auto;
    padding-top: 10px;
    
    font-size: 10pt;
}

div#submenu
{
    width: 200px; /* om te voorkomen dat #content zijn 'lijn' overschreidt */
    padding-left: 40px;
    margin-right: 15px;
    
    float: left;
}

div#submenu ul
{
    margin-left: 30px;
    list-style: none;
    padding: 0px;
    margin: 0px;
}

div#content
{
    width: 485px;
    padding-right: 40px;
    text-align: justify;
    overflow: auto;
    float: left;
}

Is Was de huidige CSS-code...

Zie hieronder

[ Voor 211% gewijzigd door CH4OS op 06-02-2006 16:48 ]

zondag 5 februari 2006 13:49

Acties:

It's a kind of magic

Topicstarter

Heb de oplossing al gevonden, een fixed width... Waar ik eigenlijk niet zo'n superfan van ben...

Dus als iemand een oplossing weet, waardoor ik die fixed width weg kan gooien, let me know!

[ Voor 94% gewijzigd door CH4OS op 05-02-2006 14:42 ]

maandag 6 februari 2006 15:11

Acties:

It's a kind of magic

Topicstarter

Met FireFox word op dit moment de achtergrond afbeelding, in het witte gedeelte (in het minden, onder het blauwe, waar je soort van 2 strepen ziet beginnen) niet (goed) weergegeven, any ideas hoe ik dat kan fixen? CSS is nagenoeg onveranderd, toch zal ik de huidige CSS code even geven:

Cascading Stylesheet:

body
{
    font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Helvetica, sans-serif;
    margin: 0px;
    overflow: auto;
    
    background-image: url("bg_sides.gif");
    background-position: top;
    background-repeat: repeat-x;    
}

p
{
    margin-top: 0px;
}

input
{
    font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

img
{
    border: none;
}

a
{
    color: #000;
}

a:link, a:visited
{
    text-decoration: none;
}

a:hover
{
    text-decoration: underline;
}

div#menu
{
    width: 790px;
    height: 130px;
    
    background-image: url("bg_header.gif");
    background-position: center;
    
    color: #FFF;
    margin: auto;
    font-size: 12pt;
    
    text-align: center;
}

div#split
{
    background-image: url("bg.jpg");
    background-position: top;
    background-repeat: no-repeat;
    
    width: 790px;
    
    margin: auto;
    padding-top: 10px;
    
    font-size: 10pt;
}

div#submenu
{
    width: 200px;
    padding-left: 40px;
    margin-right: 15px;
    
    float: left;
}

div#submenu ul
{
    margin-left: 30px;
    list-style: none;
    padding: 0px;
    margin: 0px;
}

div#content
{
    width: 485px;
    padding-right: 40px;
    text-align: justify;
    overflow: auto;
    float: left;
}

Enige wat ik dus echt heb veranderd, is de style op bepaalde tags, waarvan iig de <a> tag nu extra styles heeft...

[ Voor 97% gewijzigd door CH4OS op 06-02-2006 16:47 ]

dinsdag 7 februari 2006 17:07

Acties:

It's a kind of magic

Topicstarter

Kleine schop...

dinsdag 7 februari 2006 17:12

Acties:

Misschien moet je wat minder code posten en liever een linkje geven, dan kunnen we het zelf zien. Nu moeten we al die regels code eerst gaan bestuderen.

dinsdag 7 februari 2006 17:29

Acties:

It's a kind of magic

Topicstarter

Skaah schreef op dinsdag 07 februari 2006 @ 17:12:
Misschien moet je wat minder code posten en liever een linkje geven, dan kunnen we het zelf zien. Nu moeten we al die regels code eerst gaan bestuderen.

Een linkje naar het voorbeeld staat al in de startpost, maar wil hem wel nog een keer geven:
http://www.flipdesign.nl/test.php

dinsdag 7 februari 2006 19:46

Acties:

It's a kind of magic

Topicstarter

Ik heb even weer wat dingen geprobeerd en door de width en de text-align in comment te zetten van div#content, heb ik opeens de background in FF 1.5.0.1 terug (dit lijkt me dus een bug?

)

Echter is nu in IE de lay-out vernaggelt, wie kan me daarbij helpen?

Voorbeeld is te zien op http://www.flipdesign.nl/test.php en de CSS op http://www.flipdesign.nl/test.css

[ Voor 3% gewijzigd door CH4OS op 07-02-2006 19:49 ]

dinsdag 7 februari 2006 22:33

Acties:

Devver

Pixelated

Float clearing; geef je #split een overflow: auto of hidden * (in feite dus hetzelfde probleem als je met je #nav had)

* note dat deze oplossing in IE7 nog niet werkt dankzij bugs in IE7's overflow implementatie; hopelijk wordt dat gefixed voor de final release...

[ Voor 12% gewijzigd door crisp op 07-02-2006 22:34 ]

Intentionally left blank

woensdag 8 februari 2006 18:10

Acties:

It's a kind of magic

Topicstarter

Heb de #split een overflow: auto; gegeven, de overflow in #content laten staan, en de float in #content op comment gezet.

IE7 geeft hem nu goed weer, alleen IE6 weer niet, kijken wat die float van comment halen doet..

EDIT: Die float van comment halen in #content doet voor IE6 wonderen.

Alle browsers renderen de boel nu dus goed!

Mijn dank is dus groot!

$_/-\o_$

@ Crisp, ik wist dat ik (nagenoeg) hetzelfde probleem had als met de #nav, vandaar dat ik mijn eigen topic kickte

[ Voor 40% gewijzigd door CH4OS op 08-02-2006 18:16 ]

woensdag 8 februari 2006 22:14

Acties:

It's a kind of magic

Topicstarter

Zit net even naar mijn pagina (http://www.flipdesign.nl/test.php) te kijken en ik zie dat de achtergrond op het witte gedeelte in Opera 9 en FireFox (1.5.0.1) niet goed worden weergegeven, deze komen voor een gedeelte... Hoe kan ik dit oplossen?

De CSS: http://www.flipdesign.nl/test.css

Opgelost, was de float vergeten te zetten in #split...

[ Voor 11% gewijzigd door CH4OS op 08-02-2006 22:16 ]

maandag 5 juni 2006 20:34

Acties:

It's a kind of magic

Topicstarter

Sorry voor het kicken van dit topic, maar ik heb volgens mij weer een probleem wat lijkt op het probleem in dit topic... Ditmaal is IE weer het slachtoffer...

Heb een voorbeeldje online staan op: http://www.flipdesign.nl/index_new.php
FireFox geeft hem weer zoals ik wil dat ie weergegeven word, maar IE niet.
Wat ik dus wil, is dat je als het ware 2 kolommen krijgt... Echter houdt IE zich aan het begin hier wel netjes aan (logisch overigens) maar daarna, als de linkerkolom ophoudt, plakt IE de content van de rechter kolom onder de linker.

En zoals jullie kunnen raden, wil ik dit dus niet hebben...
De CSS is te zien op http://www.flipdesign.nl/css_new/css.css

Niet op de randjes letten trouwens, die heb ik er staan om te kijken wat de effecten zijn van aanpassingen...

[ Voor 10% gewijzigd door CH4OS op 05-06-2006 21:01 ]

maandag 5 juni 2006 23:30

Acties:

Splitting the thaum.

Ik vermoed dat je het op kan lossen door de div#content een width mee te geven, want je volgens mij nu niet doet

.

DM!

dinsdag 6 juni 2006 08:48

Acties:

It's a kind of magic

Topicstarter

JHS schreef op maandag 05 juni 2006 @ 23:30:
Ik vermoed dat je het op kan lossen door de div#content een width mee te geven, want je volgens mij nu niet doet .

Ik kan dit op dit moment niet proberen, zal dit vanavond doen als ik thuis ben, ben zelf alleen niet bepaald fan van om iets een fixed width te geven; but it's worth a try...

dinsdag 6 juni 2006 09:05

Acties:

Splitting the thaum.

GJ-tje: Nouja, het zou dan alleen voor IE zijn, die het toch gaat behandelen als min-width, dus ik denk dat in dit geval de consequenties wel meevallen

.

DM!

dinsdag 6 juni 2006 19:04

Acties:

It's a kind of magic

Topicstarter

JHS: Ik moest inderdaad op #content een width instellen en dan doet ie het goed.
Is er echt geen andere oplossing? Ik wil namelijk liever niet met width werken, maar met margins en paddings...

In FF is die nu aan de rechterkant iets smaller (niet dat dat wat uitmaakt, de content is goed te lezen...)

Na het fine-tunen van de width naar de maximaal haalbare breedte is het verschil nu minimaal...

Heb die borders nu even uitgezet en dan geeft het gelijk een ander gezicht; nu merk je er echt niks meer van... Als er geen andere oplossing voor is, laat ik het denk ik maar zo...

[ Voor 34% gewijzigd door CH4OS op 06-06-2006 19:10 ]

zondag 11 juni 2006 15:56

Acties:

It's a kind of magic

Topicstarter

Ja daar ben ik weer hoor, weer met het float probleem volgens mij.
Ik heb besloten om de content en het menu van plek te veranderen; de content heb ik nu links en het menu rechts.
Aangezien ik de content op de een of andere manier geen float kan geven, heb ik het menu een rechter float gegeven... Hij staat nu rechts, maar wel pas onder de content...
Een overflow op het menu kan niet, dan krijg ik scrollbalken, of ik moet de overflow op hidden zetten natuurlijk...

Maar heb ook een overflow op de content staan, deze is variabel en (waarschijnlijk) hoger dan dat het menu ooit worden zal...

Heb een voorbeeldje op http://www.flipdesign.nl/index_new.php en de bijbehorende CSS op http://www.flipdesign.nl/css_new/css.css

Tevens heb ik met IE bij het hoofdmenu (bovenaan de pagina) een vaag probleem... En ik weet ook niet echt de oplossing, het word pas duidelijk als je er met de muis overheen gaat...
Niet op de rode kleur letten, die staat er gewoon voor de test en aangezien ik kleurenblind ben, heb ik gewoon even een knal kleur nodig wil ik het goed zien

Elk item krijgt de achtergrond kleur, behalve Home, de linker, waarom dat dat is snap ik niet helemaal...

En de achtergrond kleur staat momenteel ook nog niet goed... Zal daar nog even naar kijken...

FF doet dit uiteraard wel gewoon goed

[ Voor 31% gewijzigd door CH4OS op 11-06-2006 16:07 ]

zondag 11 juni 2006 16:22

Acties:

Splitting the thaum.

Met betrekking tot het eerste: Zet gewoon float: left; op div#content en clear vervolgens de content

?

DM!

zondag 11 juni 2006 16:29

Acties:

It's a kind of magic

Topicstarter

JHS schreef op zondag 11 juni 2006 @ 16:22:
Met betrekking tot het eerste: Zet gewoon float: left; op div#content en clear vervolgens de content ?

Ik heb het geprobeerd, maar FF geeft nu wel een renderfoutje, zie de voorbeeldpagina...

zondag 11 juni 2006 16:31

Acties:

Splitting the thaum.

Je zal ook div#center moeten clearen

.

DM!

zondag 11 juni 2006 16:34

Acties:

It's a kind of magic

Topicstarter

JHS schreef op zondag 11 juni 2006 @ 16:31:
Je zal ook div#center moeten clearen .

Oke, heb ik gedaan, maar dan nog is de achtergrond te klein voor de content; heb nu overigens wel een overflow: hidden; op #rightmenu staan, als ik die bij content doe werkt ie niet

Hmmm... Ziet er naar uit dat ik de clear van CSS niet snap, ik duik even in de documentatie die er over te vinden is...

quote: http://www.w3schools.com/css/pr_class_clear.asp
Value Description
left No floating elements allowed on the left side
right No floating elements allowed on the right side
both No floating elements allowed on either the left or the right side
none Allows floating elements on both sides

Nou kan het misschien aan mij liggen, maar ik moet toch juist met floats gaan werken?

[ Voor 64% gewijzigd door CH4OS op 11-06-2006 16:39 ]

zondag 11 juni 2006 17:01

Acties:

Kop eens wat anders...

Clear werkt zo; stel voor dat je twee divs hebt, even voor het gemak links en rechts genoemd. Die staan zonder clears naast elkaar. Als je de linker een clear: right; geeft, dan zullen alle floats die er rechts van staan er onder komen (soort van enter zeg maar). Hetzelfde als je de rechter een clear: left; geeft; je geeft aan dat er geen elementen links van mogen floaten. Als een element clear: both; krijgt, dan zullen aan beiden kanten geen floats staan.

Probeer het eens uit met 3 even grote gekleurde blokken om het idee te doorzien

zondag 11 juni 2006 17:08

Acties:

It's a kind of magic

Topicstarter

Rowanov schreef op zondag 11 juni 2006 @ 17:01:
Clear werkt zo; stel voor dat je twee divs hebt, even voor het gemak links en rechts genoemd. Die staan zonder clears naast elkaar. Als je de linker een clear: right; geeft, dan zullen alle floats die er rechts van staan er onder komen (soort van enter zeg maar). Hetzelfde als je de rechter een clear: left; geeft; je geeft aan dat er geen elementen links van mogen floaten. Als een element clear: both; krijgt, dan zullen aan beiden kanten geen floats staan.

Probeer het eens uit met 3 even grote gekleurde blokken om het idee te doorzien

Maar waarom moet ik dan de clear op #center zetten?

Want als ik uitga van jouw uitleg en die goed interpreteer, kan ik concluderen dat ik juist mijn content een clear moet geven?

Ik interpreteerde dus wel verkeerd... Mijn excuses... Moet dus op #center een clear: both; hebben...
Maar dan mogen er toch links en rechts floats hangen? Of geld dat ook voor wat er in #center zit?

En toch snap ik nog niet echt, waarom de content nu over de achtergrond heen gaat...

Arg!! Ik word echt gek nu... Nog effe en ik sloop de boel... Snap er nu dus geen fuck meer van...

Heb het nu wel werkend in FF, dat de content links staat en het menu rechts, maar dat had ik zonder de clear: both op #center ook al voor elkaar... En in IE is die nu fucked up...

Zoals nu dus te zien is in de CSS... Dus nog een keer... Waarom moet ik clearen dan?

Om die floats weg te halen? Maar dan kan ik ze niet links of rechts zetten...

[ Voor 43% gewijzigd door CH4OS op 11-06-2006 17:17 ]

zondag 11 juni 2006 18:34

Acties:

Kop eens wat anders...

GJ-tje schreef op zondag 11 juni 2006 @ 17:08:
Ik interpreteerde dus wel verkeerd... Mijn excuses... Moet dus op #center een clear: both; hebben...
Maar dan mogen er toch links en rechts floats hangen? Of geld dat ook voor wat er in #center zit?

Als je 3 divs op rij hebt, met de middelste een clear: both; dan mogen er dus links en rechts van de middelste GEEN divs hangen, met als gevolg dat ze waarschijnlijk alle drie op een aparte regel staan.

Als je een container hebt, niet gepositioneerd en niet gefloat, met daarin floatende elementen. Dan moet je een "overflow: auto;" op de container zetten, anders gaat het niet goed.

Arg!! Ik word echt gek nu... Nog effe en ik sloop de boel... Snap er nu dus geen fuck meer van...

Ok, je legt nu je toetsenbord weer neer, laat je monitor los en haal adem

[ Voor 14% gewijzigd door Rowanov op 11-06-2006 18:35 ]

zondag 11 juni 2006 18:34

Acties:

Splitting the thaum.

Als je de testcase die ik stuurde wat verder had gelezen dan had je volgens mij gezien dat er daar ook uitgelegd staat wát dat clearen doet, waarom dat nodig is, en hoe het kan

.

DM!

zondag 11 juni 2006 18:39

Acties:

Kop eens wat anders...

Dit is misschien nog even handig om te lezen en dan vooral het gedeelte over document flow:
http://www.w3.org/TR/1998/REC-CSS2-19980512/visuren.html

zondag 11 juni 2006 18:51

Acties:

It's a kind of magic

Topicstarter

JHS schreef op zondag 11 juni 2006 @ 18:34:
Als je de testcase die ik stuurde wat verder had gelezen dan had je volgens mij gezien dat er daar ook uitgelegd staat wát dat clearen doet, waarom dat nodig is, en hoe het kan .

Die had ik dus gelezen, ik snap hem alleen niet...

Zal hem nog een keer lezen...

Maar op jouw testcase staan de divs toch niet over elkaar heen?

Eerder over elkaar heen, of zie ik dat nou verkeerd?

[ Voor 13% gewijzigd door CH4OS op 11-06-2006 18:52 ]

zondag 11 juni 2006 19:04

Acties:

It's a kind of magic

Topicstarter

Heb het probleem opgelost, of het een goeie / beste is weet ik niet.
Ik heb #center een clear: both; gegeven en een overflow: auto;
#center heeft een float: left; en #rightmenu heeft een float: right; gekregen...

Kan ik nu naar #headmenu kijken

Pagina: 1

Reageer