Tekst problemen

[Robby]

Hallo allemaal,

Ik ben bezig een site te maken in Kompozer.
- Boven heb ik een gefixeerde titelbalk.
- Link (onder de titelbalk) een gefixeerde menubalk.
- Rechts van de menubalk het centrale tekstvak met een gefixeerde achtergrond.

Nu zou ik willen dat als het totale scherm verkleind wordt dat dan de tekst in het tekstvak automatisch naar onder wordt verplaatst ipv dat ik een schuifbalk krijg. Bij een oude site van mij gebeurde dat ook, maar daar had ik nog geen gefixeerde menubalk of titelbalk. Ik wil echter geen gebruik maken van javascript. Is dat mogelijk en waar moet ik dan zoeken in de css codes?

Groet,

Robby

[Frederik]

Heb je een de website of een gedeelte daarvan al online staan? Dat zou voor ons gemakkelijker zijn omdat we dan kunnen kijken hoe de website in elkaar steekt. Nu blijft het een beetje gissen. Het nadeel van vaste balken is inderdaad dat deze zich niet aanpassen aan het beeldscherm en je moet scrollen, afhankelijk van wat voor breedte iemands beeldscherm heeft.

[Robby]

Dag Frederik:

Ik had al een vermoeden dat het niet zou samen gaan.
Misschien moet ik het menu omzetten naar een zwevend blok (als me dat lukt)

De website is: http://www.jklaver.nl

Het werkt wel redelijk, maar ik denk dat het bij kleinere schermen nu niet ideaal is. Als je het leest op je smartphone is het in ieder geval niet fijn.

[Frederik]

