css gurus your help is needed

884 Posts

sinbad Reply #1, 18 years, 6 months ago

I know it’s simple css but I’m breaking my head with it few hours with no way out so far; if anyone knows how can I do it with css I’ll appreciate it.

332 Posts

chinesedream Reply #2, 18 years, 6 months ago

If you can show us the full design mockup, maybe a better suggestion can be given. Nonetheless, from what I see, I will do it in two possible ways.

1)

#hdr_left {float: left; background: url(image1.gif) repeat-x; width: 50% /*support the 1px towards left side occupies 50% */}
#hdr_right {float: left; background: url(image2.gif) repeat-x; width: 50% /*support the 1px towards left side occupies 50% */}

2) supposed the 1px towards left is solid background and that it’s a fluid layout, then I may do something like this:

body { background: url(image1.gif) repeat-x;}

then I add a ’layer’ on top of it, something like this

#container {background: url(image2.gif) repeat-x top right;}

884 Posts

sinbad Reply #3, 18 years, 6 months ago

thanks chinesedream for the help.
your solution helped me with the left side repeated image but not with the right one.
I tried changing the folat to right but that didn’t seem to help either.

Pretty much what I want to do is to have 3 columns, center column with fixed width of 645px and 2 fluid columns, one on each side of main div.
doesn’t sound too complicated but when I try to use 2 images for the header background things just don’t work.

here is my page layout

<body>
<div id="theWholeThing">
             <div id="header">
                 <div id="header-left-rpt">
                 </div>
                 <div id="header-main">
                 </div>
                 <div id="header-right-rpt">
                 </div>
             </div>
            
             <div id="toolbar">
                 <div id="toolbar-left-rpt"></div>
                 <div id="tollbar-main-chunk"></div>
                 <div id="toolbar-right-rpt"></div>
            </div>
       </div>
</body>

MODX Staff
2,502 Posts

Jay Gilmore Reply #4, 18 years, 6 months ago

Could you send a screen cap of your layout in PNG or JPG.

I can’t figure out for the life of me why you need the header to be in 3 pieces even with the three column content window. This should be achievable with two if done right. Another thing is that using 1px repeats is not better than using 10px wide images in fact larger images render faster as the page wont render until all the repeats have been drawn in memory and they are called sequentially (I even think every call to the image == a HTTP request).

As was said, please upload your comp/mockup and we can help further.

Cheers,

Jay

Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub

884 Posts

sinbad Reply #5, 18 years, 6 months ago

I want to use 3 pieces because my right side image is brighter than my left side image, so I was thinking left image repeating-x || Header-image (centered on screen) ||right image repeating-x

here is a screenshot:

964 Posts

charliez Reply #6, 18 years, 6 months ago

Send the whole image as background!

Website: www.mercologia.com
MODX Revo Tutorials: www.modxperience.com

MODX Professional Partner

☆ A M B ☆
1,231 Posts

AugmentBLU Reply #7, 18 years, 6 months ago

You can’t repeat the right hand side of that image as the lines are sloping upwards so it will look as if there’s breaks. You need to either have straight lines or use the right side with the lines as one image and repeat a section of the left. That’s how i see it from the image supplied.

Ross Sivills - MD AugmentBLU Edinburgh, Scotland UK
AugmentBLU - MODX Partner

BLUcart - MODX Revolution E-Commerce & Shopping Cart

884 Posts

sinbad Reply #8, 18 years, 6 months ago

thanks for the replies everyone.
@rossco that’s not my point, that I can play on the graphics and get a smooth line.
my problem is with the positioning of the elements.

I was able to get them to align all nicely on FF and Opera like this:

with the following code, but I had to use margin-top:-126px; in my header-right-rpt id (which I don’t think should be there..) and IE doesn’t show me the main image:

#header {
position:relative;
margin-left:auto;
margin-right:auto;
width:100%;
height:126px;}

#header-left-rpt{
float: left; 
background:url(assets/templates/bapcss/images/header_left_rpt.jpg) top left repeat-x; 
width: 50%;
height:126px;} 

#header-main{
display:block;
position:relative;
margin-left:auto;
margin-right:auto;
background:url(assets/templates/bapcss/images/header_main.jpg)no-repeat top;
height:126px;
width:451px;}
 
#header-right-rpt{
float: right; 
background:url(assets/templates/bapcss/images/header_right_rpt.jpg) top right repeat-x; 
width: 50%;
height:126px;
margin-top:-126px;
margin-left:0px;}

CSS can be quite frustrating.

MODX Staff
2,502 Posts

Jay Gilmore Reply #9, 18 years, 6 months ago

Looking at your layout, I’d be inclined to just have the header be 100% wide. Have a your background image be right aligned and make it like 2400px wide so that as your layout expands so does the bg. chances are that your header will never expand beyond this because it would be bigger than any reasonable viewport width. You could even set your max-width to 1920px wide and limit your image size to that as there are few monitors that support higher resolutions.

If I get a few minutes I will post an example of what I mean.

Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub