CSS div 'over' website heen - Softwareontwikkeling

woensdag 29 juli 2009 10:24

Acties:

0 Henk 'm!

Topicstarter

Beste allen,

Ik probeer, voor een test wat later als een soort pop-up over de hele website moet gaan fungeren,
om een layer 'over' de website heen te krijgen.

natuurlijk geprobeerd om na de body dit te doen:

<body>
<div id="pagewidth">

content

</div>
</body>

En de code van pagewidth:

#pagewidth {
background-color: #000;
margin:0 auto;
padding:0;
text-align:center;
width:100%;
}

In IE 6/7 werkt dit, maar in firefox krijg ik het niet voor elkaar, de tables die nog in de websites staan, blijven over de pagewidth div heen gaan. z-index werkt niet, hebben jullie ideeen? tips?

bedankt al vast

woensdag 29 juli 2009 10:26

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Waarom positioneer je je div niet absoluut over de hele pagina?

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.

woensdag 29 juli 2009 10:33

Acties:

0 Henk 'm!

Triumph-Design

Topicstarter

BtM909 schreef op woensdag 29 juli 2009 @ 10:26:
Waarom positioneer je je div niet absoluut over de hele pagina?

done that, zelfs dat lijkt niet te werken

woensdag 29 juli 2009 10:36

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Laat dan eens een simpele testcase online zien of zet een werkend voorbeeld hier tussen [code=html][/] tags.

Ik verwacht alleen niet meer dan 20 regels code

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.

woensdag 29 juli 2009 10:39

Acties:

0 Henk 'm!

Triumph-Design

Topicstarter

http://www.belegger.nl/nieuw/

woensdag 29 juli 2009 10:42

Acties:

0 Henk 'm!

AtleX

Tyrannosaurus Lex 🦖

Ik heb geen flauw idee wat er een overlay moet geven op die pagina, dus met alleen een linkje kunnen we niet zoveel.

Geef sowieso wel een leuke z-index mee aan die div om 'm daadwerkelijke over de pagina te leggen. Dat zal al schelen.

Daarnaast is je session IP validatie ding nogal loos want ik zit vrijwel altijd achter een loadbalanced verbinding met meerdere IP's (zoals zoveel zakelijke omgevingen) en krijg je dus constant javascript pop-ups met een (voor de leek) onbegrijpelijke melding.

[ Voor 21% gewijzigd door AtleX op 29-07-2009 10:46 ]

Sole survivor of the Chicxulub asteroid impact.

woensdag 29 juli 2009 10:42

Acties:

0 Henk 'm!

disjfa

be

Wat probeer je precies te doen op die pagina? Een testcase is handiger.

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 29 juli 2009 10:47

Acties:

0 Henk 'm!

jbdeiman

En als je de tables als "inline-block" weergeeft?

woensdag 29 juli 2009 10:49

Acties:

0 Henk 'm!

PeetR

BtM909 schreef op woensdag 29 juli 2009 @ 10:36:
...
Ik verwacht alleen niet meer dan 20 regels code

Your time as a student is the best time of your life

woensdag 29 juli 2009 10:51

Acties:

0 Henk 'm!

Triumph-Design

Topicstarter

Met een linkje kan ik vaak zelf al genoeg, ik gebruik firebug, zo kan ik zelf altijd testen of iets werkt.

Ik heb een z-index & position: absolute; meegegeven, ook nog display:block; geprobeerd, het wil allemaal niet werken.

Wat bedoelen jullie precies met een test case?

Zo van ik wil dit, hoe wil ik het bereiken en wat moet er voor gebeuren?

woensdag 29 juli 2009 10:53

Acties:

0 Henk 'm!

disjfa

be

Triumph-Design schreef op woensdag 29 juli 2009 @ 10:51:
Wat bedoelen jullie precies met een test case?

Alleen de html waarmee je je probleem hebt. Je post nu gewoon een link naar een website en dan moeten wij gaan gokken wat je precies probeert te doen. Dat gaat natuurlijk niet.

Alleen de html waarmee je je probleem hebt die je in je ts post. in [ code ] tags graag. En mischien nog een online voorbeeld.

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 29 juli 2009 11:01

Acties:

0 Henk 'm!

Triumph-Design

Topicstarter

Raden wat ik wil? Ik dacht toch duidelijk aangegeven wat ik precies wil

Gewoon een layer / dive 'over' de website heen, van mij part in het zwart dat je in ieder geval duidelijk kan zien van ja, er zit een layer over heen.

de code waar het over gaat:

direct na de <body> tag:

HTML:

<BODY>
    
<div id="pagewidth">
    <div id="wrapper" class="clearfix">
        
        <div id="topmenu">
        <A class=submenu title="Klik hier om uw homepage aan te passen" href="http://www.belegger.nl/index.php?add=1">Pas uw homepage aan</A>&nbsp;|&nbsp; 
        <A class=submenu title="Deze pagina als startpagina instellen" onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.belegger.nl'); return false;" href="http://www.belegger.nl/">Stel in als startpagina</A>&nbsp;|&nbsp; 
        <A class=submenu title=Uitloggen href="http://www.belegger.nl/uitloggen.php">Uitloggen</A>&nbsp;&nbsp; 
    </div>

en de css getest op id: "pagewidth":

Cascading Stylesheet:

#pagewidth {
  background-color:#000000;
  display:block;
  margin:0 auto;
  padding:0;
  position:absolute;
  text-align:center;
  width:100%;
  z-index:99;
}

oh haha precies 20 regels

woensdag 29 juli 2009 11:05

Acties:

0 Henk 'm!

disjfa

be

En in je "pagewidth" zet je je wrapper in. Dus die doet precies wat je wilt?

[ Voor 13% gewijzigd door disjfa op 29-07-2009 11:05 ]

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 29 juli 2009 11:06

Acties:

0 Henk 'm!

martennis

gewoon een fixed div @ top 0, left 0 en 100% width en height?

woensdag 29 juli 2009 11:10

Acties:

0 Henk 'm!

Cyw00d

Houi ook in de gaten dat je de DIV onderin je source zet. De browsers bouwen de website op van boven naar beneden. Dus als je je DIV als laatste neerzet (onderaan je source) dan weet je zeker dat deze bovenop de rest komt te staan.

[ Tesla MIG MYP ]

woensdag 29 juli 2009 11:43

Acties:

0 Henk 'm!

Triumph-Design

Topicstarter

Cyw00d schreef op woensdag 29 juli 2009 @ 11:10:
Houi ook in de gaten dat je de DIV onderin je source zet. De browsers bouwen de website op van boven naar beneden. Dus als je je DIV als laatste neerzet (onderaan je source) dan weet je zeker dat deze bovenop de rest komt te staan.

dat was een beste tip

heb nu helemaal onderaan een nieuw divje gedefinieerd:

HTML:

1 2	<div id="blok"></div> </body>

met de css

Cascading Stylesheet:

#blok {
  top: 0;
  left: 0;
  position: fixed;
  z-index: 999;
  background-color: #000;
  color: #000;
  width: 1000px; 
  height: 1000px;
  display: block;
    
}

Ik krijg nu een soort van klein blok over alles heen en helemaal linksboven aan, dat is prima, maar wat ik ook probeer, het wordt niet beeldvullend en dat is wat ik wil.

[ Voor 11% gewijzigd door Triumph-Design op 29-07-2009 11:45 ]

woensdag 29 juli 2009 12:01

Acties:

0 Henk 'm!

Joolee

Kun je niet naar éen van de 1000'en graybox klonen kijken om (bijv. met firebug) te zien welke CSS en HTML zij gebruiken?

woensdag 29 juli 2009 12:06

Acties:

0 Henk 'm!

Triumph-Design

Topicstarter

Joolee schreef op woensdag 29 juli 2009 @ 12:01:
Kun je niet naar éen van de 1000'en graybox klonen kijken om (bijv. met firebug) te zien welke CSS en HTML zij gebruiken?

Graybox? je bedoeld lightbox ?

edit: we bedoelen hetzelfde, om antwoord te geven op die vraag, ja en nee.

Ja want dat is wat we ongeveer willen bereiken

en Nee omdat het dan toch wéér een javascript is dat geladen moet worden en ik wilde het juist netjes allemaal in css doen, maar goed, dit begint toch meer en meer de laatste oplossing te worden

[ Voor 38% gewijzigd door Triumph-Design op 29-07-2009 12:11 ]

woensdag 29 juli 2009 12:12

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Maak eens een TEST-CASE met een simpele html, body, 1 element die in je pagina staat met content en een element wat je over je hele scherm wilt hebben. Vervolgens voeg je wat CSS toe en post dat hier tussen [code=html][/] tags.

Of verwacht je dat iemand het hier voor je gaat oplossen? Ik heb hier een kant en klare oplossing liggen (sterker nog: 3 seconden Googlen levert al wat op), maar het is hier geen afhaalbalie

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.

