[CSS] Hoogte en breedte meer dan 100% - Softwareontwikkeling

vrijdag 2 november 2007 01:03

Acties:

Topicstarter

Hallow,

Goed ik heb een probleem wat vrij vaak schijnt voor te komen want ik heb er al meerdere topics over gelezen en ik heb al weet ik hoeveel websites gezien maar ik kan er maar niet uitkomen en na 2 dagen word ik er wat gefrustreerd van.

Ok, momenteel heb ik nog niet zoveel op de site staan omdat ik net begonnen ben met het opzetten er van, maar probleem is als volgt:

Ik heb 3 divs (container, top, menu) waarbij de top en het menu in de container div staan.
De top (= dus de header) heeft een vaste hoogte van 126px, en een flexibele breedte van 100%.
Het menu heeft een vaste breedte van 150px en een flexibele hoogte van 100%.
Alle divs zijn gefloat aan de linkerkant van het scherm.

Nou raad je het misschien al. Het probleem is mijn menu div, die 100% hoog is + 126px. Resultaat is dus een scrollbalk aan de linkerkant van mijn scherm ongeacht welke resolutie, maar die scroll moet er niet zijn. Ik moet een oplossing vinden dat het menu gewoon de ruimte opvult tot de onderkant van de browser, dus hij moet de 126px vand e header weglaten.

Ik heb geprobeerd het op te lossen met relative en absolute positioneren, maar dat maakt of geen verschil, of hij zet het menu voor of achter de header (waardoor dus een deel van 1 van de 2 weg valt).

Hier mijn css:

Cascading Stylesheet:

html, body
{
    width: 100%;
    height: 100%;
    margin: 0px 0px 0px 0px;
    background-image: url(../Images/Layout/background.gif);
    background-repeat: repeat;
}

div#container
    {
        float: left;
        width: 100%;
        height: 100%;
    }

div#top
    {
        float: left;
        width: 100%;
        height: 126px;
        
        background-color:#00FF00;
    }

div#menu
    {
        float: left;
        width: 150px;
        height: 100%;
        
        background-color:#0000FF;
    }

En mijn html

HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Css/main_layout.css">
<title></title>
</head>

<body>
<div id="container">
    <div id="top">
    </div>
    <div id="menu">menu<br />menu<br />menu
    </div>
</div>
</body>
</html>

Signature

vrijdag 2 november 2007 01:08

Acties:

disjfa

be

Moet de site dan 100% breed zijn? Lijkt me onhandig met een verschil van resolutie tussen de 1024 en 25xx

100% hoog kan je verder makkelijk faken en is ook niet echt nuttig als je geen inhoud hebt.

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 2 november 2007 09:57

Acties:

MrMartinH

Topicstarter

Nou het probleem van de hoogte is inderdaad wel te overkomen, maar de breedte word wat lastig. En ja de content moet 100% breed zijn want maak de site voor iemand anders en die had dit als wens. Ik vind het persoonlijk ook niet echt mooi maar tis helaas niet anders.

Probleem is dus dat wanneer ik de content div naast het menu staat ik hetzelfde probleem krijg in de breedte wat ik nu in de hoogte heb.

Signature

vrijdag 2 november 2007 10:02

Acties:

disjfa

be

NukeZz schreef op vrijdag 02 november 2007 @ 09:57:
Ik vind het persoonlijk ook niet echt mooi maar tis helaas niet anders.

Als het "helaas, het is niet anders" Kan je net zo goed even een tabelletje er neer zetten. Aangezien de huidige regels van css niet "makkelijk" kan oplossen wat jij zoekt.

Dan kan je net zo goed html misbruiken en gewoon een tabel erom heen zetten. Dan zijn lijkt mij al je problemen opgelost en kan jij een "helaas" site maken

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 2 november 2007 14:12

Acties:

MrMartinH

Topicstarter

Je hoeft niet sarcastisch te gaan doen, ik stel normaal een vraag. Als dat met de huidige mogelijkheden van css niet op te lossen is kun je dat ook gewoon zeggen. Als mijn klant wensen heeft voor de site moet ik die maar voor lief nemen niet?

Is er nou daadwerkelijk geen oplossing voor? Zo nee dan zal ik op zoek naar een andere oplossing zo ja dan hoor ik het graag.

Signature

vrijdag 2 november 2007 14:28

Acties:

killercow

eth0

