[CSS] Firefox height - Softwareontwikkeling

woensdag 5 juli 2006 17:52

Acties:

Verwijderd

Topicstarter

Hallo,

Ik heb een probleem.

In IE loopt dat grijze content vlak gewoon netjes door. Net zover als het menu.
In FF loopt ie niet door.
Hoe krijg ik dit goed?

Stukje code:

code:

/**----------------------------------Gebruikers menu----------------------------------**/
.menu {
    background-color: #3d3d3d;
    width: 192px;
    float: right;
    vertical-align: top;
    height: 100%;   
    
    padding: 0 0 0 0;
    margin-bottom: 1px;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    margin: 0;
    margin-bottom: 1px;
}

.menu li a {
    display: block;
    padding: 5px 5px 5px 5px;
    border-left: 5px solid #454545;
    background-color: #454545;
    color: #ffffff;
    text-decoration: none;
    width: 100%;
}

html>body .menu li a {
    width: auto;
}

.menu li a:hover {
    border-left: 5px solid #6d6d6d;
    background-color: #4d4d4d;
}


/**----------------------------------Content----------------------------------**/

.content {
    width: 588px;
    background-color: #efefef;
    float: left;
    text-align: justify;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    height: 100%;
}

Alvast bedankt, $_/-\o_$

Gijz

woensdag 5 juli 2006 18:11

Acties:

mithras

Als je nu

Cascading Stylesheet:

1	#content{bottem:0}

geeft?
En anders, logisch nadenken: zal ooit je menu langer worden dan je content?
Laat maar, je gebruikt tables

offtopic:
En nu de tables

reacties afwachten

Als je nu een container-div maakt, en daarin 4 verschillende div's positioneert:

code:

<div id="container">
     <div id="title">[img]"images/header.gif></div>
[/img]Welkom enzo</div>
     <div id="content">Hier blabla enzo</div>
     <div id="menu">
          <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Dump</a></li>
               <li><a href="#">Contact</a></li>
               <li><a href="#">Links</a></li>
          </ul>
     </div>
</div>

Je kan dan makkelijk css verwijzen naar id's, zodat je elk blok uniek kan opmaken.
Zo stel je je container juiste breedte in en geef je "margin:0, auto, o, auto" mee zodat hij gecentreerd wordt. Daarna geef je de content een "float:left" en het menu "float:right" mee. (wel bijv een <br style="clear:both"> toevoegen

) En zo heb je een mooie site die werkt (die had je al) en die semantisch een stuk beter is!

[ Voor 111% gewijzigd door mithras op 05-07-2006 18:19 ]

woensdag 5 juli 2006 19:01

Acties:

Verwijderd

Topicstarter

Bedankt voor je reactie!

Ik snap het alleen niet echt met die container gedoe.
Ik heb nu dus dit in me index gezet ipv die tabellen (Tabellen had ik gebruikt omdat het eerst niet werkte)

code:

<body>

<div id="container">
     <div id="header"></div>
     <div id="gebruiker">Welkom enzo</div>
     <div id="content">Hier blabla enzo</div>
     <div id="menu">
          <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Dump</a></li>
               <li><a href="#">Contact</a></li>
               <li><a href="#">Links</a></li>
          </ul>
     </div>
</div>

</body>
</html>

Nu krijg ik alleen helemaal geen opmaak.
Wat moet ik wijzigen in de .css?

Bedankt,
Gijz!

woensdag 5 juli 2006 21:22

Acties:

Verwijderd

Je moet dan in je css de punt . in een hekje # veranderen omdat je id gebruikt ipv class.

En je kan ook beter het H1 (H#) element stylen ipv een div als header te stylen.

woensdag 5 juli 2006 21:32

Acties:

mithras

Verwijderd schreef op woensdag 05 juli 2006 @ 19:01:
Bedankt voor je reactie!

Ik snap het alleen niet echt met die container gedoe.
Ik heb nu dus dit in me index gezet ipv die tabellen (Tabellen had ik gebruikt omdat het eerst niet werkte)
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>

<div id="container">
     <div id="header"></div>
     <div id="gebruiker">Welkom enzo</div>
     <div id="content">Hier blabla enzo</div>
     <div id="menu">
          <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Dump</a></li>
               <li><a href="#">Contact</a></li>
               <li><a href="#">Links</a></li>
          </ul>
     </div>
</div>

</body>
</html>
Nu krijg ik alleen helemaal geen opmaak.
Wat moet ik wijzigen in de .css?

Bedankt,
Gijz!

Een id geef je aan met een # zoals je een class aangeeft met een .(punt). Je css kan er dan bijv zo uitzien:

Cascading Stylesheet:

#container{
    position: relative;
    width: 792px;
    margin: 0px auto 0px auto;
}
#header{
    position: relative;
    height: 113px;
    background-image: url("images/header.gif");
}
#gebruiker{
    position: relative;
    height: 50px;
}
#menu{
    position: absolute;
    width: 100px;
    float: right;
}
#content{
    position: relative;
    width: 692px;
    min-height: 105px;
    float: left;
}

Dit is ongeveer copy/paste van delen uit mn css, met nog een deel uit mn hoofd. Er zullen wat overbodige dingen in staan, maar die moet je er zelf maar ff extra uithalen.

Verwijderd schreef op woensdag 05 juli 2006 @ 21:22:
Je moet dan in je css de punt . in een hekje # veranderen omdat je id gebruikt ipv class.

