Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
[Solved] Wrapper width; help
Topic Started: Oct 23 2009, 08:23 PM (140 Views)
Kitsueki Oct 23 2009, 08:23 PM Post #1
Member Avatar
Member
[ * ]
 Board Link: http://s1.zetaboards.com/Kingdom_of_Etruria/index/

I'm not editing Arianna's theme, but a theme I'm making myself from the original one, its the second theme (I think) With the castle h2


I just basically want to know, how do I change the size/width of the wrapper? I gave a look through the guide and through a few topics here but didn't find my answer (at least not by some skimming)

Help?

Thanks~
Edited by Kitsueki, Oct 23 2009, 09:13 PM.
Offline Profile Goto Top
 
Arianna Oct 24 2009, 09:23 AM Post #2
Member Avatar
Member
[ * * ]
 Find the #wrap. Remove all areas in bold and add in all areas in red.

Code:
 

#wrap {
background:#fff;
border:1px solid #3A5197;
[b]margin:0 2% 30px;[/b]
[b][color=red]margin:auto;[/color][/b]
[b][color=red]width:#PX / #%;[/color][/b]
}


You will also need to do a little editing. After width: you will insert the number in pixels the width you want (i.e: 1800px) OR the percentage width from 100% (I would recommend 80% - 90%). So, it should look either like width:90% or width:1800px. Remember to include the semi colon after every line. :)
Edited by Arianna, Oct 24 2009, 09:24 AM.
Offline Profile Goto Top
 
Kitsueki Oct 24 2009, 11:51 AM Post #3
Member Avatar
Member
[ * ]
 Thanks for replying :D

I think i'm going to go with a percentage, because there will be different screen resolutions and I don't want it to mess up the page for other viewers lol.

I used width: 80%; and it worked fine ^_^

It caused and issue though, my wrapper isn't centered.

Do you know how I would center this?

I'm using

position: relative;
left: 8%;


but it doesnt seem to be perfectly centered.
Offline Profile Goto Top
 
Delirium Oct 24 2009, 01:22 PM Post #4
Member Avatar
Who Watches the Watchmen?
[ * * * * ]
 I would just delete the width and use margin:0 2% and alter the 2%. Leave the border and background and you should be fine.
Offline Profile Goto Top
 
Kitsueki Oct 24 2009, 01:47 PM Post #5
Member Avatar
Member
[ * ]
 Alright, I made that one work.


Also, with my background image i'm trying to get it to scroll but it isn't working.

I used

background-attachment: scroll;

but it didnt seem to work.

I would put this in the very first selector correct?
Offline Profile Goto Top
 
Delirium Oct 24 2009, 02:29 PM Post #6
Member Avatar
Who Watches the Watchmen?
[ * * * * ]
 You could try background-attachment:scroll;
Offline Profile Goto Top
 
Kitsueki Oct 24 2009, 03:16 PM Post #7
Member Avatar
Member
[ * ]
 Still not working =/

on w3schools it says to do exactly that, weird.

Code:
 

html,body {
background-image:url('http://i512.photobucket.com/albums/t329/Juggalo_krith/cloudsbg.png');
color:#848a96;
font-family:"Helvetica", "Arial", "Bitstream Vera Sans", "Verdana", sans-serif;
font-size:93.3%;
margin:0;
padding:0;
background-attachment:scroll;
}


There's my html,body selector.
Offline Profile Goto Top
 
Delirium Oct 24 2009, 05:24 PM Post #8
Member Avatar
Who Watches the Watchmen?
[ * * * * ]
 Are you sure you want scroll and not fixed?
Offline Profile Goto Top
 
Kitsueki Oct 24 2009, 06:48 PM Post #9
Member Avatar
Member
[ * ]
 Well, It gets on my nerves how it looks when it repeats, and I can't seem to make a version of clouds that don't create that tile look =/
Offline Profile Goto Top
 
Delirium Oct 24 2009, 07:44 PM Post #10
Member Avatar
Who Watches the Watchmen?
[ * * * * ]
 You might want to try to find a cloud pattern rather than a set image, then. Fixed is the best you're going to get but it'd have to be a rather large image to fit most resolutions. Scroll will otherwise yield that ugly repeat effect.
Offline Profile Goto Top
 
Kitsueki Oct 24 2009, 07:59 PM Post #11
Member Avatar
Member
[ * ]
 o.O I never thought of a pattern, thanks :D

If I have any more issues i'll post here in a new topic, or should I just stay in this one?
Offline Profile Goto Top
 
Delirium Oct 26 2009, 09:45 PM Post #12
Member Avatar
Who Watches the Watchmen?
[ * * * * ]
 I'd post a new topic, so you can start fresh with a new problem but it's up to you. :)
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Theme & CSS Help · Next Topic »
Locked Topic