/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
billede og tekst struktur
Fra : Tabita Enig


Dato : 13-12-02 13:45

Jeg skal have lavet nogle "person-kort" som skal ligge efter hinanden på en
hjemmeside. Der skal være 2 forskellige slags, så de ligger skiftevis.

Et venstre-person-kort skal indeholde et billede, der floates til venstre.
Ved siden af billedet skal der være 2 tekster (der står under hinanden). Den
ene tekst består af 2 linier (navn og email-adresse) og den anden tekst er
en beskrivelse af personen. De 2 tekster kunne måske være 2 afsnit - men de
skal i hvert fald separeres.

Et højre-person-kort skal indeholde de samme 3 elementer som ovenstående,
men billedet floater til højre og tekst1, (navn og email-adresse) floater
ligeledes til højre, men teksten skal venstre-justeres. Tekst2 skal bare
være venstre-justeret.

Jeg har forsøgt at strukturere kortene med div, men er ikke helt sikker på
at det er smartest - eller om jeg får det gjort for omstændigt. Mit problem
er endvidere at nogle af kortene alligevel ikke floater rigtigt - og er ikke
klar over hvorfor. Er der nogen, der kan sige hvorfor eller har et forslag
til en anden måde at gøre det på?

Desværre er hjemmesiden ikke lagt ud, men her er koden:

(et venstre-person-kort)
<div class="person">
<div class="lbillede">
<img src="Billeder/kmjoker.gif" alt="Navn">
</div>
<div class="lbilledtekst">
<p class="lnavn">
<b>navn</b><br>
<a email-adresse</a>
</p>
<p class="lbeskrivelse">Beskrivelse af personen
</p>
</div>
</div>

-og i .css filen:

div.person {
width:100%;
margin-top:10px;
margin-bottom:10px;

}

div.rbillede {
float:right;
margin-left: 5px;
border:3px solid rgb(51,153,0);
width: 150px;
height:150px;
}
div.lbillede {
float:left;
margin-right: 5px;
border:3px solid rgb(51,153,0);
width: 150px;
height:150px;

}
div.rbilledtekst{
float:left;

}
div.lbilledtekst{
float:right;

}
..rnavn{
float:right;
}
..lnavn{
float:left;
}
..rbeskrivelse{
clear:right;
}
..lbeskrivelse{
clear:left;
}

Tabita



 
 
Lasse Reichstein Nie~ (13-12-2002)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 13-12-02 20:29

"Tabita Enig" <tabitae@stofanet.dk> writes:

Et par uddybende spørgsmål:

> Et venstre-person-kort skal indeholde et billede, der floates til venstre.
> Ved siden af billedet skal der være 2 tekster (der står under hinanden). Den
> ene tekst består af 2 linier (navn og email-adresse) og den anden tekst er
> en beskrivelse af personen. De 2 tekster kunne måske være 2 afsnit - men de
> skal i hvert fald separeres.

Ok, elementerne er:

Et kort, fuld skærmbredde, der indeholder følgende:
et billede (150pxx150px)
To linjer, navn og email, som skal være venstrejusteret i forhold til
hinanden:
Karsken Bælg Johansen
kb@email.com
En beskrivelsestekst, som blot skal være almindelige venstrejusteret tekst.

> Et højre-person-kort skal indeholde de samme 3 elementer som ovenstående,
> men billedet floater til højre og tekst1, (navn og email-adresse) floater
> ligeledes til højre, men teksten skal venstre-justeres. Tekst2 skal bare
> være venstre-justeret.

Venstrekort:

