I want to have an image link at the lower left side of my webpage. I am able to get the link to work but the entire space within the padding is also part of the link. So there is pretty much a big 800px by 800px link on my page when I only want the image itself to be a clickable link. Also, the position needs to be absolute because of the way the entire page is set up. Would anybody be able to tell me now to fix this?
<div id="image_link">
<a href="#">
<img id="image_id" src="../path/image">
</a>
</div>
<style>
#image_link {
padding: 800px 0px 0px 800px;
position: absolute;
}
</style>
It's strange that it creates 800x800 pixels link area for you. padding on the div adds space inside the div, but outside the a, so it shouldn't make the a element larger.
But as you're already using position: absolute;, you should really use top, right, bottom and left to control the position. And it's recommended to set it on the img element directly.
#image_id {
position: absolute;
top: 800px;
left: 800px;
}
Related
I create "Thanks"-page. In the main part of the page i put and .
According to the design, the bottom picture should overlap the button and paragraph, and in order to achieve this I adjust:
position: relative;
width: 100vw;
bottom: 250px;
z-index: 0;
to the image.
As a result, the picture got into the right position, but in the bottom remain free space in parent element.
How to remove this free space and why did it appear.
I'll try to move img in the different parts of code.
I want that if people scroll over the page, the header will keep showing (logo + navigation bar). This is the css code I'm using:
#header_bar
{
margin: 0 auto;
width: 100%;
background-color: #1F1D1E;
height: 80px;
position: fixed;
top:0;
}
But this is what happens now: http://puu.sh/6FiXY.jpg
As you see the header now overlaps the image, how can I fix this? I've tried using margin-bottom / padding-bottom, but margin does nothing while padding makes the background box larger.
How can I fix this?
Supposing your HTML structure looks like
<div id="header_bar">...</div>
<div id="someOtherDiv">...</div>
Add margin-top to the next element after #header_bar
#someOtherDiv {
margin-top:80px; /* 80px because #header_bar is taking up 80px in height. */
}
demo
Since your header has a fixed position all your other elements will not take this into account. You could create a "wrapper" div for all the other content that is positioned 80px from the top. Just adding a margin or moving the element of the most top div might work too as long as it has relative (default) position.
You should be adding a margin to your content tags so that they are not instantly overlapped by the header.
See here: www.jsfiddle.net/cranavvo/5F8EP/
I have the following element in my initial page concept:
http://tinyurl.com/bcmcxp9
The ribbon is a PNG image. What I'd like to be able to do is position this image exactly over the border of a box-shadowed div (representing the page content), without affecting the page width.
I've tried a couple of techniques.
By using position:absolute, I've been able to achieve the visual effect I was looking for, but it brings up the dreaded horizontal scrollbars! I want the edge of the div (not the edge of the image) to represent the edge of the page.
#banner-ribbon {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
position: absolute:
width: 419px;
height: 114px;
left: 700px;
top: 400px;
}
By using a div that sits between the content wrapper and the background, I've been able to position the image in the right place without affecting the horizontal scrollbars (sort of, I might need a little javascript to absolute-position it relative to the center), but I can't raise the image's z-index above its child divs!
#banner-ribbon-wrapper {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
background-position: 90% 400px;
z-index: 70; /* does nothing */
}
Any ideas?
It sounds like the image is extending the boundaries of the page, causing the horizontal scroll bars. One way to fix this may be to set a width for your page and then hide anything that goes outside of it. Something like this may work for you:
body {
width: 100%;
overflow-x: hidden;
}
Example jsFiddle
Give your content div
position: relative
and to your ribbon
position: absolute
right:0
Make sure your image don't extend boundaries uncontrollably.
Working sample on JsFiddle:
http://jsfiddle.net/BrvJk/
I want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?
I'm trying to do something like this:
[{someHeadLineText}{dynamic space }{image}{5px space}]
where the [] indicate the total available width of my content.
Html:
<div class="primaryHeader">
<h2>News</h2>
</div>
Css:
.primaryHeader h2 {
background-color: green; /* the header looks like a box */
color: black;
background: transparent url(../images/edit.png) no-repeat right center;
border: 1px solid red;
}
I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?
I'm afraid I think you can't. You can use either right or a pixel value as the image's x-position but that pixel value will always be relative to the left corner of the bounding box. Adding padding won't help either, it will just extend the bounding box further.
The only solution I know for this is either adding the shift to the image itself, or using an absolutely positioned element (with a slight offset) hovering behind the element - but that would require you know the width and height in advance.
Edit: evil, hacky idea. I have no time to try this out right now, but it should work if the h2 is a display: block.
Give the h2 a position: relative.
Place a div or other element inside the h2 with the following:
position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1; /* I don't know whether this will overwrite the h2's content */
this could lead to the desired effect, I'm not sure as I have not tried.
The element may overlay the h2's other content, in which case you would have to put the rest into a <span> element with position: relative and z-index: 1.
It's really hacky. Better put the padding into the image itself, much cleaner.
Can you add padding pixels in the image itself?
You could ditch the background image and use an image instead.
<div class="primaryHeader" style="padding-right: 5px;">
<img src="../images/edit.png" alt="" style="float: right;" />
<h2>News</h2>
</div>
You can look into CSS3 background positioning. It works in all the modern browsers (not IE, of course).
I'm trying to get some text between two images. The images are positioned correctly, but there are some weird design issues that are cropping up.
Current Page (web page)
Design Plan (jpg)
What I'm trying to figure out is this:
Background must stop before the right edge of the right image (the girl)
Background must extend the height of the right image
Vertical bar underneath left edge of right image.
Text wrapping before vertical bar
Bars to left of bottom text in center
Any help would be appreciated!
I'd advise against splitting the image up, as Aiden suggests. This is messy and not exactly a modern way to go about it. Try something like this:
.top-pic {
float: right;
margin-top: -200px;
}
Change the margin-top assignment to however high you want the image in pixels. The only issue left is to scale the width of the top-text div to accommodate the image. One way to do this would be to set padding-right: 250px; or so to .top-text h1 and .top-text h2.
This is a bit wrong
.top-pic {
position: absolute;
top: -5.7em;
right: -1.5em;
z-index: 1;
}
Cut this image into 2 images (one in the header next to the tabs, and one in the content). Stuff is floating underneath because of your z-index.
In your CSS. What you want is a pretty basic fixed 3-col layout with the text in the middle. I will point you here:
http://layouts.ironmyers.com/
http://www.csszengarden.com/
That is how CSS layouts are done.
If you move the top-pic above your logo and change the styling you can get a similar effect to what you want.
<div class="top-pic">
<img src="index2_files/girlbird.png">
</div>
<div class="logo">
<img src="index2_files/logo-center.png">
</div>
CSS Changes
.top-pic {
float: right;
position: relative;
top: -50px;
right: -25px;
}