|
CSS - Can't Text-bottom Image
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; } 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 I have a chess website at www.nothingbutchess.com. I'm having issues with the page showing up properly with IE7. On the left hand side, you'll see a box with the heading "Nothing But Chess - News". On the right, you'll see a box with the heading "Recent Checkmates". Both of these headings are divs that have png images for the background and the wording inside of them. The problem is, in IE 7 those words are being cut off. Specifically, although the div and the image used for the background of that div are 26 px tall, the words within the div seem to be getting cut off at the 19 px mark. I used a ruler to measure. The css that, for example, that controls the "recent checkmates" header can be found at www.nothingbutchess.com/css/nbc.css and is... Code:
.recent_checkmates_top {
position:relative;
background: url(/images/home_wins_top.png) no-repeat top left;
background-color:#FF6633;
height:26px;
}
The actual html is nothing special and is simply Code:
<div id="recent_checkmates">
<div class="recent_checkmates_top">
<h1>Recent Checkmates</h1>
</div>
.....
If anybody has an idea why this is happening, I'd be eternally grateful. Thanks in advance. I've read the threads about making text and background colors appear at the bottom of a page. What I'd like to do is force an IMAGE to the page bottom, and on top of THAT, include a phone number, and active email link. Is this doable ? I've tried so many ways. The image always works, but while the text and email are OK in an 800x600 res, they jot up for a 1024x768. Anyone have experience with this ? I'd like to have a container, a row, really. And I'd like text aligned to the top of the div, and then some more text aligned to the bottom of the div, like this: ------------------------------------------ Top text Bottom text ------------------------------------------ The thing is, I can't use tables, so if someone knows how to accomplish in a completely tableless way, I'd appreciate it! I did try the following, but it didn't work: Code:
.mainDiv{
position: relative;
float: left;
width: 150px;
}
.mainDiv .upper {
top: 0;
position: absolute;
}
.mainDiv .lower {
bottom: 0;
position: absolute;
}
hey all, here's my test page http://www.pyesnflpool.com/ at the top... Im trying to get the two links (Register & Recover Your Password) to be beside the arrows and Email Pye beside the mail image it is running off two scripts, one for the links (snippetSideLine)and the other is holding together the header (elementTopPage) As you can see on side-b I was making some effort to align them to the bottom with no success, my thoughts were to align to the bottom and than do a padding-bottom: 15px; or whatever, because I tried padding-top:120px to side-a which put the links in the right spot but left the rest of the page all over the place any help is much appreciated, thanks Code:
<!-- snippetSideLine -->
<div>
<?php
if (isset ($this->User) && !empty ($this->User)) {
if ($this->User->Type == 1) {
?>
<a href="../admin/index.php">Admin Panel</a>
<?php
}
?>
<a href="../members/myaccount.php">My Account</a>
<a href="index.php?Logout">Logout</a>
<?php
}
else {
?>
<a href="../members/register.php">Register</a>
<a href="../members/forgotten.php">Recover Your Password</a>
<?php
}
?>
</div>
<!-- End: snippetSideLine -->
Code:
<!-- start: elementTopPage -->
<style type="text/css">
#wrapper {
text-align: left;
vertical-align: text-bottom;
margin: 0px auto;
padding: 0px;
border:0;
width: 850px;
}
#side-a {
float: left;
width: 458px;
height: 167px;
background: url('../images/top_left.jpg') no-repeat;
}
#side-b {
float: right;
width: 168px;
height: 167px;
vertical-align: text-bottom;
vertical-align: baseline;
background: url('../images/top_right.jpg') no-repeat;
}
#content {
float: left;
width: 224px;
height: 167px;
background: url("../images/top_bg.jpg") repeat;
}
</style>
<!-- elementTopPage -->
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="side-a">
<?php
$this->Snippet ('SideLine');
?>
</div>
<div id="content">
</div>
<div id="side-b">
email pye
</div>
</div>
</div>
<!-- End: elementTopPage -->
How do you get the text to bottom of a blank page regardless of the browsers size? valign only works for the position of a single row and margin does not work very well as if the browser is to small it will not display and if to large it will appear to high. I am wanting to use this on an intro type of page. Also is there a way to display a new html page containing text from a frame link with a transparent background so as to keep the prior background "fixed" in view with the text on top of that? I seem to have messed up while slicing...If my font size is too large, it'll mess up my table positioning...I'd like to know if there's any way to align text to the bottom of a table collumn? Is there anything I can put in my style sheet to do this? Am I not being clear enough? Please help. EDIT : I've got a picture uploaded. See how on the left there's that white space? And under "Welcome" there's also a lot of space? I figure if I could align the text to the bottom, it'd fix both problems. =/ Greetings, I have a 3 column layout with a header, nav bar, content space and footer on the center column, making the center column have 4 rows. The content div's height is set to auto and it's overflow to auto so that when the browser is maximized on higher resolutions it will expand and contain the text without a scrollbar. alternatively it will give a scroll bar if the content div is shrunk below 300px. however the auto height on the content div is causing it to take up more room than necessary. if the window is shrunken down, the content text will leak out over the footer bar and beyond. Before i post code does anyone have any suggestions on what i should be looking for? If code is wanted lemme know. so I have a side menu & main content inside a main container which has background so it looks like side menu & main content have diff. backgrounds and they all of same height.. Problem: I would like to add something to the BOTTOM of the side menu but am not able to do so.. this text has to appear at the bottom of the page even if content of side menu is less.. I could do "position:absolute" and give it top:870. but this is not dynamic as when the main content is larger it appears this text is in the MIDDLE rather than at the bottom? 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! I'm trying to resize links on hover but doing so they change their vertical alignment during hover. Is there a way to prevent this ? Basically I just want the text to be bottom aligned and stay that way on hover. "text-align: top" works, but thats not what I want. simple example: CSS: Code:
a:link, a:visited, a:active {
font-size: 1em;
}
a:hover {
font-size: 1.5em;
}
HTML: Code:
<div>
<a href="#">Text</a>
</div>
Greetings! I am trying to position a transparent gif at the bottom of a page, repeating on the x axis, so that text scrolls behind it. I have the gif fixed at the bottom of the page, but the text is still over top of it. I think I will need to create an element, position it at the bottom of the page, use the transparent gif for the background, and give it a z-index higher than zero, right? If so, I can't get it it to work! What I am currently doing: Code:
body{
background:transparent url('/flames.gif') center bottom fixed repeat-x;
}
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. 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 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; } 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. 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? 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] IE is adding 8-10px of padding to the bottom of a div that I am placing a background-image in. It renders fine in ff, but because I am trying to match 3 parts of an image up to make one whole (I have reduced margin and padding to 0 on all 3 divs) there is this white gap between the divs?! Any ideas? |
|||||||