[XHTML & CSS] Menu en hoofdscherm positioneren. - Softwareontwikkeling

maandag 5 juni 2006 08:59

Acties:

...

Topicstarter

Ik ben bezig met een kleine waar ik problemen heb met het positioneren van het menu-onderdeel en hoofdonderdeel.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en">
<head>
    <title>Test !</title>
    <meta http-equiv="content-type" 
        content="text/html;charset=ISO-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css" media="all">@import "style.css";</style>
</head>
<body id="Body" style="margin: 0px; padding: 0px; height: 100%;">

<div id="Hoofdmenu" style="background-color: #999999; width: 80px; padding: 0px; margin-left: 8px; margin-right: auto; margin-top: 0px; margin-bottom: auto; position: absolute;">
    Hier komt een menu met verschillende opties.    
</div>

<div id="Hoofdgedeelte" style="background-color: #CCCCCC; width: 600px; padding: 2px; margin-left: auto; margin-right: auto; margin-top: 8px; margin-bottom: auto; position: relative;">
    Dit is het hoofdgedeelte van de site. Dit moet netjes gecentreerd worden.....
</div>

</body>
</html>

Het hoofdmenu wil op een vaste locatie hebben, gemeten vanuit het hoekpunt linksboven.
Het hoofdgedeelte van de site moet op over de horizontale richting gecentreerd worden en verticaal ook een vaste waarde naar de bovenkant van de site hebben.
Maar ik stuit op een probleem:

Als de margin-top van het hoofdgedeelte een waarde groter dan 0 krijgt, verschuift het hoofdmenu mee. Dit is niet de bedoeling.
Ik dacht zelf dit aan te kunnen passen door het position-element van het hoofdgedeelte aan te passen naar absolute, maar dat gaf als resultaat dat het hoofdgedeelte niet meer werd gecentreerd.
Ik heb het position-element van beide al veranderd naar static, absolute en relative, maar blijf met het probleem zitten.

Heeft iemand een XHTML 1.0 Strict oplossing hiervoor ?
( Ik heb zelf nog geen site gevonden die een layout zoals dit heeft, en XHTML 1.0 Strict is.)

[ Voor 10% gewijzigd door Onbekend op 05-06-2006 09:03 . Reden: Ik wilde de topictitel veranderen, maar dat gaat dus niet. Er moet dus [XHTML & CSS] voor staan natuurlijk. ]

Speel ook Balls Connect en Repeat

maandag 5 juni 2006 10:04

Acties:

cyberstalker

Eersteklas beunhaas

Als je de margin-left en margin-right van het menu op auto zet, zal het menu worden gecentreerd.

Dit werkt natuurlijk niet in IE, maar goed daarin werkt XHTML sowieso niet, dus dat maakt niet uit

.

Ik ontken het bestaan van IE.

maandag 5 juni 2006 10:12

Acties:

Onbekend

...

Topicstarter

Het is ook niet de bedoeling om het menu te centreren.
Ik wil graag het menu aan de linkerkant houden, en het hoofdgedeelte van de site in het midden naast het menu.

Speel ook Balls Connect en Repeat

maandag 5 juni 2006 10:18

Acties:

Verwijderd

als je je menu nou gewoon relatief positioneert, dan komt je hoofdgedeelte er vanzelf onder te staan.

Is dat wat je bedoelt? probeer het anders ff wat duidelijker uit te leggen, tekeningetje ofzo...

edit: aha
werk dan niet met de margins van je menu, maar set gewoon left en top op 8 resp 0 px

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

maandag 5 juni 2006 10:31

Acties:

Onbekend

...

Topicstarter

Het is gelukt

. Anderhalve dag mee bezig geweest en dan zo'n eenvoudige oplossing

.
Bedankt mophor.

Hier is de werkende code:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en">
<head>
    <title>Test !</title>
    <meta http-equiv="content-type" 
        content="text/html;charset=ISO-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css" media="all">@import "style.css";</style>
</head>
<body id="Body" style="margin: 0px; padding: 0px; height: 100%;">

