Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Making this page/site more attractive?


  • Please log in to reply

#1
Dominicc2003

Dominicc2003

    Member

  • Member
  • PipPipPip
  • 120 posts
Hi,
On my site, activesleep.com, I have a games arcade.
The problem is it looks ugly and I was wondering if someone could help me design a new colour scheme, layout, font type etc for this page?
The games arcade is linked to below:

http://www.activesle...mes-arcade.html

PS I would like to keep the iFrame though.
  • 0

Advertisements


#2
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
Tables :whistling: http://www.hotdesign.com/seybold/

I fix the mark up first you could to it something like this.

<div style="margin:0 auto;"> <!-- main wrapper -->

<div> Insomnia - Activesleep.com.......</div>

<div>logo here </div>

<div> menu bar /div>

<div style="float:left;">Side bar</div>

<div style="float:left;">Main content or iframe</div>

<div style="clear:both;">Footer</div>

</div>

You will find that easier to style. I will give you a few tips once we have the tided up. Good luck with it.
  • 0

#3
Dominicc2003

Dominicc2003

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 120 posts

Tables :blink: http://www.hotdesign.com/seybold/

I fix the mark up first you could to it something like this.

<div style="margin:0 auto;"> <!-- main wrapper -->

<div> Insomnia - Activesleep.com.......</div>

<div>logo here </div>

<div> menu bar /div>

<div style="float:left;">Side bar</div>

<div style="float:left;">Main content or iframe</div>

<div style="clear:both;">Footer</div>

</div>

You will find that easier to style. I will give you a few tips once we have the tided up. Good luck with it.



You mean I have to do that for every page on my site?! :whistling:
  • 0

#4
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
It would make things easier in the long run, how big is the site? I highly recommend you do it, but you don't have too.


If you sticking with the tables, the first thing I would do is make them all the same width, so they don't look out of line.
Next I would give the side bar table the same background color as everything else so you don't have that blue box down the bottom.
Then I would remove the border from the logo, and give that table a background image to make the whole think look like one big image, I have attached what I would use.

That would at least tidy things up a bit, then you could add some background images to the menu and sidebar but I leave that till later.

By the way I notice you have
border-right : 1px solid #FFFFFF;
border-left : 1px solid #FFFFFF;
border-top : 1px solid #FFFFFF;
border-bottom : 1px solid #FFFFFF;
in your css file, do you know that could be written as
border: 1px solid #fff;

Attached Thumbnails

  • grad.png

  • 0

#5
Dominicc2003

Dominicc2003

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 120 posts
do you think i should just make the site again on a new template?
What colour schemes/layout do you think would suit it?
  • 0

#6
pyron81

pyron81

    Member

  • Member
  • PipPipPip
  • 298 posts
I think what he is recommending is that you move from using tables to CSS to do layout.

If you have never done layout before or only used templates it can be overwhelming trying to understand how CSS relates to layout. Lucky there are tons of great tutorials to teach you what CSS is and how it can improve your over all web design by decreasing file sizes of your pages and making them more accessible through proper markup.

take a look at:
Css Zen Garden
A List Apart
CSS basics

The easiest way I discribe CSS and xhtml to someone. Is if xhtml is a door, css is the thing that tells you what color the door is, where the handle is located, what type of handle and etc.

good luck!
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP