Notifikationer

Markér alle som læst Log ud

bas Forsker

16. januar 2005 - 12:40 Der er 18 kommentarer og
1 løsning

Tilpasset højde?

Hej

Jeg er ved at rode med noget css.
Jeg har en kasse, som skal fungere som
baggrund til en brødtekst.
Jeg vil gerne lave det sådan at
kassens højde tilpasser sig brødtekstens højde,
eller i hvert fald er højere end brødteksten.

Problemet er nu, at når man scroller, så stopper
den hvide kasse, men brødteksten fortsætter
nedenunder kassen.

css'en til kassen ser sådan ud:

#block
{
position:absolute;
left:330px;
top:0px;
width:430px;
height:100%; (det er den her der er mit spørgsmål)
background-color:#FFFFFF;
}

Jeg har prøvet at sætte height til 1000%,
men så bliver kassen selvfølgelig meget lang.
Er der ikke en "officiel korrekt" måde at løse probemet på?
Kan man sætte noget med "uendeligt" eller height:100% og margin: 0px?

Jeg vil til at lære at opbygge i css, så jeg vil gerne høre,
om der er nogle smartere og mere rigtige måder at gøre tingene på.

Her er siden:
http://www.detour.dk/css_layout/css_test.html

Her er css'en:
http://www.detour.dk/css_layout/test.css

På forhånd tak.

Venlig hilsen
Martin

Synes godt om

morteeart Nybegynder

16. januar 2005 - 12:43 #1

Du skal bruge et block elemet istedet for et inline.

dvs. <span class="brødtext"> skal laves om til <div class="brødtext">

eller du skal tilføje display: block; til din css :)

Synes godt om

bas Forsker

16. januar 2005 - 12:54 #2

Hmm, nu står der sådan:

.brodtekst
{
position:absolute;
margin-top:230px;
margin-left:365px;
font-family: tahoma, verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#333333;
}

og <div class="brodtekst">

Men det hjælper ikke umiddelbart.

Hvor skal display: block skrives?

Synes godt om

neocron Nybegynder

16. januar 2005 - 13:38 #3

Jeg tror at det, du søger, kan klares med en overflow.
Se følgende eksempel:

http://www.w3schools.com/css/tryit.asp?filename=trycss_overflow

Prøv at give overflow en af følgende værdier: visible, hidden, scroll og auto.
Visible er den, jeg tror du leder efter.

Synes godt om

bas Forsker

16. januar 2005 - 14:03 #4

>neocron

Det kunne være en mulighed, men jeg vil
ikke have scroll på den hvide baggrund.
Jeg vil kunne have den almindelige scroll,
der er i højre side af browservinduet.

>Til alle

Er der kun den mulighed at angive et stort antal
procent for højden - f.eks. height:1000% ?

Er der ikke en mulighed for f.eks. at lægge teksten
ind i baggrunden - ligesom man lægger indhold i en tabelcelle?

- Martin

Synes godt om

Slettet bruger

16. januar 2005 - 14:34 #5

height:100%;
ændres til height:auto;

Synes godt om

bas Forsker

16. januar 2005 - 15:14 #6

> ibtage

Når jeg i stedet skriver height:auto;
bliver kassen ikke mere end ca. 20px
i højden fra toppen.

Det er ellers et godt bud, hvis funktionen
er, at højden automatisk følger med.

> Til alle

Kan der være nogle elementer der skal byttes om på
eller er der noget der skal være relativt?
Skal jeg bruge noget med layers eller hvordan
Søren løser jeg problemet?

- Martin

Synes godt om

morteeart Nybegynder

16. januar 2005 - 17:27 #7

Det var da en masser underlige løsninger.

Bare lav din span om til en div ?-)

Firefox og IE fortolker forresten min-height forskelligt.
så du skal tilføje:

display: table; i din css (.brødtext), ikke block, mig som vrøvlede :D

Synes godt om

olebole Juniormester

16. januar 2005 - 17:28 #8

<ole>

Vil du bruge CSS, er du nødt til at bruge en fuldt kvalificeret DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Hvis et element skal have sat en relativ højde, kræves det, at det omkransende elements højde explicit er sat. Har du således et element i din body, der skal være 100% højt, skal dit body-element også have sin højde sat. Sættes dette også til en relativ højde, må du også sætte dit documentElement-element (html-element)

html, body {
height: 100%;
}

/mvh
</bole>

Synes godt om

morteeart Nybegynder

16. januar 2005 - 17:39 #9

ja, men display: table kan løse problemet med min-height og IE :)

Synes godt om

bas Forsker

16. januar 2005 - 18:43 #10