<div id="Hoofdmenu" style="background-color: #999999; width: 80px; padding: 0px; margin-left: 0px; margin-right: auto; margin-top: 0px; margin-bottom: auto; left: 8px; top: 8px; position: absolute;">
    Hier komt een menu met verschillende opties.    
</div>

<div id="Hoofdgedeelte" style="background-color: #CCCCCC; width: 600px; padding: 2px; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: auto; top: 8px; position: relative;">
    Dit is het hoofdgedeelte van de site. Dit moet netjes gecentreerd worden.....
</div>

</body>
</html>

Speel ook Balls Connect en Repeat

maandag 5 juni 2006 11:43

Acties:

crisp

Devver

Pixelated

Persoonlijk zou ik geen absolute positioning gebruiken als dat niet noodzakelijk is; je menu-div kan je volgens mij beter links floaten.
Wat XHTML Strict hiermee te maken heeft is mij geheel onduidelijk want als je je site als text/html verstuurd dan heb je te maken met HTML regels en redenering en niet met XHTML. Sowieso zoals het er nu uitziet is het nog steeds tagsoup door het inline gebruik van style-attributen.

Intentionally left blank

maandag 5 juni 2006 12:59

Acties:

Onbekend

...

Topicstarter

Zelf gebruik ik een stylesheet (zoals je uit de code kan afleiden), maar om deze fout gemakkelijk te kunnen vinden had ik ze even inline geplaatst.
Die ene tag-regel klopt inderdaad niet. Dat had ik niet eens gezien.

Speel ook Balls Connect en Repeat

dinsdag 6 juni 2006 14:08

Acties:

Lexus!

Ik ben ook al een tijd aan het zoeken en proberen. Ik probeer precies hetzelfde voor elkaar te krijgen zonder de hulp van tabellen (Waarmee het wel makkelijk lukt). Je bovenstaande optie werkt volgens mij onder zowel IE als FF niet.

De gecentreerde tekst is gecentreerd ten opzichte van de breedte van het scherm. Ik wil (en volgens mij bedoeld 'ook onbekend' dat ook) het content gedeelte gecentreerd hebben tussen het menu en de linkerkant van het scherm. Iemand een idee hoe dit te maken valt dmv CSS?

Voorbeelden gevonden via Google baseren het menu op %, terwijl ik daar een vaste breedte voor wil hebben, en de content (met een max van bv 600px) gecentreerd wordt op de rest van de breedte.

dinsdag 6 juni 2006 14:13

Acties:

BtM909

Watch out Guys...

Overigens hebben we sinds kort ook highlighters voor HTML en CSS \o/

[plain]

HTML:

[/] levert op:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en">
<head>
    <title>Test !</title>
    <meta http-equiv="content-type" 
        content="text/html;charset=ISO-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css" media="all">@import "style.css";</style>
</head>
<body id="Body" style="margin: 0px; padding: 0px; height: 100%;">

<div id="Hoofdmenu" style="background-color: #999999; width: 80px; padding: 0px; margin-left: 8px; margin-right: auto; margin-top: 0px; margin-bottom: auto; position: absolute;">
    Hier komt een menu met verschillende opties.    
</div>

<div id="Hoofdgedeelte" style="background-color: #CCCCCC; width: 600px; padding: 2px; margin-left: auto; margin-right: auto; margin-top: 8px; margin-bottom: auto; position: relative;">
    Dit is het hoofdgedeelte van de site. Dit moet netjes gecentreerd worden.....
</div>

</body>
</html>

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 6 juni 2006 14:17

Acties:

Verwijderd

Lexus! schreef op dinsdag 06 juni 2006 @ 14:08:
Ik ben ook al een tijd aan het zoeken en proberen. Ik probeer precies hetzelfde voor elkaar te krijgen zonder de hulp van tabellen (Waarmee het wel makkelijk lukt). Je bovenstaande optie werkt volgens mij onder zowel IE als FF niet.

