Bilder med bekrivelse

VolvoMan
VolvoMans bilde
Avlogget
Ble med: 06.02.2010

Denne siden var utrolg bra... trodde det å skrive  koder selv var veldig vanskelig men jeg har da fått til litt til nå, koden ble jo også mye ryddiger en det FrontPage lager som jeg har brukt før.

Dette er et jeg har laget til nå www.volvoman.net

Men er kommet til et problem som jeg ikke klar å finne ut av.  og det er hvrdan jeg kan få bilden til VENSTRE og beskrivelse av bilden til HØYRE for bildet

Noe som i det jeg brukt Paint til her.

Eiriks hjemmeside

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Sette bilder ved siden av tekst

Hei, og velkommen til gars, hehe. :)

Litt avhengig av hvordan du har gjort det, kan du prøve deg med divisjoner som floater. Noen foretrekker å lage et table, og gjøre det på den måten, men tabeller er jo egentlig til tabelldata, ikke for å plassere innhold rundt på websiden.

Her er et eksempel på hvordan man kan gjøre det, merk at dette bare er et eksempel, du må modifisere ting slik at det passer inn i designet på din webside.

HTML

Vi bruker en wrapper rundt to divisjoner, én for bildet og én for tekst.

<div class="wrapper">
  <div class="image">
    <img src="bilde1.jpg" alt="volvo 240" height="100" width="160" />
  </div>
  <div class="caption">
    <p>Bla bla bla</p>
  </div>
</div>

CSS

Her floater vi både caption og image divisjonene til venstre.

div.image {
  float: left;
  margin-right: 1em;
  height: 100px;
}

div.caption {
  float: left;
  height: 100px;
}

Table

Om du heller velger å bruke table (webdesignere flest er fanatiske på at table KUN skal brukes på tabelldata), så gjør du det enkelt og greit slik:

<table class="bildevisning">
<tr>
  <td><img src="bilde1.jpg" /></td>
  <td>om bilde 1</td>
</tr>
<tr>
  <td><img src="bilde2.jpg" /></td>
  <td>om bilde 2</td>
</tr>
</table>

Deretter styler du selvsagt tabellen med CSS.

VolvoMan
VolvoMans bilde
Avlogget
Ble med: 06.02.2010
Takk, har prøvd nå

takk for svaret skal se hva jeg får til

EDIT: Får ikke dette helt til  :(

Kan du se om det er file i HTML eller CSS coden min

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Kunsten å floate elementer i CSS.

Å floate elementer er en egen kunst, og det trenger øvelse der. Merk at jeg har satt en høyde på elementene som flyter til 100px i CSS.

Høyden jeg definerer på elementene gjøres fordi elementer som flytes, men er av forskjellig høyde vil flyte ugjevnt. Du vil tidsnok møte på problemet. :)

Du vil nok også oppleve hvordan forskjellige nettlesere tolker ting litt forskjellig, hvilket byr på ytterligere bryderi.

Uansett, for å hjelpe deg litt på vei, prøv med disse innstillingene i CSS.

div.wrapper {
  float: left;
}

div.image {
  float: left;
  height: 100px;
  margin-right: 1em;
  clear: left;
}

div.caption {
  float:left;
  height:100px;
}

Merk at mye tekst i avsnittet/paragrafen i caption vil kunne presse bildene nedover. Det er fordi bredden av elementer som flytes reduseres til minimum. Ved mer tekst vil elementet mao. bli bredere.

Dette kan du takle ved å spesifisere bredden på caption ved hjelp av CSS.

div.caption {
  width: [antall]px
}

Det finnes andre måter å løse dette på også, f.eks. ved å kun flyte bildet og la teksten wrappe rundt bildet. Uansett prøv og feil, og spør gjerne om mer hjelp når du står fast igjen. :)

VolvoMan
VolvoMans bilde
Avlogget
Ble med: 06.02.2010
Fikk det ikke til med left

Fikk det ikke til med left plasering, men med center ble det OK,  men juster litt på bilde størrelsen etc. , men det orker jeg ikke i kveld for nå er det natt. 

VolvoMan
VolvoMans bilde
Avlogget
Ble med: 06.02.2010
trenge litt mer hjelp

på denne  siden www.volvoman.net/ps_mod.htm  treng er jeg litt mer hjelp....   den deler CSS koden for en anne side for øyeblikket, skal få egene css koder snart.

Problemet er at jeg vil ha større biler de er nå 180x240, men skulle gjern hatt de dobbelt så store og det er her problemt kommer inn.  Når jeg skiver at de skal være 360x480 så flyter de sammen på en og blir liggende oppå hverandre hvor gjør jeg feil. 

Har prøvd å rote litt css koden, men det blir feil uansett hva jeg gjør

 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Valider HTML

Det er helt normalt å bruke ett stylesheet over flere websider, det er jo igrunn hele vitsen. Man endrer CSSen ett sted, så skjer endringene på hele nettstedet.

Hvis du ser på HTML-koden din, så vil du se at du har flere elementer du glemmer å lukke. For deg som lærer er det veldig nyttig å bruke validatoren for å validere HTML først. Det er fordi det er enklere å finne hva som er feil, når man er sikker på at HTML er korrekt. Legg derfor inn dokumenttype og valider dokumentet, rett opp eventuelle feil og så kan du heller ta det derfra. Validering og å sette dokumenttype lærer du i HTML kurset her på Hjemmeside.

Hvis du bruker Firefox så kan du også ha nytte av disse verktøyene for webutviklere. Følger du de rådene skal jeg hjelpe deg med problemet du har nå.

Svar på forumemnet

(If you're a human, don't change the following field)
Your first name.
Innholdet i dette feltet blir holdt privat og vil ikke bli vist offentlig.