[CSS]element als nep-popup uit de flow halen - Softwareontwikkeling

woensdag 11 mei 2005 14:22

Acties:

Topicstarter

Ik heb de volgende pagina:
http://oisterwijksculptuur.djluc.nl/index.php?id=449

Na een klik op jan janssen verschijnt er een divje. Hoe kan ik dit divje uit de flow halen? Ik heb al geprobeerd om dit te doen middels een float: left en position absolute maar ik krijg het niet voor elkaar. Op dit moment is dit een stukje relevante css:

Cascading Stylesheet:

.tx-oskunstenaars-pi1-kunstenaar-single {
    float: right;
    left: -310px;
    top: -80px;
    width: 600px;
    height: 400px;
    display: none;  
    z-index: 100;
}

Ik heb al wel een alternatieve maar lelijke oplossing bedacht:
Ik laat met javascript na een klik op de naam van de kunstenaar een divje aanmaken:

JavaScript:

//gewoon pseudocode voor het idee
function show(id) {
  var content=document.getElementById('kunstenaar-'+id).innerHTML;
  var popup=document.createElement('div');
  popup.innerHTML=content;
  document.body.appendChild(popup);
}

Zoiets dus maar dit is niet echt een mooie oplossing, ik zou het liever gewoon met CSS regelen.

woensdag 11 mei 2005 14:27

Acties:

BtM909

Watch out Guys...

Hoezo uit de flow halen, met welk doel als ik vragen mag

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 11 mei 2005 14:29

Acties:

djluc

Topicstarter

BtM909 schreef op woensdag 11 mei 2005 @ 14:27:
Hoezo uit de flow halen, met welk doel als ik vragen mag

Zoals je nu ziet valt mijn "nep-popup" binnen de tekst-div. In de tekstdiv staat normaal gesproken alle content. Die div wil ik echter over de site een leggen. Dat wil me dus niet lukken.

woensdag 11 mei 2005 14:32

Acties:

BtM909

Watch out Guys...

Position:absolute gebruiken

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 11 mei 2005 14:36

Acties:

djluc

Topicstarter

BtM909 schreef op woensdag 11 mei 2005 @ 14:32:
Position:absolute gebruiken

Ik heb al geprobeerd om dit te doen middels een float: left en position absolute

Hij staat nu toch even online met een position: absolute; maar ook dit werkt niet.

woensdag 11 mei 2005 14:40

Acties:

BtM909

Watch out Guys...

djluc schreef op woensdag 11 mei 2005 @ 14:36:
[...]

[...]
Hij staat nu toch even online met een position: absolute; maar ook dit werkt niet.

Waarschijnlijk in een parent met een position: relative? Vind je code redelijk ondoorzichtig

, maar je kan die <div> toch helemaal los (bijvoorbeeld einde van je source) te plaatsen?

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 11 mei 2005 14:47

Acties:

djluc

Topicstarter

De CSS code is overigens hier te vinden:
http://djluc.nl/fileadmin...uur/template/res/core.css

Verder is de HTML toch redelijk netjes? De structuur is iets als
<html>
<body>
<div id="layout">
<div id="contenttext">
<divjes met de kunstenaars>

Verder gebruik ik alleen voor de submenu's boven (Li tags) relative positionering.

woensdag 11 mei 2005 14:47

Acties:

BtM909

Watch out Guys...

Check dit simpel voorbeeld:

HTML:

<html>
<head>
<style>
.BtM909{
  border: 1px solid red;
  width: 500px;
  height: 250px;
  position: relative;
}

.BtM909 span{
  border: 1px solid green;
  position: absolute;
  top: 100px;
  left: 100px;
}
.djluc{
  border: 1px solid black;
  width: 500px;
  height: 250px;
/*  position: relative;*/
}

.djluc span{
  border: 1px solid yellow;
  position: absolute;
  top: 100px;
  left: 100px;
}
</style>
</head>
<body>
<div class=BtM909>BtM909
  <span>Parent is relative, dus deze is absoluut tov parent</span>
</div>
<div class=djluc>djluc
  <span>Indien parent niet relative (en dus static) is, absoluut tov. body</span>
</div>
</body>
</html>

Ff snel in elkaar geklapt

offtopic:
added @ msn

[ Voor 12% gewijzigd door BtM909 op 11-05-2005 14:49 ]

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 11 mei 2005 16:09

Acties:

djluc

Topicstarter

Ik heb even wat getest maar heb nog geen oplossing gevonden. Ook iets als dit werkt niet:

HTML:

<html>
<head>
<style>
.BtM909{
  border: 1px solid red;
  width: 500px;
  height: 250px;
  position: relative;
}

.BtM909 span{
  border: 1px solid green;
  position: absolute;
  top: 100px;
  left: 100px;
}
.djluc{
  border: 1px solid black;
  width: 500px;
  height: 250px;
  position: static;
}

.djluc span{
  border: 1px solid yellow;
  position: absolute;
  top: 100px;
  left: 100px;
}

.layout {
    position: relative;
}
</style>
</head>
<body>
<div class="layout">
    <div class=BtM909>BtM909
        <span>Parent is relative, dus deze is absoluut tov parent</span>
    </div>
    <div class=djluc>djluc
        <span>Indien parent niet relative (en dus static) is, absoluut tov. body</span>
    </div>
</div>
</body>
</html>

Eigenlijk ook logisch. Alle div's van het besbetreffende element tot aan de body moet ik dan met static positioneren?

woensdag 11 mei 2005 16:22

Acties:

AkaXakA

Just Kidding...

http://www.blakems.com/sandbox/inline-popups.html

Dat is 'm

http://www.akaxaka.tk/ - "Knowledge is power. Power corrupts. Study hard, be evil." - 4 Jaar GoT en nog steeds niet evil: er moet een verband zijn...

zaterdag 14 mei 2005 13:40

Acties:

djluc

Topicstarter

Ik ben voor de JavaScript oplossing gegaan. Deze konden we kosten-effictief het beste gebruiken. Als ik nog eens tijd over heb kan ik het misschien netter oplossen. Op http://oisterwijksculptuur.djluc.nl/index.php?id=449 is het resultaat te zien. Bedankt voor de hulp. AkaXakA: Ik ga je linkje als ik tijd heb nog eens goed bekijken want dat lijkt inderdaad een oplossing.

Het stukje JS wat werkt:

JavaScript:

var popupid='tx-oskunstenaars-pi1-kunstenaar-popup';
var kunstenaarpopup='';
function startKunstenaars() {
    kunstenaarpopup=document.createElement('DIV');
    kunstenaarpopup.innerHTML='Kunstenaar wordt opgezocht.';
    kunstenaarpopup.setAttribute('id', popupid);
    document.body.appendChild(kunstenaarpopup);
}

function showKunstenaar(uid) {
    if(!document.getElementById(popupid)) {
        startKunstenaars();
    }
    var row=kunstenaars[uid];
    document.getElementById(popupid).innerHTML='<div id="tx-oskunstenaars-pi1-kunstenaar-'+uid+'" class="tx-oskunstenaars-pi1-kunstenaar-single"><div class="tx-oskunstenaars-kunstenaar-single-wrapper"><div class="tx-oskunstenaars-kunstenaar-images"><a href="javascript:closeKunstenaar('+uid+');void(0);">[img]"'+row['image']+'"></a></span><p[/img]'+row['namephoto']+'</p></div></div>';
}