menubalk veranderd

Status
Niet open voor verdere reacties.
R

rob1970

Gebruiker
Lid geworden
14 jan 2012
Berichten
296
Ik ben bezig met een website. Die staat even hier: http://met-rob.com/d3signo2/

De indexpagina moet een splitscreen pagina worden.

Maar nu komt het. Er moet een menubalk boven komen zoals hier te zien is: http://met-rob.com/d3signo2/index2.html

Zodra ik de menubalk van deze pagina boven het splitscreen zet komt het er echter zo uit te zien: http://met-rob.com/d3signo2/index3.html

Het logo staat nu ineens gecentreerd en boven de menupunten. Ook op een mobiele telefoon werkt uit uitklapmenu ineens niet meer.

Ik denk dat de css stylesheet van het splitscreen een conflict geeft met de css van de website.

Hier de css van het splitscreen:
Code: 
@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Francois+One|Play');

html, body, section {
    height: 100%;
}
body {
    color: #fff;
    text-align: center;
}
div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.xop-container {
    display: flex;
}
div {
    flex-direction: column;
    justify-content: center;
}
 
.xop-left {
	background: url([url]http://met-rob.com/pic03.jpg);[/url]
	background-size: cover;
	background-position: center;
	flex: 1;
	padding: 10px;
	transition: all .2s ease-in-out;
	text-transform: uppercase;
	margin: 0%;
}
 
.xop-right {
	background: url([url]http://met-rob.com/pic04.jpg);[/url]
	background-size: cover;
	background-position: center;
	flex: 1;
	padding: 10px;
	transition: all .2s ease-in-out;
	text-transform: uppercase;
	margin: 0%;
}
.xop-left:hover, .xop-right:hover {
    transform: scale(0.95);
}
.xop-container h1 {
    letter-spacing: 2px;
    font-family: 'Francois One', sans-serif;
    font-size: 3rem;
}
.xop-button {
    border-radius: 2px;
    color: #fff;
    background-color: #333;
    padding: 10px 6px;
    margin: 0 1%;
    text-align: center;
  font-family: 'Play', sans-serif;
    text-decoration: none;
  letter-spacing: 1px;
    display: inline-block;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.5s;
    width: 150px;
}
 
.xop-button:hover {
    background: #fff;
    color: #333;
}

@media only screen and (max-width: 600px) {
  .xop-container {
    flex-direction: column;
  }
}

Weet iemand hoe ik ervoor kan zorgen dat de groene menubalk goed werkend te maken is?


mod: de code tussen
Code: 
 en
 gezet.
 
Laatst bewerkt door een moderator:
Hallo Rob,
Volgens mij kun de in de css bij de div met de class logo-wrapper 'display: flex' weghalen. Knipsel.JPG

Succes! Ziet er mooi uit. Groet, Margreet
 
bedankt

Je bent een held!

Ik heb nog 1 ander vraagje.

Er staat onderaan de 2 foto's een witruimte.
Enig idee hoe ik die weg kan krijgen?
 
ja

Dat klopt en dat heb ik inmiddels verholpen.

Maar ik kom van het ene in het andere probleem.

Als mijn laatste probleem opgelost wordt ben ik er helemaal uit denk ik.
Misschien weet jij raad.

Als ik hem op mijn tablet bekijk of laptop worden de 2 foto's in principe goed weergegeven.

Maar op de telefoon verdwijnt de bovenste foto gedeeltelijk onder de menubalk waardoor er niet veel van die foto overblijft.
Ook de hoogte van de menubalk op een telefoon is niet goed maar daar kan ik zelf wel achterkomen denk ik.

Het grootste probleem is dat de bovenste foto op een telefoon bijna verdwijnt.

weergave_computer.jpg

weergave_telefoon.PNG
 
Hoi Rob, je kunt proberen de negatieve margin bij de #top weg te halen (of misschien nog beter: deze in de media-query voor mobiel op 0 te zetten)
Knipsel.JPG
Succes!
 
Bij een breedte van 752 tot 1153 pixels verkleint de rechter foto niet in verhouding tot de linker foto. Op een tablet 768px of als de browser wat smaller staat ziet het eruit als op de screenshot. Op smartphone worden de foto's goed gestapeld.

De html heb ik aangepast volgens Bootstrap 3.
De css die ik her-en-der heb toegevoegd staat inline als style="..." , die kan je verplaatsen naar je stylesheet.

Bij de image heb ik class="img-responsive" toegevoegd.

De footer hoogte is van invloed op de totale hoogte, vandaar de height: calc(100% - 20px);
Geef de footer een vaste hoogte en bereken (of probeer uit) de calc(..) bij section.xop-container

Code: 
<!doctype html>
<html class="no-js" lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--  Timeline Template http://www.templatemo.com/preview/templatemo_427_timeline -->
<title>Timeline - Free Responsive Template</title>
<meta name="description" content="">
<!-- stylesheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/templatemo-style.css">
<link rel="stylesheet" href="index.css">
<!-- scripts -->
<script src="js/vendor/jquery-1.10.2.min.js"></script>
<script src="js/vendor/modernizr.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM"></script>
</head>
<body>

<header class="site-header" id="top">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
      <i class="fa fa-bars"></i>
    </button>
    <a class="navbar-brand" href="#templatemo" style="width: 130px; padding: 7px 0 0 15px; line-height: 1;">
      <img class="img-responsive" src="images/logo.png" alt="">
    </a>
  </div>
  <div class="collapse navbar-collapse" id="main-menu">
    <ul class="nav navbar-nav navbar-right">
      <li><span></span><a href="#top" class="home">Home</a></li>
      <li><span></span><a href="#first-section" class="about">Services</a></li>
      <li><span></span><a href="#second-section" class="portfolio">Projects</a></li>
      <li><span></span><a href="#map" class="map">Location</a></li>
      <li><span></span><a href="#third-section" class="contact">Contact</a></li>
    </ul>
  </div>
</div>
</nav>
</header>

<section class="xop-container" style="height:calc(100% - 20px);">
  <div class="xop-left"><a href="zwembadbouw.html"><img src="leeg.png" width="442" height="200"></a></div>
  <div class="xop-right"><a href="bouwenontwerp.html"><img src="leeg.png" width="442" height="200"></a></div>
</section>

<footer>
<div class="container">
<div class="row footer-content">
  <div class="col-md-12" style="height: 70px">
    <p><br>a<br>b</p>
  </div>    
</div>
</div>
</footer>

<!-- Javascripts -->
<script>
function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(40.7828839,-73.9652425),
    zoom: 15,
    scrollwheel: false,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("templatemo-map")
  ,mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});
