CSS - Tiling Seperate Images Horizontally And Vertically.

I have a titlebar for an article for my site and i'm trying to achieve rounded corners with transparency. The problem is that my transparent images (toprightcorner and blobs) are showing the background of the div i've used to tile the background image across the bar (it's variable width). How can I prevent this? i know there is background-position but i need a fixed size that the background won't tile across at either end while the width is variable. Is the only solution to make 3 divs and use 2 as columns to hold the corner images and have the background tile across it or is there an easier way?

Here is the relevant code

Thanks
--James

Code:

<div class="articlebox">
<div class="articletitle"><img class="left" src="blobs.jpg" border="0" /></div>
</div>

css Code:
Original - css Code div.articlebox{ width:100%; /*attach it to the top of the box so we can layer the corner on top of it*/ background:rgb(249,249,249) url('topbg2.png') repeat-x fixed; padding:0px; margin:0px; } div.articletitle{ text-align:left; width:100%; height:21px; background:url('toprightcorner2.png') no-repeat right top; border-bottom:1px solid #888; padding:0px; margin:0px; } div.articletitle img{ float:left; } * html div.articletitle img{ margin-left:-3px; }

  

  


         div.articlebox{


             width:100%;


             /*attach it to the top of the box so we can layer the corner on top of it*/   background:rgb(249,249,249) url('topbg2.png') repeat-x fixed;


             padding:0px;


             margin:0px;


         }


             div.articletitle{


                 text-align:left;


                                                    width:100%;


                 height:21px;


                 background:url('toprightcorner2.png') no-repeat right top;


                 border-bottom:1px solid #888;


                 padding:0px;


                 margin:0px;


             }


                 div.articletitle img{


                     float:left;


                 }


                 * html div.articletitle img{


                     margin-left:-3px;


                 } 

Question title:
A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically

Hello

I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google.

If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome.

I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample)

f.e
line 1 : value_one - ( some_text - value_two (right justified) )
line 2 : value_one - ( some_text - value_two (right justified) )
line 99:....
e.t.c

Column one has a fixed width of 32px.
'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically.

Finally I need the color behind column one be different then the column 2 and 3.

So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily.
But my problem is that when I scroll horizontally that my first column scrolls away to the left.

Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically?

I'm very new to css positioning so this might be an easy question...


What I'm trying to do happens to position properly in IE6 and Firefox like so:

http://whythrowchip.go.dyndns.org/atx1.jpg


But it doesn't come out properly in IE 5.X , it looks like this:

http://whythrowchip.go.dyndns.org/atx2.jpg


It's know it's probably not an IE 5.X quirk, I guess I'm not supplying the right information to tell it to stay where I want it...


So what's the best way with CSS to make a row of images that lines up side by side and won't break to the next line?


Here is my code now as it stands (I put in three dots in a row in a couple places so there wouldn't be quite so much code pasted here):

Code:

from main page:

<div id="wrapper">
<div id="top_banners"><img src="logo.jpg" width="391" height="106" border="0"><img........</div>
<div id="top_menu">img src="menu1.jpg" width="150" height="20" border="0"><img.........</div>
<div id="content">
<p>Some filler text in here</p>
<p>Some filler text in here</p>
</div>
</div>




entire external style sheet:

body{
background-color:#666666;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}

#wrapper{
padding: 0;
margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
background-color: #EAEAEA;
border: 1px solid #000000;
width: 750px;
text-align:left;
}

#top_banners{
margin: 0;
padding: 0px;
height: 106px;
}

#top_menu{
margin: 0px;
padding: 0px;
height: 20px;
}

#content p{
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-left: 20px;
}

any help would be greatly appreciated


ps:the buttons in the second row are rollover gif images done with Dreamweaver, not that that should matter I guess

OK, I have three images: a top, middle, and bottom that need to align vertically. It should look like a typewriter with paper coming out when said and done. You can see what's wrong at csshore(dot)com Here is the css:

#top {
background:url(images/top.gif) no-repeat;
background-position:50%;
width: 617px;
float:none;
margin:0 auto;
height: 55px;
position: relative;
}

