|
|
 | gøre box længere afh. af content
Fra : Kim Emax |
Dato : 13-10-09 11:58 |
|
hej
..page {
background:#ccc;
height:400px;
width:600px;
}
..space {
width:100px;
display:hidden;
}
..content {
width:400px;
}
<div class="page">
<div class="space"></div>
<div class="content">
her kommer en tekst, der er meget meget lang (nogle gange) og derfor
er højere end de 400px, der er sat i .page. Hvordan får man .page til
at blive længere i disse tilfælde, så teksten har baggrundsfarven
fra .page hele vejen ned?
</div>
<div class="space"></div>
</div>
Er der en setting i css til at gøre dette (som td i alm html, der bare
gør sig længere), eller skal man ud i noget javascript, evt. en css
inline, der overskriver .page{height}?
--
Mvh
Kim Emax
| |
 Jahirah (13-10-2009)
| Kommentar
Fra : Jahirah |
Dato : 13-10-09 20:25 |
|
Kim Emax wrote in dk.edb.internet.webdesign.html:
> hej
>
> ..page {
> background:#ccc;
> height:400px;
> width:600px;
> }
> ..space {
> width:100px;
> display:hidden;
> }
> ..content {
> width:400px;
> }
>
> <div class="page">
> <div class="space"></div>
> <div class="content">
> her kommer en tekst, der er meget meget lang (nogle gange) og derfor
> er højere end de 400px, der er sat i .page. Hvordan får man .page til
> at blive længere i disse tilfælde, så teksten har baggrundsfarven
> fra .page hele vejen ned?
> </div>
> <div class="space"></div>
> </div>
>
> Er der en setting i css til at gøre dette (som td i alm html, der
bare
> gør sig længere), eller skal man ud i noget javascript, evt. en css
> inline, der overskriver .page{height}?
-------------------8<-------------------------
Set evt. height til "height:auto;" og tilføj en "min-height:400px;".
height:auto så tilpasser den sig dit indhold, og min-height:400px;
fortæller din div at den skal MINIMUM være 400px; høj.
//Jahirah
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Jørgen Farum Jensen (13-10-2009)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 13-10-09 22:50 |
|
Kim Emax skrev:
> hej
>
> .page {
> background:#ccc;
> height:400px;
> width:600px;
> }
> .space {
> width:100px;
> display:hidden;
> }
> .content {
> width:400px;
> }
>
> <div class="page">
> <div class="space"></div>
> <div class="content">
> her kommer en tekst, der er meget meget lang (nogle gange) og derfor
> er højere end de 400px, der er sat i .page. Hvordan får man .page til
> at blive længere i disse tilfælde, så teksten har baggrundsfarven
> fra .page hele vejen ned?
> </div>
> <div class="space"></div>
> </div>
>
> Er der en setting i css til at gøre dette (som td i alm html, der bare
> gør sig længere), eller skal man ud i noget javascript, evt. en css
> inline, der overskriver .page{height}?
>
Det behøvetr du overhovedet ikke at bekymre dig om.
div.content vil blive så høj som indholdt tilsiger,
hvis du undlader at bestemme højde af såvel page som content.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Kim Emax (14-10-2009)
| Kommentar
Fra : Kim Emax |
Dato : 14-10-09 02:26 |
|
On 13 Okt., 23:49, Jørgen Farum Jensen <jfjen...@yahoo.dk> wrote:
> Kim Emax skrev:
>
>
>
> > hej
>
> > .page {
> > background:#ccc;
> > height:400px;
> > width:600px;
> > }
> > .space {
> > width:100px;
> > display:hidden;
> > }
> > .content {
> > width:400px;
> > }
>
> > <div class="page">
> > <div class="space"></div>
> > <div class="content">
> > her kommer en tekst, der er meget meget lang (nogle gange) og derfor
> > er højere end de 400px, der er sat i .page. Hvordan får man .page til
> > at blive længere i disse tilfælde, så teksten har baggrundsfarven
> > fra .page hele vejen ned?
> > </div>
> > <div class="space"></div>
> > </div>
>
> > Er der en setting i css til at gøre dette (som td i alm html, der bare
> > gør sig længere), eller skal man ud i noget javascript, evt. en css
> > inline, der overskriver .page{height}?
>
> Det behøvetr du overhovedet ikke at bekymre dig om.
> div.content vil blive så høj som indholdt tilsiger,
> hvis du undlader at bestemme højde af såvel page som content.
Det er jeg med på, men det er ikke div.content, der sætter
baggrundsfarven (og det er ikke muligt i min løsning, da den er en af
3 container i en float:left), men page, derfor vil jeg have page til
at strække sig.
--
mvh
Kim Emax
| |
Thomas (14-10-2009)
| Kommentar
Fra : Thomas |
Dato : 14-10-09 10:40 |
|
Kim Emax skrev:
> On 13 Okt., 23:49, Jørgen Farum Jensen <jfjen...@yahoo.dk> wrote:
>> Kim Emax skrev:
<snip>
>
> Det er jeg med på, men det er ikke div.content, der sætter
> baggrundsfarven (og det er ikke muligt i min løsning, da den er en af
> 3 container i en float:left), men page, derfor vil jeg have page til
> at strække sig.
>
Prøv at kigge på det her.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
~tj
| |
N/A (14-10-2009)
| Kommentar
Fra : N/A |
Dato : 14-10-09 16:55 |
|
| |
Philip Nunnegaard (14-10-2009)
| Kommentar
Fra : Philip Nunnegaard |
Dato : 14-10-09 17:03 |
|
Kim Emax skrev:
> Det er jeg med på, men det er ikke div.content, der sætter
> baggrundsfarven (og det er ikke muligt i min løsning, da den er en af
> 3 container i en float:left), men page, derfor vil jeg have page til
> at strække sig.
Jeg ved så ikke hvordan du har løst problemet nu hvor det er løst, men
en løsning kunne være at sætte min-height på elementet.
Jeg forstår det som at du gerne vil have at elementet skal have en
minimumshøjde, men strække sig yderligere, hvis teksten er længere end
hvad der i udgangspunktet er plads til.
En anden mulighed som godt nok ikke virker i IE7 eller ældre, men som
dog virker i ie 8, FF, Opera, Safari og Google Crome, er at bruge
display: table-cell.
<div class="helebredden">
<div class="spalte"></div>
<div class="spalte"></div>
<div class="spalte"></div>
</div>
..helebredden { display: table-row; }
..spalte { display: table-cell; }
For ældre IE-versioner:
..helebredden { clear: both; }
..spalte { float: left; }
--
Philip - http://chartbase.dk | http://www.hitsurf.dk
| |
Kim Emax (14-10-2009)
| Kommentar
Fra : Kim Emax |
Dato : 14-10-09 03:01 |
|
On 13 Okt., 21:24, Jahirah <jahi...@gmail.com> wrote:
> > ..page {
> > background:#ccc;
> > height:400px;
> > width:600px;
> > }
> > ..content {
> > width:400px;
> > }
> Set evt. height til "height:auto;" og tilføj en "min-height:400px;".
> height:auto så tilpasser den sig dit indhold, og min-height:400px;
> fortæller din div at den skal MINIMUM være 400px; høj.
Super, det virkede efter lidt pilleri. Jeg havde i content både en
fast width og height, det påvirkede page, da jeg fjernede height fra
content, så virkede det fint kun med min-height, men jeg har sat
height:auto på også, just in case.
Tak for input.
--
Mvh
Kim Emax
| |
N/A (14-10-2009)
| Kommentar
Fra : N/A |
Dato : 14-10-09 10:40 |
|
| |
Kim Emax (14-10-2009)
| Kommentar
Fra : Kim Emax |
Dato : 14-10-09 06:24 |
|
On 14 Okt., 11:39, Thomas <jansencomp...@gmail.com> wrote:
> Prøv at kigge på det her.
>
> http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser...
Jeg har fået det til at virke, som jeg ville. Og havde ikke brug for
at alle 3 kolonner er lige høje, men det er et cool link du har sendt
her, så tak for det, det skal nærstuderes 
--
Mvh
Kim Emax
| |
Philip Nunnegaard (14-10-2009)
| Kommentar
Fra : Philip Nunnegaard |
Dato : 14-10-09 16:55 |
|
Kim Emax skrev:
> det er et cool link du har sendt
> her, så tak for det, det skal nærstuderes
Det er da hurtigt nærstuderet:
Warning: mysql_fetch_array():
supplied argument is not a valid MySQL result
resource in
/home/graemefr/public_html/mjt/blogpost.php on line 83
--
Philip - http://chartbase.dk | http://www.hitsurf.dk
| |
|
|