Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] minimale hoogte van een div vastleggen

D'acide
19 antwoorden
  • Beste forumleden,

    Na lange tijd van weggeweest ben ik weer eens terug :)

    heb er een flinke tijd uitgelegen kwa webdesign etc.
    ben nu bezig met een site voor een plaatselijke autoshop.

    Ik zit nu met het volgende.

    Website

    De website is nog in aanbouw, maar de basis staat er redelijk.

    Zoals je ziet is de content div variabel in hoogte. Dit is geen probleem, maar op de pagina's met weinig content wordt deze te kort.
    Daarom wil ik graag dat de div minimaal 400px hoog is. Daarvoor heb ik een achtergrondplaatje in die div van 400px hoog. Dit schijnt echter niet te werken.

    ook heb ik eens gespeeld met de min-height. maar dat gaf geen resultaat.

    ik denk dat ik iets heel simpels over t hoofd zie. Maar ik zou niet weten wat.

    Kan een van jullie misschien even helpen?


    vriendelijk bedankt alvast.

    groet,
    Tony
  • ps: voor t geval het jullie opvalt. De navigatie div is niet juist in elkaar gezet. Op mijn to-do list staat ook nog dat ik de nav laat weergeven middels een horizontale list. (alistapart methode)
  • Hoezo wordt ie te klein dan?
    Ik zit heb ff gekeken bij de webshop (volgens mij degene met de minste inhoud); maar het ziet er toch gewoon goed uit??
  • het betreft idd die pagina ja. Van die webshop dus.
    Ikzelf werk op 1280x1024. en daar komt het nogal leeg over.
    Op lagere, meer gangbare resoluties valt het ook nog wel mee.
    Maar mijns inzien kwam het niet mooi over.

    Maar nu ik zo hoor dat het wel meevalt volgens jou… hmm, ik wacht noig even een paar reacties af.

    wellicht dat ik me gewoon om niks druk lig te maken. :)

    Mocht je voor de rest nog opmerkingen oid over de site hebben, dan hoor ik deze natuulijk graag.
  • Je hebt gelijk, beetje klein. Oplossing is om relatieve maten te gebruiken, zie ook:

    http://www.alistapart.com/articles/elastic/
  • Wat heb je dan precies gedaan met min-height? Min-height werkt overigens niet in IE, voor IE moet je height gebruiken (conditional comments), waarna de container meerekt als er meer inhoud is.

    Je kunt ook denken aan een methode als FooterstickAlt (zie voorbeelden).
  • [quote:919a20873e="D'acide"]….
    Mocht je voor de rest nog opmerkingen oid over de site hebben, dan hoor ik deze natuulijk graag.[/quote:919a20873e]
    Ik heb toevallig zin om mieren te n**ken dus ik heb nog twee kleine opmerkingen :P

    In het menu gebruik je steeds twee spaties; zet gewoon in je CSS:
    [code:1:919a20873e]
    #subtop a
    {
    margin-right: 6px;
    }
    [/code:1:919a20873e]
    En in de footer heb je en <br> staan ipv <br />.

    Dat waren de twee superkleine foutjes die ik kon ontdekken :D.
  • [quote:bc3729f934="boelieboelie"]Wat heb je dan precies gedaan met min-height? Min-height werkt overigens niet in IE, voor IE moet je height gebruiken (conditional comments), waarna de container meerekt als er meer inhoud is.

    Je kunt ook denken aan een methode als FooterstickAlt (zie voorbeelden).[/quote:bc3729f934]

    Ik denk dat jouw eerste oplossing (height) perfect is voor mijn geval. Morgen direct even implementeren en testen.

    bedankt
  • [quote:7764c28ad3="Johnny321"]


    In het menu gebruik je steeds twee spaties; zet gewoon in je CSS:
    [code:1:7764c28ad3]
    #subtop a
    {
    margin-right: 6px;
    }
    [/code:1:7764c28ad3]
    En in de footer heb je en <br> staan ipv <br />.

    [/quote:7764c28ad3]

    De navbar wordt opgelost via een horizontale list item (css)
    zie deze link
  • [quote:5a05f03028="D'acide"]
    Zoals je ziet is de content div variabel in hoogte. Dit is geen probleem, maar op de pagina's met weinig content wordt deze te kort.
    Daarom wil ik graag dat de div minimaal 400px hoog is.

    ook heb ik eens gespeeld met de min-height. maar dat gaf geen resultaat.

    ik denk dat ik iets heel simpels over t hoofd zie. Maar ik zou niet weten wat.[/quote:5a05f03028]
    Wellicht, nog een lege div plaatsen in je div-"content" met height="400px" en evt. float: left
  • Ik heb een soortgelijk probleem. Ik heb een DIV boxje met daarin tekst. Deze DIV heb ik ingesteld op een height van 400px. Zodra de inhoud groter wordt dan deze 400 pixels, dan belandt de tekst buiten de DIV boxje.
    Op http://archivist.incutio.com/viewlist/css-discuss/41892 kwam ik iemand met hetzelfde probleem tegen, maar ik begrijp niet precies wat ze daar doen.

    Wie helpt me uit de brand?
  • [quote:e401b4dd3a="Klaasje"]Ik heb een soortgelijk probleem. Ik heb een DIV boxje met daarin tekst. Deze DIV heb ik ingesteld op een height van 400px. Zodra de inhoud groter wordt dan deze 400 pixels, dan belandt de tekst buiten de DIV boxje.
    Op http://archivist.incutio.com/viewlist/css-discuss/41892 kwam ik iemand met hetzelfde probleem tegen, maar ik begrijp niet precies wat ze daar doen.

    Wie helpt me uit de brand?[/quote:e401b4dd3a]Ik moet nog wat duidelijker zijn. Ik heb het volgende gedaan. (zie hiervoor ook dit topic)
    Ik heb de volgende code, zoals hier:[code:1:e401b4dd3a]<div id="container">

    <div id="opaquetext">
    This is a normal text
    on a translucent background
    </div>

    <div id="translucentbkg">

    </div>

    </div>


    #container {
    position: absolute;
    top: 100px; left: 400px; /* place it where you want */
    }

    #translucentbkg {
    width: 250px; height: 100px; /* to match DIVs size */
    background-color: #ffffff; /* the background */
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity: 0.5;
    }

    #opaquetext {
    width: 250px; height: 100px; /* to match DIVs size */
    background-color: transparent; /* transparent background */
    position: absolute; /* absolute positioning */
    z-index: 2; /* place it over the other DIV */
    }
    [/code:1:e401b4dd3a]Het probleem is, dat de #translucentbkg niet even groot wordt als de #opaquetext. De grootte staat immers bij allebei ingesteld op 100px, maar als de tekst in #opaquetext niet in deze 100px past, wordt deze DIV groter. De #translucentbkg DIV, blijft echter wel gewoon 100px en past zich niet aan, aan de grootte van de #opaquetext.

    Hoe zorg ik dat dit wel gebeurd?
  • Dat lukt niet, een div is geen tablerow. Het enige dat je kunt doen is de illusie wekken dat het meegroeit, door het principe van faux columns (zie google of zoek op dit forum).
  • Bedankt voor je reactie.[quote:dffe3443ca="boelieboelie"]Dat lukt niet, een div is geen tablerow. Het enige dat je kunt doen is de illusie wekken dat het meegroeit, door het principe van faux columns (zie google of zoek op dit forum).[/quote:dffe3443ca]Het kan idd niet, maar met een trucje wel. Op de site die jij gegeven hebt, staat hoe je het probleem kunt oplossen, zag ik net. Niet echt een 'nette' oplossing, maar wel effectief. Ik citeer:
    [quote:dffe3443ca]Sometimes having a pre-defined height is a problem, because contained text length (and images) is not known. It is still possible to avoid a fixed height, with further workarounds. The simplest one is to let the opaquetext DIV extend as necessary, then use JavaScript to se translucentbkg height with the same value. But this is not a pure CSS solution.

    If you want to use CSS only, the solution is quite simple, you have only to repeat content of opaquetext also in translucentbkg DIV. This is not elegant, but extremely easy to implement, also in dynamic generated pages. [/quote:dffe3443ca]
    'k Ga zo eens kijken naar faux columns!
  • [quote:92efebf62d="Klaasje"][quote:92efebf62d="Klaasje"]Ik heb een soortgelijk probleem. Ik heb een DIV boxje met daarin tekst.[/quote:92efebf62d][/quote:92efebf62d]
    Je had beter in je eigen topic verder kunnen gaan. Nu lopen er twee problemen door elkaar.

    [quote:92efebf62d]Sometimes having a pre-defined height is a problem, because contained text length (and images) is not known. It is still possible to avoid a fixed height, with further workarounds. The simplest one is to let the opaquetext DIV extend as necessary, then use JavaScript to se translucentbkg height with the same value. But this is not a pure CSS solution. [/quote:92efebf62d]



    [quote:92efebf62d]
    If you want to use CSS only, the solution is quite simple, you have only to repeat content of opaquetext also in translucentbkg DIV. This is not elegant, but extremely easy to implement, also in dynamic generated pages. [/quote:92efebf62d]
    Mijn eerste ingeving zegt het volgende…
    [code:1:92efebf62d]
    <script type="text/javascript">
    <!–
    document.getElementById('translucentbkg').innerText=document.getElementById('opaquetext');
    // –>
    </script>


    <div id="container">

    <div id="opaquetext">
    This is a normal text
    on a translucent background
    </div>

    <div id="translucentbkg">

    </div>

    </div>


    #container {
    position: absolute;
    top: 100px; left: 400px; /* place it where you want */
    }

    #translucentbkg {
    width: 250px; height: 100px; /* to match DIVs size */
    color: transparent;
    background-color: #ffffff; /* the background */
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity: 0.5;
    }

    #opaquetext {
    width: 250px; height: 100px; /* to match DIVs size */
    background-color: transparent; /* transparent background */
    position: absolute; /* absolute positioning */
    z-index: 2; /* place it over the other DIV */
    }
    [/code:1:92efebf62d]
  • [quote:c8caa01598="h4xX0r"]Mijn eerste ingeving zegt het volgende…
    [code:1:c8caa01598]

    [/code:1:c8caa01598][/quote:c8caa01598] Dat werkt idd, thnx h4xX0r!

    Alleen werkte mijn manier van div boxjes niet echt, omdat ik in de knoop kwam met de inhoud van de pagina. Ik heb dus besloten om ook tabellen gaan te gebruiken. Alleen stuit ik dan weer op hetzelfde probleem als eerst. Als ik nu een TD heb met een opacity, dan wordt de tekst ook transparant, net als de achtergrond van de TD.

    Als ik de tekst vervolgens in een DIV plaats en deze de position: relative, meegeef dan wordt in IE de tekst gewoon in het zwart weergegeven en blijft de TD transparant. Dit heb ik van: http://www.codingforums.com/archive/index.php?t-78399.html

    Alleen in Mozilla Firefox is de tekst gewoon transparant. Op http://www.codingforums.com/archive/index.php?t-78399.html staat wel een manier hoe het ook in mozilla zou moeten werken, maar daar werken ze niet met een tabel, maar met een div boxje. Wie weet hoe ik het met tabellen voor elkaar kan krijgen? Ik heb nu het volgende:

    [code:1:c8caa01598]
    #transparant {


    border: 1px solid black;
    z-index:5;

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#000000;
    text-align:right;
    vertical-align:top;

    background-color:#FFFFFF;
    filter:alpha(opacity=19);
    -moz-opacity:.19;
    opacity:.19;
    }

    #zwart{

    position: relative;
    z-index:100;
    background-color: transparent;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#000000;
    text-align:right;
    vertical-align:top;
    }


    <td id="transparant" colspan="2">
    <span id="zwart">
    De tekst die niet transparant zou moeten worden weergegeven. In IE gaat dit goed, maar in Mozilla Firefox niet.
    </span>
    </td>
    [/code:1:c8caa01598]

    Hoe krijg ik dit voor elkaar?
  • Hier zie je dat ik niet de enige ben met dit probleem.
    Blijkbaar bestaat er voor mijn probleem geen oplossing voor zowel IE als Mozilla Firefox. :roll:

    Althans… voor met tabellen (td's).

    Of wel?

    Alvast bedankt voor het meedenken.
  • Aangezien het me niet lukt om een 'opaque' text te maken in een TD waarvan de achtergrond transparant is, ben ik bang dat ik niet met TD's kan werken.

    Dan moet ik maar weer met DIV boxjes gaan werken, maar dan stuit ik op een positioneringsprobleem. Ik wil de boxjes t.o.v. elkaar gaan positioneren.

    Als een bepaald boxje bijvoorbeeld wordt vergroot tot 500px vanwege de inhoud van dit boxje, wil ik dat een ander boxje hier dan 10px onder komt te staan. Ook Wil ik dan dat een ander boxje 25 pixels onder dat boxje van 500px eindigt.

    Ik hoop dat het duidelijk is wat ik bedoel, wie kan me hiermee helpen? Google bood geen oplossing. :)
  • Zoals eerder gezegd, je vervuilt het topic met een ander probleem, maak voor nieuwe problemen een nieuw topic aan.

    Het is maar een suggestie, maar met zo veel vragen lijkt het me sterk dat je genoeg kennis hebt opgedaan om te bouwen waar je mee bezig bent (wat dat ook moge zijn), dus ik zou aanraden wat meer te lezen over CSS, bijv. de artikelen en websites waarnaar verwezen wordt in het topic CSS, HTML en starten met een website, en daarna pas aan de slag te gaan.

    Tip: met absoluut positioneren en z-index schiet je over het algemeen nix op. En tabellen zijn niet voor layout bedoeld.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.