De gecentreerde tekst is gecentreerd ten opzichte van de breedte van het scherm. Ik wil (en volgens mij bedoeld 'ook onbekend' dat ook) het content gedeelte gecentreerd hebben tussen het menu en de linkerkant van het scherm. Iemand een idee hoe dit te maken valt dmv CSS?

Voorbeelden gevonden via Google baseren het menu op %, terwijl ik daar een vaste breedte voor wil hebben, en de content (met een max van bv 600px) gecentreerd wordt op de rest van de breedte.

lijkt mij een kwestie van wat extra padding op de body

[ Voor 6% gewijzigd door Verwijderd op 06-06-2006 14:20 ]

dinsdag 6 juni 2006 14:23

Acties:

Lexus!

Die kwestie leek het mij ook, en dan het menu absoluut positioneren aan de linkerkant. Ik ben alleen niet echt een voorstander van absolute positioneren, want als het scherm kleiner wordt dan x px dan wordt de gecentreerde content alsnog voor/achter het menu geschoven.

dinsdag 6 juni 2006 19:56

Acties:

Onbekend

...

Topicstarter

Lexus! schreef op dinsdag 06 juni 2006 @ 14:08:
Ik ben ook al een tijd aan het zoeken en proberen. Ik probeer precies hetzelfde voor elkaar te krijgen zonder de hulp van tabellen (Waarmee het wel makkelijk lukt). Je bovenstaande optie werkt volgens mij onder zowel IE als FF niet.

De gecentreerde tekst is gecentreerd ten opzichte van de breedte van het scherm. Ik wil (en volgens mij bedoeld 'ook onbekend' dat ook) het content gedeelte gecentreerd hebben tussen het menu en de linkerkant van het scherm. Iemand een idee hoe dit te maken valt dmv CSS?

Ik gebruik wel tabellen omdat ik de OnMouseOver en OnClick dan gemakkelijk kan gebruiken.

De gecentreerde div is inderdaad t.o. de breedte van het scherm. Mij maakte het dat niet zoveel uit, maar was wel mooier geweest. Ik maak de website voor een schermresolutie van minimaal 800x600.
Mijn gecentreerde vlak is maximaal 550px en het menu maximaal 90px breed. Bij een browser op volledige grootte ga ik van uit van een effectieve breedte van ongeveer 770px. Als ik 770 - 550 doe, houd ik 220px over. Gedeelt door 2 komt uit op 110px. En die ruimte is genoeg om mijn menu van 90px breed goed te laten weergeven,

Speel ook Balls Connect en Repeat

dinsdag 6 juni 2006 20:38

Acties:

Rowanov

Kop eens wat anders...

Ook onbekend schreef op dinsdag 06 juni 2006 @ 19:56:
Ik gebruik wel tabellen omdat ik de OnMouseOver en OnClick dan gemakkelijk kan gebruiken.

Verklaar je nader; volgens mij is dit namelijk pure onzin. Bijna elk element kan een onmouseover en onclick hebben.

woensdag 7 juni 2006 08:01

Acties:

Onbekend

...

Topicstarter

Mijn zin is inderdaad niet af.
Hier is een voorbeeldstukje wat ik bedoel. (Dit heb ik van het internet ergens geplukt. Geen XHTML)

HTML:

    <tr>
      <td bgcolor='#999999' 
        nowrap
        onmouseover="this.style.backgroundColor='#CCCCCC'"
        onmouseout="this.style.backgroundColor=''#999999'"
        onclick="parent.hoofdframe.location.href='site.htm'">
    <font size=3>
        Tekst
    </font>
      </td>
    </tr>

Ook als mensen naast de tekst klikken, maar toch in dat vlak, werkt de link wel. Ook wordt de kleur van het vlak veranderd als ze er overheen gaan met de muis.
Merk op dat ik de <a></a>-tag helemaal niet gebruik.

En ik kan gemakkelijk de cellen onder elkaar uitlijnen bij het menu.

Speel ook Balls Connect en Repeat

woensdag 7 juni 2006 08:06

Acties:

disjfa

be