+------------------------------------------------------------------+
|+-----------+ Karsken Bælg Johansen |
|| | kb@email.com |
|| | |
|| | Karsken er en glad dreng der desværre ikke er så |
|| | meget at sige om. Hvis der var mere, ville dette |
|| | fylde nok til at komme ned under billedet, så vi |
|+-----------+ kan se at der wrappes om et flydende element. |
| Derfor skrier vi noget mere så teksten bliver længere. |
| |
| |
| |
+------------------------------------------------------------------+
Højrekort:
+------------------------------------------------------------------+
| Karsken Bælg Johansen +-----------+ |
| kb@email.com | | |
| | | |
| Karsken er en glad dreng der desværre ikke er så | | |
| meget at sige om. Hvis der var mere, ville dette | | |
| fylde nok til at komme ned under billedet, så vi | | |
| kan se at der wrappes om et flydende element. +-----------+ |
| Derfor skrier vi noget mere så teksten bliver længere. |
| |
| |
| |
+------------------------------------------------------------------+

Har jeg forstået det rigtigt? (der er ikke kant omkring kortet, men
det kunne måske være en idé :)

> Jeg har forsøgt at strukturere kortene med div, men er ikke helt sikker på
> at det er smartest - eller om jeg får det gjort for omstændigt. Mit problem
> er endvidere at nogle af kortene alligevel ikke floater rigtigt - og er ikke
> klar over hvorfor. Er der nogen, der kan sige hvorfor eller har et forslag
> til en anden måde at gøre det på?

Du floater alle tre elementer. Et floatet element tages ud af det
almindelige flow, så lige pludselig har din div.person ikke noget
indhold. Det bør være nok til at forvirre. Jeg ville nøjes med at
floate billedet.

Hvis du kunne leve med at e-mailen og navnet var højre-justerede, så
ville det være meget nemmere. Se fx
<URL:http://www.infimum.dk/privat/vcard.html>.

Jeg bruger CSS-regler på formen

..person.lcard img {float:left;}

til at sørge for at den eneste forskel på et venstre- og et højre-kort
er i class-egenskaben for den yderste div. Det gør det nemmere at
lave en type kort om til den anden type.

Hvis e-mail-adressen skal være venstrejusteret i forhold til navnet,
så skal man være mere tricky. Jeg kan ikke lige finde en pæn måde at
gøre det på, uden at putte navn og e-mail ind i en div med fast
bredde (og om det er pænt afhænger af navnets længde).


/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
'Faith without judgement merely degrades the spirit divine.'

Tabita Enig (13-12-2002)
Kommentar
Fra : Tabita Enig


Dato : 13-12-02 21:29

Du havde fået helt styr på min lidt indviklede forklaring

> Du floater alle tre elementer. Et floatet element tages ud af det
> almindelige flow, så lige pludselig har din div.person ikke noget
> indhold. Det bør være nok til at forvirre. Jeg ville nøjes med at
> floate billedet.

Jeg havde egentlig pakket de 3 elementer ind i håb om at det blev enklere på
den måde. Desuden har jeg fundet ud af at grunden til at mine kort ikke
altid så pæne ud - dvs ved venstre-kort var der forskellige marginer mellem
billede og tekst - var at tekstens længde varierede og at der åbenbart
fyldes ud fra højrekanten, når der floates til venstre?? Sagt på en anden
måde. Hvis jeg kun havde skrevet 5 ord, som ikke udfylder en hel linie i en
paragraph, så blev mellemrummet mellem billede og tekst måske 5 cm, mens der
i andre tilfælde kun var 5 mm. Så løsningen er hverken at bruge div'er til
struktureringen og heller ikke at floate teksten?

> Hvis du kunne leve med at e-mailen og navnet var højre-justerede, så
> ville det være meget nemmere. Se fx
> <URL:http://www.infimum.dk/privat/vcard.html>.

Jeg kan selvfølgelig sagtens leve med det - men når man har sat sig noget i
hovedet, så er der kamp til stregen om at finde en passende løsning. Dit
forslag kunne være en løsning - men ikke endnu :)

>
> Jeg bruger CSS-regler på formen
>
> .person.lcard img {float:left;}

Ja, det gør det hele jo meget mere simpelt, det kan jeg godt se....

Der må da være et eller andet??

Tabita

-Tak for budet :)




Søg
Reklame
Statistik
Spørgsmål : 177557
Tips : 31968
Nyheder : 719565
Indlæg : 6408868
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste