[CSS] Float in een css table werkt niet goed

[Verwijderd]

Ik heb het volgende, vrij simpele, probleem waar ik maar niet uit kom. Ik heb overal gezocht naar een antwoord, maar wat ik ook probeer het lijkt niet te werken. Een deel van mijn xhtml code was nog in html tables en dat wilde ik veranderen, dat is voor het grootste gedeelte gelukt, behalve een stukje waar twee columns naast elkaar moeten komen te staan. Dit lukt maar niet, wat ik ook probeer. De meest rechtse column blijft maar naar links wijken of onder de eerste column. Kan iemand mij helpen?

Een screenshot van het gedeelte rechts van de site (de zwarte border is van de container).



De xhtml code:

code:

    <div class="floatRight clear">www.cguide.net &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
    <div id="search">
    <form action="" method="get" id="searchform">
    <div class="containingbox">
        <div class="top_floatRight">
            <input type="text" name="word" size="35" />
        </div>
        <div class="top_floatRight">
            <img src="resources/images/btn-go.jpg" />
        </div>
        </form>
    </div></div>
    <div id="logo"><a href="#"><img src="resources/images/logo.png" width="133" height="135" alt="The Computer Guide" /></a></div>
    <div id="topmenu">
      <ul>
        <li class="$tablestyle1"><a href="?page=index"><img alt="Home" src="resources/images/menu-Home.png" width="44" height="14" /></a></li>
        <li class="$tablestyle2" align="Left"><a href="?page=processes"><img alt="Home" src="resources/images/menu-processes.png" width="76" height="14" /></a></li>
        <li class="$tablestyle3"><a href="?page=drivers"><img alt="Home" src="resources/images/menu-drivers.png" width="54" height="14" /></a></li>
        <li class="$tablestyle4"><a href="?page=dll"><img alt="Home" src="resources/images/menu-dllFiles.png" width="68" height="14" /></a></li>
        <li class="$tablestyle5"><a href="?page=viruses"><img alt="Home" src="resources/images/menu-viruses.png" width="63" height="14" /></a></li>
        <li class="$tablestyle6" style="text-align:center"><a href="?page=manuals"><img src="resources/images/menu-manuals.png" width="81" height="14" alt="manuals" /></a></li>
      </ul>
    </div>  

</div>

<div style="padding-left:25px;"><img src="resources/images/menu-separator.jpg" width="940" height="15" /></div>

De CSS code:

code:

* {
    margin: 0px;
    padding: 0px;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    background-color: #FFF;
    text-align: center;
    background-image: url(resources/images/main_bg.jpg);
    background-repeat: repeat-y;
    background-position: center;
}
.cguide
{
    padding-right:10px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    font-weight:bold;
    color:#000;
}
a img {
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}
ul {
    list-style-type: none;
}

#wrapper {
    text-align: left;
    width: 990px;
    background-image: url(../images/bg-wrapper.jpg);
    background-repeat: repeat-y;
    background-position: left top;
    margin-right: auto;
    margin-left: auto;
}
#header {
    background-image: url(../images/bg-header.jpg);
    background-repeat: repeat-x;
    background-position: left top;
    height: 180px;
    border-bottom-width: 30px;
    border-bottom-style: solid;
    border-bottom-color: #569ED6;
    width: 940px;
    margin-top: 0px;
    margin-right: 25px;
    margin-bottom: 0px;
    margin-left: 25px;
}
#logo {
    float: left;
    height: 102px;
    width: 133px;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 15px;
}

.alignLeft {
    text-align: left !important;
}

#search {
    float: right;
    height: 35px;
    clear: right;
    width: 263px;
    font-size: 14px;
    line-height: 40px;
    margin-right: 5px;
    margin-top: 3px;
}
#search input {
    background-image: url(resources/images/bg_serch.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    border: 2px solid #B5CAD8;
    height: 30px;
    margin-right: 0px;
    float: right;
}
#topmenu {
    float: left;
    margin-top: 8.7%;
}
#topmenu li {
    float: left;
}

