Porteføljeside; design, strekking av bilder, mm

Degeim · 25. juli 2006

Hei!

Jeg har følgende nettside:

http://www.erlenddahl.moo.no

1. Som dere ser er det et veldig enkelt design, og jeg er ute etter enkle tips. Hvordan kan jeg få side til å se finere ut, men samtidig være enkel, og ikke full av duppeditter.

2. Er det mulig (siden er laget i PHP, men jeg fant ingen måte å gjøre dette på i PHP, så jeg tenkte det kanskje går i CSS) å få strukket bildene til å passe til høyden på cellen de er inne i (bla nedover, så ser du at noen bilder ikke er høye nok, og etterlater en stgg hvit flekk mellom seg og bildet under).

3. Er det mulig å lage et treeview-opplegg, altså slikt med + og - fremfor tekst, ved trykk på minus blir teksten skjult, og når en trykker på pluss så viser den? Til skjuling av lengre tekster, tenker jeg.

Tusen takk for all hjelp jeg kan få!

Degeim

hpfarstad · 27. juli 2006

1. Som dere ser er det et veldig enkelt design, og jeg er ute etter enkle tips. Hvordan kan jeg få side til å se finere ut, men samtidig være enkel, og ikke full av duppeditter.

Mange måter å gjøre dette på, og det blir vel mye smak og behag tenker jeg. Vanskelig å vite hvor din grense går for at det er "fullt av dupeditter". Kan si noen eksempler på hva jeg ville gjort, ikke nødvendigvis alt på en gang, men noen alternativer...

Legg litt padding på cellen med tekst i

Lag også litt luft mellom hver rad

Prøv en annen style på border, f.eks. 1px bred med en koksgrå farge

Legg eventuelt til en dus farge på tekstinnhold eller deler av tekstinnhold

Bruk en annen font

Lag stilren struktur som er likt for alt.

Kan også gå mer drastisk til verks å lage litt bedre struktur om hver rad hvor du tar med mer informasjon, f.eks. slik:

http://www.tucows.com/preview/504330

2. Er det mulig (siden er laget i PHP, men jeg fant ingen måte å gjøre dette på i PHP, så jeg tenkte det kanskje går i CSS) å få strukket bildene til å passe til høyden på cellen de er inne i (bla nedover, så ser du at noen bilder ikke er høye nok, og etterlater en stgg hvit flekk mellom seg og bildet under).

Anbefaler heller layout som på linken over.

3. Er det mulig å lage et treeview-opplegg, altså slikt med + og - fremfor tekst, ved trykk på minus blir teksten skjult, og når en trykker på pluss så viser den? Til skjuling av lengre tekster, tenker jeg.

Ja, dette kan du f.eks. gjøre i CSS. Sett en fast bredde og høyde på tekstinnholdet og sett overflow:hidden; Lag så en link som på onClick setter overflow: visible og height: 100%

Ikke helt sikker på om dette er helt riktig måte å gjøre på, men første tanken jeg fikk når jeg tenkte på problemstillingen ihvertfall... så får heller noen andre arrestere meg på det!

Degeim · 27. juli 2006

Tusen takk for flott svar!

Jeg skal studere Tucows sitt opplegg, som jeg syntes så veldig fint ut. Det ble hverken for avansert eller for lettvint, så det er nok et fin alternativ.

Med hensyn til å strekke bildet, så dropper jeg da det, men jeg er likevel nysgjerrig på om det kan gjøres, så hvis noen vet det; si fra.

Kan jeg få et eksempel på hvordan den linken skal se ut, siden jeg ikke er helt inne i annet en veldig elementær css?

Takk,

Degeim

hpfarstad · 27. juli 2006

Kanskje noe slikt?

CSS:

.boxhidden {
border: solid 1px #aaa;
width: 300px;
height: 300px;
overflow: hidden
}

.boxfull {
border: solid 1px #aaa;
overflow: auto
}

Javascript i <head> taggen i htmlsiden:

<script type="text/javascript"><!--
function toggleOverflow(obj) {
obj.className = (obj.className != "boxfull") ? "boxfull" : "boxhidden";

Element:

<div id="minTekstBox" class="boxhidden">
tekst her....
...
</div>

Link:

<p  onClick="toggleOverflow(minTekstBox);">Vis hele teksten</p>

Degeim · 27. juli 2006

Hm... Jeg lurer på om javascript-eksempelet ditt mangler noe på slutten? En avsluttende "}" og "-->" kanskje?

Noe mer må det også være, siden følgende får "feil på siden" ved trykk på "Trykk her for å vise...".

Skjult tekst: (Marker innholdet i feltet for å se teksten):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

http-equiv="content-type">

function toggleOverflow(obj) {

obj.className = (obj.className != "boxfull") ? "boxfull" : "boxhidden";

}

-->

</head>

<body>

Dette er teksten.

Dette er teksten.1

Dette er teksten.2

Dette er teksten.3

Dette er teksten.4

Dette er teksten.5

Dette er teksten.65

Dette er teksten.7

Dette er teksten.8

Dette er teksten.89

Dette er teksten.0

Dette er teksten.8

Dette er teksten.67

Dette er teksten.5

Dette er teksten.4

Dette er teksten.3

Dette er teksten.2

Dette er teksten.1

Dette er teksten.2

Dette er teksten.3

Dette er teksten.4

Dette er teksten.

Dette er teksten.1

Dette er teksten.2

Dette er teksten.3

Dette er teksten.4

Dette er teksten.5

Dette er teksten.65

Dette er teksten.7

Dette er teksten.8

Dette er teksten.89

Dette er teksten.0

Dette er teksten.8

Dette er teksten.67

Dette er teksten.5

Dette er teksten.4

Dette er teksten.3

Dette er teksten.2

Dette er teksten.1

Dette er teksten.2

Dette er teksten.3

Dette er teksten.4

</div>

<p onclick="toggleOverflow(minTekstBox);">Vis hele teksten</p>

<br>

</body>

</html>

Endret 27. juli 2006 av Degeim

hpfarstad · 28. juli 2006

Ja det har du rett i, gikk litt fort med copy-paste her..

Prøv med

}

//-->

</script>

Logg inn

Porteføljeside; design, strekking av bilder, mm

Anbefalte innlegg

Degeim

Lenke til kommentar

Videoannonse

hpfarstad

Lenke til kommentar

Degeim

Lenke til kommentar

hpfarstad

Lenke til kommentar

Degeim

Lenke til kommentar

hpfarstad

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer