lijn met css

[chonazz]

Beste mensen,

Ik heb op een site een onderdeel nieuws, en daar word de tekst uit een xml ingeladen, en opgemaakt met css, maar nu zou ik onder iedere titel, of tussen ieder deel een lijn willen die even lang is als het venster breed.
Een beetje zoals hier op deze site de titels onderlijnt zijn:

site (http://www.winsupersite.com/reviews/apple_frontrow.asp)

Is dit via css te doen? Of is er nog een betere manier voor?

Groeten
jonas

[theFlashWizard]

je kan mischien een element een border-bottom geven.. :)
das wel netjes toch? :)
ik weet alleen niet of dit direct kan met een heading.. mischien dat je het dan eerst nog in een div moet zetten..

[SubZero]

Elk block level element zal zover gaan als de block waarin hij zich al dan niet bevindt.

XHTML:<h1>Dit is een onderlijnde title</h1>

CSS: h1
{
margin: 0 0 10px 0; padding: 0 0 3px 0;
border-bottom: 1px solid blue;
}

Je kan alle waarden aanpassen naar willekeur uiteraard.

[chonazz]

Ik heb m'n css even aangepast en heb er nu dit van gemaakt:

title {
font-family: Verdana;
font-size: 14px;
font-weight: bold;
color: #999999;
display: block;
margin-left: 0pt;
border-bottom: 1px solid blue;
text-align: left;
;
}

Maar nu valt de titel gewoon weg? :)

[josko]

een lijn eronder? wat dacht je van een hr...

<hr width="100%" bgcolor="#000000">

weet nu f fniet of color of bg color is, probeer maar ff

[theFlashWizard]

chonazz, gebruik ipv title h1, daarvoor is h1 gemaakt en dat is ook beter voor je vindbaar heid in zoekmachines.

josko, dat lijntje is eigenlijk opmaak.. dat voegt niks toe aan de structuur van de pagina.. het netste is dus dat je dat alleen met css doet..

[chonazz]

Zou hij het wel doen als ik het met h1 doe?

[theFlashWizard]

je zou het toch kunne probere.. :)
SubZero lijkt het wel te bedoelen toch :)

[chonazz]

Ok, m'n title staat er nu terug, maar er is niets onderlijnt?

Groeten
JOnas

[theFlashWizard]

als je nou is ff dmv van script laat zien hoe je het gedaan hebt..
dan kan ik er temisnte wat over zeggen..

als h1 alleen niet werkte is het mischien een optie om de h1 in een div te zetten met de class heading ofzo..
het div'je schaal je dan 100% en die kan ze zeker een border geven..
en later kan je er mischien nog wel meer dingen mee doen die je niet met h1 kon..

[chonazz]

:-) ok, dit is m'n css:


h1 {
border-bottom: 1px solid blue;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
color: #999999;
display: block;
margin-left: 0pt;
text-align: left;
}

text {
font-family: helvetica;
font-size: 11px;
color: #999999;
display: block;
margin-left: 10pt;
margin-right:10px;
}

info {
font-family: helvetica;
font-size: 11px;
color: #999999;
display: block;
margin-left: 10px;
margin-right: 10px;
}

a {
font-size: 11px;
color: #ff9900;
font-weight: bold;
}
a:link {
text-decoration: underline;
}
a:visited {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
color: #333333;
}
a:active {
text-decoration: none;
color: #FFFFFF;

}



En dit is een stukje van de xml die door de css wordt opgemaakt:

<news>
<h1>Night of the Proms</h1><text>Op 10 november is het zover : onze grote uitstap naar Antwerpen alwaar we in het Sportpaleis zullen kunnen genieten van optredens van o.a. Safri Duo, Ace Of Base en Donna Summer.
Kaarten kosten 19 euro voor leden en 24 euro voor niet-leden, in deze prijs zit het busvervoer van en naar het Sportpaleis inbegrepen.
Inschrijven doe je bij het praesidium of op de permanenties.
Permanentie op woensdag-en vrijdagvoormiddag van 10 tot 12 in de hal van onze faculteit ( H.Dunantlaan 2 ) en op woensdag 26/10 van 18 tot 19u in de kelder van de faculteit tijdens de boekenverkoop.Verdere permanenties zullen aangekondigd worden.
Zorg dat je erbij bent want de kaarten zijn beperkt!!!
</text>


Ik weet niet wat ik fout doe, maar nu heb je dus geen lijn onder de titel. Ik las wel wat over een table maken enz? Maar ik ben niet echt goed met css.. Heb nu gewoon het simpelste van het simpelste gebruikt, en z'n lijntje lukt me dus nog niet :-)

[SubZero]

Voor zover ik weet zijn er nog steeds geen tags "<news>" of "<text>" in XHTML, tenzij je een eigen DTD hebt geschreven. Maar betwijfel ik.

[SubZero]

Oeps, het is XML, my mistake.

[chonazz]

Klopt het dan wel? Want hij wordt wel mooi opgemaakt?
Nu alleen de lijn nog, wat volgens mij ook mooi zou zijn is dat er gewooon tussen ieder nieuws item een lijn komt over heel het veld? Dus dat ik gewoon tussen ieder item een tag zet zoals <br/> maar dan een lijn met langs boven en onder even veel spacing, zodat je eerder blokken nieuws krijgt in plaats van een doorlopende tekst?

