12 Replies - 1342 Views - Last Post: 05 February 2008 - 02:35 PM

#1 MorphiusFaydal  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 43
  • View blog
  • Posts: 1,376
  • Joined: 12-May 05

How to design my website

Posted 16 January 2008 - 02:50 AM

So I'm trying to redo my website. Right now it looks horrible. I've got a "test" version up.. But it's got some serious issues.

Issues like -
  • When resizing the window, the divs either go over each other, or go off screen
  • The "floating" elements are floating in the wrong place.

As you can probably tell, I'm not very good with PHP or CSS.

I'm trying to make it look like this:

Attached Image

I've attached an archive of my current source - any help/ideas/pointers would be very much appreciated.

TIA, Chris.

Attached File(s)



Is This A Good Question/Topic? 0
  • +

Replies To: How to design my website

#2 Akelo  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 98
  • Joined: 12-December 07

Re: How to design my website

Posted 17 January 2008 - 04:04 PM

More than happy to help. I'm not sure how familiar you are with CSS, but most of the spacing issues I've had personally deal with no dimensions (width, height), position (relative vs. absolute), and just plain blindness.
Here is what I suggest. Good CSS starts with good XHTML. In the html doc, the layout is all important (in my own opinion *waits for the firing squad*).

here is a basic concept for the html:
<html>
<head><title></title>
<style type="text/css" media="screen"]
	 @import "yourcss.css";
</style>
<body>
	 <div id="wrapper">
		  <div id="intro"></div>
		  <div id="main-body">
			   <div id="navigation"></div>
			   <div id="content"></div>
		  </div>
		  <div id="footer"></div>
	 </div>
</body>
</html>



The css is then pretty straight forward for the layout:
*{
	 margin: 0;
	 padding: 0;
} 
#wrapper
{
	 display:block;
	 width:800px;
	 height: 600px;
}
#intro
{
	 display: block;
	 position:relative;
	 float:left;
	 width:800px;
	 height: 100px;
}
#main-body
{
	 display: block;
	 position:relative;
	 float:left;
	 width:800px;
	 height: 450px;
}
#navigation
{
	 display: block;
	 position: relative;
	 float:left;
	 width: 100px;
	 height: 450px;
}
#content
{
	 display: block;
	 position: relative;
	 float: left;
	 width: 700px;
	 height: 450px;
}
#footer
{
	 display: block;
	 position: relative;
	 float: left;
	 width: 800px;
	 height: 50px;
}




This gives a very basic layout, and please...if anyone finds some noobish mistakes, fire away (but also realize I am still relatively new to web design, and am still learning HTML DOM (along with jv script). I think i know css pretty well, and xhtml is a bit easy. Fire away though, please. I also hope this helped you with an idea for a layout. To see how it's all layed out, I usually add a background to each of the elements.

oh, and one more thing, I would add more divs into the content box (because we're using the content div to hold the further divisions you want).
Once you have an idea of how you want to break it up, adding in the content is easy (at least I think so).
Was This Post Helpful? 0
  • +
  • -

#3 MorphiusFaydal  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 43
  • View blog
  • Posts: 1,376
  • Joined: 12-May 05

Re: How to design my website

Posted 17 January 2008 - 04:12 PM

Yeah, about the only things I wanted to "force" a size on were the links box and the header. I'm trying to make it looks the same on a 1280x1024 screen as it does on a (shudder) 640x480.

But thanks, I'll study your code and then probably come crawling back begging you to help me un-screw-up my implementation. :)
Was This Post Helpful? 0
  • +
  • -

#4 ReekenX  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-January 07

Re: How to design my website

Posted 18 January 2008 - 07:53 AM

View PostMorphiusFaydal, on 17 Jan, 2008 - 04:12 PM, said:

Yeah, about the only things I wanted to "force" a size on were the links box and the header. I'm trying to make it looks the same on a 1280x1024 screen as it does on a (shudder) 640x480.


Site will good look at any browsers if you make it 640x480 or highter, but not 1280x1024 resolution :)
Was This Post Helpful? 0
  • +
  • -

#5 Akelo  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 98
  • Joined: 12-December 07

Re: How to design my website

Posted 18 January 2008 - 08:32 AM

It's also possible to use % if you want to create a more fluid design.
Was This Post Helpful? 0
  • +
  • -

#6 MorphiusFaydal  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 43
  • View blog
  • Posts: 1,376
  • Joined: 12-May 05

Re: How to design my website

Posted 18 January 2008 - 08:38 AM

View PostReekenX, on 18 Jan, 2008 - 08:53 AM, said:

View PostMorphiusFaydal, on 17 Jan, 2008 - 04:12 PM, said:

Yeah, about the only things I wanted to "force" a size on were the links box and the header. I'm trying to make it looks the same on a 1280x1024 screen as it does on a (shudder) 640x480.


Site will good look at any browsers if you make it 640x480 or highter, but not 1280x1024 resolution :)


