Here is the fiddle. I am making a grocery list web app, and I am making the top div a fixed position. When I do this, the div seems to overlap the rest of the page. I have tried using two positions in the css (position: relative; position: fixed) but this doesn't let the div stay fixed.
CSS (for the div):
#top {
width: 100%;
height: 40px;
background: #96f226;
text-align: center;
font-size: 30px;
color: #252525;
position: relative;
position: fixed;
}
HTML (for the div):
<div id='top'>Kitchen List</div>
Wrap your content with div and give it the margin-top to the same height as your fixed content.
SEE DEMO HERE
HTML
<div id='top'>Kitchen List</div>
<br />
<div class="container">
<input type='text' id='input'>
<button id='click'>Add</button>
<ol></ol>
<div id='error'>Please enter a grocery item
<br />
<button id='eb'>Close</button>
</div>
</div>
CSS
.container {
margin-top: 50px;
}
You need to add another div to wrap the content with a margin-top.
DEMO
http://jsfiddle.net/sZaxc/8/
HTML
<div id='main'>
<!-- inputs etc -->
</div>
CSS
#main {
margin-top: 50px;
}
I also added a z-indexand top: 0to your #top-div - just in case.
It's because you have two positions. Remove one and make it:
#top {
width: 100%;
height: 40px;
background: #96f226;
text-align: center;
font-size: 30px;
color: #252525;
position: fixed;
}
Related
I have a site that has a top navigation bar, a header, a sidebar and a content body next to the sidebar. The header, sidebar, and content body are positioned absolutely so that they don't move when you navigate to other pages that are using the same template. The sidebar and content body have scroll bars. The header and sidebar are always visible even with scrolling. This works great as shown in the demo. But suppose the top navigation changes height. Then the vertical alignment is off. Since this site is using a global top navigation that's used in other sites as well, the top navigation can change at any moment. When it does change, this layout will not be future proof. Is there a way to make this future proof?
What I have currently:
http://codepen.io/codingninja/pen/nKwox
body {
margin: 0;
padding: 0;
}
.content {
/*position: relative;*/
}
.top-nav {
background: #000;
height: 42px;
color: #fff;
}
.header{
position: absolute;
height: 100px;
width: 100%;
background: #ddd;
}
.sidebar {
position: absolute;
top: 142px;
left: 0;
bottom: 0;
background: #aaa;
overflow-y: auto;
overflow-x: hidden;
width: 100px;
}
.body {
position: absolute;
top: 142px;
right: 0;
left: 150px;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
}
What happens when the top nav changes height:
http://codepen.io/codingninja/pen/nICzK
.top-nav {
background: #000;
height: 100px;
color: #fff;
}
Do you mean this:
Css3 has a Calc() Function
Height: Calc( 100% - 100px )
Instead of absolutely positioning everything you can make use of display:table to achieve the layout you want. Using the following html
<div class="table">
<div id="top-nav" class="row">
<div class="cell">top-nav</div>
</div>
<div id="header" class="row">
<div class="cell">header</div>
</div>
<div id="content" class="row">
<div class="cell">
<div class="table">
<div id="side-bar" class="cell">
<div class="overflow">
sidebar
</div>
</div>
<div id="body-content" class="cell">
<div class="overflow">body-content</div>
</div>
</div>
</div>
</div>
</div>
And Css
html,
body,
.table {height:100%; padding:0; margin:0;}
.table {display:table; width:100%;}
.table .row {display:table-row;}
.table .cell {display:table-cell;}
#top-nav {height:42px;}
#header {height:100px;}
#content {height:100%;}
#side-bar {width:100px;}
.overflow {height:100%; overflow:auto;}
Example
You will notice that when your top nav grows, your main content area will shrink. You will also not get into a positioning / z-index nightmare
I found a solution that involves a line of javascript to set top to the calculated height based on the height of the top nav and the header.
$(".sidebar, .body").css('top', topnavheight+100);
Okay so I've started making myself a website for a project that I'm working on. I'm currently sorting out the layout for my website but am stuck on the navbar.
I want my navbar to span 100% of the website, and horizontally/vertically center my buttons (images).
What I've got works ... but I'm just wondering if I'm doing it the most efficient way?
Here is my html.
<div id="wrapper">
<div id="header">
<div id="navbar_left">
</div>
<div id="navbar_buttons">
<img src="../Originals/button_home.png" />
<img src="../Originals/button_logo.png" />
</div>
<div id="navbar_right">
</div>
</div>
</div>
Here is my CSS:
#wrapper {
width: 100%;
margin: 0 auto;
padding: 0;
}
#header {
height: 123px;
width: 100%;
background-image: url(../../Originals/header_background.png);
}
#navbar_left {
width: 25%;
height: 123px;
float: left;
}
#navbar_buttons {
height: 123px;
width: 50%;
float: left;
line-height: 123px;
text-align:center;
}
#navbar_buttons::after {
content: ".";
visibility: hidden;
}
#navbar_right {
width: 25%;
height: 123px;
float: left;
}
Check out this jsFiddle for one example of how you could simplify your markup and CSS. It makes use of inline-block for your images.
HTML (using the header element):
<div id="wrapper">
<header>
<img src="http://placehold.it/200x100" />
<img src="http://placehold.it/200x100" />
</header>
</div>
And CSS:
header {
text-align: center;
background: #222;
}
header img {
display: inline-block;
vertical-align: bottom;
}
Note that a div is display: block by default, so you don't need to specify the width of 100%: it will fill the available width. Similarly, you don't need to declare a margin or padding as they aren't doing anything.
I'd also avoid declaring a fixed height if you can avoid it: just let your parent div expand to the height of its contents.
HTML:
<div class="epBtn">
<span class="thumbnail">
<img src="episodes/1.jpg" />
</span>
<span class="play">Episode 1</span>
</div>
What can I do, CSS-wise, to make .thumbnail and .play appear next to each other without using float?
I have modeled what I believe you are trying to accomplish at the address below. It is accomplished by setting the area for the thumbnail (the left in this case) as margin space in the container, then absolutely positioning the thumb to center within the that container. Since the height of the container is generally known (via the thumb) you can then center the relative content vertically using the top css property. Since the container is also position relative the absolutely positioned contents will be absolute to it.
JSFiddle
.epBtn {
/* These are cosmetic except for height, which you should know. */
max-width: 170px;
margin: 10px;
height: 60px;
background-color: #eee;
border: 1px solid #ccc;
position: relative;
font-family: arial;
}
.play {
top: 20px;
margin-left: 65px;
position:relative;
}
.thumbnail {
position: absolute;
top: 5px;
left: 5px;
}
Please let me know if this what you had in mind.
Use inline-block:
<div class="epBtn">
<span class="thumbnail">
<img src="episodes/1.jpg" />
</span>
<span class="play">Episode 1</span>
</div>
CSS:
.thumbnail, .play { display: inline-block; vertical-align: middle; }
I've got a question regarding positioning of two objects: image and div. I want bg2.png image to stay under div. I keep encountering problem with image pushing div down by img's height. How do I avoid that?
I tried pushing down image with "top:" value but of course it leaves me with empty area above div. Also I tried adding negative "top:" value and relative position to "maincontent" div but again it left me with empty area, only difference was that this time it was under the div.
HTML:
<body>
<img src="./images/bg2.png" class="bgimg" />
<div id="maincontent">
</div>
</body>
CSS:
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
Thanks in advance.
edit - what I'm trying to achieve:
Click me!
2 solutions:
Change your HTML structure:
<body>
<div id="maincontent">
</div>
<img src="./images/bg2.png" class="bgimg" alt="some">
</body>
or make it as the background-image:
<body>
<div id="maincontent">
</div>
</body>
#maincontent {
background: url(./images/bg2.png) no-repeat 0 100%;
padding-bottom: height_of_image_in_px;
}
<style>
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
</style>
<body>
<div id="maincontent">
<img src="./images/bg2.png" class="bgimg" alt="some info about image here">
</div>
</body>
if you want that image inside the div use this code. or if you want make that image background of that div use css background property
I want to build CSS popup (or block) from three elements (top, middle, bottom).
I have always do it in simple way but there was no text area above the top/bottom part.
Now i have to build a custom background but don't have any idea how. Height of popup (block) should be dependent of content.
Is it possible to do without any JS hacks?
Slice it into nested boxes etc.
What i've tried is to create a container first, the a div for the arrow, then the content (with your background gradient) and a wrapper for the content (with the red background) and the content inside.
HTML
<div class="popup">
<div class="arrow"></div>
<div class="content">
<div class="wrapper">
<div class="top">Content top</div>
<div class="red-area">Your main content</div>
<div class="bottom">Bottom</div>
</div>
</div>
</div>
Now you've a nice html basis, with which you can play with floating, padding, margin, background-colors and rounded corners, like this:
CSS
* { margin: 0; padding: 0 }
body { background: #eee; padding: 50px; }
/* .popup { width: 250px; } */ /* If you wanto to manually set a width for the whole popup */
.arrow {
float: left;
width: 25px;
height: 50px;
margin-top: 10px;
background: white; /* your arrow image here */
position: relative;
}
.content {
margin-left: 25px;
background: white;
background: white url("your/gradient-image.jpg") repeat-x center bottom;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.25);
}
.wrapper {
padding: 15px;
background: #ff7f7f;
}
I've floated the arrow to the left, left margin for the content and paddings for the wrapper.
It depends on border-radius and box-shadow which are supported in newer browsers.
If you like to support older browsers, then i recommend you to use more images for the visual effects.
Hope this helps. jsFiddle example
Try this:
-Divide the layout in 3 divs: top/bottom, with a fixed height and the top/bottom image as a background; and middle, using the middle image and repeating the background. Something like:
<!--Container-->
<div class="popup-container">
<!--Top part-->
<div class="top" style="height: 20px; background-image: url(top.jpg);"></div>
<!--Now the middle div with the background repeating only vertically-->
<div class="middle" style="height: auto; background-image: url(middle.jpg);
background-repeat: repeat-y;"></div>
<!--Bottom part-->
<div class="bottom" style="height: 20px; background-image: url(bottom.jpg);"></div>
</div>
Take a look on ColorBox it's so easy to use and u can customize it's css to do whatever you want.
you also able to define the popup content as a content from another page like that:
$.colorbox({href:"simplepage.html"});
Now the popup width will fit to whatever your page have....
it's apowerful tool try it.
I have found simple way to do it!
First create related block, inside content and three absolute blocks. Each of color don't overlaps other! Look at the example:
HTML:
<div class="popup-container">
<div class="content">
test 1<br />
test 2<br />
test 3<br />
test 4<br />
test 5<br />
test 6<br />
</div>
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
CSS:
.popup-container {
position: relative;
}
.content {
z-index: 9999;
}
.top {
position: absolute;
width: 100%;
height: 20px;
background-color: red;
top: 0;
z-index: -1;
opacity: 0.5;
}
.middle {
position: absolute;
width: 100%;
background-color: yellow;
bottom: 40px;
top: 20px; /* height of top */
z-index: -1;
opacity: 0.5;
}
.bottom {
position: absolute;
width: 100%;
height: 40px;
background-color: blue;
bottom: 0;
z-index: -1;
opacity: 0.5;
}
http://jsfiddle.net/bhnuh/5/