Member Avatar for cuddlers89

Hi i saw this site on the net, http://www.freewebs.com/poohishcorner/ and liked the way it was layed out, how do i make the main body of my site go in a box in the centre of the site? At the moment my site looks funny accross different resolutions so i would like to keep it all boxed in.

And how do i change the arrows at the side of the page to a color that i want?

Thanks

  • 4 Contributors
  • 9 Replies
  • 185 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Slade

Dani AI

Generated

Good call, — the answers from , and point in the right direction. For a clean, boxed layout that behaves across resolutions, prefer a CSS “wrapper” instead of table hacks. A wrapper gives a centered box that’s both flexible on small screens and limited on large ones:

<div class="site-wrap">
  <!-- page content -->
</div>
.site-wrap {
  width: 95%;
  max-width: 980px;
  margin: 0 auto;           /* centers the box */
  padding: 0 16px;
  box-sizing: border-box;   /* keeps padding inside width */
}
img { max-width: 100%; height: auto; display: block; }

A few tips to keep the layout reliable: use a percentage width with a sensible max-width so the site “boxes in” on wide monitors but still scales on small screens; add min-width or media queries if very narrow displays break the design; set images and long text blocks to not exceed their container to avoid horizontal scroll.

Regarding scrollbar arrows and colors: modern browsers expose different styling hooks, so scrollbar styling is an enhancement, not universal. Common patterns:

/* WebKit/Chromium/Safari */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 6px; }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #888 #f0f0f0; }

Notes and cautions: older Internet Explorer used proprietary scrollbar properties (now deprecated), and many mobile browsers ignore custom scrollbars. Keep contrast and keyboard focus visible for accessibility; test across Chrome, Firefox, Safari and on mobile. For robust results, prefer styling a scrollable inner container over trying to completely skin the browser chrome.

Quick checklist: center with margin:0 auto, use max-width, make media queries for breakpoints, constrain images (max-width:100%), and test at several resolutions with browser dev tools.

Recommended Answers

All 9 Replies

Member Avatar for i686-linux

There may be a better way to create your site in a box, and center it, but in the past I have used the <center> tag for centering a 1x1 table, and then putting the rest of the content inside of the single table cell. I dunno if this is a hack job or standard practice, maybe that is why I'm not in web design. :)

Member Avatar for Dani 
<table width="720px" align="center">
  <tr><td align="left" valign="top">
 
	   PAGE CONTENT HERE
 
  </td></tr>
</table>
Member Avatar for i686-linux

Good idea Dani. :)

Member Avatar for Dani

And yes, you're right. That is the standard way of doing things. For the most part, tables are used to position content on the screen (have it wrap, have it in columns, etc.) Some people are starting to get into heavily into XHTML and CSS though, in which the same effect could theoretically be obtained with div and span tags. i.e. the following:

<div align="center">
<span style="border:1px solid; width:750px; padding:2px; margin:2px">
 
Centered Text With Border Around It
 
</span>
</div>

Of course, more effects can be added. (background color, font, etc.) all to the span style element, and it renders much quickly than tables in the latest browsers. The class element can also be used to attach a CSS file with the style information, to separate html mark-up from visual design.

Member Avatar for Slade 
<table width="720px" align="center">
<tr><td align="left" valign="top">
 
	 PAGE CONTENT HERE
 
</td></tr>
</table>

This is what you want, except I would probably make the width a percentage like 90%, this way, no matter what resolution the user is running it is, the table will only ever take up 90% of the screen, and will remain in the centre. Like this:

<table width="90%" align="center">
<tr><td align="left" valign="top">
 
	 PAGE CONTENT HERE
 
</td></tr>
</table>
Member Avatar for Slade

the 90% can be replaced with whatever percentage you need to satisfy your requirements, savvy?


Slade

Member Avatar for Slade

As for the scroll bar:


The above are nice simple sites that generate the code of the scroll bar look for you :)

Enjoy :D

Slade

Member Avatar for cuddlers89

Thanks everyone

Member Avatar for Slade

No problem, that's what were here for right? Non-payed technical support. :'(. Blah :P just kidding, it's great, I help with what little knowledge I have and I get heaps out of it! Thanks Dani for setting this site up, it's awesome.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.