.clear {
    clear: both;
}
.clearLeft {
    clear: left;
}
.clearRight {
    clear: right;
}
.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.containingbox
{
    width: 200px;
    height: 40px;
    border: 1px solid #000;
}
        
.top_floatRight {
    float: right;
    width: 100px;
    height: 40px;

}

.tabStyleEnabledLast {
    background-image: url(../images/bg-enabledTabLast.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 31px;
    width: 160px;
    padding-top: 16px;
    text-align: center;
}
.tabStyleEnabled1 {
    background-image: url(../images/bg-enabledTab1.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 31px;
    width: 160px;
    padding-top: 16px;
    text-align: center;
}
.tabStyleDisabled1 {
    background-image: url(../images/bg-disabledTab1.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 31px;
    width: 117px;
    padding-top: 18px;
    text-align: center;
}
.tabStyleDisabled2 {
    background-image: url(../images/bg-disabledTab2.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 31px;
    width: 126px;
    padding-top: 18px;
    text-align: center;
}
.tabStyleDisabled3 {
    background-image: url(../images/bg-disabledTab3.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 31px;
    width: 151px;
    padding-top: 18px;
    text-align: center;
}
.tabStyleDisabled4 {
    background-image: url(../images/bg-disabledTab4.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 31px;
    width: 132px;
    padding-top: 18px;
    text-align: center;
}
.tabStyleDisabled5 {
    background-image: url(../images/bg-disabledTab5.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 31px;
    width: 121px;
    padding-top: 18px;
    text-align: center;
}
.tabStyleDisabled6 {
    background-image: url(../images/bg-disabledTab6.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 31px;
    width: 125px;
    padding-top: 18px;
    text-align: center;
}

#content {
    width: 990px;
    background-repeat: repeat-y;
}
.roundBox {
    background-image: url(../images/bg-RoundBoxBottom.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    height: 440px;
    height:auto !important;
    min-height:440px;
    width: 736px;
    text-align: left;
    margin-top: 0px;
    margin-right: 13px;
    margin-bottom: 0px;
    margin-left: 13px;
    padding-bottom: 13px;
    float: right;
    background-color: #FFF;
}
.roundBox .topRound {
    background-image: url(../images/bg-RoundBoxTop.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 440px;
    height:auto !important;
    min-height:440;
    padding-top: 5px;
    padding-right: 50px;
    padding-bottom: 5px;
    padding-left: 50px;
}


#menuLeft {
    width: 200px;
    float: left;
    margin-left: 3px;
}
#menuLeft ul {
    background-image: url(../images/bg-leftMenuul.jpg);
    background-repeat: repeat-y;
    background-position: right top;
}
#menuLeft li a:link, #menuLeft li a:active, #menuLeft li a:visited  {
    display:block;
    background-image: url(../images/mnu-leftDisabled.jpg);
    background-repeat: no-repeat;
    background-position: -3px top;
    background-color:#FFF;
    height: 32px;
    width: 200px;
    float: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    text-indent: 45px;
    line-height:32px;
    font-style:italic;
}

#menuLeft li a:hover  {
    display:block;
    background-image: url(../images/mnu-leftEnabled.jpg);
    background-repeat: no-repeat;
    background-position:-3px top;
    height: 32px;
    width: 200px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size: 14px;
    color: #3a6676;
    text-indent: 45px;
    line-height:32px;
    font-style:italic;
}#contentArea {
    background-color: #D1E2E8;
    padding-top: 0px;
    padding-right: 25px;
    padding-bottom: 0px;
    padding-left: 14px;
    background-image: url(../images/fix-menuBg.jpg);
    background-repeat: repeat-y;
    background-position: 0px top;
}
#adbox {
    padding-left: 36px;
    text-align: center;
    width: 154px;
}
#adbox div {

}
.roundBoxbt {
    background-image: url(../images/bg-RoundBoxBottom.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    width: 736px;
    text-align: left;
    margin-top: 0px;
    margin-right: 13px;
    margin-bottom: 0px;
    margin-left: 13px;
    padding-bottom: 13px;
    float: right;
    background-color: #FFF;
}
.roundBoxbt .topRoundbt {
    background-image: url(../images/bg-RoundBoxTop.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 50px;
}

/* Tableless stuff */

.tableless{
padding: 5px;
}

div.fieldwrapper{ /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/
width: 550px; /*width of rows*/
overflow: hidden;
padding: 5px 0;
}

div.topwrapper{ /* Top Wrapper */
width: 100%; /*width of rows*/
/*overflow: hidden;
padding: 5px 0;*/
}

div.topwrapper label.logo{ /* Top Wrapper:logo */
width: 17%; /*width of rows*/
/*overflow: hidden;
padding: 5px 0;*/
}

div.topwrapper label.cgtext { /* Top Wrapper:text */
height: 32px; /*width of rows*/
/*overflow: hidden;
padding: 5px 0;*/
}

div.topwrapper label.search { /* Top Wrapper:search */
height: 101px; /*height of rows*/
width:  78%;
/*overflow: hidden;
padding: 5px 0;*/
}


div.fieldwrapper label.styled{ /* label elements that should be styled (left column within fieldwrapper DIV) */
float: left;
width: 150px; /*width of label (left column)*/
text-transform: lowercase;
border-bottom: 1px solid navy;
margin-right: 15px; /*spacing with right column*/
}

div.fieldwrapper label.styledH{ /* HEADER! label elements that should be styled (left column within fieldwrapper DIV) */
float: left;
width: 150px; /*width of label (left column)*/
text-transform: uppercase;
font-weight: bold;
background: navy;
color: #FFF;
border-bottom: 1px solid black;
margin-right: 15px; /*spacing with right column*/
}

div.fieldwrapper div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldwrapper DIV) */
float: left;
margin-bottom: 10px; /* space following the field */
}

div.fieldwrapper div.thefield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */
width: 250px;
}

div.fieldwrapper div.thefield textarea{ /* style for TEXTAREA fields. */
width: 300px;
height: 150px;
}

div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/
margin-top: 5px; /*space above buttonsdiv*/
}

