|
CSS - Question On My First Css File - Master.css
I am working on a JSP page that contains my first Master.css file:
.menu { font-size: 12px; } .menu a { color: white; width: 85px; text-align: center; padding: 2px 0px; text-decoration: none; background-color: #1D4970; border: 1px solid #1D4970; } .menu a:hover { color: #141D26; background-color: #9BAEBF; border-color: #E0E6EB } .menu span { width: 85px; text-align: center; padding: 3px 0px; color: silver; } div.submenu { position: absolute; visibility: hidden; top: 116px; } div.submenu a { text-align: left; display: block; font-weight: normal; padding-left: 2px; } My problem is occurring with MENU and SUBMENU items. My objective is that currently I have a MENU item called Requisition. Underneath that MENU ITEM I have a clickable submenu item called Approve. I need to add two NON-CLICKABLE submenu items underneath Approve, one called MODIFY and the other called SEARCH. My problem is I do not know what value to add to do what it is I want. What I tried is adding the following: div.submenu span { color: silver; } What happened is that I lost all my formatting from .menu and div.submenu for some reason(?) and I do not know what is the best way to make these two submenu items not clickable and maintain the formatting from .menu and .submenu. Any suggestions or direction on how to accomplish the formatting and creation of the non-clickable items would be greatly appreciated. Thanks. Similar TutorialsArgh - I am not very good with CSS (uhm, obviously) and all I am trying to do is change the color of some list items in a blog menu. It's Wordpress, and, it's not as if the blog is important - but this is driving me insane. I've installed Firebug in an effort to figure out what is making these items red - or #333. I can alter the code in Firebug and it gives a visual representation of what the edit would look like. But when I actually make the edit, nothing happens. And I've deleted my browsing history, used every browser, etc. - and I can change everything else! I am trying to change the text color in the right hand menu from red to, well, something else. The pages is at: http://www.webputzer.com The .css file looks like this: Code:
/*
Theme Name: alibi
Theme URI: http://www.blogchemistry.com/
Description: 2 column, with RHS widget sidebar
Version: 1.2
Author: BlogChemistry
Author URI: http://www.blogchemistry.com/
*/
body {
margin: 0;
padding: 0;
color: #333;
text-align:center;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 100.1%;
background: #fff;
}
#wrapper2{
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
#wrapper3{
border-left: 1px solid #666;
border-right: 1px solid #666;
}
#wrapper4{
}
#wrapper{
width: 770px;
margin: 0px auto;
padding: 0px;
text-align:left;
font-size: 85%;
line-height:20px;
background: #fff;
border-left: 3px solid #333;
border-right: 3px solid #333;
}
#header{
padding: 1px 0px;
margin: 0;
background: #ccc;
}
#header-inner{
margin:0;
padding:0;
}
#content{
clear:both;
margin: 0;
padding: 5px 5px 5px 10px;
background:#fff;
}
#content-inner{
}
#main {
width: 550px;
float:left;
margin: 0;
padding: 5px 0 10px 0;
overflow:hidden;
}
#sidebar {
padding: 0;
margin: 0 0 0 560px;
background: #fff;
}
#footer {
clear: both;
margin: 0;
padding: 10px 16px;
text-align: center;
font-size: 85%;
}
#footer-inner{
background: #f2f2f2;
height: 50px;
}
#footer p{
margin:0;
padding:15px 0;
}
#navigation{
padding: 5px 15px;
}
#navigation div.fleft{
float:left;
}
#navigation div.fright{
float:right;
}
#credit{
text-align:right;
padding: 0 15px;
}
#credit p{
margin:0;
color:#777;
font-size:85%;
}
#credit p a, #credit p a:hover{
color:#999;
font-weight:100;
}
/* ********** default styles *********** */
p, h1, h2, h3, h4, h5, h6{
margin: 10px 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: georgia, 'Times New Roman', sans-serif;
}
h1{
font-size: 190%;
}
h2{
font-size: 160%;
}
h3{
font-size: 120%;
}
h4{
font-size: 130%;
}
h5{
font-size: 100%;
}
h6{
font-size: 70%;
}
a{
color:red;
font-weight:800;
text-decoration:none;
}
a:hover{
color:red;
text-decoration:underline;
}
a img{
border:0px;
}
hr{
height:2px;
margin:5px 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
blockquote{
background: #f4f4f4;
padding: 5px 15px;
margin: 3px 30px;
}
form{
margin: 0;
padding:0;
}
fieldset{
padding:10px;
margin:0;
border:none;
}
legend{
font-weight:800;
}
code{
font-size: 90%;
font-family: "Courier New", Courier, monospace;
white-space: pre;
}
td{
vertical-align:top;
}
#tabs {
float:left;
width:100%;
font-size:90%;
background:#000;
line-height:18px;
border-top: 1px solid white;
}
#tabs ul {
margin:0;
padding:4px 10px 0 10px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
padding:5px 15px 3px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
/* Headings */
form#searchform2{
display: block;
float:right;
margin: 55px 10px 0px 5px;
}
#header h3{
margin: 0;
padding: 30px 0 0 10px;
}
#header h3 a{
font-weight:100;
color: #fff;
text-decoration: none;
font-size: 220%;
letter-spacing: 1px;
}
#header h2{
margin: 0;
padding: 10px 0 5px 10px;
font-weight:100;
font-style:italic;
color: #fff;
font-size: 130%;
letter-spacing: 1px;
}
h2#sectiontitle{
font-size:100%;
font-weight: 800;
font-family: arial, verdana, sans-serif;
padding:6px 6px 6px 10px;
margin:8px 10px 5px 10px;
background: #f2f2f2;
color: #444;
}
/* post styles */
.post{
margin: 0 0 10px 0;
padding: 0 5px 5px 5px;
}
.entry{
margin: 0;
padding: 0px 10px 3px 10px;
}
.post h2 {
color: #333;
font-size: 150%;
font-weight:100;
padding: 7px 0 2px 2px;
margin: 10px 0 15px 0;
}
.post h2 a{
color: #333;
text-decoration:none;
font-weight:100;
}
.post h2 a:hover{
text-decoration:none;
color: #333;
}
.postmetadata{
font-size:80%;
padding: 1px 8px 1px 5px;
margin: 0;
border-top: 1px solid #ccc;
}
.postmetadata p{
line-height: 18px;
padding: 0;
margin: 2px 0;
}
.date{
float:left;
text-align:center;
font-weight:800;
margin: 0 10px 0 0;
padding: 0 10px;
border-right: 1px solid #ccc;
color: #444;
}
.dateDay{
display:block;
font-size: 16px;
line-height: 16px;
text-align:center;
}
.dateMonth, .dateYear{
display:block;
font-size: 11px;
padding:0;
line-height: 12px;
}
/* Comments */
h3#comments, h3#postcomment{
font-size: 100%;
font-family:verdana, sans-serif;
}
ol#commentlist{
padding: 0 0 0 20px;
font-size: 90%;
list-style-type: none;
}
ol#commentlist li{
padding: 0px 3px;
margin: 0;
}
ol#commentlist li p.commentheader{
margin: 0px 0 0px 0;
display: block;
padding: 1px 5px;
}
ul#commentlist{
padding: 0;
margin:0;
list-style-type:none;
}
ul#commentlist li{
display: block;
padding: 0;
margin: 0 15px 5px 15px;
font-size:90%;
background: #f2f2f2;
}
ul#commentlist p{
margin: 6px 0;
}
ul#commentlist li div.comm{
margin: 1px;
padding: 1px;
}
ul#commentlist li div.gravatar {
width:50px;
float:left;
padding: 10px 0 0 10px;
}
ul#commentlist li div.gravatar img{
border: 2px solid #ccc;
}
ul#commentlist li div.commenttext{
padding: 0;
margin:5px 10px 5px 65px;
}
ul#commentlist li div.commenttext div.commentwrapper{
margin:0 0 0 5px;
padding: 3px 8px;
}
/* sidebar styles */
#subscribe p{
font-size: 85%;
margin: 3px 0 10px 0;
}
.menu{
padding:0;
font-size:90%;
}
.menu a{
font-weight: 100;
}
.menu a:hover{
text-decoration:none;
}
.menu ul{
margin:0;
padding:0;
list-style-type:none;
}
.menu ul li.widget{
padding:2px;
margin:0 0 0px 0px;
}
.menu ul li.widget ul{
margin: 0;
padding:0;
}
.menu ul li.widget ul li{
border-bottom:1px dotted #ccc;
background: #f2f2f2;
padding: 2px 0 2px 15px;
margin:0;
}
.menu ul li.widget ul li ul{
}
.menu ul li.widget ul li ul li{
border-top: 1px dotted #ccc;
border-bottom: none !important;
padding: 2px 0 2px 15px;
}
.menu ul li.widget h3{
font-family: arial;
font-size:120%;
padding:2px 0 1px 4px;
margin:0;
border-top: 3px solid red;
border-bottom: 1px solid #bbb;
color: #333;
font-weight: 800;
font-variant:small-caps;
}
.menu ul li h3 a{
color: #333;
font-weight: 800;
}
.menu ul li h3 a:hover{
color: #333;
text-decoration: none;
}
.menu form{
display:block;
margin:0px;
padding:4px;
}
.menu input{
margin:3px 0;
font-size:90%;
}
li.widget .textwidget, li.widget #search {
padding: 2px 5px;
}
/* Calendar styles */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}
#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}
#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}
#wp-calendar a {
display: block;
}
#wp-calendar caption {
text-align: center;
width: 100%;
}
#wp-calendar td {
padding: 3px 0;
text-align: center;
}
#footer a{
font-weight: 100;
}
If anyone could tell me what the heck is making this uneditable - man...I'd sure like to know... I've noticed some characters at the beginning and end of CSS files: Quote: /* <!-- */ /* CSS content here */ /* --> */ What is the purpose? Greetings all, Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it. I was wondering if there are any good references/books you'd suggest purchasing or looking at online? Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this: ___________________________ |[ i m a g e ]....................text | However, it comes out looking like this: ___________________________ |[ i m a g e ]..........................| |.....................................text| I suspect it is due to the align: right of the text, but am not sure how to correct it. Relevant snippets of code: testpage.html Code: ... <div class=header> <img src="image.jpg"><h1>TEXT</h1> </div> ... style.css Code:
...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}
#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}
Thanks for any advice. If I include url(images/blah.gif) in a CSS file in my webroot, and i then load that into a file in a html dir off my roor and run the html from the html folder, is the image supposed to be relative to my css file or my html file? It seems like its relative to the HTM which doesnt seem correct. I know It would just make sense to move things around but it has to do with robohelp and I think I'm stuck doing it this way for now. Many of my web pages (CGI) have css styles which have a user defined color present throughout the site. How can i get that varible data back to my site if I refer to it in my css style? for example, i get a hex color from the user and store it in a global variable C1$=#000000 in my web app. then in my css definition i assign border color based on the user defined variable like Code: .table { border: solid 1pt $C1 }
when i copy that into my css file, the color thing in my tables is no worky. putting it back into my cgi file, it works fine of course. What to do? thanks, JOhn Hi, I have three <div> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="container" style="width:500px;height:700px;background-color:green;">
<div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div>
<div id="three" style="float:right;width:100px;background-color:red;">three </div>
<div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
</div>
</BODY>
</HTML>
I noticed when I increased the % width of my <div two> it goes below my <div three> I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior? how can i center a div in the center of a page, but within that div align every thing to the right. It seems simple but I can't get it to fly. Hi, I have the below css style that I am mostly using my pages, I have a standart anchor style. Anyway I want to attach "the other one" link with another style without touching the current style. How can I do this? Does CSS has a nested thing like c++? Thank you, Cem Code:
<html>
<head>
<style type="text/css">
<!--
a:link {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}
a:active {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}
a:visited {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}
a:hover {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #000000; text-decoration: none;}
-->
</style>
</head>
<body>
<a href="http://url">First one</a><br>
<a href="http://url2">The other one</a><br>
</body>
</html>
Hi everyone. I was wondering if it was possible to create a link from already existing text on a page by reworking the styles in the cssstylesheet file? I'm currently editing around a shopping cart for a client but i was wondering if I could take a bit of a shortcut using css instead. Thanks for your time. Pablo If I have a link that I want to display in the center of a module that no matter what size a user chooses it stays centered..IE. via user config a user can make it 100px or 400px.. [module width] The question is how can I center a link and no matter what the user picks for a width as stated above the link stays centered? i am having a small issue with font size in browsers. i am using smarty template engine to create websites, i have originally created the html pages using css after slicing in photoshop. the pages look similar with respect to font sizes in all browsers when i integrate this html page into smarty i am using a copy of a template in smarty to create a website, so this copy also has a css file, i have commented most of the code in this css file which is in the smarty folder and i have used my css code which i initially created. the problem i am facing is with firefox only and all other browsers work fine only in firefox the text for h1, h2, p, ul li, a... etc are all appearing 1px smaller in size when compared to all other browsers i have tried using !important and inline styles however only firefox is displaying the text in the entire page 1px smaller compared to all other browsers which is not consistant. i have the following in the css file * { margin: 0; padding: 0; border: 0; } body { background: #ffffff; font: normal 12px Arial, Helvetica, sans-serif; margin: 0; padding: 0; } please advice. any help will be greatly appreciated. thanks. I'm not sure is this question relating to css or javascript. Pls help. thanks alot Q1: What are the ways you can deal with x-browser issues? What are the pros and cons of each? Thanks, Gary Anyone know why the <div>'s aren't displaying correctly in FF? View with IE if you want to see how it should look. http://www.cooperworkskilns.com CSS: http://www.cooperworkskilns.com/styles/layout.css I am currently working on a site: www.wirelessguy.net I am trying to get it so that when links are clicked, the pages load in the middle white section. I don't have the links made yet, but I've been messing with it with text only. I made the site template in a php file, then I include that file on all my pages that I create. How can I get pages to load in the middle section of the site? OK .. I have 5 layers surrounding each one of my menu links .. the layer over-laps another layer with the main content in. Now if you look here you will see what i mean .... http://www.geocities.com/jezman2002/index.html You can see four of the layers but the top one i need to be black AFTER it crosses the line !!!! Do u see what i mean I just wondered if there was any easy way to do this ??? -Thanks- If you would be so kind as to visit www.footbagfreaks.com, you will see a sample site using css. On the main navigation, I am curious about something. What establishes the height of each nav element? They are all uniform. What I would like to do is this, which I hope I can explain. I would like to have a set dimension for each nav element, lets us just say each to be 30px high, by 150px wide. I would like to specify the area, 30 x 150 have a rectangular trans. gif as its background and the initial color of the bg would be the same as the trans. gif. On a mouseover, the bg color would change, and thus would show the the new color through the portion of the trans gif which is transparent. Basically, the same effect as on the logo on the top left of the page. If someone can help me with this, I'd appreciate it so much. I am wanting to place an Empty Header with a background-color: #FFF; at the Top of my index.php. Example : <!-- XHTML --> <div id=" header"></div> /* CSS Rules */ #header { background-color: #FFF; width: 800px; height: 150px; margin: 0 auto; <!-- Position to Top and Center --> padding: 0px; } I do not want it nested inside a <div id="wrapper"></div> . The <div id="nav"></div> will not be nested inside the header, it will be under it. And the Nav to will not be within a wrapper div. I guess what I am asking is, is my code right? And must I nest all my Mark Up within a Wrapper Div? Please forgive me for un proper HTML and CSS syntax. I am here to learn. Thank you I have a Header, and inside that header I want to have a Black empty I guess you would say mini Header that will be at the top of my main Header. How would one glue the mini Header to the top of the Main Header? Would one use Position: Relevant, Margin ? ?, top: ? Left: ?....? Thank you im updating a site, and figure ill start from scratch just using nice tidy css. im keeping all the design elements (well for the most part), just updating the code.(its pretty cluncky and haphazard as it is) Its been hashed apart by different folks working on it. there is a design strip that's supposed to always sit on the left of the page, the menu bar and content is suposed to be centered but not cross over the design strip on the left. the design strip is styled in the body tag any help is appreciated william |
|||||||