|
CSS - Vertical Space Between Hr And Image
My site
I am redesigning this site for a theater camp company. I want to create the effect of stage lights shining with a image rollover and am partly there. I am stuck now because I want to use an HR as the cross beam with images of stage lights directly below (take a look at the site to understand). I do not know how, or if it's possible, to line up the images directly below the HR (bar) so there is no space at all. Any help? Similar TutorialsThis is my first css based site...i'm having a nightmare time and wonder why this is so much better than tables when its taking me 4 hours in css what takes me 5 minutes with tables? that being said if you go he www . chhs . unh . edu / v3 . html on the right side here is the issue: in FF the contained divs are larger than the containing div in IE there is like 20 pixels of space at the top of the first containted div here is the code for this section, the sidebar is the container and the other 2 are the divs inside, quicklinks is the first one. Code:
.twoColFixRtHdr #sidebar1 { width: 300px; float:right; text-align:left; background-color:#00F; padding:0px; display:inline; line-height:100%; }
div#quicklinks{
display:block;
width:300px;
margin: 0px 0px 0px 0px;
background-image:url(/images/v2/quicklinks_bg.png);
background-position:top right;
background-repeat:no-repeat;
background-color:#AEAE5D;
padding: 5px;
color:#FFF;
vertical-align:top;
}
div#photo_gallery_links{
width: 300px;
margin: 10px 0px 0px 0px;
background-image:url(/images/v2/photosbg.png);
background-position:top right;
background-repeat:no-repeat;
background-color:#283C6F;
padding: 5px;
color:#FFF;
}
can anyone help me? i haven't used a board like this in like 8 years so i'm sorry if i'm doing it wrong. thanks! i have two divs on top of eachother with images in each. there is a space i can't get rid of in IE..looks perfect in firefox. i've tried cutting out the margins and padding to no avail. seems like ie regularly has spacing problem from google searches but none of their fixes have worked yet. I have a region with a div, an image and another div stacked vertically. For some reason, there are a few pixels of blank space between the image and the bottom div. http://www.brucethorn.com/index.php...maritime-sunday On another page, I have regions with a "line-height + vertical-align:middle" centering of an image that make up thumb nails. There too is a few pixels of blank space, but at the top and images, pushing them down and slightly outside of the div that contains each of them. http://www.brucethorn.com/index.php/paintings I suspect these are the same problem, but I could be wrong. The issue is most visable in FF, and noticable in Opera. I only see something sporadic for the second occurence in IE Code: body {background-color:#999999; margin:0px; padding:0px; border:0px; text-align:center; font-family:"Courier New", Courier, mono;}
h1.header {height:16px; width:800px; _width:776px; font-size:100%; font-weight:bold; margin:0px 0px 0px 24px; text-align:left; background-color:#333333;}
h2.header {margin:0px; font-size:90%; font-weight:bold;}
div {text-align:left;}
h2.infoleft {text-align:left; height:16px; width:576px; font-size:90%; margin:0px 0px 0px 24px; _margin:0px 0px 0px 12px;float:left;}
h2.inforight {text-align:right; height:16px; width:176px; font-size:90%; margin:0px 24px 0px 0px; _margin:0px 0px 0px 0px;float:left;}
div.black {background-color:#000000; color:#999999;}
div.block {margin:8px 24px 8px 24px; text-align:justify; font-size:90%;}
div.block2 {margin:8px 0px 8px 12px; _margin:0px 0px 0px 4px;}
div.block3 {margin:8px 0px 0px 12px;}
img {border:0px; margin:0px; padding:0px;}
img.left {float:left;}
img.right {float:right;}
div.bar {height:16px; width:auto; text-align:center;}
div.title {height:48px; width:800px; margin:auto;}
div.content {height:392px; width:800px; margin:auto; text-align:center;}
div.subbar {height:16px; width:800px; background-color:#333333;}
div.menu {height:18px; width:480px; float:left; margin:30px 0px 0px 20px;}
div.copyright {height:16px; width:800px; margin:auto; text-align:right; font-weight:bold; font-size:75%;}
div.scroll {height:344px; width:800px; margin:8px 0px 0px 0px; overflow:auto;}
div.filmunit {height:128px; width:128px; border:4px; border-style:solid; border-color:#000000; background-color:#999999; margin:8px; padding:0px; float:left; text-align:center; line-height:128px;}
img.filmimage {vertical-align:middle;}
Hi, I'm trying to avoid using absolute positioning (and using a margin or padding) to vertically place two divs. clear:both seems to be close but it clears double the amount of space that I want. 1. What determine's how much space is cleared? 2. Is it a problem that neither of the divs is floated? http://www.sabahseaside.com/sti/testindex.php Code: #homecontent {
position:relative;
margin:10px;
}
#homecontent p {
text-align:justify;
margin:0 1em 2em;
}
.hometop {
margin:0; padding: 0;
border: 1px solid black;
}
.homebottom {
margin:0; padding: 0;
border: 1px solid black;
clear:both;
/*margin-top:4em;*/
}
http://www.sabahseaside.com/sti/layout.css Oh yeah, and the images in those divs are floated! AHHH! I am trying to style a css layout. I keep getting a vertical space between two different block containers. here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="menu"> </div> </div> </div> </body> </html> Here is the CSS: Code:
#wrapper{
margin: 0 auto;
width: 977px;
}
#header {
margin: 0;
background: url(images/header_01.jpg) no-repeat 0 0;
width: 977px;
height: 198px;
}
#menu{
margin: 0;
background: url(images/header_02.jpg) no-repeat 100% 0;
float: left;
width: 977px;
height: 44px;
position:relative; top: 100%
}
My theory: the top part of the header is 154 px tall. The bottom part is 44px tall. That makes 198px height. so with header being 198px tall, and the smaller image with a relative position 100% down from the top should correctly line up the two images. But yet I have a HUGE gap?!?! Why? Even if I put 154px instead of 100% for top ... it will not line up correctly. I'm going through hell trying to make a site look the same in IE and Firefox. The biggest problem is the gaping spaces IE adds between elements. What is the best way to fix this? Example at patrolmag.com/new. Any advice or help would be most appreciated. P.S. How the page looks in Firefox 3 is ideal. I just need to make at least IE7 come somewhere close to matching it. I am trying to style a form using CSS instead of tables but am getting unwanted space above form elements when i use float:right to position them to the right of the prompt text. I have spent some time reading about the problem which appears to be an error with IEs rendering of CSS. I have tried several solutions posted on the web with no success. Can anyone recommend a solution to my problem. Thanks. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css" media="screen"> .form { font-size:10px; text-align:left; } .form input { width: 100px; font-size: 9pt; border: 1px solid #891C46; margin-left: 12px; padding-top:0px; float:right; } .form select { width: 100px; float:right; font-size: 9pt; border: 1px solid #891C46; } .form textarea { width: 100px; float:right; font-size: 9pt; border: 1px solid #891C46; } .form li{ list-style-type: none; clear:both; } .form img{ padding-top:10px; float:right; } </style> </head> <body> <table cellpadding="0" cellspacing="0" width="500"> <tr> <td width="50%" valign="top" class="form"> <ul> <li>Your name:<input name="textfield" type="text"></li> <li>Your email address:<input name="textfield" type="text"></li> <li>Your company:<input name="textfield" type="text"></li> <li>Your position:<input name="textfield" type="text"></li> <li>Subject:<select name="select"><option>Digital Advertising</option></select></li> <li>Query/comment:</li> <li><textarea name="textarea" cols="20" rows="8"></textarea></li> <li><img src="/carlton-newsite/img/contactus/send.gif" name="send" width="50" height="25" id="send"></li> </ul> </td> <td valign="top">sfasfasfasdfasdfasdfasdf</td> </tr> </table> </body> </html> How do I reduce the vertical space between form elements that I put inside a div? I have text "username" with the textbox below it but there is like 25 pixels of vertical space between them. Brad Argh. Tried a number of variations on this probably simple task. Nonetheless: In this example how do I get the 'sidebar' to fill the vertical space of the container, and ensure the 'footer' remains positioned at the bottom (which it currently does) http://www.mandgweb.net/css_test/css_test.html Thank you I think this is a pretty basic css question... How do you get an image to vertically align to the top? I've tried "vertical-align: top;" but no dice. Here's where I want to apply this: http://www.ergopro.com See, I want the credit card image (up top) to vertically align to the top, flush with the TrustWave logo. How is this done? Much thanks in advance! Hi! Any helpful advise is appreciated.... I have an issue where I trying to arrange 3 images in a simple column with a small amount of space in between, all the way to the right. It funny if I disable the CSS code the 3 image array will return left in the perfect column, but I want it on the right, and only get an image pile-up on the right side. Please PM to get the URL to see the test page. Example HTML: <div class="thumbnail"> <h2><b>heading</b></h2> <img src="(URL address.....file1.png)" alt="" width="278" height="142"><br> <!-- Caption --> </div> <br class="clearboth"> <div class="thumbnail"> <img src="(URL address.....file2.png)" alt="" width="278" height="142"><br> <!-- Caption --> </div> <br class="clearboth"> <div class="thumbnail"> <img src="(URL address.....file3.png)" alt="" width="278" height="142"><br> <!-- Caption --> </div> Example CSS: .thumbnail { width: 278px; margin: 30 15px 15px 30; right:40px; position:absolute; } .clearboth { clear:both; } THank you in advance for your help! Best, Digigumball I'm trying to create an image that will adjust to fit the screen size and always be at least 100% of the screen. Basically, I'm looking to have the "trunk" image in the LeftBody div, always stretch to reach the image in the banner and the footer. If I have enough content, the image will repeat just fine and fill my needs, but if there is no content, how can i make the image fit the page? My code is accessible via the /Samples/ directory. Thanks so much... midcitybrewery.com/Samples/sample.html I have an image and to the right of it I have text. I want the text to be aligned veritcally to the middle of the image. I can do the following and it works: Code:
.icon {vertical-align: middle;}
<a href="index.php"><img src="images/icon.png" class="icon" border="0" /></a>
Header Goes Here
However, if I wrap H1 tags around "Header Goes Here" the text drops below the image. Any ideas on how to use header tags and have it aligned? I know I could make the icon as a background with H1 but I want it to be clickable. Is there any way to make it so the H1 I got this WP style, and I edited it quite a bit. Code: #menu {
clear: right;
float: left;
position: relative;
padding:0 10px 0 10px;
margin:0 0 0 34px;
width: 160px;
/* border-left: 1px solid #bbaf95;
border-right: 1px solid #bbaf95; */
background: #fff rl(wp-images/bg.png) repeat-y 100% 0;
}
The problem being is that the image border does not reach the where the css borders were, and it does not stretch 100% to the bottom either. Even more, it takes three seconds to load from where it use to take less than one. Check it out: http://randomized.us Thanks in advance. 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've been trying to setup a basic template for a site. In firefox I got it looking pretty good, but in IE there seems to be about 3 pixels of extra space to the left of the header image. The url is: http://igocity.aoeex.com/ If you look in firefox, you can see the black box where the login form is, and the banner image to the right of it are side-by-side with no space between them. This is what I want. In IE, there is about 3 pixels of white space between the login box and the banner image. This causes the image to drop down below the login box instead of it being beside it normally. For now, I've expanded the width of the outer div so they are side by side, but with the space. I can't figure out why this space is there, or how to get rid of it. Any suggestions? The HTML for the header looks like so: Code: <div id="headerDiv"> <div id="loginBox"> <form method="post" action="/login.php"> <input type="text" value="" class="txtUsername" name="txtUsername" /><br /> <input type="password" value="" class="txtPassword" name="txtPassword" /><br /> <a href="login_help.php" class="loginTroubleLink">>> login trouble?</a> <input type="submit" value="log in" name="btnLogin" class="btnLogin"/> </form> </div><img src="images/road_trip_banner.jpg" width="540" height="80" id="headerBannerImage"/> </div> CSS can be seen at: http://igocity.aoeex.com/css/template_css.css Is there any style you can apply directly to an image to vertical align it at the top or the bottom? Hi guys, I've been struggling with this for some hours now and can't get this to work... I'm no css expert but this is driving me mad... The problem happens in firefox3, in IE7 it displays fine. My code is (copied from firebug): <div id="mydiv" style="margin: 0px; padding: 0px; position: absolute; z-index: 1; opacity: 0.9; left: 763px; top: 143px;"> <div style="border: 1px solid rgb(68, 68, 68); padding: 2px; font-size: 7pt; color: rgb(68, 68, 68); white-space: nowrap; background-color: rgb(255, 255, 255);" id="otherdiv"> Text goes here </div> <div style="position: relative; top: -1px;" id="yetanotherdiv"> <img src="images/bico_w.png" style="margin: 0px; padding: 0px; width: 14px; height: 7px;"/> </div> </div> This is a balloon like tooltip, with a div on top with the text, and a div on the bottom containing the handle image, all wrapped by another nice div. In Firefox, there's space on top and below the image that I can't figure out where it comes from (no space in IE7). If I put a "vertical-align:top" on the image, it sticks to the top div correctly (both IE and firefox), but then I can't get rid of space BELOW the image. Can you help me figure this out? |
|||||||