|
CSS - Seperating Layout From Colours
Hi,
I use blog software (Wordpress) to run my site and this allows me to use different themes. I have created three themes that are exactly the same except for the colours used. I would like to seperate the layout definitions from the colour definitions so that I can call the layout css on all of them and then call the required colour css. I have tried taking out all references to colour and then putting those references into a new css and then calling that but unfortunately it didn't work. I am presuming that some definitions require more than just colours. Can somebody help seperate the layout from the colours for me? I'm sure there are other "issues" with the css, so if anything else is bad please let me know. I have attached the relevant css as a text file. TIA Phillip Similar TutorialsEven though I tag my CSS - it's so large for my site that it's a pain to scroll through and use, even using the search. Is it possible to reference more than one stylesheet from style tags - and have it all work ok? No duplicate classes or anything, I just would like to divide it up into a few different files, but before I do I wanted to know if there's issues with this. Thanks! hi guys, having a few problems laying out div's on my page.... http://www.coltontooling.co.uk/test.php (all the css is in style tags in the page itself) I have one div surrounding all content called wrapper, which just centers the page. Then I have the orange bar and menu bar, and the white div which is called main content. My problem is trying to get the last grey bar to sit nicely at the bottom of the page. I placed it at the bottom of the white maincontent div with a negative margin-bottom, but as you can see (in firefox at least) it hovers almost at the bottom, but not quite far down enough. No matter what I change the margin-bottom to, it will not move down any further. My other attempt was to put it outside the maincontent div at http://www.coltontooling.co.uk/2.php , but as you can just about see it sits at the top behind the maincontent div. I could move it down manually from here but then it wont match any dynamic content in the maincontent box. Am i missing something obvious here? I'm pretty stumped thanks a lot, tom Hi. I've got an element in my CSS such as: PHP Code: .footer { width: 760px; background-color: Aqua; } I'm trying to use it in a table to have the table take on the properties of the .footer element. Currently I'm using it like this: PHP Code: <TABLE class="footer" ALIGN="CENTER" BORDER=0 CELLPADDING=2> <tr><td>MY CONTENT</td></tr></table> Should the bg of the table not be what I set in the CSS element??? how can i colour the scroll bars on my page - i.e. the ones when you have to scroll up and down the page, but also, the ones used within form elements such as drop down lists. I have tried using css, but to no avail. My page consists of two frames - one on the left and one on the right. Thankyou. Hi, Why does the following not change my scrollbar colours? PHP Code: body { font: 14px Arial, sans-serif; color: #18387B; background: #687BA3; margin-top: 5px; margin-left: 5px; SCROLLBAR-FACE-COLOR: #FF9900; SCROLLBAR-HIGHLIGHT-COLOR: #FF9900; SCROLLBAR-SHADOW-COLOR: #999999; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #666666; } Hi, Is there a way to tell the browser to replace certain colours with other colours? For example replace #FF0000 with #00FF00? Also is there anyway to refer to the parent of an element? Thanks, Matthew That's about the height of it. I have been trying to pick colours for the site I'm playing with. I can't find any pastal (my preference - not necessarily the best, I'm still learning) colours I like in the Web Safe Colours. So, I started snooping around the internet . . . mostly to find out how bad it is that I'm not considering IE 5.x when developing. I found this information at Upsdell: Browser News and it appears to be dated Nov 19th 2005. It suggests that ~1% are restricted to the 256 colours. Is this site reputable for information accuracy and is it reasonable to conclude that web safe colours are a thing of the past? Cheers! Hi everyone! I am having a problem with some missing colours and images in firefox. I have validated my XHTML 1.0 and CSS as OK. It looks correct in IE 6.0 but not in FF, i am sure someone will know the answer straight away! address is http://www.wellandpower.net charlie Hi Everyone. I'm a new member and so please forgive me if I don't immediately understand all the jargon. However I have a problem and I was hoping someone might be able to help. I have searched the web and W3 schools but couldn't find the answer I was looking for. I am using strict HTML with an external CSS style sheet. I have a several paged website I am creating for part of a University assignment. I have several links which have 3 colours for 3 states. Link, visited and highlight. These work perfectly. (For me anyway). I have now been told to remove 'circular references'. I understand this to be; If I am on the 'Home' page, then 'Home' is no longer a link. (The cursor turns to a text bar instead of a hand) I have removed href from the html to stop this happening. leaving just <a>Home</a> This is fine, however, the colours that I specified in the css now no longer apply and the text is just black. I have followed the instructions in the web pages that I have seen to retain the colours, or add them to an inline style sheet, but nothing seems to work. I can only achieve adding one colour (but not making it change when visited or hovering) or changing the colour of ALL links. Sorry if this is confusing.. I hope someone can help! The relevent code is below. HTML <head> <style type="text/css"> .homebut a:link {color: red;} .homebut a:visited {color: purple;} .homebut a:hover {color: orange;} <!--none of the above seems to work--> </style> </head> <body> <div class="homebut"> <a>Home</a> </div> CSS /*This is applied to all links but doesn't work when I remove HREF from the HTML*/ a:link { COLOR: #0099FF; text-decoration:none;} a:visited { COLOR: #00FFFF; } a:hover { COLOR: #FFFFFF; } Hi, I'm having trouble with changing the colour of link, vlink and alink in a webpage layer. I use CSS to set the colours in the main page body tag but am unable to change the colour of the hyperlinks in a layer on the same page to a different set of colours. This causes some of links to be unreadable and i'd like to be able to change the colours of the links in the layer but keep the colours on the main webpage. Anyone got any idea how to do this?. Is CSS the way to go?. The website is written in PHP if that makes any difference. Many thanks for any help. Hi guys i am lost big time. ive spend well over 10 hours trying to think, try, to solve this problem. i have got 6 Horizontal CSS Dropdown Menu to make but each one of them must have there own colours , green, blue, yellow, pink etc. and in that the hover colour must match the colour menu that your on at the time i.e be slightly darker. any ideas on how i would do this its driving me mad, ive tryed classes, divs java but am just getting no where Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hi there, I have set up some scollbar colours for IE. I have some scrollable divs that are using the css, but the main scrollbar to the right of the browser does not have the css applied to it. This is my css: PHP Code: scrollbar-arrow-color: #ffffff; scrollbar-3dlight-color: #d4e5ab; scrollbar-darkshadow-color: #517107; scrollbar-face-color: #719e07; scrollbar-highlight-color: #add450; Any ideas why that is? Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? heyya, I'm doing a quick layout, and I'm running into some problems with my floating menu. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background-color:white;
font:normal 1em/150% Verdana,Arial,sans-serif;
}
#container {
width:750px;
padding:0;
margin:0;
background:#FAA;
}
#contents {
width:566px;
margin:10px 0 0 162px;
border:1px solid #999;
border-bottom:none;
padding:10px;
background:#FFF;
}
#contents p {font-size:80%;line-height:150%;}
#menu {
width:160px;
background:#FFA;
margin:0;
padding:0;
float:left;
}
img {border:none}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit. Iriure nostrud qui, vulputate ut aliquip at, amet ut, erat, consequat autem. Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
</div>
<div id="contents">
<a href="#"><img src="bedroom-furniture.jpg" width="566" height="250" border="0" alt="" /></a>
<h3>Welcome to mook</h3>
<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit.</p>
<p>Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
</div>
</div>
</body>
</html>
readers digest version: I have a 750px container. My content div is 566, plus 2px for the border, plus 20px for the padding. Giving it a margin-left of 162px gives us a grand total of 750. IE seems to hate the padding - when i modify that it works fine - even changing the margin doesn't do anything. and there's an extra 2px between the menu and the contents just in case. So I can't figure why it's bumping down in IE. and i'm using v6, and have the doctype declared, so it shouldn't be in quirks mode. TIA, Greg Hi, i've just started using css and have noticed a small problem in my code - i get a white bar above my header, but i'm not sure how to get rid of it. It only appers in firefox and not ie. my code is index.html Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Computer Aided Cookery</title>
<link href="wecook.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- container -->
<div id="container">
<!-- start wrapper -->
<div id = "wrapper">
<!-- start header -->
<div id = "header">
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<!-- start nav -->
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<!-- end nav -->
</div>
<!--end header -->
</div>
<!-- end wrapper -->
</div>
<h4> Copyright xyz.co.uk. 2006-2007 All rights reserved </h4>
<!-- end container -->
</div>
</body>
</html>
css file Code:
/* general html element formatting */
html, body, table {
font-family: verdana, arial, sans-serif;
font-size: 7pt;
color: #000000;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 10px 10px 10px 0px;
text-align: center;
}
h1 {
font-size: 150%;
margin-top: 0px;
}
h2 {
font-size: 130%;
}
h3 {
font-size: 110%;
}
h4 {
font-size: 100%;
}
h5 {
font-size: 100%;
color: #FFFFFF;
}
#container {
background-image: url(images/background_gradient2.jpg);
border: 1px solid #000000;
}
#wrapper {
width: 760px;
height: 600px;
background-color:#FFFFFF;
margin:10px auto;
border: 1px solid #000000;
text-align: left;
}
#header {
width: 760px;
background: #242424;
}
#nav {
border-bottom: 1px solid #000000;
}
#nav ul {
padding: 0;
margin: 0;
background-color:#242424;
}
#nav ul li {
display: inline;
padding: 0;
margin: 0;
}
#nav ul li a {
font-size: 120%;
color: #FFFFFF;
background-color:#778899;
text-decoration: none;
padding: 0px 25px 0px 25px;
border-right: 0px solid #000000;
text-align: center;
width: 9em;
}
#nav ul li a:hover, #nav ul li a:focus {
background-color: #990000;
}
please find attached a screenshot in firefox. Any help is appreciated. thanks! I'm working on converting a website from tables to div's and running into one little issue. The site is a basic header on top, navigation on left, content on right and a footer on the bottom. I would like the navigation div to grow in height to match the height of the content div so that the background fills the left side of the page. I have placed the nav and content divs in a container div and set a min-height on the container. I was hoping that that would let me place height: 100% on the navigation div but it isn't growing ever. Is there a way to get something like this done? FYI, the site is currently at http://users.adelphia.net/~mmorasch/ Hi, Can someone help me with why the content inside of this layout extends past the inner yellow box in IE7? It looks fine in both Firefox and IE6. I just can't figure out what to do to make it work in IE7. http://www.factoryshoe.ca/locations.php I'm trying to figure out if the following layout is possible using css such that it will appear correctly in all "major" browsers: lab.wx3.com/cssprob/layout_challenge.png (sorry, I'm a new user so I can't post the http part) The center column should be fixed width, 100% of browser in height. Values marked as "fixed" would have a defined pixel size. Values marked as "fluid" would fill available space. I know this layout can be done with tables, but I'm at a loss to figure out how it can be done in css. |
|||||||