|
CSS - Name This Css Property/rule?
Ok what i want to happen is that when person clicks on a link i want a div to appear/be visible underneath that link. But i want that div to not take any space unless i click on a link.
I recently did something similar BUT the div was taking the space but was just hidden. Similar TutorialsMy page layout consists of a content section and a sidebar section. I'm attempting to match the style of the sidebar links to those within the content. Odd thing is, although the style of the links appears correctly within the content DIV, any links within the sidebar refuse to style correctly when declared with the content declaration. So, this works: Code: #content a, #copyright a, #footer a, .twitter a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;}
#sidebar a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;}
Whilst this does not: Code: #content a, #sidebar a, #copyright a, #footer a, .twitter a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;}
I'm at my wits end as to why the second (preferred) declaration will not style any sidebar links. Any ideas? Hi, I am putting together a design for a client and have a complex navigation menu made in CSS (the CSS menu was paid for from a third party). Now I have found out that it is not IE6 compliant because the maker of the menu falls into the 'nobody should use IE6 because it is too old and painful to code for, therefore I won't cater to it' camp. Apparently he doesn't mind cutting out 18% to 32% of visitors. So I am hoping someone here will recognise the behaviour and be able to suggest the fix. I feel sure it would be doable with one of those exception rules in the CSS, for IE6. Here is the site (work in progress still): http://southcarolinanightlife.com/ The CSS for the menu is he http://southcarolinanightlife.com/templates/tmpl_uni/css/menu/menu15.css Note how, with IE6, when you hover over navigation drop down menus, the submenus all appear at the extreme left, rather than beneath the menu item you are hovering over. In other browsers it seems to be just fine. Many thanks if anyone can assist. Kevin I am trying to create a separator bar that will act like a HTML <HR> If firefox it works like I want, but in IE it does not. In IE it only displays the width of the image file spacer.gif CSS: Code: .bar {
display: block;
position: absolute;
left: 50px;
right: 60px;
top: 280px;
height: 15px;
background-image: url(bar.gif);
}
HTML: Code: <div class="bar"><img src="spacer.gif"></div> ive found that in previous attempts this would work: Code: <hr width='90%' color='#990000' /> but when i changed to storing the colors and things in a css file, i found that i had to do this: Code:
hr {
width:90%;
border:1px solid #990000;
}
<hr />
now is there a way where either i can set the horizontal rule to use an image as the color (just a 2px high image) or is there a way where i can get an image to act as a horizontal rule? PS, if the latter is the choice then is there a way to get it so that i dont have to keep specifying the image source? I want to know if ID Selectior for a class is avaible in css. I got many textboxes cssclass'es applied to .TEXTBOX_BLACK but I wantto add extra attribute to only Textbox10 something like overflow :auto; thanks much before any answers. regards. my attempt is below but ofsure not working: .TEXTBOX_BLACK { border-style : solid; border-width: 1px; border-color:Black; font-family: Tahoma; height:14px; width:140px; background-color: #414141; } .TEXTBOX_BLACK #TextBox10 { overflow :auto; } I have all pages that follow a CSS Rule. These are Dev Boxes that I created for my site. One of the text on one of the pages is 1700 pixels height the others are only 700. When I created a rule for all pages but when I added the text on the one with 1700 pixels it stretched out all the boxes on all other pages as well. I want to break that one from the others so that it does not format all my pages like that one. How do I do it. I do I keep the CSS code style but on that one in particular change the rule to only allow that one to be 1700 pixels long. Basically I don't want to have to recode the CSS page but I want that particular code to be just for that one page and keep the others with the 700 pixels height. Please give me a simple explanation on how to break the rule on that page so that I can manually adjust it for that one page. thanks Why does my third style rule have no effect? I thought the "A > B" was read as applying the rule to B if it was a child of A? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style>
div.large_title {
font-family: Trebuchet MS;
font-size: 18pt;
line-height: 20pt;
color: #003366;
}
div.quickpick {
border: 1px solid #003366;
border-collapse: collapse;
width: 250px;
text-align: center;
}
div.quickpick > div.large_title {
font-weight: bold;
}
</style>
</head>
<body>
<div class="quickpick">
<div class="large_title">Test</div>
</div>
</body>
</html>
Also, how can I add top and bottom margin to a text string? Do I use Margin or Line Height? I'm customizing an IP Board (version 3.2.1). I've set up a test board and when I've got it how I want it I'm going to export it as a skin which I'll install on a live board. In the current version of IP Board, the post title is above the main title bar in post view, whereas in the previous version, the post title was in the main title bar, which is where I want it. One of the IPB boffins gave me a code mod which enabled me to place the post title in the main title bar. The problem is the standard code that governs the post title also governs the forum title (pictured below) in forum view. I need to get rid of this title (circled) in order to reduce some of the space between the header and the main title bar. But if I comment out this title, I also comment out the post title. According to the guy who was helping me, the only way around this is to create a new class, which is beyond his expertise -- and way beyond mine. How do I do this, or is there an alternative and hopefully simpler solution? Many thanks! This is the code in question. Code: .ipsType_pagetitle, .ipsType_subtitle { font: 300 16px/1.3 Helvetica, Arial, sans-serif; color: #141719;}
The circled title is what I want to remove. http://www.thechristianidentityforum.net/smf/pix/screenshot.jpg The code also affects the post title in post view, which is why I need a new rule set/class, so I can delete the forum title in forum view but not the post title. http://www.thechristianidentityforum.net/smf/pix/screenshot2.png EDIT: For some reason the images won't display in the post. They display in preview but not when posted. Just click on the urls to see the pix. I apologize if I've broken a forum rule or two in doing this. So, what would I like to have? A css rule that would affect visual appearance of only the <input type="submit"> elements (or any other sub-type of <input>, but again, affecting that sub-type only). Is it possible to do? How? I have a lot of .NET pages with a LOT of submit buttons (within datagrids and regular buttons too). There is a way to do it programaticaly in source code of .NET pages, but I'd like an elegant solution like css, which could be done without recompiling entire project. Any help is highly appreciated. 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 Is there such a thing as using an alt property for <img> tag? This would be awfully useful for SEO Thanks for all the continued help/support. . . Makes learning CSS so much easier! Link: www.vairlinecms.com Question: I set the html up like this on purpose to grasp the concept. <p> tags are block level containers. So each new set of <p> tags should equal start on new line. w/the float property holding a value of left, it floats all content to the left. Since each instance of float occurs in its own container...the two different <p> sets should not be affected. In short, the password: paragraph should be on a new line, not both on the same line. There should be no need to clear it because they are in their own containers - which are block level. Where is my logic/understanding of CSS flawed? HTML: Code: <div id="clientLoginBoxBody">
<form action=#">
<br />
<p class="user">Username:</p>
<p class="pass">Password:</p>
</form>
</div>
CSS: Code: #clientLoginBoxBody p.user, p.pass {
float: left;
margin: 0;
margin-left: 10px;
padding: 0;
font-size: 12px;
text-align: right;
}
Will the -moz property ever become a valid CSS property. when I validate my CSS on w3.org I get errors. I remove all propertys that have a -moz in front of it and it is 100% valid. ALSO ... Is there a way to mask parts of the css from the validator or have a separate CSS file that can be masked from the validator to make it appear to be 100% valid.. Thanks Hi all, I've got problm in css Listbox properties, I put list box within a normal html .. and there are 3 option to list like this.., 1.name 2.Address of a person 3.Phone no: resident so i give width=80px; in css and it will show the list box width correctly. but drop down part also the same width . so i want to expand the width as when we entered option text width. how can i achieve this ? pls help me......! Prachalitha Question: I have two class below. What I want is when I change the padding-top property value in div.content-full, I also want the padding-top property value in the div.content change to the same value div.content-full { float:left; width:100%; padding-top:10px; margin:0px; } div.content { float:left; width:70%; padding-top:06px; margin:0px; } Can anybody help me out? Hi, i am very new to css and I am confused about the difference between margin-top vs top please help Regards Ltoso I am wondering if there is some way to make a <div> layer automatically expand to the full height of the screen similar to the way that one would use width=100% when talking about the width of a page. I have a layer that I want to extend to the bottom of the page no matter what resolution the user has on their screen. Maybe the layer could just extend all the way until the next layer? Any Ideas? Thanks Jamie I am trying to figure out how I can get this red curve to align to the bottom of the page, while also being able to move up and down with the size of the browser window. http://www.woodrichwebworks.com/psa/psa_comps/bycor/html/redtest.html Any help would be great. This style is use useful or not @property-group title-style() { color: #004080; font-weight: bold; } @property-group standard-vmargins() { margin: 1.33ex 0; } title, subtitle, titleabbrev { display: block; property-group: title-style(); property-group: standard-vmargins(); } This is not support IE... I'm trying to create some links that swap background images when you mouseover them. The non-CSS solution (which looks exactly how I want it to look) is located he http://84.9.221.75/domains/backingt...Musicindex.html My attempt at creating a CSS equivalent of those links is located on this page: http://84.9.221.75/domains/backingt...Musicindex.html I just need some help with the CSS I'm using on the latter page...I read up a little on how to do this, but it's obvious I'm still doing something wrong... I need the buttons and the text inside the buttons to line up and appear like they do in the first URL....can anyone give me some pointers here? Thank you. |
|||||||