woensdag 29 juli 2009 12:19

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Cyw00d schreef op woensdag 29 juli 2009 @ 11:10:
Houi ook in de gaten dat je de DIV onderin je source zet. De browsers bouwen de website op van boven naar beneden. Dus als je je DIV als laatste neerzet (onderaan je source) dan weet je zeker dat deze bovenop de rest komt te staan.

Dit is niet nodig zolang je hard een z-index opgeeft. Zonder z-index wordt er inderdaad gesorteerd op volgorde in het document, maar voor een absoluut gepositioneerd element met z-index maakt het dus niks uit of deze bovenaan of onderaan je document staat.

Snap dus ook niet wat het probleem is, want veel simpeler dan een elementje in je pagina knallen met position: absolute kan niet volgens mij.

Test-caseje zou idd fijn zijn.

[ Voor 13% gewijzigd door Bosmonster op 29-07-2009 12:20 ]

woensdag 29 juli 2009 12:22

Acties:

0 Henk 'm!

Noork

Belegger.nl en beursduivel.be behoren tot de grotere sites voor beleggers in Nederland. En deze hebben een developer die een vraag moet stellen op het t.net forum en niet weet wat een testcase is? Ik vind het maar vreemd klinken.

Valt trouwens redelijk wat te vinden op Google. Zie bv: http://snook.ca/archives/html_and_css/content_overlay_css/

woensdag 29 juli 2009 12:24

Acties:

0 Henk 'm!

BCC

Het moest goedkoop denk ik

Na betaling van een licentievergoeding van €1.000 verkrijgen bedrijven het recht om deze post te gebruiken voor het trainen van artificiële intelligentiesystemen.

woensdag 29 juli 2009 12:28

Acties:

0 Henk 'm!

Triumph-Design

Topicstarter

Let op:

* Reageer ontopic, plaats geen onzinnige berichten en ga niet flamen of uitlokken (trollen).

Maar goed, het is al gelukt, bedankt voor alle reacties en jullie precious time!

woensdag 29 juli 2009 12:33

Acties:

0 Henk 'm!

Plague

Wat je in feite wilt is een full-screen div die over al je andere content heen gaat. Hiervoor is helaas geen pure CSS oplossing i.c.m. DIV's. Je zult een klein Javascriptje moeten schrijven (of gebruik maken van Prototype, wat al op je site staat) om de hoogte en breedte van de pagina/viewport op te vragen. Vervolgens zet je die hoogte en breedte op je div, middels JS.

Triumph-Design schreef op woensdag 29 juli 2009 @ 12:28:
Let op:

* Reageer ontopic, plaats geen onzinnige berichten en ga niet flamen of uitlokken (trollen).

Maar goed, het is al gelukt, bedankt voor alle reacties en jullie precious time!

Kun je dan ook vertellen hoe je het hebt opgelost? Da's misschien ook wel handig

Edit 2: ik zie dat hij nu niet beeldvullend is. Althans niet in FF3.0. Hij is wel volledige breedte, maar niet hoogte, dus niet beeldvullend. Ik gok dat je dat eigenlijk wel wilt.

[ Voor 44% gewijzigd door Plague op 29-07-2009 12:35 ]

woensdag 29 juli 2009 13:22

Acties:

0 Henk 'm!

Noork

Het kan aan mij liggen. Maar mis ik nu de linkerkolom in Firefox? In Opera en IE8 zie ik althans 3 kolommen. In FF3 slechts 2 met rechts nog ruimte voor de 3e kolom.

Waar zou je trouwens de overlay moeten krijgen? Moet ik ergens op klikken?

woensdag 29 juli 2009 13:33

Acties:

0 Henk 'm!

Plague

Noork schreef op woensdag 29 juli 2009 @ 13:22:
Het kan aan mij liggen. Maar mis ik nu de linkerkolom in Firefox? In Opera en IE8 zie ik althans 3 kolommen. In FF3 slechts 2 met rechts nog ruimte voor de 3e kolom.

Waar zou je trouwens de overlay moeten krijgen? Moet ik ergens op klikken?

Nog nergens. Even outlinen met de DOM inspector, dan zie je de div zitten.

woensdag 29 juli 2009 13:37

Acties:

0 Henk 'm!

curry684

left part of the evil twins

Triumph-Design schreef op woensdag 29 juli 2009 @ 12:28:
Let op:
* Reageer ontopic, plaats geen onzinnige berichten en ga niet flamen of uitlokken (trollen).

Onze collectieve verbazing uiten over dat iemand die de fundamentele basisbeginselen van HTML en CSS niet eens beheerst een redelijk grote website mag onderhouden valt imho niet echt over trollen - misstanden in webdesignland komen hier vaak genoeg on-topic langs.

Professionele website nodig?