/ 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
Problemer med at lave auto height i rammen
Fra : Anders Lund


Dato : 06-04-04 17:27

Hej alle.

Jeg har et problem med CSS. Jeg har en ramme med indhold i, som
skal være dynamisk, så den autojusterer størrelsen alt afhængig
af indholdet deri. Lige nu går teksten ud over rammen. Det
forstår jeg ikke har eksperimenteret meget mellem at have
100% eller auto i mine klasser, men det virker ikke. Siden kan
ses her

www.itu.dk/~andelu/W1/tefsimon/forside2.html

CSS koden ser såles ud:

body {
   background-color: #CCCCCC;
}
usynlig {visibility: hidden;}

ramme {
   background-color: #FFFFFF;
   text-align: left !important;
   width: 780px;
   height: 100%;
   padding: 0px;
   margin: 0px auto;
      
   border-right-width: 1px;
   border-left-width: 1px;   
   border-right-style: solid #000000;
   border-left-style: solid #000000;   
}
logo {
   background-image: url(../img/Logo2.gif);
   background-repeat: no-repeat;
   height: 500px;
   width: 171px;
   float: left;

}
topbar {
   background-image: url(../img/topbar3.gif);
   height: auto;
   width: 606px;
   display: block;
   background-repeat: no-repeat;
   float: left;
   background-color: #FFFFFF;
   padding: 0px;
}
breadcrumbs {
   position: relative;
   left: 30px;
   top: 198px;
   font-family: Verdana, Arial, Helvetica, sans-serif, "Franklin
Gothic Medium";
   font-size: 10px;
   color: #A9C4D3;
   height: auto;
   width: 400px;
   display: block;

}
breadcrumbs a {
   font-family: Verdana, Arial, Helvetica, sans-serif, "Franklin
Gothic Medium";
   font-size: 10px;
   color: #A9C4D3;
   text-decoration: none;
}
breadcrumbs a:hover {
   font-family: Verdana, Arial, Helvetica, sans-serif, "Franklin
Gothic Medium";
   font-size: 10px;
   color: #A9C4D3;
   text-decoration: underline;
}
indhold {
   position: relative;
   left: 30px;
   top: 218px;
   font-family: Georgia, "New Century Schoolbook", "Times New
Roman", Times, serif;
   font-size: 12px;
   color: #000000;
   height: auto;
   width: 400px;
   margin-bottom: 40px;
   display: block;


}
navi {
   position: relative;
   top: 257px;
   left: 0px;
   width: 171px;
   float: left;
   height: auto;


}
navi a {
   display: block;
   height: 30px;
   width: 171px;
   font-family: Verdana, Arial, sans-serif, serif;
   font-size: 18px;
   color: #FFFFFF;
   text-decoration: none;
   margin: 0px;
   background-color: #4D4D4D;
   padding-top: 6px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 0px;
   text-indent: 15px;
}
navi a:hover{
   background-color: #666666;
}
h1 {
   font-family: "Franklin Gothic Demi", Verdana, Arial, sans-serif,
serif, "Eras Light ITC";
   color: #CBD646;
   font-size: xx-large;


}
h3 {
   display: inline;
}

HTML koden ser således ud:

<body>
<div class="ramme">

<div class="logo">
<div class="navi"> <a href="#">Om TEF</a> <a
href="#">Medlemsskab</a> <a href="#">Dit
job</a> <a href="#">Publikationer</a> <a
href="#">Uddannelse</a> <a href="#">Leverandører</a>
<a href="#">Links</a> </div>
</div>

<div class="topbar">
<div class="breadcrumbs"><a href="#">Forside</a></div>
<div class="indhold">
<h1>Nyheder</h1>
<p>Og her er en masse nyheder Og her er en masse nyheder
nyheder Og her
er en masse nyheder nyheder Og her er en masse nyheder
nyheder Og her
er en masse nyheder nyheder Og her er en masse nyheder
nyheder Og her
er en masse nyheder nyheder Og her er en masse
nyheder</p>
<p> nyheder Og her er en masse nyheder nyheder Og her er en
masse nyheder
nyheder Og her er en masse nyheder nyheder Og her er en
masse nyheder
nyheder Og her er en masse nyheder</p>
<p> nyheder Og her er en masse nyheder nyheder Og her er en
masse nyheder
nyheder Og her er en masse nyheder nyheder Og her er en
masse nyheder
nyheder Og her er en masse nyheder nyheder Og her er en
masse nyheder
nyheder Og her er en masse nyheder nyheder Og her er en
masse nyheder.</p>
</div>
</div>
</div>
</body>
</html>


