|
CSS - Text Forced Ontop
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 Similar TutorialsHey folks, Here's the site. Problem i'm having is getting the content up next to the floated menu in IE...it's all good in FF (as per usual), but despite my attempts to clear the float, it still won't line up. Also, the top li in the menu's background image isn't showing up properly in IE...dunno what the deal with that is either. Here's the CSS; Code:
#content {
margin:auto;
position:relative;
min-height:100%;
width:90%;
padding-bottom:20px;
}
* html #content {
height:100%;
}
#menu {
position:relative;
float:left;
width:218px;
height:260px;
z-index:100;
margin:10px 20px 10px 0;
}
#menu li {
width:168px;
color:white;
padding-right:50px;
text-align:right;
}
#menu li strong {
color:white;
text-align:left;
}
#menu li a {
color:white;
text-decoration:underline;
font-size:11px;
}
#menu li a:hover {
color:white;
text-decoration:none;
font-size:11px;
}
#menu_01 {
background:#f7f7f7 url(images/menu_01.gif) no-repeat;
height:10px;
}
Thanks! It's been a long while since I did anything using HTML or CSS so I might be prone to silly mistakes. A site I'm working on is giving me unusual results. The second HR is being forced to the right of the horizontal menu. No other element in it's place does the same thing. Placing another element before it makes the HR positions correctly. index.html 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"> <head> <title>Faithful 32x32</title> <meta http-equiv="Content-Type" content="text/html;charset=uft-8" /> <link rel="stylesheet" type="text/css" href="css/reset.css" media="all" /> <link rel="stylesheet" type="text/css" href="css/main.css" media="all" /> <link rel="shortcut icon" href="images/favicon.png" /> </head> <body> <div id="container"> <img src="images/logo.png" class="centered" alt="Faithful 32x32 logo"/> <h2>A double resolution texture pack that stays faithful to the original <a href="http://www.minecraft.net">Minecraft</a> textures.</h2> <hr /> <div id="centeredmenu"> <ul> <li><a href="#">Main</a></li> <li><a href="#">Download</a></li> <li><a href="#">Mod Packs</a></li> <li><a href="#">Support Us</a></li> <li><a href="#">Credits</a></li> </ul> </div> <hr /> </div> </body> </html> main.css Code:
/* basic elements *********************************************************************************************/
html {
height: 100%;
}
body {
height: 100%;
background-color:#8ca5ff;
background-image:url('/images/darkstone.png');
font: 0.85em Cambria, Georgia, sans-serif;
color:#333;
}
img.centered {
display:block;
margin:0 auto;
padding-top:30px;
}
h2 {
text-align:center;
margin-top: -20px;
font-size: 1.2em;
}
hr {
height:1px;
border-width:0;
color:#175287;
background-color:#175287;
width:638px;
margin:10px auto;
}
a {
color:#3072b3;
text-decoration:underline;
}
a:active,
a:focus {
outline:dotted;
outline-width:1px;
}
/* specific divs *********************************************************************************************/
#container {
background: url('/images/bg.png');
margin:0 auto;
width:800px;
min-height:100%;
}
/* top menu *********************************************************************************************/
#centeredmenu {
clear:both;
float:left;
width:100%;
position:relative;
}
#centeredmenu ul {
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
float:left;
position:relative;
left:50%;
}
#centeredmenu ul li a {
display:block;
padding:0 .4em;
font-size:1.5em;
}
reset.css Code:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Both the HTML and CSS validates. I'd post a link to the site but it's against the rules. Hopefully we can figure this out. Cheers. Hi 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 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> 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 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 I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced. any idea ? tutorial? let me know if i need to explain more. 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. can someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text. I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece 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> Is it possible to have text run around a div positioned with absolute positioning? I'm having trouble with a page I'm working on- I posted here a few weeks ago with something sort of similar. This time, though, I'm at a loss, I've tried several different things but nothing worked. http://www.geocities.com/nny555/eup/newschedule.html As you can see, the div where the content is, the text is stretching right through the div. Is there any way to fix this? Hmm, This is a problem that has plagued me for a while, but just recently decided to find a solution. Basically I like to single out words for empasis on certain pages. Well with EM that's fine. However on a new website I'm coding I need to do (TYPE 1 FONT) (TYPE 2 FONT) (TYPE 3 FONT). All are different decorations. Is there a way to create a tag for each word? Thanks. Based on the questions I see being asked and answered here, I'm concerned many of you will laugh at my ignorance, but here goes anyway. I want to know how to use CSS on just a little text. For example, let's say I want to render One-Two-Three-BOOM as text on a Web page, except that what I really want is for the BOOM part to be in a larger font and bold-faced. Can that be done using CSS? Can I select the BOOM part in Front Page 2003 and impose a CSS style to those four letters and only those four? Everything I try, based on the CSS file I'm using, results in applying the new style to all of the text within a whole paragraph. I want to be able to apply the style to just a little text at a time. As another example, I want to render the following two lines Johnny G. Doe 123 West South Street in such a way that, using CSS to control everything, I can get the second line to appear in a smaller font. I can get it to work if there's a <p> between the two lines, but not if I want to separate them with a <br>. I'm not asking whether it's a good idea to use CSS this way, I'm just asking how to do it. I will try to attach a file to this thread that shows the first several lines of the CSS file I'm using, in case that makes a difference. If this doesn't work, please let me know. Thanks. --Johnny Hi, Howdo you get text and and image on the same line. I want text and 2 images on the same line but the image appears on the next line like a <br> has been entered. There is plenty of room for all data.Each has its own <div>. I'm having problems getting my text to show up on the same line. I'm not sure what I'm doing wrong. Here is my code: Code: <div id="subtitle"><b>What Personal Information Is Collected?</b> <div style="font-size:7px"><a href="#whatinfo">SEE MORE DETAILS</a></div></div> The "subtitle" CSS is external: Code:
#subtitle {
font-family:sans-serif, arial, verdana;
font-size:9pt;
background-color:#cccccc;
padding-left:6px;
}
I don't understand why the "SEE MORE DETAILS" link showing up on a second line? I want it at the end of my subtitle. Thanks for your help in advance. |
|||||||