FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Best Method for layout





eday2010
I am currently redesigning my site. I did it all in photoshop, sliced it up, and now need to code it. What is the best way to do this. Previously I have used tables, but CSS seems to be the better way of doing this.

The layout is basically three columns, with the center column being cut up some more. See the following image:




I have tried using CSS to do this, and it works until I try adding more <div> tags to the center column. Mind you, I have never used <div> tags or CSS to payout a page. If anyone can help or point me to somehwere that will explain exactly what I need to know, that would be all that and a bag of chips Very Happy

UPDATE:

While having some idle time at work, I started playing around with laying out the page with <div> tags. I ALMOST have it. Here it is:

http://www.wnstudios.ca/layout/index.html

There are two spaces that should not be there, at least on my browser at work there are (I.E. 6 for Win 2000).

The spaces are there because the <div> tag is not closed before starting a new <div> tag between images. It has to be that way in order for the layout to almost look the way it should. Below is the source code. Can anyone fix this problem?

Code:
<style type="text/css">
  #container {
    background:#FFF3AC;
    width:379px;
   position:fixed;}
div {margin: 0 0 0 0;
     padding: 0 0 0 0;
}
</style>
</head>

<body>
<div id="container" align="center" style="size:inherit">
 
  <div style="float:left"><img src="01.gif" alt="1" /></div>
  <div style="float:left"><img src="02.gif" alt="1" />
    <div style="float:left"><img src="04.gif" alt="1" />
      <div style="float:left"><img src="05.gif" alt="1" /></div>
     <div style="float:left"><img src="06.gif" alt="1" /></div>
     <div style="float:left"><img src="07.gif" alt="1" /></div>
     <div style="float:left"><img src="08.gif" alt="1" /></div>
     <div style="float:left"><img src="09.gif" alt="1" />
     </div>
    </div>
  </div>
  <div style="float:left"><img src="03.gif" alt="1" /></div>

</div>
</body>
eruct
First of all, why do you have so many different sections in the 'body' part of your page? In my opinion you could simplify that.
As far as getting started, you may want to check out This Site which has a bunch of various pre-made css layouts free for the downloading.
Basically you would use some type of three column layout and then within each div add various formatting to make it look like your desired result.
eday2010
I DID IT!!!

Shawg! I AM a genius! All it needed was a <br /> at the end of the 2 <div> tags that weren't closed, like this:

Code:
<div id="container" align="center" style="size:inherit">
 
  <div style="float:left"><img src="01.gif" alt="1" /></div>
  <div style="float:left"><img src="02.gif" alt="1" /><br />
    <div style="float:left"><img src="04.gif" alt="1" /><br />
      <div style="float:left"><img src="05.gif" alt="1" /></div>
     <div style="float:left"><img src="06.gif" alt="1" /></div>
     <div style="float:left"><img src="07.gif" alt="1" /></div>
     <div style="float:left"><img src="08.gif" alt="1" /></div>
     <div style="float:left"><img src="09.gif" alt="1" />
     </div>
    </div>
  </div>
  <div style="float:left"><img src="03.gif" alt="1" /></div>
</div>


Now it lays out properly: http://www.wnstudios.ca/layout/index.html

Lock this one up, Boys! Shawg! Now if only someone could solve my SMTP problem!
photographerguy
I am not a fan of slicing up whole pages, it isn't neccessary to have all the images in your page, it loads slower.

You can do the same thing with CSS background properties and div tags.
Your code will be simplified, and easier to change later on.
eday2010
How do I get my divs to get the exact size i need them to be if i use css to have the images as backgrounds. i had thought of that already, but wasnt sure on the sizing except to make each div a fixed size. keep in mind i have never used CSS for more than text styles. this is all new territory for me.

besides, whether they are forefront images or backgrounds, the files are the same size regardless.
Donutey
eday2010 wrote:
How do I get my divs to get the exact size i need them to be if i use css to have the images as backgrounds. i had thought of that already, but wasnt sure on the sizing except to make each div a fixed size. keep in mind i have never used CSS for more than text styles. this is all new territory for me.

besides, whether they are forefront images or backgrounds, the files are the same size regardless.


You can either use images on the page itself, or use the background-image: url('image.jpg'); property. You can either make the divs a fixed size, and min-width: XXpx; or use a repeating background, background-repeat: repeat;
I always prefer to keep things fluid (based on percentages) , so I use backgrounds that either repeat well, or are solid colors.
eday2010
I'll give that a try. I'll set them as backgrounds with the divsas fixed sizes. i am not sure what difference this will make since the graphics file size will still be the same and will still need to load.

each graphic in a div is a specific size and is not repetitive, as it's part of the entire design of the site. so they can't repeat.
timerecords
I got same "problem" and I hope that I've posted my post in the right section. I also used photoshop, sliced everything and table to create a website but a friend told me that tables aren't good and that CSS would be better. Like eday2010 I am/was also new with CSS but I've spented some time and this is my result: http://home.deds.nl/~timerecords/Home.html.

So my question is... Is my website now oke with CSS or do I still got some bad thing that I need to fix and my friend also told me that iframes aren't good aswell but how can I make something like Iframes in CSS (I can't ask my friend cauze he is on vacantion now)

Greetz,
Time Records
eday2010
I haven't tried to do the div thing with background images, as I want to see how they work with a php include command inside of themselves instead of an img tag. But first I have to get a local web server working first.

Time, I will take a look at your site in the next couple days to see what you did. your friend is right about Frames. Frames are bad. Tables were not meant to be used for layout, but can be, though CSS is supposed to be optimal: less code, all that stuff. So far it's been tricky, but I got the layout how I wanted. Once I get my local web server running so I can see php that is on my own computer and not a web server, I will report back.
timerecords
eday2010 wrote:

Time, I will take a look at your site in the next couple days to see what you did. your friend is right about Frames. Frames are bad. Tables were not meant to be used for layout, but can be, though CSS is supposed to be optimal: less code, all that stuff. So far it's been tricky, but I got the layout how I wanted. Once I get my local web server running so I can see php that is on my own computer and not a web server, I will report back.


Thanks man
eday2010
So I got my layout working and set up how I want. It also works with PHP includes. However, I have run into a problem with them. In the middle column, which is further divided up horizonally and such (see example above), when I use php includes, I get a white space between each div. Without the php includes it works perfectly.

I tried using CSS ro reduce the top and bottom margins, but it doesnt seem to work. Any suggestions?

EDIT:

Nevermind. Ilike I've said many times, I am a genius. What I needed to do was add a style to the img tag in the php files that are included. So, fo instance, the second image in the middle column looks like this:

Code:
<img style="margin-top:-4px; margin-bottom:-4px;" src="layout/random/01.jpg" alt="Header" />


I basically played around with each included php that was giving me problems, and added the appropriate margin style to the img tags. I also had to add margin-bottom: -15px; to the main div in the main style sheet (the one div that contains all the other ones so that i can position the page wherever i want.).

It sounds confusing, and it is. If anyone needs help or clarification, send me a message and I will show you what I did.

One problem solved, many more to go! Laughing
Related topics
USB Problem
xp speed problems
How to install two OSs on one computer?
Se|x offenders allowed to work in schools - UK?
Abortion: Yes or No?
Site Map
Projects VS Exams
Is Inner Space anywhere in our near future?
CSS ROUND CORNERS
A debate of religion, science, and more
Hello. I'm a generic Frihost Bot.
Language learning ??
Best method of rollover images?
Best seo methad !!!!!!
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.