Jeg er blevet lidt forvirret af de forskellige svar.
Jeg poster lige css'en, kan I så igen fortælle, hvordan
det skal rettes til? så retter jeg html'en bagefter.

body
{
margin-bottom:0px;
height: 100%;
}

.billede1
{
position:absolute;
margin-top:40px;
margin-left:210px;
}

.billede2
{
position:absolute;
margin-top:40px;
margin-left:390px;
}

.billede3
{
position:absolute;
margin-top:40px;
margin-left:570px;
}

.links
{
position:absolute;
margin-top:190px;
margin-left:250px;
text-align:right;
}

A.toplink:link, A.toplink:active, A.toplink:visited
{
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
color:#666666;
}

A.toplink:hover
{
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-decoration: none;
color:#666666;
}

h1
{
position:absolute;
margin-top:185px;
margin-left:360px;
font-family:tahoma, verdana, Arial, Helvetica, sans-serif;
font-size:18px;
color:#FF6633;
}

#block
{
position:absolute;
left:330px;
top:0px;
width:430px;
height:100%;
background-color:#FFFFFF;
border-left: solid 1px; color:#666666;
border-right:solid 1px; color:#666666;
}

.brodtekst
{
position:absolute;
margin-top:230px;
margin-left:365px;
font-family: tahoma, verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#333333;
display:block;
}

- Martin

Synes godt om

bas Forsker

17. januar 2005 - 20:57 #11

Jeg har nu fået løst problemet vha. en
fra activedeveloper.dk

Hans løsning:
http://www.hintzmann.dk/testcenter/sites/www.detour.dk/

- Martin

Synes godt om

olebole Juniormester

17. januar 2005 - 21:43 #12

Bortset fra, det er en dårlig idé at bruge XHTML, kan du se, han bruger den fulde DTD (med URL) og sætter højden på html- og body-elemnterne til 100%.
Det er som sagt forudsætningen for en ordentlig løsning :)

Synes godt om

bas Forsker

17. januar 2005 - 21:54 #13

>olebole

Er der noget der bør ændres i løsningen?
Jeg vil gerne vide det, hvis der er :-)

- Martin

Synes godt om

olebole Juniormester

17. januar 2005 - 22:39 #14

Hehe, bas ... du ved zq da godt, jeg havde hudflettet dig forlængst, hvis jeg havde noget at brokke mig over ;D

Nej, jeg har ikke synderligt at sige koden på. Derudover synes jeg siden er ganske lækkerlig - og en klar ros for lige at tage det 'krasbørstige' af ved at dæmpe tekst-/baggrunds-kontraster. En ofte overset detalje ;o)
En enkelt design detalje, jeg dog gerne så rettet er, hvis du forholdt dig lidt mere stringent til over- eller underkant på 'profil' og 'Velkommen'. Jaja ... der er tale om en pixel eller to, jeg prøver at stoppe op i r.... på en flue. Det er dog de dér små ting, der - uden seeren overhovedet opdager det - river bukserne af ham.

Selvom det måske virker fuldstændig underordnet med de par pixels, banker den slags detaljer direkte ind og kilder vores underbevidste velbehageligehed på den mest udsøgte måde ... men det bliver du sikkert allerede banket med af dine lærere ;o)

Hvad selve koden angår, har jeg kun ét at brokke mig over: At du bruger XHTML. Jeg husker ikke, om jeg har givet dig disse links ... ellers er de her:
http://www.eksperten.dk/artikler/537
http://www.eksperten.dk/artikler/538

Synes godt om

olebole Juniormester

17. januar 2005 - 22:44 #15

PS: Jeg ved, der er mange multimedie elever, der bliver banket med XHTML'ens lyksaligheder. Hvis det er tilfældet hos Jer, burde du prøve at vise din lærer de to links.
Der er desværre rigtig mange, der ikke er opmærksom på disse alvorlige begrænsninger, der faktisk gør XHTML-kode betydelig dårligere end HTML4.01-Strict, som nettet ser ud idag - og formodentlig de næste par år.

Synes godt om

bas Forsker

18. januar 2005 - 08:57 #16

>olebole

Mange tak for de pæne ord.

Er det du siger, at der i stedet for XHTML skal står HTML 4.01 strict
i doctypen?
Jeg er ikke så meget inde i de der doctypes.

Men jeg kan måske læse mere i dine henvisninger.

Vh. Martin

Synes godt om

bas Forsker

03. april 2005 - 17:57 #17

> olebole

poster du et svar, så lukker jeg

undskyld den sene respons

Synes godt om

bas Forsker

13. juli 2007 - 21:48 #18

lukker spm.

Nogen, der vil have points?

/Martin

Synes godt om

bas Forsker

30. juli 2007 - 17:25 #19

snupper dem selv så.

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS