HTML og CSS - Nybegynner med spørsmål

[Manlulu]

Takker! og takk for forklaringa av div og section. Utrolig vanskelig å få noe svar fra folk på akkurat det tema.

 

Anyway. Jeg har en boks.

Den er:

.box {

position: absolute;

width: 250px;

height: 50px;

text-align: center;

<div class="box">En tekst som nekter å stå der jeg vil</div>

For meg så er text-align en eneste stor tease.. Den sentrerer i midten, men ikke oppe og nede.

Hvordan får jeg teksten til å bli nøyaktig i senter. Fra høyre, venstre oppe og nede. Jeg vil ha den i midten!

[Manlulu]

Et til spørsmål. Noe har skjedd.

 

Når jeg skriver

 

text-align: center,

 

så starter teksten i midten og går mot høyre. Så kun høyre siden får tekst.

Anyone?

[Yawa]

Det finnes flere måter å få midtstilt innholdet vertikalt.

 

For en enkel tekstlinje som du vet at ikke vil overskride den totale tilgjenglige bredden, så kan du sette css.line-height:50px; - (50px i ditt tilfelle). Altså til samme høyde som elementet.

 

Her er en annen måte du kan prøve ut - hvis du ikke vet om teksten vil gå over flere linjer:

.box {
  width: 250px;
  height: 50px;
  text-align: center;
# følgende midstiller teksten vertikalt
  display:table-cell;
  vertical-align:middle;
//
}

Denne metoden er forøvrig ikke kompatibel med alle nettlesere, samt at css.table-cell også påvirker elementet med tanke på at det nå oppfører seg som et tabell-element.

 

En tredje måte er å plassere ytterligere en div inni figcaption og midtstille denne vertikalt:

figcaption {
  width: 250px;
  height: 50px;
  position:relative;
}

.vertical-center {
  margin: auto 0;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

PS! For at denne metoden skal fungere må .vertical-center elementet vite høyden på seg selv. Altså; Du må sette css.height til f.eks. 20px.

 

Så du må nesten bare prøve deg litt frem og se hva som funker for deg. Finnes garantert flere måter å få til dette på, men det er disse jeg kom på nå i farta...

Endret 26. september 2013 av Yawa

[Manlulu]

Jeg prøvde den andre metoden, med display:table-cell;

vertical-align:middle

Bildet spratt langt ifra midten. Jeg har gjort noe et sted som gjør at det ikke fungerer.. tror jeg.

 

Jeg har et annet spørsmål da. Å sentrere bildet automatisk får vente en liten stund.

 

Om jeg har en rekke linker.

Thats it. Det er ikke snakk om å lage noe id eller class eller noe.

 

Jeg vil ha tak i linker som inneholder et spesefikkt (spesifikk?) ord i url'teksten, og style dette.

Altså jeg vil lage en.. jeg vil skrive enkle kommandoer i css for å finne f.eks. alle url som har "vg" i seg, og så vil jeg style KUN disse.

 

Igjen.. dette uten id eller class eller noe slik.

 

Hvordan kan jeg gjøre dette?

[sens1r]

Du kan ikke gjøre dette uten en klasse, CSS gir ikke muligheten for det.

 

Anbefalt setup er som følger.

A.link1 {color:green}

<a href="link1.html" class="link1">Grønn link</a>

Endret 26. september 2013 av sens1r

[Gjest Slettet+1523]

Jeg prøvde den andre metoden, med display:table-cell;

vertical-align:middle

Bildet spratt langt ifra midten. Jeg har gjort noe et sted som gjør at det ikke fungerer.. tror jeg.

 

Jeg har et annet spørsmål da. Å sentrere bildet automatisk får vente en liten stund.

 

Om jeg har en rekke linker.

Thats it. Det er ikke snakk om å lage noe id eller class eller noe.

 

Jeg vil ha tak i linker som inneholder et spesefikkt (spesifikk?) ord i url'teksten, og style dette.

Altså jeg vil lage en.. jeg vil skrive enkle kommandoer i css for å finne f.eks. alle url som har "vg" i seg, og så vil jeg style KUN disse.

 

Igjen.. dette uten id eller class eller noe slik.

 

Hvordan kan jeg gjøre dette?

 

Du kan prøve:

 

a[href*="vg.no"] { /* hvaenn du vil gjøre i CSS */ }

Det henter alle linker som har en adresse som inneholder "vg.no", så endrer du bare dette til det du vil ha.

 

EDIT: Ref. sens1r, det er vel ikke helt riktig at dette ikke lar seg gjøre. Ved å bruke [] som selektor kan du hente verdier fra attributtene til HTML-tagger, i dette tilfellet for å hente href-attributtet til lenker. Hvis du vet at ALLE linker som går til en spesiell adresse skal ha spesiell CSS, ville jeg avgjort ikke gjort dette gjennom å gi klassenavn, for å bedre skille mellom innhold og utseende.

Endret 26. september 2013 av Slettet+1523

[Manlulu]

Det OneFatCat sa funka trenger ikke lage egen classe eller id. Takker!

[Manlulu]

I CSS skal jeg velge ut et element som ligger på en spesefikk (spesifikk?) linje i HTML koden.

 

Hvordan?

[MikkelRev]

Å referere til linjenummer er dårlig praksis..

[Dan-Levi]

Å referere til linjenummer er dårlig praksis..

Når du forklarer at noe er dårlig praksis er det greit å følge opp med hva du mener er god praksis så innlegget blir til hjelp.

[Manlulu]

Ja helt enig. Og nå er det ikke god eller dårlig praksis jeg er ute etter, men bare hvordan man gjør det.

[Gjest Slettet+1523]

Du kan ikke velge elementer ut fra linjenummer i CSS, for linjenummer tas ikke høyde for i DOM'en. Uansett hadde det ikke vært noen god idé fordi du ikke tar høyde for at innholdet kan endre seg underveis.

Endret 28. september 2013 av Slettet+1523

[Manlulu]

ahhhhh shit shit shit det er jeg som har sett feil

 

Takk uansett

[Manlulu]

Noen som vet hvorfor display:inline ikke vil funke i en liste?

 

<div id="buttons_top">

<nav>

<ul>

<p>hei</p>

<p>hei</p>

<p>hei</p>

<p>hei</p>

</ul>

</nav>

</div>

#buttons_top {

display:inline;

}

[Manlulu]

Jeg bruker <li>Link</li>, og ikke <p></p> selfølgelig.

 

Tar jeg bort <li></li>, så fungerer det. Noen som har noen ideer?

[sunsunsun]

Er det DIVen #buttons_top skal skal være inline, eller <li> skal være inline?

[Manlulu]

buttons_top skal være en liste. En meny da. <li> ligger under den div'en. Så begge deler skal være inline. Det blir samme tingen

[Manlulu]

brukte float: left; under li {}

Så nå er de på linje.

 

 

 

Nytt spørsmål da.

 

- Jeg lager en div.

- Lager boks utav diven. Height, width background-color ect.

- Vil ha en liste inni boksen. Altså lage en meny.

 

Nå jeg begynner å skrive, så går alt bra. Teksten plasserer seg der jeg vil.

Men med en gang jeg putter <ul></ul> rundt lista, så BOOM! Teksten flytter på seg, og hele menyen blir ødelakt.
Hvordan får jeg stilt tilbake teksten?

Endret 28. september 2013 av Manlulu

[sunsunsun]

brukte float: left; under li {}

Så nå er de på linje.

 

<li> er fortsatt et block-element. Hvis du sier at #buttons_top er inline så endrer du ikke elementer inne i den.

 

 

<li> er i utgangspunktet et block-element. Hvis du vil at #buttons_top og <li> (som er inne i #buttons_top) skal være inline så må du skrive:

#buttons_top, buttons_top li {
  display: inline; 
}

Det er ikke noen grunn til å ha en div rundt et nav element, så hvis du fjerner den så får du litt enklere kode. ID attributten kan du flytte til <nav>.

 

Edit: <ul> er et block-element, og man skal ikke ha block-elementer i et inline-element. Er det noen grunn til at #buttons_top må være et inline-element?

Endret 28. september 2013 av elos

[Manlulu]

Jeg må jo ha en div rundt de knappene, så jeg får kalla på dem i css da. Nå har jeg en meny til venstre, og en på toppen