#container {
background:url(images/middle.gif) repeat-y;
background-position:center;
width: 601px;
padding:0;
margin:0 auto;
height: 100%;
position: relative;
min-height:600px;
}

#bottom {
background:url(images/bottom.gif) no-repeat;
background-position:50%;
width: 800px;
height:485px;
margin:0 auto;
position: relative;
}

.center {
background-image:url(images/wood014.jpg);
}

And the html:

<div id="top" class="center"></div>
<div id="container" class="center">When in the course of human events, it becomes necessary for a people to through off the reigns of governement and create a new one. </div>
<div id="bottom" class="center"></div>

Ignore the failed attempt to quote the Declaration of Independence. I have tried everything I know (which admittedly is little) and I can't get them to align.

Thanks in advance.

Not strictly css but css may be the solution :-)

I have created a sample page where you can see the problem:

http://www.virtual-league.com/demo/

I want the images to sit flush above one another.
If I take the text out of any of the lines then the images on those lines will join up nicely.

Any ideas?

I have a div with blue background on the page below. It is is currently displaying horitzontally across the screen, with the images inside doing the same.

I would like to vertically align it along the right side of the page, next to the text (which would be on the left). I'd also like the 'Property Search' within the blue, aligned below the photo of the house.

Can anyone help me out?

I'd like to KNOW how to do it and not have someone just send me an updated style sheet. Thanks.

Styles attached.

http://mulqueenconsulting.com/galese/

Hey people. I've been desperatly searching for a fix for the bug in my CSS, but I don't know what I'm doing wrong.

Here is a link to the the testfile: http://users.skynet.be/bert_fonteyn...iek/index.html. The page validates as valid XHTML.

Now here is the bug in Windows (I have not tested it in Mac yet), both in Netscape 7 as in IE 6. Shrink your window, so you have a horizontal scrollbar. Scroll to the right, and you will notice there is a white area which can 't show the backgroundtile for some 60 px wide. The content (which is white) is there however...

Can someone please tell me what I'm doing wrong?

Greetz, Bert

Hi there. I seem to be having an issue with my backgrounds that I've set to tile in my CSS not tiling (I've tried setting the width by percents, but that skews the entire design). I'm also not seeing the "container" background show up for some reason. Hopefully someone can assist me with this, I'd be forever grateful. You can see the page he

http://sttwilightfrontier.co.uk/theme.php

Theme.php Code:
Code:

<html>

<head>
<link rel="stylesheet" type="text/css" href="styles/theme.css">
<title>Theme Test</title>


</head>

<div id="container">

    <div id="hleftcorner"></div>
    
    <div id="headertop"></div>
    
    <div id="hrightcorner"></div>
    
    <div id="missionName"></div>
    
    <div id="missionDesc"></div>
    
    <div id="headercb"></div>
    
    <div id="contenttlc"></div>
    
    <div id="contenttop"></div>
    
    <div id="contenttrc"></div>
    
    <div id="sidebartop"></div>
    
    <div id="contentleft"></div>
    
    <div id="contentright"></div>
    
    <div id="sidebar"></div>
    
        <div id="content">
            <div id="emblem"></div>
        </div>
        
    <div id="contentblc"></div>
    
    <div id="contentbottom"></div>
    
    <div id="contentbrc"></div>
    
    <div id="sidebarbottom"> </div>
    
    <div id="contentareabottom"></div>
    
</div>

</body>
</html>

theme.css Code

Code:

@charset "UTF-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
}

#container {
	width: 100%;
	margin: 0 auto;
	border: 1px solid #000000;
	text-align: left;
	background: url(../images/theme/stars.png) repeat;
} 

#hleftcorner {
	background: url(../images/theme/h_leftcorner.png);
	position:absolute;
	left:0px;
	top:0px;
	width:245px;
	height:180px;
	z-index:1;
	visibility:visible;
}

#headertop {
	background: url(../images/theme/header_top.png) repeat-x;
	position:absolute;
	left:245px;
	top:0px;
	width:510px;
	height:10px;
	z-index:2;
	visibility:visible;
}

#hrightcorner {
	background: url(../images/theme/h_rightcorner.png);
	position:absolute;
	left:755px;
	top:0px;
	width:245px;
	height:180px;
	z-index:3;
	visibility:visible;
}

