[HTML/CSS]Rekkende div, variabelle footer - Softwareontwikkeling

woensdag 13 december 2006 19:29

Acties:

Topicstarter

Beste gotters,

Ik ben bezig met een nieuwe webpagina, ik heb nu voormezelf de tijd genomen om eindelijk het eens voor elkaar te krijgen om de 'side'div mee te laten rekken.
Eerst een voorproefje op de (versimpelde) code.

code:

<div id="contentText">
    <p>
    Een berg text
    </p>
    <!-- CONTENT COPYRIGHTS -->
    <div id="contentCopy">
    </div>
    <!-- /CONTENT COPYRIGHTS -->
</div>
<!-- /CONTENT TEXT-->
<!-- CONTENT SIDE -->
<div id="contentSide">
</div>
<!-- /CONTENT SIDE -->

Ok wat wil ik nu bereiken: Ik wil het zo maken dat de contentSide met zijn inhoud een achtergrond heeft en doorrekt tot aan de contentCopy div. Onder de contentCopy versta ik een een horizontale div welke helemaal onderaan de pagina staat.
Daarnaast wil ik dat de contentCopy div 100px onder contentText div. Maar doordat de tekst variabel is zal deze dus verschuiven, en dus ook de height voor contentSide.

Wat heb ik bereikt: Helemaal niets, ik ben zover dat nu mijn contentCopy div de bedoelde 100px onder de contentText div staat. Alleen ik krijg het niet voor elkaar om de contentSide div mee te laten rekken.
O.a. postion:relative geprobeerd, height op 100%. Wat gebeurde er bij 100%, de pagina werd precies zo hoog als de content van de contentSide div. Niet de bedoelde height tot hij tegen de andere div stoot.

Wat zo ik graag willen weten.
Heeft iemand een soortgelijke code welke wel werkt, ik ga er in eerste instantie vanuit werkt in FF. Of heeft iemand tips om dit geheel werkend te krijgen.

Wanneer je meer info wilt, of miss een testcase. Dan zie ik je bericht wel verschijnen. $_/-\o_$

EDIT:

code:

#content {
    width:649px;
    height:100%;
    position:absolute;
    top:331px;
    left:0px;
    _left:-1px; 
}
    #content #contentText {
        width:444px;
        height:inherit;
        position:absolute;
        top:0px;
        left:0px;
        _left:-1px;
        margin-bottom:100px;
    }
    #content #contentSide {
        width:190px;
        height:512px;
        position:absolute;
        top:-5px;
        right:0px;
        _right:-1px;
        
        background-color:#dbdbdb;
    }
    #content #contentCopy {
        width:649px;
        height:38px;
        position:relative;
        top:0px;
        left:0px;
        
        margin-top:1px;
        
        background-color:#cdcdcd;       
    }

[ Voor 22% gewijzigd door Ramasha op 13-12-2006 19:44 ]

woensdag 13 december 2006 19:34

Acties:

marko77

wordt een lastig verhaal als je je css niet post, zoals het er nu staat kan je contentside div nooit meerekken omdat deze onder de contenttext div komt te staan.

waarschijnlijk floaten ze wel, maar het blijft nu even gissen

Mijn rig

woensdag 13 december 2006 19:41

Acties:

Ramasha

Topicstarter

TS even aangepast, dit is wat er Op dit moment staat. Ik ben ondertussen op zoveel 'oplossingen' gestuit dat het onmogelijk is om al die cases te posten, 1 ding lijkt me duidelijk ze werkte geen van allen.

woensdag 13 december 2006 20:04

Acties:

marko77

Je css is erg rommelig, en de html die je gepost hebt is incompleet.

Wat jij wilt is volgens mij iets soortgelijks als 'faux columns'. Google daar eens op.
Het is wel iets wat eigenlijk niet makkelijk kan, zeker niet als je ook IE gebruikers wilt bereiken.

Als je met achtergronden werkt kun je denk ik wel iets werkends bedenken, maar als je pér se vertical wil meestretchen is het gebruik van tabellen vaak de makkelijkste oplossing (alhoewel dat natuurlijk niet een erg _nette_ manier is)

