|
CSS - Durring Development Style
Hey everyone,
U have been developing a website that is modular based. It revolves around, PHP, HTML and CSS. what I've been doing is using an HTML <style></style> section at the beginning of every PHP file. what I was wondering is, is this normal practice. What I plan on doing is creating an individual stylesheet for each and every PHP page once the site is complete. I find this lets me control the style of the website more systematically. For example. My index.php page is pretty much just a bunch of php includ statments. ech of which have a set of <style> and </style> tags at the beginning of each file. These style statements only contrl items that are listed in the file. For my menu, everything starts with #menu, which is a div of the menu, I find this a very easy way to keep track of what style controls what. So when I'm working on the menu, all I have to do is go to the top of the file and edit the style statement. If everything works out right, I plan on moving it all to .css files that are imported to a default.css file which is called in the <link> statement. Is this normal practice or is there an easier way. I find this very easy to keep track of things but if there is an easier way, I am glad to hear about it. Similar TutorialsI was wondering if it was possiable to have a DIV that stays in the same place on the screen when the user scrolls. I have seen this done and would like to do it. I think it would involve using the z-index to raise the div and then position it realitive to the visiable part of the screen. I can figure out how to position it however. Thanks for any ideas. 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 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! How would you go about creating a navbar like the one Red cross uses on the left side for generic website mapping? Red Cross Example Is this pure css with dual images? Or is this done with some effect with other forms of CSS (or even DHTML?) on my site I have a list with the UL Class of threads. I am not good with CSS at all I have this Code:
#threads {
padding:0;
margin:0;
}
#threads li {
list-style:none;
border-bottom:1px dotted #ccc;
display:block;
padding:2px 0px 2px 13px;
background:url(images/sub.png) no-repeat 0 0px;
}
not doing what I want, my site is mypricesavings(dot)com you can see the list on the homepage under Recent Activity, I'd like to make it so that the avatars line up on top of each other and a line between each one like the featured section located on this site, however, without the scrolling. http://demo.colorlabsproject.com/?theme=arthemia-premium thank you for attempting I did a web page for a company and it looks fine in ie7 where I tested it. The problem is when viewed in IE6 its like it ignores the sizes I put in. The box appears too big in IE6 and is the propr size in IE7. Is there any way to fix it so it would look the same in IE6 as IE7? Hello, In the css below, why I can't set it on the same time? Code:
background: #FFF url(../images/main_bottom.gif) no-repeat bottom ;
background: #FFF url(../images/main_top.gif) no-repeat top ;
I was reading a tutorial were they always style both <tr> & <td> with the same thing... Is this needed? Or do you just need to style <tr>? Code:
table.navigation tbody tr.odd {
background: #252525;
color: #fff;
}
table.navigation tbody tr.odd td {
background: #252525;
color: #fff;
}
Hi all, I was wondering if anyone could help me create a new bar similar to that on DeviantArt. I've had a shot at it, but mine shifts when you put the mouse over it and I don't know why. There seems to be enough room for it etc. Here's my homepage so you can see what I mean - http://www.ltheobald.co.uk Here's what I have so far... Code:
HTML (cut down version - just one button):
<table height="100%" width="100%" cellspacing="1" cellpadding="0">
<tr height="34px">
<td class="NavHolder">
<div class="NavButton" onmouseover="this.className = 'NavButtonOver';" onmouseout="this.className = 'NavButton';">
<table class="NavButtonTable">
<tr>
<td class="NavButtonPic">
<a href="index.php"><img src="images/home.gif" alt="Home"></a>
</td>
<td class="NavButtonText">
<a href="index.php">Home</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
CSS:
.NavHolder {
padding: 3px;
background-color: #AACCFF;
}
.NavButton {
float: left;
}
.NavButtonOver {
float: left;
background-color: #8CAAD4;
border: 1px solid black;
}
.NavButtonTable {
padding: 0px 5px;
}
.NavButtonPic {
}
.NavButtonText {
vertical-align: middle;
Font-Size: 11px;
}
No idea why NavButtonPic is there. I'll remove that later. Anyway, can anyone see from this why the buttons are shifting? Also if anyone can tell me how to get a rounded rectangle border like on DeviantArt (http://www.DeviantArt.com), I'd like to know. Thanks, Lee Hi, I have a style sheet which works fine on my mac, but not on my PC in IE7. I know how to substitute stle sheets based on browsers, but here's the issue at hand. I have 2 styles for the <ul> which follow: ul.nav{ clear:both; width:192px; padding: 0px; display: block; background-color:#000000; margin-top:-11px; margin-left:0px; float:left; } and ul.bodyText{ font-color:#000000 font-size:12px; font-family:helvetica, arial, sans-serif; } it appears that "ul.bodyText is taking on the characteristics of "ul.nav" Or, for some reason, the <ul><li>'s in my Mac look fine, but on my PC, they do not have the indent preceeded by the dot. Here's the site http://www.caillouette.com/NewestSelvan/English/aboutUs.php can anyone tell me why? thanks -Sean I have not done much web designing lately and have forgoten a number of things. Right now i cannot remember if it is possible to specify link styles for a specific class for a cell in a table. I have this code for the entire page: a:link,a:active,a:visited,a:hover { color : #FFFFFF; text-decoration: underline; } However, I want to have it different in only a specific cell of a table. Is there a way to put it in the following code? td.newshead { background-color: #013501; border-style: solid; border-color: #FFFFFF; border-bottom-width: 1px; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; font-family: verdana; font size: 125%; font-variant: small-caps; font-weight: bold; color: #FFFFFF; text-align: center; } I can't do something like making another link class like this either a.class:link,a.class:active,a.class:visited,a.class:hover { color : #013501; text-decoration: underline; } I have the information comming from another page and I am not able to the <a class="class" href="url">. I need to put it in the style for the cell. Anyone able to help me out here? Hi, I'm new to CSS and am trying to design my blog template. For the styles, I have this so far: Code: <style type="text/css">
#navbar-iframe{display: none;height: 0;}
body{background: #FFFFFF; font: 13px arial;color: #999;line-height: 150%;}
.left { width: 460px; text-align:justify; }
.right { width: 180px;font: bold 11px arial;color: #c8c8c8; }
.navigations{
background: #6a6a6a; text-decoration: blur; padding-top: 1px; border-bottom: 3px solid #666 ;float: right; width: 190px; font: 28px arial; color: #aaa; line-height: 200%;text-transform: lowercase; letter-spacing: -2px; }
.navigations :hover{
font: 28px arial; text-decoration: none; padding-top: 1 px; border-bottom: 3px solid #666; float: right; width: 190px; color: #F2EAEA;
background: #777; line-height: 200%;text-transform: lowercase; letter-spacing: -2px;
cursor: crosshair }
.cloud { font: 26px georgia;letter-spacing: 1px;color: #BDA28F }
.icon {border: 20px solid #eee; width:100px; height:100px;}
.h1 { font: 20px times new roman;color: #FD0479; letter-spacing: 0px; line-height:18px;text-transform:uppercase}
.h2 { font: 12px arial; color: #6a6a6a; letter-spacing: 1px; text-transform: lowercase;padding:4px;background: url((URL address blocked: See forum rules)); }
.h3 { font: 12px arial; color: #6a6a6a; letter-spacing: 1px; font-weight:bold;padding:4px;}
a:link,a:active,a:visited {font: 12px arial; color: #aaa; border-bottom: 1px solid #6a6a6a; text-decoration: none;text-transform: none;letter-spacing: 0px; }
a:hover { color: #8BC4C4; border-bottom: 1px solid #e8e8e8;background: #f2f2f2; text-decoration: none; cursor: crosshair}
b { color: #BE0304;font-weight:bold; }
i { color: #FA727C; }
s { color: #ddd; }
em {font-family: georgia}
blockquote{ color: #999; background: #f5f5f5;padding: 8px; }
</style>
But I can't seem to get the hover navigations to change background colour and text colour. What am I doing wrong? Thanks! hello there. I place a class="titlebg2" on tables on my site in order to give them the nice background image, font, etc ... yet, on a specific table, I would like to overcome the font-size. how could this be done ?? I tried placing the following before the table in question, Code: <div style="font-family: Times; font-size: 12px"> but this did not work. any help ?? I have links at the bottom of my site, similar to the links at the bottom-right corner of this forum. The links are white, except when hovered over they turn grey. Now my problem is that each time you look at a page, at least one of these links will not show the grey hover effect, they'll just stay white. I've tried this in Firefox and IE 6 with the same results. It can't be my coding because the links do this at random. Anyone ever come across this? *Here's the HTML and CSS code <td height="27" valign="top" background="images/bottom.gif" style="background-repeat:repeat-x"><div align="center" style="padding-top:11px" class="links"> <a href="/">Home</a> | <a href="company.php">Company</a> | <a href="order.php">Order</a> | <a href="support.php">Support</a> | <a href="clients.php">Clients</a> | <a href="legal.php">Legal</a> | <a href="privacy.php">Privacy</a> | <a href="sitemap.php">Sitemap</a></div></td> .links a:link { color:#FFFFFF; text-decoration:none; } .links a:hover { color:#CCCCCC; text-decoration:none; } .links a:visited { color:#FFFFFF; text-decoration:none; } .links a:active { color:#FFFFFF; text-decoration:none; } Hey Guys, I'm trying to apply a style to all the TD's within a class of TR's. I am having trouble making the changes apply to the TD not the TR. How can I do it? Thanks! Again I have arrived with yet another inquiry regarding tableless layouts. I have been tasked with the creation of a fairly complex calendar application. Creating this using tables would be no problem for me, but I am wondering if this is what I should be doing. I remember hearing that you should only display "tabular data" using tables, which would imply that I should be using divs and the like to create this app, not tables. Does anyone have any resources that specifically tackle the task of creating a calendar using CSS techniques? I feel that I could do it, but I just need a basic approach to get me started. The biggest issue I am having is regarding the days dropping down to a new "row" after seven boxes have been displayed. I can provide no code, obviously, since I haven't started yet. I'm just merely looking for some insight. Thanks in advance! Hi people, What is the equivalent of this div style attribute in css? <div style="overflow: hidden; position: absolute; left: 0px; top: 0px; width: 500px; height: 300px"> Its the overflow what I'm looking for. -just edited this that I have the solution sorry beginners corner Hi all i am currently in the process of playing with "display: table-cell" and such instead of tables and i am wondering how you can get a table-row to span across the table cells below it instead of just the first one? Is it possible to set up a section of a page to not have the sylings the rest of the page has? e.g. a div? I have a page which has a linked CSS sheet for the template. I also have the content running from a CMS. I want the content from the CMS (from MySQL to not have any of the pages syles enforced onto it. Is this possible? #null { ????? } <div id="null"> CMS CONTENT HERE </div> |
|||||||