Verticale lijn in website mogelijk?

Nvu, Kompozer en Bluegriffon zijn open source (WYSIWYG) programma's waarmee je een website kunt maken en onderhouden (vergelijkbaar met FrontPage / Dreamweaver).
Miekmol
Berichten: 74
Lid geworden op: 15 november 2010, 21:18
    Windows 7 Internet Explorer 8

Verticale lijn in website mogelijk?

Bericht door 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
Laatst gewijzigd door Miekmol op 4 januari 2011, 19:59, 1 keer totaal gewijzigd.
dillinger
Berichten: 72
Lid geworden op: 13 juli 2008, 22:40
    Linux Firefox

Re: Verticale lijn in website mogelijk?

Bericht door 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
Berichten: 74
Lid geworden op: 15 november 2010, 21:18
    Windows 7 Internet Explorer 8

Re: Verticale lijn in website mogelijk?

Bericht door Miekmol »

oooooooooh wat eng, ik heb nog nooit met een stylesheet gewerkt.
Ik snap er helemaal niks van, kan het niet eenvoudiger?
dillinger
Berichten: 72
Lid geworden op: 13 juli 2008, 22:40
    Linux Firefox

Re: Verticale lijn in website mogelijk?

Bericht door 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.
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Verticale lijn in website mogelijk?

Bericht door nirwana »

dillinger schreef:
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>
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Miekmol
Berichten: 74
Lid geworden op: 15 november 2010, 21:18
    Windows 7 Internet Explorer 8

Re: Verticale lijn in website mogelijk?

Bericht door 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,
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Verticale lijn in website mogelijk?

Bericht door 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;">
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Verticale lijn in website mogelijk?

Bericht door 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;">
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Miekmol
Berichten: 74
Lid geworden op: 15 november 2010, 21:18
    Windows 7 Internet Explorer 8

Re: Verticale lijn in website mogelijk?

Bericht door 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
Berichten: 74
Lid geworden op: 15 november 2010, 21:18
    Windows 7 Internet Explorer 8

Re: Verticale lijn in website mogelijk?

Bericht door 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
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Verticale lijn in website mogelijk?

Bericht door 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.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Miekmol
Berichten: 74
Lid geworden op: 15 november 2010, 21:18
    Windows 7 Internet Explorer 8

Re: Verticale lijn in website mogelijk?

Bericht door 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?
Gebruikersavatar
Frederik
Moderator
Berichten: 4262
Lid geworden op: 1 juli 2004, 16:16
Locatie: Vriescheloo
    Windows 7 Firefox

Re: Verticale lijn in website mogelijk?

Bericht door 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
Berichten: 74
Lid geworden op: 15 november 2010, 21:18
    Windows 7 Internet Explorer 8

Re: Verticale lijn in website mogelijk?

Bericht door 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
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Verticale lijn in website mogelijk?

Bericht door nirwana »

Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu