|
CSS - Control The Display Of Text
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 Similar TutorialsI am using a Body{...} style on my page (background set to black #000000) and DIV's inside Tables inside DIV's and when I set up and use a .14 (14px size and white color font syle class) my text stays black! The only thing that works is "inline styles". Not good for site wide-control. There is obviously a conflict here or something is superceding my classes. I prefer to use CSS for font control. I am using div's because of a "jquery slider" and tables because I usually design the look in photoshop and then use slices... not doing that on this site, but it's just what I'm used to. Thanks for any help. single page site is here "petermarsphotography dot com" 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 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. 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 I 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;
}
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 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 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. 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! PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } Hi, I'm having a slight problem with my css. I want to display a comment with a number of images to the right of it. e.g "Excellent" plus 5 stars next to it (note: images of stars) so i tried this: Code: <div id = "commentText"> Excellent </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "commentText"> Fantastic </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> css Code:
#commentText
{
font-size: 100%;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding-left: 30px;
}
#star
{
display: inline;
height: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}
I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason. Any help is appreciated to help me get the desired effect. Thanks! I want to use the following script found here. I want to alter it so that on rollover a DIV is shown instead of the IMG. Within the DIV will be the IMG and some copy. I have tried to do this but always end up with the rollovers not placing correctly, or the copy shows at all times. Thanks for the suggestions and help. Hello everybody, I not an expert in CSS but getting better at it. I'm trying to control the look and feel of a table but its not working. Any help you can give me would be greatly appreciated. <div id="page-container"> <div class = "data_table"> have the table all setup and some css works and some done. </div> </div> Quote: <body> <div id="page-container"> <div class = "data_table"> <table width="760" border="1" cellpadding="0" cellspacing="0"> <tr> <th> Ticket # </th> <th> Description </th> <th> Created </th> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://www.yahoo.com/');"> <td> 473875 </td> <td> unable to install network card </td> <td> Dec.03.07 </td> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://www.microsoft.com/');"> <td> 474723 </td> <td> Need help setting up my router </td> <td> sept.03.07 </td> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://Imar.Spaanjaars.Com/');"> <td> 463175 </td> <td> Need microsoft word training</td> <td> Jan. 07.08 </td> </tr> </table> </div> </div> from external css file Quote: #data_table .table { border: 1px solid black; border-bottom: 1; border-left-style: solid; } #data_table .th { border: 1px solid black; border-bottom: 1 solid black; background: lightgreen; } #data_table .td { border-bottom: 1px solid black; border: 1; } Hi I am making a website where i have a main heading on all pages' start. I want to control its looks with CSS, i have an external CSS that controls links and body text etc. i have tried in external CSS Code: H2 {
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFCC99;
}
and on pages i use <h2> heading is here </h2> but it doesnt make any difference and the main heading is also shown as the normal text of page body according to stylesheet. Please shed some light on this... thanks Hello I have the following CSS rule for some text: .Text { font-size:13; color:#2C506A; font-weight:bold; } When the browser renders it, it uses anti-aliasing to give it a better look. I am interesting in displaying the same text without anti-aliasing. Is this possbile via CSS? is there a way to tell the browser to not anti-alias the text? If so, how? regards Hello, I have not used CSS very much, so this may be a fairly simple problem. I want a table to be 800px wide, and 'centered' in the screen (like msn page appears when you open it at any resolution greater than 800x600). Then I have a TD whom I want to be 150px wide, how can I achieve this affect just by typing: Code: <table class="masterTable"> and Code: <td class="masterCell"> Hello I am looking for the correct way to control the alignment of elements in my HTML page. in the old days, I used to add the <center> tag whenever I wanted to center some content. if I wanted to set the alignment of content inside a table cell, I would use <td align="left"> or <td align="center"> I also noticed the CSS rule text-align. My question is, what is the correct way to use CSS to align elements so that it adhere with strict DTD rules regards Hello I know that on IE I can control the look of the scrollbar via: * scrollbar-face-color * scrollbar-highlight-color * scrollbar-shadow-color * scrollbar-3dlight-color * scrollbar-arrow-color * scrollbar-track-color * scrollbar-darkshadow-color Is it possible to control its look also in Firefox 1.0 and Opera 7.54? regards |
|||||||