|
CSS - H3 Text Won't Display Over Bg Image
Here's the issue...
When the site loads, you'll see the h3 text for a second (on the right), then it gets covered up by the side boxes. I've tried using z-index for my h3 tags so they "hover" over the side boxes, but to no avail. Here's the link: http://www.infothreads.com/ Oddly, all the links show up above the side boxes, but not the h3 text. Any ideas? Thanks in advance. Similar TutorialsI want to display a byline in front of my logo. The byline is text, and the logo is an image (not a background image). Here is the existing code where I have inserted the new block element 'byline' in the HTML and CSS. The logo img is aligned in the center (align=center), and the byline is to sit on top of that logo slightly to the left of center of the logo image. All code and CSS is currently validated. Doc type: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML CODE Code: <div id="container"> <img class="logo" src="images/factor30_logo.png" alt="factor30" width="290" height="124" /> <div id="intro">Blah blah blah blah</div> <div id="byline">delivering your internet projects on time and within budget</div> <!---there are several more block elements but for the purpose this exercise I have removed them---> </div> CSS CODE Code:
#container {
margin-top: 26px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
img.logo {
display: block;
margin-left: auto;
margin-right: auto;
}
#byline {
position:absolute;
display: block;
margin-left: auto;
margin-right: auto;
top: 126px;
text-align: center;
font: normal 11px "Trebuchet MS","MS Sans Serif",Geneva,Serif;
color: black;
z-index:1000;
}
Hi All, Here's my issue... I have decided to try an all css-based layout which will incorporate: 1. a background image (770px wide) that repeats on the y axis in the BODY tag 2. a background image that will not repeat in a DIV tag that is slightly less wide (750px) than the BODY tag's background image The background image in the BODY will repeat on the y axis and provide a backdrop and edges that extend beyond and below the background image contained in the DIV tag which will also contain the main content/text for the site. [ Note: The background-image in the DIV tag is 631px in height. ] The problem is as follows: Since I do not have enough text to extend the content DIV to the height of the background image and/or beyond, the background image is not being fully displayed; the top and bottom of the background image is being cut off and the image as a whole is being pushed upward at the same time. To see the problem: http://publictrust.ca/css/default.htm The css is as follows: body { font-family: Verdana, Arial, Helvetica, sans-serif; color: #260D0D; font-size: 0.8em; background-color: #260D0D; margin: 0px; padding: 0px; background-image: url(../images/body-bg.jpg); background-repeat: repeat-y; background-position: center center; } #divHeader { margin: 0px; width: 750px; color: #260D0D; } #divMain { background-color: #EDCCA1; background-image: url(../images/container-bg.jpg); background-repeat: no-repeat; background-position: center center; width: 750px; color: #260D0D; } #divFooter { text-align: center; font-size: 0.7em; margin: 25px 0 0 0; } #divHeader, #divMain, #divFooter { width:750px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; color: #260D0D; } #leftMenu { float:left; margin:130px 0 0 5px; padding: 0px; width:150px; } #divMainContent { float:right; width:500px; margin: 150px 5px 50px 5px; border-top: 1px solid #260D0D; } The css file can be downloaded at: http://publictrust.ca/css/css/template_css2.css Caveat: the solution must work in IE and mozilla/netscape AND when I add more text to the main content area, the DIV must stretch downwards to accommodate the extra text *without* changing the height of the divHeader & divFooter. Thanks in Advance, mne 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. Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. Hi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> 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 the html below and I only want to display the "initial text" and the "some more text" bits of text. Is this possible using only CSS without any modifications to the html e.g. adding id's ? <div id="snav"> <p><span id="somespan">You are he <a title="home page" href="/content/index.html">Home</a> <a href="http://www,saving.com">initial text here </a><br />Some more Text here.</span></p> </div> thanks. G Alrite, Im having a little trouble hiding text and then showing the text only on the printout of the page. Here is what I have so far: Setting up Style tags: PHP Code: <style type="text/CSS"> #inc { display:none; //hides text on page } </style> <style type="text/CSS" media="print"> #omit { display:none; //hides text on printout } </style> ... that bit works fine, it is this bit I am struggling with, how do I write the following: PHP Code: <style type="text/CSS" media="print"> #inc { display:??? what goes here ???; //show text on printout } </style> ... here is the #inc being called: PHP Code: <span id="inc"> <font face="Arial" size="3" color="#000000">Text </span> ... so the #inc is called to hide the text on the page but displays text on printout. Am I going in the right direction??? Thanks Nick Damnit. Differing browser box models piss me off. I guess thats what you get for being a web developer, where someone can use 6+ different programs to run your code. I just started doing design with divs instead of tables and man what a PITA. I really like the idea of "building blocks" tho (and I really hate the inflexibility of tables), so I'm trying to grind through it. Its a small project, however, so I havent really been able to test cross-browser compatibility too much. I'm running into a strange error in IE (sidenote: the page does seem to be handled correctly in Opera (though Firefox jacks the page up totally)). Anyways, I have a series of nested divs (to emulate the structure of a table). Everything looks fine until I start messing around with divs with a display of 'none'. When I insert a div (or set a current div's) with display = 'none', part of the form input text will "flow over" outside of the div. In the pictured example, "Zachary Wedgeworth" is the last entry in the selectbox. There is no code / html after that selectbox, but as you can see, "Wedgeworth" appears after it! It isnt even able to be highlighted! The second line of the form contains a div with style='display:none'. If there's no div containing anything to do with display, this "overflow" error doesnt occur. There should be no difference in inserting a non-displayed div vs. never putting the div in the code at all, but (in IE at least), there is. stupid & frustrating. Has anyone run into this problem or have any idea why this might be occuring? Its already stumped a couple fellow programmers. Hi I've got a testpage, with everything removed except the problem which occurs in Firefox http://ied.gospelcom.net/tester.php There is a mouseover popup, which is toggled from hidden to visible by onmouseover on some of the table cells. The CSS for this is #reportalert {visibility:hidden;} This is not a javascript problem because it happens with js disabled. I have removed the JS toggle script from this page, so you won't even see this happen. As soon as I have the div with id="reportalert" anywhere on the page, its presence prevents a cursor appearing in the textarea. It does, in fact, have focus, because you can type in it. But it is disconcerting not to appear to have focus. It is as if the 'visibility:hidden' of the div somehow leaks out to affect the cursor. I have tried all sort of things, such as putting visibility:visible on the text area, or its whole TD. Any other ideas I could try? thanks Tony 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 Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? Hello, I've been having trouble with a simple design I have been creating. I was wanting the footer text to display in a straight line, but it's displaying horizontally. Could you please look at my HTML and CSS coding and see if I had made an error: Code: www.wendyhenrichs.com/huy Thanks! Hello, this is my first attempt at a website and first attempt at using CSS as well. With much reading and the help of an online CSS layout creator I've been able to get pretty far, but have been having many roadblocks recently. For instance, the second heading in my layout is not displaying correctly in IE, but looks fine in FireFox. Please take a look at http://www.onlinecasinoboss.com/new_page_1.htm The second heading should lay directly underneath heading number 1, with a 2px margin in between header 2 and the main page layout. Also the text in the right, left and center columns starts as if it had a 12px or greater top margin. This problem exists in BOTH IE and FF. Please help, and thanks for anyone that takes the time to help a newbie web designer out. Hi. Lets say I've a div with width:300px and then there're some user generated content (Example: aaaaaaaaaa.....) that was so long without any whitespace that exceed the lenght of the div. Right now that word gone pass the right border of my div. Is there a way to style it so the word will not pass the right border and actually moved to the next line? I was thinking about changing the div as display table but maybe I don't want to do that and not sure if that will do it as well. The reason I don't want to use display as table because it's not compatiable to older browser. Is there any way to prevent this type of behaviour? Thanks. I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09 I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move. Here is one of the examples: Code:
#homepage-bar h2.construction {
position:fixed;
top:225px;
left:505px;
}
I tried changing to position: absolute; I also tried to use percentages on the left: I know this is easy, but I can't find the fix after googling for 30 minutes. Help! Hello. So I have this situation (on the right): h t t p : / / img339.imageshack.us/img339/6958/1stb.png and when I change my browser resolution, I get this (on the right): h t t p : / / img35.imageshack.us/img35/3892/2ndhw.png Is it possible to do that the image wouldn't change the place on a screen even you when change the resolution of the browser? And yes, the image must be behind the text. Thanks in advance for any suggestions and tips. Hi there www/argyllplotsforsale/co/uk I am currently building a website. I managed to get the CSS working before I uploaded it on the server. I have a header image above the orange Nav Bar. Soon as I uploaded it to the server it doesn't display and I am so confused. The style sheet in question is argyllplotsforsale/co/uk/style.css I cannot understand why the image is not displaying. Help would be greatly appreciated. Thanks Cakeface Hi Guys, I am new to CSS, i have an image (attached) and it will not display as a background image. The other images I have will no problem. It is def something about the image because i have renamed it e.t.c Could someone help? Image is attached! Can you get it to display? Charlie the page is http://www.mostardesigns.com/fmrehabv2/ as you can see in FF it shows up right but in IE the little menu splitters on the left menu are like 10px high instead of 2px for some reason, help! thanks in advance. |
|||||||