CSS beginners vraagje - Softwareontwikkeling

donderdag 20 mei 2004 10:37

Acties:

Verwijderd

Topicstarter

Ik ben begonnen met wat te prullen met CSS. Nu zit ik met een probleempje. Ik zou eigenlijk twee "tabellen" willen hebben op mijn webpagina: een menu aan de linkerkant en de mainpage aan de rechtkant.

Ik heb hetvolgende geschreven:

#menu {
margin-bottom:15px;
background:#FFF;
float:left;
width:23%;
}

#content {
background:#fff;
float:right;
border-left:1px dotted #999;
margin-left:15px;
margin-right:15px;
padding-right:20px;
padding-left:20px;
padding-bottom:20px;
}

Dit geeft in IE het gewenste resultaat. In FireFox wordt echter om de één of andere reden de content onder mijn menu geplaatst. Kan iemand mij vertellen wat ik fout doe, of hoe ik het misschien beter zou doen?

Alvast dank !

donderdag 20 mei 2004 10:40

Acties:

David

bij #content kun je de float: right weghalen. Maak vervolgens de margin-left minimaal 23% (de breedte van je menu), en het zou netjes naast elkaar moeten staan.

Dato DUO synth voor twee

donderdag 20 mei 2004 10:47

Acties:

Verwijderd

Topicstarter

Inderdaad, nu wordt het in FireFox perfect weergegeven. Maar nu heb ik spijtig genoeg het probleem in IE dat de tekst verder loopt als mijn scherm (en ik dus een horizontale scrollbar krijg in mijn content).

Iemand nog een idee om dit op te lossen?

[ Voor 4% gewijzigd door Verwijderd op 20-05-2004 10:47 ]

donderdag 20 mei 2004 11:01

Acties:

David

Kun je de HTML even laten zien? Met de juiste DOCTYPE-declaration gebruikt IE namelijk ongeveer hetzelfde box-model als Firefox.

Dato DUO synth voor twee

donderdag 20 mei 2004 11:20

Acties:

Willem

Spelen met width en float

Motor (of auto) onderhoud bijhouden

donderdag 20 mei 2004 11:24

Acties:

Verwijderd

Topicstarter

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head><title>Reiser4 - The Journaling Filesystem</title>
<META HTTP-EQUIV="Expires" CONTENT="Mon, 01 Jan 1990 01:00:00 GMT"> 
<link rel="stylesheet" type="text/css" href="./stylesheet.css">

  <script language="JavaScript" type="text">
  <!-- Begin hiding from older browsers
  //End hiding-->
  </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head> 
<body>

<div id="banner">blablabla
    <div class="description">nog meer blablabla</div>
</div> 


<div id="menu">
    <p>
    <div class="sidetitle_red">partition</div>
    <p>
    <div class="side">
    mlsqkfjmqslkfjq smlkfjsqdml kfjsdqmlk fjsqdmlkfjsqdml fkjsqdmlfkjqsd fmlksqjdfmlksqdjf
    mlsqkf jqmsld kfj sqdmlkfj sqdmlfkjqsdmflkjqs dfmlksqjfqslf kjsqmlkfjq smlkfjsqmlkfjsqmlkfjsq
    qsldfkjs qdmlfkjq sm lkfjsq mlkfjsqm lfkjsqm lfkjsqmflk sqjfm lkqsj fmlqsk
    </div>
    <p>
    <div class="sidetitle">Overzicht</div>
    <p>
    <a href="./deel1.html" class="side">1. Inleiding</a><br>
    <a href="./deel2.html" class="side">2. Journaling File Systems, qué?</a><br>
    <a href="./deel3.html" class="side">3. Reiser4</a><br>
        <a href="./deel3#1.html" class="side_sub">3.1. Design/Opbouw</a><br>
        <a href="./deel3#2.html" class="side_sub">3.2. Wat bij een crash?</a><br>
        <a href="./deel3#3.html" class="side_sub">3.3. Veiligheid?</a><br>
    <a href="./deel4.html" class="side">4. De concurrenten</a><br>
        <a href="./deel4.html#1" class="side_sub">4.1. ext3</a><br>
        <a href="./deel4.html#2" class="side_sub">4.2. JFS</a><br>
        <a href="./deel4.html#3" class="side_sub">4.3. XFS</a><br>
        <a href="./deel4.html#4" class="side_sub">4.4. Benchmarks</a><br>
    <a href="./deel5.html" class="side">5. Bronnen</a><br>
    <p>
    <div class="sidetitle">Contact</div>
    <p>
    <a href="mailto:Klmqjfqsdf@slfkd.blk" class="side">Mail me !</a><br></div>
    <p>
