repeat-x not going complete width 1

[tiamat2012]

Hey everone,

I'm looking for a CSS way to get the repeat-x function to go as far as it can.

Right now I'm using a javascript funciton that determines the width of my banner and maincontent (

http://kerryj.atspace.com)

, but because I am determining an absolute width of the two divs, when you resize the window the divs stay the in the same place, cutting off the text of the rest of the site.

Does anyone know how I can change this?

I am quite willing to get rid of the javascript function all together if I can manage to do ith with CSS, or not, either way.

I'm using position:absolute on all my divs, I'm not sure if this is a problem or not. I'm mainly doing it because when I do float:left it doesn't work in IE.

Here's my javascript code

function fixWidth()
{
	var maincontent, header, changeto;
	
	changeto = document.body.offsetWidth - 400; // Set the width of the columns, left column = 200px, right column =  200px
	
	changeto = (changeto*100)/document.body.offsetWidth;
	maincontent = document.getElementById("maincontent"); // Get center column
	header = document.getElementById("header"); // Get top column
	
	maincontent.style.width = changeto + "%"; // Set center column's width
  header.style.width = changeto + "%"; // Set top column's width
}

and my CSS for the divs

div#logo
{
		position: absolute;
		width: 200px;
		height: 200px;
		background: #FFFFFF url(images/leftcorner2.jpg) repeat-x scroll top left;
		z-index: 1;
}

div#header
{
 		position: absolute;
		left: 200px;
		height: 200px;
		text-align: center;
		background: #FFFFFF url(images/SLtopbanner2.jpg) repeat-x scroll top left;
}
	
div#lmenu 
{
    	position:absolute;
		top: 200px;
		width:200px;
		background: #FFFFFF url(images/Slbanner.jpg) repeat-y fixed top left;
}

div#maincontent 
{
 		position: absolute;
		top:200px;
		left: 200px;
		background: transparent fixed;
}

div#rbanner
{
 		position:absolute;
		top: 200px;
		right: 0px;
		width: 200px;
		background: #FFFFFF url(images/SLrbanner.jpg) repeat-y fixed top right;
}

div#rcenter
{
		position:absolute;
		width: 200px;
		right: 0px;
		height: 200px;
		background: #FFFFFF url(images/rightcorner2.jpg) repeat-x scroll top right;
}

Thanks!
Kerry

 

[Vragabond]

Absolute positioning is not really the best way to go. Absolutely positioned elements are taken out of the document flow and do not interact with other elements. They are simply stacked over or under the others, not pushing them away to make room for more content. I would not use absolute positioning unless there was no other way to do it. Why does floating not work for you in IE? I have never had any problems with floating in any of the modern browsers.

 

[tiamat2012]

Wow, now its not working in either browser. I will upload it temporarily so that you can see.

One bug that I just found was that nany of my background images for divs had been fixed, I set them to scroll.

Anyways, take a look at

http://kerryj.atspace.com

in both Firefox and IE, they each have differnet problems.

If you want to see my javascript file its at

http://kerryj.atspace.com/columnheight.js

and my css file is

http://kerryj.atspace.com/my.css

Any idea whats bugged?

Thanks,
Kerry

 

[nwright77]

hi there,

when i create my web pages i start off with a container that has a relative position, you can give it a width or not if you want the page to spread across the screen. every other div layer is placed within this main layer. the only time i ever use an absolute position is if i want to place a breadcrumb trail or something similar at the top of the page.

have you heard of CSS zengarden? they design purely with css, have a look

http://www.csszengarden.com

I have learnt a lot from them

 

[tiamat2012]

Thanks nwright, I'll add a container

what's a breadcrum trail?

I'll also checkout the link, looks awesome

in the mean time... do you or does anyone know why my float:left isn't work?

-Kerry

 

[nwright77]

hi,

a breadcrumb trail is simply a small set of links that in some cases tell you were you are (you are here home > about > person) or, if you have a long piece of information and the user is at the bottom of the page, the breadcrumb allows them to go elsewhere without having to scroll all the way back to the top.

as to your float:left, there should be no problem with it; if you have it contained within another layer and you have text or an image, the the div with the float:left should be above that in your code. if you are still having problems, let me know and i will have alook at it for you

 

[tiamat2012]

Ok cool.

I'm still have problem with the whole float deal, that might be because of my weird setup, tell me what you think.

I have 6 divs:

box
logo
header
rcenter
lmenu
maincontent
rbanner

box is my container (I have something else name container, so I gave it the ID of box)

logo is a div that needs to be in the upper left hand corner that has a picture of 200x200

header header is div of height 200 that needs to stretch from logo to rcenter

rcenter is another 200x200 pic (for the other corner) and needs to be in the top right corner.

lmenu is another pic that needs to extend all the way down the page (which I can do with javascript and currently am), it has the width of 200x and should align vertically with logo and horizontally with maincontent

maincontent needs to be the same width as header, and its height is as much content as is in it. It should stretch from lmenu to rbanner

rbanner is another pic, but for the right side, width 200x which should align vertically with rcenter and horizontally with maincontent

here's a link to what it should look like:

http://img221.imageshack.us/img221/558/websitescreenshot2zl.jpg

thank you for your time,
Kerry

 

[nwright77]

now try this,

i haven't go all your files but you'll get the idea. i have a small screen and it looks fine on my ie and firefox but have a look anyway

