|
CSS - Combining Css
I created to CSS classes and I am applying them to elements like so:
Code: <div class="IC16 ICR16"></div> The CSS is the following: Code: .IC16 {
width: 16px;
height: 16px;
padding-top: 2px;
display: run-in;
cursor: pointer;
}
.ICR16 {
margin-left: 5px;
padding-right: 16px;
}
Is there any way I could compress the CSS code above so that ICR16 gets the styles from IC16 (without IC16 losing individuality) so that I only have to use "ICR16" in the example I gave? Similar TutorialsSome of you may have seen my other post where I was trying to encorporate css into a JS menu. After some of your thoughts I decided to scrap that and write it in CSS. I am relatively new to CSS. I am not looking for you to code this for me, but maybe give me some ideas on what to try and why I am breaking things . here is a link to the page with just the code posted below in action: PAGE IS HERE Here is my CSS: Code: /**************** nav coding *****************/
#nav1 { padding: 0; margin: 0; list-style: none; line-height: 18; width: 10em; background: #555555; font: normal 12px Verdana;}
#nav1 ul { padding: 0; margin: 0; list-style: none; line-height: 18; width: 100%; font: normal 12px Verdana;}
#nav1 a { margin: 0; display: block; width: 10em; color: #f2f2f2; border-bottom: 1px solid #c0c0c0; text-decoration: none;}
#nav1 ul li a:hover { color: #f2f2f2; background: #8b8b8b; }
#nav1 li { float: left; width: 10em; background: #555555;/* width needed or else Opera goes nuts */ }
#nav1 li ul { /* second-level lists */
position: absolute; width: 10em; left: -999em; border-left: 1px solid #c0c0c0;
/* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav1 li ul ul { /* third-and-above-level lists */ margin: -16px 0 0 10em; }
#nav1 li:hover ul ul, #nav1 li:hover ul ul ul, #nav1 li.sfhover ul ul, #nav1 li.sfhover ul ul ul { left: -999em; }
#nav1 li:hover ul, #nav1 li li:hover ul, #nav1 li li li:hover ul, #nav1 li.sfhover ul, #nav1 li li.sfhover ul, #nav1 li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#nav-menu ul { list-style: none; padding: 0; margin: 0; font: normal 12px Verdana;}
#nav-menu li a{ float: left; margin: 0;}
#nav-menu li a{ background: url(MenuBackground.jpg) #fff left repeat-x; height: 30px; line-height: 18px; float: left;
width: 9em; display: block; border-right: 1px dotted #c0c0c0; color: #f2f2f2; text-decoration: none; text-align: center; }
/* Hide from IE5-Mac \*/
#nav-menu li { float: none; margin: 0;}
/* End hide */
#nav-menu { width: auto; }
here is my page code: Code:
<div id="nav-menu">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
<li style="border-style: none;"><a href="#">Contact us</a></li>
</ul>
</div>
<br><br><br>
<ul id="nav1">
<li><a href="#">Services</a>
<ul>
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
<li><a href="#">Sub Link 5</a></li>
</ul>
</li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>
What I am trying to do is make it so that on mouseover the 1 menu system you see, the second menu drops down below whichever element your mouse is on. I keep making it so that my background image is adopted into the lower menu system and I don't want that. I just want the first menu to maintain its look while the second one drops down below it, maintaining its look. (I haven't gotten it to look the way it should in IE yet. FF has a better representation right now) For a page I'm writing, when I call a new object, a document.write() line is called in which it writes html/css tags to bring a picture corresponding to that object on the page. The problem is it won't let me change the properties that I normally could, such as .top or .left, etc. For example, when I make the object "chef" there is a line: document.write("<div id='chefDiv' style='position:absolute; top:"+this.y+"; left:"+this.x+"; z-index:2'><img src="+this.src+" name='chefbmp'></div>"); Then, in a totally different area of the code I try: document.getElementById('chefDiv').style.top = 200; ... and the location of the chefDiv does not change. However if I try the code: alert(document.getElementById('chefDiv').style.top); ... it will bring an alert message that says "407px". What am I doing wrong here? Is there something different about this because I'm using objects and constructors? Or is it because I'm using document.write(....) instead of directly writing the html in the page? How can I change the aspects of my chefDiv? Thanks! Kevin hi, is this the proper way to do this? i'm trying to have every link with certain properties and then have classes define specific links. it works, but i wonder if this is the proper way to do so. Code:
a:link{color: #0000dd; font-family: tahoma; font-size:12px;}
a:active{color: #0000dd; font-family: tahoma; font-size:12px;}
a:visited{color: #0000dd; font-family: tahoma; font-size:12px;}
a:hover{color: #0000ff; font-family: tahoma; font-size:12px;}
a.big {font-weight:bold;}
thank you Hi! I am beginning to use and learn CSS in more depth as of recent, and I've came across an issue which I wonder if it is a known one, or if it is related to my code. Within a parent div, I have floated a div element to the right of another div element with the use of float:right; . The floated div is a class which is used two times in this instance, thus I want to define the margin-left it should have to the leftmost element in the parent div, but also which the second iteration of this will have in relation to the first one. However combining the float:right; and margin-left:xx; lines, the element margin does not start with the end of the leftmost div element which I am seeking to float it to the right of, rather, the margin is for some reason beginning in the middle of the parent div. Is there any known issue here that I need to be aware of, and is it possible to get the margin to start at the end of the first (and leftmost) div element. I am using a margin-right for the time being to get some reasonable positioning, however the result is a compromise of what I originally intended. hello everyone, does anyone know how can i connect both the outline and the border-radius? it works fine beside the outline is square (btw both does not work on ie for some reason, why's that?) code is: Quote: outline: #ffc614 solid 5px; -moz-border-radius: 15px; border-radius: 15px; -webkit-border-radius: 15px; thank you. Join Date: May 2008 Posts: 2 Firefox bug combining absolute and fixed positioning Hey helpful people. I am designing a site which has a floating toolbar (position: fixed) with popup menus. The popup menus are using nested lists and position: absolute to display. JavaScript is dealing with the transition. The problem is that in firefox alone the fixed toolbar jumps when the popup menus show and hide. Removing either position: fixed or the offset (bottom: 27px) removes this problem. However these need to be present in the design. Anyone know a workaround? (webpage and css below) Code: <div class="toolbar_O">
<div class="toolbar_I">
<!-- top page info -->
<div class="pageInformation cf">
<!-- Page Status Info Start -->
<div class="pageStatus">
<h4 class="statusLabel">Status: </h4>
<span class="status">Live</span> </div>
<!-- Page Status Info End -->
<div class="RHS cf">
<div class="toolbarMenu">
<ul>
<li class="publicationDates"><a href="#" title="Publication dates">Publication dates<span class="moreArrow"><span class="wai">^</span></span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<ul class="popup">
<li>
<form>
<p>
<label for="email" class="expiryDate">Set expiry date</label>
</p>
<input type="text" class="inputTextbox" name="expiryDate" id="expiryDate"/>
<p>
<label for="email" class="liveDate">Set live date</label>
</p>
<input type="text" class="inputTextbox" name="liveDate" id="liveDate"/>
</form>
</li>
</ul>
</li>
<li class="dateAction"><a href="#" title="Last published">Last published 29/01/08<span class="moreArrow"><span class="wai">^</span></span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<ul class="popup">
<li>
<p class="cf"><span class="label">Author:</span><span class="value">Anne Light</span></p>
<p class="cf"><span class="label">Approver:</span><span class="value">John Smith</span></p>
<p class="cf"><span class="label">Review date:</span><span class="value">21/06/07</span></p>
</li>
</ul>
</li>
<li class="versions"><a href="#" title="Other versions">Other versions (#)<span class="moreArrow"><span class="wai">^</span></span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<ul class="popup">
<li>
<p>Ann Light's version sent for approval on 24/12/07 at 10.03am</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- bottom user functions -->
<div class="userFunctions cf">
<!--Left Hand Side Buttons Start -->
<div class="btnLHS"> <a id="#" class="btnHelp" title="Help" href="#">Help</a>
<div class="toolbarMenu pageActions">
<ul>
<li class="otherPageActions"><a href="#" title="Other page actions">Other page actions<span class="moreArrow"><span class="wai">^</span></span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<ul class="popup">
<li>
<ol>
<li><a href="pa001a_delete_page.html" class="lbOn modal:{width:450}" title="Delete page">Delete this page</a></li>
<li><a href="pa002_set_date.html" class="lbOn" title="Set date">Set publication/expiry date</a></li>
<li><a href="pa003_page_permissions.html" class="lbOn modal:{width:450}" title="See page permissions">See page permissions</a></li>
<li><a href="pa004_add_subpage.html" class="lbOn" title="Create sub page">Create sub page</a></li>
<li><a href="pa005_page_history.html" class="lbOn modal:{width:450}" title="See page history">See page history</a></li>
<li><a href="#">Preview</a></li>
<li><a href="link_1d.html" class="lbOn modal:{width:450}" title="Save a copy">Save a copy</a></li>
</ol>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Left Hand Side Buttons End -->
<!-- Right Hand Side Buttons Start -->
<div class="btnRHS"><a href="st016_page_notes.html" class="lbOn pageNotes" title="page notes">See page notes</a> <a id="#" class="btnReject" title="Do Not Approve" href="#"><span class="buttonText">Don't Approve</span></a> <a id="#" class="btnApprove" title="Approve" href="#"><span class="buttonText">Approve</span></a> </div>
<!-- Right Hand Side Buttons End -->
</div>
</div>
</div>
Code: div.toolbar_O {
background: #eaf1f9 url(../images/interface/toolbar_bg.gif) 0 0 repeat-x;
border: 1px solid #3a8ea8;
padding: 9px 0px;
width: 729px;
color: #0a3b3f;
font-size: 0.9em;
position: fixed;
bottom: 20px;
left: 100px;
height: 82px;
}
body.editMode div.toolbar_O {
position: relative;
left:0;
bottom: 0;
float:right;
}
.toolbar_O .toolbar_I {
border: 1px solid #073f58;
background: url(../images/interface/toolbarinner_bg.gif) #54b4cc;
margin: 0px 9px;
}
.toolbarMenu ul li a,
.toolbarMenu ul li a:visited {
font-weight: bold;
color: #77aeb5;
border: 1px solid #287e95;
text-decoration: none;
padding: 4px 5px 6px 5px;
background: #e6f4f5;
color: #0a3b3f !important;
display: -moz-inline-box;
display: inline-block;
height: 13px;
}
.toolbarMenu ul {
padding:0;
margin:0;
list-style-type: none;
margin: 0;
}
.toolbarMenu ul li {
float:left;
position:relative;
margin: 0 0 0 10px;
}
.toolbarMenu ul li ul li {
margin: 0;
font-size: 0.9em;
}
.toolbarMenu ul li ul {
visibility: hidden;
position:absolute;
bottom: 27px;
left:0;
padding: 5px;
background: #ebf6f8;
border: 1px solid #2e869c;
margin: 0;
z-index: 1000;
font-size: 1em;
text-align: left;
}
.toolbarMenu ul .moreArrow {
display: -moz-inline-box;
display: inline-block;
padding: 6px 8px;
width: 1px;
margin-left: 10px;
border-left: 1px solid #89abb7;
background: url(../images/interface/morearrow.gif) 3px 0 no-repeat
}
.toolbarMenu ul li.open ul {
visibility: visible;
}
.toolbarMenu ul li.versions.open ul {
width: 250px;
}
div.toolbar_O .toolbarMenu ul li.open a {
color: #4594A5 !important;
}
div.toolbar_O .toolbarMenu ul li.open .moreArrow{
background: url(../images/interface/closearrow.gif) 3px 0 no-repeat;
}
/* top part of toolbar */
.toolbar_O .pageInformation {
padding: 6px;
height: 25px;
}
.toolbar_O .pageInformation .pageStatus {
color: #FFF;
font-size: 1.3em;
width: 170px;
float: left;
}
.toolbar_O .pageInformation .RHS {
float: right;
}
h4.statusLabel {
height: 100%;
display: inline;
text-transform: uppercase;
}
div.toolbar_O div.pageInformation .label,
div.toolbar _O div.userFunctions .label {
width: 75px;
float: left;
text-align: left;
}
div.toolbar_O div.pageInformation .value,
div.toolbar _O div.userFunctions .value {
font-weight: bold;
text-align: left;
float: right;
vertical-align: top;
width: 75px;
}
div.toolbar_O div.pageInformation .inputTextbox {
width: 80%;
}
/* bootom part of toolbar */
.toolbar_O .userFunctions {
padding: 8px 0;
height: 25px;
}
div.toolbar_O div.userFunctions div.btnRHS {
float: right;
margin: 0px 10px 0px 0px;
}
div.toolbar_O div.userFunctions .btnLHS {
float: left;
margin: 0px 0px 0px 10px;
}
div.toolbar_O div.userFunctions div.btnLHS a.btnHelp,
div.toolbar_O div.userFunctions div.btnLHS a.btnHelp:hover {
padding: 5px 5px 5px 25px;
margin: 1px 5px 0 0;
background: #e6f4f5 url(../images/interface/icon_help.gif) 3px 3px no-repeat !important;
float: left;
border: 1px solid #287e95;
text-decoration: none;
font-weight: bold;
color: #0a3b3f;
height: 12px
}
.toolbarMenu.pageActions {
float: left;
}
.toolbarMenu ol {
margin: 0;
padding: 0;
width: 320px;
height: 60px;
list-style: none;
}
.toolbarMenu ol li,
.toolbarMenu ol li a {
margin: 0;
padding: 0;
float: left;
width: 150px;
min-height: 8px;
display: inline-block;
border: none !important;
color: #0a3b3f !important;
font-size: 1.2em;
background: none;
}
div.toolbar_O div.toolbar_I a.pageNotes {
font-weight: bold;
color: #0a3b3f;
}
div.toolbar_O div.toolbar_I a.pageNotes:hover {
color: #FFF;
}
/* approve/reject btns */
div.toolbar_O div.userFunctions div.btnRHS a.btnApprove,
div.toolbar_O div.userFunctions div.btnRHS a.btnReject {
border: 1px solid #287e95;
border-bottom: 2px solid #06465f;
border-right: 2px solid #06465f;
text-decoration: none;
height: 12px;
padding: 5px 15px 5px 0;
background: #fffeff url(../images/interface/icon_approve.gif) 95% 3px no-repeat;
display: -moz-inline-box;
display: inline-block;
color: #0a3b3f;
}
div.toolbar_O div.userFunctions div.btnRHS a.btnApprove:hover,
div.toolbar_O div.userFunctions div.btnRHS a.btnReject:hover {
background-color: #135d82;
border: 1px solid #FFF;
border-bottom: 2px solid #06465f;
border-right: 2px solid #06465f;
color: #FFF;
}
div.toolbar_O div.userFunctions div.btnRHS a.btnReject {
background: #fffeff url(../images/interface/icon_reject.gif) 95% 3px no-repeat;
}
li.otherPageActions ul,
li.otherPageActions ul li{
margin: 0;
padding: 0;
list-style: none;
}
|
|||||||