HTML og CSS - Nybegynner med spørsmål

[Manlulu]

Jeg driver å lærer meg HTML og CSS, og har ofte en del "enkle" nybegynner spørsmål som sikkert mange der ute kan svare på.. og kanskje le av..

Jeg tenkte jeg kan sammle spørsmåla her, så det ikke blir så veldig mange tråder.

 

Jeg driver på med borders og posisjonering i CSS nå, og har kommet til et punkt der jeg skal lage noen skreive streker, kun ved hjelp av borders.

 

Når jeg lager en rett strek, har jeg skrevet koden slik:

 

#strek {
width: 2px;
height: 280px;
border-color: black;
border-width: 2px;
border-style: solid;
}

 

Husk at det ikke skal være noen komplisert kode.

[sens1r]

Tenker du diagonal linje? Hva skal den brukes til? Dersom det er bakgrunn vil jeg anbefale å bruke Gradients.

[Yawa]

Noe usikker på hva du mener med "skreive streker". Men om du mener at strekene skal stå på skrå ( / ) - så kan du benytte css3.transform:rotate("x"deg). Eksempel:

#strek {
    width:2px;
    height:280px;
    border:2px solid black;  /* forenklet kode "border-width, border-style, border-color" - i den rekkefølgen */

    transform:rotate(46deg) ;
}

For ytterligere kompabilitet, på kryss av nettlesere, er det greit å utvide roterings-koden slik:

-webkit-transform: rotate(46deg) ;
-moz-transform: rotate(46deg) ;
-o-transform: rotate(46deg) ;
-ms-transform: rotate(46deg) ;

Endret 16. september 2013 av Yawa

[banansplitt™]

 

 

Noen spesiell grunn til at du opererer med 46 grader kontra 45?

[lolvik_InnleggNO]

----

Endret 16. september 2013 av lolvik_InnleggNO

[Manlulu]

Det var transform jeg var ute etter! Takker Yawa

 

Litt off topic på hva jeg trenger, men går det an å lage et trapes kun ved hjelp av en figur?

Endret 16. september 2013 av Manlulu

[Manlulu]

Tenker du diagonal linje? Hva skal den brukes til? Dersom det er bakgrunn vil jeg anbefale å bruke Gradients.

Skulle ikke brukes til noe. Lage en figur. Øve meg

[sens1r]

Det var transform jeg var ute etter! Takker Yawa

 

Litt off topic på hva jeg trenger, men går det an å lage et trapes kun ved hjelp av en figur?

 

 

Her er en side med diverse oppskrifter på forskjellige figurer du kan lage med CSS.

http://css-tricks.com/examples/ShapesOfCSS/

[Manlulu]

Awesome! En slik trengte jeg virkelig. Kommer til å bli mye enklere for meg å se gangen i det nå.

Takker sens1r!

[Yawa]

 

Noen spesiell grunn til at du opererer med 46 grader kontra 45?

Nei nei Bare et helt random tall Men bomma nok litt på tastaturet i utgangspunktet...

Endret 16. september 2013 av Yawa

[Manlulu]

Neste spørsmål:

 

Jeg driver på med en side av et slag.

Tanken er at jeg skal dele siden i 2. Eller 2 bilder om du vil. Gress nede og himmel oppe.

Over dette skal det komme noe tekst.

 

Jeg har laga 2.. emm div.. Funnet noen bilder og satt de som bakgrunn.
Da danner de et komplett bilde tilsammen. En helt okay måte å gjøre det på, så langt kunnskapene mine rekker.

 

<div id="gras"> </div>

<div id="sky"> </div>

#sky {

position: absolute;

top: 0px;

width: 960px;

height: 300px;

background-image:url('Sky.png');

}

#gras {

position: absolute;

bottom: 0px;

width: 960px;

height: 300px;

background-image:url('Gras.JPG');

}

Alt er inni en section, men det er ikke så viktig nå.

Problemet kommer når jeg vil ha frem noe tekst.
Jeg får ikke teksten til å komme forran bakgrunnen. Tar jeg bort himmelen, så kan jeg se teksten poppe frem.

Regner med at dette skal være relativt greit å få orden på? Noen som har noen ideer om hva jeg kan gjøre?

<div class="Setninger">

<div id="1_setning">Setning 1</div>

<div id="2_setning">Setning 2 </div>

<div id="3_setning">Setning 3 </div>

</div>

Jeg har putta setningene i forkjellige div's, fordi jeg skal gi de forskjellige egenskaper.

Håper dette ikke ble veldig rot.

Jeg trenger bare hjelp til å få teksten forran bakgrunnsbilde.

Endret 21. september 2013 av Manlulu

[Manlulu]

Fant det ut.

 

I classen Setninger, så tok jeg position: absolute;

[Manlulu]

Er det mulig å få noe til å fade in, og ut igjen etter noen sekunder ved hjelp av transition i css?
F.eks å bruke opacity til å fade in og ut?

[Yawa]

Ved bruk av jQuery kan du gjøre noe slik $('#element-to-fade').fade();

[banansplitt™]

