[CSS] body Div - Fixxed - Softwareontwikkeling

dinsdag 6 september 2005 10:32

Acties:

Topicstarter

Ik vroeg me het volgende af.

Ik heb nu een webpagina met 3 containers.
-------------------------
1 = de header
2 = de menu balk
3 = de content
-------------------------

Alleen als ik nu op een anchor druk verspringt de pagina ( aangezien de body op NO SCROLL staat, en IE de interne link automatisch op 25% zet. )

Wat ik nu dus wil proberen is om 1 grote div te maken
( Screen Div ). die het hele scherm vult.
Daarin worden dus de header div/menu div/content div gezet )

Ik wil deze div op Fixed height zetten, dus zodra IE de pagina wil laten verspringen, dat hij automatisch mee springt.

Zou dit mogelijk zijn ?

dinsdag 6 september 2005 10:35

Acties:

Verwijderd

ik denk niet dat dat iets veranderd aan het gedrag wat je hebt

maar, hoe zit het nu eigenlijk? je hebt een pagina zonder scollbars en wel een interne link om ergens heen te springen

waar is dat dan goed voor?

dinsdag 6 september 2005 11:11

Acties:

Vecodo

Topicstarter

Ik heb mijn pagina in 3 Divs opgedeelt

Header
Menu
Content

Elke div is weer opgedeelt in andere Divs

Header - 1 div met een Background image
Menu - Zoekdiv / DHTML div / Opvulling
Content - Submenu Div / Content Div / Nieuws box

Nu is de hele pagina niet Scrollbaar.
Alleen de content div is dit. aangezien ik aardig wat content heb op deze pagina.
Wat ik nu wil is doorlinken in een bepaalde plek in de content Div.

Maar IE verspringt dan naar beneden. De hele header verdwijnt en krijg onderin een witte balk
( het doorlinken zelf gaat wel goed ) het enigste nadeel is dus dat mijn layout verneukt.

Nu zat ik te bedenken hoe ik dit kan maken. en aangezien bijna niemand hier een antwoord op heeft voor mij. kwam ik op het bovenstaanse Idea.

dinsdag 6 september 2005 11:48

Acties:

Zoefff

❤ 

Het lijkt me handig als je even een linkje geeft, of een codevoorbeeld

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

dinsdag 6 september 2005 12:07

Acties:

AtleX

Tyrannosaurus Lex 🦖

overflow:auto zetten op de content div

Sole survivor of the Chicxulub asteroid impact.

dinsdag 6 september 2005 12:09

Acties:

Woudloper

« - _ - »

AtleX schreef op dinsdag 06 september 2005 @ 12:07:
overflow:auto zetten op de content div

Zo kunnen we nog wel even door blijven gaan met gissen wat er nu daadwerkelijk aan de hand zou kunnen zijn. Het lijkt er dus op dat het beter zou zijn wanneer de TS een link naar zijn source (voorbeeld website) geeft of dat hij hier in het topic een stuk van de code laat zien...

dinsdag 6 september 2005 12:13

Acties:

Vecodo

Topicstarter

Zie ook :
[rml][ Anchors] Verkl*te Layout.[/rml]

www.respond.nl/1/index,php
( druk bij deze pagina maar eens op een intern link , bijvoorbeeld : in de nieuws box )

probleem doet zich voor bij
-------------------------------------------------
IE
Schermresolutie van : 1024x768
-------------------------------------------------

The template Alle overbodige dingen even weggehaald

code:

<?
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<?=head()?>
<meta http-equiv="Content-Language" content="en-us">
<title>Respond!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>

    <div id="header">
            <div id="branding"></div>
            <div id="plaatje1"></div>
            <div id="plaatje2"></div>
            <div id="plaatje3"></div>
            <div id="plaatje4"></div>
        <div id="navMain">
            <div id="navSearch"></div>
            <div id="navMenu"></div>
            <div id="empty"></div>
        </div>
    </div>
    
    <div id="container">
            <div id="colLeft"><</div>
        <div id="colCenter"><br>
<table width="506" nheight="132" border="0" align="center">
<tr>        <?=editmenu()?>
            <?=content()?>
<td valign="top">
</td>
</tr>
</table>
      </div>

      <div id="colRight">
             <div id="navLocal"></div>
      </div>
    </div>
    