De openingspagina bestaat uit frames (drie pagina's laden tegelijkertijd en vullen de voorpagina) en dat is een methode die vrijwel niet meer wordt toegepast. De meeste websites, juist vanwege de moderne mobiele apparaten, zijn gebaseerd op CSS en tonen zich vrijwel overal probleemloos op alle verschillende media.
Ik zou zeggen, zoek een leuke template uit en pas die naar eigen wensen aan. Dan heb je een goede website, zonder dat je je hoeft te bekommeren om allerlei ingewikkeldheden rondom beeldschermen en apparaten:
http://www.freecsstemplates.org/css-templates/

[Robby]

Probleem bij die voorbeelden is dat ze geen gebruik maken van een vaststaand menu. Dat zou ik juist wel willen.

[nirwana]

Ik denk dat je het beste het menu aan de linkerkant smaller kunt maken. Dan houd je meer ruimte over voor het tekstgedeelte aan de rechterkant. Zo kun je de website maken op de kleinste resolutie waarmee bezoekers aankomen (bijvoorbeeld 800x600 als ondergrens). Als de website maximaal 800 pixels breed is dan moet dit voor de meeste bezoekers geen probleem vormen.

Ook interessant om eens te bekijken:
http://www.vanseodesign.com/blog/demo/f ... luid-2.php
www.pmob.co.uk/temp/fixed-header-footer-left-new.htm

[Frederik]

Mooie voorbeelden !

[Robby]

Hoi Martijn,

Inderdaad; goede voorbeelden.
Ik ben met de tweede link aan de gang gedaan en heb die kunnen aanpassen aan mijn wensen. Ik heb me daarbij eerst maar even geconcentreerd op Firefox.
Het is helemaal gelukt behalve dat ik aan de rechter kant van de tekst een blanco ruimte wil. In het voorbeeld dat de maker geeft (zie link) zijn de zinnen kort. Als je die langer maakt, lopen ze door tot aan de rechter kant. Dat is niet mooi. Als ik padding right gebruik dan verandert het gedrag van de box. Als die kleiner wordt dan wordt de kantlijn rechts hard en schuift de tekst in elkaar. Ik zou het zo willen maken dat een kleiner scherm eerst ten koste gaat van de rechter kantlijn en dan pas invloed heeft op de tekst.

Ik heb geprobeerd de tekst in een tabelcel te zetten, maar dan verdwijnt de scrollbar als ik het scherm minder breed maak.

Iemand suggesties?

[Frederik]

Als je perse blanco ruimte wilt aan de rechterkant zou je kunnen uitgaan van een 3 column fluid layout en laat je de rechter column leeg of pas je het percentage aan. Voorbeeld:
http://matthewjamestaylor.com/blog/perfect-3-column.htm

[Robby]

Fijn dat jullie zo mee denken.

Die site had ik eerder ook voor ogen. Het valt echter tegen. Behalve dat niet de volledige code kan worden gedownload, lijkt het mooier dan dat het is. De ruimte rechts schuift niet als eerste in elkaar; ook niet als je die leeg maakt. Bovendien heeft het linker en rechter paneel de zelfde kleur.
Ik heb inmiddels al heel wat sites bekeken en denk dat ik te veel wil. Het lijkt gewoon niet te kunnen, tenzij je met javascript aan de gang gaat.

Misschien moet ik het fixed menu los laten. Dan kan het wel denk ik.

[nirwana]

Robby,

Als je nu de website een vaste grootte geeft en je geeft het content-gedeelte een scrollbar ?
Ik bedoel iets in de trant van www.css-lab.com/demos/2col/scrollbars.html (maar zonder de schuifbalken aan de linkerkant).

Ook mooi: www.css-lab.com/demos/3col-fluid/3col-mm-stickfoot.html

Dit is daarop weer een interessante variant: www.cssplay.co.uk/layouts/basics2.html en www.cssplay.co.uk/layouts/body2.html
En hier heb je nog meer van dergelijke Fixed Position-layouts: www.css-lab.com

[Robby]

Bij die voorbeelden loopt de tekst ook door tot de rechter kantlijn.

Ik ben even door gegaan op een vast formaat. Dat levert een aardig resultaat op. Ik weet nog niet wat er gebeurt als die op een smartphone te zien is. Als het scherm te klein wordt, verdwijnt de tekst uit beeld op mijn scherm.

Ik ga nu ook nog even proberen een site te maken met drie vlakken waarbij ze in een percentage t.o.v. elkaar staan (dus zonder scrolbars en zonder vaste menus).

[nirwana]

Ik weet nog niet wat er gebeurt als die op een smartphone te zien is. Als het scherm te klein wordt, verdwijnt de tekst uit beeld op mijn scherm.

Tegenwoordig kun je met de browsers van smartphones gewone websites ook aardig goed bekijken. Je kunt namelijk behoorlijk goed in- en uitzoomen. Mijn ervaring betreft overigens de iPhone.

Uiteraard kun je altijd nog een speciale site voor mobiele apparaten maken, maar dan moet uit de bezoekersstatistieken blijken dat je relatief veel smartphone-browsers op de site krijgt.

[Robby]

Ik heb een nieuwe versie gemaakt om het eens uit te proberen.
Opbouw: boven titelbalk (=Boven), onder de inhoude (=Onder). Onder is weer verdeeld in drie vlakken (Linker, Midden en Rechter). Links kent nog een onderdeel "Menu".

Ik heb momenteel 2 problemen:
- Het veld "Linker" reageert anders in Firefox als in IE, qua aansluiting tegen het bovenveld aan. Bij FF zit er een kleine ruimte tussen.
- De achtergrondafbeelding in het middenveld wil zich niet netjes verdelen over de beschikbare ruimte. Daardoor ontstaat er een wit vlak tussen de achtergrondafbeelding en het rechter veld.

Ik snap niet wat ik fout doe.

Code: Selecteer alles

body
{
        margin: 0 0 0 0;
	padding: 0 0 0 0;
	font: 100%/1.3 arial, sans-serif;
	background: #ffffea;
}


#boven
{
        position: absolute;
        top: 0;
        left: 0;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        width: 100%;
        height: 85px;
	background: brown;
        overflow:hidden;
}

#onder
{
        float: left;
        width: 100%;
        position: absolute;
        margin: 85px 0 0 0;
	background: #ffffea;
        height: 1000px;
}

#linker
{
	float: left;
        margin: 0 0 0 0;
	width: 20%;
        height: 1000px;
	padding: 51px 0;
        background: #d2da9c;
        text-align: center;
        font-size:.5em;
        color: black;
}

#midden
{
	float: left;
	margin: 0 0 0 0;
	width: 60%;
        height: 1000px;
	padding: 2px 2px 2px 2px;
	text-align: justify;
        background-image: url(achtergrond.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: contain;
}


#rechter
{
	float: right;
	width: 20%;
        height: 1000px;
	margin: 0 0 0 0;
	background: #ffffea;
}

div.menu {
  margin-top: 200px;
  float: left;
}

h1{
 text-align: center;

Wie heeft er suggesties?

[knorretje]

Heb je hier een url van zodat we deze pagina eens kunnen bekijken met Firebug?