div.buttonsdiv input{ /* style for INPUT fields within 'buttonsdiv'. Assumed to be form buttons. */
width: 80px;
background: #e1dfe0;
}

Firebug geeft als resultaat een zwarte streep door de float: right code.

Een tweede probleem waar ik ook al uren mee aan het worstelen ben is dat er een witte lijn tussen het menu en de content daaronder blijft staan. Die krijg ik maar niet weg, behalve als ik dit stuk (dat ik nodig heb) weg haal:

code:

<div style="padding-left:25px;"><img src="resources/images/menu-separator.jpg" width="940" height="15" /></div>

Firebug zegt hier niks van...

Een screenshot daarvan:



Ik heb naar het plaatje gekeken, daar zit geen whitespace in en ik heb de height aangepast zonder enig resultaat.

[ Voor 100% gewijzigd door Verwijderd op 10-01-2009 14:36 ]

[Saeverix]

De eerste indruk als ik je code bekijk is: Wat een rommeltje...
Als ik het zo bekijk heb je overal wat code weg gehaalt en dit in je site gebruikt. Opzich niets mis mee, maar begrijp je ook wat je doet?

Zoals bijvoorbeeld je 2e probleem. Je zet een <IMG> in een <DIV>. Mijn vraag is dan: Waarom? Waarom stel je dat plaatje niet in als achtergrond van de <DIV> en zet je in je CSS de afmetingen van die <DIV>?

Het gebruik van <IMG> kun je het beste beperken tot het afbeelden van foto's en dergelijke, maar niet onderdelen van je design.