Jeg håber i kan hjælpe mig.
Mange hilsener
Anders


--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Anders Thorsen Holm (06-04-2004)
Kommentar
Fra : Anders Thorsen Holm


Dato : 06-04-04 17:35

Anders Lund <anders_lund78@yahoo.com> wrote:

> Jeg har et problem med CSS. Jeg har en ramme med indhold i, som
> skal være dynamisk, så den autojusterer størrelsen alt afhængig
> af indholdet deri.

Pas på med at bruge betegnelsen "ramme" - jeg troede lige, du omtalte
de gammeldaws "frames"!

> Lige nu går teksten ud over rammen. Det forstår jeg ikke

Du har såmen blot glemt at fjerne margin og padding på body:

body {
   margin: 0;
   padding: 0;
}

og i øvrigt burde der med dit design ikke være behov for at angive
'height: 100%' nogen steder - væk med det!

Til sidst bør du nok anvende en nyere doctype - eller blot en, der
sætter browserne i standardsmode. Frit sakset fra et af Jens
Gyldenkærne Clausens tidliger indlæg her i gruppen:

   <http://gutfeldt.ch/matthias/articles/doctypeswitch.html>
   <http://www.hut.fi/u/hsivonen/doctype.html>
   <http://www.html.dk/artikler/00036/>

[snip en masse kode]

Der er ingen grund til at gengive koden her i gruppen, når nu du har
givet et link til pågældende side (som man i øvrigt altid bør gøre).

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/

Anders Thorsen Holm (06-04-2004)
Kommentar
Fra : Anders Thorsen Holm


Dato : 06-04-04 18:01

Anders Thorsen Holm <zoolook@daimi.au.invalid> wrote:

>> Lige nu går teksten ud over rammen. Det forstår jeg ikke
>
> Du har såmen blot glemt at fjerne margin og padding på body:

Ah, nu tror jeg forstod dit spørgsmål: du vil gerne have, at den
hvide baggrund fylder hele browservinduets højde? Også selvom teksten
måske ikke fylder helt ud i højden?

Da din side har fast bredde, kan du med fordel lægge et hvidt
baggrundsbillede med en tilsvarende bredde på body, som så centreres
og gentages vertikalt.

body {
   margin: 0;
   padding: 0
   background: #ccc url(hvidbaggrund.gif) top center repeat-y;
   text-align: center; /* centrering i IE5 */
}

..ramme {
   width: 780px;
   text-align: left; /* ophæv centrering af tekst */
   margin: 0 auto; /* normal centrering */
   border-right: 1px solid #000;
   border-left: 1px solid #000;
}

dermed behøves du ikke at bruge 'height: 100%'.

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/

Anders Lund (06-04-2004)
Kommentar
Fra : Anders Lund


Dato : 06-04-04 21:06

Hej Anders.
jeg tror vist jeg forklare mig lidt dårligt tidligere. Jeg kan ikke få
det til at virke efter dine instrukser måske fordi pga, jeg ikke har
forklaret det ordenligt. CSS er ret nyt for mig, men jeg prøver lige
igen.

Jeg har en klasse .indhold som indeholder en masse nyheder. Denne klasse
er i klassen .topbar som er inde i klassen .ramme.

Jeg vil ikke definere en fast størrelse på den box, som nyheder er i da.
Den skal være selvjusterende, så siden ikke er meget lang, hvis den
f.eks. kun indeholder få oplysninger. Hvis jeg indsætter et
baggrundsbillede som du foreslog, så stopper siden og den medtager ikke
alle nyhederne. På en eller anden måde skal klasse .indhold og .ramme
spille sammen så hvis indholdet i .indhold bliver meget større, så skal
klassen .rammes box også blive større.
Jeg vil gerne have .klassen ramme har et mellemrum for neden hvor man kan
se bodyen baggrundsfarve #CCCCCC.

Håber det var til at forstå.

Og det er som sagt denne hjemmeside det drejer sig om:

http://www.itu.dk/~andelu/W1/tefsimon/forside2.html

Mvh
anders

Anders Thorsen Holm wrote in dk.edb.internet.webdesign.html:
> Anders Thorsen Holm <zoolook@daimi.au.invalid> wrote:
>
> >> Lige nu går teksten ud over rammen. Det forstår jeg ikke
> >
> > Du har såmen blot glemt at fjerne margin og padding på body:
>
> Ah, nu tror jeg forstod dit spørgsmål: du vil gerne have, at den
> hvide baggrund fylder hele browservinduets højde? Også selvom teksten
> måske ikke fylder helt ud i højden?
>
> Da din side har fast bredde, kan du med fordel lægge et hvidt
> baggrundsbillede med en tilsvarende bredde på body, som så centreres
> og gentages vertikalt.
>
> body {
>    margin: 0;
>    padding: 0
>    background: #ccc url(hvidbaggrund.gif) top center repeat-y;
>    text-align: center; /* centrering i IE5 */
> }
>
> ..ramme {
>    width: 780px;
>    text-align: left; /* ophæv centrering af tekst */
>    margin: 0 auto; /* normal centrering */
>    border-right: 1px solid #000;
>    border-left: 1px solid #000;
> }
>
> dermed behøves du ikke at bruge 'height: 100%'.
>
> --
> Anders Thorsen Holm http://www.daimi.au.dk/~zoolook/
>
> Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
> Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/


--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Anders Thorsen Holm (06-04-2004)
Kommentar
Fra : Anders Thorsen Holm


Dato : 06-04-04 22:00

Anders Lund <anders_lund78@yahoo.com> wrote:

> Jeg vil ikke definere en fast størrelse på den box, som nyheder er
> i da.

Det har hele tiden været pointen med mit svar til dig - fjern alt med
'height: 100%', 'height: auto' og den slags. Elementerne tilpasser sig
alligevel i højden.

> Den skal være selvjusterende, så siden ikke er meget lang,
> hvis den f.eks. kun indeholder få oplysninger.

Ah, så du vil altså *ikke* have at den hvide baggrund fortsætter i hele
højden, hvis indholdet fylder mindre end der er til rådighed?

> Hvis jeg indsætter et baggrundsbillede som du foreslog, så stopper
> siden og den medtager ikke alle nyhederne.

Ikke forstået. Du mener, at baggrunden stopper i utide? Det gør den da
netop ikke, hvis du giver det yderste element - her <div>'en med
klassen "ramme" - en baggrund med denne kode:

   background: #ccc url(baggrund.gif) top center repeat-y;

> På en eller anden måde skal klasse .indhold og .ramme spille sammen
> så hvis indholdet i .indhold bliver meget større, så skal klassen
> .rammes box også blive større.

Hvilket også er normal adfærd med relativt og statisk positionerede
elementer. Dine <div>'er er relativt positionerede, så her burde der
ikke være nogen problemer.

> Jeg vil gerne have .klassen ramme har et mellemrum for
> neden hvor man kan se bodyen baggrundsfarve #CCCCCC.

Så giv din .ramme-div en passende margin-bottom eller forsøg dig med
det, jeg foreslog.

> Håber det var til at forstå.

Ikke helt. Du roder lidt rundt i begreberne omkring klasser.

Følgende er en regel for en given klasse 'foo' i CSS:

   .foo {
       background: #f00;    
   }

Følgende er et element med klassen 'foo':

   <div class="foo">bla bla bla</div>

I dit tilfælde, hvor du arbejder med sidens overordnede layout, ville
det nok være mere på sin plads at bruge id i stedet for class. Et id må
kun bruges een gang på en side, mens en klasse kan tildeles til
vilkårligt mange elementer.
   
Kom eventuelt med en grafisk skitse, der illustrerer det, du gerne vil
opnå.

Og så må du gerne undlade at bundcitere hele indlæg - skriv under det,
du svarer på og klip al unødig tekst væk, jvf.:

   <http://www.usenet.dk/netikette/citatteknik.html>

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste