Verticale lijn maken

Nvu, Kompozer en Bluegriffon zijn open source (WYSIWYG) programma's waarmee je een website kunt maken en onderhouden (vergelijkbaar met FrontPage / Dreamweaver).
han52krol
Berichten: 63
Lid geworden op: 12 juni 2011, 10:57
Locatie: vroomshoop
    Windows XP Firefox

Verticale lijn maken

Bericht door han52krol »

Hallo,


Daar was ik weer. Ik wil graag een verticale lijn maken. Dat schijnt , bijna, niet te kunnen. Heb wat uitgeprobeerd en zonder succes. Nu heb ik een lijntje gemaakt met Paint, dus als een plaatje. Deze staat in de div. content en is, natuurlijk, een aparte div. verticale lijn. Hij moet ong. 600px lang zijn naar beneden en naar rechts. Hoe krijg ik dat voor elkaar? Het is een experiment. Ik wil nml. rechts van dat lijntje enkele afbeeldingen plaatsen. Trouwens, moeten die afbeeldingen ook weer in een aparte div? Of kan dat anders?

Gr. Han
han52krol
Berichten: 63
Lid geworden op: 12 juni 2011, 10:57
Locatie: vroomshoop
    Windows XP Firefox

Re: Verticale lijn maken

Bericht door han52krol »

Dit is trouwens de CSS, mocht men er iets aan hebben.:

|body {
margin: 0% auto;
padding: 0%;
height: 100%;
background-color: white;
width: 100%;
text-align: center;
}
*|#container {
border: none;
background-position: center center;
height: 100%;
background-image: url(../../blauwachtergr.png);
margin-left: auto;
width: 90%;
margin-right: auto;
padding-left: 13px;
}
*|#banner {
width: 80%;
margin-right: 12px;
margin-left: -11px;
}
*|#headertekst {
position: static;
font-family: Arial,Helvetica,sans-serif;
}
*|#content {
width: 80%;
float: right;
background-color: white;
height: 900px;
}
*|#navigatie {
border-style: none;
float: left;
font-family: Arial,Helvetica,sans-serif;
color: white;
font-size: 1.2em;
margin-left: 1px;
height: 100%;
text-decoration: none;
text-align: center;
width: 18%;
}
*|#footer {
width: 100%;
height: 5%;
background-color: white;
margin-top: 80%;
margin-bottom: -62px;
padding-bottom: 0px;
}
*|#verticale *|lijn {
background-image: url(../afbeeldingen/verticalelijn.PNG);
background-position: right top;
margin-top: 0px;
width: 0px;
height: 500px;
}


Gr. Han
Gebruikersavatar
Frederik
Moderator
Berichten: 4262
Lid geworden op: 1 juli 2004, 16:16
Locatie: Vriescheloo
    Windows XP Firefox

Re: Verticale lijn maken

Bericht door Frederik »

Hier een mooi voorbeeld en uitleg voor een al dan niet dubbele verticale lijn, waarbij je zelf kunt aangeven hoe lang die moet zijn en op welke positie (breedte).
http://kompoos.nl/css/text-effects/vertical-line.html

Waarom gebruik je: *|
Ik heb dat nog niet eerder gezien in een stijlblad.
han52krol
Berichten: 63
Lid geworden op: 12 juni 2011, 10:57
Locatie: vroomshoop
    Windows XP Firefox

Re: Verticale lijn maken

Bericht door han52krol »

Ha Frederik,

Bedankt hier voor. Dat *} komt, vermoedelijk, door Notepad++ . Ik gebruik dat om te selecteren en dan hier neer te zetten. Maar kan het kwaad?

Gr. Han
Gebruikersavatar
Frederik
Moderator
Berichten: 4262
Lid geworden op: 1 juli 2004, 16:16
Locatie: Vriescheloo
    Windows XP Firefox

Re: Verticale lijn maken

Bericht door Frederik »

Ja, dat is niet goed.
Een * wordt gebruikt om een stijlregel van commentaar te voorzien.
Bijvoorbeeld: sterretje openen en sterretje sluiten

/*dit is de code voor een verticale lijn*/

{
#verticale lijn
background-image: url(../afbeeldingen/verticalelijn.PNG);
background-position: right top;
margin-top: 0px;
width: 0px;
height: 500px;
}

En dat verticale teken is geen stijlregel teken.
han52krol
Berichten: 63
Lid geworden op: 12 juni 2011, 10:57
Locatie: vroomshoop
    Windows XP Firefox

Re: Verticale lijn maken

Bericht door han52krol »

Hoi Frederik,

Ok, bedankt voor je uitleg. Of dat nog wat word met dat CSS verhaal, ga ik nu sterk aan twijfelen. In een of andere manier is het niet goed gegaan. Alles weer uit zijn verband getrokken en ik heb de boel maar in de prullenbak gekieperd. De blauwe achtergrond kreeg ik niet terecht in de container, ik had kleurverschil in de banner en headertekst, die moest ik wel maken met Paint. Net als de blauwe achtergrond.

Ik denk dat ik er maar mee kap, ik kom geen stap verder en alles wat ik doe, lukt gewoonweg niet. Volgens mij is mijn exempl. van Kompozer ook niet 100%. Ik krijg in websitebeheer niet de mappen te zien, wat normaal toch moet?

Gr. Han
Gebruikersavatar
Frederik
Moderator
Berichten: 4262
Lid geworden op: 1 juli 2004, 16:16
Locatie: Vriescheloo
    Windows XP Firefox

Re: Verticale lijn maken

Bericht door Frederik »

KompoZer geeft bij mij nooit problemen. Hoe dat met die sitebeheerder zit weet ik niet.
Die heb ik nog nooit gebruikt.
Zoek eens naar een mooie css template/sjabloon, er zijn bakken vol pracht exemplaren te vinden en die vrij gemakkelijk te bewerken zijn.
knorretje
Berichten: 204
Lid geworden op: 8 augustus 2010, 11:37
    Windows Vista Firefox

Re: Verticale lijn maken

Bericht door knorretje »

Frederik schreef: En dat verticale teken is geen stijlregel teken.
Toch wel, al moet er dan wel nog een sterretje bij :wink:

Code: Selecteer alles

*|*#div1:hover { background: yellow; } /* CSS3 universal selector */
Het verticale teken is ook een attribuut selector sinds CSS2.1
En ik zou trouwens ook geen spaties gebruiken in de ID's.
Gebruikersavatar
Frederik
Moderator
Berichten: 4262
Lid geworden op: 1 juli 2004, 16:16
Locatie: Vriescheloo
    Windows XP Firefox

Re: Verticale lijn maken

Bericht door Frederik »

Het verticale teken is ook een attribuut selector sinds CSS2.1
Schiet mij maar lek, ik weet van niks :cry:
knorretje
Berichten: 204
Lid geworden op: 8 augustus 2010, 11:37
    Windows Vista Firefox

Re: Verticale lijn maken

Bericht door knorretje »

Nou ja, bijna dan. Er moet dan nog wel een = teken bij. (|=)
http://www.w3.org/TR/CSS2/selector.html ... -selectors