I have an image that should be positioned near the bottom of the screen. I have a main image that is the background image and will resize with the browser size. I need the image over the background image to be 20-30px from the bottom no matter what size screen or if the screen is resized. (Image also must be centered.)
I am not sure how to go about doing this. What is the best way to do this?
Here is the code I have tried:
.bottom{
position:absolute;
margin-left: -355px; /* Image is 710 in width */
left:50%;
bottom:-20px;
}
That code has the image centered on the page properly but not 20px from the bottom. Also I have content below the image and I want the content to stay below the image but it currently comes up over the image.
HTML:
<img class="bottom" src="src-path.png" alt="Text" />
<p style="clear:both;"> </p>
<!-- More Content here that consist of img and p tags. -->
I guess to position the image 20-30 px from the bottom you can use css property
margin-bottom:30px; or 20px what ever value suits you.
for aligning at the center use vertical-align:middle Please do share the code that the thing is more clear. Hope I answered it correctly.
CSS Together must look like:-
margin-bottom:30px;
vertical-align:middle;
You better use a CSS file, in which you declare a footer to be at the bottom of your page. Then put your image in your page, with class of that CSS and id of "footer". Clear enough?
Here is the way I finally did this:
CSS:
.image_block {
/* Size of image is where the width/height come from */
width: 710px;
height: 500px;
}
.image_block a {
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
}
.image_block img {
/*Nothing Specified */
}
HTML:
<div class="image_block">
<img src="src.png" alt="Alt Text" />
</div>
Related
I am trying to make a slider. How can I put one image into another image and
put text and a small image in that image(the last one)? I have put one image into another one with no problem by giving position:relative in for main div and giving the second image position:absolute. But the third part (putting small image and text in that image) is tricky. I gave the container of image and text position absolute, but it is positioned out of the image div. Maybe a small example could help. Thanks
#maincontainer{
width:650px;
margin:0 auto;
margin-top: 25px;
position: relative;
}
#image1container
{
width: 650px;
margin:0 auto;
margin-top: 25px;
position: absolute;
top: 95px;
left: 137px;
}
#image2container{
position:absolute;
}
You could try using the background-image CSS property of <div> elements in HTML. Your HTML would look like this:
<div id="maincontainer">
<div id="image1container">
<img src="small-image.jpg" alt="Small image />
<p>Text in image</p>
</div>
</div>
And your CSS would look like this:
#maincontainer {
background-image: url('main-container-image.jpg');
}
#image1container {
background-image: url('image1-container-image.jpg');
}
From here, you could use CSS to position the elements as needed.
I have a header image that repeats across screen, so that no matter the screen resolution the header is always stretched 100%, I have placed the image inside a wrapper div.
Over the top of that DIV I also wish to place the 'logo' such that it is always centred across the top of the screen.
I appreciate this could be done another way and have already tried just having the logo on top of the header in photoshop although i couldn't get the image centred as I would of wished.
Please find my code below:
HTML:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" width="1000" height="200" alt="logo" />
</div>
</div>
CSS:
#wrapperHeader{
position: relative;
background-image:url(images/header.png);
}
#header{
left: 50%;
margin-left: -500px;
background:url(images/logo.png) no-repeat;
width:1000px;
height:200px;
}
Also, I am aware of the properties of margin-left:auto; etc. Although I would be grateful if anyone could explain how to use them appropriately here.
Thanks!
I think this is what you need if I'm understanding you correctly:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" alt="logo" />
</div>
</div>
div#wrapperHeader {
width:100%;
height;200px; /* height of the background image? */
background:url(images/header.png) repeat-x 0 0;
text-align:center;
}
div#wrapperHeader div#header {
width:1000px;
height:200px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width:; /* the width of the logo image */
height:; /* the height of the logo image */
margin:0 auto;
}
If you set the margin to be margin:0 auto the image will be centered.
This will give top + bottom a margin of 0, and left and right a margin of 'auto'. Since the div has a width (200px), the image will be 200px wide and the browser will auto set the left and right margin to half of what is left on the page, which will result in the image being centered.
you don't need to set the width of header in css, just put the background image as center using this code:
background: url("images/logo.png") no-repeat top center;
or you can just use img tag and put align="center" in the div
When ever I develop HTML pages, I get problem with window resize. The page alignment gets disturbed. One element or tag overlaps with the other.I want my page that when I resize,
my page it should remain the same & srollbars should appear.Someone Pls suggest solution.Which style attribute (position, overflow) is good to use for this?
Set a width on the body (or, more preferably, a min-width)
Not sure if this is what you need, but probably:
overflow:auto;
is what you are looking for
i understand i think, the issue is that you place your elements in a relative position(the default for position on any element), so relative to your current screen size. you can change the position to absolute and they will not move, this can cause you to loose control if your not an css ninja. ill show some cool techniques now how to control elements.
hint 1:
wrap your tags! a wrapped element will stay put!
example:
html =>
<div id="box_wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
css =>
#box_wrapper {
margin: /*top and bottom*/5px /*left and right*/ auto; /*this will center your wrapper*/
height: 300px; /*what ever height you want*/
width: 1200px; /*what ever width you want*/
}
.box {
/*what dimensions you want*/
}
this a good way of keeping objects in place, they will never leave the wrapper element if you specify a overflow.
hint 2:
position: absolute; caution this can get messy.
i use position absolute when positioning logos to the corner of a screen so that if you change the size of the screen the logo will still remain in the corner. this is cool cause you dont need a specified width for the parent elements.
html
<div class="header">
<img src="/images/logo.png" alt="page_logo">
<div id="login_button">
/*......*/
</div>
</div>
css
.header {
width: 100%
height: 150px;
border: 1px solid #ccc;
}
.header img{
position: absolute;
margin: 0px; /*position: absolute must have a margin even if its 0*/
float: left;
height: 150px;
}
#login_buttons {
float:left;
position: absolute right;
margin-right: 5px;
}
this example puts a logo on the top left hand side and the login buttons on the right and if you then change the screen size it will keep them where they need to be.
i dont want to write a whole tutorial here but these tips should help in designing solid pages that adapt to multiple screen sizes.
its hard to kinda guess what the issue could be if i cant see the code but i hope this helps.
<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
pageWidth = document.getElementById('page').offsetWidth;
pageHeight=1000 px ;
pageWidth=600 px ;
"> </body>
you got to fix the width of the body on page load to pixels instead of % based on the resized browser window size.
I have a problem. The designer I hired did not separate out the logo and the header and its to late to get it done from him.
so I have a header image which has the sites logo in it. I want to make this logo clickable. You can see the site here: http://www.stopsweats.org/
The code for the logo tag is:
<div id="header">
<p id="logo">
</p>
Here is the CSS, added as per comments
#header {
background-image: url("http://www.stopsweats.org/wp-content/uploads
/2010/12/sweatbackground1.jpg");
border-color: transparent;
height: 108px;
padding-top: 2em;
z-index: -1;
}
So how can I make this into a valid link.?
I don't want to add any visible text as it will look ugly.
I will change the #logo width and height and placement as an overlay on the image. Hope fully that should be ok among all browsers.
The easiest thing to do is make the a take up some space. It's already properly positioned, so there's only a little bit to do.
Remove these css width and height properties:
#logo a {
width:1px;
height:1px;
}
Then add a little text to the a:
StopSweats
The text won't be displayed because you have text-indent: -9999px applied to that a, but the block will be about the right width and height to cover the banner image area.
Write like this:
HTML:
<div id="header">
</div>
CSS:
#header {
background-image: url("http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg");
border-color: transparent;
height: 108px;
z-index: -1;
width:1000px;
padding-top:10px;
}
#logo{
display:block;
width:245px;
height:60px;
margin-left:90px;
}
http://jsfiddle.net/rEFRw/
Esiaest way to do according to your structure I would prefer to put your logo image directly into your html instead of background-image through css. If you would like to do than only need to add image tag between your anchor tag (....) just change your css and html according to below code..
CSS
#header {
border-color: transparent;
height: 108px; /* change according your logo image height */
padding-top: 2em;
z-index: -1;
}
HTML
<div id="header">
<p id="logo">
<img src="http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg" alt="logo" title="go back to home" width="logo width here" height="logo height here" />
</p>
</div>
Check your logo image url properly and make sure you endup your header div tag where it is in your current html file.
Also if your #logo id has width and height value set than change accordingly.
#logo a{display:block; height:XXpx; width:XXpx; text-indent:-999px;}
you may have to adjust some css of other tags also. but it will work
I have a webpage written in dreamweaver. I have my buttons as part of the background image and use a href to provide functionability to those buttons. However when I zoom in or out with my browser those a tags move and the buttons in the background no longer align with teh a href tag. Is there any way around this?
Thanks
You need to slice those image buttons seperately, whether it's using Photoshop, GIMP or whatever you want and save them in your images folder. Then you can either use the <img> tag or have a <div> with a background using that image and set the "a href" on that.
So you could do either of these:
<img src="url" alt="some_text"/>
OR
html:
<div id="image"></div>
css:
div#image{
background-image:url('image.gif');
/* height and width of image */
height: 150px;
width: 200px;
}
To have them placed where you want on the page, you would have to place them in a div and then use css to add a margin or padding to be placed where you need it to be. So if you use the first option and you want it to be on the bottom right of a specific div, you would do this:
html:
<div id="specific_div">
<div id="image">
</div>
</div>
css:
#specific_div{
height: 400;
width: 400;
}
#image{
background-image:url('image.gif');
/* height and width of image */
height: 150px;
width: 200px;
}
#specific_div #image{
/* placement on page */
float:right;
margin-top: 150px;
}