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

CSS Fluid Layout Question


  • Please log in to reply

#1
strykerofchaos

strykerofchaos

    Member

  • Member
  • PipPip
  • 56 posts
Im working on this webpage for a game I play, and my html is so rusty that it's sad Im even trying to do this, and someone suggested doing a CSS Fully Fluid layout (meaning no pixel-width specifiers in my CSS he says)

The issue, is I've never really worked with CSS before, so Im looking for some help as to what he means.

Here is what I have (it's not very long)Posted Image



<html>
<head>
<title>Higher Ground: Path of Ascencion</title>
<body style="background-color:black">

<table align="center" cellspacing="15">
<tr>
<td colspan="5">
<img align="center" border="0" src="banner.png" alt="Higher Ground CEP Legends"/>
</td>
</tr>
<!---Links at the top start here>
<!---Link images table starts here>



<tr>
<td>
<a href="http://www.highergro...boards42.com/">
<img align="right" border="0" src="forums.png" usemap="#forums" alt="Higher Ground Forums"/></a>
</td>

<td>
<a href="http://www.hgweb.org/about/">
<img align="top-left" border="0" src="about.png" usemap="#about"alt="About Higher Ground"/></a>
</td>

<td>
<a href="http://www.hgweb.org/">
<img align="top-left" border="0" src="home.png" usemap="#home" alt="Home Page"/></a>
</td>

<td>
<a href="http://www.hgweb.org/getstarted/" >
<img align="top-left" border="0" src="get started.png" usemap="#getstarted" alt="Get Started Playing!"/></a>
</td>

<td>
<a href="http://wiki.hgweb.or...iki/Main_Page">
<img align="top-left" border="0" src="wiki.png" usemap="wiki" alt="Higher Ground Wiki"/></a>
</td>
</tr>

<tr>
<td>
<img align="center" border="0" src="left.png"/>
</td>

<td colspan="3">

</td>

<td>
<img align="top" border="0" src="right.png"/>
</td>
</tr>
</table>

</body>
</head>
</html>
  • 0

Advertisements


#2
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
Not sure, but guess you are wanting the whole page flexible, but not fixed. Wish you hadn't started with tables as they went out in the late 1990s and HTML 5.0 and CSS 3.0 are now being supported inmost browsers. This means you have missed even coding to HTML 4.01 and CSS 2.1. :)

Some help with table withdrawal symptoms:

Tableless Web Design: http://en.wikipedia....less_web_design
Why tables for layout is stupid: http://www.hotdesign.com/seybold/
How to convert manually your HTML tables to CSS: http://www.table2css...l-tables-to-css
Images, Tables, and Mysterious Gaps: https://developer.mo...Mysterious_Gaps
Why inline CSS and JavaScript code is such a bad thing: http://robertnyman.c...ch-a-bad-thing/

Some help with layout of site:

Choosing Dimensions for Your Web Page Layout:

http://www.elated.co...eb-page-layout/
How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/d...brary/wa-rapid/
In Search of the Holy Grail: http://www.alistapar...cles/holygrail/

Care With Font Size: http://www.w3.org/QA/Tips/font-size

Some good CSS tutorials:

More info:

CSS Tutorials:

http://www.w3schools...Css/default.asp
http://www.csstutorial.net/
http://www.echoecho.com/css.htm
http://www.html.net/tutorials/css/
http://www.w3.org/St...es/011/firstcss

http://htmldog.com/guides/cssbeginner/
http://www.davesite....webstation/css/
http://www.htmlcodet...amsupp_193.html

Now, I don't mind helping you fix or get you started, but don't want to be coding all that CSS from scratch for you. If you'll work on the CSS and run into problems, then post the new page with the CSS and I'll see if I can help you out.

Try making an external CSS file though and link to it if you plan to have more than one page. If, not, the embedded CSS will be just fine for one page.

Why Validate?: http://validator.w3.org/docs/why.html

Edited by AstraNut, 06 July 2010 - 05:35 PM.

  • 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