[CSS] Div overlay werkt niet met position: relative - Softwareontwikkeling

donderdag 31 januari 2008 13:51

Acties:

Topicstarter

Ik ben voor het eerst bezig om een pagina op te zetten mbv. CSS (ben voornamenlijk een programeur, hou me normaal niet bezig met het opmaken van een webpagina).

Wat ik wil:

Ik heb een login schermpje (div). Hiervan moet de achtergrond een opacity hebben van 50%. Dit is opzich niet zo'n probleem, het vervelende is alleen dat de tekst dan ook een opacity heeft van 50% en dat is niet de bedoeling.

Mijn oplossing:

Ik dacht dat de simpelste oplossing was om hier een extra div overheen te doen waar de tekst en het formulier in geplaatst wordt.

Mijn probleem:

Dit werkt alleen wanneer ik met absolute posities werk

. Aangezien mijn website gecentreerd wordt werk ik met een relative positie. Als ik met relatieve posities werk worden de div's boven elkaar geplaatst in plaats van over elkaar. Wanneer ik de positie absoluut maak dan gaan ze wel over elkaar heen.

Code:

Cascading Stylesheet:

#boxLoginInActiveText 
{
    position: relative;
    overflow: hidden;
    width: 289px;
    height: 15px;
    top: 156px;
    left: 603px;
}

#boxLoginInActive {
    position: relative;
    overflow: hidden;
    width: 289px;
    height: 15px;
    top: 156px;
    left: 603px;
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    filter:alpha(opacity=50);   /* Internet Explorer       */
    -moz-opacity:0.5;           /* Mozilla 1.6 and below   */
    opacity: 0.5;               /* newer Mozilla and CSS-3 */
}

HTML:

<body>
    <div id="main">
        <div id="layoutHeader">
            <div id="boxLoginInActive">test</div>
            <div id="boxLoginInActiveText">Tekst</div>
        </div>
    </div>
</body>

Zoeken op google/got etc. heeft nog niets geholpen, ik heb nergens kunnen vinden of dit wel/niet mogelijk is met een relatieve positie en wat er dan aangepast moet worden. Iemand die een oplossing heeft?

[ Voor 0% gewijzigd door IceM op 31-01-2008 13:51 . Reden: Tags aangepast ]

...

donderdag 31 januari 2008 13:54

Acties:

steffex

z-index werkt gewoon niet met relative! dus je zult absolute moeten gebruiken!

quote: http://w3schools.com
Note: Z-index only works on elements that have been positioned (eg position:absolute;)!

meer info: http://w3schools.com/css/pr_pos_z-index.asp

en om je even opweg te helpen met het centreren van je page bij absolute positioneren:

Cascading Stylesheet:

#main
{
position: absolute;
width: 800px;
left: 50%;
margin: -400px; /* de helft van de breedte en dan negatief */
}

[ Voor 84% gewijzigd door steffex op 31-01-2008 13:58 ]

donderdag 31 januari 2008 13:57

Acties:

IceM

Topicstarter

Maar ... hoe moet ik met absolute posities gaan werken als het een gecentreerde website beftreft? Dan zijn de posities toch bij elke resolutie/scherm grootte anders?

...

donderdag 31 januari 2008 13:58

Acties:

steffex

IceM schreef op donderdag 31 januari 2008 @ 13:57:
Maar ... hoe moet ik met absolute posities gaan werken als het een gecentreerde website beftreft? Dan zijn de posities toch bij elke resolutie/scherm grootte anders?

zie mijn vorige post (was wat laat met editten

)

offtopic:
had je niet gezocht op centreren van een absolute layout?

[ Voor 11% gewijzigd door steffex op 31-01-2008 14:00 ]

donderdag 31 januari 2008 15:11

Acties:

Puck

W32.Deadcode.A

stef-o schreef op donderdag 31 januari 2008 @ 13:54:
z-index werkt gewoon niet met relative! dus je zult absolute moeten gebruiken!

Hoe kom je daar nou bij? Z-index werkt prima met relative. Er wordt bedoeld dat de box in ieder geval een bepaalde positionering krijgt (relative,absolute,etc).

Zie http://developer.mozilla....Understanding_CSS_z-index

[ Voor 33% gewijzigd door Puck op 31-01-2008 15:16 ]

Arrived anxious, left bored

donderdag 31 januari 2008 15:36

Acties:

IceM

Topicstarter

Nu snap ik er niks meer van. Kan ik relatief gepositioneerde div's nu wel of niet over elkaar heen leggen?

Als ik de absolute code gebruik in mijn main class zoals stef-o aangaf klopt er namenlijk helemaal niks meer van de indeling. Er blijft dan nog maar een heel klein stukje website over...

...

donderdag 31 januari 2008 16:13

Acties:

OkkE

CSS influencer :+

IceM schreef op donderdag 31 januari 2008 @ 13:57:
Maar ... hoe moet ik met absolute posities gaan werken als het een gecentreerde website beftreft? Dan zijn de posities toch bij elke resolutie/scherm grootte anders?

Wanneer je een relatief gepositioneerd element neemt, dat centreerd, en daar in een element absoluut positioneerd, zal dat element uit gaan van zijn relatieve parent ipv de body/scherm.

--edit--

Hou er alleen wel rekening mee dat absoluut gepositioneerde elementen "uit de flow" worden gehaald. Alle andere elementen zullen zich dus gedragen alsof dat element er niet is.

[ Voor 17% gewijzigd door OkkE op 31-01-2008 16:14 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 31 januari 2008 16:24

Acties:

IceM

Topicstarter

OkkE schreef op donderdag 31 januari 2008 @ 16:13:
[...]

Wanneer je een relatief gepositioneerd element neemt, dat centreerd, en daar in een element absoluut positioneerd, zal dat element uit gaan van zijn relatieve parent ipv de body/scherm.

--edit--

Hou er alleen wel rekening mee dat absoluut gepositioneerde elementen "uit de flow" worden gehaald. Alle andere elementen zullen zich dus gedragen alsof dat element er niet is.

Kijk, dat is de oplossing. Mijn main had geen relatieve positie, door dat toe te voegen en de positie van de 2 div's die elkaar moeten overlappen absoluut te maken werkt het allemaal perfect. Bedankt.

...