|
CSS - Multiple Css To Apply Universal Menu?
I'm trying to change my site to have a css for easy changing. I've gotten 1 written that encompasses all styles, however I'm trying to do data as well. Navigational menu, header etc. I'm assuming I ought to be able to have css1 for styles, css2 for data and html page that pulls from each?
Here's my style css: body { margin : 0; padding : 0; } body { background-image: url('PrairieWindbkg.gif') } body {background-color: #0000FF;} p, ul, ol, li { font : 10pt Arial,geneva,helvetica; } h2 { font : bold 12pt Arial, Helvetica, geneva; } #leftnavigation { position : absolute; left : 0; width : 240px; margin-left : 10px; margin-top : 140px; color : #FFFFFF; padding : 3px; } a:link, a:visited { color: #FFFFFF; } a:hover, a:active { color: #FFFFFF; } #leftnavigation { font : 15pt Arial, Helvetica, geneva; } #headnavigation { position : absolute; left : 0; width : 550px; margin-left : 220px; margin-top : 10px; color : #ffffff; padding : 3px; } #headnavigation { font : 40pt Vivaldi, Helvetica, white, geneva; } #content { margin-left : 10px; margin-top : 80px; padding : 3px; color : #000000; } #content h1, #content h2 { color : #cc0000; } #productnavigation { position : absolute; left : 0; width : 950px; margin-left : 263px; margin-top : 35px; color : #ffffff; padding : 3px; } #productnavigation { font : 25pt Arial, Helvetica, geneva; } #counternavigation { position : absolute; left : 0; width : 150px; margin-left : 350px; margin-top : 700px; color : #ffffff; padding : 3px; } It can be seen on http://jewelrybydawn.com/TestCss.html in use. Now the parts I'm trying to make dynamic/static (?) (ok, universal!) are the left menu, top heading, top menu. Then I want each page to have the jewelry items that apply to it. I tried making another css along the lines of: #navbar { <br><A HREF="Shows.html" TARGET="">Current 2005-2006 Show Schedule!</A> <P><A HREF="Lampwork.html" TARGET="">Lampwork Beads</A> <p><A HREF="JewelryClub.html" TARGET="">Jewelry of the Month Club</A> <P><A HREF="Necklaces.html" TARGET="">Necklaces</A> <P><A HREF="Bracelets.html" TARGET="">Bracelets</A> <P><A HREF="Earrings.html" TARGET="">Earrings</A> <P><A HREF="Personalized_Jewelry.html" TARGET="">Personalized Bracelets</A> <P><A HREF="Gift_Certificates.html" TARGET="">Gift Certificates</A> <P><A HREF="samples.html" TARGET="">Jewelry & Bead Gallery</A> <P><A HREF="Katrina.html" TARGET="">My Hurricane Katrina House Update!</A> <P><A HREF="Newsletter.html" TARGET="_blank">Current Newsletter</A> <P></p> } so that on each actual page I would have: <link href="Test.css" rel="stylesheet" type="text/css" /> <link href="TestNavbar.css" rel="stylesheet" type="text/css" /> </head> <div id="leftnavigation"> <div id="navbar"> </div></div> OR something to this effect... that way if I kill the Katrina link for example, I don't have to revise every single page, just the TestNavbar.css. Can anyone help? Thanks! Dawn Similar TutorialsHey! I would like to write a script that allows users to select .css files from a pulldown menu that is populated by all the .css files located in a given directory. The goal is to "write" the selected file's name into a config file (I assume) so that that particular .css file will be the one used. Then if the user wants to change .css files, they nav. back to the pulldown page and reselect a new .css file. Is this possible? I don't expect that someone will write this for me...but hopefully someone might be able to point me in the right direction... A feature that would allow users to upload (only) .css files would also be excellent...but I realize that would require populating the dropdown with information in my database...(thus negating the first paragraph...) Which method would be better? And how can I go about writing the pulldown selection to a config file? Your wisdom is much appreciated. Thank you. Cranjled PS. If doing this with PHP is not the right way...please don't hesitate to tell me! I only assumed php since my site is in php... Is there some script or something you can put into your page to fix any IE7 haslayout problems? i thought i was pretty well versed in css, but i have come across an annoying problem. on my website, i have multiple external stylesheets; there is virtually 0 internal and inline styling. this is to make the code as clean and elegant as possible. the primary stylesheet, full.css , references to two other external stylesheets ( background.css and spacing.css ). background.css ' only purpose is to enable the background scaling feature. spacing.css ' only purpose is to set the margins, padding, etc of the page(s). i have an alternate stylesheet, bw.css , but it only references spacing.css , since the scaling background feature is not intended to part of how the page looks when styled with bw.css . i have used (or attempted to use) the * universal selector in bw.css to style every element to use a different background, different font color, and different font than what was used in full.css . the problem is, the * doesnt seem to work as intended, when combined with @import . only certain css properties seem to work, but i do not know which ones work and which ones dont. i can rectify the problem by using !important , but id rather not, since its not as elegant as not using it. my question is, how do i solve this problem without using !important ? my site: prototism.co.cc full.css css Code: Original - css Code @import url("background.css"); @import url("spacing.css"); * { cursor: default; font-family: "Verdana", sans-serif; } a { color: #ddd; cursor: pointer; text-decoration: none; } a:hover { background-image: url("../img/link-bg.png"); color: white; } #links, #header { font-size: 34pt; letter-spacing: -3px; } #links, #footer { text-transform: lowercase; } #header { color: white; } #footer { font-size: 12pt; } #footer span { color: #ddd; }
@import url("background.css");
bw.css css Code: Original - css Code @import url("spacing.css"); * { font-family: "Georgia", "Times New Roman", serif; background-image: none; color: black; } a:hover { color: white; background-color: black; } .check { color: #006400; } #links a { margin-left: 30px; } #background { display: none; }
@import url("spacing.css");
Hi all, I could use some help here as I am rather clueless about CSS. I took a basic menu code and have edited it a bit for my site, but I am having an issue here. The menu shows a simple background per line as well as a top graphic and bottom graphic for the top and bottom (duh). If I have one link per line, all is fine, but I am trying to fit 7 links on one line, each link being a single letter. I want it to look like this: Browse by Letter: a b c d e f g h i j k l m n o p q r s t u v w x y z But when I add more than one link inbetween the <li>'s, it puts each link on a separate line. Here is the css, can anyone help me figure out what to change to allow multiple links on each line? Code:
img{border:0px;}
.flt{float:left;}
.menubg{clear:left; background-color:#6FA9C7; width:175px;}
.menu{float:left; clear:left; font:bold 11px Helvetica, Arial, sans-serif;}
.menu li {
margin:0px 0px 0px 0px;
list-style:none;
}
.menu a, .menu a:visited {
width:159px;
height:22px;
margin:0px 0px 2px -32px;
position:relative;
display:block;
color:#cbe7f5;
text-decoration:none;
background:url(http://www.thriftydealer.com/images/menubg2.jpg) no-repeat;
padding:4px 0 0 8px;
}
*html .menu a, .menu a:visited {
width:159px;
height:22px;
margin:0px 0px 2px -32px;
position:relative;
display:block;
color:#cbe7f5;
text-decoration:none;
background:url(http://www.thriftydealer.com/images/menubg2.jpg) no-repeat;
padding:4px 0 0 8px;
}
.menu a:hover, .menu a:active,
.menu li.current_page_item a, .menu li.current_page_item a:visited {
background:url(http://www.thriftydealer.com/images/menubg1.jpg) no-repeat;
text-decoration:none;
}
.bot{clear:left;}
Here is the html I am using to call the menu, sorry for the length, there's a link for each letter... Code: <img src="images/top.jpg" width="175" height="4" alt="" class="top flt" />
<div class="menubg flt">
<ul class="menu flt">
<li class="current_page_item">Browse Stores:</li>
<li class=""><a href="browse.php?search=a">A</a> <a href="browse.php?search=b">B</a> <a href="browse.php?search=c">C</a> <a href="browse.php?search=d">D</a> <a href="browse.php?search=e">E</a> <a href="browse.php?search=f">F</a> <a href="browse.php?search=g">G</a> </li>
<li class=""><a href="browse.php?search=h">H</a> <a href="browse.php?search=i">I</a> <a href="browse.php?search=j">J</a> <a href="browse.php?search=k">K</a> <a href="browse.php?search=l">L</a> <a href="browse.php?search=m">M</a> <a href="browse.php?search=n">N</a> </li>
<li class=""><a href="browse.php?search=o">O</a> <a href="browse.php?search=p">P</a> <a href="browse.php?search=q">Q</a> <a href="browse.php?search=r">R</a> <a href="browse.php?search=s">S</a> <a href="browse.php?search=t">T</a> <a href="browse.php?search=u">U</a> </li>
<li class=""><a href="browse.php?search=v">V</a> <a href="browse.php?search=w">W</a> <a href="browse.php?search=x">X</a> <a href="browse.php?search=y">Y</a> <a href="browse.php?search=z">Z</a>
</ul>
</div>
<img src="images/bot.jpg" width="175" height="3" alt="" class="bot flt" />
Is there a way to use CSS to apply "no" style to something? I know it's strange... I'll explain. I have a general style for all the forms on my website but there is one form I want to appear as the standard default looking form. I don't want to assign an id or anything to the styled forms because then I would have to go back and edit every single page... I'd much rather do something to the 1 form to make it look like the browser default. Is there a way to exclude something from taking on a general style? Any help is appreciated! Thanks! Hi there. I am looking through a style sheet from a site and was just wondering what this line would apply to: Code: submit { font-size: 10px; border: thin #A9D5F5 solid;
background-color: #395980; color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 0px; word-spacing: 1pt;
}
I guessed submit buttons but it's nothing to do with them. Thanks Colin 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 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.. Hi I'm building a selectbox insead of using the common select tag. I use the windows.createpopup() method to display the list of choise. Differently to the div object the popup object is like a new window so it doesn't inherit the css style sheet I've attached to the main window. I tought to attach it by using the addImport(url) method of the styleSheet object but it doesn't seem to work. Here it's my code, the show function it's called when the selectbox expands: var Select_box = window.createPopup(); Select_box.document.styleSheets[0].addImport("URL('common/css/default_style.css');") function show(element) { if (Select_box.isOpen==false) { Select_box.document.body.innerHTML = Select_box_content.innerHTML; Select_box.document.body.className='selectbox'; Select_box.show(0, 18, 150, 50, element); } else { Select_box.hide(); } } I've noticed that using the addImport method on the main window, and not on the instance of the select_box, with 0 index of the styleSheet the error doesn't occur but it doesn't also change the proprety. Tring using any other index value it gives me the usual error. So how can I attach a style sheet to a popup created with the window.createpopup()? Thank you Hi, I have a weird litlle problem here... I have embedded a forum (invision) in my website. This forum uses a stylesheet for all its settings (duh). I can choose if I want to use it inline or external. Offcourse, my site also has its own stylesheet to work with. Because the forum code is on a <div > in my site, the css from the forum messes up my site. Is it possible to get the forum stylesheet to be only applicable inside the layer that it's on? Inline or linked? I tried using an iframe instead of a div, but that gives a heap of other trouble (especially cookie-related) so that's not an option... Hello, Though the 'CssClass' property is available with the control, it doesnt seem to have any effect on it. Rather it works on HTML Control Checkbox. Thanks. Hi! In this page [www].bezlica.ru/chat/sample.php , left bottom flash window is 3 pixels up of its normal position. In Firefox it renders well. Is there any way to fix in IE, while not affecting Firefox? Hi all.. I been tried to put page break function inside <div> tag but it still can't take any effect. Am i correct or any others idea? And when i put in page break function and want to print page 2, but it'll also print out some page 1 table field. can I apply more than one style to an element? Or do they overwrite each other? thanks Is there any way I can stick a margin onto a tbody element? I'd like a 10px gap between the bottom of my table if the tbody element is present and does not have display: none. My alternative is to put in a tfoot element that is nothing but a spacer, but I hate putting in extra markup just so I have a handle for display rules. Cheers, Pete Hi everyone, I'm wanting to apply some very faint colors to the different content boxes on a site I'm building for a client. For now there are only two visible if not logged in.... 'follow us' and the 'who's online' boxes aligned on the right column of the site. The styles for any content box added are pulled from the same css element but I can assign a suffix unique to each one in the admin backend (joomla site). I added the suffix '_followus' to the top box, copy the existing 'moduletable' elements, append the '_followus' to it and change the background color however when I do this I lose the gradient title bar and all other styling. It basically is just a box with no styling and the title and icons in the middle of the box. I'm obviously missing something but am not seeing it. Wondering if someone would take a look and see if they have an answer? Thanks for looking. Here's the URL... spotabusiness dot com I am about to go insane.. I am a total newbie to DHTML and Javascript and I am trying to do a onmouseover event to make an image display normally as a grayscale version of itself (with filter:gray) and when the mouse moves over it I want it to switch to the full RGB color version. I tried to do a rollover with two seperate versions of the image and it worked, but for some reason IE 6 wants to load the image from the server again everytime I onmouseover or onmouseout. This is very slow, especially on my server. I just want to change the image with DHTML filters.. General pseudocode: <img src="blah.jpg" style="filter:gray" onMouseOver="style='filter:none'" onMouseOut="style='filter:gray'"> Can anybody help me? PLEASE???!?!? I need to load data from an xml file (RSS feed) into a html page using Ajax. I would like to style the xml tags with CSS. I do not have access to the server hosting the RSS feed, but do have permission to republish the feed. Can I simply set up a style sheet for the xml tags and the browser will apply the styles when the XML loads through Ajax? OR Will I need to use javascript to walk through the XML document, retrieve node values and reprint the information as HTML which displays according to styles I set up for HTML? Thanks for any help. i have a table with several header columns: Code: <table> <tr><th>header 1</th><th>header 2</th><th>header 3</th></tr> <tr><td colspan=3>empty info</td></tr> </table> now i want to put a border inbetween the cells, to do this i simply used: Code:
table th {
border-left:1px solid black;
}
except this adds a border to the left hand side of the far left cell, making the table border of 1px actually 2px if i give that end cell an id can it be ignored when applying the left border? or would i have to add the lines: Code:
table th#idname {
border-left:0px;
}
|
|||||||