|
CSS - Css Background Image Fixed Positioning?
Hi all,
Okay, so I've got a page with a central column which has a drop-shadow and a background image... The obvious problem is that the repeated background image doesn't always line-up with the background image in the dropshadow. Plus, The backround image changes position whenever the page is resized. So I was looking here, to see if I could find the code to center the background image in the screen, and make it a fixed position, but even then, when you resize the page, the background image seems to move with it. Does anyone know how to fix a background image so that it will stay aligned with the central content/dropshadow of the page? Thanks. Similar TutorialsHi All, I'm trying to add an image that will remain fixed on the screen, and I'm having a hard time positioning it using CSS. I already have a background image for the body (which is tiled), and this image needs to sit above that image, but below the rest of the content. Here's my code as it stands now: CSS: Code: @charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
background-image: url(../assets/images/space_2_background.jpg);
background-repeat: repeat;
margin: 0;
background-attachment: fixed;
}
.oneColElsCtrHdr #sirius2 {
background-image: url(../assets/images/sirius_2.png);
background-repeat: no-repeat;
position: fixed;
padding-top: 123px;
padding-left: 743px;
}
.oneColElsCtrHdr #container {
width: 58em;
border: 1px solid #000000;
text-align: left;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 30px;
padding-bottom: 30px;
}
.oneColElsCtrHdr #header {
background-image: url(../assets/images/header_background.png);
background-repeat: no-repeat;
height: 73px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 20px;
}
.oneColElsCtrHdr #header h1 {
margin: 0;
}
.oneColElsCtrHdr #logo {
padding-top: 15px;
padding-left: 3px;
}
.oneColElsCtrHdr #mainContent {
background-image: url(../assets/images/page_1_background.png);
background-repeat: no-repeat;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
padding-top: 0px;
height: 520px;
}
.oneColElsCtrHdr #footer {
background-image: url(../assets/images/footer_background.png);
background-repeat: no-repeat;
height: 244px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
.oneColElsCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sphere Nine Media</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body class="oneColElsCtrHdr"> <div id="sirius2"></div> <div id="container"> <div id="header"> <div id="logo"><img src="assets/images/sphere_nine_logo_v9.0.1(website).png" alt="Sphere Nine Media Logo" width="191" height="37" /></div> <!-- end #header --></div> <div id="mainContent"> <!-- end #mainContent --> </div> <div id="footer"> <!-- end #footer --></div> <!-- end #container --></div> </body> </html> The code specific to this image is in bold red . I've tried coding this image both as a straight image and a background image, and I've gone through numerous iterations of changing positioning/padding/margin values, to no avail. The current code is the only variation I've happened upon that actually renders the image on the screen - you can see it live at http://www.spherenine.com/. Please let me know if this can be done using my current approach, or if there's a better way to accomplish it. I'll be happy to provide additional info if necessary. Thanks in advance. Sam Hey everyone, im having a problem. I am trying to get a picture fixed at the bottom of the screen and am stuck. Do i do it as a footer or do i do something else? Can anyone help me please cheers. Hello! If i need to put background-image at the bottom of display i use such css rule: background-position: bottom; but in my case i need image to be fixed in right bottom corner. apparently i cant use two declarations like: background-position: bottom; background-position: right; so how could i attain this via just CSS? Hi all Having some problems with background image positioning - all CSS/XHTML has been validated See http://community.foe.co.uk/tmp/quote_and_image_test.html Relevant CSS : Code: #imageleft {padding:0px; float:left; width:auto; margin-right:5px; margin-bottom:5px}
.imagecaptionleft{padding:0px; margin:0px; text-align:left; font-size:8pt}
blockquote {
background: transparent url(/images/common/quote1a.gif) left top no-repeat;
margin:0px;
padding: 0px;
font-weight: normal;
color:#000;
}
blockquote div {
padding: 2px 30px;
background: transparent url(/images/common/quote2a.gif) right bottom no-repeat;
}
Relevant html Code: <div id="imageleft">
<img src="/images/common/dummy.gif" alt="Test image" width="100" height="100" />
<div class="imagecaptionleft">Caption goes here</div></div>
<blockquote><div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum augue odio, condimentum et, iaculis quis, facilisis nec, quam. Aliquam eros. Nulla ut lorem. Cras bibendum orci at ligula lobortis bibendum.</p>
</div></blockquote>
The opening quote mark is hidden behind the image - as you can see it has a position of left, and for some reason the <div> within the <blockquote> is including the image so is full width. Any help appreciated I have successfully added a background image to the page but it does not center how I want it to. Right now it is positioned at top center. I would like to move it to Center center of entire page. Using this code instead of center for background-position did not do anything. Neither did 50%, 50%. What can I do to move this over. I have the same problem with a picture file to go above the background file and web links which are all placed at top left of page. It would be nice to move them to top center of page. How is this possible through html code? Here is the code for the background image: <style type="text/css"> body { background-image: url(picture/bamboo.jpg) } body { background-position: center } body {background-repeat: no-repeat } </style> Thank you for your help, Hi, I learned css a couple of years ago but am real rusty...anyways, here is an image that i wanted as the background to the top of the page. in the white space, i simply want a horizontal menu with 4 links. i cannot figure out how to position my links in that space correctly. any help appreciated! [/IMG]http://img251.imageshack.us/img251/1333/toplogoinfo.jpg[/IMG] here is the code i have so far: Code: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Precision Truck Painting and Repair</title> <style type="text/css"> .body{ margin:0; padding:0; } #page { width: 800px; margin: 0 auto 0 auto; } #banner { background-image:url(images/jpegs/top_logo_info.jpg); height: 140px; background-repeat:no-repeat; } ul.nav { list-style-type: none; padding-left: 0; margin:0px 0 0 360px; font-family:Arial, Helvetica, sans-serif; } ul.nav li { display: inline; width:115px;} ul.nav a { text-decoration:none; } </style> </head> <body> <div id="page"> <div id="banner"> <div id="top"> <ul class="nav"> <li class="index"><a href="index.html">Home</a></li> <li class="painting"><a href="pages/painting_collision.html">Painting/Collision</a></li> <li class="painting"><a href="pages/body_trailer_repairs.html">Trailer & Body Repairs</a></li> <li class="index"><a href="pages/Contact_us.html">Contact Us</a></li> </ul> </div> </div> </div> </body> </html>
I have worked out a section banner. There is one for each section in a column of 4 or 5. The buttons on the left call a JavaScript that move DIVs up and down, reordering the content as the user wishes. Anyway, I'm having trouble figuring out how to make the center section where the Title is, non-fixed (expand to fit the space). I'd like it to spread out to as wide as the container allows, minus the width of the left and right ends, of course. See the actual thingy on a test page he Siliconsatan Here's the styles: Code:
<style type="text/css" media="all">
.col_tab_left {
position: relative;
width: 36px;
height: 30px;
left: 0px;
top: 0px;
background-image: url(./images/col_tab_left.gif);
}
.col_tab_middle {
width: 430px;
height: 30px;
position: absolute;
left: 36px;
top: 0px;
background-image: url(./images/col_tab_bg.gif);
text-align: center;
}
.col_tab_right {
width: 26px;
height: 30px;
position: absolute;
left: 466px;
top: 0px;
background-image: url(./images/col_tab_right.gif);
text-align: center;
}
.col_tab_title {
font-family: tahoma,verdana,arial,helvetica,sans-serif;
font-size: 10pt;
letter-spacing: .05em;
color: #003366;
font-weight: bold;
line-height: 30px
}
.col_block_up {
width: 36px;
height: 30px;
border: 0px solid #003366;
left: 5px;
}
.col_block_down {
width: 36px;
height: 30px;
border: 0px solid #003366;
position: absolute;
left: 13px;
top: 0px;
}
.col_image {
position: relative;
display:block;
left: 6px;
top: 12px;
}
</style>
Here's the html: Code:
<div class="col_tab_left">
<div class="col_block_up">
<img onclick="MoveBlock('ys101','bizJournalCity','Up');" class="col_image" src="images/block_up2.gif" width="11" height="11" border="0" alt="" alt="Move section up" title="Move section up" style="cursor:pointer;" />
</div>
<div class="col_block_down">
<img onclick="MoveBlock('ys101','bizJournalCity','Down');" class="col_image" src="images/block_down2.gif" width="11" height="11" border="0" alt="" alt="Move section down" title="Move section down" style="cursor:pointer;" />
</div>
<div class="col_tab_middle"><span class="col_tab_title">Business Journal News</span></div>
<div class="col_tab_right"></div>
</div>
It looks like this: Hi there, I'm trying to position a background image (starting 756 pixels from the left) which is repeating horizontally - but of course am running into problems because as soon as you repeat-x an image repeats the whole screen, not taking into account background positions. Does anyone have any ideas how I can possibly avoid this?! The only thing I can think of is to create a huge image to factor in for all screen solutions, and just not repeat it at all. I'd prefer not to do it this way as firstly it's not very clean, and secondly it will result in a large file size. Here is a link to the background image to show you what I'm talking about: http://joshsphotos.com/images/bg.jpg I've also put in the CSS that would show what I'm trying to achieve. Code:
body {
background-image: url(../images/bg_repeat.jpg);
background-position: 756px 0px;
background-repeat: repeat-x;
}
Any help would be most appreciated. Hi I am trying to position a background image in my list, but I can't seem to position it where I want it, heres the example http://dmumford.bizhat.com/test/list.htm I need the bullet to be before the link home, but when I change the padding in the ul class the bullett moves with it, if that makes sense. Could someone please help me! Thank you! I have a problem I can't resolve as I'm out of my depth with this CSS positioning issue on a joomla site with a bespoke template I have customised. The problem is that the client (a graphic designer) created a menu design where the top level menu buttons overlap with a curve. I have assigned a background image on hover and it works well. You can see it he I can't post an image of the menu as it won't let me, being a new poster, which is a pain... Code: #horiz-menu a:hover {
display: block;
z-index: 100;
line-height: 22px;
left:-53px;
position: relative;
background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
padding-left:63px;
height:27px;
width:162px;
border-bottom:1px solid #fff;
margin-bottom:-3px;
}
To achieve the overlap, the background has to sit behind the button to its left and that is achieved by moving it a fixed amount of pixels leftward. The menu text is then put back in place with the padding. However the client now wants the hovered image to stick in the parent position when the submenu items are hovered over. I've achieved this with: Code: #horiz-menu li.parent.active a {
background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
z-index: 100;
line-height: 22px;
left:-53px;
position: relative;
padding-left:63px;
height:27px;
width:162px;
border-bottom:1px solid #fff;
}
The trouble is that although the background image is positioned correctly, it has a knock-on effect on all the submenu list items which are being positioned to the beginning of the background image, 53 pixels to the left... I cannot pad the submenu items over to the right as it causes all the other submenus items under the other parents to move to the right too. I suppose my question is twofold: is there any way of setting the active parent list item background image position without the children items inheriting the position change? ; is there a better way of doing what I am attempting to do? If the client had not specified overlapping buttons I would be in the clear but my client was a graphic designer who designed without any thought as to the css implications. The requirements have been signed off and I have to find a way of implementing it. Please, any thoughts? I am not a css coder and I find css to be impenetrable, arcane whilst being slow and difficult to debug. All help really appreciated. Hello, I recently started creating websites again and I have been pulling my hair out on this Firefox compatibility issue. The site navigation looks great in IE but in Firefox a couple of the background images are skewed down and to the left. Since all my tricks from years ago are so outdated now, I decided to try CSS for a simplified navigation setup. The code is probably pretty messy since I chopped it together from numerous sources and still am not completely sure how it works. Background: I created a large 794x1200 PNG image that contains two complete border and navigation sets. I am using CSS to both position the appropriate portion in each table/cell as well as switching to a slice on the 2nd image set for rollover purposes. An example of the current test is he (URL address blocked: See forum rules) *not sure if this is okay but would be best to see the example. If it is not allowed as a non-clickable then feel free to delete. It is here - classtime . org / test6 . htm and the navigation image is he (URL address blocked: See forum rules) *classtime . org / navigate . png I would be eternally grateful to anyone that can help me figure out why the site works great in IE but is coming up skewed in Firefox. As a side note, when I pull up the site in Frontpage, it shows the left-most cell as being larger than it is supposed to be even though it is hardcoded. To get my left image bar to show up in the correct place I had to use a value of "left: -40px;" I'm not sure why that is but I suspect it has something to do with the problem. Thank you very much for taking a look. My jumbled code is as follows: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Ultrasonic Blind Company - Elk Grove Village, Illinois</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css" media="screen">
a:link {color: #FFF4D1;}
a:visited {color: #FFF4D1;}
a:hover {color: #74060c;}
a:active {color: #FFF4D1;}
.top a
{
display: block;
width: 794px;
height: 120px;
background-image: url('navigate.png');
}
.top a:hover {
background-position: 0px -601px;
}
#left {
left: -40px;
width: 150px;
height: 460px;
display: block;
background: url('navigate.png');
background-repeat: no-repeat;
background-position: 0px -120px;
position: relative;
}
#left li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: center;
font: bold 18px Batang;
line-height: 50px;
}
#left li, #left a {height: 50px; width: 146px; display: block;}
#panel1b {top: 10px;}
#panel2b {top: 63px;}
#panel3b {top: 116px;}
#panel4b {top: 169px;}
#panel5b {top: 223px;}
#panel1b a:hover {background: transparent url('navigate.png') 0px -730px no-repeat}
#panel2b a:hover {background: transparent url('navigate.png') 0px -785px no-repeat}
#panel3b a:hover {background: transparent url('navigate.png') 0px -839px no-repeat}
#panel4b a:hover {background: transparent url('navigate.png') 0px -890px no-repeat}
#panel5b a:hover {background: transparent url('navigate.png') 0px -945px no-repeat}
#right {
width: 154px;
height: 460px;
display: block;
background: url('navigate.png');
background-repeat: no-repeat;
background-position: -640px -120px;
position: relative;
}
#right li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: right;
font: bold 18px Batang;
}
#right li, #right a {height: 85px; width: 154px; display: block;}
#panel1r {top: 0px;}
#panel2r {top: 100px;}
#panel3r {top: 200px;}
#panel4r {top: 300px;}
#panel1r a:hover {background: transparent url('navigate.png') -640px -721px no-repeat}
#panel2r a:hover {background: transparent url('navigate.png') -640px -821px no-repeat}
#panel3r a:hover {background: transparent url('navigate.png') -640px -921px no-repeat}
#panel4r a:hover {background: transparent url('navigate.png') -640px -1021px no-repeat}
</style>
</head>
<body bgcolor=#74060c>
<div align=center>
<table id="Table_01" width=794px height=600px border=0 cellpadding=0 cellspacing=0>
<tr>
<td colspan="3" height="120" width="794" bgcolor="#FFF4D1">
<div class="top">
<a href="(URL address blocked: See forum rules)"></a>
</div>
</td>
</tr>
<tr>
<td align=left valign=top height=674px width=150px bgcolor="#FFF4D1">
<ul id="left">
<li id="panel1b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Contact</a></li>
<li id="panel2b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Residential</a></li>
<li id="panel3b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Commercial</a></li>
<li id="panel4b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Coupons</a></li>
<li id="panel5b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Questions</a></li>
</ul>
</td>
<td align=left valign=top width=490px height=674px bgcolor="#FFF4D1">
aaa</td>
<td align=left valign=top width=154px height=674px bgcolor="#FFF4D1">
<p align=right> <ul id="right">
<li id="panel1r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel2r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel3r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel4r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
Hey folks, here's an odd problem that's got me totally stumped. I've got a nine item unordered list, each of which is a link that contains both text and a background image. The background image is a large spritebox. I'm using background-position to shift the spritebox to display the sprite specific to the a:link and also to display a separate a:hover version. Looks great in Safari and CSSEdit, but in Firefox four of the links are misplaced and the sprite is incorrect. The hover state is correct, however. This is hard to explain, but the example should help illustrate the problem. My thought was that it was related the psuedo class of a:link, but nothing I've tried seems to help. Any thoughts? The example file contains both the HTML and the CSS (just to simplify this problem for this forum). The full background image and the file containing the sprites is at my website, artmeetsearth dot org slash 2011 slash codetest dot html. To get the image type socialmediaicons.jpg instead of codetest. Thanks for any help you can offer! Hey Guys, I designed a header logo in the top left corner of my psd document. I am now slicing my design up and I can't seem to be able to position the header into the top left hand corner. Any help would be greatly appreciated. Here is my CSS Code: ul#nav { height: 91px; width: 271px; margin:30 auto; background: url(images/logo.jpg) no-repeat; } The link below shows the fixed positioning layout I need to achieve, but rather than have the scrolling content fixed to the left or right hand side I want to have it centered with the navigation fixed and just to the left of the scrolling content. Like the image below: http://limpid.nl/lab/css/fixed/header Is this possible? Thanks I have my website at omel.co.cc I have a menu that I positioned absolute, but when I view in a different resolution the menu changes position, I have put a parent div positioned relative but every time I scroll the menu moves which I do not want to, when positioned fix, the position of the menu goes off, on different resolutions and when I resize the window, I have googled these, hope someone could help, or I just did not googled enough? Using Firefox, the current state of the site I am working looks like I want it to look, yet in IE 6 it does not look correct, surprise. (IE7 looks great). I've tried several things, and I am completely lost as to a solution, I'd love some help, or suggestions, thanks. UTC Site I realize older IE versions don't play nice with the position: fixed tag.... and I need an alternative. can someone please explain why this doesn't work? here is my style sheet.... Code:
body { background-image: url(../images/spacer.gif); background-repeat: repeat; height: 100%; width: 100% color: 000; }
p {
margin-bottom: 0em;
line-height: 1.5;
}
div.sub h4,
div.sub { color: #000;
}
img {
border: none;
}
div.main {text-align: left; width: 555px; height: 427px; clear: both; border: solid 0 #fff; padding: 0;}
div.journalhead { position: absolute; top: 427px; left: 1px; width: 555px; height: 73px; }
div.projects { position: absolute; top: 333px; left: 555px; width: 344px; height: 44px; }
div.logo { position: absolute; top: 1px; left: 555px; width: 345px; height: 332px; }
div.projectthumbs { position: absolute; top: 376px; left: 555px; }
div#journalbottom { position: absolute; top: 453px; left: 1px; width: 555px; height: 47px; }
ul { position: absolute; float: left; margin-bottom: 0; }
ul#fader li img { text-align: left; position: fixed; top: 1px; left: 1px; width: 555px; height: 427px; padding: 0; }
.fade{
margin-bottom: 0em;
}
.fade p{
margin-bottom: 0em;
text-align: center;
width: 100%;
}
a:link {color: #000; }
a:visited {color: #000; }
a:active {color: #333; }
a:hover {color: #333; }
any light shed would be great, i realize it's a bit sloppy at present. please help Hi everyone, I have posted here [HTML Programming] because I'm not entirely sure what forum this particular problem should be put in. I have a fixed menu that I include using php. From looking at the source code I can see that it has definately included the menu. However IE only displays the menu 50% of the time. I have no idea why. At first I thought it was because I have a javascript animation for it to slide down, but I removed that and I still get the same problem. To see what I mean please visit twisted-reality.co.uk using IE and refresh a few times. Firefox, Opera, Safari and Netscape all display the menu fine, but IE feels like it needs to be different. I'm new to this forum but I hope someone can help Twisted-Daemon 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;
}
|
|||||||