|
CSS - Span Tag - Isolate From The Main Stylesheet
Hi,
This is probably an easy question, but I can't seem to find the answer. I have website created and linked to a stylesheet that controls the way all my links display. On one page I have a link that I want to display differently. So I am using the span tag. Now I have the color correct, just not sure how I put in the active link and visited link within the span tag, etc... Heres what I have done so far. <a href="index.html"><span style="color : white; ">Index Page</span></a> Hope someone can help. Thanks Similar TutorialsHello - I'm having trouble with the layout of a site I'm working on. Here's the site in question: http://www.americanidiotsband.com/ If you look at it in anything up to 1024x768, it's fine. But if you go higher than that (say, 1280x1024 resolution), then the main (black) part of the page goes only as far down as the content that is filling it. What SHOULD happen is that the black background should span all the way to the bottom, no matter how much content is inside it... Here is a link to the stylesheet that I made up: http://www.americanidiotsband.com/styles.css I'm sure I'm doing something wrong, and I'm hoping that someone could help me correct this. Thanks in advance for any help that can be offered!... Quote: Dan Cederholm of SimpleBits: It's important to note that the cascading effect of CSS still applies, and alternate style sheets work just like any other style sheet, in that only common rules are overridden when the alternate styles are active. So if we had layout, positioning, and other site-wide rules in default.css that weren't repeated in the alternate style sheets, those default rules would still work. I'm making a site that has a default stylesheet with a fixed layout and an alternative one with a fluid layout. The problem I'm having is the alternative sheet not inheriting css from the default stylesheet even though the rules are not overridden. At the moment, my alternative stylesheet is an exact copy of the original (everything included) with only 3 width values changed to percentages. Theoretically, I should be able to only include these three rules alone in the alt sheet, as rules are carried over from the default sheet unless overridden. However, when I do try to reduce the alt sheet to just: Code: #container { width: auto; }
#main { width: 65%; }
#navbar { width: 30%; }
all unincluded formatting is lost. Am I doing something wrong? Cheers, Sam. I have a very strange problem. My firefox is ignoring the changes I made to the style sheet. I have this in my webpage and the style.css file location is right (one directory up). <link href="../style.css" rel="stylesheet" type="text/css"> Because it's ignoring my new changes, I deleted everything in my style.css file, and the page still displays as though the file exists. However, if I delete the above line, then the page will display without any style. IE is loading with the changes I made though. I have also checked my stylesheet with the W3C css validation and it has no error. So, any body know why this is happening? Hi I'm struggeling with the following: I have some span elements inside a td. If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td). Why does that happen and is there a way to make the td to autogrow to fit all the span's inside? Se example code below Code: <table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;"> <tr> <td style="background-color:gray; text-align:center; border:1px solid black;"> <span style="margin-right:20px;">First</span> <span style="margin-right:20px;">1</span> <span style="margin-right:20px;">2</span> <span style="margin-right:20px; background-color:orange; padding:10px;">3</span> <span style="margin-right:20px;">4</span> <span style="margin-right:20px;">5</span> <span style="">Last</span> </td> </tr> </table> ******* UPDATE ******* I found this link today: http://css-discuss.incutio.com/?page=FormattingContexts which says (among other things): ************************* Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up. Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it. ************************* So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above? Is there any working workarounds for this...? i have <div class="h">this is type 1</div> <div class="h offer">this is type 1 with backgroundA</div> <div class="hd">this is type 2</div> <div class="hd offer">this is type 2 with backgroundB</div> how do I achieve the CSS for accessing only divs with a class of h AND offer? thanks in advance site: here calendar page: here css: here calendarcss: here (though I shouldn't need to change anything here if the #content and #left are working as I want) Wow... I'm almost done with the general layout... I want the #content to be "independant" of other things on the page, but to fall under the navbar... See the calendar page for an example of what I mean... it works in FF (that I've seen so far), but in IE the top week is slightly shifted Right because of the Left side navigation... Basically, I will be using this for a template, and I want to be able to independantly design the content that goes in the content div, without worrying about other elements on the page... how can I make sure this happens... I thought I would/should use position:relative in the content div, but that totally messes up the calendar... maybe there is something to change in the calendar.css so I can use the relative position in the content (as that would allow me to position things within the content div where I want right?) If I am totally off base, please let me know... Thanks Bryan 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> I was wondering does anyone know where I can obtain the Internet Explorer 6 stylesheet for Windows XP? The UI components in IE6 look different in Windows XP than IE6 for Windows 2000. I would like to obtain the stylesheet if it is available somewhere. Thanks for your help. Val I have three different css Stylesheets. Now I want to give access to my users to change their required styles using dropdownlist. And next time when the user is login in the same last selected style sheet should be displayed to him. How can i do this please help me its urgent ? Can you only exclude elements from a Print stylesheet? I'd like to print only a table of data and nothing else on the web page in a print style sheet. Hello All, I was hoping that you could look at a site for me, and help me figure out what is causing the rendering issues in IE6/7. I have a separate CSS stylesheet for anything that is IE7 or lower; however, I am not sure if it is actually loading at all. I don't really have access to IE6/7 in a live environment, to check everything about the site, so if anyone has any suggestions for tools that will allow me to work with a live view of IE6/7 that would be a great help as well. The site link is: http://www.saracanada.com/ Thanks in advance everyone. Hey all, a few probs here. My new webpage coded with stylesheets: http://www.stocksbridgepentaqua.co.uk/test/index.php It looks good in IE and bad in FireFox (mozilla) its not a major problem because the ppl im targetting are using IE. Next, on this page: http://www.stocksbridgepentaqua.co..../index.php?id=9 I want a scroll bar in the actual window instead of it making the box massive. And another thing, how do I make a space between the bottom of the website and the bottom of the browser? Thanks. Jack. ok the stylesheet contains this: BODY, TD, TR, P, UL, OL, LI, INPUT, SELECT, DL, DD, DT, FONT { font-family: Verdana, Arial, Clean, Helvetica, sans-serif; font-size: 12px; } and I need to add this into it BODY { scrollbar-face-color: #DEE3E7; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #DEE3E7; scrollbar-3dlight-color: #D1D7DC; scrollbar-arrow-color: #006699; scrollbar-track-color: #EFEFEF; scrollbar-darkshadow-color: #98AAB1; } Ok here's what I don't understand. The original stylesheet(used by a php script) contains lots of things at the top separated by commas. Does that mean that it will affect all of those things? So I have to do this? BODY { font-family: Verdana, Arial, Clean, Helvetica, sans-serif; font-size: 12px; scrollbar-face-color: #DEE3E7; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #DEE3E7; scrollbar-3dlight-color: #D1D7DC; scrollbar-arrow-color: #006699; scrollbar-track-color: #EFEFEF; scrollbar-darkshadow-color: #98AAB1; } TD, TR, P, UL, OL, LI, INPUT, SELECT, DL, DD, DT, FONT { font-family: Verdana, Arial, Clean, Helvetica, sans-serif; font-size: 12px; } Sorry about the newbie question, but I gotta start some where. I'm fairly new at web development and pretty much a newbie at using CSS. I noticed on foxnews.com that they use a parameter with the CSS file. I've did searches on this but not turned up alot. Code: <LINK REL=STYLESHEET TYPE="text/css" HREF="/css/mainStyles2004.css?v2"> <LINK REL=STYLESHEET TYPE="text/css" HREF="/css/rootStyles.css?v3"> I'm assuming the ?v2 and ?v3 are PHP like paramters. I looked at the CSS file using the firefox web developer toolbar and I didn't see any referance to v2 or v3 in those files? Can anyone explain this to me? Hiya, theres a website I'm creating a print stylesheet for which includes the company logo in the header, with a footer of contact details. problem is, the website is all static pages and 100 odd pages, so as I'm having to deal with the static state of the site for now, is there a way I can have in the Print stylesheet or in the CSS where the logo can be inserted in a header and a footer created with text? hope this makes sense? On the one hand Accessibility guidelines state that sites should work even if stylesheets fail to load... ... and then on another hand, you're told not to include any style/layout/formatting within an html page - to use the stylesheet instead. My question is this. Say i create a site which is arranged in the common layout of header at top, nav menu floated to the left, main content sitting on the right, and then footer below. Should the layout of the div's, namely the float left etc be within the webpage or the stylesheet. I guess most people will say stylesheet, but that means if the stylesheet fails to load, the site layout will be completely messed up with the content appearing below the nav menu. Do you make an exception in this case and include some limited layout-style information in the webpage? What are people's opinions on this? Hi people, I am completely new to programming and have only spent this weekend learning it! I have managed to create a decent website already, however i am stuck at a point. On my main page, i have attached a CSS stylesheet with all the formatting for my page. My problem however is that when i try to format one section (<div id="gallery">) the formatting messes with the rest of the page. Is there a way that i can assign a style sheet to only that <div id="gallery"> without it applying to the entire html page. Any help is greatly appreciated! Thanks Chris Hi Could someone assist me in making a print stylesheet for this site please! http://calibrehr.com/new/ What I need is: just the logo to display (remove nav) The text in the orange block to span the width of the page Remove subnav Some how diplsay the text that is in the purple boxes below the main content text I am stuck as to what to do and could really appreciate some help Many thanks! Hey, I've run into a problem where I though i knew how to do it an easy way but it only worked for about 5 minutes. Here is what I have. All of my pages have the same navigation from an external PHP file. The style is saved in the main.css stylesheet. When you select a link it gets a background image. I thought that I could save my self having to edit every page for IE by doing this in the main.css stylesheet Code:
* html>#navwhatever{
/*set to gif iamge instead of PNG image*/
background-image:url('image/splash_legion.gif');
}
This doesn't work. It still uses the PNG images. I'd realy like not to have to edit every page to fix my site for IE, any suggestions would be great. Thanks for reading Hi, I'm pretty new to this so not 100% sure what I'm talking about. I'm trying to complete a university project, in order to do so I have to move images using a style sheet and have done so successfully so far but today when trying to move my rollovers the stylesheet didnt move my images. Previous images I moved worked but the new ones dont. Any help would be greatly appreciated! Thanks! |
|||||||