Verticale lijn maken

[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]

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

[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]

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

[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]

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

[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]

En dat verticale teken is geen stijlregel teken.

Toch wel, al moet er dan wel nog een sterretje bij

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.

[Frederik]

Het verticale teken is ook een attribuut selector sinds CSS2.1

Schiet mij maar lek, ik weet van niks

[knorretje]

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