NukeZz schreef op vrijdag 02 november 2007 @ 14:12:
Als mijn klant wensen heeft voor de site moet ik die maar voor lief nemen niet?

Nee,

Als een klant een brug wil kopen zonder pilaren, maar dat kan niet, dan kan het niet.
Als een klant een site wil hebben welke aan de standaarden voldoet, maar dingen buiten de standaarde wil, dan kan dat niet.

1!=2

Kortom,
Wat je wilt ga je niet netjes krijgen, wat je als oplossing kunt gebruiken is oa tables en geklooi met je divjes.

Daarnaast denk ik dat je het prima met je kant kan overleggen, hij bedoeld waarschijnlijk dat zijn site er op 1024 (zijn scherm) beeldvullend uit ziet, wat iets anders is dan 100% op alle schermen imho.

(ps,

height:100% gaat je je kop kosten in elke andere browser dan IE icm meer content dan je scherm in een keer kan tonen,

Je divjes stoppen dan precies op 100% van je scherm, en de tekst loopt door.
width:100% is default voor block elements (naja voor de meeste) 100% van de parent.
)

[ Voor 16% gewijzigd door killercow op 02-11-2007 14:31 ]

openkat.nl al gezien?

vrijdag 2 november 2007 14:30

Acties:

disjfa

be

Ik bedoel het ook absoluut niet sarcastisch

Maar wat voor andere oplossing zou jij willen zoeken dan?

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 2 november 2007 14:33

Acties:

moozzuzz

NukeZz schreef op vrijdag 02 november 2007 @ 14:12:
Je hoeft niet sarcastisch te gaan doen, ik stel normaal een vraag.

Het is een vraag die hier bijna dagelijks voorbij komt, waardoor mensen op den duur wat meer ironisch durven schrijven denk ik. Neemt niet weg dat het antwoord wel gegeven is!

vrijdag 2 november 2007 14:38

Acties:

PeterSelie

NukeZz schreef op vrijdag 02 november 2007 @ 14:12:
Als mijn klant wensen heeft voor de site moet ik die maar voor lief nemen niet?

Neen, dan ben jij er als ontwikkelaar voor om een alternatief voor te stellen, daar dit met de huidige technieken in combinatie met een 'schone' oplossing niet mogelijk is.
Ook kan je hem aangeven dat een breedte van 100% niet slim is, vanwege de ontzettend grote resolutie-verschillen waar men tegenwoordig gebruik van maakt.

De ontwikkelaar dient zijn wensen in bij de ontwikkelaar, jij bent degene die uiteindelijk beslist of iets technisch haalbaar is, of om andere redenen niet handig / slim is.

Met een goed onderbouwd antwoord waarom de site niet 100% breed zou moeten zijn, zal de opdrachtgever er echt geen probleem van maken

vrijdag 2 november 2007 15:35

Acties:

Zillion01

Obey your screen!

Ik zie het probleem niet hoor. Je wilt dus geen scrolbalken? Je positioneert ze dus wel gewoon absoluut. Dan valt #top boven de linkerkolom #menu en geef dan de content van de linkerkolom een top-margin.

code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Css/main_layout.css">
<title></title>
<style>
html, body
{
    margin: 0;
    background: url(../Images/Layout/background.gif) repeat;
}

#top, #menu {
        top:0;
    left:0;
    position:absolute;
}

#top    {
        width: 100%;
        height: 126px;
    z-index:2;
        background-color:#00FF00;
    }

#menu
    {
        width: 150px;
        height: 100%;
        background-color:#0000FF;
    }

#menu-items {
    margin-top:140px;
    }

</style>
</head>

<body>
    <div id="top"></div>
    <div id="menu">
    <div id="menu-items">menu<br />menu<br />menu</div>
    </div>
</body>
</html>

of mis ik iets?

vrijdag 2 november 2007 19:59

Acties:

MrMartinH

Topicstarter

Deze oplossing had ik zelf nog niet aan gedacht, maar ik denk dat ik daar maar voor ga ja.

Ik heb het ovigens wel met de klant besproken hoor, maar ze wilde toch echt een website die op alle resoluties (dus niet alleen 1024) beeldvullend was. Ik had het ook afgeraden, onderandere omdat zinnen dan al snel onduidelijk worden met lezen (op een schermres van 1600*1200 zoals bij mij) maar dat vons ze zelf wel prettig. Nouja, klant is koning he

.

Iig bedankt voor de reacties, heb ik tenminste weer even wat te doen.

Signature