Best way to implement a 3-column website using
tags? [closed]

前端未结

关注

 9  1185

渐次进展

相关标签:

9条回答

难免孤独

2021-02-05 07:25

This code work on my computer with IE 8, Chrome, Firefox.

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);">
        <a href="http://abv.bg"> Column1 </a> </div>
        <div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);">
        <font color="#FFFFFF">Column 2 </font> </div>
        <div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);">
        <a href="http://abv.bg"> Column 3 </a> </div>
    </body>
</html>

0 讨论(0)

有刺的猬

2021-02-05 07:27

Try floating the div's to the left, that will keep them all on the same line - assuming there is enough spacing.

0 讨论(0)
发布评论:

提交评论
- 加载中...
爱一瞬间的悲伤

2021-02-05 07:30

If you haven't already checked out A List Apart you should, as it contains some excellent tutorials and guidelines for website design.

This article in particular should help you out.

0 讨论(0)
发布评论:

提交评论
- 加载中...
挽巷

2021-02-05 07:30

I like 960 Grid System. It's a lightweight, easy to use css which devides the screen into 12 (or 16) columns. You can use it for a 3 column design and align the rest of your content accordingly.

0 讨论(0)
发布评论:

提交评论
- 加载中...
鱼传尺愫

2021-02-05 07:39

There are a number of examples and libraries out there you can search on - a couple already listed (A List Apart is a must read).

I've used the Yahoo User Interface Library (YUI) on my last couple of sites and really like it. Yahoo completely supports it and it's quick to understand and use. Here is there CSS for Grids, which allows you to format your page into as many columns and sections as you want.

YUI is nice because you don't have to reinvent the wheel for the foundation of your site, and they do all the work of making sure their foundations work across all browsers. And best of all, it's free.

0 讨论(0)
发布评论:

提交评论
- 加载中...

礼貌的吻别

2021-02-05 07:43

By far the easiest way that I have found to do 3 columns (or any other number of columns split over the available space in weird ways) is YUI Grids. There is a YUI Grids Builder to give you the basic layout. The following will give you a 750px wide basic 3 column layout (split 1/3 1/3 1/3) with a 160px left sidebar. Changing it to to other widths, sidebar configs and column splits is really easy.

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2    "http://www.w3.org/TR/html4/strict.dtd"> 
3   <html> 
4   <head> 
5      <title>YUI Base Page</title> 
6      <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7   </head> 
8   <body> 
9   <div id="doc" class="yui-t1"> 
10     <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11     <div id="bd"> 
12      <div id="yui-main"> 
13      <div class="yui-b">    <div class="yui-gb"> 
14          <div class="yui-u first"> 
15      <!-- YOUR DATA GOES HERE --> 
16              </div> 
17          <div class="yui-u"> 
18      <!-- YOUR DATA GOES HERE --> 
19              </div> 
20          <div class="yui-u"> 
21      <!-- YOUR DATA GOES HERE --> 
22              </div> 
23      </div> 
24  </div> 
25      </div> 
26      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
27       
28      </div> 
29     <div id="ft">Footer is here.</div> 
30  </div> 
31  </body> 
32  </html>

0 讨论(0)

1 2 下一页

热议问题

Best way to implement a 3-column website using tags? [closed]

Best way to implement a 3-column website using
tags? [closed]