[css/html] 100% vensterbreedte - Softwareontwikkeling

vrijdag 2 september 2005 08:56

Acties:

Stop AI Slop

Topicstarter

Ik ben een site aan het re-designen. De site werd opgebouwd m.b.v. tabellen (bah). Maar nu stuit ik op een probleem met <div> tags.
Ik plaats 2 divs naast elkaar met absoluut positioneren.

De eerste div heeft een vaste breedte van 185px; de tweede div wil ik de rechterkant van het venster laten raken. De margins staan op nul.

De betreffende code:

HTML:

<div class="Navig">
Navig
</div>
<div class="Content">
Content
</div>

Stylesheet:

Cascading Stylesheet:

.Navig {
background-image:   url('../img/rightnavbar.png');
position:       absolute;
top:            165px;
left:           0px;
width:          185px;
height:         100%;
}

.Content {
background-image:   url('../img/backgroundmain.png');
color:          #000000;
text-align:     center;
position:       absolute;
top:            165px;
left:           185px;
width:          100%;
height:         100%;
}

Maar dit werkt niet! De width van 100% wordt namelijk opgeteld bij de reeds staande 185 pixels, zodat het "content" vlak aan de rechterkant het scherm verlaat.Dit is uiteraard niet netjes.
Ik kan de width bijvoorbeeld ook wel op 80% zetten, maar wanneer de gebruiker dan op 800x600 staat, of niet full-screen browset, wordt de lay-out weer vern**kt.
Weet iemand wat ik verkeerd doe?

offtopic:
Dit is geloof ik het eerste topic wat ik open, dus a.u.b. niet direct sluiten als er iets mis is. Ik heb de FAQ gelezen. En ja, ik begrijp hem ook.

https://oneerlijkewoz.nl
Op papier is hij aan het tekenen, maar in de praktijk...

vrijdag 2 september 2005 09:01

Acties:

Woudloper

« - _ - »

Als je het mij vraagt komt je uiteindelijk uit op een oplossing zoals deze in het Faux Columns artikel beschreven staat of ik mocht je verkeerd hebben begrepen en anders moet je nog eens naar dit artikel kijken....

vrijdag 2 september 2005 09:02

Acties:

Verwijderd

Probeer dit anders eens:

.Navig {
background-image: url('../img/rightnavbar.png');
float: left;
width: 185px;
height: 100%;
}

.Content {
background-image: url('../img/backgroundmain.png');
color: #000000;
text-align: center;
float: right;
width: 100%;
height: 100%;
}

Overigens zou ik bij alle styles die je maar 1 keer gebruikt een id gebruiken en geen class.

(P.S. ben zelf ook redelijk nieuw tot css)

[ Voor 14% gewijzigd door Verwijderd op 02-09-2005 09:03 ]

vrijdag 2 september 2005 09:47

Acties:

CodeCaster

Stop AI Slop

Topicstarter

Het floaten werkt niet, net als de andere mogelijke oplossingen. Helaas.

Ik zal even de volledige code plaatsen, aangezien het vrij ingewikkeld lijkt te zijn wat ik wil

Het betreft dus de "contenttop" en "content" divs, die staan op 100% maar worden te breed.

Afbeeldingslocatie: http://img386.imageshack.us/img386/2826/sitelayoutcss4tq.th.jpg

HTML:

    <body>
        <div class="LogoSpace">LogoSpace</div>
        <div class="YellowBar">YellowBar</div>
        <div class="NavBarTop">NavBarTop</div>
        <div class="ContentTop">ContentTop</div>
        <div class="Navig">Navig</div>
        <div class="GX">GX</div>
        <div class="Content">
            Content
        </div>
    </body>

Cascading Stylesheet:

html,body {
height:         100%;
width:          100%;
margin:         0px;
}

td {
vertical-align:     top;
text-align:     left;
}

body {
margin-top:     0px;
margin-left:        0px;
margin-bottom:      0px;
margin-right:       0px;
}

.Temp1 {
width:          50%;
text-align:     center;
border-width:       1px;
border-color:       #000000;
background-color:   #FFFFFF;
border-style:       solid;
}

.LogoSpace {
height:         95px;
border-width:       1px;
border-color:       #000000;
border-style:       solid;
}

.YellowBar {
height:         25px;
border-width:       1px;
border-color:       #000000;
border-style:       solid;
}

.NavBarTop {
position:       absolute;
left:           0px;
top:            124px;
height:         45px;
width:          185px;
border-width:       1px;
border-color:       #000000;
border-style:       solid;
}

.ContentTop {
position:       absolute;
top:            124px;
left:           185px;
width:          100%;
height:         45px;
border-width:       1px;
border-color:       #000000;
border-style:       solid;
}

.Navig {
position:       absolute;
top:            171px;
left:           0px;
height:         100%;
width:          140px;
border-width:       1px;
border-color:       #000000;
border-style:       solid;
}