http://www.purplewebsolutions.co.uk/

nwright

 

[nwright77]

I have only changed the top part of your css. i noticed you had a lot of scrolls and background colours where it wasn't necessary, i didn't use any float properties for the main structure. here is the modified css:

body {
margin: 0;
padding: 0;
background: #fff url(images/Slbanner.jpg) repeat-y top left;
text-align: left
}

#box {
background: url(images/SLtopbanner2.jpg) repeat-x top right;
margin: 0;
position: relative;
}

#header {
text-align: center;
padding: 10px;
background: url(images/leftcorner2.jpg) no-repeat top left;
height: 180px
}

#rcenter {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
height: 200px;
right: 0px;
background: url(images/rightcorner2.jpg) no-repeat top right;
}

#lmenu {
width: 150px;
}

#maincontent {
background: url(images/SLrbanner.jpg) repeat-y top right
}

 

[tiamat2012]

Awesome! That looked really good! Only thing I noticed was that the right column wasn't all the way to the ground, but once I get some content there it will do.

I have one question, seeing as how my left menu is now inside the maincontent, how would I put something in the middle? Would I simply create another div and float it and specify a width?

would I also have to float another one right on top of that so that it would keep the other one in main content (with another width of 150?

Thank you very much, this has been a great learning experience.

-Kerry

 

[nwright77]

no i woudn't do that,

if you specify the middle content as a float, it will not push the maincontent div down, this is actually being pushed down by the menul

if you look at the source code on the page, i have the maincontent followed by the title, then followed by the menul:

<div id="maincontent">
<h1 class="title">Home</h1>
<div id="lmenu">
<table>

----------

I have just added some content to the page. view the source code to see what i have done. i have made another div called 'contenttext'. i have given it a right and left margin of 190px (about the size of the borders on each side.

when you resize the page, the contenttext, menul and menur moves without moving out of place. the menul has been floated to the left (i have placed it under the 'h1' title) and the menur has been given an absolute positioning to the right. i have not specified a width to the contenttext as the margins will restrict the content to sit within the two side borders.

i have placed some boreders on the two right divs to show you how they work

nwright77

 

[tiamat2012]

Awesome! Once again it all worked.

Sorry but got one more question.

I know the right column moves with the main content - is there anyway to get it to go all the way down the right side despite the size of the content? I tried creating a second box that had it, didn't work.

I also tried creating a separate div outside the box that did it, didn't work.

Sorry I'm not fully understanding the CSS enough to get it, after I get it working I'm going to organize it and scan it thoroughly so I fully get it.

Also, I noticed you're using XHTML (atleast that's what it looks like from your doc declaration), and I'm not. My website isn't working in IE, but yours is, but our code is almost identical (I literally copied and pasted certain parts, then did a bit of editting)

Right now I haven't uploaded my files, so they aren't on my site, I'm using a personal server. I'm waiting to get it all correct before I upload.

Thank you very much,
Kerry

 

[nwright77]

there are 4 types of html; html 4.0 transitional, html 4.0 strict, xhtml 1.0 transitional and xhtml 1.0 strict. there are others but for different purposes. they are more to do with validation than anything else so don't worry about that.

as far as i know, the only way to make the maincontent div, which contains the right border, go all the way down the right side is by specifying a height, or even a padding-bottom (i find that 100% or even inherit does not work) to the maincontent div. the downside to the height attribute is that you will have white space and your page will scroll as if it goes on forever! if you want to create a seamless border, you can always create two more divs for left and right corner, setting them both at absolute, useful when you use the height attribute for the maincontent div.

there would be no point combining it with the left column (involving putting the both into an image file) because it will not move with the size of the screen resolution.

as to the page not working in ie, what i suggest is start a brand new page and study each element i have placed in the code (i started this way, very informative). i tend to have problems with ie and when i start a new page it tends to work the second time round (don't ask me why though, you said it yourself; its practically the same code!)

with regards to understanding css, download the sample html ans css file you find in csszengarden, pay attention to their structure and you will gradually become more confident in using css. i have used css for over 2 years now and it is brilliant

nwright77

 

[tiamat2012]

Ok cool, so I think I'm going to go with the idea of having two more divs in the corner with an absolute position so I can use height. (I don't have Adobe at this computer so I'll do it over the weekend). In the meantime, I was trying to get the height right, and I found I couldn't use %s, they totally wouldn't registar. Simply putting a 0% would make it level out to the left column in IE, but not in Firefox, and no increase in it would change it at all.

When I put 800px as a test it worked in both, but there is a huge scroll bar and even if I did find the exact resolution it wouldn't work unless everyone used the same resolution.

Do you have any idea why the height % attribute wouldn't be working? Do I need to specify the body and box's height to be 100% before hand?

-Kerry

P.S. Thank you very much for all the help!

 

[Vragabond]

CSS standards state that when parent container does not have its height specifically set, percentage height will always revert to auto, meaning "just enough to fill the content". Geckos do follow that standard while IE does not.

So, if you want Geckos (and just about any other standards-compliant browser) to behave in a similar fashion, you need to specifically set height of the parent containers. Bare in mind that giving a parent container height of 100% will just cascade the problem unless it is the canvas, or the first element in the DOM. This I believe is <html> in the modern browsers.

I hope that makes sense.