I am trying to do a headbar
the problem is that when I zoom in after a while the list of buttons disappears from screen.
<html>
<head>
<link type="text/css" href="css/css.css" rel="stylesheet">
</head>
<body>
<div id="headbar">
<img src="http://opensource.org/files/osi_symbol.png" style="height:100%;float:left;"/>
<ul>
<li> <a class="linkheaderbar"></a> </li>
<li> <a class="linkheaderbar"></a> </li>
<li> <a class="linkheaderbar"></a> </li>
<li> <a class="linkheaderbar"></a> </li>
</ul>
</div>
<div id="bodypage">
</div>
<div id="footer">
</div>
</body>
CSS code and how the page looks:http://codepen.io/overclock351/pen/qdyoBq
#isherwood was correct.
By removing the overflow:hidden from the #headbar your buttons will show when zoomed in. I got to 500% in Chrome with no problems.
Related
My Code: https://jsfiddle.net/jqno1x6p/
I have this code, at the top, I have a hero element where I would like to place an image at the bottom-right section of the hero element and then overflow into the next section. I am not sure how to accomplish this.
Here is how my Hero element is set up:
<div class="hero-image">
<img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
<div class="hero-text">
<h1>Tennant management, <span class="emphasize">innovated.</span></h1>
</div>
</div>
Not sure what do you mean by overflow into the next section... you can set the overflow:hidden on hero-image class, to hide the overflown portion of the image:
.hero-image {
overflow:hidden; // <-- hide the overflow
}
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav class="navbar">
<span class="brand">tensys</span>
<ul class="nav-list">
<li class="nav-link left">Home</li>
<li class="nav-link left">Our Story</li>
<li class="nav-link right">Services</li>
<li class="nav-link right">Client Portal</li>
</ul>
</nav>
<div class="hero-image">
<img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
<div class="hero-text">
<h1>Tennant management, <span class="emphasize">innovated.</span></h1>
</div>
</div>
</body>
</html>
A different approach (and perhaps better one) would be to fit the image to your page, by setting the image width equal to your page width - the height would be adjusted:
img {
width: 100%;
}
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav class="navbar">
<span class="brand">tensys</span>
<ul class="nav-list">
<li class="nav-link left">Home</li>
<li class="nav-link left">Our Story</li>
<li class="nav-link right">Services</li>
<li class="nav-link right">Client Portal</li>
</ul>
</nav>
<div class="hero-image" style="overflow:hidden">
<img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
<div class="hero-text">
<h1>Tennant management, <span class="emphasize">innovated.</span></h1>
</div>
</div>
</body>
</html>
My two section #wrapper and #stats are both being see as the wrapper by google dev tools. Now this is affecting my development as any changes to the css gets mangled within the two sections.
In google dev tools when i hover over the wrapper content, it shows the div as stats.
I have looked and looked but I cant find anything.
<!DOCTYPE html>
<html>
<head
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/normalize.css">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/responsive.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<header class="main-header">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</nav>
<span class="title">We offer garden building such as trellis and fencing, as well as outdoor lighting, water features and much more</span>
<h1> Garden Construction</h1>
<img class="arrow" src="img/arrow.svg" alt="arrow down">
</header>
<div id="wrapper">
<h2>Our Services</h2>
<section>
<ul id="gallery">
<li>
<a href="img/trellisandfence.jpg">
<p>Trellis and Fencing</p>
<img src="img/trellisandfence.jpg">
</a>
</li>
<li>
<a href="img/light.jpg">
<p>Outdoor garden lighting</p>
<img src="img/light.jpg">
</a>
</li>
<li>
<a href="img/gravelretention.jpg">
<p>Gravel renetion system</p>
<img src="img/gravelretention.jpg">
</a>
</li>
<li>
<a href="img/gardenbuilding.jpg">
<p>Outdoor building such as sheds and cabins</p>
<img src="img/gardenbuilding.jpg">
</a>
</li>
<li>
<a href="img/waterfeature.jpg">
<p>Water features - any size, any style</p>
<img src="img/waterfeature.jpg">
</a>
</li>
</ul>
</section>
</div>
<div id="stats">
<ul>
<li>
<h4>We can organise appointments at your convinence</h4>
<img src="img/appointments.png">
</li>
<li>
<h4>We offer free consulations and quotes</h4>
<img src="img/consultation.png">
</li>
<li>
<h4>We are fully licenced and qualifed with over 25 years experience.</h4>
<img src="img/licenced.png">
</li>
<li>
<h4>We have looked untaken multi-million euro projects</h4>
<img src="img/euro.png">
</li>
</ul>
</div>
</body>
</html>
I've used this tutorial http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/ to create a Sidebar in my _Layout code. I'm trying to have the sidebar overlap anything in RenderBody(). When the sidebar is open on the mobile, it appear behind the images.
Image depicting issue: http://snag.gy/uN9GF.jpg
My Body example code can be found here
http://codepen.io/anon/pen/NxLvEQ
_Layout.cshtml code
<div class="container">
<ul id="gn-menu" class="gn-menu-main">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu">
<li class="gn-search-item">
<input placeholder="Search" type="search" class="gn-search">
<a class="gn-icon gn-icon-search"><span>Search</span></a>
</li>
<li>
<a class="gn-icon gn-icon-download">Popular</a>
</li>
<li><a class="gn-icon gn-icon-cog">Settings</a></li>
<li><a class="gn-icon gn-icon-help">About us</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li>Test Sidebar</li>
<li></li>
</ul>
#RenderBody()
</div><!-- /container -->
<script src="../../Scripts/classie.js"></script>
<script src="../../Scripts/gnmenu.js"></script>
<script>
new gnMenu(document.getElementById('gn-menu'));
</script>
Here's how to fix your problem:
Set z-index: 1; on gn-menu-main. Normally, I'd also tell you to set its position to something other than static, or else the z-index will have no effect. Looking at the site you linked, though, it appears you already have it set to fixed, which is fine.
Wrap #RenderBody() in a container div and set position: relative; on it. The relative positioning ensures that none of the container div's child elements can overlap its sibling elements unless the div itself does-- and we know it won't since its only sibling (gn-menu-main) has z-index: 1;.
Try to adjust the z-index of "gn-menu-wrapper" class.
for example:-
.gn-menu-wrapper{z-index:1}
if this is not working add more value to z-index.
.gn-menu-wrapper{z-index:99999}
I have solved your problem.
You just have to add "z-index:1" in
COMPONENT.CSS
line number - 96
class - .gn-menu-wrapper
add - z-index:1
This is working see the screen shot
<div class="container">
<ul id="gn-menu" class="gn-menu-main">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu">
<li class="gn-search-item">
<input placeholder="Search" type="search" class="gn-search">
<a class="gn-icon gn-icon-search"><span>Search</span></a>
</li>
<li>
<a class="gn-icon gn-icon-download">Popular</a>
</li>
<li><a class="gn-icon gn-icon-cog">Settings</a></li>
<li><a class="gn-icon gn-icon-help">About us</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li>Test Sidebar</li>
<li></li>
</ul>
#RenderBody()
</div><!-- /container -->
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/css/component.css" />
<script src="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/js/classie.js"></script>
<script src="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/js/gnmenu.js"></script>
<script>
new gnMenu(document.getElementById('gn-menu'));
</script>
I have a modal box (CSS) and For some reason I cannot get images in the box to display horizontally, with out messing up the box? when I float the images in the gallery id they leave the modal box?
html
<head>
<title>Design and Development</title>
<link rel="stylesheet" href="main.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat|Ubuntu+Condensed|Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>PERSON</h1>
<h2>Front-End Design + Development</h2>
</header>
<ul id="menu">
<li>ABOUT
</li>
<li>WORK
</li>
<li>CONTACT
</li>
</ul>
<div id="aboutModal" class="modalDialog">
<div> X
<h1>ABOUT</h1>
<img src="images/me.jpg">
<p><strong>Hello!</strong>
<br></p>
</div>
</div>
<div id="workModal" class="modalDialog">
<div> X
<h1>WORK</h1>
<ul id="gallery">
<li> <a href="images/yogasite.png">
<img src="https://lh3.ggpht.com/rIVPZ4wNQ1uWIWoFcnZ-KjjUHfTFskcgwzEoAEqDAb8LjPdtXWM5NLqCLx9BRpEF1Dc=w300">
</a>
</li>
<li> <a href="images/yogasite.png">
<img src="https://lh3.ggpht.com/rIVPZ4wNQ1uWIWoFcnZ-KjjUHfTFskcgwzEoAEqDAb8LjPdtXWM5NLqCLx9BRpEF1Dc=w300" alt="">
</a>
</li>
<li> <a href="images/yogasite.png">
<img src="images/yogasite.pnghttps://lh3.ggpht.com/rIVPZ4wNQ1uWIWoFcnZ-KjjUHfTFskcgwzEoAEqDAb8LjPdtXWM5NLqCLx9BRpEF1Dc=w300" alt="">
</a>
</li>
</ul>
</div>
</div>
<div id="contactModal" class="modalDialog">
<div> X
<h1>CONTACT</h1>
<br>
<br>I am currently looking for work.</p>
<img src="images/06-magnify-icon-32.png">
</div>
</div>
</body>
heres the fiddle https://jsfiddle.net/cpxd63a1/1/
I am not sure why I can't view content beneath my navbar.All I get is blank in my in place of the <h1>Hello</h1>. Would appreciate some guidance for this code in particular, but also any resources to learn more about how to avoid this problem in the future.
<!DOCTYPE html>
<html>
<head>
<title>A random title piece.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../static/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="../static/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container pull-left">
<a class="brand" href="../">Things and Stuff </a>
<div class="nav-collapse collapse" id="main-menu">
<ul class="nav" id="main-menu-left">
<li class="divider-vertical"></li>
<li>
<form class="form-search">
<div class="input- append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">
Search
</button>
</div>
</form>
</li>
<li>
<a id="swatch-link" href="../popular">Example 1</a>
</li>
<li>
<a id="swatch-link" href="../sold">Example 2</a>
</li>
<li>
<a id="swatch-link" href="../new">Example 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<h1>Hello</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/json2.js"></script>
</body>
The content is hidden beneath your header .Wrap your content with a div with class container and than let us know .
Here is a jsfiddle
Jsfiddle with padding
<div class=".container">
<h1>Hellow world</h1>
</div>
And add the followingin your css
.container > h1
{
margin-top:70px;
}
Or you can use the following , I suggest using this one :
.container > h1{
padding-top:70px;
}