Er det mulig å få noe til å fade in, og ut igjen etter noen sekunder ved hjelp av transition i css?

F.eks å bruke opacity til å fade in og ut?

 

Det kommer helt an på hvordan du vil bruke det. Skal elementet fade in og ut igjen ved at du f.eks. holder over elementet, eller skal det fade av seg selv f.eks. én gang når siden er lastet eller flere ganger etter at siden er lastet?

[Manlulu]

Jeg meinte f.eks: når du holder over noe, så skal et objekt komme inn på skjermen, snu og reise ut av skjermen. Men fant ut at det ikke går an men bare transition. Men mindre du tar en div inni en div.

 

jQuery har jeg aldri hørt om

[Manlulu]

Spørsmål:

Jeg lager en boks med css.

- height

- width

- border.

Inni den bosen skal jeg ha et bilde og en liten tekst over bilde.

Jeg skriver som følger:

<section class="box" id="box_1"> Her velger jeg å plassere tekstern. Blir det rett?

<img id="bilde_1" src="bilde1.jpg" >

</section>

Ok so far so good.

Så drar jeg inn i css fila mi.

Der lager jeg en class for box, der jeg skriver inn height og width og litt farger.

Setter alt til position:absolute.

Bildet kommer inn i boksen, slik jeg vil. Jeg kan også endre på plasseringen til bildet inni boksen, vet å skrive left: 10px, bottom 10px osv.

Men.. Jeg får ikke til å centrere teksten.. centrere?

Jeg prøvde å putte teksten i en paragraf <p></p>. Jeg fikk da endra på tekst størrelsen til alle paragrafer ved å gjøre:

p {

font-size: 34px;

}

Men jeg får ikke endra posisjonen til denne teksten.

Er det noen smarte hoder som kan hjelpe meg med dette?

Jeg vil altså ha bilde og en liten tekst inni en boks. Jeg skal ha flere bokser med andre bilder og text btw.

Jeg vil så kunne centrere teksten og bilde. Kanskje også posisjonere bilde og tekst uavhengig av hverandre?

[Manlulu]

Emm vet ikke hvorfor, men jeg tok vekk paragraf, og så fikk jeg teksten i senter ved å bruke text-align:center inne i #box_1

Så nå endrer jeg på text og bilde uavhengig av hverandre der inne. Det føles feil, men det funker

[Dan-Levi]

Hei,

 

Du kan enkelt sentrere tekst slik:

 

HTML

<section class="box" id="box_1"> 
    <p class="foo">Her velger jeg å plassere tekstern. Blir det rett?</p>
    <img id="bilde_1" src="http://i.imgur.com/d4k4tRs.jpg" >
</section>

CSS

.box img{
    display:block;
    margin:auto;
}

.foo {
    text-align:center;
}

[Yawa]

Bare et par tips - siden spør "blir det rett?":
Anbefaler deg å bytte ut section med en vanlig div.

section er ment å benyttes når det er naturlig å sette en ny overskrift.

 

W3C sier følgende

 

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

 

Hold deg til div i de tilfeller hvor det gjelder posisjonering og styling av underliggende elementer.
Benytt kun section når det er naturlig å sette en ny overskrift.

 

Et eksempel på bruk av section:

<article>
    <h1>To ting du kan fylle hjernen med</h1>
    <p>Den første er nyttig, men det er ikke den andre.</p>
    <section>
        <h2>Lorem ipsum</h2>
        <p>"Lorem ipsum dolor sit amet" er starten på en dummytekst som stammer helt tilbake fra 1500-tallet.<br>
            Den ble skapt av og for trykkindustrien siden vi har en tendens til å bli distrahert av lesbart innhold når det er layouten som skal betraktes. Les mer her:  http://no.lipsum.com/</p>
    </section>
    <section>
        <h2>The quick brown fox jumps over the lazy dog</h2>
        <p>En setning som inneholder alle bokstavene i det engelske alfabetet.</p>
    </section>
</article>

I ditt tilfelle kan jeg anbefale deg å benytte et element som heter figure sammen med figcaption.

Disse elementene er beregnet for akkurat det du forklarer:

<figure class="box" id="box_1">
    <figcaption>Her velger jeg å plassere tekstern. Blir det rett?</figcaption>
    <img id="bilde_1" src="bilde1.jpg" alt="kort bildebeskrivelse" >
</figure>

Anbefaler også at du benytter alt-attributten da denne gir de som benytter screen-readers, eller andre hjelpemidler, en respons samt at du forteller søkemoterer hva bildet er noe. Også hvis bildet av en eller annen grunn skulle feile, så vil brukere kunne få forklart hva som skulle vert der.

 

Du kan så style figcaption slik som Dan-Levi beskriver:

figcaption { text-align:center; }

Dette vil sentrere teksten i forhold til bredden på figure - som du kan sette til å ha samme bredde som bildet. figcaption kan du også plassere etter img-tagen hvilket vil resultere at bildeteksten kommer under bildet.

 

Jeg skjønner ikke helt hvorfor du setter alt til {css.position:absolute;} i utgangspunktet.

Endret 25. september 2013 av Yawa