#missionName {
	background: url(../images/theme/missionName.png) repeat-x;
	position:absolute;
	left:245px;
	top:10px;
	width:510px;
	height:58px;
	z-index:4;
	visibility:visible;
}

#missionDesc {
	background: url(../images/theme/missionDesc.png) repeat-x;
	position:absolute;
	left:245px;
	top:68px;
	width:510px;
	height:73px;
	z-index:5;
	visibility:visible;
}

#headercb {
	background: url(../images/theme/header_cb.png) repeat-x;
	position:absolute;
	left:245px;
	top:141px;
	width:510px;
	height:39px;
	z-index:6;
	visibility:visible;
}

#contenttlc {
	background: url(../images/theme/content_tlc.png);
	position:absolute;
	left:0px;
	top:180px;
	width:45px;
	height:45px;
	z-index:7;
	visibility:visible;
}

#contenttop {
	background: url(../images/theme/content_top.png) repeat-x;
	position:absolute;
	left:45px;
	top:180px;
	width:702px;
	height:45px;
	z-index:8;
	visibility:visible;
}

#contenttrc {
	background: url(../images/theme/content_trc.png);
	position:absolute;
	left:747px;
	top:180px;
	width:45px;
	height:45px;
	z-index:9;
	visibility:visible;
}

#sidebartop {
	background: url(../images/theme/sidebar_top.png);
	position:absolute;
	left:792px;
	top:180px;
	width:208px;
	height:45px;
	z-index:10;
	visibility:visible;
}

#contentleft {
	background: url(../images/theme/content_left.png) repeat-y;
	position:absolute;
	left:0px;
	top:225px;
	width:45px;
	height:521px;
	z-index:11;
	visibility:visible;
}

#content {
	background: url(../images/theme/content.png) repeat;
	position:absolute;
	left:45px;
	top:225px;
	width:702px;
	height:521px;
	z-index:12;
	visibility:visible;
}

#contentright {
	background: url(../images/theme/content_right.png) repeat-y;
	position:absolute;
	left:747px;
	top:225px;
	width:45px;
	height:521px;
	z-index:13;
	visibility:visible;
}

#sidebar {
	background: url(../images/theme/sidebar.png) repeat-y;
	position:absolute;
	left:792px;
	top:225px;
	width:208px;
	height:521px;
	z-index:14;
	visibility:visible;
}

#emblem {
	background: url(../images/theme/SanctuaryEmblem.png);
	position:absolute;
	width:500px;
	height:500px;
	visibility:visible;
	left: 110px;
	top: 10px;
}

#contentblc {
	background: url(../images/theme/content_blc.png);
	position:absolute;
	left:0px;
	top:746px;
	width:45px;
	height:45px;
	z-index:19;
	visibility:visible;
}

#contentbottom {
	background: url(../images/theme/content_bottom.png) repeat-x;
	position:absolute;
	left:45px;
	top:746px;
	width:702px;
	height:45px;
	z-index:20;
	visibility:visible;
}

#contentbrc {
	background: url(../images/theme/content_brc.png);
	position:absolute;
	left:747px;
	top:746px;
	width:45px;
	height:45px;
	z-index:21;
	visibility:visible;
}

#sidebarbottom {
	background: url(../images/theme/sidebar_bottom.png);
	position:absolute;
	left:792px;
	top:746px;
	width:208px;
	height:54px;
	z-index:22;
	visibility:visible;
}

#contentareabottom {
	background: url(../images/theme/ca_bottom.png);
	position:absolute;
	left:0px;
	top:791px;
	width:792px;
	height:9px;
	z-index:23;
	visibility:visible;
}

I'm basically trying to get some of the areas to scale with the browser window, as it is resized. (Content area, sidebar, header, etc.) You can see which ones I tried to do so with the repeat tags in the CSS Code. Thanks a bunch in advance for any help that comes!

I want the background image to be stationary as the page scrolls. I'm assuming the fixed parameter would do it but it's not. I have tried the following:
Code:

