|
CSS - 'double' Background? (base + Tile)
Hiya,
So what I'm trying to do is have a base image used as a background that sits on the left side, and then another image to be used to tile across the rest of the page from where the first one left off. I'm not really sure how/if you can easily do something like that, and I can't seem to find anything when I'm searching. And when its all said and done, text would still go over both images as if it was one image. Thanks, -Sky Similar TutorialsI'm trying to tile the background of my menu infinitely so the design stretches to the very edge at the bottom of the viewport. Unfortunately, for some strange reason, it just decides to stop in the middle of the page. I've tried height:100% in various places with no luck. Help would be immensely appreciated! To see what I'm talking about, go here . My page code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <title>Z Studios ::</title> <style type="text/css" title="currentStyle" media="screen"> @import "zstudios.css"; </style> </head> <body> <div id="pageHeader"> <h1><span>Z-Studios</span></h1> </div> <div id="mainnav"> <ul> <li id="navLife"><a href="#life">Life</a></li> <li id="navMovies"><a href="#movies">Movies</a></li> <li id="navArt"><a href="#art">Art</a></li> <li id="navBusiness"><a href="#business">Business</a></li> </ul> </div> <div id="page"> <div id="mainleft"> <div id="mainleftTop"> </div> </div> <div id="maincenter"> <div id="content"> kjfdlsj (repeated over and over to test background stretching) </div> </div> <div id="mainright"> <div id="mainrightTop"></div> </div> </div> </body> </html> ... and my stylesheet: Code: /* Header/Logo - using an image to replace text in an h1. */
#pageHeader h1 {
background: transparent url('images/header.jpg') no-repeat top left;
width: 774px;
height: 148px;
float: none;
margin: 0;
}
#pageHeader h1 span {
display:none
}
/* Main menu bar */
#mainnav {
width: 774px;
height: 38px;
border: 0;
padding: 0;
margin: 0;
top: 78px;
left: 0px;
}
#mainnav ul {
width: 774px;
height: 38px;
background: url(images/menu.gif) no-repeat;
margin: 0;
padding: 0;
position: relative;
left: 0px;
}
#mainnav ul li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#mainnav ul li, #mainnav a {
height: 38px;
display: block;
}
#mainnav ul li a {
text-indent: -9999px;
text-decoration: none;
}
/* Mouseover buttons */
#navLife {
left: 100px;
width: 60px;
}
#navMovies {left: 250px; width: 85px;}
#navArt {left: 430px; width: 60px;}
#navBusiness {left: 565px; width: 100px;}
#navLife a:hover {background: transparent url(images/menu.gif) no-repeat -100px -38px;}
#navMovies a:hover {background: transparent url(images/menu.gif) -250px -38px no-repeat;}
#navArt a:hover {background: transparent url(images/menu.gif) -430px -38px no-repeat;}
#navBusiness a:hover {background: transparent url(images/menu.gif) -565px -38px no-repeat;}
html, body {
margin:0px 0px 0px 0px;
padding:0px;
background-image: url("images/bg.jpg");
height: 100%;
}
#page {
height: 100%;
}
#maincenter {
background-image:url("images/content_border_top.gif");
background-repeat: no-repeat;
width:529px;
float:left;
padding-top:36px;
height: 100%;
}
#content {
background-image:url("images/content_bg.jpg");
background-repeat: repeat-y;
text-align: left;
padding-left: 30px;
padding-right: 30px;
}
#mainleft {
width:190px;
float:left;
background-image:url("images/menu_left.gif");
background-position: 0px 67px;
padding-bottom: 36px;
height: 100%;
}
#mainright {
width:55px;
height: 100%;
float:left;
background-image:url("images/right_border.gif");
background-repeat: repeat-y;
background-position: 0px 67px;
padding-bottom: 36px;
}
#mainleftTop {
padding-left: 55px;
padding-top: 67px;
text-align: center;
background-image:url("images/top_left.gif");
background-repeat: no-repeat;
}
#mainrightTop {
width:55px;
float:left;
background-image:url("images/top_right.gif");
background-repeat: no-repeat;
padding-bottom:0;
}
Thanks again! ~Zach I've got two DIVs that flank my page content. Here's some CSS: #leftside { width: 35px; background-image: url("_images/left.gif"); background-repeat: repeat; float: left; clear: both; overflow: auto; } As you can see, I've used both clear and overflow and the background will not tile in ANY browser, PC or Mac. I've applied combinations or overflow and clear to every DIV on the page and nothing works. It just will not tile unless I put something in the DIV (like text or an image) or if I hardcode the height, which is unacceptable since every page will differ. I'm at my wits end. I've spent the last 4 hours searching for answers and none seem to work. Hi there, I'm trying to get the background image to repeat down the page, but I think the float is messing it up since it's outside the element, or something like that. The background image call works fine, you can test it if you enlarge the #Middle height values. http://www.wpforrealestate.com/prod...es/Design2/www/ I've had this problem before, but figured it out through the help here and some links on floats, but this time I'm just not getting it for some reason. Any ideas? Thanks. I'm working on a pet project on the off chance that I could be hired by a small business referral organization in the city where I live, so this isn't super urgent. I'm also not a web developer by trade, more IT, so if I make any obvious mistakes, feel free to point them out. I've got a simple absolute-positioned two-column layout and a two-color background that I want to tile vertically behind it. The problem seems to be that the browsers ( IE and FF, haven't tried chrome/safari/opera) seem to think that the body ends at the bottom of the logo I set on top, and won't tile it beyond the bottom of the image. HTML: 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> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hub City Business Network | Word-Of-Mouth Business Referrals in Hattiesburg, Mississippi | Home</title> </head> <body> <div id="content"> <div id="logo"><a href="index.htm"><img src="images/hcbnlogo1transparency.png" alt="Hub City Business Network" /></a></div> <div class="left"> <div id="navigation"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="members/index.htm">Members</a></li> <li><a href="contact.htm">Contact Us</a></li> </ul> </div> <div id="leftinfo"> <p>We meet for breakfast every Tuesday,<br /> 7 - 8:30 AM. <br /> at the Neal House at<br /> 1311 East Hardy St.</p> </div> </div> <div class="right"> <p>Hub City Business Network (HCBN), is a Hattiesburg-based business networking group that meets every Tuesday for breakfast at 7:00 till 8:30 A.M. Our membership is composed of some of the finest and best-respected business men and women in Hattiesburg. Our networking model is predicated on the idea that people do business with people they know, trust, and like. Our members know that they can confidently refer business to a member and the referral will be handled in a timely, professional manner. In addition, we encourage members to meet outside of the weekly meetings for one-on-one Strategic Marketing Sessions (SMS). An SMS usually takes the form of a lunch or coffee, and gives members time to discover in a more relaxed environment things about other members that don't surface at the regular weekly meetings. </p> </div> <div id="footer"> <p>Site built by Robert Greenstreet</p> </div> </div> </body> </html> CSS: Code: html
{
width:100%;
}
#logo img
{
margin:10px 0px 0px 20px;
width:400px;
height:100px;
}
img
{
border:0px;
}
a:link
{
color:#29497f;
}
a:visited{
color:#5dd0c0;
}
body
{
width:650px;
margin-left:auto;
margin-right:auto;
background-color:#29497f;
}
#content
{
/*height:500px;*/
width:650px;
background-image:url('../images/bg1.png');
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
margin-top:-10px;
}
.left
{
position:absolute;
left:auto;
top:120px;
width:15em;
margin-left:12px;
padding-left:0px;
}
.left ul
{
list-style-type:none;
margin-left:-33px;
font-family:sans-serif;
}
#leftinfo
{
margin-left:10px;
width:9em;
}
.right
{
position:absolute;
left:auto;
top:120px;
width:27em;
margin-left:12em;
font-family:sans-serif;
}
.right p
{
color:#000000;
}
#memberlist ul
{
margin-left:-40px;
}
#memberlist a:visited{
color:#6a92d4;
text-decoration:none;
}
#footer
{
position:absolute;
top:400px;
width:650px;
margin:0 auto;
}
Also, I'm working on getting that footer centered about 30px from the bottom of the page, without running up into whatever content may be above it. I think I might be able to figure that one out on my own, though. Like I said, no rush. This isn't a paid gig Hi, I am trying to make my page have a double background - one picture should be repeated on X axis and one big shouldn't be repeated. My CSS file looks like this: css Code: Original - css Code html, body { min-height: 100%; height: auto; margin: 0px; padding: 0px; } body{ background-image:url(/background.jpg); background-repeat: repeat-x; background-position: center bottom; } html { background-image: url(/Pic.jpg); background-repeat: no-repeat; background-position: center bottom; }
The background(background.jpg) is displayed correctly - it's aligned to the center bottom, but the picture (Pic.jpg) is aligned to the top left corner and has height and width of the page's content. How can I fix this behavior? I'm trying to figure out how come the setting for the "base" <div> applies the margin rules to the <ul> in this example (see halveway down the article) URL and it does not work for me when I re-create the same code here URL As far as I can tell I'm duplicating something that seems fairly simple. So the solution is probably a simple one, why doesn't the margin rules affect the <ul> tag in my HTML and why does it work in the example? Sincerely, Aaron S Alright, so I took advice I was receiving and made a tableless template for a site. Now I have one problem - my two columns are <div> tags, floated to the left and right. At the bottom of the page, however, I need to align the ends of the column horizontally - without using 'height' attributes that I'd have to change upon updating or changing any page. The site files are attached. I basically need a way to end each column at the same line. Changing the entore layout of the page is not an option because I do not have the time to re-configure everything - the solution does not need to be absolutely perfect as far as CSS validation goes, but it needs to be cross-browser compatible. Thanks in advance - you guys are always excellent with my questions no matter what I ask. If I spell a pseudoelement with a double colon ( :: ), example: ::first-letter (instead of :first-letter ), Internet Explorer 7 ignores the selector. Is this a bug, or is this the way CSS is supposed to work? Hi! I am trying to insert a nice footer menu into a CSS layout. If I set overflow to auto, I get double vertical scrollbars and a horizontal scrollbar I don't want. If I set it to hidden, I can't scroll to see content. If anyone would help me out of this scrolly mess (probably not complicated, but after a day's battling, I can't figure it out) I'd be very grateful. Just noticed that if I do allow scrolling, the footer menu doesn't scroll with the user. D'oh. Any ideas on that as well?? Code: *{border:0px solid #eee;margin:0;padding:0;list-style:none}
html,body,#bg,#bg table,#bg td,#cont{width:100%;height:100%;overflow:auto}
body{font-family:Arial,Helvetica,sans-serif;font-size:10px;cursor:default;color:#000}
h1,h2,{font-family:"Century Gothic","Lucida Grande",Arial,sans-serif;font-size:40px}
a{text-decoration:none;color:#000;outline:0}
#menu{position:absolute;bottom:20px;left:141px;z-index:80;width:100%;line-height:12px;}
#menu div{height:66px;background:#808000;filter:alpha(opacity=60);padding:7px 0 0 7px;}
h1 {position:relative;left:-141px;margin-bottom:-73px;width:140px;opacity:0.99}
h1 a{padding:51px 10px 10px 0;color:white;background:#808000 url(go.gif) 0 -30px repeat-x;font-size:11px;text-align:right;display:block}
h1 a:hover{background:#808000 url(go.gif) 0 43px repeat-x;;color:red}
li.grass {height:12px;padding:0 5px;font-weight:bold;color:#999;display:block}
li.grass a {height:12px;padding:0 5px;font-weight:bold;color:white;display:block}
li.grass a:hover {height:12px;padding:0 5px;font-weight:bold;color:red;display:block}
#atlogoL {position:absolute;top:3px;left:10px;z-index:100}
#atlogo {position:absolute;top:3px;right:10px;z-index:100}
#lena {position:absolute;top:10%;right:20%}
#lena2 {position:absolute;top:2%;left:38%; z-index:100}
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
background: url(images/stripe.png) repeat;
}
p {
font: 1.2em/1.8em Tahoma, sans-serif;
margin-bottom: 10px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: green;
margin-bottom: 10px;
}
ul {
margin-left: 25px;
}
img {
border: none;
}
#page-wrap {
background: white;
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 10px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#main-content {
background: url(images/left-sidebar.gif) repeat-y white;
padding-left: 230px;
padding-top: 20px;
}
#header {
background: #267f23;
text-align: center;
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 15px;
padding-top: 20px;
}
#footer {
background: #267f23;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: white;
}
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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Perfect Fluid Width Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" media="screen" type="text/css" href="slimmed.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<a href="http://css-tricks.com"><img src="images/perfectfluidwidthheader.gif" alt="header" /></a>
</div>
<div id="left-sidebar">
<p>Ii </p>
</div>
<div id="main-content">
<h2>Why is this layout "perfect"?</h2>
<ul>
<li>Works in all major browsers</li>
</ul>
<br /><br />
<p>
Litterarum
</p>
<p>
Hendrerit
</p>
<p>
In
</p>
<p>
Ut
</p>
<p>
Videntur
</p>
</div>
<div style="clear: both;"></div>
<div id="footer">
<p>Footer stuff.</p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="menu">
<h1><a href="index.html">BOB</a></h1>
<div>
<ul>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
</ul>
</div>
</body>
</html>
I have a dotted line on the right side of the left column (the blog) and a dotted line on the left side of right column (the menu). I would like a double dotted line with white space in between, so that the lines at the bottom close at the same height. How can I do this? Do I have to make a double dotted line on the right side of the blog column? Or do I have to make a third column in the middle of my blog with dotted lines on left and right side? You can find my website here and my css here Hello. I'm trying to create a link that spans the entire page horizontally with two different styles of text, each justified around a center margin (the text on the left being right justified, and the text on the right being left justified). I know I could set up two div's and justify the text accordingly, but I think that would separate the links when they need to remain one. Here is what I'm trying to accomplish: (I'm sorry, I'm trying to include a URL to an image, but it keeps blocking my link. No image.) So far I've got the link set up with the styles and hovers working exactly how I want, but the justification is not there. Any ideas? I have painted myself into a corner, and it's time to paint myself out...Hopefully with help from someone here! For the images on my website, I have added a two color border around every image (in Photoshop)...A 1-pixel green border (#6e888f) on the outside of the image, and then a 1 pixel white border just inside that. See example he mableyhandler dot com As I add more and more images to the site, it is getting harder to keep up with adding the border in Photoshop every time. Is there a (semi-easy) way to do this in HTML? OR maybe in CSS? The challenge is that it needs to be a double border...And, it needs to be a permanent design element (the image is clickable, but the border colors should not change on rollover). Thanks very much Due to letter-spacing double break won't work in IE. And triple break works as it is double break. How to solve this problem? I have several rows of images with centered text under them. I wanted to do this without tables, simply because the way the rest of the page is laid out it'd be easier for me to position the images correctly and line everything up right. However, in IE when I test this the last column produces a double word of the last word in the centered text. It's kind of hard to explain, so I'm including my code. I did have this happen before and couldn't figure it out so I just used tables, but I'm so dead-set on getting away from tables that I figured I'd try again. Here's the code: Code: <!-- Start row one --> <div class="sscontent"> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column two --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column four --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> </div> <!-- start row two - continue row structure throughout all scenes --> <div class="sscontent"> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column two --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column four --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> </div> and the style sheet declarations: Code:
.sscontent {
float: left;
width: 688px;
margin: 30px auto 0 36px;
padding: 0 0;
text-align: left;
display: inline;
}
.sscol {
float: left;
width: 152px;
margin: 0 20px 0 0;
padding: 0 0;
text-align: center;
vertical-align: top;
}
Now, I know that someone may bring up that the float is a block element and I can't display it inline, but it's the only hack i knew to get it to display in a straight line and still line up with the rest of the page. I'm more than open to suggestions here! -B Have two search boxes on the Advanced Search page of my Drupal site. The first is well-behaved and sits up in the right corner. I have replacement images for the submit buttons on the search boxes of both. On the first one, the html generated text is good and gone. On the second one, it's on top of the image. Somehow I'm not addressing the second search button correctly to have the 'text-indent: -9999px;' apply. Here's the misbehaving html in question: Code:
<!--[if IE]><div class="IEroot"><![endif]-->
<div class="container-inline">
<div class="form-item">
<input type="text" maxlength="255" name="keys" id="edit-keys" size="40" value="" class="form-text" />
</div>
<input type="submit" name="op" id="edit-submit" value="Search" class="form-submit" />
</div>
<!--[if IE]></div><![endif]-->
Here's the CSS I'm trying to address it with: Code:
.IEroot .container-inline .form-item input.form-submit {
width: 73px;
text-indent: -9999px;
}
I'd be grateful for any help. Hello guys, I have beginner CSS experience. I am using a free wordpress theme. I have begun to modify the theme and have run into a problem. I have checked all over the web for resources to resolve this issue to no avail. I have used the CSS Validator and received some errors nothing that affects this. ISSUE: When clicking "Read More" the image appears twice, once as the limited size and once as the full size. I would like only the first image to appear not the full size one too. SITE: havenhart[dot] com Any help would be super. Hey there, webbsdomain.com/Max I am working on a landing page for a client and I am a bit stuck. All XHTML and CSS validates, no issues there.... The design looks and works great in ALL browsers other than IE6. The issue is with the 3 colored divisions, secondLeft, secondMiddle, and secondRight. In IE6 there is a HUGE amount of white space left between the div's with no reason that I can find. I researched the issue online and found similar issues: IE6 3px float bug and IE6 double margin bug Neither of which seem to be the issue, and the fixes they describe do not work. I am completely at a loss on this one, and any guidance anyone can offer would be VERY useful! Thanks in advance, Brian I am really stuck on this, can someone guide me to a tutorial or a working double row menu bar that works for both IE and Firefox. I have made several attempts on Spry and CSS but to no avail and no-one has been able to rectify it. Theres always something not going right on both browsers with the double row drop down menu bars I have attempted. The double row drop down menu bar looks like this: [menu1][menu2][menu3] [menu4][menu5][menu6] ............................[menu6a] ............................[menu6b] I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this? The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever. http://www.area51entertainment.co/index.php?about |
|||||||