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
Related
I want my navigation text to be displayed at the bottom right of the header div but no matter what I try it only wants to align at the bottom of the page or some other position I do not want. I don't understand why this is happening, absolute should refer to the header div, correct?
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial;
scroll: overflow;
}
.header {
margin: auto;
width: 100%;
display: flex;
background: gray;
height: 60px;
}
.header-navigation {
position: absolute;
bottom: 0px;
right: 0px;
}
.container {
margin: auto;
width: 100%;
display: flex;
height: calc(100vh - 60px);
}
.left {
background: #e8edf0;
flex-basis: 45%;
}
.right {
background: grey;
flex-basis: 55%;
}
.content {
margin: 20px;
padding: 20px;
background: white;
}
</style>
</head>
<body>
<div class="header">
<div class="header-navigation">
test
</div>
</div>
<div class="container">
<div class="left">
<div class="content">
</div>
</div>
<div class="right">
<div class="content">
</div>
</div>
</div>
</body>
</html>
You should add position: relative; to header. This will make the .header-navigation consider position from .header when you make it absolute.
.header {
position: relative;
}
.header-navigation {
position: absolute;
}
Now .header-navigation will use position according to .header
absolute should refer to the header div, correct?
Only if header div itself has a position.
When you set the position of one of its children to absolute as you have in this case, the system hunts back up the page to find the first ancestor element that has a position and then it positions the element you are trying to position relative to that.
I have a div that is positioned absolutely in CSS. That div has overflow:auto so sometimes it shows a scrollbar if it has a lot of content. I need to completely overlay that div with another div, this one semitransparent so as to completely cover the first div.
The problem is that when a scrollbar is shown in the outer div, the overlay div does not cover it.
My HTML
<div id="outer">
<div id="content">
1<br/>2<br/>3<br/>4<br/>5<br/>
6<br/>7<br/>8<br/>9<br/>10<br/>
11<br/>12<br/>13<br/>14<br/>15<br/>
</div>
<div id="overlay">
</div>
</div>
My CSS
div#outer {
overflow: auto;
position: absolute;
top: 60px;
left: 20px;
height: 200px;
width: 200px;
border: 3px solid blue;
}
div#content {
background-color: lightgray;
}
div#overlay {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: yellow;
opacity: 0.8;
z-index: 2;
}
Run this here:
http://jsfiddle.net/pTnXF/4/
Any ideas?
Placing the #overlay inside #content and adding a "position:relative" to #content could work.
http://jsfiddle.net/pTnXF/5/
HTML changes
<div id="outer">
<div id="content">
1<br/>2<br/>3<br/>4<br/>5<br/>
6<br/>7<br/>8<br/>9<br/>10<br/>
11<br/>12<br/>13<br/>14<br/>15<br/>
<div id="overlay">
</div>
</div>
</div>
CSS changes
div#content {
background-color: lightgray;
position: relative;
}
jquery
$("#overlay").css("height",($('#outer')[0].scrollHeight));
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.
I'm having some trouble figuring out how to do this. I want to have a wrapper so my site is centered, but one of the header elements needs to stretch all the way to the right edge of the page, but without expanding the width of the page and adding scrollbars.
See here: http://i49.tinypic.com/6rkaxc.jpg (new poster so can't add image)
The blue outline represents the centered wrapper, and the orange box is the header div that I'm trying to get to fit to the right side of the page. I've got it to work using 100% width but it creates a horizontal page scroll since it's making it the same width as it's parent. I want it to expand for users that have higher resolutions so it always fits snug to the right side. I hope this makes sense.
my code looks something like...
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
CSS:
div#wrapper {
margin: 0 auto;
width: 1020px;
position: relative;
}
div#header {
height: 150px;
position: absolute;
left: 510px;
width: 100%;
}
div#left {
width: 510px;
float: left;
}
div#right {
width: 100%;
float: left;
}
I'm pretty new to this stuff so if you notice any errors here or bad practices please point them out! Thanks for the help! :)
Since you want your content to be fixed width, a strategy would be to have containers for both left and right contents. This allows you to use width: 100% for the header which will extend to the end without scroll bars. You then make the header relative to the right container. Here is a jsfiddle you can play with.
Note I made the widths smaller so it would fit in my jsfiddle window.
HTML:
<body>
<div id="wrapper">
<div id="leftContainer">
<div id="left">
This is left
</div>
</div>
<div id="rightContainer">
<div id="header">
This is a header
</div>
<div id="right">
This is right
</div>
</div>
</div>
</body>
CSS:
div#wrapper {
text-align: center;
width: 100%;
position: relative;
white-space: nowrap;
overflow-x: scroll;
}
div#header {
z-index: 1000;
height: 150px;
position: absolute;
left: 0;
width: 100%;
background: green;
}
div#leftContainer {
float: left;
width: 50%;
height: 500px;
display: inline-block;
}
div#left {
float: right;
width: 260px;
height: 300px;
background-color: purple;
}
div#rightContainer {
position: relative;
float: right;
width: 50%;
height: 500px;
display: inline-block;
}
div#right {
width: 260px;
height: 300px;
background-color: yellow;
}
Try this one. I changed the wrapper width to 80%. Not sure if that's ok. But I works well when expanding the page. Moved the header outside of wrapper and also added background color for clarity.
Note 1: right DIV's margin-top is same size as header DIV's height.
HTML
<div id="outerWrapper">
<div id="header">
Header
</div>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</div>
</div>
CSS
div#wrapper {
margin: 0 auto;
width: 80%;
height: 100%;
position: relative;
background-color: #CCCCCC;
}
div#header {
height: 150px;
float: right;
position: absolute;
left: 50%;
width: 50%;
background-color: yellow;
}
div#left {
width: 50%;
height: 100%;
float: left;
background-color: red;
}
div#right {
width: 50%;
height: 100%;
float: left;
margin-top: 150px;
background-color: blue;
}
Hope this helps.
I'm trying to make some decoration outside the main content div,
that would be getting hidden if the window size is small.
I thought for a while and came up with the following markup, (you can copy paste and see it),
and that's best I could think of right now. The problem however is that because I used percentage margins, the decoration gets unstable and shaky while resizing, and sometimes is even stepping on the content div.
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
background-color: yellow;
}
div.content {
display: block;
width: 958px;
height: 400px;
background-color: #CCC;
margin: 0px auto;
}
div.wrap {
margin: 0px auto;
min-width: 958px;
max-width: 1058px;
overflow: hidden;
position: relative;
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
div.left, div.right {
background-image: url(http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg);
width: 50px;
display: block;
height: 50px;
bottom: 0px;
position: absolute;
}
div.left {
right: 479px;
margin-right: 50%;
}
div.right {
left: 479px;
margin-left: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="content">
<-- Content
</div>
</div>
</body>
</html>
So, could you recommend guys for some other way around without using percentage margins, to make it more flexible..? Thanks!
EDIT:
This is what happens in Google Chrome on resize:
As the browser has to re-calculate the margins based on the parent's width changes, this is kind of expected behaviour.
If you want to keep content centralized on the screen without playing with max-width, min-width and margins as percentage, and there won't be any element that should be affected by the .wrap position in the document flow, you could do something like this:
div.wrap {
width: 1058px;
overflow: hidden;
position: absolute;
left: 50%;
top: 0;
margin-left: -529px; /* 1058/2 * -1 */
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
This will centralize the content horizontally in every situation.
Hope it helps.
Clear your floats:
<div>
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<style>
.clear{clear:both;}
</style>