|
CSS - Css Page Style
Similar TutorialsI have two problems with template I am creating. I could not center the page whatever I tried and for some reason list-style do not appear correct. edit: Actually just realized list styles does not appear at all. http://efetuncel.win.aplus.net/ryt/new/ Howdy; I'm looking to set up a web page that upon clicking the 'next' or 'previous' button, the page will appear to turn similar to that of a book or magazine. here's an example of what i want to do: www.insideeonline.com Even if you could just point me in the direction of a good tutorial it'd be greatly appreciated. Thanks in advance. Hi all, I need to link to a stylesheet and have it apply to the page instead of just opening the css. if thats a bit difficult to understand, lets say for example, for site accessibility, you would have links to 3 types of stylesheets to make the text bigger or smaller... how do you link to the css files without them actually opening the css file? thanks in advance Matty I was screwing around doing some brain storming on an idea for one of my web pages when I accidently hit save. It wouldn't be an issue except it saved the changes I made to my style.css as well! I've been working on the site for a while finishing the last page and now this happens. All my text is the wrong size and is drifting in some spots. I have the an older style.css file I saved like a month ago, however I've made too many changes since then to implement it. I was looking for a way to take the current style.css file I have now and the old style.css and see all the entries that have changed, like debug them. There's so many lines I'd hate to go line by line, I'm using Dreamweaver CS4, however if there is another bit of software that can help me compare the two files and see the differences between the two that would be awesome! Any ideas? Hi all, very new at this so please pardon. I am attempting to format a series of 3 columns (using the CSS holy grail) into the main body of a .asp page. Everything goes smoothly, I have the columns looking exactly as I want them, however the style sheet appears to be causing problems with the header and footer of my asp page. Namely, it has caused the previously smoothed corner images (.gifs) in the header and footer to have a 90 degree thick white border around them. I assume that my style sheet for the body of the page is affecting elements in the header and footer as well, causing them to look odd. Is there a way to have a style sheet only affect part of my code locally and not all of it globally? Or make certain parts of my code immune to the style sheet via some sort of markup? Thanks! FYI for those interested: the style sheet I am trying to use to format my divs (frame(content left, content right, content center and content header)) is body { text-align:center; border:0px solid #000; } #frame { width:830px; margin-right:auto; margin-left:auto; margin-top:auto; padding:0px; text-align:left; } #contentleft { width:175px; padding:0px; left:auto; top:auto; float:left; background:#fff; border:0px solid #000; } #contentcenter { width:480px; padding:10px; float:left; text-align:left; background:#B7C8EE; } #contentright { width:175px; padding:0px; right:auto; top: auto; float:right; background:#fff; border:0px solid #000; } #contentheader { background:#345EA2; width:auto; } p,h1,pre { margin:0px 10px 10px 10px; } h1 { font-size:14px; padding-top:10px; } #contentheader h1 { font-size:14px; padding:10px; margin:0px; } #contentright p { font-size:10px} The .asp page I want to use this style sheet on is <!--#include file="headerauth.asp"--> <meta http-equiv="Content-Language" content="en-us"> <body topmargin="0" leftmargin="0"> <link rel="stylesheet" type="text/css" href="sddm.css" /> <link rel="stylesheet" type="text/css" href="box2.css" /> <STYLE> A:link {font-weight:bold} A:hover {background:white;} A:hover {background-color:white;} A:visited {color:green} A:active {color:red} </STYLE> <!--#include file="footer.asp"--> The sheet appears to be affecting both my headerauth.asp and footer.asp which I do not want it to do. Is there a way to stop it from propogating to both of these other files? Or perhaps wrap the code for each of these in some sort of a tag that tells it not to use the css? 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, I am developing a website for a charity. They deal with people with sight problems so changable text size and background colour would be good. I change text size by switching between stylesheets e.g. style-small.css, style-medium.css and style-large.css. The background I switched by code like this: Code: <a href="#" onClick="document.bgColor='#FFEA00'" onFocus="document.bgColor='#FFEA00'" >Yellow</a> But I just realised that everytime you click a new link or refresh the page you are going to have to reselect your preffered background colour. Anyway I can use the above method again without messing up the switching process? Any suggestions? Thanks I have a print style sheet which has an undesired result. Apparently by default it prints the url (and the page title) at the top of each page. Can I tell it not to do that or is that a browser preference that can't be overridden with CSS? 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 I have a form label styled from an external stylesheet. I don't understand why some style options don't seem to work. For example, setting the width of the label seems to have no effect. But setting the font does work. I assume it is because of some parent div style? The stylesheet is from a template in which I am attempting to make some additions. I'm actually having the same problem with unordered lists. Could someone explain what would cause some style options to be ignored? I can post the stylesheet, but it is rather long. Thanks. 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 hi friends, i have a table with two columns.I have a designed td in stylesheet but it is not take effect.In the normal design view,style is effected but when runtime the changes will not take effect. And also if apply css "class" for td it wont accept instead it accept only property which are given in in style property i.e <td style="bgcolor:blue......"> My CSS is... Code:
.left_column
{
background-color:#d29b28;
width:2000px;
}
.content
{
background-color:#cccccc;
vertical-align:top;
padding-top:10px;
padding-left:10px;
line-height:5pt;
font-family:Tahoma;
}
.caption
{
background-color:Black;
color:White;
}
div.content
{
background-color:Lime;
float:left;
text-align:left;
font-size:20px;
line-height:3px;
font-family: Arial, Helvetica, sans-serif,Tahoma;
}
and my Source Code is...(Which is not take effect) Code:
<td class="left_column">
..............................................
</td>
<td class="content">
<div class="content"><%# Server.HtmlEncode(Eval("question").ToString())%></div>
</td>
If i give the above code <tr> is divided into two <td> with equal width. This code only take effect... Code:
<td width="200" style="background-color:#d29b28;border-style:solid; border-right-color:Black; border-width:1px; min-height:250px;">
...........................
</td>
<td class="content">
<div class="content">
<%#Server.HtmlEncode(Eval("question").ToString())%>
</div>
</td>
what can i do for that...I'm designing in Master Page.. 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! Hi, just writing to get peoples oppinions. i have created a template for standardising the way my collegues at work layout their style sheets. any feedback will be welcome; PHP Code: /* ==== General Rules ==== */ body { } h1 { } h2 { } h3 { } h4 { } h5 { } h6 { } p { } a:link, a:visited { } a:hover { } img { } th { } td { } dt { } li { } /* ==== Layout Rules ==== */ #topBar { } /* ==== Specific Rules ==== */ #topBar h1 { } #topBar h2 { } #topBar h3 { } #topBar h4 { } #topBar h5 { } #topBar h6 { } #topBar p { } #topBar a:link, #topBar a:visited { } #topBar a:hover { } #topBar img { } #topBar th { } #topBar td { } #topBar dt { } #topBar li { } #leftBar { } /* ==== Specific Rules ==== */ #leftBar h1 { } #leftBar h2 { } #leftBar h3 { } #leftBar h4 { } #leftBar h5 { } #leftBar h6 { } #leftBar p { } #leftBar a:link, #leftBar a:visited { } #leftBar a:hover { } #leftBar img { } #leftBar th { } #leftBar td { } #leftBar dt { } #leftBar li { } #rightBar { } /* ==== Specific Rules ==== */ #rightBar h1 { } #rightBar h2 { } #rightBar h3 { } #rightBar h4 { } #rightBar h5 { } #rightBar h6 { } #rightBar p { } #rightBar a:link, #rightBar a:visited { } #rightBar a:hover { } #rightBar img { } #rightBar th { } #rightBar td { } #rightBar dt { } #rightBar li { } #mainContent { } /* ==== Specific Rules ==== */ #mainContent h1 { } #mainContent h2 { } #mainContent h3 { } #mainContent h4 { } #mainContent h5 { } #mainContent h6 { } #mainContent p { } #mainContent a:link, #mainContent a:visited { } #mainContent a:hover { } #mainContent img { } #mainContent th { } #mainContent td { } #mainContent dt { } #mainContent li { } #bottomBar { } /* ==== Specific Rules ==== */ #bottomBar h1 { } #bottomBar h2 { } #bottomBar h3 { } #bottomBar h4 { } #bottomBar h5 { } #bottomBar h6 { } #bottomBar p { } #bottomBar a:link, #bottomBar a:visited { } #bottomBar a:hover { } #bottomBar img { } #bottomBar th { } #bottomBar td { } #bottomBar dt { } #bottomBar li { } #vNav { } /* ==== Specific Rules ==== */ #vNav h1 { } #vNav h2 { } #vNav h3 { } #vNav h4 { } #vNav h5 { } #vNav h6 { } #vNav p { } #vNav a:link, #vNav a:visited { } #vNav a:hover { } #vNav img { } #vNav th { } #vNav td { } #vNav dt { } #vNav li { } #hNav { } /* ==== Specific Rules ==== */ #hNav h1 { } #hNav h2 { } #hNav h3 { } #hNav h4 { } #hNav h5 { } #hNav h6 { } #hNav p { } #hNav a:link, #hNav a:visited { } #hNav a:hover { } #hNav img { } #hNav th { } #hNav td { } #hNav dt { } #hNav li { } /* ==== Custom Rules ==== */ .imgLeft { margin: 2px; float: left; } .imgRight { margin: 2px; float: right; } |
|||||||