|
CSS - External Or Inline Style?
Hi. I've places where a div have style="display: block; float left;" and it's only on 1 or few pages. As I go on it still I'm doing this frequently but if I added to the external style it will grow as well but the reason why I do it inline because there isn't much style for a set of div.
Also when you specify a external style then is that means it will load once and stay in cache when it loads a page that re-use the external? I'm not expert in CSS and want to know what's the best approach. Thanks. Similar TutorialsHi, I have a strange problem where an inline style works, but if I put it in a new style class, it won't! Here is the CSS for a menu list: Code: #menu li{
vertical-align:middle;
height:2em;
padding-left:7px;
padding-top:6px;
float:left;
margin-left:25px;
background-color:#8D8387;
display:block;
}
And then I want to apply this to the first list item: Code: .noMargin{
margin-left:0;
}
When I apply that class to the list item, nothing happens. However, when I use the inline style: style="margin-left:0;", it does work. What's going on? Thanks I have this tag in an external css file Code: td {
text-align:left; //and yes i know that its left by default
}
Inside my html file I have a td with alignment set to right, which according to my understanding should override the external css file, however it doesn't. The content is still left aligned. Why is that? Thanks I'm using an external style sheet with: p{ text-align: justify; } Within myfile.html I have: <p align="center">My paragraph</p> <p align="left">My paragraph</p> <p align="right">My paragraph</p> I assumed that the html inline would take precedence over the external css but it is not; all of my <p> text is justified! Why? I'm a nube with css and I'm testing. I'm not planning on using the html align, but, if necessary I'd like to know why it is not working as I thought. If I remove the style sheet reference then the <p> statements do work. Help. Is it possible to apply an A style inline? Eg inside a tag? You can do this obviously: Code: <div style="background: url(blah.gif);">blah</div> But is it possible to apply an A (anchor) style in the same fashion. I do have a very valid reason to do this; being that I need to slide a background image using background-position, but the image is not known until the page loads..... Thanks for any pointers. Hi, This is a bit of an odd one but I am working with a shopping cart softwear which generates the html table in the code bellow, including the SELECT section and its formatting. I would like to change the apearance of the select box but I carnt edit any of the code in the table. I can only edit the containing div. Was wondering is there is a way of overwritting the inline style. Thanks for any pointers. Code: <div id="options"> <TABLE BORDER=0 WIDTH="100%" > <TR> <TD WIDTH=100> Choose a colour </TD> <TD> <SELECT STYLE="font-family: Arial; font-size: 9pt; background-color: #FFFFFF; color: #000000;" NAME="variant_Choose a colour" ID="variant_Choose a colour" MAXLENGTH=5 onChange="javascript:Variants_ProductsOptions();"> <OPTION SELECTED VALUE="Black">Black </OPTION> <OPTION VALUE="Red">Red </OPTION> </SELECT> </TD> </TR> </TABLE> <BR> <div> Can you have both inline styles AND a linked style sheet? would this cause confusion? I have the following defined in my css file: Code:
table {
border:1px dashed #999;
}
And the following code interspersed throughout other parts of my code: PHP Code: echo "<table nowrap border=\"0\">"; The problem I have is that the border is still appearing around these tables where I have specified no border. As I understand, the inline style should take precedence, right? Is this a php issue? Or am I doing something else wrong? Hello I'm having trouble with displaying a background image in a div. It worked fine with embedded CSS but when I changed the CSS to external, the text loads but the bg image doesnt. I'll post some code to explain it... This is in the external style sheet: #navbgtop { position:absolute; left:38px; top:185px; width:194px; height:18px; z-index:2; background-image: url(images/navbartop.jpg); } and yes of course I have made the proper link to it in the <head> tag: <link rel="stylesheet" type="text/css" href="css/nav.css" media="all" /> For some reason the background image wont display. Any ideas? One more question also, does it matter if I use media="all" for the whole website? Or do I even need to bother using media=xyz ? I heard most browsers don't even read that as of yet. Ok, I just started a new website. I have been putting all of the html on every page. So, when I change one small thing on my Nav Bar, I have to go to every single page and change it! There has to be an easier way, right? Isn't it by using external sytle sheets? I tried this code in my homepage, but it isn't working: Code: <head> <STYLE TYPE="text/css" MEDIA="screen, projection"> <!-- @import url(http://www.freewebs.com/ohhdanggggraphics/BASIC.css); --> </STYLE> </head> Basically on my site the only thing I want to change from page to page is the information in the center table. How would I do this? Thanks for your help My Website Is there anyway to make GoLive automatically apply styles to external style sheets rather than internal? Is this possible? Currently onclicking a dynamically created option in my select menu an URL is sent to change the .src of an IFRAME. The external content in the IFRAME does not match my site (it's a portal) style (bg, alignment, font etc.) I want to make it fit in but ofcourse cannot set attributes to external pages. Can the URL be loaded in a 0 size frame or hidden IFRAME and it's contents, the source code, be taken on load and put into a new div tag on my own page with the neccessary style additions? Notably the URL source has it's own style.css, is an alternative to change the href of that style.css onload? =D Mark. I swear I've done some searching on this but I haven't been able to find a satisfactory answer. I have a style sheet in the root of my site with this declairation in it: Code:
#nav
{
float: left;
width: 190px;
height: 600px;
min-height: 600px;
margin-right: 10px;
background-image: url(images/gradientBg.jpg);
background-repeat: repeat-x;
}
The file the id="nav" is in is being included in the index.php page that's being called from the root also. So we have a structure that looks like this: Code: /root styles.css index.php /includes nav.php /images gradientBg.jpg The stylesheet is being included like this Code: <link rel="stylesheet" type="text/css" href="/styles.css" /> Now for my problem... The styles and backgrounds all show as expected in Firefox. However, in IE any of the styles that apply to files from the /include directory like nav.php are not followed at all. I find it hard to believe that my only option is to make the styles inline but I'm not sure what else to do at this point. Thanks for staying with me this far and for any advice. I need to modify an external style sheet so that background images on each page can be changed. Please help Hi All, How can i apply style to following table? Class attribute is not working. following is the code. function links(){ var xmlDoc=new ActiveXObject("Microsoft.xmlDOM") xmlDoc.async="false"; xmlDoc.load("ticker.xml") ; xmlObj=xmlDoc.documentElement; nodes=xmlDoc.documentElement.childNodes; document.write("<table border=1 align=left >"); for( var count = 0; count<nodes.length; count++){ document.write("<tr>"); document.write("<td>"); document.write("<a href='" + (xmlObj.childNodes(count).getAttribute('URL')) + "'>" + (nodes.item(count).text) + "</a><br>"); document.write("</td>"); document.write("</tr>"); } document.write("</table>"); } Please guide me for the same. Thanks in advance I've been involved in building an intranet site with about 1200 pages. Now that it's been launched we've found problems in printing many of the pages - there are blank pages printing before the content, probably because of floated divs being pushed down when the width is restricted to A4. (That's a guess). Now I know that what we should have done was create a print style sheet which would have solved this problem easily, but if we do that we'll have to place the link to it in every page, which involves quite a lot of signing-out of 1200 pages etc. I'm prepared to do that if there isn't another way but I wondered if there's any way the existing external style sheet can be amended so it loads (imports) the print styles dependent on some statement or other. I'm doubtful, but if anyone knows of a method that involves editing the one stylesheet rather than the 1200 pages I'd love to hear it! Hi. In my external style sheet i have this: Code:
body
{
margin-left: 100;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}
I am completely new at CSS and am only doing it because supposedly my tables are out of fashon! Thanks Matt Hey, I'm a CSS noob, and I'm having some trouble with centering the content of my page. When I have the coding as an internal style sheet the page is centered, but when I put it in an external style sheet it looks the exact same...except for that it's left aligned. All I do is copy and paste it, but it change the layout around? Any tips? I hardly ever use css for thimgs like backgrounds, but I have a freelance client that has alot of interesting ideas about how a good website should look so I'm trying to make him happy. When I have: body { background: url('resources/assets/background.jpg') no-repeat bottom left; } in the extranal css it doesn't work. If I put it into the page it works fine. None of the online css resources I've looked at mention why this should be. I've even tried using the complete http://www.server.com/blah/blah/ address and I get the same results. Does this just not work from an external css, or am I missing something? Thanks y'all. 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? I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 |
|||||||