.GX {
position:       absolute;
top:            171px;
left:           140px;
width:          45px;
height:         100%;
border-width:       1px;
border-color:       #000000;
border-style:       solid;
}

.Content {
position:       absolute;
top:            171px;
left:           185px;
width:          100%;
height:         100%;
border-width:       1px;
border-color:       #000000;
border-style:       solid;
text-align:     center;
}

Ik had voor de duidelijkheid alleen de css van NavBarTop en ContentTop geplaatst. Bij deze twee werkt float niet. Met de afbeeldingen die ik heb van de site (achtergrond moet identiek blijven, asp moet vooral veranderd worden) is de huidige layout een must.

[ Voor 8% gewijzigd door CodeCaster op 02-09-2005 09:48 ]

https://oneerlijkewoz.nl
Op papier is hij aan het tekenen, maar in de praktijk...

vrijdag 2 september 2005 09:50

Acties:

DoubleJ

Een ninjja!

Probeer eens van je [code]<body>[/code] tag het volgende te maken [code]<body marginwidth="0">[/code] te maken.

PS. weet niet helemaal zeker of dit klopt. kijk 't zo thuis ff na.

Sorry, niet goed gelezen.

[ Voor 19% gewijzigd door DoubleJ op 02-09-2005 09:55 ]

vrijdag 2 september 2005 09:53

Acties:

CodeCaster

Stop AI Slop

Topicstarter

Ok, duideljk ;-)

Wil ik nu te veel, of is er een erg eenvoudige oplossing voor dit probleem?

EDIT: Gelukt!

Sorry, toch te weinig geGoogled.

Cascading Stylesheet:

.ContentTop {
top:                124px;
margin-left:        185px;
height:             45px;
border-width:       1px;
border-color:       #000000;
border-style:       solid;
}

(...)

.Content {
margin-left:        185px;
height:             100%;
border-width:       1px;
border-color:       #000000;
border-style:       solid;
text-align:         center;
}

De margin-left doet t hem. Waarom ie voor de rest alle breedte opvult zal me een worst wezen, het werkt in IE en FireFox. Bedankt voor de suggesties i.i.g.!

Nieuwe vraag:

Verwijderd schreef op vrijdag 02 september 2005 @ 09:02:
Overigens zou ik bij alle styles die je maar 1 keer gebruikt een id gebruiken en geen class.

Wat bedoel je met een ID?

/noob mode uit.

[ Voor 191% gewijzigd door CodeCaster op 02-09-2005 10:38 ]

https://oneerlijkewoz.nl
Op papier is hij aan het tekenen, maar in de praktijk...

vrijdag 2 september 2005 11:46

Acties:

drm

f0pc0dert

CodeCaster:
De margin-left doet t hem. Waarom ie voor de rest alle breedte opvult zal me een worst wezen, het werkt in IE en FireFox. Bedankt voor de suggesties i.i.g.!

Mooi dat je er zelf achter gekomen bent

't Is eigenlijk heel eenvoudig. Je maakt gebruik van de eigenschap van de div (en vele andere block-level elementen) dat ze in de breedte altijd uitvullen, tenzij anders aangegeven. Als je dan 185pixels minder breedte wilt hebben dan het maximum, moet je dus niet met width de breedte aanpassen maar met margin.

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

vrijdag 2 september 2005 12:07

Acties:

CodeCaster

Stop AI Slop

Topicstarter

Bedankt voor de verheldering!

Nog even over de ID, ik heb de verschillen opgezocht tussen classes en ID's, maar ik zie geen reden waarom ik die classes in ID's zou veranderen.

Iemand anders misschien wel?

https://oneerlijkewoz.nl
Op papier is hij aan het tekenen, maar in de praktijk...

vrijdag 2 september 2005 12:28

Acties:

drm

f0pc0dert

ID's zijn soms handiger om aan te geven dat er per document maar 1 element van dat type voor kan komen. Je kunt dan in de CSS ook duidelijk zien dat het om maar 1 element per document gaat. Als je ook zeker weet dat dat altijd het geval zal zijn, kun je daarvoor id's gebruiken. ID's hebben een bijkomend voordeel: ze zijn met scripts makkelijk te selecteren (document.getElementById())

Classes hebben juist het voordeel dat ze op meerdere elementen toepasbaar zijn, en dat kan ook heel handig zijn.

Maar er is geen enkel reden om te zeggen dat je id's moet gebruiken.

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

vrijdag 2 september 2005 21:55

Acties:

CodeCaster

Stop AI Slop

Topicstarter

Wederom ontvang je mijn dank.

Volgende probleem:

Omdat de content div nu niet absoluut gepositioneerd is, kan ik geen andere div in deze div plaatsen die dat wèl op die manier geplaatst wordt.

En ik moet (site-layout moet t zelfde blijven) wel een balk hebben die tot aan de rechter zijde van t scherm doorloopt.

Weer een margin-left gebruiken werkt niet.

Heeft iemand een idee?

https://oneerlijkewoz.nl
Op papier is hij aan het tekenen, maar in de praktijk...