slideshow gaat over menubalk heen

Status
Niet open voor verdere reacties.

rob1970

Gebruiker
Lid geworden
14 jan 2012
Berichten
296
Ik heb met behulp van het programma :"wowslider" een slideshow gemaakt.

De website waar deze opstaat heeft als je naar beneden scrolt een menubalk die bovenaan de pagina zichtbaar blijft.

Alle tekst en foto's lopen daar dan onderdoor as je naar beneden scrolt.

Nu zit er onderaan een slideshow (gemaakt met wowslider) die over de menubalk heenloopt.

Weet iemand hoe ik ervoor kan zoregn dat deze ook onder de menubalk doorgaat?

Dit is de betreffende pagina: http://met-rob.com/huubloeffen/boomgaard7.html
 
wowslider heeft een z-index. Geef de header (waar het menu in zit) een hogere z-index en het is opgelost

Code:
.header-wrapper {
    z-index: 100;
}

Suc6. Have fun.
 
bedankt

Het werkt perfect.

Superbedankt.

Heb nog een ander vraagje, misschien weet jij dit ook.

Ik heb bovenaan de pagina een opsomming van een aantal kenmerken van een bepaald huis:
In word kun je met de "tab toets" keurig dingen uitlijnen (zie onderkant screenshot)

Vroeger deed ik dit in dreamweaver door het maken van kolommen, maar dat is geloof ik heel erg achterhaald.

In het screenshot zie je de situatie boven zoals deze nu is.
Hoe krijg ik het zoals het eronder staat?
Ook rekening houdend met weergave op mobiel?

Schermafbeelding-2018-10-22-om-23.57.24.png
 
De table mag in een goede website alleen nog voor echte tabellen worden gebruikt. Laat dit nu een echte tabel zijn :)
Code:
<table class="kenmerken">
  <tr><td>Soort woning</td><td>Woonhuis</td></tr>
  <tr><td>Type woning</td><td>Vrijstaande woning</td></tr>
  <tr><td>...</td><td>...</td></tr>
</table>

/* hieronder bij [B]max-width[/B] de afmeting op tablet/desktop */
.kenmerken {
  width: 100%;
  max-width: 450px;
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid #999;
}
.kenmerken * {
  box-sizing: border-box;
}
.kenmerken th, .kenmerken td {
  vertical-align: top;
  padding: 4px 6px;
  border: 1px solid #999;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  color: #2575b5;
}
/* smartphone */
@media (max-width: 767px) {
  .kenmerken {
    overflow-x: auto;
  }
  .kenmerken th, .kenmerken td {
    font-size: 14px;
    line-height: 1.4;
  }
}
/* ongelijke kolommen */
.kenmerken td:nth-child(odd)  {
  width: 40%;
}
.kenmerken td:nth-child(even) {
  width: 60%;
}
Er zijn andere oplossingen (bijv. met flex) maar de table heeft handige eigenschappen voor tabellen. Waarom moeilijk doen als het goed en makkelijk kan.
Als je geen borders wilt kan je ze er gewoon uithalen.

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan