I am not an expert web-dev so please bear with me here.
I would like to display a banner style header for a page with the top part taken up by an image that is 275x116 and then a horizontal menu bar (styled using ul items) appearing at 70% from the top of the banner.
How would I set this up so that the banner appears underneath my navigation? Currently, a portion of the left side of my menu bar sits underneath the image but I'd like it to be the opposite so the menu bar is above the image, some thing like this:
============= <start of header> ===========
--------
| img |
| |
| Horizontal menu
| |
--------
============= <end of header> ===========
My css:
#header
{
background-color: green;
border: 0;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 120px;
}
#logo
{
background: green url(images/logo.png) no-repeat scroll 0 0;
margin: 0px 0px;
border: 1px solid white;
left: 20px;
top: 20px;
width: 275px;
height: 116px;
position: absolute;
z-index: -1000;
}
.container {
border:1px solid grey;
margin-left:auto;
margin-right:auto;
width:960px;
}
My Html:
<body>
<div id="header">
<div id="logo">
</div>
<div class="container" id="primaryNavbar">
<ul>
<li>Home</li>
<li>Books</li>
<li>Shows</li>
<li>Movies</li>
</ul>
<div class="clear"> </div>
</div> <!-- end of container -->
</div> <!-- end of header -->
</body>
I thought that setting the position to "absolute" for the logo element and adding in a very low z-index would achieve this but that isn't the case here.
Any suggestions?
Append these items to your existing styles:
#header
{
position: relative; //this will keep your absolute items inside of this container
}
#logo
{
z-index: 1;
}
.container {
z-index: 2;
position: absolute;
}
.container ul li {
float: left;
}
Make the .container float left, position relative and move it around until it's where you need it.
Related
I'm wondering the best approach for creating an overlapping navigation. I guess the easiest way is just to position it absolutely relative to the containing div? Any thoughts on an easy way to position this would be great!
I'm currently considering using a bootstrap button group for the "nav".
This is possible with minimal pure css, and without position absolute.
In order to keep your nav centered, I would recommend some markup along the lines of below (a wrapper around your nav to let you center it up).
Note that I understand you intend to use bootstrap, and you will absolutely be able to do that with what you are trying to accomplish. The below is just pseudo-code to get you the key elements / working example of how this could be accomplished.
jsFiddle
Basic markup:
<div class="nav">
<nav class="buttons">
Button 1
Button 2
Button 3
</nav>
</div>
<div class="content">
Borderered content area.
</div>
Demonstrative CSS:
div.nav {
text-align: center;
z-index: 2;
padding-top: 1px;
}
nav {
display:inline-block;
margin:0 auto;
background: white;
}
nav a {
display: inline-block;
padding: 5px 10px;
border: 1px solid black;
}
div.content {
margin-top: -15px;
z-index: 1;
border: 2px solid red;
min-height: 300px;
}
Note
With this markup, you will end up with about 4px of space between the <a> elements due to the whitespace. See this article: Fighting the Space Between Elements.
My typical solution is to move the elements onto the same line. Not quite as readable, but gets the job done, and doesn't require any other "funky" solutions:
<nav class="buttons">
Button 1Button 2Button 3
</nav>
.header {
background-color: blue;
width: 100%;
height: 200px;
margin-top: 25px;
}
.nav {
position: absolute;
left: 50%;
top: 0;
}
.nav div {
position: relative;
left: -50%;
background-color: yellow;
width: 400px;
height: 50px;
}
<body>
<div class="nav">
<div>
</div>
</div>
<div class="header">
</div>
</body>
or you can go with just one div in the nav bar putting left: 25%
I am trying to make the header menu ontop of the tesseract theme (http://tyler.com/ ) a fixed position, so that if you scroll down one can access all menu elements from any postion on the site.
I have tried a few things and always added position:fixed; to a few css classes of the theme, but nothing happened.
I would be glad, if you could help me out with this issue.
Thanks in advance
Edit this code from position: relative to position: fixed
.home .site-header.no-header-image {
left: auto;
position: fixed;
top: auto;
}
Now to avoid the top content getting hidden:
.home .site-content {
padding-top: 60px;
}
Output
You could try:
.<youClassName>{
position: absolute;
top: 0px;
}
This should fix your menu to the top and it will follow you on scrolling.
Add position fixed to a div not in every element
check this fiddle
HTML
<div id = "menu">
<ul class = "main">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
<div id = "content">
CONTENT CONTENT
</div>
CSS
div#menu {
position: fixed;
background-color: #0088cc;
color: #f8f8f8;
width: 100%;
height: 50px;
}
ul li {
float: left;
margin: 2%;
list-style: none;
cursor: pointer;
}
#content {
height: 1000px;
}
remove position: relative;
add
.home .site-header.no-header-image {
position: fixed;
}
I have a position:fixed div at the top of my page, so that when a user scrolls down the menu always stays at the top.
How do I position another div element underneath the fixed div.
I'm using CSS and HTML.
I'm using a smooth scrolling jQuery and need each section header to appear just under the menu bar.
Something like this — http://codepen.io/sergdenisov/pen/pJyMGb:
HMTL:
<div class="menu">
<div class="menu-item">Home</div>
<div class="menu-item">About</div>
<div class="menu-item">Demo</div>
<div class="menu-item">Contact</div>
</div>
<div class="menu-item menu-item_sub">Contact</div>
CSS:
body {
height: 2000px;
}
.menu {
position: fixed;
background: blue;
width: 100%;
}
.menu-item {
display: inline-block;
padding: 30px;
}
.menu-item_sub {
position: fixed;
left: 0;
top: 60px;
}
Do everything in absolute position domain.
.1(class){
position: absolute;
left: 10px;
top20px;
}
Like above classify each object with a class and set their position.
Trying to float a box on the bottom of this image slider. Essentially the slider will have a title and caption but I also want to have a box at the bottom of the image which will pull in data using PHP.
Anyway, my problem is trying to get the white box with text to sit on the bottom of the image and stay there. If the user decreases screen size the white box should follow and stay on the bottom.
jsFiddle provided: http://jsfiddle.net/fkpe1py6/1/
<div id="homepage-slider-wrap" class="clr flexslider-container">
<div id="homepage-slider" class="flexslider">
<ul class="slides clr">
<li class="homepage-slider-slide">
<div class="homepage-slide-inner container">
<div class="homepage-slide-content">
<div class="homepage-slide-box">Float this box at the bottom of the image.</div>
</div>
<!-- .homepage-slider-content -->
</div>
<img src="http://wpexplorer-demos.com/elegant/wp-content/uploads/sites/83/2012/08/game.jpg" alt="">
</li>
</ul>
<!-- .slides -->
</div>
<!-- .flexslider -->
</div>
<!-- #homepage-slider" -->
CSS (see jsFiddle for full CSS)
.homepage-slide-box {
float:left;
bottom: 0;
margin-top: 10px;
background: #31c68b;
font-size: 1.333em;
font-weight: 600;
color: #212121;
padding: 10px;
background: #fff;
}
Thanks for your help!
I would change a couple of things:
I would place the img tag inside the .homepage-slide-content class div (this will help the div to know the height of the image).
then add some things to your CSS so that your other slide divs mimic this height.
CSS
.homepage-slider-slide{
display:block;
position:relative;
}
.homepage-slider-slide img{
display:block;
}
.homepage-slide-inner {
position: relative;
height:100%;
width:100%;
}
.homepage-slide-content {
display: block;
position: absolute;
top: 0;
left: 0;
bottom:0;
z-index: 9999;
}
.homepage-slide-box {
position:absolute;
bottom: 0;
background: #31c68b;
font-size: 1.333em;
font-weight: 600;
color: #212121;
padding: 10px;
background: #fff;
width: 350px;
}
JS FIDDLE DEMO
remove this css positioning
.homepage-slide-inner {
position: relative;
}
and add this
.homepage-slider-slide {
position: relative;
}
and change position of top: 50px to .homepage-slide-content {bottom : 0}
jFiddle
I have a navigation bar under a header div tag
and a slideshow div afterwards ... as the code shows
<div class="header">
<div id="navbar">
content
</div>
</div>
<div class="container">
<div class="slideshow" id="slideshow">
slideshow content
</div>
</div>
the header and navbar have a fixed position to stay on top of the page when scrolling , the problem is when I scroll my "slideshow" appears on top of the navbar but the rest of the page content does not, how can I fix this ?
CSS styles
.slideshow {
position: relative;
margin-bottom: 10px;
padding: 50px 0 0 0 ;
}
Different CSS sheet for header and navbar
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
}
#ime-nav {
position: fixed;
width: 100%;
z-index: 10000;
background:#FF9900;
}
apparently I just needed to add a z-index to the header, completely overlooked it
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
z-index: 1;
}