[SubZero]

Maar de XML/CSS wordt in Flash geladen als ik het goed begrijp??

[chonazz]

als je nou is ff dmv van script laat zien hoe je het gedaan hebt..
dan kan ik er temisnte wat over zeggen..

als h1 alleen niet werkte is het mischien een optie om de h1 in een div te zetten met de class heading ofzo..
het div'je schaal je dan 100% en die kan ze zeker een border geven..
en later kan je er mischien nog wel meer dingen mee doen die je niet met h1 kon..

Ik denk dat ik wel snap wat je bedoelt, maar hoe geef ik dit nu aan in m'n css?
Dat alles tussen 2 bepaalde tags tot die div behoord of zo iets?
Ik heb wel iets op het net gevonden als:


<div style="border: red 4px dashed; border-bottom: blue 4px solid; border-left-style: ridge;">text</div>

Maar hoe moet ik dit nu in m'n css bestand zetten? En wat moet ik juist doen om het in m'n xml aantegeven dat dat het deel is dat een border moet krijgen?

Groeten
Jonas

[chonazz]

Maar de XML/CSS wordt in Flash geladen als ik het goed begrijp??

Jeps, de xml wordt in flash geladen, en dan opgemaakt met css.

[theFlashWizard]

owke.. nou worden de vragen te basic..
ik stel voor dat je eerst wat basic css en xhtml leert, dit zijn wat goede articels en tutorials:
http://www.westciv.com/style_master/academy/css_tutorial/selectors/index.html
http://www.westciv.com/style_master/academy/css_tutorial/selectors/index.html
http://www.alistapart.com/stories/taminglists

als je dit trouwens in flash wil inladen kan je het vergeten.. dan zijn dingen als xhtml en de "geavanceerdere" trucen met css geen optie.

[chonazz]

Ja, maar ik zou echt gewoon eerst even die lijn moeten hebben? Ik ben css rustig aan aan het leren, maar sommige dingen heb ik nodig terwijl ik ze nog niet ken...

Dus als jullie me hier even bij zouden willen helpen zou dat super zijn! :-)

[theFlashWizard]

de truc is dat je niet snapt nog of nog niet doorhebt hoe je logische structuren aan iets geeft.. en dat zal ik je ook niet kunnen uitleggen.. das een kwestie van een btje ervaring met xhtml, graag n btje xml en veel voorbeelden.

<div style="border: red 4px dashed; border-bottom: blue 4px solid; border-left-style: ridge;">text</div>

is een stukje (X)html, die inline een stijl heeft meegekregen.. alleen het element is enkel:
<div></div>
daar kan je dus vanales inzetten.. zoals jou heading..
en als je dan die div een class geeft kan je die dmv van je externe css bestand aanspreken..

[chonazz]

maar komt de div dan in de css of in de xml?

Ik snap wel ongeveer wat je bedoeld denk ik, alleen weet ik niet goed wat waar hoord...
Want als ik het goed door heb kan je die div ook helemaal anders noemen?
En komt gewoon wat ik met een border wil opmaken daartussen te staan?
En krijg ik in m'n css gewoon:

div {border-line=.......;

}

Of zit ik er nu naast?

[mech7]

Umm mischien een rare vraag? maar waarom kies je ervoor om xml met css op te maken? ipv xhtml?

html elementen hebben geen waardes in xml, dus h1 of div zal geen invloed hebben.

[chonazz]

Omdat je xhtml niet zo mooi in flash kan laden?
Of heb ik het hier mis? Ik gebruik xml omdat ik een tutorial gevolgd heb met de uitleg hoe dit te doen.. :-) Dus verder ken ik er niet zo veel van eigenlijk.. Kan enkel met flash werken.

[mech7]

xml is niet echt bedoeld voor opmaak meer voor opslag van data.. je kan wel css gebruiken voor xml maar het is niet bedoeld dat je xml voor opmaak gaat gebruiken.

Dan zou je xlst moeten gaan gebruiken. Maar dat werkt dan weer waarschijnelijk niet in flash ;)

Als je xml inlaad in flash neem ik aan dat je het daar toch zou moeten kunnen stylen, heb verder geen xml / flash kennis :p

[theFlashWizard]

je wil het wel in flash inladen? :|


als je dit trouwens in flash wil inladen kan je het vergeten.. dan zijn dingen als xhtml en de "geavanceerdere" trucen met css geen optie.

vergeet dit maar.. ik denk niet dat flash de div tag support..

chonazz, lees de html, css in flash tuturial op www.gotoAndLearn.com
en zoek eens in flash help op supported html om te kijken welke html tags je kan toevoegen.. zo zijn ook de css tags te vinden..

[chonazz]

nee flash support gaan div tag :-)
Daarom dat ik het vroeg, hoe ik dit met enkel css zou kunnen oplossen?

Maar dat gaat dus blijkbaar niet?

Ja die tut heb ik gevolgd, en daar heb ik het ook van geleerd...