En je kan ook beter het H1 (H#) element stylen ipv een div als header te stylen.

Als je de site eerder had gezien, zag je dat de header een plaatje heeft, deze. En die is vrij lastig met tekst te stylen

[ Voor 35% gewijzigd door mithras op 05-07-2006 21:36 . Reden: id's goed zetten en width aanpassen adhv plaatje ]

woensdag 5 juli 2006 22:06

Acties:

Verwijderd

Mithras86 schreef op woensdag 05 juli 2006 @ 21:32:
Als je de site eerder had gezien, zag je dat de header een plaatje heeft, deze. En die is vrij lastig met tekst te stylen

Waarom?

Cascading Stylesheet:

h1 {
    height: 113px;
    width: 792px;
    background-image: url("images/header.gif");
}

[ Voor 5% gewijzigd door Verwijderd op 05-07-2006 22:06 ]

woensdag 5 juli 2006 22:23

Acties:

mithras

Verwijderd schreef op woensdag 05 juli 2006 @ 22:06:
[...]

Waarom?
Cascading Stylesheet:
1
2
3
4
5
h1 {
    height: 113px;
    width: 792px;
    background-image: url("images/header.gif");
} 

Waarom gebruik je dan een h1 element? Oke, je kan het als header zien, en in de ruime zin van het woord kan je het wel "misbruiken" (want dat is het naar mijn mening). Een div als blokelement gebruiken is ook niet de juiste bedoeling om de "logo" aan te geven, maar mij lijkt eerder dat een h1 gebruikt zal moeten worden in de #content bijvoorbeeld. Ik had het namelijk in eerste instantie ook geen 'header' maar 'title' genoemd.
Als je het zo minimaal wil doen, kan je ook een <img id="title"> neerzetten. Alleen heb je dan geen background-image van een blok, maar het plaatje gewoon neergezet.
Kijk, het kan allemaal, en dit zijn uiteindelijk de details die er naar mijn mening niet zo heel erg toe doen. Maar semantisch zou ik niet zo gauw weten wat nu echt de bedoeling hier is.

woensdag 5 juli 2006 22:35

Acties:

Verwijderd

Topicstarter

Bedankt allemaal, maar in ie zie ik nu geen menu, en in firefox wordt de rand niet helemaal weergeven.

Wat houdt die <br style="clear: both;" /> dan eigenlijk in?

[ Voor 42% gewijzigd door Verwijderd op 05-07-2006 22:37 ]

woensdag 5 juli 2006 22:37

Acties:

mithras

Verwijderd schreef op woensdag 05 juli 2006 @ 22:35:
Bedankt allemaal.

Wat houdt die <br style="clear: both;" /> dan eigenlijk in?

Omdat je floating elements gebruikt, moet je die floating weer weghalen. Deze css parameter clear je weer met "clear:both". Dit kan je in een <div>, <p> of <span> stoppen, maar dan krijg je weer iets van <div class="clear">&nbsp</div> en dan kies ik toch echt voor <br style="clear:both"> of je geeft die br een id of class mee.

/edit: je hebt nu alleen je content helemaal 100% gezet, dus die valt voor x% achter je menu. Verder zie je nu het effect van die clear:both: je container div loopt niet door tot de onderkant

offtopic:
En ik denk dat je het nu wel zelf afkan?

[ Voor 28% gewijzigd door mithras op 05-07-2006 22:40 ]

woensdag 5 juli 2006 22:48

Acties:

Verwijderd

Topicstarter

Mithras86 schreef op woensdag 05 juli 2006 @ 22:37:
[...]

Omdat je floating elements gebruikt, moet je die floating weer weghalen. Deze css parameter clear je weer met "clear:both". Dit kan je in een <div>, <p> of <span> stoppen, maar dan krijg je weer iets van <div class="clear">&nbsp</div> en dan kies ik toch echt voor <br style="clear:both"> of je geeft die br een id of class mee.

/edit: je hebt nu alleen je content helemaal 100% gezet, dus die valt voor x% achter je menu. Verder zie je nu het effect van die clear:both: je container div loopt niet door tot de onderkant

offtopic:
En ik denk dat je het nu wel zelf afkan?

En waar moet je die <br style="clear:both"> neer zetten?

woensdag 5 juli 2006 22:51

Acties:

mithras

Gewoon achter de elementen waar je een float hebt toegepast:

code:

<div id="container">
     <div id="header"></div>
     <div id="gebruiker">Welkom enzo</div>
     <div id="content">Hier blabla enzo</div>  <!-- hier een float -->
     <div id="menu">   <!-- hier een float -->
          <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Dump</a></li>
               <li><a href="#">Contact</a></li>
               <li><a href="#">Links</a></li>
          </ul>
     </div>
     <br style="clear:both">
</div>

woensdag 5 juli 2006 22:56

Acties:

Verwijderd

Topicstarter

Mithras86 schreef op woensdag 05 juli 2006 @ 22:51:
Gewoon achter de elementen waar je een float hebt toegepast:

code:

<div id="container">
     <div id="header"></div>
     <div id="gebruiker">Welkom enzo</div>
     <div id="content">Hier blabla enzo</div>  <!-- hier een float -->
     <div id="menu">   <!-- hier een float -->
          <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Dump</a></li>
               <li><a href="#">Contact</a></li>
               <li><a href="#">Links</a></li>
          </ul>
     </div>
     <br style="clear:both">
</div>

Nou is het bijna allemaal goed, alleen het menu staat nu onder de content..

woensdag 5 juli 2006 23:01

Acties:

Verwijderd

Float:left zorgt er voor dat je ipv elementen boven->beneden stapelen, links->rechts gaat stapelen. Als je dat cleart, dan gaattie weer verder met boven->beneden stapelen.

Het clear:both element moet je dus gewoon eronder plakken.

edit:
beetje laat...

[ Voor 8% gewijzigd door Verwijderd op 05-07-2006 23:02 ]