Mijn rig

woensdag 13 december 2006 20:15

Acties:

Ramasha

Topicstarter

marko77 schreef op woensdag 13 december 2006 @ 20:04:
Je css is erg rommelig, en de html die je gepost hebt is incompleet.

Wat jij wilt is volgens mij iets soortgelijks als 'faux columns'. Google daar eens op.
Het is wel iets wat eigenlijk niet makkelijk kan, zeker niet als je ook IE gebruikers wilt bereiken.

Als je met achtergronden werkt kun je denk ik wel iets werkends bedenken, maar als je pér se vertical wil meestretchen is het gebruik van tabellen vaak de makkelijkste oplossing (alhoewel dat natuurlijk niet een erg _nette_ manier is)

Bedankt voor de term, ik heb nu het stretching probleem opgelost. Nu wil ik alleen nog mijn footer Helemaal Onderin plaatsen. Ik krijg dit met geen enkele manier voor elkaar: bottom:0px; pakt hij niet. relative positioneren en vervolgens een top meegeven pakt hij ook niet.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ruigrok Media, de expert op het internet - Websites en webapplicaties op maat</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script langugage="JavaScript" src="subMenu.js"></script>

</head>
<body onload="javascript:prefixCheck();">
<div id="container">
    <!-- HEADER -->
    <div id="header">
    </div>
    <!-- /HEADER -->
    <!-- MENU -->
    <div id="menu">
    </div>
    <!-- /MENU -->
    <!-- HEADERCONTENT SPACER -->
    <div id="HCSpacer">
    </div>
    <!-- /HEADERCONTENT SPACER -->
    <!-- CONTENT -->
    <div id="content">
        <!-- CONTENT SIDE -->
        <div id="contentSide">
        </div>
        <!-- /CONTENT SIDE -->
        <!-- CONTENT TEXT-->
        <div id="contentText">
            <p>
                Hier staat dan wat text
            </p>
        </div>
        <!-- /CONTENT TEXT-->
    </div>
    <!-- /CONTENT -->
    <!-- COPYRIGHTS-->
    <div id="Copyrights">
    </div>
    <!-- COPYRIGHTS-->
</div>
</body>
</html>

en de bijbehoorende CSS:

Cascading Stylesheet:

/* Algemene deel stylen */
body {
background-color:#FFFFFF;
background-repeat : repeat;
font-size : 12px;
text-align: center; /* voor IE */ 
margin-top: 0px;
margin-bottom:0px;
font-family:Arial, Helvetica, sans-serif;
} 
#container {
  width: 671px; 
  height: auto;
  position: relative; 
  margin-left: auto; 
  margin-right: auto; 
  text-align: left; 
  background-color:#FFFFFF;
}
/* HEADER */
#header {
    width: 649px;
    height:299px;
    position: absolute;
    top:22px;
    left:0px;
        
    font-family:Trebuchet MS;
}/
* /HEADER */
/* MENU */
#menu {
    width: 272px;
    height:209px;
    position: absolute;
    top:111px;
    left:324px;
    _left:323px;

    color:#FFFFFF;
    font-family:arial;
    font-size:18px;

}
/* /MENU */
/* HEADERCONTENT SPACER */
#HCSpacer {
    width:649px;
    height:3px;
    position:absolute;
    top:322px;
    left:0px;
    _left:-1px;
}
/* /HEADERCONTENT SPACER */

/* CONTENT */
#content {
    width:649px;
    position:absolute;
    top:326px;
    left:0px;
    _left:-1px;
    
    
    text-align: left; /*voor IE */
    background: #bbff02 url(afbeeldingen/faux.png);
    overflow: hidden;
    margin: 0 auto;
}
    #content #contentText {
        width:444px;
        margin-right:190px;
        color:#000;
        
        margin-bottom:100px;
    }
    #content #contentSide {
        float:right;
        width:190px;
        color:#000;
    }
/* /CONTENT */
/* COPYRIGHTS */
#Copyrights {
    width:649px;
    height:38px;
    position:relative;
    bottom:0px;
    left:0px;
            
    background-color:#cdcdcd;
    
    z-index:1;
}
/* /COPYRIGHTS */