</div>

<div id="content"><p>
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td valign="middle" width="100%">&nbsp;
                <b> 
                    1. Inleiding
                </b>
            </td>
        </tr>
   
        <tr>
            <td colspan="2"><hr size="1"></td>
        </tr>
    </table>

    <table width="100%" cellpadding="1">
        <tr>
            <td valign="top">
                hier komt allemaal tekst
            </td>
            <td valign="top" align="right" nowrap></td>
        </tr>
    </table>

    <p>&nbsp;</p>

    <div class="footer">
        &copy; Copyright 
    </div>
</div> 

<p>

</body>
</html>

donderdag 20 mei 2004 12:36

Acties:

David

Plak deze DOCTYPE er eens boven:

code:

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Dato DUO synth voor twee

donderdag 20 mei 2004 12:41

Acties:

creative8500

freedom.

DiMension schreef op 20 mei 2004 @ 12:36:
Plak deze DOCTYPE er eens boven:
code:
1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Natuurlijk niet; het is nog niet eens well-formed XML!

donderdag 20 mei 2004 12:42

Acties:

Verwijderd

Je kan je content ook een float:left meegeven, dan plakt ie m netjes tegen de linkerkolom aan zolas je wilt en zal hij ook netjes doorlopen aan de onderkant.

Als je kan nog bijvoordeeld een footer wilt hebben die je niet links tegen de #content wilt hebben moet je "clear" gebruiken (bijv. clear:all), zodat het element zich niets aantrekt van de floats van voorgaande elementen.

succes.

(Je kan ook even naar andere sites kijken die hetzelfde hebben geimplementeerd en hun css bekijken, bij w3.org heeft ook wat kolommen en maakt gebruik van floats)

Oh ja, doctypes worden niet in elke browser goed ondersteund, zie hier:
http://gutfeldt.ch/matthi.../doctypeswitch/table.html

[ Voor 13% gewijzigd door Verwijderd op 20-05-2004 12:43 ]

donderdag 20 mei 2004 14:09

Acties:

Verwijderd

Topicstarter

Het is me eindelijk gelukt. Heb zowel #menu als #content "absolut" gepositioneerd. Dit is het dus geworden:

code:

#content {
    position:absolute;
    top:100px;
    left:260px;
    width:70%;
    padding:15px 15px 5px 35px;
    background:#fff;
    border-left:1px dotted #999;
}

#menu {
    position:absolute;
    top:100px;
    left:10px;
    width:220px;
    padding:5px;
    width:220px;

}

Nog een klein vraagje (omdat ik pas met CSS begonnen ben). Wat is eigenlijk de beste manier van werken, alles "absolut" maken? Of...

donderdag 20 mei 2004 14:20

Acties:

Verwijderd

DiMension schreef op 20 mei 2004 @ 12:36:
Plak deze DOCTYPE er eens boven:
code:
1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

zou ik niet doen... dit is nml geen xhtml

en voor html 4.0 kan het ook al moeilijk doorgaan...

donderdag 20 mei 2004 15:14

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op 20 mei 2004 @ 14:20:
zou ik niet doen... dit is nml geen xhtml en voor html 4.0 kan het ook al moeilijk doorgaan...

De html code is ondertussen gezuiverd en wordt nu als xhtml gevalideerd

.

PS juist vergeten te vermelden, dank voor de tips allemaal!