Je kan gemakkelijker een link (<a>) gebruikern icm met een :hover in je css. Dat scheelt een berg code die je daar neerzet. Haal dan meteen je <font> weg en zet de waarde daarvan ook in de css.

Dan eindeig je dus op:

HTML:

1	<a href="site.htm">Tekst</a>

Cascading Stylesheet:

a{
 background-color:#999;
 font-size:24px;
}
a:hover{
 background-color:#CCC;
}

Is wel Iets netter neem ik aan.

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 7 juni 2006 08:58

Acties:

Lexus!

Het middengedeelte centreren naast het menu kan op onderstaande manier:

Cascading Stylesheet:

body{
 margin: 0px;
 padding: 0px;
 background-color:#CCCCCC;
 color: #333333;
}
div#layout {
 width:100%;
 height:500px;
 background-color:#CCCCCC;
}
div#menu{
 position: absolute;
 top: 20px;
 left: 20px;
 width: 180px;
 border: 2px solid #000000;
 background: #c0c0c0;
 color: #333333;
 margin: 0px;
 padding: 0px;
 height: 400px;
}
div#content{
 margin: 20px 20px 20px 220px;
 border: 2px solid #000000;
 background: #ffffff;
 color: #333333;
 padding: 20px;
}

HTML:

<div id="layout">
    <div id="menu">
    </div>
    <div id="content">
    </div>
</div>

Wellicht dat de TS er ook wat aan heeft.

[ Voor 40% gewijzigd door Lexus! op 07-06-2006 09:02 ]

woensdag 7 juni 2006 09:08

Acties:

Rowanov

Kop eens wat anders...

Ook onbekend schreef op woensdag 07 juni 2006 @ 08:01:
*snip*

Je kan als het een menu is ook een lijst gebruiken en die stylen zoals je wilt. Als je een inline element als een anchor niet handig vindt voor onclicks en onmouseovers, dan maak je er met css en block van. Jouw methode is prehistorisch en je code voorbeeld nog van ver daarvoor. Zie de post van disjfa voor de verdere uitleg.

Cascading Stylesheet:

<style type="text/css">
a {
  display: block;
  width: 200px; 
  height: 50px; 
}
</style>

HTML:

<ul id="menu">
  <li><a href="#">Dit is een blokje</a></li>
  <li><a href="#">Dit is een blokje</a></li>
  <li><a href="#">Dit is een blokje</a></li>
</ul>

Zelfs al zou je de lijst niet gebruiken, zouden de anchors netjes onder elkaar staan als blokjes.

[ Voor 31% gewijzigd door Rowanov op 07-06-2006 09:15 ]

donderdag 8 juni 2006 19:07

Acties:

Onbekend

...

Topicstarter

Inderdaad. Op deze manier gaat het denk ik ook. Is wel netter.
Daar daar zal ik nog even mee gaan experimenteren.

Speel ook Balls Connect en Repeat

zondag 11 juni 2006 21:41

Acties:

Onbekend

...

Topicstarter

Lexus! schreef op woensdag 07 juni 2006 @ 08:58:
Het middengedeelte centreren naast het menu kan op onderstaande manier:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
....
div#content{
 margin: 20px 20px 20px 220px;
 border: 2px solid #000000;
 background: #ffffff;
 color: #333333;
 padding: 20px;
}
Wellicht dat de TS er ook wat aan heeft.

Jep. Ik heb weliswaar een div gedefiniëerd die een vaste breedte heeft, maar die kan ik nu gemakkelijk centreren in deze div.

@Rowanov: Het menu werkt het zelfde, maar de code is wel overzichtelijker. Ik zal dit voortaan gebruiken.

Even nog een vraagje:
Ik gebruik ( in de content) soms een tabel van 6x6. Raden jullie aan om dit ook in een div te plaatsen, of gewoon de tabel-tag te gebruiken ?

Speel ook Balls Connect en Repeat

zondag 11 juni 2006 22:55

Acties:

Rowanov

Kop eens wat anders...

Als het tabulaire data is gebruik je een tabel. Tabulaire data voorbeelden; de stand van de voetbal competitie, wetenschappelijke data etc.