Verticale lijn in website mogelijk?

[Miekmol]

Goedemorgen,

Iedere dag probeer ik de website nog mooier te maken.
Eigenlijk heb ik nu spijt dat ik de website over de hele breedte van het scherm gemaakt heb.
Bij het maken van de website heb ik bijna op alle pagina's 3 tabellen gemaakt.
Nu heb ik in de middelste tabel de tekst getypt.
Ik heb aangegeven dat de tabellijnen onzichtbaar moeten zijn, dus niet zichtbaar op de website.
Nu zou het misschien toch wel mooier zijn als ik de verticale lijn wel zichtbaar kon maken.
Ik heb dit geprobeerd met nieuwe tabellen in te voegen van 1 pix. maar dat vind ik nog te breed.

Ik wilde een printscreen toevoegen maar dat wordt niet opgenomen hier.

groetjes Mieke

[dillinger]

Je kunt natuurlijk de rand van een vak in je tabel een kleur geven, bijvoorbeeld zo:

In je tabel:

Code: Selecteer alles

<td id="links">bladibla (of niks)<td>

en dan in je stylesheet:

Code: Selecteer alles

#links {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #333399;
}

De rechterkant van dat vak wordt dan een verticale blauwe lijn.

[Miekmol]

oooooooooh wat eng, ik heb nog nooit met een stylesheet gewerkt.
Ik snap er helemaal niks van, kan het niet eenvoudiger?

[dillinger]

kan het niet eenvoudiger?

Wat heet, als je maar een of twee van die lijntjes hoeft te maken kan het ook zo:

Code: Selecteer alles

<td style="border-right-width: 1px; border-right-style: solid; border-right-color: #333399;">bladibla (of niks)<td>

Als je dit in meerdere tabellen op meerdere pagina's wilt doen, is een stylesheet toch wat makkelijker.

[nirwana]

kan het niet eenvoudiger?

Wat heet, als je maar een of twee van die lijntjes hoeft te maken kan het ook zo:

Code: Selecteer alles

<td style="border-right-width: 1px; border-right-style: solid; border-right-color: #333399;">bladibla (of niks)<td>

Als je dit in meerdere tabellen op meerdere pagina's wilt doen, is een stylesheet toch wat makkelijker.

Of ietsje korter:

Code: Selecteer alles

<td style="border-right-width: 1px solid #333399;">bladibla (of niks)<td>

Of nog wat korter

Code: Selecteer alles

<td style="border-right-width: 1px solid #339;">bladibla (of niks)<td>

[Miekmol]

Martijn,

Waar vul ik dat in?
Ik wil zowel rechts als links een dun verticaal lijntje hebben van de middelste kolom waarin de tekst is geschreven.

href="Contact.html"><img
style="border: 0px solid ; width: 125px; height: 33px;"
alt="contact" src="Buttons/contact-n.png"></a></td>
</tr>
</tbody>
</table>
<br>
<br>
<table style="text-align: left; width: 100%;" border="0"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 30%;"><a
href="index.html"><img
style="border: 0px solid ; width: 350px; height: 263px;"
alt="logo" src="Images/Logo%2520Houvast.png"></a><br>
</td>
<td style="vertical-align: top; width: 70%;"><big
style="color: black; font-family: Calibri;"><big><span
style="font-weight: bold;">Nieuwspagina</span></big></big><br>
<br>
<table style="text-align: left; height: 32px; width: 100%;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; color: black;">
<p class="MsoNormal"
style="margin: 0cm 1cm 0.0001pt; font-weight: bold; font-family: Calibri; text-align: center;"
align="center"><span
style="font-size: 16pt; color: black;">Kerstmiddag van
“Houvast” wederom geslaagd</span><span
style="font-size: 16pt; color: black;"><o:p></o:p></span></p>
<br style="font-family: Calibri;">
<p class="MsoNormal"
style="margin-right: 1cm; text-align: left; font-family: Calibri;"
align="left"><span style="font-size: 12pt; color: black;">Zondag
19 december heeft
gehandicaptenvereniging “Houvast” een Kerstmiddag voor haar leden
georganiseerd
wat wederom een groot succes bleek te zijn.<o:p></o:p><br>
Deze middag werd gevierd
bij Dientje Wijn.<o:p></o:p></span></p>
<p class="MsoNormal"
style="margin-right: 1cm; text-align: left; font-family: Calibri;"
align="left"><span style="font-size: 12pt; color: black;">Bij
binnenkomst kregen
de leden een kopje koffie of thee aangeboden met een stukje kerstbrood
om de
middag mee te beginnen. Rond 14.00 uur nam de voorzitter van “Houvast”
het
woord om de leden een hartelijk welkom te heten op deze jaarlijks
terugkerende
Kerstmiddag. Daarna luisterde kinderkoor “Sint Willibrord” uit Bakel de
Kerstmiddag
op. Deze groep kinderen stond onder de professionele begeleiding van
Peggy
Teunis en haar hulptroepen. Het koor trad op in 2 fasen van 45 minuten,
want
ook de keeltjes van deze kinderen moeten natuurlijk gesmeerd worden,

