Tekst in div plaatsen?

[robertlucas]

Goedemorgen, ik heb een probleempje. Heb even een testpagina op http://www.rechtopkunst.nl gezet. Het gaat om het volgende.

Ik wil tekst plaatsen in div3, div 9 en div 15 via copy paste en dat gaat niet goed.

wat is nu de beste manier om dit aan te pakken? Dus dat de tekst aan de rand van de div wordt afgebroken en zonder dat andere div's gaan verschuiven en zonder dat de tekst doorloopt in de volgende div?

Kan ik div3, div9 en div15 samenvoegen tot 1 div zonder dat mijn hele opmaak gaat schuiven?

Alvast heel erg bedankt voor jullie reactie(s)

Mvgr. Robert

[nirwana]

Robert,

Hier is jouw webpagina weer, maar dan met een iets andere opzet: http://www.mozbrowser.nl/web/rechtopkunst/
Ik heb het geheel vooral ingedeeld in 3 afzonderlijke stukken: #left, #mid en #right voor het linkerdeel, het middendeel en het rechterdeel van de inhoud van de website. Daarvoor heb ik ook div's gebruikt en ik heb de diverse andere div's daar in geplaatst.

Zo heb ik div9 en div15 laten vervallen. Oh, div3 eigenlijk ook, want die heet nu #mid. Verder heb ik in #mid nog wat extra eigenschappen opgegeven:

Code: Selecteer alles

	background-color: white;
	overflow-y: auto;
	padding: 3px;

Met overflow-y: auto komt er een verticale scrollbalk voor het geval de tekst langer is dan wat er in de div past. Dus wat dat betreft kun je hierin dan oneindig veel tekst plaatsen. Toch blijft het design van je webpagina dan behouden en men kan de tekst ook gewoon lezen via de schuifbalk. Heb je wat minder tekst op de pagina dan blijft die schuifbalk ook achterwege.

Nog enkele tips:
- hernoem de div's naar hun functie. #div18 kun je bijvoorbeeld prima #disclaimer noemen, div7 kan contact heten, etc. Dan weet je namelijk direct over welke div het gaat. Nu is de naam van de div nogal afhankelijk van z'n plaats op de pagina. Tja, als ik dan ook nog met de div's ga schuiven dan worden de namen van de div's steeds minder duidelijk.

- gebruik een andere kleur lettertype voor header + footer, want wit is nogal slecht leesbaar op een grijze achtergrond. Daarom heb ik voor blauw gekozen.

- geef in de stylesheet eenmalig (bij de body) het te gebruiken lettertype in; nu stond dat bij vrijwel elke div ingesteld.

- uitlijnen doe je bij voorkeur niet met spaties (hoe breed is een spatie eigenlijk ?), maar bijvoorbeeld met een padding-left (zoals nu in de header).

[robertlucas]

Hoi Martijn,

Super! Heel hartelijk dank voor je moeite!

Met vriendelijke groet,

Robert Lucas

[robertlucas]

Nog 1 vraagje. Is het mogelijk om op een of andere manier dat door jou aangepaste css bestandje bij mij te krijgen? Alvast hartelijk dank!

Met vriendelijke groet,

Robert

[Frederik]

Alles onder de lijn selecteren /kopiëren en vervolgens plakken in Kladblok. Opslaan als stijlblad.css (dus zonder txt !!!)
...........................................................................

body {
background-color : #f1f1f1;
font-family : Arial Narrow;
}
#divcontainer {
margin : auto;
width : 960px;
height : 640px;
max-width : 960px;
max-height : 640px;
}
#header {
width : 960px;
background-repeat : no-repeat;
background-position : right center;
height : 120px;
line-height : 4em;
font-size : 2.5em;
padding-left : 160px;
color : #01009a;
}
#left {
width : 320px;
height : 480px;
float : left;
}
#mid {
width : 314px;
height : 480px;
float : left;
background-color : white;
padding : 3px;
}
#right {
width : 320px;
height : 480px;
float : left;
}
div.clear {
clear : both;
}
#div1 {
width : 160px;
height : 160px;
float : left;
background-color : #fe0000;
font-size : 1.2em;
line-height : 7.5em;
color : white;
text-align : center;
}
#div2 {
width : 160px;
height : 160px;
float : left;
background-color : white;
color : black;
}
#div5 {
width : 160px;
height : 160px;
float : left;
background-position : center center;
background-color : #01009a;
font-size : 1.2em;
line-height : 7.5em;
color : white;
text-align : center;
}
#div6 {
float : left;
width : 160px;
height : 160px;
background-image : url(http://www.rechtopkunst.nl/images/EdzardBerkouwer.jpg);
background-position : center center;
}
#div7 {
width : 160px;
height : 160px;
float : left;
background-image : url(http://www.rechtopkunst.nl/images/Costfocus%20focus.jpg);
background-position : center center;
}
#div8 {
background-position : center center;
width : 160px;
height : 160px;
float : left;
background-image : url(http://www.rechtopkunst.nl/images/Fleurkavelaars.jpg);
}
#div11 {
width : 160px;
height : 160px;
float : left;
background-color : white;
color : black;
}
#div12 {
width : 160px;
height : 160px;
float : left;
background-color : #fe0000;
font-size : 1.2em;
line-height : 7.5em;
color : white;
text-align : center;
}
#div13 {
width : 160px;
height : 160px;
float : left;
background-color : #fe0000;
font-size : 1.2em;
line-height : 7.5em;
color : white;
text-align : center;
}
#div14 {
width : 160px;
height : 160px;
float : left;
background-color : white;
color : black;
}
#div17 {
width : 160px;
height : 160px;
float : left;
text-align : center;
background-color : #01009a;
color : white;
font-size : 1.2em;
line-height : 7.5em;
}
#div18 {
width : 160px;
height : 160px;
float : left;
background-color : white;
font-size : 0.9em;
line-height : 10.6em;
color : #01009a;
text-align : center;
}
#footer {
width : 960px;
height : 40px;
font-size : 1.2em;
background-color : #f1f1f1;
float : left;
text-align : justify;
color : #01009a;
}

[robertlucas]

Super! Heel hartelijk dank voor je moeite!

[nirwana]

Ehrm, wie is er verantwoordelijk voor deze JPG-afbeelding op de voorpagina ?
http://www.rechtopkunst.nl/rechtopkunst.jpg

Hier zie je een van de duidelijkste voorbeelden waarom je een logo (dat meestal uit 1 of slecht enkele kleuren bestaat) niet als JPG-afbeelding moet opslaan. JPG is voor foto's, GIF is voor afbeeldingen met 256 kleuren of minder (dus erg geschikt voor logo's) en PNG is een modernere vorm dan GIF en zit daar wat tussenin.

Maar goed, ik begrijp dat de nieuwe website in aanbouw is en dat dit logo slechts als "placeholder" dient. Echter mag zo'n "tijdelijke website" er ook best een beetje aantrekkelijk uit zien.

[robertlucas]

Je hebt gelijk. Het ziet er idd niet strak uit. Dit plaatje heb ik er een tijd geleden al op gezet. Ga ik aanpassen. Dank voor de tip!