Horizontal Rule - Hvordan styler jeg den så den har et ikon i midten?

Tags:    css html css3

Hej allesammen

Jeg har et måske lidt simpelt spørgsmål, men har dog brug for hjælp, da jeg ikke lige kan greje hvordan det løses.

Jeg har fundet følgende billede - Icon Finder

Jeg vil nu gerne have lavet en horizontal Rule ( <HR> ), hvor den går fra højre side til venstre side af skærmen, ligesom den gør normalt, men nu skal jeg bare have den til at stoppe i midten, lave et hul, hvor billed ikonet bliver indsat, og herefter fortsætte som normalt igen.

Hvordan gør jeg det?

Mvh
Martin Rohwedder



Indlæg senest redigeret d. 18.07.2014 15:11 af Bruger #4487
9 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 8 karma
Sorter efter stemmer Sorter efter dato
Pjat, det kan sagtens gøres med 1 element. Juster selv billed og % så det passer med bredten på stregerne.

Eksempel her og kode forneden:

Fold kodeboks ind/udHTML kode 


Fold kodeboks ind/udCSS kode 




Indlæg senest redigeret d. 19.07.2014 13:41 af Bruger #17081
Du kan ikke gøre det med <hr> da elementet principielt ikke har nogen højde. <hr> bliver også tegnet forskelligt mellem hver browser.

Jeg ville nok gøre det med et eller to <div> elementer.



Michael, det kommer vel helt an på om Martin vælger at style <hr />?

Jeg har prøvet at lave et eksempel efter dit ønske Martin, du kan evt. smide koden ind i et html dokument og selv rette til efter ønske det kan sikkert gøres kortere, dette er blot et udkast:

Fold kodeboks ind/udHTML kode 




Hej Martin.

Jeg fanger ikke helt hvad du ville, det lyder som om du ville lave en slide animation af det ikon du har fundet på hr elementet.

Hvis jeg var dig ville jeg nok lavet det i stil med.

#Lav en div, og sæt dens width til 100% og højde til det antal pixels du ville have.

#Sæt diven til position: relative

#Lav et hr element inde i diven, sæt denne vertikalt i midten og width 100%

#Style dit hr element. Højde, farve mm.

#Sæt dit ikon til position absolute, så den ligger i venstre side ovenpå hr elementet (slide).

#Sæt eventuelt den animation på som du ville have.



@lasse... læg mærke til "principielt". :o)

ca. samme formulering for et <a> der principielt ikke er en knap. Men du kan sagtens bruge css til at lave det til en knap. ;o)

....

Men da browsere tegner <hr> elementer forskelligt, selv med CSS, bliver det besværligt at arbejde med. Og det semantiske du opnår, kan også opnåes med <section> elementer. Fordi <hr> elementer indikerer et tema-skifte i den artikel du læser. Og så lange bliver sider, på nettet, meget sjældent.

Jeg ville lave en simpel kode (Selvfølgelig uden inline-styling):
Fold kodeboks ind/udKode 




Indlæg senest redigeret d. 18.07.2014 18:52 af Bruger #10216
@Michael Larsen OBS!, det overså jeg min fejl.. :)



Hej allesammen

Tak for hjælpen, Jeg har brugt Dans løsning, da det virkede meget enkelt og lige til. Vidste ikke det med :before og :after.

Kan i ikke lige forklare mig hvad det er præcist de gør (kunne måske også bare google det :P )



:before og :after er pseudo elementer og ligger før og efter det element som du styler dem på. Selvom mange siger de er css3, så er de faktisk en del af css2.1 og virker derfor også med ie8 (dog med lidt små issues)



::before/::after er CSS3, :before/:after er helt tilbage til CSS2 (http://www.w3.org/TR/1998/WD-css2-19980128/) - :: blev implementeret for at omgås forvirringen mellem before og after som pseudo-elementer eller -classes.. Issues kan der let søges efter, men vi taler blot om z-indexering og hover-state og sådan (IE8), og som dan siger, er det blot småting.

Lige for at supplere dan, som også kom med den løsning jeg synes mest favorabel



t