Ik zou met mijn gezonde verstand zeggen dat ik met een relative, en een margin een heel eind zou komen. Ik geprobeerd, FF plaatst direct de footer helemaal bovenaan. Zoals er nu staat met bottom:0px blijft hij ook helemaal bovenin staan. Dit komt volgens mij doordat de container div geen vaste height heeft.
Ik sta echt voor een raadsel

[ Voor 79% gewijzigd door Ramasha op 14-12-2006 16:13 . Reden: Nieuw probleem. ]

donderdag 14 december 2006 18:21

Acties:

Ramasha

Topicstarter

niemand een ideetje?

donderdag 14 december 2006 23:42

Acties:

citexx

Misschien is een online voorbeeldje handig zodat we kunnen zien wat er daadwerkelijk aan de hand is !

vrijdag 15 december 2006 11:37

Acties:

Ramasha

Topicstarter

citexx schreef op donderdag 14 december 2006 @ 23:42:
Misschien is een online voorbeeldje handig zodat we kunnen zien wat er daadwerkelijk aan de hand is !

Ok, hier een testcase voor jullie: Link.
Zoals jullie daar kunnen zien, de footer staat helemaal bovenaan. Is niet egt de bedoeling zeg maar.

[ Voor 14% gewijzigd door Ramasha op 15-12-2006 11:39 ]

vrijdag 15 december 2006 13:13

Acties:

Verwijderd

ik zou de footer(#Copyrights ) gewoon in de flow van de pagina plaatsen. Verder werkt de #Copyrights niet omdat je position: relative hebt genomen. Maak hiervan absoluut. Dit heeft echter grote nadelen. Als je scolt komt de footer op een rare plek te staan. Als je de footer altijd onderaan het browser scherm wilt hebben moet je het anders aanpakken.

Overigens is het gebruik van lelijke IE hacks niet aan te raden. Kijk anders een keer naar conditional comments

vrijdag 15 december 2006 14:32

Acties:

Ramasha

Topicstarter

In de flow van de pagina, ik neem aan buiten de 'container'. Dit heb ik geprobeerd en wat ik dan krijg is dat me copyright bar op pak hem beet 300px van de top staat. Midden in me pagina zogezegt

Ik zal het wel even veranderen zodat jullie het kunnen zien.

Omtrent die position:relative; ik heb hem expres zo laten staan om jullie te laten zijn tot hoever ik was.

Voor de duidelijkheid het is niet de bedoeling dathij onderin het Browserscherm zit maar onderaan de pagina.

vrijdag 15 december 2006 15:10

Acties:

Verwijderd

Het probleem zit in de opbouw van je css. je positioneert de header en de content absoluut. Van de content weet je echter niet hoe hoog deze is, dit ligt immers aan de inhoud. Het bepalen waar de footer dan moet komen is dan vrij onmogelijk (of je moet de footer in de content zetten).

Wat betreft de css: ik zou de pagina helemaal in de flow laten en dan met margins gaan werken. (met uitzondering van het menu)

Het is iig belangrijk dat je de content niet absoluut positioneert. Je kan de content namelijk ook naar beneden krijgen door de margin-top: 326px; te zetten (ik ga er hierbij vanuit dat je de header nog steeds absoluut positioneert) vervolgens kan je de footer in de flow laten (dus niet absoluut positioneren) en komt deze onder de pagina

vrijdag 15 december 2006 15:59

Acties:

Ramasha

Topicstarter

bedankt ik ga weer even aan de gang, btw die ie hacks gaan idd in aparte file (aparte IE file).

Ik sta voor een raadsel, ik stel een margin in op de content idd van 326px, maar wat gebeurd er nu? de hele header sleept naar beneden?!

Door wat te stoeien met o.a. de margins van de header is het mij nu gelukt om deze pagina volledig werkend te krijgen. Iedereen hartstikke bedankt $_/-\o_$

Vriendelijke groet,

Ramasha

[ Voor 71% gewijzigd door Ramasha op 15-12-2006 20:26 ]