</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/custom.js"></script>

</body>
</html>

screenshot.d3.jpg
 
Laatst bewerkt:
Ik ga er morgen mee aan de gang

Alvast reuze bedankt.

ik laat je weten hoe het afloopt
 
Maar op de telefoon verdwijnt de bovenste foto gedeeltelijk onder de menubalk waardoor er niet veel van die foto overblijft.
Klik om te vergroten...
Je gebruikt een navbar-fixed-top menubalk en die valt over de bovenste foto. Een ander dingetje is de footer die je in beeld wilt houden, die drukt beide foto's omhoog waardoor de bovenste foto verder uit beeld wordt gedrukt.
 
Ben er druk mee bezig en heb nog een vraag.

Kan ik in de css bij een achtergrondafbeelding een link aan die achtergrondafbeelding toevoegen?

Dit is de code:

.xop-right {
background: url(http://met-rob.com/pic05.jpg);
background-size: cover;
background-position: center;
flex: 1;
padding: 10px;
transition: all .2s ease-in-out;
text-transform: uppercase;
margin: 0%;
}

Er zou aan die pic-05 een link naar een de pagina zwembaden.html moeten komen
 
Dat zijn geen stijl-zaken voor CSS. Een link moet je in HTML toevoegen.
 
Ik heb nu een transparante afbeelding (leeg.png) over de achtergrondafbeelding geplaatst. Maar als je nu klikt zie je die afbeelding toch even verschijnen.

Hoe kan ik dat het beste anders doen denk je?
 
@rob1970 wil je "code" tussen
Code: 
 en
 zetten voor de leesbaarheid? Er is ook een drukknopje voor.

RE: Kan ik in de css bij een achtergrondafbeelding een link aan die achtergrondafbeelding toevoegen?
Volgens mij heb je al een <a> in die <div> staan, die werkt gewoon.

Terug naar de basis.
Code: 
<!doctype html>
<html class="no-js" lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Template</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>

<header class="site-header">
<nav class="navbar navbar-fixed-top">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
      <i class="fa fa-bars"></i>
    </button>
    <a class="navbar-brand" href="#templatemo">
      <img class="img-responsive" src="images/logo.png" alt="">
    </a>
  </div>
  <div class="collapse navbar-collapse" id="main-menu">
    <ul class="nav navbar-nav navbar-right">
      <li><span></span><a href="#top" class="home">Home</a></li>
      <li><span></span><a href="#first-section" class="about">Services</a></li>
      <li><span></span><a href="#second-section" class="portfolio">Projects</a></li>
      <li><span></span><a href="#map" class="map">Location</a></li>
      <li><span></span><a href="#third-section" class="contact">Contact</a></li>
    </ul>
  </div>
</div>
</nav>
</header>

<main class="site-main">
  <section class="xop-container">
    <div class="xop-left">
      <a href="zwembadbouw.html"><img src="leeg.png" alt=""></a>
    </div>
    <div class="xop-right">
      <a href="bouwenontwerp.html"><img src="leeg.png" alt=""></a>
    </div>
  </section>
</main>

<footer class="site-footer">
<div class="container">
<div class="row text-center small">
  <div class="col-xs-6">&copy; 2019-2020</div>
  <div class="col-xs-6">Voorwaarden</div>
</div>
</div>
</footer>

<script src="js/vendor/bootstrap.min.js"></script>
</body>
</html>

met dit bestand: style.css
Code: 
/**** structure ****/
html, body {
    height: 100%;
}
.site-header {
    min-height: 55px;
}
.site-main {
    height: calc(100vh - 90px);
}
.site-footer {
    height: 35px;
    padding-top: 8px;
}
@media (min-width: 768px) {
    .site-header {
        height: 90px;
    }
    .site-main {
        height: calc(100vh - 160px);
    }
    .site-footer {
        height: 70px;
        padding-top: 15px;
    }
}
.site-header,
.site-footer {
    background-color: #666;
    color: #fff;
}

/**** photos ****/
.xop-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
}
@media (min-width: 768px) {
    .xop-container {
        flex-direction: row;
    }
}
.xop-left,
.xop-right {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 10px;
}
.xop-left {
    background: url(http://met-rob.com/pic03.jpg);
    background-size: cover;
    background-position: center;
    transition: all .2s ease-in-out;
}
.xop-right {
    background: url(http://met-rob.com/pic04.jpg);
    background-size: cover;
    background-position: center;
    transition: all .2s ease-in-out;
}
.xop-left:hover,
.xop-right:hover {
    transform: scale(0.95);
}
.xop-left > a,
.xop-right > a {
    display: block;
    height: 100%;
}

/**** navbar ****/
.navbar-header {
    background: transparent;
}
.navbar-brand {
    width: 130px;
    padding: 7px 0 0 15px;
    line-height: 1;
}
@media (min-width: 768px) {
    .navbar-brand {
        padding: 22px 0 0 15px;
        line-height: 1;
    }
}
.navbar-brand img {
    width: 100%;
}
.navbar-nav {
    text-align: center;
}
.navbar-nav li {
    position: relative;
    height: 90px;
    z-index: 210;
}
.navbar-nav span {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #cf9c53;
    -webkit-transition: all 250ms ease-in-out;
       -moz-transition: all 250ms ease-in-out;
         -o-transition: all 250ms ease-in-out;
            transition: all 250ms ease-in-out;
    z-index: 200;
}
.navbar-nav a {
    position: relative;
    padding: 0;
    font-family: 'Dosis', sans-serif;
    font-size: 16px;
    line-height: 90px;
    text-transform: uppercase;
    z-index: 211;
    -webkit-transition: all 350ms ease-in-out;
       -moz-transition: all 350ms ease-in-out;
         -o-transition: all 350ms ease-in-out;
            transition: all 350ms ease-in-out;
}
.navbar-nav li:hover span {
    width: 100%;
}
.navbar-nav li a,
.navbar-nav li a:focus {
    background: transparent;
    color: #fff;
    outline: 0;
}
.navbar-nav li:hover a,
.navbar-nav li a:hover,
.navbar-nav li a:active {
    background-color: #cf9c53;
    color: #fff;
}
@media (max-width: 767px) {
    .navbar-toggle {
        border-color: #cf9c53;
        color: #fff;
    }
    .navbar-toggle:hover {
        background-color: #98e361;
        color: #fff;
    }
    .navbar-collapse {
        background-color: #666666;
    }
    .navbar-nav li {
        height: auto;
    }
    .navbar-nav a {
        line-height: 1.435;
    }
    .navbar-nav a {
        padding-bottom: 13px;
        text-align: center;
        border-color: #cf9c53;
        border-top: 1px solid #cf9c535;
    }
}
 
Laatst bewerkt:
Ik ben niet zo ver gevorderd als jullie (wat wel is gebleken, haha)

Maar is dit een antwoord op het probleem wat ik heb met een link toekennen aan een foto of is dit als oplossing voor het probleem met de verdwijnende foto?
 
Je zegt: RE:

Kan ik in de css bij een achtergrondafbeelding een link aan die achtergrondafbeelding toevoegen?
Volgens mij heb je al een <a> in die <div> staan, die werkt gewoon.

Die <a> staat bij de afbeelding "leeg"

Ik vroeg me af of ik de achtergrondafbeelding ook door kon linken naar een pagina zonder gebruik te hoeven maken van de afbeelding "leeg"
 
Bijvoorbeeld het linkje <a href="..."> in "xop-right" voor foto "leeg.png"
Code: 
<div class="xop-right">
  <a href="bouwenontwerp.html"><img src="leeg.png" alt=""></a>
</div>

Zie de styling bij #14 om de totale foto een linkje te laten worden (ipv de bovenste helft).

In het algemeen:
Hoe je van een achtergrond afbeelding een linkje kan maken.
Je maakt van de lege <a> een block element en geef deze een breedte en hoogte.
Code: 
<a class="bg-linkje" href="mijnPagina.html"></a>

.bg-linkje {
  display: block;
  width: 200px;
  height: 100px;
  background: #ccc url('mijnAchtergrond') no-repeat center center;
}
 
Laatst bewerkt:
"Zie de styling bij #14 om de totale foto een linkje te laten worden (ipv de bovenste helft). "

Ik snap werkelijk waar niet wat je hiermee bedoeld.

ik bedoel dat niet gemeen of zo maar ik weet niet wat ik hier mee aan moet doen.
 
Geeft niet, ik heb dit ook, vooral door veel doen, moeten leren ;)
Het viel mij op dat er veel stylesheets en scripts aanwezig zijn. Zolang de basis structuur van de pagina niet in orde is hoef je eigenlijk niet verder te gaan met de pagina. Je gaf het zelf al aan, op de ene plek herstel je wat en op een andere plek gaat het mis. Ter vergelijking, meubelen in een huis zetten heeft niet veel nut als de binnenmuren er niet zijn of op de verkeerde plek staan.

In bericht #14 heb ik een basis structuur gegeven (html + css) voor een juiste indeling van navbar, foto's en footer.

Het antwoord op je vraag - dit stukje html + css in bericht #14 zorgt voor een goed linkje om de foto's
Code: 
<div class="xop-left">
  <a href="zwembadbouw.html"><img src="leeg.png" alt=""></a>
</div>
<div class="xop-right">
  <a href="bouwenontwerp.html"><img src="leeg.png" alt=""></a>
</div>

.xop-left > a,
.xop-right > a {
    display: block;
    height: 100%;
}
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan