PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

image over 2 div heen

Door Jaap evidor op 11-09-2016 20:11
1.971 views
Hey allemaal,

ik probeer het volgende voor elkaar te krijgen.


header en de naviagatie zijn beide divs en relative.

nu wil ik een 3e div welke deels de header overlapt en een deel door navigatie en klein stukje uitloopt onder de navigatie.

Hoe krijg ik dit voor elkaar? heb de 3e div absoluut gemaakt en een z-index gegeven. maar wat ik ook probeer. hij overlapt helemaal niks, of hij komt onder de navigatie de staan, of tussen de header en navigatie in maar overlappen doet die niet.

iemand een idee?

alvast bedankt voor het meedenken :)

mvg
- SanThe -
11-09-2016 20:29
Voorbeeld online?
Hoe ziet de CSS er uit?
Ozzie PHP
11-09-2016 20:30
heb je een voorbeeld in code?
J
Jaap evidor
12-09-2016 13:23
goo.gl/G1tQ1J, hier staat wat ik tot nu toe heb. is een bootstrap template


de bedoeling is dat de pokeball gif. in het midden van de navigatie komt te staan, zonder dat hierbij navigatie bar in hoogte verspringt. maar hij een stuk van de header overlapt en de onderkant een stukje overlapt zoals nu ook al het geval is.

heb op dit moment een z-index toegekend aan de css, aangezien ik daar niet veder mee kan.

- SanThe -
12-09-2016 13:30
Speel eens met de waarden van left en top.
Maak top eens negatief, bv -100px.
J
Jaap evidor
12-09-2016 13:44
- SanThe - op 12/09/2016 13:30:41

Speel eens met de waarden van left en top.
Maak top eens negatief, bv -100px.


op die manier krijg ik hem inderdaad op die positie alleen, zou ik graag willen dat de menu links verspringen, zodat die er naast komen te staan. en niet er onder.
Frank Nietbelangrijk
12-09-2016 23:32
Als de menuitems moeten opschuiven gaat een absoluut geplaatste div niet werken. Je moet de oplossing zoeken in de volgorde van je HTML elementen, bijvoorbeeld door drie divs naast elkaar te plaatsen in een container en die container position: absolute geven.

zoiets: http://codepen.io/anon/pen/qabkaQ

* {
  margin: 0;
}

#header {
  position: relative;
  background-color: brown; 
  font-size: 38px;
  padding: 20px;
  color: grey;
}

#menu {
  position: absolute;
  top: 90px;
  left: 40px;
  border: 1px solid green;
  padding: 10px;
}

.left {
  float: left;
  margin-right: 10px
}

#menu ul {
  padding: 0;
  margin-top: 40px;
}

#menu li {
  list-style-type: none;
  display:inline;
}

#menu a {
  padding: 10px;
  background-color: black;
  color: white;
  text-decoration: none;
  font-weight: bold;
}

#menu img {
  border:1px solid black;
}



<div id="header">
  <h1>This is the header</h1>
</div>

<div id="menu">
  
  <div class="left">
    <ul>
      <li><a href="#">item 1</a></li>
      <li><a href="#">item 2</a></li>
    </ul>
  </div>
  
  <div class="left">
    <img src="https://www.phphulp.nl/img/phphulp-logo.jpg">
  </div>
  
  <div class="left">
    <ul>
      <li><a href="#">item 3</a></li>
      <li><a href="#">item 4</a></li>
    </ul>
  </div>
  
</div>

Reageren

Inloggen om te reageren