Just browsing his CSS made it appear like it was hard-coded for 800x600 (which is still waaaay to low a resolution, IMO).

View PostAkelo, on 18 Jan, 2008 - 09:32 AM, said:

It's also possible to use % if you want to create a more fluid design.


I think that's what I've been doing, but it's not been working right. >.<
Was This Post Helpful? 0
  • +
  • -

#7 Akelo  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 98
  • Joined: 12-December 07

Re: How to design my website

Posted 23 January 2008 - 03:13 PM

View PostMorphiusFaydal, on 18 Jan, 2008 - 08:38 AM, said:

View PostReekenX, on 18 Jan, 2008 - 08:53 AM, said:

View PostMorphiusFaydal, on 17 Jan, 2008 - 04:12 PM, said:

Yeah, about the only things I wanted to "force" a size on were the links box and the header. I'm trying to make it looks the same on a 1280x1024 screen as it does on a (shudder) 640x480.


Site will good look at any browsers if you make it 640x480 or highter, but not 1280x1024 resolution :)


Just browsing his CSS made it appear like it was hard-coded for 800x600 (which is still waaaay to low a resolution, IMO).

View PostAkelo, on 18 Jan, 2008 - 09:32 AM, said:

It's also possible to use % if you want to create a more fluid design.


I think that's what I've been doing, but it's not been working right. >.<


I've been doing some research, and I think the solution to this is the faux column fluid design. Google it, there are a few sites that go over the concept behind it. I still haven't had a chance to finish reading the entries, but I think this is the best solution.
Was This Post Helpful? 0
  • +
  • -

#8 MorphiusFaydal  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 43
  • View blog
  • Posts: 1,376
  • Joined: 12-May 05

Re: How to design my website

Posted 23 January 2008 - 07:12 PM

Thanks, Akelo. :)
Was This Post Helpful? 0
  • +
  • -

#9 capty99  Icon User is offline

  • i am colt mccoy
  • member icon

Reputation: 98
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Re: How to design my website

Posted 23 January 2008 - 08:01 PM

not exactly understanding what your trying to do with the css, if you explain it a lil more maybe i can help.

but a note: i wouldn't design for less than a 1024x768.

anyone using smaller than that deserves a smaller site. really a site thats fixed width shouldn't be under 800 imo unless for aesthetic reasons.
Was This Post Helpful? 0
  • +
  • -

#10 MorphiusFaydal  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 43
  • View blog
  • Posts: 1,376
  • Joined: 12-May 05

Re: How to design my website

Posted 23 January 2008 - 08:32 PM

View Postcapty99, on 23 Jan, 2008 - 09:01 PM, said:

not exactly understanding what your trying to do with the css, if you explain it a lil more maybe i can help.

but a note: i wouldn't design for less than a 1024x768.

anyone using smaller than that deserves a smaller site. really a site thats fixed width shouldn't be under 800 imo unless for aesthetic reasons.


I was trying to make everything "floating"... I want two columns, that change width depending on how wide the browser window is.
Was This Post Helpful? 0
  • +
  • -

#11 Glasseater  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 15-June 07

Re: How to design my website

Posted 04 February 2008 - 12:18 PM

View PostMorphiusFaydal, on 23 Jan, 2008 - 10:32 PM, said:

I was trying to make everything "floating"... I want two columns, that change width depending on how wide the browser window is.

Use % instead of px, that should (for most browsers I think) make the size relative to the size of the window.

As for things floating where they shouldn't be... try messing with the width values.. sometimes when you do the math, it still doesn't want to work properly (I haven't looked at your code, so this may be totally wrong :P).

Edit: nvm that last part.. I looked at the code you have on your site. Instead of using position:whatever; try using float:left; then mess with the padding, margins etc. to get it to look right.

This post has been edited by Glasseater: 04 February 2008 - 12:21 PM

Was This Post Helpful? 0
  • +
  • -

#12 Cyborg Ninja  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 29-January 08

Re: How to design my website

Posted 05 February 2008 - 02:26 PM

I personally wouldn't design for less than 800x600. It is the default for many, and plenty of people don't even realize they can change it. Dunno if that's your audience, but even still. I had to change that setting on my aunt and uncle's computer just recently. I'm still shaking my head.

But yeah, using % instead of a fixed amount should work fine. I don't see why it isn't working for you. You would also want to make fonts for the site something like "small, x-small, large" instead of "12px, 8px, 5em, etc."
Was This Post Helpful? 0
  • +
  • -

#13 capty99  Icon User is offline

  • i am colt mccoy
  • member icon

Reputation: 98
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Re: How to design my website

Posted 05 February 2008 - 02:35 PM

800x600 is obsolete.

1024x768 is the minimum you should design for.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1