some questions...

brent · 2006-05-28 12:58:57

Okay, I’m a fairly new person here, but I have been reading up on TextPattern and stuff. Anyways, I’m trying to get my blog designed and I am running into a problem. I have basically some horizontal bars that I want running across the whole screen without a horizontal scroll bar. I have done this with some div’s that are absolutely positioned and using the z-index property. Now I can get them to go across the page, but when I make the browser window small enough that the horizontal scroll bar appears, the horizontal bars shrink to the size of the browser window, but the stuff that’s “scrolled” doesn’t have the div’s stretch that far. Any help will be greatly appreciated.

Brent

Here’s what it looks like:

NyteOwl · 2006-05-28 18:52:43

It looks like both the bar and the content block are contained within another container of set width. This outer container will limit the size the internal DIVs can stretch to. If you want them to not be limited by this container you’ll need to be careful with the z-indexes and/or place the DIVs outside it.

DIVs will expanad and contract with the browser window unles you set an explicit width for them. If you have a set width for a non-shrinking section of content, you can ensure that the DIV is at least that wide by setting min-width: ### in your style sheet (and similarly max-width. Note that some versions of IE do not recognize min-width or max-width. For these cases (if so inclined) you’ll need to use one of several IE css hacks or the IE conditional statements to manage the width.

Hard to tell exactly what is happening without a site or code to look at as there are lots of interactions that could create similar effects.

brent · 2006-05-29 01:55:15

Okay, I actually had them only in the body section of the template and the stuff that is scrolling is the default content that’s set to a width of 760px which I think that’s what is causing the problem. Thanks for the min-width, I think that will be helpful when I edit where articles go. Actually, it happens with the default admin panel. If you size the browser window small enough that there is a horizontal scroll bar then you will see the effect at the top of the page. Anyways, I think it’s just a small problem. The url of the site is <a href=“http://college.jacoc.org/site”>here</a>.

I know it’s pretty ugly right now, but soon it shall look nicely. The top bars are what is giving me the trouble.

jm · 2006-05-29 19:34:13

Although I haven’t spent any time on it, I’d imagine your problem is position:absolute. Why don’t you use this:

<code>

HTML:
<div id=“top” ></div>
<div id=“big-stripe”></div>

(probably should choose better, more semantic names)

CSS:
#top,#big-strip {
width: 100%;
padding: 0;
display: block;
}

#top {
margin: 10px 0 60px; /*top sides bottom */
background-color: green;
}

#big-stripe {
margin: 0 0 50px;
background: red;
}
</code>

That should, hopefully, work. I haven’t tested it though.

Last edited by deldindesign (2006-05-29 19:36:09)

brent · 2006-05-29 21:38:42

okay, i will try that, but what does the display: block do? Also, there’s more to the design than just the bars. There’s stuff on top of those and things that overlap those bars. In the next couple of days I’m going to be putting the rest of the header together and you will see what I’m trying to accomplish… I’ll post when I’m done. I will do it with both methods just to see if it works.

Textpattern CMS

Textpattern CMS support forum

#1 2006-05-28 12:58:57

some questions...

#2 2006-05-28 18:52:43

Re: some questions...

#3 2006-05-29 01:55:15

Re: some questions...

#4 2006-05-29 19:34:13

Re: some questions...

#5 2006-05-29 21:38:42

Re: some questions...

Board footer