Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
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
  • 465 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