layout help

css positioning help

Page 1 of 1

7 Replies - 753 Views - Last Post: 06 March 2010 - 11:08 PM

#1 megglz  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 11
  • View blog
  • Posts: 414
  • Joined: 22-August 08

layout help

Posted 06 March 2010 - 09:12 AM

We have the format with the menu on the left and content box on right when we use relative positioning but without that positioning its all out of shape. Is there any way we could have both placed that way without relative positioning? Also if we remove banner, the menu disappears due to positioning.

HTML: http://www.meganos.com/main.html
CSS: http://www.meganos.com/default.css

Is This A Good Question/Topic? 0
  • +

Replies To: layout help

#2 Excavator  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 59
  • Joined: 10-December 06

Re: layout help

Posted 06 March 2010 - 10:31 AM

Hello irishgirl,
Your box model is off - the stuff inside #container is wider than #container. Total width/height of elements cannot be greater than their container. margin/padding/border all count when figuring total widths.
Based on your contents, #container needs to be almost 1100px wide.

Following the method laid out in my demo, simple 2 column layout, I made these changes to your CSS:

body{ 
    margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	color: #dbdada;
	background: #2E2E2E;
}
#container {
	width: 1100px;
	margin: 0 auto;
}
#top_panel {
	clear: both;
	width: 960px;
	padding: 10px 0px;
overflow: auto;
}
#menu_wrapper {
	float: left;
	width: 230px;
	height: 278px;
	overflow: hidden; 
padding: 2px 2px 2px 2px;
}
#center_panel2 {
	height: 346px;
margin: 0 0 0 280px;
	background: #434343;
}




You are also missing a body tag. That could cause a problem or two.
Check out the links about validation in my signature line below, they will both help you a lot!

...

This post has been edited by Excavator: 06 March 2010 - 10:35 AM

Was This Post Helpful? 2
  • +
  • -

#3 megglz  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 11
  • View blog
  • Posts: 414
  • Joined: 22-August 08

Re: layout help

Posted 06 March 2010 - 11:10 AM

Thank you :)
Was This Post Helpful? 0
  • +
  • -

#4 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1377
  • View blog
  • Posts: 3,501
  • Joined: 28-November 09

Re: layout help

Posted 06 March 2010 - 11:13 AM

@Excavator - You are aware that constantly linking to your site is typically frowned upon right?

Regardless he's right as far as total width, margin, and padding counting towards the real width of an element. It'd be a good idea to write down widths on a piece of paper and keep a calculator handy, saves loads of headaches later on.

@OP - Ignore below, it's meant for Excavator.

Please, for the love of all things graphically inclined, change the colors on that site. I'm developing a twitch from seeing it... There are plenty of tutorials on good color choices and that breaks almost every rule imaginable as well as using comic sans which you should know, if you're so web inclined, is typographical suicide 99.9% of the time (unless it's for comics, and that's not a comic)

Please don't link to your site for design tips if you're that far colorblind, and that was the nice version. Dion't tempt me to go to the brutal one because there's far more than enough to have an entire page of critique.

That, and you spelled spellchecker wrong in your sig (splelchecker)
Was This Post Helpful? 0
  • +
  • -

#5 Core  Icon User is offline

  • using System.Linq;
  • member icon

Reputation: 774
  • View blog
  • Posts: 5,097
  • Joined: 08-December 08

Re: layout help

Posted 06 March 2010 - 12:15 PM

Lemur, are you aware of the fact that the sample provided by Excavator is relevant to the topic? As long as it is, it is not an issue at all to link to your own site.

He did not ask you about an opinion on colors. Layout-wise, the provided sample is correct and that is all that matters in this specific situation.
Was This Post Helpful? 0
  • +
  • -

#6 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1377
  • View blog
  • Posts: 3,501
  • Joined: 28-November 09

Re: layout help

Posted 06 March 2010 - 03:08 PM

I'm aware but inflicting eye damage with that type of color scheme doesn't help his point, I had to force myself to actually read it because I kept exiting within 2 seconds. I'm not trying to be rude but the color scheme destroys any value the tutorial might have which is why it needs to be brought up. I wouldn't say a thing if it was the same layout but different matching and flowing colors.
Was This Post Helpful? 0
  • +
  • -

#7 calvinthedestroyer  Icon User is offline

  • D.I.C Lover

Reputation: 167
  • View blog
  • Posts: 1,911
  • Joined: 13-October 07

Re: layout help

Posted 06 March 2010 - 11:01 PM

Thanks Excavator
Your post about irishgirl's CSS helped to lead me in the write direction.

Here's what I'm working on:
a test html page using css

Here's the thread I started in:
faking a stretched background
Was This Post Helpful? 0
  • +
  • -

#8 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1377
  • View blog
  • Posts: 3,501
  • Joined: 28-November 09

Re: layout help

Posted 06 March 2010 - 11:08 PM

@ calvinthedestroyer - Please don't hijack other peoples threads, leave it in your own.

(Side note, I posted relevant information and said the rest was off-topic or aimed elsewhere)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1