css for å anngi grafikkstorleik

[hemo]

Kan eg laga ein css-kode som spesifiserer

border="0"
hight=88
width=88

, for så å bruka denne rundt ein gjeng med bilete?

Eg veit at dette er ein ugunstig måte å optimalisera grafikk på, men akkurat der eg skal bruka dette, spelar det inga rolle. Bilda er frå 50 til 400 px og skal bare visast med 88 x 88 px (utan "Keep aspect ratio").

 

Bilda står som <img src="fil1"><img src="fil2"><img src="fil3">

Kan hende eg må ha ein <div-eit eller anna, rundt dette for å refferera til css-koden?

 

Tips?

[Haraldson]

Bare å prøve det, er det ikke?

 

Uansett er det ikke verre enn å gi bildene klasser, og definere denne i CSS. Eventuelt kan du legge alle bildene i en div og spesifisere de deretter (#div img: osv).

[absent]

så vidt jeg forstår, så skal du ha bilder med en størrelse på 88x88, uten border? da tror jeg denne koden skal funke:

 

CSS:

.bilde {
height: 88px;
width: 88px;
}

 

HTML:

 <img class="bilde" src="fil1">
<img class="bilde" src="fil2">
<img class="bilde" src="fil3">

 

Siden border vanligvis er satt til 0 som default, så er det ikke nødvendig å angi det. du kan eventuelt gjøre som Mr.Berg sier, å sette bildene inn i en div, og deretter definere høyden å bredden i en #div img { }.

 

Lykke til

[hemo]

Nix. Virka verken.. (men takk for raskt svar og oppmuntring til eksperimentering)

css

.krymp	{ border="0"; hight=88; width=88; }

html

<div class="krymp">
<img src="fil.jpg">
</div>

Men eg skal eksperimentera litt vidare...

 

Når alle desse bilda kjem side om side, og eg ser at; "Hmm... eg vil ha bildetekst under". Nyttar eg då tabell for å laga ei "matrise" som bilda står i, eller gjer eg noko div-greier der også?

 

PS! Bildeteksten må bryta om han vert lenger/breiare enn den 88 pixlane som fil.jpg er...

[FuLu]

<div class="bildegruppe">
<img src="svada" alt="hei på deg">
<img src="svada" alt="hei på deg">
<img src="svada" alt="hei på deg">
</div>

 

CSS:

div.bildegruppe img {
border: 0;
width: 88px;
height: 88px;
}

[hemo]

No først la eg merke til absent sitt innlegg (tok ikkje refresh før eg posta)

 

Det med <img class="bilde" src="fil1"> fungerer, men krever litt plunder..

Det med #div img { } forstod eg ikkje heilt, men skal eksperimentera litt...

[hemo]

FuLu: Det der virka heilt perfekt!

Bedre kunne det vel ikkje bli :-D

[Arve Systad]

Trallalala *vissvass*

 

Sorry for vranglære

Endret 26. oktober 2004 av arve87

[FuLu]

Når alle desse bilda kjem side om side, og eg ser at; "Hmm... eg vil ha bildetekst under". Nyttar eg då tabell for å laga ei "matrise" som bilda står i, eller gjer eg noko div-greier der også?

 

PS! Bildeteksten må bryta om han vert lenger/breiare enn den 88 pixlane som fil.jpg er...

Du kan bruke DIV der og. F.eks pakker du hvert bilde i en DIV:

<div class="bildegruppe">
<div><img src="svada" alt="hei på deg"><p>tekst som skal under bilde</p></div>
<div><img src="svada" alt="hei på deg"><p>tekst som skal under bilde</p></div>
</div>

 

CSS:

div.bildegruppe div {
width: 88px;
overflow: hidden; /* trengs ikke */
float: left;
}
div.bildegruppe div img {
border: 0;
width: 88px;
height: 88px;
float: left;
}
div.bildegruppe div p {
clear: both;
}

 

Utestet kode, bare noe som ramlet ut av hodet

 

Eventuelt og putte inn float: left; i div.bildegruppe div så du får bildene plassert siden av hverandre.

 

Grunnen til den overflow: hidden; er at den skal skjule tekst hvis den skulle komme utenfor de 88px. Å få tekst til å bryte seg "somersåutroliglangatdenikkebrytes", blir da skjult deler av når den kommer utenfor limit.

Endret 26. oktober 2004 av FuLu

[hemo]

No blei det bare rot til slutt... Eg datt ut av fokus, tror eg...

Den siste måten der, går uansett under kvarandre (ikkje ved sida av)

 

Ja-ja...

[FuLu]

Opplegget for min del tok litt av her men var bare et forsøk:

<div class="bildegruppe">
<div class="outer">
	<div>
		<img src="" alt="hei på deg">
		<p>
			<span>tekst som skal under bilde</span>
		</p>
	</div>
</div>
<div class="outer">
	<div>
		<img src="" alt="hei på deg">
		<p>
			<span>tekstsomerlaaaaangogjævlig</span>
		</p>
	</div>
</div>
<div class="outer">
	<div>
		<img src="" alt="hei på deg">
		<p>
			<span>tekstsomerlaaaaangogjævlig</span>
		</p>
	</div>
</div>
<div class="outer">
	<div>
		<img src="" alt="hei på deg">
		<p>
			<span>tekstsomerlaaaaangogjævlig</span>
		</p>
	</div>
</div>
<div class="outer">
	<div>
		<img src="" alt="hei på deg">
		<p>
			<span>tekst som skal under bilde med mye tekst, masse mere og mye mere enn du aner tekst</span>
		</p>
	</div>
</div>
</div>

 

CSS:

div.bildegruppe div.outer {
float: left;
width: 102px;
overflow: hidden;
}

div.bildegruppe div.outer div {
border: 2px solid #666;
border-width: 0 2px 2px 0;
padding: 5px;
}

div.bildegruppe img {
width: 88px;
height: 88px;
float: left;
border: 1px solid red;
}

div.bildegruppe div p {
clear: both;
font-size: 0.7em;
text-align: center;
margin: 0;
height: 5em;
overflow: auto;
width: 88px;
}

div.bildegruppe p span {
display: block;
padding: 3px;
}

[Magpal]

Dette er vel eldgammel html, men fungerer ikke <img src="bilde.jpg" width="300" height="300"> også ganske greit?

[FuLu]

Dette er vel eldgammel html, men fungerer ikke <img src="bilde.jpg" width="300" height="300"> også ganske greit?

Fungerer greit det og. Men han ville og ha tekst under hvert bilde.

[hemo]

Ja, nei..

Kluet var å setta inn fleire bilder med enkle

<img src="bilde1.jpg"><img src="bilde2.jpg"><img src="bilde3.jpg">

Så slå ei sløyfe rundt desse å sei at alle skal ha same storleik.

 

Det med tekst under var noko eg kom på etterpå, fordi ting fungerte godt ein periode.. No gav eg opp, men skal prøva litt meir etterpå...

 

OT: Tanken bak css er vel delvis å kunne låsa masse formatering i ei separat fil, for så å bruka heilt vanleg html-kode, eller? F.eks. Body, b, p, li, osb... så kvifor ikkje hight til eit img-element, liksom?

[halvardm]

*Misforstod spørsmålet*

 

EDIT: Jeg tok feil ja..

Endret 26. oktober 2004 av Skomaker

[FuLu]

Altså om bildet er 1024x768 stort og du setter den til å være 88x88 stor i CSS eller direkte i IMG, gjør ikke bilde til 88x88 stort sånn sett, du "krymper" den til å bli 88x88 f.eks, men nettleseren må fortsatt laste ned hele 1024x768 bildet. Så hvis det er snakk om store bilder, så er det mer lønnsomt å krympe dem til "thumbnail" versjon istedet.