|
CSS - End Of Div Extends Out Of Viewable Area...
The right end of the DIV extends out of the viewable area. Why?
Code:
<html>
<head>
<title>Untitled</title>
<style>
.book_box {
width: 100%;
padding: 5px 5px 5px 5px;
margin-top: 10px;
margin-bottom: 10px;
border: 2px solid #003366;
background-color: #eef7ff;
text-align : center;
}
body {
margin: 10px;
}
</style>
</head>
<body>
<div class="book_box">
This is a test.
</div>
</body>
</html>
Similar Tutorials<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" xml:lang="en">
<head>
<title>All Fore U Golf Clinic</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "nav.css";
</style>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div id="header">header thing</div>
<div id="wrapper">
<div id="container">
<div id="content">
<h1>content</h1>
<p>Sum Stuff goes here...</p>
<p class="last">...and here</p>
</div>
</div>
<div id="sidebar">
<h1>navigation</h1>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Golf Stuff</a>
<ul>
<li><a href="#">Clubs stuff</a></li>
<li><a href="http://www.google.com">accessories stufff</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
<br>
</div>
<div class="clearing"> </div>
</div>
<div id="footer">footer thing</div>
</body>
</html>
CSS: Code:
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
/*<![CDATA[*/
#wrapper {
background: #f1f2ea;
}
#header {
background: #d7dabd;
}
#container {
width: 100%;
background: #f1f2ea;
float: right;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
}
#sidebar {
width: 200px;
float: left;
}
#footer {
background: #d7dabd;
}
h1 {
margin-top: 0;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
/*]]>*/
Works fine in IE, but when displayed in firefox the id=content extends off the screen. Working on a project that has listing of physical features of frogs. In one listing, the text in the descriptions are in a block for which the last line extends to the right margin. Here is a sample of what the text looks like: Code: 1. A weak tarsal fold; outer fingers one-third webbed; males having spiny nuptial tuberosities; color in life tan or brown with blotches or reticulations, never green; iris bronze color . . . P. euthysanota group--2 No tarsal fold; outer fingers having only vestige of web; males lacking nuptial tuberosities; color in life green or brown; iris red or golden color . . . . . . . . . . . . . . . . . . . . . . P. schmidtorum group--5 My question is how to write the CSS to get only the LAST line of a block of 'justified' text to extend to the right edge. Also, if the user resizes the page, I don't want the right-aligned text to write on top of the left-aligned text. One of the biggest constraints is that it HAS to be done with CSS and not through javascript. Thanks. I can't figure out what's going on here. View this page in Firefox and the problem is obvious: http://www.westportsquares.com/page...e-internet5.php The background on the word Comments which is between H2 tags extends upward. Here is my code for h2 and the parent element: Code:
div.comment {
padding: 4px;
text-align: left;
}
div.comment h2 {text-align: center;
background: #484452;
color: #A098B3; }
Hopefully I'm just missing something simple here. Any suggestions? I'm having problems with a div, a simplified example is at http://alphaworks.co.uk/test/child.htm (code below), basically I want the grey area to completely surround the image and the text. At the moment the grey area (a div) only goes to the bottom of the text and the image sticks out the bottom of it. Can someone explain why this is and what I can do to get it doing what I want it to? Many thanks, Geoff Code: <html>
<head>
<style type="text/css">
.child
{
border : solid thin blue;
background : gray;
}
.child .thumb
{
float : left;
}
.thumb img
{
border : 1px solid black;
}
.child .text
{
margin-left : 220px;
}
.child .name
{
font-weight : bold;
}
.child .description
{
font-style : italic;
}
</style>
</head>
<body>
<div class="child">
<div class="thumb">
<img src="" alt="Image" width="200" height="134" />
</div>
<div class="text">
<span class="name">
Album name
</span>
<br/>
<span class="description">
Album description
</span>
</div>
</div>
</body>
</html>
I'm trying to get my link area to display so that the user can move over the area surrounding the link as opposed to the link text itself, but I can't seem to get it to work properly. I thought I could just set the padding and that would take care of it. Code:
<div id="navBar">
<h4>Interface Links</h4>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
</div>
Code:
#navBar
{
position:absolute;
top:3em;
right:0;
width:15%;
margin:0;
padding:0;
background-color:#CCCCFF;
font-size:1em;
border-left:2px solid #666699;
}
#navBar h4
{
padding:0;
margin:0;
background-color:#666699;
border-top:2px solid #666699;
font-size:.90em;
text-transform: lowercase;
color:#FFFFCC;
}
#navBar a
{
display:block;
text-decoration:none;
padding: 8px 0px 2px 10px;
}
#navBar a:hover
{
background-color:#9999CC;
}
My name is Steven and I wanted to officially introduce myself and see if anyone could help me with a css issue. I have set the page up and upon checking an item, I want the page to show the form below. I was able to do that but either way it keeps the space where the form is which in fact, it should minimize and maximize the space upon clicking the check item. Instead, the area is still there. This seems to the only issue that I am unable to resolve and would greatly appreciate it if someone could help. I have listed the code below as well as attached the css and the page( If images are need, please let me know: Code: html, body {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
font-family:Arial, Helvetica, sans-serif;
}
#logo {
background: url(profileimages/logo.png) no-repeat;
position: absolute;
left: 6px;
top: 3px;
z-index: 4;
width: 92px;
height: 64px;
}
#congratulations {
position: absolute;
left: 22px;
top: 377px;
z-index: 3;
width: 914px;
height: 30px;
font-size:26px;
font-weight:bold;
color:#4fa700;
}
#toptext {
position: absolute;
left: 31px;
top: 85px;
z-index: 6;
width: 897px;
height: 16px;
font-size:16px;
font-weight:bold;
color:#1b1b1b;
}
#cartproduct,
#cartproductcopy {
position: absolute;
z-index: 2;
width: 268px;
height: 20px;
font-size:18px;
color:#272727;
}
#shippinginformation {
position: absolute;
left: 226px;
top: 421px;
z-index: 2;
width: 711px;
height: 31px;
font-weight:bold;
font-size:34px;
color:#272727;
}
#willbesecure {
position: absolute;
left: 83px;
top: 285px;
z-index: 3;
width: 315px;
height: 14px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#foryourarea {
position: absolute;
left: 682px;
top: 257px;
z-index: 3;
width: 233px;
height: 14px;
font-size:11px;
color:#272727;
font-weight:bold;
}
.toplinksbar {
color:#006FD6;
text-decoration:none;
}
.toplinksites {
font: 12px/14px Arial;
margin: 0px;
color: #1B1B1B;
text-align: left;
text-decoration: underline;
}
#toplinks {
position: absolute;
left: 745px;
top: 25px;
z-index: 2;
width: 227px;
}
#item,
#qtyproductback {
background: url(profileimages/layer5copy12.gif) no-repeat;
position: absolute;
left: 11px;
z-index: 2;
width: 31px;
height: 25px;
}
#totalback,
#priceback {
background: url(profileimages/layer5copy9.gif) no-repeat;
position: absolute;
top: 156px;
z-index: 2;
width: 124px;
height: 25px;
}
#cartproductcopy {
top: 720px;
left: 262px;
}
#ourprice {
position: absolute;
left: 803px;
top: 190px;
z-index: 2;
width: 117px;
height: 28px;
font-size:12px;
font-weight:bold;
}
.ourpricepercent {
color:#43a000;
}
#securelock {
background: url(profileimages/id46vectorsmartobject.gif) no-repeat;
position: absolute;
left: 525px;
top: 875px;
z-index: 2;
width: 20px;
height: 27px;
}
#profilevectorsmartobject {
background: url(profileimages/vectorsmartobjectsmall.gif) no-repeat;
position: absolute;
left: 15px;
top: 259px;
z-index: 3;
width: 62px;
height: 68px;
}
#cartproduct {
top: 191px;
left: 54px;
}
#productdescription {
position: absolute;
left: 59px;
top: 163px;
z-index: 3;
width: 140px;
height: 13px;
color:#272727;
font-size:14px;
font-weight:bold;
}
#retailprice {
position: absolute;
left: 669px;
top: 190px;
z-index: 2;
width: 117px;
height: 13px;
font-size:13px;
color:#ff0000;
}
#acceptedpayments {
position: absolute;
left: 490px;
top: 270px;
z-index: 2;
width: 121px;
height: 13px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#enteryourzipcode {
position: absolute;
left: 683px;
top: 279px;
z-index: 3;
width: 145px;
height: 12px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#profilereadmoreaboutit {
position: absolute;
left: 87px;
top: 300px;
z-index: 3;
width: 98px;
height: 9px;
}
.profilereadmoreaboutitlink {
text-decoration:underline;
color:#3170ab;
font-size:10px;
}
#formback {
background: url(profileimages/layer5copy13.gif) no-repeat;
position: absolute;
left: 557px;
top: 467px;
z-index: 2;
width: 380px;
height: 381px;
}
#formtable {
font-size:14px;
font-weight:bold;
}
#item {
top: 187px;
}
#qtyproductback {
top: 156px;
}
#checkback {
background: url(profileimages/layer5copy10.gif) no-repeat;
position: absolute;
left: 677px;
top: 249px;
z-index: 2;
width: 249px;
height: 77px;
}
#lowerbar {
background: url(profileimages/layer1copy5.gif) no-repeat;
position: absolute;
left: 4px;
top: 342px;
z-index: 2;
width: 952px;
height: 3px;
}
#shippingback {
background: url(profileimages/layer5copy7.gif) no-repeat;
position: absolute;
left: 566px;
top: 156px;
z-index: 2;
width: 90px;
height: 92px;
}
#zipcodefield {
position: absolute;
left: 681px;
top: 296px;
z-index: 3;
width: 150px;
height: 25px;
}
#zipcodefieldform {
border:#aab1b7;
}
#totalback {
left: 800px;
}
#priceback {
left: 667px;
}
#formarea {
display:none;
overflow:hidden;
width:1px;
height:1px;
}
#congratulationsback {
background: url(profileimages/layer24copy.gif) no-repeat;
position: absolute;
left: 5px;
top: 368px;
z-index: 2;
width: 951px;
height: 42px;
}
#producttitleback {
background: url(profileimages/layer5copy6.gif) no-repeat;
position: absolute;
left: 48px;
top: 156px;
z-index: 2;
width: 507px;
height: 25px;
}
#layer1copy {
background: url(profileimages/layer1copy.gif) no-repeat;
position: absolute;
left: 373px;
top: 68px;
z-index: 3;
width: 400px;
height: 5px;
}
#profilesecurityback {
background: url(profileimages/layer5copy.gif) no-repeat;
position: absolute;
left: 19px;
top: 278px;
z-index: 2;
width: 395px;
height: 40px;
}
#area {
margin: 0px auto 0px auto;
background: url(profileimages/background.gif) no-repeat;
height:100%;
width: 960px;
position: relative;
}
#shipping {
position: absolute;
left: 583px;
top: 162px;
z-index: 3;
width: 54px;
height: 14px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#yourcart {
position: absolute;
left: 10px;
top: 132px;
z-index: 2;
width: 106px;
height: 17px;
font-size:20px;
font-weight:bold;
color:#272727;
}
#profileshadow {
background: url(profileimages/layer16.gif) no-repeat;
position: absolute;
left: 29px;
top: 326px;
z-index: 2;
width: 32px;
height: 4px;
}
#fedex {
background: url(profileimages/layer30.gif) no-repeat;
position: absolute;
left: 579px;
top: 221px;
z-index: 4;
width: 66px;
height: 18px;
}
#paymenttypes {
background: url(profileimages/layer18.gif) no-repeat;
position: absolute;
left: 490px;
top: 291px;
z-index: 2;
width: 174px;
height: 27px;
}
#profileproductback {
background: url(profileimages/layer24.gif) no-repeat;
left: 223px;
top: 467px;
z-index: 2;
width: 323px;
height: 243px;
}
#profileproductimage {
/*background: url(profileimages/layer25.gif) no-repeat;*/
position: absolute;
left: 227px;
top: 491px;
z-index: 3;
width: 305px;
height: 200px;
}
#topbar {
background: url(profileimages/topbar.png) no-repeat;
position: absolute;
left: 15px;
top: 73px;
z-index: 5;
width: 952px;
height: 41px;
}
#freedivide {
background: url(profileimages/layer32.gif) no-repeat;
position: absolute;
left: 567px;
top: 213px;
z-index: 4;
width: 88px;
height: 1px;
}
#fedexback {
background: url(profileimages/layer31.gif) no-repeat;
position: absolute;
left: 567px;
top: 214px;
z-index: 3;
width: 88px;
height: 33px;
}
#checkbackbutton {
/*background: url(profileimages/layer21.gif) no-repeat;*/
position: absolute;
left: 835px;
top: 293px;
z-index: 3;
width: 72px;
height: 26px;
}
#lowerarrow {
background: url(profileimages/layer34.gif) no-repeat;
position: absolute;
left: 862px;
top: 344px;
z-index: 3;
width: 24px;
height: 6px;
}
#paymentline {
background: url(profileimages/layer20.gif) no-repeat;
position: absolute;
left: 490px;
top: 285px;
z-index: 2;
width: 173px;
height: 1px;
}
#form {
/*background: url(profileimages/layer23.gif) no-repeat;*/
position: absolute;
left: 571px;
top: 480px;
z-index: 3;
width: 349px;
height: 354px;
}
#checkoutbuttonback {
/*background: url(profileimages/layer6.gif) no-repeat;*/
position: absolute;
left: 556px;
top: 854px;
z-index: 2;
width: 382px;
height: 50px;
}
#total {
position: absolute;
left: 806px;
top: 163px;
z-index: 3;
width: 28px;
height: 10px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#price {
position: absolute;
left: 673px;
top: 163px;
z-index: 3;
width: 30px;
height: 11px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#free {
position: absolute;
left: 598px;
top: 191px;
z-index: 3;
width: 34px;
height: 10px;
font-size:14px;
color:#2e2e2e;
font-weight:bold;
}
#radiobutton {
position: absolute;
left: 571px;
top: 190px;
z-index: 3;
width: 13px;
height: 13px;
}
#qty {
position: absolute;
left: 15px;
top: 162px;
z-index: 3;
width: 25px;
height: 14px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#itemnumber {
position: absolute;
left: 24px;
top: 190px;
z-index: 3;
width: 5px;
height: 13px;
font-size:18px;
color:#272727;
}
#copyright {
position: absolute;
left: 13px;
top: 971px;
z-index: 2;
width: 940px;
height: 126px;
font-size:11px;
}
.copyrighttext {
text-align:center;
}
.copyrightlinks {
text-decoration:underline;
color:#000000;
}
I'm trying to move my user CP area to be at the right hand side underneath the banner at the top of the forum page, where the Mark of the Wolves text link is....right across from that on the right side, but it seems that it's impossible, the user CP is there but the banner is overlapping it and when I tried to move it it just disappeared, like the lower area under the banner was a completely different area or something. Please help. My site: garou-motw.com Code: #userarea { height: 78px; float: right; padding: 25px 15px 20px 10px; text-align: right; font-size: 1.0em; color: #ffd700; font-family: tahoma, sans-serif; } #userarea a:link, #userarea a:visited { color: #C68E17; text-decoration: none; border-bottom: 1px dotted #555555; } #userarea a:hover { color: orange; text-decoration: none; border-bottom: 1px dotted green; } I'm (noobishly) developing a site and want a menubar of fixed size at the top, with the remaining area of the window filled with a div containing the scrolling content. It's height should be effectively 100% - size of menubar. When I tried 100% height it natually was the full screen height, but then the whole page is full screen height plus the height of the menu bar. Does anyone know how to size a div to meet my needs? I was wondering whether there is someway to fix the area of a content in CSS so that it wont expand if too much text was entered, just similar to the html code that fixes the area of the table. i.e. Code: <table style="table-layout: fixed;"> This code lets the table stay in a fixed size no matter how much text is entered... Hello... My name is Matt and I'm looking for some help with what could be simple CSS coding. I designed an image using Adobe Photoshop and I plan on uploading it to my website. What I want to try do is make this image after I upload it, to a like certain table. I wasnt sure what the terminology would be for this. I want my image to be the text area instead of using a large textarea code I want the image to be the text area where the text will scroll up and down within the image. I dont want my image to be the background. specifically I need the image itself to be the scrolling text area. Can anyone help me out with this coding? Or steer me in the right direction of terminology for this? I'd appreciate it... Thanks Hi, Is there a relatively simple way to place an image over the main background of a site, on the right of the main design? For example, see how the Keller Williams logo is on the right, over the background he http://www.groundedgroup.com/client...Interface3.html Ideally, I want to make it happen he http://www.groundedgroup.com/clients/NWR/ It would be great if the image was always just a little bit to the right of the main design, like shown above. Any ideas? Thanks. Hi I've got a testpage, with everything removed except the problem which occurs in Firefox http://ied.gospelcom.net/tester.php There is a mouseover popup, which is toggled from hidden to visible by onmouseover on some of the table cells. The CSS for this is #reportalert {visibility:hidden;} This is not a javascript problem because it happens with js disabled. I have removed the JS toggle script from this page, so you won't even see this happen. As soon as I have the div with id="reportalert" anywhere on the page, its presence prevents a cursor appearing in the textarea. It does, in fact, have focus, because you can type in it. But it is disconcerting not to appear to have focus. It is as if the 'visibility:hidden' of the div somehow leaks out to affect the cursor. I have tried all sort of things, such as putting visibility:visible on the text area, or its whole TD. Any other ideas I could try? thanks Tony Hey all I'm new here, (and I'll be honest) mainly because I heard this is a good place to get help. My site is nateandjong.com (a joint blog between me, "jong" and a friend "nate"). If you view the page, you will see that the rollovers for buttons in the navigational bar only occur when the mouse points to the top half of the button. When the bottom half is clicked nothing happens. Also, when the button is clicked, the dotted outline surrounds the entire image as it should. What's the deal? The css style governing one of the buttons is: #mainButton{ display:block; width:80px; height:30px; background: url('images/main_btn.jpg') 0 0 no-repeat; } #mainButton:hover{ background-position:0 -30px; } The html displaying the buttons is as follows: <div id="navbar"> <div id="navbuttons"> <table border=0 cellpadding=0 cellspacing=0><tr> <td><a id="mainButton" href="/"></a></td> <td><a id="aboutButton" href="/about/"></a></td> <td><a id="faqButton" href="/"></a></td> <td><a id="archiveButton" href="/archive"></a></td> <td><a id="rssButton" href="/"></a></td> <td><a id="contactButton" href="/"></a></td> </tr></table> </div> </div> does anybody have any ideas? other information: I am using Wordpress 2.1 and my theme is worked off of the generic kubrick theme. THANKS in advance. I have been searching and googling this problem for hours to no avail. Hello, I'm new to this site which is really interesting, I hope a nice soul will be able to help me... I've tried to solve this but I can not find the solution. my site is here, the code are too long to post here. I hope the moderator will understand. moureau . me / pro.xml moureau . me / site.css The products menu has a problem... As you can see. If I use display-block or -inline-block the result is different but never ok. If I use Inline-Block, all the drop down menu items have the width(+padding) of the father menu except the last line which is longer without the right padding also, text and background. If I use Block, all the drop down menu items have the width(+padding) of the father menu but the last line goes out of the menu only during an hover and just the text, not the black transparent background which has the same length as other drop down menu items... What should I add to solve that ? I would like the menu to be large enough to show all the items. I'm using ImpressPages.org CMS that's why I can not use another layout for these menus. Thanks a lot. On the home page of my site (http://awsmiedev06.awecomm.com), there is a large clickable area for Life Insurance, Health Insurance & Disability Insurance. However, when you get into the internal pages of the site, the clickable area is much smaller, making it harder to click on the 3 Insurance Navigation items. You have to almost click on top of the words to get the arrow to turn into a hand so you can click on it. Why is this? Why is the clickable area large (and perfect) on the home page but not on the internal pages? This is the code for the navigation items: Code: .cl2a /*disability*/
{
background-image:url('images/awh-hover.png');
background-repeat:no-repeat;
width:349px;
height:42px;
float:right;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
margin-left:-24px;
}
.cl2d /*disability*/
{
background-image:url('images/cl_2.jpg');
background-repeat:no-repeat;
width:349px;
height:42px;
float:right;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
margin-left:-4px;
}
a.cl2:hover /*disability*/
{
width:346px;
height:42px;
float:right;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color :#163752;
padding-top:9px;
display:block;
margin-left:-2px;
}
.cl3a /*life*/
{
background-image:url('images/aws-hover.png');
background-repeat:no-repeat;
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
}
.cl3d /*life*/
{
background-image:url('images/cl_3.jpg');
background-repeat:no-repeat;
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
a.cl3:hover /*life*/
{
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
.cl4a /*health*/
{
background:url('images/awd-hover.png') no-repeat top left;
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
}
.cl4d /*health*/
{
background-image:url('images/cl_4.jpg');
background-repeat:no-repeat;
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
a.cl4:hover /*health*/
{
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
Any help will be greatly appreciated!!! I just can't do it!!!! I need help on this.. My header.. I can't get rid of the spaces around the image.. hmm check this out.. I can't post a link direct but its on the world wide web at piedmontred (dot) com firebug is telling me its an element.style margin, but for the life of me I can't find that in any CSS sheet I have.. and for some reason firebug doesn't identify a sheet either.. I did buy this wordpress template and have done quite a bit of CSS hacks, but I just can't figure this one out.. Thanks for any help!! Todd Website you can check: http://www.refinethetaste.com/html/default.asp?Section=myaccount&SubSection=signup <h2>Login Information</h2> backhground does not extend fully when website opened with internet explorer. any help appreciated. Code:
<style>
/*sign up*/
#signup { width:576px; float:left; margin-left:2px; }
#signup .signup { float: left; width: 576px;}
#signup h1 { height:30px; font-size: 18px; color:#716759; line-height:30px;}
#signup h2 { height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#signup .hline { border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }
#signup form fieldset { margin: 10px 0; border: #ece7d1 1px solid; }
#signup form div label { display: block; float: left; width: 120px; padding: 5px; margin: 0 0 10px 0; text-align: left;}
#signup form div.required label, label.required { font-weight: bold; }
</style>
<div id="signup">
<div class="signup">
<h1>Create a New Account</h1>
<div class="hline"></div>
To take full advantage of your Williams-Sonoma account, please provide all the information below.
<form action="?Section=myaccount&SubSection=signup&Process=add2member" method="post">
<p><strong>Bold</strong> fields are required.</p>
<fieldset>
<h2>Personal Information</h2>
<div class="required">
<label for="FirstName">First Name</label>
<input type="text" name="FirstName" value="" />
</div>
<div style="clear:both; height:2px; width:2px; overflow:hidden;"> </div>
<div class="required">
<label for="LastName">Last Name</label>
<input type="text" name="LastName" value="" />
</div>
<div style="clear:both; height:2px; width:2px; overflow:hidden;"> </div>
<div class="optional">
<label for="CompanyName">Company Name</label>
<input type="text" name="CompanyName" value="" />
</div>
<div style="clear:both; height:2px; width:2px; overflow:hidden;"> </div>
<div class="required">
<label for="phone">Phone</label>
<input type="text" name="Phone" value="" />
</div>
<div style="clear:both; height:2px; width:2px; overflow:hidden;"> </div>
<div class="optional">
<label for="newsletter"><input name="newsletter" type="checkbox" value="1" checked="checked" /></label>
Yes, I would like to be notified of news and happenings at RTT via this email address.
</div>
<h2>Login Information</h2>
<div class="required">
<label for="email">Email</label>
<input type="text" name="Email" value="" />
</div>
<div style="clear:both; height:2px; width:2px; overflow:hidden;"> </div>
<div class="required">
<label for="Password">Password</label>
<input type="password" name="password" value="" />
</div>
<div style="clear:both; height:2px; width:2px; overflow:hidden;"> </div>
<div class="required">
<label for="Confirm Password">Confirm Password</label>
<input type="password" name="passwordc" value="" />
</div>
<div style="clear:both; height:2px; width:2px; overflow:hidden;"> </div>
<div class="required">
<label for="submit"></label>
<input type="hidden" name="xp" value="xp">
<input type="image" name="Create Account" src="<%=WebsiteURL%><%=THEMES%>/images/btn_createaccount.gif" />
</div>
</fieldset>
</form>
</div>
</div>
is there a way to have a different background image in the .content area on different pages? this is the site: http://bradleyrose.net/WaterStreetRestaurant/pages/catering&parties.html cobble-stone-road-4.jpg is used on all pages, is there a way to use a different image on some pages? Hey all, I'm hoping someone can help me! Basically i've been setting up this website (using e107) and the theme I am using isn't exactly what I want, there are a few pages that don't quiet work. Anyway I have tried to modify this and I have just been unsuccessful, I did manage to do a little bit but just reverted back as the chances were it wasn't right!! All I need is to remove 2 areas of the page and make the center piece fill the page. If you think you can help me reply here and ill talk to you either via IM or PM as I will have to give you login details and URLs etc Thanks, Ben |
|||||||