Ett par enkle spørsmål i forbindelse med første web-side.

[Gjest Slettet+oiasdf79]

Heisann

 

Jeg har nå satt i gang å lage min første web-side, eller det er i hvertfall den første jeg skriver selv. Og i den forbindelse har jeg ett par enkle spørsmål.

 

Først og fremst, hvordan kan man plassere tekst oppå et bilde? Jada jeg vet at mange tenker at nå har jeg tenkt å lage en glorete web-side, med masse tekst oppå bilder som er vanskelig å lese, men neida, jeg skal bare lage et parti på siden som skiller seg ut fra bakgrunnen hvor man kan plassere teksten på siden.

 

Også over til litt css. Hvordan kan man ha forskjellig plassering av tekst på flere steder på siden? Altså i css'en min så har jeg midstilt teksten:

body {
background-color: #000000;
color: #C0C0C0;
text-align:center;margin:0;
}

Men da blir all teksten på hele siden midstilt uavhengig av hva align i html-filene sier, hvordan kan jeg dele opp slik at man kan ha både midstilt og venstre-stilt tekst?

 

Freebird..

[Øsse]

Det enkleste måten å få skrift på tekst vil være legge bildet som bakgrunnsbildet i e div-tag også skrive noe.

HTML:

<div class="medbakgrunn">Dette vil stå oppå bildet spesifisert i CSS-filen.</div>

 

CSS:

div.medbakgrunn {
 background-image:url('bakgrunn.png');
}

 

Det er ikke lurt å align'e tekst i html-filen. Bruk CSS til det. Tar forbehold om at du kanskje vet det som kommer fra før:

 

<div> og <span> er html-tags som i utgangspunktet ikke har noen egenskaper og er usynlige. Den viktigste forskjellen er at <div> har som standard linjeskift før og etter, mens <span> har det ikke. Studer måten jeg ga en spesifikk div-tag egenskaper med CSS og bruk dette videre på div- og span-tager som du vil. Med CSS kan du gjøre utrolig mye. Til slutt en enkel huskeregel: Hvis du skal prøve å oppnå noe som i hovedsak har med utseende til siden og ikke innholdet, prøv å oppnå dette med CSS. Du vil ikke angre.

Endret 22. juni 2009 av øsse87

[Gjest Slettet+oiasdf79]

Takk for svar.. Dette var veldig behjelpelig..

Endret 22. juni 2009 av Slettet+oiasdf79

[Gjest Slettet+oiasdf79]

Men når jeg nå prøver, så ser jeg jo det at jeg ikke får frem bildet, bare teksten. I CSS der skal jeg bare føre inn url'en til bilder innenfor '' ikke sannt. Slik at i mitt tilfeller vil det bli slik:

 

div.medbakgrunn {
 backinggruppe-image:url('images/mid_shape.jpg');
}

[Øsse]

Herrejesusgud. Jeg har skrevet totalt feil. Det skal jo være background-image, ikke backinggruppe-image!! Sorry

[Gjest Slettet+oiasdf79]

Da virket det.. Men da kommer jeg jeg jo selvfølgelig med enda et spørsmål. Kan jeg sette størrelsen på bildet til en fast størrelse? Slik som det er nå så dekker bildet hele siden horisontalt og bare der det er tekst vertikalt.

[Øsse]

Hei igjen,

 

Det høres ut som du har gjort det slik jeg sa og da bruker du vel en div. En div funger som en boks (siden den har linjeskift før og etter) og den vil alltid være så bred som den kan være, og så høy som den må være. Er du interessert i å forandre på dette kan du hive f.eks. "width: 800px; height: 600px;" inn mellom krøllparentesene sammen med bakgrunnsbildet. Man kan også bruke "min-width" og "max-width", ditto for height, som gjør det man forventer.

 

Du spør om man kan ha bakgrunnsbildet i en fast størrelse. Bildet er alltid i den størrelsen det skal være (1px på bildet gir 1px på siden) men det kan derimot repeteres.

 

Hvis derimot du f.eks. bare vil ha bakgrunnsbildet i det ene hjørnet fordi bakgrunnsbildet skal fade inn i bakgrunnsfargen, så er dette også mulig. Her kan du få mer info om hva du kan gjøre med bagrunnsbildene. Hvor det skal være i boksen, og om det skal repeteres i x-retning (horisontalt) og/eller y-retning(tipp ).

 

Et tips: Legg til "border: 1px black solid;" inn sammen med det andre i CSS for div'en. Da får man som man kan gjette seg til en tynn svart kant rundt boksen. Det er da lettere å se hvordan den oppfører seg. Obs: Bredden til kanten kommer i tillegg til bredden du spesifiserer med width. Så en i utgangspunktet 800px bred boks vil bli 802px bred pga. 1px kant på hver side.

Endret 22. juni 2009 av øsse87

[Gjest Slettet+oiasdf79]

Da har jeg fått det til å fungere slik som jeg ville. Tusen hjertlig takk for hjelpen..