mboost-dp1

Hjælp til css


Gå til bund
Gravatar #1 - star
7. jul. 2005 15:03
Hejsa Alle..

Hvis jeg nu vil lave en webside med et billede på f.eks. 800x600 som er centreret og øverst. og oven på dette lave min tekst og billeder, hvordan får jeg så defineret et felt på størrelse med billedet, hvori jeg kan sætte tekst der også er defineret med css ? forstår i ?

http://starchild.dk/test.htm

Ligesom dette, jeg kan jo ikke definere teksten i procent ud fra siden, så er den jo fucked, hvis man justere browseren, og hvis jeg gør det fast ud fra hele siden så sker det samme, det skal jo se ud fra den ramme man skal lave omkring billedet.. tror det bliver noget snask hvis jeg skal lave det i frames :o/

Er der en kodehaj der kan løsne lidt guldkorn ?

Mvh
Morten
Gravatar #2 - hundeboll
7. jul. 2005 16:59
Jeg har lavet en lille side, som jeg synes ligner dit forslag en del. Koden er ret simpel:
<?xml version="1.0" encoding="iso-8859-1">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<body style="text-align: center;">
<div style="width: 800px; height: 600px; margin: auto; background: url('http://starchild.dk/tester.jpg') no-repeat center; text-align: left;">
<div style="background: white; position: absolute; top: 100px; left: 200px; width: 50px; height: 50px;">
boks1
</div>
<div style="background: white; position: absolute; top: 400px; left: 600px; width: 50px; height: 50px;">
boks2
</div>
</div>
</body>
</html>

Men du kan jo også se den på selve siden. Ligger den bare her, i tilfælde af, at min side skulle blive utilgængelig.
Gravatar #3 - hundeboll
7. jul. 2005 17:13
edit til #2
Jeg har ændret lidt i koden, da man ikke skal bruge absolute, men relative, som positionering. Den nye kode:
<?xml version="1.0" encoding="iso-8859-1">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<body style="text-align: center;">
<div style="width: 800px; height: 600px; margin: 0 auto; background: url('http://starchild.dk/tester.jpg') no-repeat center; text-align: left;">
<div style="background: white; position: relative; top: 160px; left: 30px; width: 180px;">
tekst her og her og her,....
</div>
<img src="http://newz.dk/templates/newz-hmn/gfx/head-logo.gif" style="background: white; position: relative; top: 215px; left: 425px; width: 200px; height: 20px;" />
</div>
</body>
</html>

Adressen er stadig den samme...
Gravatar #4 - star
7. jul. 2005 19:38
Kanon, mange tak, det var jo lige det jeg søgte :o)

Så kan jeg komme lidt videre, det var lige det med at gennemskue, hvordan man positionerede inden for hovedrammen, som jo bevæger sig på siden, jeg ikke helt kunne gennemskue ;o)

Mvh
Morten
Gå til top

Opret dig som bruger i dag

Det er gratis, og du binder dig ikke til noget.

Når du er oprettet som bruger, får du adgang til en lang række af sidens andre muligheder, såsom at udforme siden efter eget ønske og deltage i diskussionerne.

Opret Bruger Login