Ik denk dat die witte ruimte namelijk komt omdat de Line-height standaard hoger is dan de 15 pixels van je plaatje. Daardoor krijg je die witte ruimte. Het is dan waarschijnlijk op te lossen door de Line-height lager te zetten in de <DIV>, maar gebruik liever de oplossing met de achtergrond van de <DIV>.

Diezelfde bedenkingen heb ik bij je Search form code. Allemaal erg omslachtig. Dit moet allemaal met 1 <DIV> kunnen en een standaard Button welke je vervolgens weer styled in je CSS.

En als laatste nog een vraag: Waarom gebruik je XHTML? Want ik zie erg veel mensen XHTML gebruiken omdat veel code editors dit standaard aangeven. Niet omdat ze er een reden voor hebben.
En maak je gebruik van een DOCTYPE?

[ Voor 9% gewijzigd door Saeverix op 10-01-2009 14:48 ]

[Verwijderd]

Bedankt voor je reply Werner. De code is idd heeeel erg rommelig, maar dit staat nog op mijn todo lijst. Het eerste probleem heb ik inmiddels weten te verhelpen, ik heb gewoon de div's in andere volgorde gezet. De eerste float div op de tweede positie en de tweede op de eerste.

Waarom ik XHTML wil gebruiken? Vooral voor SEO gebruik en cross-browser compatibility.
Ik gebruik de volgende doctype:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Ik zal je tip over het tweede probleem gaan proberen, thanks!!

[ Voor 20% gewijzigd door Verwijderd op 10-01-2009 15:21 ]

[Saeverix]

Wat betreft SEO zie ik geen voordeel om XHTML boven HTML te gaan gebruiken... En als je Valid HTML Strict code gebruikt zal het er ook in alle browser het zelfde uitzien. Als je Loose gebruikt klopt het dat verschillende browsers verschillende resultaten kunnen geven.

En heb je mijn tip over de Search Box ook gelezen? Want de manier die je nu gebruikt is niet echt nuttig en zeker niet logisch. Evenals het vele gebruik van <IMG> tags voor je layout.

http://annevankesteren.nl/2004/02/xhtml-versus-html (Leuk artikel met discussie over XHTML tov HTML)

Ook is het gebruik van Afbeeldingen in je Menu niet aan te raden. Zeker als je op SEO gericht wilt werken.
Het begin is er: Je gebruik een <UL> voor je menu. Maar het is jammer dat je er dan alsnog <IMG> in gebruikt.

Als ik de stijl (CSS) uit zou schakelen op je site dan zie ik een <UL> met plaatjes. Als ik de plaatjes er ook nog bij uitschakel zie ik niks meer.
Zoekmachines zien ook geen plaatjes. Dus volgens mij is een tekst link op het gebied van SEO veel beter.

Kijk eens hier: http://wvstudios.nl/dev/ui/
Dat is een Interface die ik aan het ontwikkelen ben voor mijn CMS. Zodra je de stijl uitzet zie je een netjes <UL> menu met tekst links.

De basis van het menu kun je vinden op: http://www.alistapart.com/articles/slidingdoors/

En daar komt bij dat je nu voor elk menuitem een aparte afbeelding hebt. Als je een extra menuitem wilt gaan toevoegen moet je een heel nieuw plaatje maken. Als je gebruik maakt van mijn manier hoef je alleen een <LI> met een snelkoppeling toe te voegen.

Scheelt werk, en laadtijd van de website.

[ Voor 48% gewijzigd door Saeverix op 10-01-2009 17:00 ]

[Verwijderd]

Bedankt voor alle tips Werner!! Ik heb die twee problemen nu opgelost en ben de code aan het opschonen.

[crisp]

Saeverix schreef op zaterdag 10 januari 2009 @ 16:53:
Wat betreft SEO zie ik geen voordeel om XHTML boven HTML te gaan gebruiken... En als je Valid HTML Strict code gebruikt zal het er ook in alle browser het zelfde uitzien. Als je Loose gebruikt klopt het dat verschillende browsers verschillende resultaten kunnen geven.

Ook met een Transitional doctype zal je niet snel tegen verschillen aanlopen. De grootste verschillen zitten 'm in quirksmode (geen (volledige) doctype) versus standards-compliant mode (wel een volledige doctype - ongeacht welke).

XHTML is puur een XML-serialisatie van HTML, dus SEO-wise maakt dat geen bal uit. In de praktijk wordt XHTML echter in 99% van de gevallen gewoon als text/html verstuurd en dus ook als HTML behandeld door useragents.

[mcDavid]

crisp schreef op zaterdag 10 januari 2009 @ 22:58:
[...]

Ook met een Transitional doctype zal je niet snel tegen verschillen aanlopen. De grootste verschillen zitten 'm in quirksmode (geen (volledige) doctype) versus standards-compliant mode (wel een volledige doctype - ongeacht welke).

XHTML is puur een XML-serialisatie van HTML, dus SEO-wise maakt dat geen bal uit. In de praktijk wordt XHTML echter in 99% van de gevallen gewoon als text/html verstuurd en dus ook als HTML behandeld door useragents.

Sterker nog de meest gebruikte browser (IE) hééft nieteens een XML-render engine en heeft dus geen keus dan het als gewone HTML te behandelen.

[teh_twisted]

dit heeft niets met je probleem te maken maar dacht geef je toch een tipje over css:

code:

.tabStyleDisabled5 {
    background-image: url(../images/bg-disabledTab5.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 31px;
    width: 121px;
    padding-top: 18px;
    text-align: center;
}
.tabStyleDisabled6 {
    background-image: url(../images/bg-disabledTab6.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 31px;
    width: 125px;
    padding-top: 18px;
    text-align: center;
}

kan ook worden:

code:

.tablStyle {
    background-repeat: no-repeat;
    background-position: left top;
    text-align: center;
    padding-top: 18px;
}
.tabStyleDisabled5 {
    background-image: url(../images/bg-disabledTab5.jpg);
    height: 31px;
    width: 121px;
}
.tabStyleDisabled6 {
    background-image: url(../images/bg-disabledTab6.jpg);
    height: 31px;
    width: 125px;
}

scheelt toch weer paar regeltjes in je uiteindelijke code en je weet zeker dat het consistenter is/wordt... dit apply je door te doen:

<.... class="tabStyleDisabled5 tabStyle">

good luck!

[mcDavid]

teh_twisted schreef op zaterdag 10 januari 2009 @ 23:08:
dit heeft niets met je probleem te maken maar dacht geef je toch een tipje over css:

[knip]

scheelt toch weer paar regeltjes in je uiteindelijke code en je weet zeker dat het consistenter is/wordt... dit apply je door te doen:

<.... class="tabStyleDisabled5 tabStyle">

good luck!

ipv dubbele classnames kun je ook het parent-element een class geven en in de css in plaats van
.tablestyle{}
dit doen:
.classname_van_parentelement div {}

vind ik persoonlijk een prettiger oplossing.

[teh_twisted]

mcDavid schreef op zaterdag 10 januari 2009 @ 23:16:
[...]


ipv dubbele classnames kun je ook het parent-element een class geven en in de css in plaats van
.tablestyle{}
dit doen:
.classname_van_parentelement div {}

vind ik persoonlijk een prettiger oplossing.

idd kan ook tis net wat je prettiger vind idd

[crisp]

mcDavid schreef op zaterdag 10 januari 2009 @ 23:06:
[...]

Sterker nog de meest gebruikte browser (IE) hééft nieteens een XML-render engine en heeft dus geen keus dan het als gewone HTML te behandelen.

IE heeft wel een XML parser, maar biedt simpelweg geen ondersteuning voor XHTML (verstuurd met de XHTML mimetype) wat ècht XHTML in de praktijk inderdaad nogal onbruikbaar maakt