Tekst som krysser midten av en <hr /> evt. border

[Christian_]

Jeg jeg vet at dette er mulig ved hjelp av grafikk, men jeg lurer på om det finnes en løsning for å gjøre dette bare med css og html.

 

EDIT: trykka før jeg skulle

Det ligner litt på legend og fieldset men jeg vil ha kun en strek og teksten midt på linja

 

her er et eksempel på hva jeg mener:

Endret 31. mai 2005 av chs89

[Sono Juventino]

edit: alt ble feil.

Endret 31. mai 2005 av ett

[fjuriess]

Tror ikke det. Ikke som jeg kommer på no hvertfall.

 

Er jo mulig å skrive det ?

[Cucum(r)]

Du bør i såfall gjøre noe sånt: http://dev.misinterpreted.org/exprimental/no-hr/

[Christian_]

Jeg tenkte å bruke det som overskrifter, ved for eksempen en ny nyhet i blogg ol.

Forsto ikke helt hva du mente SirIce

 

EDIT: ah... sjønte SirIce men det var ikke akuratt det jeg var ute etter Går jo ann hvis jeg lager flere diver, men det er jo så tungvindt!

Endret 31. mai 2005 av chs89

[PT]

Jeg tenkte å bruke det som overskrifter, ved for eksempen en ny nyhet i blogg ol.

Forsto ikke helt hva du mente SirIce

 

EDIT: ah... sjønte SirIce men det var ikke akuratt det jeg var ute etter Går jo ann hvis jeg lager flere diver, men det er jo så tungvindt!

Du bruker vel ikke hr til å lage overskrifter?

 

En ting du kanskje kan gjøre er vel noe slikt:

<h1><span class="overskrift">Overskriften, ditt nek</span></h1>

Så mekker du et fint bilde bestående av en strek (uten noe mellomrom) og setter det som bakgrunn på h1. Deretter setter du bakgrunnfargen på .overskrift til hvit. Bør vel kanskje funke?

 

Med forbehold om at hodet mitt er altfor fullt av eksamenstanker akkurat nå til at jeg takler å tenke klart

[Christian_]

Jeg tenkte å bruke det som overskrifter, ved for eksempen en ny nyhet i blogg ol.

Forsto ikke helt hva du mente SirIce

 

EDIT: ah... sjønte SirIce men det var ikke akuratt det jeg var ute etter Går jo ann hvis jeg lager flere diver, men det er jo så tungvindt!

Du bruker vel ikke hr til å lage overskrifter?

 

En ting du kanskje kan gjøre er vel noe slikt:

<h1><span class="overskrift">Overskriften, ditt nek</span></h1>

Så mekker du et fint bilde bestående av en strek (uten noe mellomrom) og setter det som bakgrunn på h1. Deretter setter du bakgrunnfargen på .overskrift til hvit. Bør vel kanskje funke?

 

Med forbehold om at hodet mitt er altfor fullt av eksamenstanker akkurat nå til at jeg takler å tenke klart

Joa, det er jo en mulighet

Får prøve noe lignende

[LessThanJake]

Kan jo prøve på noe....

<hr />Tekst<hr />

hr{ display: inline; }

....lignende, vet ikke hvor bra det vil funke da, men du slipper bakgrunnsfarge, noe som er bra hvis du bruker grafikk i bakgrunnen.

[cfenzo]

Om du absolutt skal ha en strek bak overskriften, så kan du jo f.eks. gjøre som PT sa, men istedet for bilde så setter du f.eks. border-bottom: 1px solid #666; på h1, og sette negativ margin på <span> ?

 

eks:

<h1><span>Overskriften, ditt nek</span></h1>

css:

h1 {border-bottom:1px solid #666;}
h1 span {margin-bottom: -20px; background-color: #fff;}

 

Det skulle funke..

 

En anna måte, som du helt sikkert kommer over om du leter en del, men som du IKKE bør bruke da de elementene blir brukt HELT feil er:

<fieldset><legend>overskrift</legend>
alt innhold her
</fieldset>

css:

fieldset {border:0px solid #fff; border-top:solid 1px #666;}

 

VIKTIG!

Grunnen til at jeg nevner den over, er at du helt sikkert kommer over den om du leter litt, men den BØR IKKE brukes.. pga <fieldset> og <legend> er form-elementer, og har INGENTING i andre deler av en code å gjøre, og ihvertfall ikke i overskrifter!!!

Endret 31. mai 2005 av cfenzo