|
CSS - Targeting A Speicicl Ul Tag
I have the following unordered list that Im cssing into a hover out menu:
Code: <ul>
<li><a href="#saveasnew" rel="saveasnew" class="lbOn">Save As New Page</a></li>
<li><a href="splash_preview.php" onclick="window.open('splash_preview.php'); return false;">Preview</a></li>
<li><a href="#">Change Status</a>
<ul>
<li><a href="#">Deactivate</a></li>
<li><a href="#">Activate</a></li>
</ul>
</li>
<li><a href="#">Edit other page</a>
<ul id="pagelist">
<li> : First Splash Page (active) </li>
<li>2006-07-26 09:39:07: Splash Page 2 (inactive) </li>
</ul>
</li>
</ul>
Here's the code that handles the hover outs Code: div#AdminMenu ul li ul {
margin:0;
z-index:10; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */
position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */
left:-1px; /*aligns the drop exactly under the menu */
}
I want to change the width of the ul that has the id=pagelist, so that it is longer to accomadate the longer menu items. I tried accessing it like div#AdminMenu ul li ul ul ul#pagelist #pagelist ul but none of those seemed to work. Thanks, Mark Similar TutorialsHi There, I am working with an online educational system and working to style it accordingly. The system has "modules" that contain information of various types in their own distinct boxes. I would like to target each heading and style it individually ie different colours etc. I know this is probably a very basic problem and I'm relatively new to the process, but any help would be much appreciated. Here is the html generated by the system for one of the boxes "module:_148_1" ...............Start HTML Snippet <div class="portlet clearfix " id="module:_148_1"> <!-- extid:148: --> <h2 class=" "> <span class="moduleTitle" >What's happening at Ivanhoe</span> </h2> <div class="edit_controls"> </div> <div class="collapsible" style="overflow: auto;"> ............................End HTML Snippet My Current generalised styling on all boxes is achieved via the following css #moduleTitle, .portlet h2 { color: #fff; padding: 4px 52px 5px 6px; background: #13770a; background-image:url(images/headings_details.png); background-repeat:no-repeat; background-position:right top; margin: 0; font-size:110%; font-weight:bold; position:relative; vertical-align:middle; overflow:visible; } As an example, if I wanted to target this particular module with ID module:_148_1 and set the background colour to #a0012e how would I best achieve this? Many thanks Chris I'm building some pages on a learning platform and i'm limited to using in-line styles. The platform is built in a frameset, and I would like to use my in-line styles to target an element in a different frame. I can find information about the "target" frameset name, frame name, element class etc, but don't have the option to change any of the markup here. Is this possible? I have tried playing around the the @frame rule but couldn't seem to get it to work - not sure if i'm using the correct syntax. Any ideas? I have searched to ... and back and can not find out how to target "leftcolumn" menu item to open in "rightcolumn". Using "ID" tag is not a option since it is already used in menu item string. I have tried every combination but the right one. I hope I have included enough of the script to resolve the problem. <style type="text/css"> } .leftcolumn { position: absolute; top: 26px; left: 0px; width: 200px; height: 600px; text-align: justify; } </style> <div id="dmlinks" style="font:bold 14px Trebuchet MS;color:#000000;text-decoration:none"> <a id="dmI0" href="spartaumc.html" target="rightcolumn">Home</a> <a id="dmI1" href="spartaumc_history.html" target="rightcolumn">History</a> <a id="dmI2" href="location.html" target="">Location</a> </div> </head> <body> <div ="rightcolumn"> </div> </body> |
|||||||