Margins, Position & other CSS help

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Get Involved
Locked
Natural-Hazard
Registered User
Posts: 67
Joined: Mon Jan 22, 2007 4:16 pm

Margins, Position & other CSS help

Post by Natural-Hazard »

Hey guys,
Its about that time of year again when I get fired up and decide to help make another site. So what I'm stuck with at the moment is positioning two repeating backgrounds, housed in div's. What I'm after is this;


Image
bigger view

See at both the right and left margins of the page there is a repeating image?

In the middle of all of this layout will be the forums & custom pages etc.

I'm just having trouble positioning the repeating images, I've got the top arch's into position but the part that goes down just wont work.

Image
Bigger View

The CSS I have for those is;

Code: Select all

@charset "UTF-8";
/* CSS Document */

#archl {
	float:left;
	margin-left:0;
	margin-top:-12px;
	position:absolute;
	z-index:100;
}

#archr {
	float:right;
	margin-top:-12px;
	position:inherit;
	z-index:101;
}

#repl{
	background-image:url(/styles/HAS/theme/images/repl.png);
	background-repeat:repeat-y;
	height:100%;
	margin-top:-12px;
	position:absolute;
	z-index:110;
}

#repr{
	background-image:url(/styles/HAS/theme/images/repr.png);
	background-repeat:repeat-y;
	height:100%;
	margin-left:0;
	margin-top:-12px;
	position:inherit;
	z-index:111;
}
And the HTML template so far is;

Code: Select all

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div id="archl">
<img src="/styles/HAS/theme/images/archl.png" />
</div>
<div id="archr">
<img src="/styles/HAS/theme/images/archr.png" />
</div>

<rest of phpbb3 ProSilver overall header>
        
 <div id="repl">
 </div>
 <div id="repr">
 </div>
:)

User avatar
acktacky
Registered User
Posts: 85
Joined: Fri Dec 26, 2003 5:04 am
Location: Rochester, NH
Contact:

Re: Margins, Position & other CSS help

Post by acktacky »

I'm still struggling with CSS a little myself as well, and the height thing only seems to work when it feels like it... But I might have a solution?

In your body class, add height: 100%. That way the two side bars you have know how much space they are allowed to fill in your body class.

I think that should work... Hopefully. XD Theoretically. Haha.
Image

Natural-Hazard
Registered User
Posts: 67
Joined: Mon Jan 22, 2007 4:16 pm

Re: Margins, Position & other CSS help

Post by Natural-Hazard »

Hahaha unfortunately the theory didn't work out well with the practise. :/ lol
If I ever go bald it wont be because of my genetics it will be all down to CSS i swear lol

I made some progress with them by changing the code to;

Code: Select all

<div>
<img src="/styles/HAS/theme/images/archl.png" id="archl" />
<div id="repl">
</div>
</div>

<div>
<img src="/styles/HAS/theme/images/archr.png"  id="archr" />
<div id="repr">
</div>
</div>
and placing that just after the <body> tag, I've still got your solution in place and although it worked perfectly for the first 10 mins I've not been able to get the bloody box to repeat all the way down the page again. :/ it now stops around 50% way down :/ grr csss

Anyway yes this way the left bar is agained perfectly where it should be, but the right bar is no where to be seen :(

User avatar
Brf
Support Team Member
Support Team Member
Posts: 51916
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: Margins, Position & other CSS help

Post by Brf »

I have done something like that with phpBB2, but not phpBB3. You are probably best-off starting with subsilver2 and adding table-code so there is a column on each side of the board with your image.
Take a look at my phpBB2 forum at http://www.castledoom.com/forum/ and see how I did it there.

User avatar
acktacky
Registered User
Posts: 85
Joined: Fri Dec 26, 2003 5:04 am
Location: Rochester, NH
Contact:

Re: Margins, Position & other CSS help

Post by acktacky »

We were right. Theoretically, it should work all the time... BUT... Let's try this.

http://www.tutwow.com/tips/quick-tip-css-100-height/


And by the way, just wanted to mention that I like where your design is going. It's cool. ^_^
Image

Natural-Hazard
Registered User
Posts: 67
Joined: Mon Jan 22, 2007 4:16 pm

Re: Margins, Position & other CSS help

Post by Natural-Hazard »

Ack! Still no luck on the CSS front. I followed that tutorial, and I thought it had worked, until I saw it on a page with posts, then the bar only stretches about half way down the page again. :/ hummm

The other problem im having is I can't get the div holding the repeating background to sit on the right side margin. Oh boy this is turning into a nightmare lol

And thank you :) I have big plans for this site but I first need to get the basic structure working. And thank you for everyones help so far, hopefully we can crack this lil problem wide open :/

I'm determined to make this work lol.

Natural-Hazard
Registered User
Posts: 67
Joined: Mon Jan 22, 2007 4:16 pm

Re: Margins, Position & other CSS help

Post by Natural-Hazard »

Okay just thought I'd update you guys, :D I managed to get it to work. The div holding the repeating background for the columns have now been put into two html files (repl.html & repr.html) then I've just included these in to the layout, and for some bizarre reason it worked, no change to the CSS or anything... *shurgs* go figure lol! :)

Only got the one issu now but thats CSS releated to Safari and nothing to do with phpbb3 templates so I'll probably go off and ask for help somewhere else. :D Thank you acktacky your information actually helped loads :D

User avatar
acktacky
Registered User
Posts: 85
Joined: Fri Dec 26, 2003 5:04 am
Location: Rochester, NH
Contact:

Re: Margins, Position & other CSS help

Post by acktacky »

Oh, good! Sorry I couldn't keep helping you. Been really busy with school work. I was hoping you'd update us with a solution. :)

That's really odd that it worked that way, but hey, whatever works! Glad I was able to help a little. Good luck with everything!
Image

Locked

Return to “[3.0.x] Styles Support & Discussion”