body {
	font-family: Helvetica, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 11px;
	background: url(images/background.jpg) fixed;

and this
Code:

body {
	font-family: Helvetica, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 11px;
	background: url(images/background.jpg);
	background-attachment: fixed;
}

And neither worked. I thought well maybe scroll means the text will scroll so I changed them to scroll and still, it is tiling.
What do I need to do to get it to stay fixed so the contents will scroll?
Thanks in advance!

Hi, I have some simple CSS for a div tag, inwhich there should be a tiling background image. Here is the CSS code:
Code:

#mainContent{
z-index:5;
	padding:0;
	margin: 2px; 
       background-image: url(images/common/bodybg.gif);
	background-repeat:repeat-y;
	height:100%;
	}

Then I have my div tag: <div id="mainContent">
which holds 2 other divs, both without backgrounds.
Yet my tiling background doesn't show. Is there anything wrong with my code? I have checked the image path etc, but can't figure it out.

Here is the site: http://www.caillouette.com/SouthernLiving/

thanks

Site: project-jericho.com

An organization recently hired me to give their web site a "face lift". Everything was working fine until I tried to tile a background within the main content div.

If you go to the page in internet explorer, you'll see how it's supposed to look. In firefox, however, the background does not show up. If I set the min-height value to a certain number of pixels in #main, the background stops tiling after that many pixels (in firefox.) min-height: 100%; does not work.

The css (if necessary): (this is the css for everything under /* content */ which I'm fairly sure is where I've isolated the problem to.

Code:

/* content */

#main {
       color: #333;
       margin: auto;
       padding: 0px;
       text-align: left;
       width: 680px;
       background-image: url('img/bgx2.jpg');
       background-repeat: repeat-y;
}


#content{
	width: 440px;
	float: left;
	padding: 10px 10px 20px 10px;
}
* html #content{
	padding-top:20px;
}


#content .post 
{
	margin:0 0 3em 0;
}
#content .cat 
{
	margin:0;
	padding:0;
	color:#999;
}
#content .post-info 
{
	color:#777;
	text-align:right;
	
}
#content .post-info em
{
	font-style:normal;
	float:left;
	margin:0 5px 0 0;	
}
em.user 
{
	padding-left:12px;
	background:url(img/user.png) no-repeat left center;
}
em.date 
{
	padding-left:15px;
	background:url(img/date.gif) no-repeat left center;
}
#main .post-comments 
{
	background:url(img/comments.gif) no-repeat left center;
	padding-left:12px;
}

All I need for this code to do is to tile vertically in both Firefox and Internet Explorer.

I've been wasting hours in this office on this and any help would greatly greatly appreciated. Thank you so much in advance.

-Josh

Hi I'm putting a page together with a vertical tiling background. It's ok in Safari, but the tiling image seems to stop before the bottom of the page.

It should be held by the #container div, but the developer toolbar shows this ending way before the end of the page - even though I have contained content still appearing down to the page edge.

The site is at bringmyshuttle.com

As far as I can see my code makes sense...

Any ideas? Thanks

Im trying to figure out the best way to do this. Im running Wordpress with a CSS themed template, but Im running into a problem. Im posting little examples of menus/layouts that require a different CSS file to display correctly. I tried just adding the new bits to the main CSS file, but there is some overlap of some part and it changes it from whatd it look like on a page of its own. How can I post something into a page but still have its own style?

I've got my normal navigation links styled using the standard a:link, a:hover etc etc.

I want to include an image on one of my pages which links to a download, because the style applies to all 'a hrefs' the properties for my text links are assigned to the image (for instance a border is given).

Is there a way to assign a different class to the image hyperlinks?

Cheers.

Ok what i have been asked to do is set up a webpage with three divisions ( i think), in a column structure. Title at top then seperate divisions? for each of my books which will be getting added.

Now the books should be contained as the book title, author, publisher etc with an image to the right of all this information.

However the author, title and publisher have all different formats, the author should be bold, the title in italics etc etc.

I am finding it difficult to know what tag to use to split up this information. Just now i have created a <div> section labelled book1 for the first book. How do you go about splitting up the txt within this division tag as i will be writing a CSS sheet to manipulate the author, title and publisher with all different formats.

Thanks