<div id="adres"></div>
<div id="vlag"></div>
    
    
</body>
</html>

CSS

code:

html {
    }

Body {
    overflow:hidden;
    margin: 0px;
    padding: 150px 0px 0px 0px;
    height: 100%;
    }
        
#header {
    margin-top: -150px;
    background-image: url(images/Respond1_1.jpg);
    height: 150px;
    width: 1020px;
    }

#branding {
    height: 120px;
    }

#plaatje1 {
    width:80px;
    height:80px;
    border:1px solid #ffffff;
    position:absolute;
    left: 17px;
    top: 20px;
    background-image: url(images/brand%20klein2.jpg);
    }
    
#plaatje3 {
    width:80px;
    height:80px;
    border:1px solid #ffffff;
    position:absolute;
    left:207px;
    top:19px;
    background-image: url(images/controle%20centrum%20klein2.jpg);
    }
    
#plaatje2 {
    width:80px;
    height:80px;
    border:1px solid #ffffff;
    position:absolute;
    left:112px;
    top:20px;
    background-image: url(images/materiaal%20klein2.jpg);
    }
    
#plaatje4 {
    width:80px;
    height:80px;
    border:1px solid #ffffff;
    position:absolute;
    left:302px;
    top:19px;
    background-image:url(images/terrorisme%20klein2.jpg);
    }

#navMain {
    height:30px;
    background-color:#E56B20;
    }

#navSearch {
    width:205px;
    height:30px;
    left:0px;
    position:absolute;
    padding-top:4px;
    padding-left:25px;
    border-right:1px solid white;
    border-left:1px solid black;
    border-top:1px solid white;
    }

#navMenu {
    left:205px;
    position:absolute;
    width:583px;
    background-color:#000000;
    height:30px;
    border-bottom:1px solid #FFFFFF;
    border-right:1px solid #FFFFFF;
    border-top:1px solid #FFFFFF;
    }

#empty {
    width:223px;
    position:absolute;
    left:797px;
    height:30px;
    border-right:1px solid black;
    }
    
#container {
    top:150px;
    bottom:0px;
    _height:expression(document.body.clientHeight - 150 + 'px'); /* equals value from #header height */
    width:1020px;
    position:absolute;
    }

#colLeft {
    height:100%;
    overflow:auto;
    width:205px;
    background-color:#003399;
    float:left;
    border-left:1px solid #000000;
    padding-top:20px;
    padding-left:20px;
    border-bottom:1px solid #000000;
    }

#colCenter {
    height:100%;
    overflow:auto;
    width:583px;
    float:left;
    background-color:#FFFFFF;
    padding-top:10px;
    padding-left:20px;
    border-bottom:1px solid #000000;
    border-right:1px solid white;
    }

#colRight {
    width:232px;
    float:left;
    height:100%;
    background-image: url(images/Respond4_2.jpg);
    border-right:1px solid #000000;
    padding-top:9px;
    }

#navLocal {
    padding:0px 50px 0px 10px;
    }

#adres {
    width:133px;
    height:103px;
    background-color:#e56b20;
    position:absolute;
    left: 801px;
    top: 475px;
}

#vlag {
    width:213px;
    height:440px;
    position:absolute;
    left: 20px;
    top: 568px;

}

[ Voor 13% gewijzigd door Vecodo op 06-09-2005 12:14 ]

dinsdag 6 september 2005 12:16

Acties:

BtM909

Watch out Guys...

offtopic:
Waarom ga je niet verder in je oude topic

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 6 september 2005 12:19

Acties:

Vecodo

Topicstarter

BtM909 schreef op dinsdag 06 september 2005 @ 12:16:

offtopic:
Waarom ga je niet verder in je oude topic

Aangezien daar verschillende oplossingen kunnen worden gegeven.
Dit topic is meer bedoelt of mijn oplossing zou werken.

denk namelijk zelf van niet.

dinsdag 6 september 2005 13:13

Acties:

Vecodo

Topicstarter

denk dat ik weet waardoor dit komt.

als je namelijk de overflow op auto zet. dan heb je nog een heel wit vlak onder aan de pagina ( precies de zelfde grote als je op zo'n interne link drukt )

dus ik denk dat er wat mis is met de postionering van mijn Divs.

Maar de grote vraag is nu : wat is er mis mee ?

Pagina: 1

Reageer