|
CSS - Image Will Not Sit Flush Ontop Of Div
Hi,
This might be a case of an easy fix thats being over-looked but I've tried everything I haven't been able to find to 'fix' this. FF is cool, IE is giving me 'teh gap' I have attached an image, I highlighted the pic so it shows the black bar of space right under the top image. There are two DIVs that are 'stacked' The top one has the top half of the image, the bottom one has the gold bar as a background image, with the bottom half of the pic in it. I can't make the images the background of the div because i'm adding a rollover and link to the images. So, CSS: Code: #interior_top_image{
text-align:center;
vertical-align:bottom;
display:block;
height:85px;
margin:0px;
padding:0px;
}
#interior_header{
background-image:url("images/interior_bottom.jpg");
background-position:bottom center;
background-repeat:no-repeat;
background-color:#263F7F;
display:block;
height:85px;
text-align:center;
margin:0px;
padding:0px;
}
HTML: Code: <div id="interior_top_image"><img src="images/cross_top.jpg" name="cross_top" border="0"></div> <div id="interior_header"><img src="images/cross_bottom.jpg" name="cross_bottom" border="0"></div> Similar TutorialsHi I have a image gallery and I would like delete buttons or red little x's ontop of each image. I dont want to make the image background DIV I want to keep it <img src="image.jpg"> Is it possible to do this? Louis My site is: adventurevalley.ca/jason The current CSS file appears to work problem free in IE7 and FF, but Im having no luck in IE6. I realise things like the hover highlighting and menu indent will not work which I am fine with, however the corners and different box size are driving me insane. Can someone please point me in the right direction?! Thanks, Jason Hello.This should be simple enough. I have an image on my page(image1.bmp),immediatly folowed by a table(class=table1). The thing is I want the image to be flush with the top of the table with no gap,but there is a small gap,How can I fix this? Thanks note(I left a //here mark on the html page where the problem is. css sheet: Code:
#menu {
clear: both;
margin: 30px;
padding: 0;
background: url(menu.jpg) repeat-y center top;
font: 12px/26px Courier New;
height: 26px;
background: #006633;
text-align: center;
}
#menu ul {
float: none;
list-style: none;
margin-top:0; padding: 0;
margin-right:0; padding: 0;
margin-bottom:0; padding: 0;
margin-left:90; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: inline;
float: 0 auto;
padding-top: 8px;
padding-right: 28px;
padding-bottom: 8px;
padding-left:8px;
color: gold;
text-decoration: none;
}
#menu ul li a:hover {
background-color:003300;
color: gold;
}
#menu ul li#current a {
background-color: #eee;
color: #333;
}
a { color: black;font-size: 10pt; text-decoration: none;
border-bottom-style: solid; border-bottom-width: 0px }
a:link { border-bottom-color: navyblue }
a:visited { border-bottom-color: purple }
a:hover { border-bottom-color: green }
a:active { border-bottom-color: red }
H1.texter {
font-family: 'Lucida Console';
font-size: 15pt;
color: #black;
font-variant: normal;
text-decoration: none;
}
H1.texter2 {
font-size: 14px;
color: #black;
font-family: 'Lucida Console';
font-variant:normal;
FONT-WEIGHT: normal;
}
H1.texter3 {
font-family: 'Lucida Console';
font-size: 10pt;
FONT-WEIGHT: normal;
color: navyblue;
text-decoration: none;
}
TABLE.Table1
{
height: 150px;
width: 380px;
top-border-style:hidden;
border-top:hidden;
border-bottom:solid;
border-left:solid;
border-right:solid;
border-color: #000000;
background-color:white;
border-width: 1px;
margin: 0px;
padding: 0px ;
}
TABLE.Table2
{ margin: 0px;
padding: 0px;
height: 199px;
width: 430px;
background-color:limegreen;
}
html sheet: Code:
<html>
<head>
<title>Keep track and review golf scores</title>
<meta name="description" content="Keep track of and review golf scores"/>
<meta name="keywords" content="Golf","records","review","tabulation"/>
<meta name="robots" content="index" />
<link rel="stylesheet" type="text/css" href="style.css" title="BlueSky 3.0
CSS"></head><body>
<style>
body
{
background-color: limegreen;
<font FACE="Lucida Console">
}
H1.texter1 {
font-family: 'H1.texter2 {
font-family: 'Lucida Sans Unicode';
font-size: 75pt;
color: black;
FONT-WEIGHT: normal;
font-variant:Not Set;
}
</style>
</head>
<body>
<div id="menu">
<ul align="center">
<li><a
href="golfgame/Users/register.php">Join</a></li>
<li><a
href="golfgame/Users/Log_in.php">Login</a></li>
<li><a href="golfgame/Users/help/tour.html"
>Tour</a></li>
<li><a href="golfgame/Users/contact.php">Contact</a></li>
</ul>
</div>
<br>
<IMG SRC="green4.bmp" align="left">
<IMG SRC="green4.bmp" align="right">
<br>
<center>
<table width=300><tr><td align='left'><IMG SRC="golf.bmp">
</td ><td align='center'>
<IMG SRC="golf.bmp">
</td><td align='right'>
<IMG SRC="golf.bmp">
</td></tr></table>
</center>
<br><br><center>
<IMG SRC="logo.bmp" align="center">
</center>
<br><center>
<IMG SRC="image1.bmp">
//here
<table class=table1>
<tr><td align='left'><br>
<h1 class=texter2><li>content here
scores!</li></h1></td></tr>
<tr><td><h1 class=texter2>
<li>content here</li></h1>
</td></tr>
<tr><td><h1 class=texter2>
<li>content here</li></h1>
</td></tr>
<tr><td><h1 class=texter2>
<li>content here</li></h1>
</td></tr>
</table>
</center>
</body></html>
I want to center my site, which I have found I can do by giving an absolute position to the main content area - but I also want to repeat an image in the background behind the main content, and I cannot do the both and prevent some empty white space at the top of the page. Can you help? (I am new at this.) What am I doing wrong? So, to recap: I want a centered site, an image behind the main content area, and no empty white space in the browser above my bg image. I am currently using IE (7). TIA. #body { margin: 0px; padding: 0px 10px 0px 10px; width: 100%; background: #ff9900 url('bg_repeat.jpg') repeat-x; } #container { top: 0px; left: 0px; padding: 0px 10px 10px 10px; margin: 0 auto; --> this will center my site, but I still cannot see the bg image stated in the body div border-right: #ffff99 solid 1px; border-left: #ffff00 solid 1px; background: #fff; width: 75%; } I would like to align left images so that they touch against each other. Here is a capture of my problem. dollhedz.com/test [CODE] <style type="text/css"> body{ background-color:#000033; color:#00cc33; } #wrapper{ background-color:#000000; margin:15px auto 0px; width:700px; height:800px; } #sitenav{ background-image:url(sitegrax/sitenavback.jpg); background-repeat: no-repeat; height:55px; padding-left:213px; border: 0px; margin:0px; text-align:left; } #one{ float:left; text-align:left; align:left; margin:0px; padding:0px; } </style> </head> <body> <div id="wrapper"> <div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" /> </div> <div id="sitenav" > <div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a> <a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a> <a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div> </div> </div> </body> </code> Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image. thank you for your time Is there a way to get some text to be ontop of other text no matter what? I want to force certain text on top even if something else says that the something else should be ontop. I am doing this on the top and bottom of pages... for forced ads... they are being covered up on somepages and i want to make sure that this can not happen Here is a test page... http://www.thedreyersonline.com/test.htm It doesn't look horrible, so I can live with it, but it's designed so that the comments section will actually sit on the bottom like the "onbottom.gif" screenshot... It works if there is enough content in the "content" div prior to the "comments" div, but not when it's short. An alternative solution would be like the "extended.gif" screenshot, but the onbottom shot is preferred. Any help would be greatly appreciated! Thanks Bryan HI guys I'm basically ultra confused as to why a particular div in my layout won't line up on the following page.. http://hcl.uk.com/test/instaffs/enews1/ I'm talking about the orange box on the right hand side. As you can see, in Firefox it sits right against the line above it, yet in IE 6 theres a 4 or 5 pixel gap forcing the box down. I have been through both my CSS and markup and still can't figure out why this happening.. the only thing I can think of is that it's an IE bug that I don't know about. If anyone can take a look and give me some pointers on what it might or could be that would be great. Thanks in advance for all your help. Stu Hi Um basically I have 2 divs inside in another main layout div, and basically i cant get them to sit to there is no space between them in IE, in firefox its fine. if you go here and open it in firefox then IE you'll see what i mean, any ideas? Html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html> <head> <title>lost layout test</title> <link rel="stylesheet" type="text/css" href="layout.css" /> </head> <body> <div id="outerBox"> <div id="topBox"> <div id="leftTop">left part1</div> <div id="rightTop">right part1</div> </div> </div> </body> </html> CSS: (not all is used in this example) Code:
body {
background: url("images/grad_bg.jpg");
background-color: #d53e3e;
background-repeat: repeat-x;
text-align: center;
}
#outerBox {
width: 700px;
height: 800px;
margin-left: auto;
margin-right: auto;
background-color: purple;
padding: 0px;
margin-top: 0px;
border: 0px;
}
#topBox {
width: 700px;
height: 200px;
color: white;
text-align: left;
padding: 0px;
margin: 0px;
background-color: green;
border: 0px;
}
#leftTop {
width: 500px;
height: 200px;
background-color: pink;
padding: 0px;
margin: 0px;
float:left;
border: 0px;
}
#rightTop {
height: 200px;
margin-left: 500px;
background-color: orange;
padding: 0px;
border: 0px;
}
#bodyBox {
width: 700px;
height: 540px;
color: red;
background-color: blue;
float:left;
text-align:left;
}
#leftContent {
width: 500px;
height: 540px;
background-color: blue;
}
#rightContent {
width: 200px;
height: 540px;
background-color: grey;
float:right;
}
#footBox {
height: 60px;
width: 700px;
color: red;
text-align: left;
background-color: black;
float:right;
}
Not strictly css but css may be the solution :-) I have created a sample page where you can see the problem: http://www.virtual-league.com/demo/ I want the images to sit flush above one another. If I take the text out of any of the lines then the images on those lines will join up nicely. Any ideas? Good day, I'm hoping to have this content right up against the top of the browser window. I've played around with padding values, but they don't seem to do anything and I'm unsure of what to try next. Any advice appreciated. Code: #sectionHeader {
width: 800px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
Code: <body> <div id="sectionHeader"> <img src="images/header.jpg" alt="Welecome to Doctor Martin's Site" width="800" height="321" border="1" /> </div> </body> Can someone please help me? I am trying to get my left side column to meet my footer image... just like on this website: newcastlegateshead.com See how they side bar goes all the way down and meets the footer? Mine has a one inch gap between the bottom of the column and the footer. Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss Thank you so much... Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! Trying to delete my post but no option to delete so just removing content. On button on my website store on CSS but when user turn off "load image automatically" then images don't display. Please show me how to fix it. Thanks a lot. Figured 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 Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like Code: <input type="image" src="..." and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much? Hi, Instead of organising an image sprite as follows: image image image image image image i'm wondering if there are any negative effects to organising the images in a linear fashion as follows image image image image image image I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites? Thanks I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example: Currently like this Code: #store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}
want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}
with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet. effectively so i can just change the other external style sheet to change the gif file and keep this one the same. HOW? possible? |
|||||||