• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

positionering div

Status
Niet open voor verdere reacties.

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.359
Waarderingsscore
3
Hoi,

Ik loop tegen een alom oud probleem aan volgens mij. Content die onder een div met "position: absolute" gaat. Ik heb deze codepen gebruikt. De rest van mijn content schuift daar dus (deels) onder. Hoe kan ik er op een mooie manier voor zorgen dat dit niet meer gebeurt?
 
Het is mogelijk om er een lege div met hoogte 100% tussen te plaatsen, dus tussen de bestaande section en jouw content. Die div zorgt er dan voor dat de content netjes onder de section blijft.

HTML:

HTML:
<section>
  <span class="skewed"></span>
</section>
<div class="blankDiv">
</div>
<div id='content'></div>

Extra CSS:

CSS:
#content{
  background-color: green;
  width: 100%;
  height: 100vh;
}

.blankDiv {
  height: 100%;
}
 
Bedankt voor je snelle reactie, @maulem. Ik heb die lege div geprobeerd, maar dat werkte niet. Kan ik de absolute div niet omsluiten met een relative div? Of een andere manier?

Ben zelf nog even gaan klooien en verder gaan kijken. Kwam deze tegen. Die werkt prima. Mijn enige wens zou zijn om de achtergrond vanuit de css aan te roepen. Is dat mogelijk?
 
Laatst bewerkt:
Ik heb net geprobeerd met section op position: relative; maar dat geeft geen verschil. De skewed class zou dan absoluut gepositioneerd moeten worden t.o.v. het startpunt van de relatieve div.

Wat gebeurde er toen je mijn css toepaste? Was de groene div niet zichtbaar?
 
Die groene div was inderdaad niet zichtbaar. Raar. Fijn dat je ook nog een poging gedaan hebt.
 
Hoe kan het dan dat ik de groene div wel zie?

Wat je ook kunt doen is de blankDiv weg laten, en dan de volgende css hanteren voor de div content:

#content{
position: relative;
background-color: green;
width: 100%;
height: 100vh;
top: 100%;
}

Met top: 100% wordt deze div dan relatief t.o.v. zijn normale positie gepositioneerd, en de normale positie zou zijn, vlak onder de section. Door top: 100% wordt de div content dus 100% naar beneden verschoven, zodat hij onder de skewed div komt te staan.
 
Laatst bewerkt:
Ja, dat snap ik ook niet :) De afbeelding laat die goed zien, maar het content-blok niet. Dat lijkt er toch nog steeds achter te staan.
 
Heb je andere html of css gebruikt dan die in de codepen? Zo ja, mag ik die eens zien? Want die content div zie ik bij mij duidelijk wel.

Ik zou trouwens dat javascript weglaten. Als je dat weglaat kun je #content namelijk direct onder de skewed div positioneren, dus top kan dan op 0%, en dan ziet het er zo uit:

60a55b6996804-afb.jpg
 
Laatst bewerkt:
Ik had een op een kopietjes gemaakt van de codepen html en css. De javascript had inderdaad geen toevoeging. Ik ga er morgen weer mee aan de slag. Mocht je ook een idee hebben over die andere optie (met de andere codepen), dan ben ik ook wel benieuwd.

Bedankt alvast voor het meedenken en proberen.
 
Ben zelf nog even gaan klooien en verder gaan kijken. Kwam deze tegen. Die werkt prima. Mijn enige wens zou zijn om de achtergrond vanuit de css aan te roepen. Is dat mogelijk?

Heb je hier een idee over, Maulem?
 
Wil je een foto op de achtergrond of wat bedoel je?
 
In die tweede codepen wordt de afbeelding in de div geplaatst d.m.v. <img>. Ik zou de afbeelding liever als achtergrond van de div hebben via CSS.
 
De spijker op z'n kop, Maulem. Perfect zo!
 
Een vraag. Ik zit vaker in Codepen, dan wijzig ik bijv. css, kan ik die dan ook Saven voor een volgende keer? Ik ben wel ingelogd, maar ik zie nergens een Save button.
 
Een vraag. Ik zit vaker in Codepen, dan wijzig ik bijv. css, kan ik die dan ook Saven voor een volgende keer? Ik ben wel ingelogd, maar ik zie nergens een Save button.
Dat weet ik eigenlijk niet. Het is natuurlijk een pen van een ander die je bewerkt hebt. Wellicht kun je css/html wel kopiëren en er zelf een nieuwe codepen van maken?
 
Ja, ik heb het net gedaan door de source te kopiëren naar een nieuwe codepen (New Pen), en dan is die van mij en dan kan ik die bewaren (Save) en terugvinden onder Your Work. Thanx!
 
Jij ook bedankt. Je hebt me alweer een stuk verder geholpen!
 
Heb je toevallig nog een tip om de content in de skewed div "unskewed" weer te geven?

Ow, de oplossing: section div {transform: skew(0deg, 3deg);}
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan