In creating a site how do i change the side colors?

Status
Not open for further replies.

aerobics

New Member
Messages
1
Reaction score
0
Points
1
I wanted to know in creating a website, how do I change the side panels to make it so there is colors on the sides and bottom I thought it would be background but that made the whole document red. Please advise.Thanks
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
It is background, but you can have more than one background. You would need to set the background of your centre panel(s) to white (or what have you).
 

ARandomCat

New Member
Messages
4
Reaction score
0
Points
1
I would need to see some of the code to know what exactly are you talking about.

I will suppose you are using divs for your setup, if that's the case, then you would need to setup the three column page like this:
HTML:
<div class="container">
   <div class="column-center">Column center</div>
   <div class="column-left">Column left</div>
   <div class="column-right">Column right</div>
</div>

Code:
.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }

My advise for you would be using an existent grid system, such as gridism (https://github.com/cobyism/gridism) to me it is the simpler out there.
Or more complex solutions such as Bootstrap (http://getbootstrap.com/css/)
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
That's not a safe assumption - there may be divs underlying everything, but a lot of people use WYSIWYG site generators, CMSs, and the like, where the changes they make are settings in a panel rather than CSS as such. Even with plain old HTML and CSS, though, you don't need to go the the trouble of creating a three-column layout, since something like this will do the trick:
Code:
html {font-size: 1em; background-color: red;}
body {max-width: 50rem; margin: 0 auto; background-color: white;}
That constrains the width of the main display area (for readability, let's say) so that if the screen gets wider than a certain value, it stops growing at some point; it keeps the main area horizontally centred with a white background, and adds red to the sides and bottom when there's extra screen space to fill. You can also use box-sizing: border-box and solid left and right borders to ensure that there is always some of the desired background visible no matter what the screen size.
 
Status
Not open for further replies.
Top