[nirwana]

Mieke,

Bedoel je zoiets: www.mozbrowser.nl/web/houvast/nieuws.html ?

Hiervoor heb ik de volgende code toegevoegd aan een style-attribuut van een tabel-cel (td):

Code: Selecteer alles

border-left: 1px solid #29ABE2; border-right: 1px solid #29ABE2;

Je had al de volgende code in de nieuws-pagina staan:

Code: Selecteer alles

<td style="vertical-align: top; width: 70%;">

Tezamen wordt dat dan:

Code: Selecteer alles

<td style="vertical-align: top; width: 70%; border-left: 1px solid #29ABE2; border-right: 1px solid #29ABE2;">

[nirwana]

Inmiddels ben ik ietsje verder gegaan met een groove lijnstijl in plaats van solid: www.mozbrowser.nl/web/houvast/nieuws.html

Dan wordt het

Code: Selecteer alles

<td style="vertical-align: top; width: 70%; border-left: 2px groove #29ABE2; border-right: 2px groove #29ABE2;">

[Miekmol]

Hoi Martijn,

Ja zoiets bedoel ik.
Ik zou alleen liever een minder opvallend lijntje hebben, net zoiets fijns als wat je hier op deze pagina ziet, en minder hard van kleur.
En dan ook meteen na de tekst aan de rechterzijde en niet in de kolom/tabel die naast de tekst komt.
Ik wil dit op alle pagina's hebben....en niet op één pagina waarover Dillinger schrijft.
Is dit moeilijk?

groetjes Mieke

[Miekmol]

Martijn,

Ik kan hier geen printscreen toevoegen, die heb ik je al eerder gestuurd.
Als je nu daarop kijkt dan zie je de nieuwspagina in Kompozer.
Het liefste zou ik een verticale lijn hebben vanaf het zwarte lijntje net onder de knoppen.
Daaronder is een ruimte en weer daaronder staat een vak met nieuwspagina.
In het vakje van nieuwspagina heb ik geprobeerd een kolom/cel/of tabel toe te voegen zodat die kolom hetzelfde wordt als de 2 kolommen daaronder maar dat lukt me dus helemaal niet. (dat komt er over heel de pagina bij staan)
Ook geprobeerd om het hele vak waarin nieuwspagina staat weg te halen maar dan verdwijnt mijn hele pagina.
Je begrijpt dus dat ik links naast de tekst graag een lijntje zou hebben tot aan de zwarte lijn horizontaal boven en ook aan de rechterzijde van de kolom waarin de tekst is getypt tot aan de zwarte horizontale lijn. De kolom naast de tekst is een loze kolom....

Ik hoop dat ik het je niet te moeilijk uitleg.

groetjes Mieke

[nirwana]

Mieke,

Ik heb niet recent een screenshot ontvangen, maar bedoel je misschien zoiets: www.mozbrowser.nl/web/houvast/nieuws.html ?
Hier heb ik het lijntje grijs gemaakt, 1 pixel breed en op een onderliggende tabel-cel geplaatst.

[Miekmol]

Hoi Martijn,

Ja zoiets bedoel ik....
Maar dan het lijntje hoger beginnen.
Nu ik het zo zie staan is het wellicht mooier om aan de linkerzijde het lijntje meer naar links te zetten, de tekst zit er nu te dicht tegenaan.
Om nu te begrijpen wat ik je eerder heb geschreven stuur ik je nu een nieuwe screenshot.
Gistermorgen heb ik hem aan je verstuurd incl. de favicon zoals die bij mij op het bureaublad staat.

groetjes Mieke
ps... wat vind jij, met of zonder lijntje een mooiere website?

[Frederik]

Mooie en nette website! en de verticale lijntjes vind ik ook mooi.
En inderdaad, een spatie ruimte meer tussen de verticale lijn links en tekst, valt er vrijwel niks meer op aan te merken.
Complimenten voor al het gezwoeg!

[Miekmol]

Ha Frederik,

Bedankt voor de complimenten!
Opmerkingen wat nog beter zou kunnen of wat nog mooier zou zijn hoor ik graag!!!!
Het is tenslotte ook een hobby.

groetjes Mieke

[nirwana]

Mieke,

De volgende poging: www.mozbrowser.nl/web/houvast/nieuws.html