I'm trying to make an image under a title on the top left but the image doesn't want to cover the left side.
I changed the position to position: absolute, made the margin and padding 0, inspected the HTML page and can't see anything that can influence this image.
The HTML:
<div class="header">
<div class="container">
<div class="row">
<div class="col">
<h1>Dillan Robbertze<h1>
<img src="mountain-og.jpeg">
</div>
</div>
</div>
</div>
The CSS:
.header img{
height:Auto;
left:0;
margin:0;
padding:0;
position:absolute;
width:100vw;
z-index:1;
}
Expected Results: Image is under the title top left.
Actual Results: There is a white space left and top of the image.
EDIT: I added top:0; thanks to #Somesh Mukherjee. The image moved up, but there is still a left space that shouldn't be there.
add a class to the parent div element. and add position relative to it.
.myNewClass {
position: relative;
}
also, make sure your parent elements don't have margin and padding. for that, you can use a CSS reset like this:
* {
margin: 0;
padding: 0;
}
though this will make sure all of your elements don't have any margin or padding so you need to specify all you need by yourself. you should put this at the top of your CSS file if you want to use it.
You have not specified the top attribute
.header img{
height:auto;
left:0;
top:0;
margin:0:
padding:0;
position:absolute;
width:100vw;
}
why don't you try:
top: -28px;
position:relative;
Helped me once, or twice in similar situations.
Related
I have been looking for an answer to this question all over the interwebs, but I just can't find the answer.. I have a transparent header filled with a background image that is the same as my background, and I want my main div to scroll underneath it so the text is hidden. Here is the HTML:
<body>
<div class="wrapper">
<div class="top">
<!-- This is my header -->
</div>
<div class="main">
[.....]
</div>
And here is the CSS:
.top {
background-image:url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
margin-top:0px;
height:100px;
width:1000px;
margin-left:auto;
margin-right:auto;
vertical-align:central;
padding-left:0px;
padding-right:opx;
}
.main {
position:absolute;
top:100px;
bottom:20px;
left:0;
right:0;
width:990px;
margin:0 auto;
padding-top:10px;
padding-left:5px;
padding-right:5px;
z-index:-1;
}
I have made a jsFiddle which can be found here: http://jsfiddle.net/qcaJJ/. Can you please help me out on how to get this working? Thanks in advance!
ps. Please don't mind the footer, I've used the footer from another page of mine, I don't want this one on this page :p
pps. If anyone knows a way to let the nav stay on it's place and the main2 div scroll, you're my hero! Kinda new to HTML and CSS..
In addition to using fixed position for the header, as the other answers pointed out, you're also using a background image with transparency, so when the main section scrolls underneath, you still see it. You need to add a background color like so, to make sure that the header div covers over what's scrolling underneath:
.top {
background: #fff url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
See my JSFiddle here: http://jsfiddle.net/qcaJJ/3/
You need a fixed position for your header rather than an absolute positioning for all the rest of your page.
.header{
position:fixed;
top:0;
left:0;
width:100%;
height:100px;
background:red;
}
.content{
margin-top:100px;
font-size:180%;
}
The top must be position:fixed for that to work. This ensures that it is always stuck at the top of the screen.
You may also want to set the z-index to something like 1000 so that it always stays on top of everything else.
I have a problem with a box-shadow, being obscured by another div.
Here is my code:
HTML-
<div id="wrap">
<div id="header">
<div id="nav"></div>
</div>
<div id="main_content"></div>
<div id="footer"></div>
</div>
CSS-
body{
margin:0;
}
#wrap{
margin:0 auto;
width:84%;
}
#header{
background-image:url(img/header_pattern.png);
background-repeat:repeat;
margin:0 auto;
width:100%;
height:170px;
box-shadow:5px 5px 5px black;
z-index:1;
}
#main_content{
background-image:url(img/main_pattern.png);
background-repeat:repeat;
width:100%;
min-height:700px;
height:100%;
z-index:2;
}
Screenshot-
http://i.stack.imgur.com/TfDyi.png
How can I make it so that the shadow is not "stacked under" (on the z-axis), and hence obscured by, the #main_content div, but still inside my #wrap?
Thanks.
No, I don't just wan't to push the #main_content down.
Just add:
position: relative;
To #header{
Example:
http://jsfiddle.net/kJajC/
You need to "position" an element, if you want to "stack" it differently on the z-axis using z-index.
Note that if you don't actually want to change its position on the x/y plane, then just specify that it is position:relative; without any of the top, bottom, left or right x/y offsets and it'll be positioned on the x/y plane where it would've been laid down statically anyway.
From MDN on adding a z-index:
Warning! z-index only has an effect if an element is positioned.
I found their series of articles Understanding CSS z-index really helpful with this stuff.
Is there a better way to align something in the bottom right of a cell?
I have a div which only contains a background image, 10px by 10px. I am using the following styles to put it in the bottom right corner. (The cell I have it in is 40px high.)
Doing it this way causes me to lose the 30px above the div. (I'm also using it as something to click, so I can click anywhere on the right instead of only the bottom corner of the cell.)
.time_note { float:right; width:20%; min-height:40px; display:block;
margin-right:-5px; }
.time_note { background:url('/images/sheet/note_marker.png') no-repeat;
background-position:bottom; }
If this could also be done NOT using margins, that would be great.
Example Image:
You should make your wrapping class position:relative; and then whatever you have inside you can position absolutely position:absolute; bottom:0; right:0;
For example
HTML:
<div class="wrapper">
<div class="arrow"></div>
</div>
CSS:
.wrapper
{
width:100px;
height:100px;
position:relative;
}
.arrow
{
width:10px;
height:10px;
position:absolute;
right:0px;
bottom:0px;
}
You could position: absolute, and bottom: 0; right:0; to place it on the bottom right of the parent element (which needs position: relative;). Of course, this has the danger of overlapping some other info in that element.
try:
background-position:bottom right;
I believe what you are looking for is this, you just need to modify it to be on the right
Sticky footer
I have a <div> containing an image and some text. The image is supposed to come at the left corner and the text is supposed to come in the center of the <div>. But the text is coming off a little off-center to the right due to the width of the image.
How do i fix it??
<header>
<img id="searchBoxProp" src="/resources/images/searchBoxProp.png">
<div class="title">RECIPE SEARCH</div>
</header>
header #searchBoxProp { margin: -16px 0 0 2px; width: 43px; float: left; }
header .title { text-align: center; margin-left: 0 auto; }
You could set the image as background of the <div class="title"> and then set text-align:center in order to align the text properly.
The HTML could be just:
<header>
<div class="title">RECIPE SEARCH</div>
</header>
And the CSS:
div.title {
background-image:url('/resources/images/searchBoxProp.png');
background-repeat:no-repeat;
text-align:center;
}
You will also need to set a fixed height (equal to the image), and finally set the width you wish.
Set header to position:relative, and #searchBoxProp to position:absolute. Absolute positioning takes the element out of the layout, so it won't affect the text postion. The relative positioning on header makes sure that #searchBoxProp is positioned relatively to header, instead of the browser window.
header {
position:relative;
}
#searchBoxProp {
position:absolute;
left:0px; /* set to your needs */
top:0px; /* set to your needs */
}
Best practice is to use a background image however if not you can use position absolue like this.
header{position:relative;}
header .title { position:absolute; width:100%; display:block; text-align:center; }
I'm stuck with a vertical align issue. I have 2 divs. First one has auto height (depends on the browser size), the other one has fixed height and is positioned at the bottom of page. Also, the second div needs margin.
An exact example of what I want to do:
http://img199.imageshack.us/img199/9569/79106387.jpg
I tried:
<html>
<body>
<style>
* { margin: 0; padding: 0; }
body { background: #a7daf6; }
</style>
<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6"> </div>
<div style="width:200px; height:40px; position:absolute; background:#eee; bottom:0; opacity:0.6"> </div>
</body>
</html>
but I can't give margin to second div. Any ideas?
try to add this for first div:
<div style="width:200px; position:absolute; top:0px; bottom: 42px; background:#000; opacity:0.6"> </div>
and remove margin-top from second one
If I understand correctly, you can simply apply to the first <div> this style: top:-42px.
If you need content inside the <div>, you can add another <div> with padding-top: 42px.
Like this:
Live Demo
<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6; top:-42px">
<div style="padding-top:42px; color:#fff">hello</div>
</div>
Giving any element an absolute position will remove it from the flow of the document.
Not matter what the margin is other elements will not be affected.