|
CSS - Postioning An Image In The Bottom Left Of A Div
Hi
I'm trying to figure out how to postion an Image at the bottom left of a <DIV> container. Can someone supply an example style class defintion which will place an Image at the bottom left of the div container.. I presently have: <div> <h2>Heading 2</h2> <p>My paragraph text goes here and goes on for a line or so</p> <img class="bottomleft" src="button.gif" alt="button" /> </div> .bottomleft { position: relative; bottom: 0px left: 0px } But this places the Image relative to the end of the <p> tag not relative to the <div> How can I position the Image relative to the botom left of <div> tag? Thanks David Similar TutorialsFigured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text Ok I have two layers positioned on the bottom left and right of my page as you can see here.. The problem is when I resize the page the two layers move up with it and then if I use the scroll wheel they dont go back to the bottom and they stay where they are. Anyone know how I can get it so if I were to resize the page the two elements would stay at the bottom. I tried that footer demo that everyone posts the link for but I couldnt get it to work for the case I have. Anyone have any ideas? Thanks , appreciate any help you can give me. Hello, My first CSS site was going fine; I was learning as I went and drawing from different resources. My code and CSS probably isn't very pretty ( I validated it, I know it needs to be cleaned up) but things were working. Then I went back and made some adjustments concerning the widths of my column divs. Now I find that Firefox is respecting the rightcolumn div (specifically: <div id="contentright">)but IE keeps kicking it to the bottom left. I've tried messing with the column lengths so everything fits accordingly as specified in the frame div width. Can anyone please take a look and offer a suggestion? thanks. http://www.brinjac.com/test/binnspark.html Hi all, I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise. This is an abridged version of the site's code for example: Code: <style type="text/css">
<!--
#main1 {
padding: 0px;
margin: 0px;
}
#left {
width:260px;
margin:0;
padding:0;
float: left;
}
#left-top {
background-image: url(../images/panel-top-left.gif);
background-repeat: no-repeat;
background-position: center top;
height: 16px;
margin: 0px;
padding: 0px;
}
#left-middle {
background-image: url(../images/panel-middle-left.gif);
background-repeat: repeat-y;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 2px;
}
#left-bottom {
background-image: url(../images/panel-bottom-left.gif);
background-position: center;
height: 18px;
}
#logo {
background-image: url(../images/swalingslogo.gif);
background-position: center top;
width: 260px;
height: 120px;
background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
padding-left: 0;
margin-bottom:10px;
width: 217px;
}
#navlist li
{
list-style: none;
margin-bottom:4px;
padding: 0;
font-size:1.2em;
line-height:1.8em;
width:217px;
height:32px;
background-image:url(../images/nav2.gif);
background-repeat:no-repeat;
margin-top: 0;
margin-right: 0;
margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
display:block;
text-decoration: none;
color:#039;
width:207px;
height:32px;
font-weight:bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
#navlist li a:hover {
text-decoration: none;
color:#FF6600;
}
/* Testimonials */
div#fscroller {
width:200px;
height:200px;
background-image:url(../images/bg-testimonials.gif);
background-repeat:no-repeat;
margin-left:8px;
}
div#fscroller p {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Middle Column */
#middle {
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
text-align: justify;
margin-left: 260px;
}
#middle #top-left {
background-image: url(../images/panel-top-rightleft.gif);
height: 16px;
font-size: 2px;
background-repeat: no-repeat;
}
#middle #top-right {
float: right;
margin-top: -16px;
background-image: url(../images/panel-top-rightright.gif);
height: 16px;
width: 20px;
font-size: 2px;
}
#middle a {
color: #003399;
}
#middle a:hover {
text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
background-image: url(../images/title-unitedkingdom.gif);
background-repeat: no-repeat;
height: 26px;
width: 201px;
margin-bottom: 6px;
}
#middle h2#antigua {
background-image: url(../images/title-antigua.gif);
background-repeat: no-repeat;
height: 26px;
width: 128px;
margin-top: 16px;
margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
float: left;
}
div.minisite span {
display: none;
}
div.minisite a {
background-position: top;
background-repeat: no-repeat;
height: 168px;
width: 190px;
display: block;
}
div.minisite a:hover {
background-position: bottom;
}
a#minisite-swimminglessons {
background-image: url(../images/swimming-lessons-uk.jpg);
}
.clear {
clear:both;
}
.hidden {
display: none;
}
.notopgap {
margin-top: 0;
}
.nobottomgap {
margin-bottom: 0;
}
.inside {
background: #EFEFEF;
padding-left: 10px;
padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
<div id="left-top"></div>
<div id="left-middle">
<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->
<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>
<div class="clear"></div>
<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="clear"></div>
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>
<!-- End Middle Column -->
</div>
I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links. This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this. I can't add in links properly, so I hope this is acceptable under the rules -- The site in question is: www.swalings .com/swalings/index4.asp and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg Hopefully that's enough information to go on, please let me know if there's something I missed out. Thanks a lot! Rob Hi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? Pulling my hair out over this one. I have a footer which I need at the bottom of the page, everytime. Whether the page has scroll or not. I do not want it fixed to the bottom. I want it at the end of the page. When the page loads the footer is at the bottom of the page if there is no scrolling needed. If there is scrolling needed, then the footer ends up at the bottom of the screen when the page first loads, basically, the wrap-all div is not going a 100% height and the content within that is running over. Hope that makes sense. Problematic code is below. Code: <div id-"wrap-all">
//bunch of stuff
<div id="footer">
//bunch of stuff
</div>
</div>
//css
html { height: 100%; }
body { height: 100%; }
#wrap-all { position:relative; height:100%; }
#footer { position:absolute; bottom:0; }
i am pretty new to web development, and i have a big problem which i cant seem to find a solution to.. i want to type on top of an image on my web page... the image is placed in a table and the table (the whole tag from <table> to </table> including image) has been relatively placed on the page using div tag. so how do i get around typing something ON TOP OF the image ??? for eg... on the ibm dot com homepage, on the header, on the right side, the text "united states" is placed on top of an image... i want to achieve a similar effect. please help me.. please. and any recommendation for good positioning tutorials ? i mean, the only way i am able to make text appear over images is by making a new table seperately, and using div tags and set the position as absolute, and setting the z axis to auto which lets me move the table around anywhere on the page (even on top of images) in dreamweaver... isnt there any better way of doing it ? and im sorry if this post belongs to some other area, i think his problem is css related.. im sorry ima complete noob first time on any web development forum. here is my code Code:
<div class="abovefooter">
<table width="906" height="108" border="0">
<tr>
<td><img src="images/above_footer.jpg" width="906" height="108" /></td>
</tr>
</table>
</div>
<div class="above">
<p>News Forums extreme</p>
<p> </p>
</div>
and here is the "above" and "abovefooter" css code: Code:
.above {
position: absolute;
z-index: auto;
height: 100px;
width: 930px;
left: 13px;
top: 432px;
right: auto;
bottom: auto;
}
.abovefooter {
position: relative;
z-index: auto;
height: auto;
width: auto;
left: auto;
top: auto;
right: auto;
bottom: auto;
}
I have a blog found here buildingsolutionsmidlandsltd.co.uk/blog/ The left menu is the issue. In firefox its perfect, but in ie7 its not aligned right. Please help, im tearing my hair out. /* Template */ #content{ float:right; width:75%; } #menu{ float:left; width:20%; } /* Footer */ .footer{ background-color:#CCCCCC; height:22px; margin:auto auto 10px; padding-left:10px; padding-top:8px; width:890px; clear:both; } .footerlist { font-size:10px; } Ok i made a design for a website in photoshop .. sliced it up into divs put it in dream weaver and i edited to css for the divs there... I'm having a problem with all the columns with background images to stretch to the end of the page dynamically according to the hight of the highest column.. For example if i add more content to the content section of the site i have to go in and change the hight of every repeatable background image that extends to the bottom of the page.... as you may know this sucks and i really want to figure out how to get the site the way it should be so its easily editable. .. I know quite a bit of the problem is the fixed positioning that's being used but the website is not a perfectly square site so some exception need to be made.. i tried to make a website that was way above my lvl to make but i made it.. its just has some bugs i need to figure out.. To get the problem to occur all one has to do is make the text bigger using the browser and watch the background image not extend to the end of the site.. which is all i need to happen ... so if i add or subtract content the site auto adjusts to the size.. really need some help on this.. thanks.. Does anybody know how to put one image on TOP of another? I'm using CSS, and was wondering why my image wasn't showing up....Turns out it was underneath another image, but it needs to be on top! Any clue how to fix it? Thanks! G'day all, I'm trying to get two different images to appear of the far left and far right of the page, extending to the bottom of the page to act as a border. I currently have two different styles for each, and two different <div> tags, however I think the nesting of the <div> tags may be causing it to stuff up and knock off the positioning. How can I get the two images to go to the far left and right of the screen, using CSS, in a way that will also let me use the repeating function to stretch them to the bottom of the screen. This is a screenshot of a mockup I did in Photoshop, the images I need to position are the grey fadeout ones on the left and right. http://www.ausvirtual.com/Website%20copy.jpg Cheers. I have a logo which I would like always positioned at the bottom of a div. Does anyone know a way of achieving this? http://www.willisemail.co.uk/skill/ The logo is in the bottom right hand corner. Cheers Jemes /* Site Holder Start */ #box { width: 750px; margin: 0px auto; padding: 0px; text-align: left; border: 1px solid #979696; background-color: #FFFFFF; background-image:url(../Images/mid.jpg); } /* Site Holder End */ /* Site Holder Start */ #box2 { margin-left: 49px; margin-right: 50px; margin-top: 10px; margin-bottom: 10px; padding: 0px; text-align: left; background: #ccc url(../images/img_MainWhiteBg.jpg) repeat-y 50% 0; } /* Site Holder End */ /* Content Start */ #content { width: 461px; padding:0px; background-color:#FFF; overflow: hidden; } /* Content End */ /* Content Start */ #content2 { margin-left: 14px; margin-right: 15px; margin-top: 0px; margin-bottom:0px; padding:0px; background-color:#FFF; overflow: hidden; } /* Content End */ /*Right Menu Start*/ #right { width: 178px; padding:0px; float:right; background-color:#FFF; overflow: hidden; } #right2 { margin-top:0px; margin-left:14px; margin-right:14px; padding:0px; background-color:#FFF; overflow: hidden; } .RightMenu { margin-top:10px; padding: 0px; font-size: 13px; color: #6884AE; font-weight: bold; } .RightMenu ul { padding: 0px; margin: 0px; list-style-type:none; } .RightMenu li { background-image: url(../images/img_Li_Image.jpg); background-repeat: no-repeat; background-position: 0em; padding-top: 0px; padding-bottom: 0px; padding-right: 1px; padding-left: 14px; margin-top:5px; } .imgTitle { text-align:center; margin-top: 13px; margin-left:0px; margin-right:0px; } /* Right2 Menu End */ .imgRight { text-align:center; margin-top: 10px; margin-left:0px; margin-right:0px; border: 1px solid #979696; } .imgMain { text-align:center; margin-top:10px; border: 1px solid #979696; } .Menu { margin-top:10px; padding: 0px; } .Menu ul { padding: 0px; margin:0px; list-style-type:none; } .Menu li { display: inline; list-style-type:none; padding-top: 0px; padding-bottom: 0px; padding-right: 1px; padding-left: 0px; margin:0px; } .Main { padding:5px; border: 1px solid #979696; margin-top:8px; margin-bottom:10px; } .Cove{ margin-top:15px; text-align:center; } Is it possible to use 2 backgrounds with CSS? E.g. I want one background which is going to be used for the top of my website layout and one background for the bottom. This would allow me to extend the content of the website, without "distorting" the background. I used tables in the pas and this was very easy to do, however I don't know how to do this with CSS. I don't even know if this is possible. Also this brings me to the next CSS related problem; with HTML tables it was possible to extend the tables when e.g. a lot of content was added. Is this also possible with CSS? E.g. you would set the td height to 100% and the text (and the rest of the design) would expand without problems... I hope my post makes any sense. It's kinda hard to explain what I mean. I want to be able to position an image at the very top of a cell/div/container/whatever and one at the very bottom. It's too bad there is no float:top and float:bottom. Something like this [HTML] <div style="background-color: red"> <img src="images/top.jpg" style="?" /> <img src="iamges/bottom.jpg" style="?" /> </div> [/HTML] I have two images at the top of a paragraph, one floating left, the other, right. I would like the right floater to go to the *bottom* of the graph. Below is a truncated version of the graph and the CSS style sheet I created, trying, unsuccessfully, to bottom the image. (The image remains at the top.) I validated my current document (which doesn't have this floatrightbottom in place yet.) The document validated as CSS level 2.1 ! <p><img class="floatleft" src="FreddieWAud110x130.jpg" width="110" height="130"><img class="floatrightbottom" src="SherpWithAward113x109.jpg" width="113" height="109" style="vertical-align=-25px">In 1990, FG conceived Movies Junior introducing movie theatre ... (Toni Honors are given annually for theater accomplishments not eligible in established Toni Award categories.)</p> .floatrightbottom { float: right; margin-top: 6px; margin-right: 0px; margin-bottom: 6px; margin-left: 15px; padding: 2px; border: 4px solid #666; vertical-align: text-bottom; } So I'm not sure how to search for what I'm trying to do so I figured I'd just ask. On my test website: http://www.temple-of-lore.com/siege911 I noticed on the front screen, the image that I have on the bottom doesn't go to the bottom of the page which breaks the effect I'm trying to do. You can see what I'm trying to do on other pages. Anyways, I know I'm going to be putting more content eventually on that front page, but I'm sure there will be someone out there with a huge Apple monitor with amazing resolution that's going to break my page. I'd prefer a way to just force the image to go to the bottom and fill any black above it if the screen is taller than the content on the screen. But on pages where it's not taller, I'd like it to be below the content and let it scroll down. Anybody know how to do this? Hello, I am new to the css world, however I have followed some tutorials and became familiar with how to use css. However now I am trying to remove the space on top and bottom of an image, so that I bring two images one on top of each other. Here I placed some sample html code: Code: <html> <head> </head> <body> <div> Some text BEFORE the line. </div> <div> <img src="line.gif" width="100%" height="4px" /> </div> <div> <img src="line.gif" width="100%" height="4px" /> </div> <div> Some text AFTER the line. </div> </body> </html> As you can see in the above code, I have a div tag with the text above, a div tag with an image line, another div tag with an image line, and some text below. However there is a space of around 5px from one line to another. I tried to do the css syntax for the image as follows: Code:
img {
border: 1px solid #000000;
margin-top: 0px;
}
However I can see the border on the image, but the space still remains there. I also tryied to use the padding-top, but it still did not work Is there anyone here that can help me out please? thanks & regards, sim085 Hi all, I've got a <div> tag around an image and in Firefox, it shows an extra 2 pixels of padding at the bottom of the image - Why is that and how can it be stopped? There's no blank spaces between the <div> and <img... tags. hi, this is my first post so go easy with me! I am trying to use css to make a top navigation bar, with an image to the left and an ul to the right, i want to ul to be in line with the bottom of the image so that it forms a nav bar but i am doing something wrong...! below is what i think is the relevant code and css.... any help appreciated!! If i need to upload the rest of the pages then let me know. i'm coding in php but this bit is all html so i guess that doesnt really matter for now, i'm new to web development, its part of a uni assignment! Code: HTML <div id="header"> <p align="left"> <a href="index.php"> <img src="/images/GATlogo.jpg" width="150" height="150" alt="Home" border="0" /></a> <ul> <li><strong><?php echo "$heading"; ?></strong></li> <li><img src="/images/login.gif" border="0"/><a href=" Login.php">Login</a></li> <li><img src="/images/register.gif" border="0"/><a href=" Register.php">Register</a></li> </ul> </div> Code: CSS #header{
vertical-align: top;
text-align: right;
border: solid thin #999999;
margin: 0px 0px 0px 0px;
background: #336699;
font-family: MS Trebuchet, MS Verdana, Univers, Helvetica, Arial, sans-serif;
color: #ffffff;
height: 155px;
}
#header li {
display: inline;
list-style: none;
padding: 40px;
}
#header a:link {
color: #ffffff;
text-decoration: none;
}
#header a:visited {
color: #ffffff;
text-decoration: none;
}
#header a:hover {
color: #ffffff;
text-decoration: none;
}
#header a:active {
color: #ffffff;
text-decoration: none;
}
|
|||||||