PDA

View Full Version : making layout fit....


africano
08-13-2008, 08:46 PM
Im starting to play around with my layout for my new project. It consists of a HEADER, NAVBAR, SIDEBAR1 SIDEBAR2 CONTENT and FOOTER.
Ive started fiddling around but Im concerend with the measurements of it all.

I just did a quick test and tried to fit everything but it doesnt fit properly, there are issues with the main COntent area. For the tests Im just using background images.
The main content area is going to have rounded corners, maybe this is why it doesnt fit┐?

Are rounded corners achieved through CSS??

Please have a look at my html and css:

http://www.elchevirtual.com/Personaltrainer/
http://www.elchevirtual.com/Personaltrainer/mainlayout.css

Ricky55
08-13-2008, 09:04 PM
Rounded corners are achieved through CSS with background images for the corners.

see this to get an idea:
http://www.qwerty-design.co.uk/boxTest.html

africano
08-13-2008, 09:12 PM
Cheers Ricky, Ill have a play and see if I can achieve it for my main content area. Any ideas what wrong with my design, why its not fitting? And what about the HTML and CSS...see any Critical errors?

africano
08-13-2008, 10:41 PM
I kinda understand whats going on with the rounded corners, been playing with the css and managed to get my imgs in. BUT how do I adjust the middle part...the grey background with the text....Its to wide, how can I change the width to fit my imgs....?

Here is a link to a TEST page, as you can see the middle area does not fit....Ive tried changing things around to no avail...

africano
08-13-2008, 11:45 PM
LINK:http://www.elchevirtual.com/roundedcornerkk.html

africano
08-14-2008, 04:53 PM
Any ideas on how to change the middle arease width??

domedia
08-14-2008, 05:11 PM
Looks like you want a left and right margin on that element.. pretty basic CSS :-)

africano
08-14-2008, 05:25 PM
I know its pretty basic but I cant get it to work...:(
Here is the css....
div#sideBar p {
margin: 0;
height: 228px;
width:527px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .85em;
color: #666;
background: #e9e9e9;
border-left: 2px solid #d5d5d5;
border-right: 2px solid #d5d5d5;
padding: 10px 25px 0 25px;

}

domedia
08-14-2008, 05:56 PM
like I said add a left and right margin.... :)

Corrosive
08-14-2008, 07:07 PM
margin: 0;
height: 228px;
width:527px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .85em;
color: #666;
background: #e9e9e9;
border-left: 2px solid #d5d5d5;
border-right: 2px solid #d5d5d5;
padding: 10px 25px 0 25px;

}

As Domedia says Africano...margin:0 needs changing.

africano
08-14-2008, 10:41 PM
Ok thanks, Ill have a play....the original code isnt mine...