I'm having trouble with placing an image in the correct spot in my CSS.
I have links in the left side of the page and would like an image to the top right of the nav bar.
Unsure on how that's done.
like this:
HTML
<nav>
<img src="image.png" alt="image">
</nav>
CSS
nav{
position:relative;
}
nav img{
position:absolute;
top:0;
right:0;
}
You can place it where you want with the bottom, top, right and left properties.
For example, to place the image 10 px from the top and 20 px from the right you can write the following:
top: 10px;
right: 20px;
Related
I have a problem with my webpage. I placed a button on top of an image inside a scrollable <div></div>, and this <div></div> is inside the <td></td> of the table. The button on top of image has the following CSS styles:
border:none;
background-color:transparent;
color:#FFF;
z-index:101;
top:2px;
background-image:url(count.png);
background-size:40px;
width:40px;
height:40px;
padding:0 15px;
font-size:16px;
margin-left:-5px;
cursor:pointer;
position:absolute;
Now the problem is when I scroll down, the button stays on the same position. What I want is when I scroll down the button hides on top together with the image at the same position. How can I make this? Any help would be so much appreciated.
jsFiddle: jsFiddle
The issue that you might be facing is something like positioning. You are position the image position: relative to the div, Not the image. If you wrap the image in a div and then set the position then it will go up too.
However, that is only the issue, try using something like:
<div class="image-div>
<img src="src_to_file.png" alt="photo" />
<button class="button">Button</button>
</div>
You can use this as the css:
.image-div {
position: relative;
}
.button {
position: absolute;
}
Also make sure that .image-div is not the main or parent div, as if it is! The button will float over it, but if the div .image-div is the child, it will slide (scroll).
I'm trying to create in HTML5 a view made of div's that displays in the center of the page while the background is grayed out. Something like the Silverlight child window. I am having a horrible time trying to get this to work.
You can easily do it with some basic css like so. This is just the css part not javascript to animate it or toggle. But it should be enough to get you started.
CSS
.div {
position:absolute;
top:300px;
width:300px;
height:260px;
left:50%;
z-index:1000;
margin-left: -150px; /* negative half the width of the div */
}
.background {
background:#000;
opacity:0.5;
position:fixed:
width:100%;
height:100%;
z-index:999;
}
HTML
<div class="div">
My Content
</div>
<div class="background "></div>
this is to make the page centered with 900px width, you add this to your div element:
width:900px;margin-right:auto;margin-left:auto;
for the background, you need to add the following style to you body element
color:gray;padding:0px;margin:0px;
you have to include a width in order to center an element. margin-right:auto; margin-left:auto; will not work if you did not include a width!
The behavior of my background image is, that the image is always perfectly centered when I resize the browser window. It gets on the top, left, right and bottom the same "distance" to the edge of my browser window.
The CSS:
background-image: url("ipad.jpg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 563.5px 800px;
I have a div overlaying this image and I would like it to behave in the same way like the background image, so that it is always centered above the background image in the same place.
Is that even possible? And if yes. How?
I hope you understand what I want to achive. :)
Thank you very much for your help. :D
It looks like you're trying to center content horizontally as well as vertically, no matter what size the browser window is. If so, try something like this:
Your HTML:
<div class="outer">
<div class="middle">
<div class="inner">
The content that you want centered.
</div>
</div>
</div>
Your CSS:
/* Vertical and horizontal centering */
.outer {
position:fixed;
top:0; left:0;
width:100%; height:100%;
}
.middle {
height:100%;
display:table;
margin:0 auto;
}
.inner {
vertical-align:middle;
display:table-cell;
}
Good luck!
Edit: Here's an example of the above - http://jsbin.com/aguciw
Newb question. I'm trying to use z-index, but it doesn't seem to be working the way I would expect. Here's my code:
<a id="favoritelink" href="#" style="margin-left: 600px" class="addtofavorites" title="Add to Favorites"></a>
<div class="description" style="margin-top: -18px">
Some description
</div>
In css, I have specified a z-index for .description as 1 and for .addtofavorites as 10. #favoritelink has a background image and text that is shifted way off the page (it is essentially an image link). The background of .description still sits on top of the background for .addtofavorites.
I want the .addtofavorites background to be on top.
Here's the css for .addtofavorites and for .description:
.description
{
background:#efefef;
width:600px;
max-height:500px;
padding:12px;
z-index:1;
}
.addtofavorites
{
background:url(img/plus.png) no-repeat center;
background-size:75%;
display:block;
text-indent:-9999px;
width:51px;
height:56px;
margin-right:6px;
z-index:10;
}
You have to use position: relative or position: absolute for z-index to work.
Edit: http://jsfiddle.net/GndRj/4/
Based on your code, but added position: relative and reduced margin-left on .favoritelink so that it shows up in the preview window.
I have a 'main_menu' div which contains a background-image that is repeating on the y-axis. Above this div I have another div which is used for a header. The problem is that the header div has an image which is about 75px in height. I would like to start the text in main_div about 50 px higher from where main_div's background-image actually starts.
I was thinking of something like:
position:absolute; top:-50px;
This doesn't really work.
The question is how do I move the text up, while keeping the background-image at the normal spot.
Thanks
{EDIT}
Here's the CSS
.menu_main
{
background-image:url('../menu_main.jpg');
background-repeat:repeat-y;
width:173px;
padding:5px;
}
.menu_header
{
background-image:url('../menu_header.jpg');
text-align:center;
width:173px;
height:65px;
padding:5px;
}
This is the html
<div class="menu_header">Some Header</div>
<div class="menu_main">
<ul>
<li>Educational Objective</li>
<li>Projects</li>
<li>Class Preparation</li>
<li>Testimonials</li>
</ul>
</div>
So as you can see the header is pretty tall. So I'd like to start the text in the menu_main div about 50px higher up
Use a negative top margin.
.menu_main ul {margin-top:-50px;}
You could move it like you were doing with absolute positioning and move the background down like so:
background:url(someimage.png) repeat-y left 50px;
this will move your bg image so it starts 50px down.
I might be able to help more if you provide a screenshot or more code or a live example...
You could style your UL specifically:
.nav
{
position: relative;
top: -50px;
}
and
<ul class="nav">
...
Or perhaps put the UL in another DIV class="nav".
But you can move the background down (for example by 5 pixels):
background-position: top 5px;