Learn VBA & Macros in 1 Week!

CSS - Tableless Alignment

Full Excel VBA Course - Beginner to Expert

Tableless Alignment	View Content

Does anyone know how to do the following without tables - I need to align some text to the left, some in the center, and some on the right, all on the same line: E.g.

Code:

----------------------------------
LEFT        CENTER        RIGHT
-----------------------------------

I messed around with float, but the text to be aligned to the right always appears on the line below.

Thank you for any help you may provide

Full Excel VBA Course - Beginner to Expert

Vertical Alignment In Tableless Design Cells

Similar Tutorials

View Content

I am already used to tableless design but I have not yet solved the way to vertically center texts the way a cell of a table does by default.

How do you solve this problem?. Obviously I look for a simple CSS style to manage this need.

Thanks!

Css Tableless

Similar Tutorials

View Content

Guys.... I am newbie in CSS tableless design and I wanna build a website w/o tables..... JUST CSS...

Well, I have been working hard on this but I can make it work...

Here is the design that I wanna build...

and here is the code that I have so far...

PLEASE... some CSS GURU answer this puzzle...

Thanks..

[code]
/* CSS Document */

body {
margin: 0;
padding: 0;
font: normal 0.7em/1.4em Tahoma, Verdana, Arial, Georgia, sans-serif;
color: #7c7c7c;
text-align: center;
background-color: transparent;
background-image: url(images/background.jpg);
background-position: center top;
}

#container-main {
margin: 0px auto;
padding: 0;
width: 648px;
border: none;
text-align: left;
background-position: bottom;
}

#container-top {
margin: 0px auto;
padding: 0;
width: 648px;
border: none;
text-align: left;
background-position: bottom;
}
#left {
width: 20px;
background-image: url(images/l-shadow.jpg);
float: left;
height: 543px;
}
#main {
border: none;
background-image: url(images/header.jpg);
float: left;
width: 598px;
height: 67px;
}
#right {
width: 30px;
background-image: url(images/r-shadow.jpg);
height: 543px;
float: right;
}
/*
#container {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-image:url(images/background.jpg);
}
*/
#e-mail-templ-final2-01_ {
position:absolute;
left:0px;
top:0px;
width:81px;
height:600px;
}

#top_ {
position:relative;
top:0px;
width:648px;
height:57px;
background-image: url(images/top.jpg);
}

#background_ {
position:absolute;
left:729px;
top:0px;
width:243px;
height:600px;
}

#e-mail-templ-final2-04_ {
position:absolute;
left:81px;
top:57px;
width:20px;
height:90px;
}

#header_ {
position:relative;
top:57px;
width:598px;
height:67px;
background-image: url(images/header.jpg);
}

#e-mail-templ-final2-06_ {
position:absolute;
left:699px;
top:57px;
width:30px;
height:90px;
}

#red-bar_ {
float: left;
width: 598px;
height: 17px;
background-color: #990000;
border-top-width: medium;
border-right-width: 0px;
border-bottom-width: medium;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}

#l-shadow_ {
position:absolute;
left:81px;
top:57px;
width:20px;
height:542px;
background-image: url(images/l-shadow.jpg);
}

#title-content_ {
left:139px;
top:143px;
width:452px;
height:33px;
background-image: url(images/title-content.jpg);
float: left;
}

#ncaa_ {
height:67px;
background-image: url(images/ncaa.jpg);
float: right;
width: 146px;
}

#r-shadow_ {
position:absolute;
left:699px;
top:56px;
width:30px;
height:544px;
background-image: url(images/r-shadow.jpg);
}

#e-mail-templ-final2-12_ {
position:absolute;
left:81px;
top:154px;
width:20px;
height:446px;
}

#e-mail-templ-final2-13_ {
position:absolute;
left:699px;
top:156px;
width:30px;
height:444px;
}

#content_ {
left:101px;
top:180px;
width:452px;
height:349px;
background-color: #FFFFFF;
float: left;
}

#e-mail-templ-final2-15_ {
position:absolute;
left:553px;
top:214px;
width:146px;
height:1px;
}

#big-pix-golf_ {
left:553px;
top:215px;
width:146px;
height:265px;
background-image: url(images/big-pix-golf.jpg);
float: right;
}

#facilities_ {
left:553px;
top:480px;
width:146px;
height:16px;
float: right;
background-image: url(images/facilities.jpg);
}

#facilities-pix_ {
left:553px;
top:496px;
width:146px;
height:51px;
float: right;
background-image: url(images/facilities-pix.jpg);
}

#e-mail-templ-final2-19_ {
position:absolute;
left:101px;
top:529px;
width:156px;
height:18px;
}

#bottom-shadow_ {
left:101px;
top:529px;
width:452px;
height:18px;
background-image: url(images/bottom_shadow.jpg);
float: left;
}

#e-mail-templ-final2-21_ {
position:absolute;
left:262px;
top:529px;
width:291px;
height:71px;
}

#e-mail-templ-final2-22_ {
position:absolute;
left:101px;
top:547px;
width:19px;
height:53px;
}

#lu-seal-bottom_ {
position:absolute;
left:186px;
top:365px;
width:137px;
height:53px;
}

#bottom-backg_ {
left:101px;
top:547px;
width:598px;
height:53px;
background-image: url(images/bottom-backg.jpg);
float: left;
}

#e-mail-templ-final2-25_ {
position:absolute;
left:553px;
top:547px;
width:47px;
height:53px;
}

#apply-now_ {
position:absolute;
left:434px;
top:390px;
width:86px;
height:53px;
}

#e-mail-templ-final2-27_ {
position:absolute;
left:686px;
top:547px;
width:13px;
height:53px;
}

Tableless Form

Similar Tutorials

View Content

Css: Tableless Layout

Similar Tutorials

View Content

Tableless Login Box With Css Instead?

Similar Tutorials

View Content

I am designing a login box for my web page and have seen how to do it with tables but was wondering if CSS is a better way to do it.

With a tables I set up a table with 4 cols and 3 rows. 1st row had the title spanned across both columns, 2nd row had "username" in first col and textbox in second col, 3rd row had "password" in first col and textbox in second col and the 4th row had the login button in the second column.

With CSS I've made a div to hold the content and inserted a div for the titlebar. Do I now just keep placing divs inside this content div for the rest of the elements?

Is this a good way to approach the login box or should I just put a table inside the original div?

Box Model - Using Tableless

Similar Tutorials

View Content

I'm trying to make a box without table but i'm having some problems with the div's of the lateral columns. Look -> here

I saw that if i want to use a percent value on height style in the div element, it's parent element must have the height element in pixels unit. But i don't want the height adjusted previously, the content in the box could do itself.

thanks in advanced

Code:

body {
	background:white;
	margin:0px;
	margin-top: 5px;
	margin-left: 5px;
	padding:0px;
	text-align: center;
	height: 100%;
}


#caixa{
	width: 400px;
}

.esquerda_1{
	float: left;
	width: 38px;
	height: 26px;
	background:url(img/q1_1.gif) no-repeat top left;
	margin:0px;
	margin-right:-3px;
}

html>body .esquerda_1 {
	margin-right:0px;
}

.direita_1{
	float: right;
	width: 38px;
	height: 26px;
	background:url(img/q1_3_semtitulo.gif) top right;
	margin:0px;
	margin-left:-3px;
}

html>body .direita_1 {
	margin-left:0px;
}

.meio_titulo{
	width: 100%;
	height: 26px;
	background:url(img/q1_2_shin.gif) repeat-x;
}

.esquerda_2{
	float: left;
	width: 4px;
	height: 100%;
	background:url(img/q2_1_shin.gif) repeat-y top left;
	margin:0px;
	margin-right:-3px;
}

html>body .esquerda_2 {
	margin-right:0px;
}

.direita_2{
	float: right;
	width: 4px;
	height: 100%;
	background:url(img/q2_2_shin.gif) repeat-y top right;
	margin:0px;
	margin-left:-3px;
}

html>body .direita_2 {
	margin-left:0px;
}

.meio{
	width: 100%;
	background:url(img/q2_bg.gif) repeat;
}


.esquerda_3{
	float: left;
	width: 6px;
	background:url(img/q3_1.gif) no-repeat;
	margin:0px;
	margin-right:-3px;
}

html>body .esquerda_3 {
	margin-right:0px;
}

.direita_3{
	float: right;
	width: 6px;
	background:url(img/q3_3.gif) no-repeat;
	margin:0px;
	margin-left:-3px;
}

html>body .direita_3 {
	margin-left:0px;
}

.meio_rodape{
	width: 100%;
	background:url(img/q3_2_shin.gif) repeat-x;
}

</style>

</head>
<body>
<br /><br />

<div id="caixa">
	<div class="esquerda_1">&nbsp;</div>
	<div class="direita_1">&nbsp;</div>
	<div class="meio_titulo">aasdfsadfasd&nbsp;</div>
	<div class="esquerda_2">&nbsp;</div>
	<div class="direita_2">&nbsp;</div>
	<div class="meio">
	  aasdfsadfasd aqui bla bla <br /> aqui bla bla<br /> bubu sdlkfjs dk<br /> alkakl WOWOWOW
	</div>

	<div class="esquerda_3">&nbsp;</div><div class="direita_3">&nbsp;</div><div class="meio_rodape">&nbsp;</div>
</div>

Tableless Css Design?

Similar Tutorials

View Content

Hi all,

After using silktide.com to test my site's score, the report suggested that I remake the site using CSS to make it tableless.

The site i am remaking is www.verdicts.co.uk

So far ive remade the interface which you can see he www.verdicts.co.uk/verdicts_css

Problem is, i have absolutely NO clue how i would go about making much more complex table replication using CSS. For example, the "popular review catagories" as seen on the www.verdicts.co.uk homepage.

...Or the product listing pages like this one: http://www.verdicts.co.uk/items/663/items.html

or how about the reviews tables as seen he http://www.verdicts.co.uk/reviews/1140/1140.html

What i am asking, is: Should i try and find a way to recreate these tables with CSS, or is the only way to do this, with *some* use of tables? Silktide.com's checker says make the site "tableless" - so i am guessing it's saying not to use a single table?!

Thanks

Mat.

Tableless Problem

Similar Tutorials

View Content

Hi friends,

I am trying to avoid tables but what I would do in 1 minute now I need hours

Can you help me?

What I get is here... not exactly what I expected.

My CSS is here

Thank you for your time and help.

Css Tableless Formatting Issue

Similar Tutorials

View Content

How To Create Tableless Designs In Css ?

Similar Tutorials

View Content

Can anyone tell me how to create tableless designs in CSS with example and also what are advantages on tableless as compared to tables ?

Thanks in advance

How To Make Tableless Data???

Similar Tutorials

View Content

Hi! I'm wondering how to you convert this table data to a tableless data??

Code:

   <table>
    <tr>
     <td>1-Part Receipt Paper (8100 per box)</td>
     <td>$77.55</td>
    </tr>
    <tr>
     <td>2-Part Receipt Paper (4800 per box)</td>
     <td>$90.75</td>
    </tr>
   </table>

Thanks...

Edit: That confirm to W3.org standard and right/left justify??

First Time Tableless Layout Need Help

Similar Tutorials

View Content

Hey everybody I am trying my hand at doing a tableless layout for the first time.

Here is the original look of the page I am trying to convert...

http://www.bleutiger.com/houstontruckclub/indexoriginal.html

here is wht I have so far...

http://www.bleutiger.com/houstontruckclub/testindex.html

and my css file is...

http://www.bleutiger.com/houstontruckclub/testindex.css

What am I doing wrong?

I realize that I have not included all of the content but I am having trouble with a couple of things...

I built a container to hold the entire page..

I put a second container called "header" that holds...
three more div's..

MainTitle
Spacer
MainNav

that part is working fine with all of the formating.

THe next container "Header2" is suppose to have two columns in it but I can't get them to float to the left and right the way they are supposed to?

Help!!!

Tableless Layout Flaw

Similar Tutorials

View Content

Hello to all,

There are lots of talks lately that tables are dying. Well, I am trying to rebuild my site using tableless layout. At one point I though I was there, but here is one problem I am having (see the attached image). When a text in a right or a left column exceeds my 100% height, I loose the layout. Is there anything that I can do to fix that?

Here is the html:

Code:

<html>
<head>
<title> New Document </title>
<style>
<!--
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	background-color: #EEEEEE;
	margin: 0;
	padding: 0;
}
#cssNavigationTop {
	padding: 10px;
	color: #FFFFFF;
	text-align: center;
	background-color: #330033;
	clear: both;
}
#cssNavigationBottom {
	padding: 5px;
	color: #FFFFFF;
	text-align: center;
	background-color: #330033;
	clear: both;
}
#cssColumnLeft {
	width: 18%;
	float: left;
}
.cssPanelLeft {
	margin: 10px;
}
#cssColumnRight {
	width: 18%;
	float: right;
}
.cssPanelRight {
	margin: 10px;
}
#cssContent {
	margin: 0 18% 0 18%;
	padding: 10px;
	background-color: #FFFFFF;
	height: 100%;
	border: 1px dotted #666666;
	border-top: 0;
	border-bottom: 0;
}
#cssFootNote {
	padding: 3px;
	text-align: center;
	clear: both;
}
//-->
</style>
</head>
<body>

<div id=cssNavigationTop>cssNavigationTop</div>

<div id=cssColumnLeft>
	<div class=cssPanelLeft>

		cssPanelLeft

		<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>

	</div>
</div>

<div id=cssColumnRight>
	<div class=cssPanelRight>
		cssPanelRight
	</div>
</div>

<div id=cssContent>cssContent</div>

<div id=cssNavigationBottom>cssNavigationBottom</div>

<div id=cssFootNote>cssFootNote</div>

</body>
</html>

3 Column Tableless Form

Similar Tutorials

View Content

I'm trying to make a feedback form using CSS instead of tables.
It works fine with a label and an input box. i.e. just 2 columns
I come unstuck when I try to add an extra box on the right to make 3 columns. (<DIV ID="help">)
I can't seem to align it correctly or size it correctly.
html4strict Code:
Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Test CSS Form</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY> <P CLASS="smltxt"> > <B>Register your interest</B></P> <P>Please use the comments box to provide your views or to register an interest in being kept informed of developments.</P> <DIV ID="FormInterest"> <FORM METHOD="POST" ACTION="/cgi-bin/genform.pl"> <INPUT TYPE="HIDDEN" NAME="form_owner" VALUE="test@test.co.uk"> <INPUT TYPE="hidden" NAME="form_subject" VALUE="Interest Form"> <BR> <LABEL FOR="name">Name</LABEL> <INPUT NAME="name" ID="name"><BR> <LABEL FOR="company">Organisation</LABEL> <INPUT NAME="company" ID="company"><BR> <LABEL FOR="email">E-mail / Telephone</LABEL> <INPUT NAME="email" ID="email"><BR> <LABEL FOR="interest">Interest Area</LABEL> <SELECT NAME="interest" SIZE="1" ID="interest"> <OPTION VALUE="Communications">Communications</OPTION> <OPTION VALUE="Healthcare">Healthcare</OPTION> <OPTION VALUE="Electronics">Electronics</OPTION> <OPTION VALUE="Instrumentation">Instrumentation</OPTION> <OPTION VALUE="Sensing">Sensing</OPTION> <OPTION VALUE="Process control">Process control</OPTION> <OPTION VALUE="Defence">Defence</OPTION> <OPTION VALUE="Security">Security</OPTION> <OPTION VALUE="Energy">Energy</OPTION> <OPTION VALUE="Transport">Transport</OPTION> <OPTION VALUE="Other">Other</OPTION> </SELECT><BR> <LABEL FOR="companyinterest">Organisation Interest Area</LABEL> <SELECT NAME="companyinterest" SIZE="1" ID="companyinterest"> <OPTION VALUE="Communications">Communications</OPTION> <OPTION VALUE="Healthcare">Healthcare</OPTION> <OPTION VALUE="Electronics">Electronics</OPTION> <OPTION VALUE="Instrumentation">Instrumentation</OPTION> <OPTION VALUE="Sensing">Sensing</OPTION> <OPTION VALUE="Process control">Process control</OPTION> <OPTION VALUE="Defence">Defence</OPTION> <OPTION VALUE="Security">Security</OPTION> <OPTION VALUE="Energy">Energy</OPTION> <OPTION VALUE="Transport">Transport</OPTION> <OPTION VALUE="Other">Other</OPTION> </SELECT><BR> <H1>Objectives</H1> <LABEL FOR="outcome">What is the desired outcome? </LABEL> <TEXTAREA NAME="outcome" ROWS="6" COLS="42" ID="outcome"></TEXTAREA> <DIV ID="help"> In the Objectives box please identify your new requirements and what you would like as the outcome of the work, that is, what might be physically produced or what might be achieved. </DIV><BR> <H1>Impact</H1> <LABEL FOR="important">Why is it important?</LABEL> <TEXTAREA NAME="important" ROWS="6" COLS="42" ID="important"></TEXTAREA><BR> <LABEL FOR="benefit">What is the benefit to UK and who would benefit from this work?</LABEL> <TEXTAREA NAME="benefit" ROWS="6" COLS="42" ID="benefit"></TEXTAREA><BR> <LABEL FOR="collaborations">Collaboration Options</LABEL> <SELECT NAME="collaborations" SIZE="1" ID="collaborations"> <OPTION VALUE="Yes">Yes</OPTION> <OPTION VALUE="No">No</OPTION> <OPTION VALUE="Maybe">Maybe</OPTION> <OPTION VALUE="No Comment">No Comment</OPTION> </SELECT><BR> <INPUT TYPE="SUBMIT" VALUE="Submit Interest" NAME="Submit1" ID="Submit1"> <INPUT TYPE="RESET" NAME="Reset1" VALUE="Clear Form" ID="Reset1"><BR> </FORM> </DIV> </BODY> </HTML>

  

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


 <HTML>


   <HEAD>


      <TITLE>Test CSS Form</TITLE>


      <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">


      <STYLE TYPE="text/css">


 <!--


 #FormInterest label,#FormInterest input {


     display: block;


     width: 150px;


     float: left;


     margin-bottom: 10px;


 }




 #FormInterest label {


     text-align: left;


     width: 200px;


     padding-right: 20px;


 }


 #FormInterest br {


     clear: left;


 }




 #FormInterest  form {


       border : 1px solid #000;


       padding : 5px;


     background-color : #ffc;  


 }


 #help{


     width: 150px;


     float: right;


       border : 1px solid #000;


       padding : 5px;


     background-color : white;      


 }


 -->


 </STYLE>


   </HEAD>


   <BODY>


      <P CLASS="smltxt"> > <B>Register your interest</B></P>


      <P>Please use the comments box to provide your views or to register an interest in being kept informed of developments.</P>


      <DIV ID="FormInterest">


         <FORM METHOD="POST" ACTION="/cgi-bin/genform.pl">


           <INPUT TYPE="HIDDEN" NAME="form_owner" VALUE="test@test.co.uk">


           <INPUT TYPE="hidden" NAME="form_subject" VALUE="Interest Form">


           <BR>


           <LABEL FOR="name">Name</LABEL>


           <INPUT NAME="name" ID="name"><BR>


           <LABEL FOR="company">Organisation</LABEL>


           <INPUT NAME="company" ID="company"><BR>


           <LABEL FOR="email">E-mail / Telephone</LABEL>


           <INPUT NAME="email" ID="email"><BR>


           <LABEL FOR="interest">Interest Area</LABEL>


           <SELECT NAME="interest" SIZE="1" ID="interest">


              <OPTION VALUE="Communications">Communications</OPTION>


              <OPTION VALUE="Healthcare">Healthcare</OPTION>


              <OPTION VALUE="Electronics">Electronics</OPTION>


              <OPTION VALUE="Instrumentation">Instrumentation</OPTION>


              <OPTION VALUE="Sensing">Sensing</OPTION>


              <OPTION VALUE="Process control">Process control</OPTION>


              <OPTION VALUE="Defence">Defence</OPTION>


              <OPTION VALUE="Security">Security</OPTION>


              <OPTION VALUE="Energy">Energy</OPTION>


              <OPTION VALUE="Transport">Transport</OPTION>


              <OPTION VALUE="Other">Other</OPTION>


           </SELECT><BR>


           <LABEL FOR="companyinterest">Organisation Interest Area</LABEL>


           <SELECT NAME="companyinterest" SIZE="1" ID="companyinterest">


              <OPTION VALUE="Communications">Communications</OPTION>


              <OPTION VALUE="Healthcare">Healthcare</OPTION>


              <OPTION VALUE="Electronics">Electronics</OPTION>


              <OPTION VALUE="Instrumentation">Instrumentation</OPTION>


              <OPTION VALUE="Sensing">Sensing</OPTION>


              <OPTION VALUE="Process control">Process control</OPTION>


              <OPTION VALUE="Defence">Defence</OPTION>


              <OPTION VALUE="Security">Security</OPTION>


              <OPTION VALUE="Energy">Energy</OPTION>


              <OPTION VALUE="Transport">Transport</OPTION>


              <OPTION VALUE="Other">Other</OPTION>


           </SELECT><BR>


           <H1>Objectives</H1> <LABEL FOR="outcome">What is the desired outcome? </LABEL> <TEXTAREA NAME="outcome" ROWS="6" COLS="42" ID="outcome"></TEXTAREA>


           <DIV ID="help">


              In the Objectives box please identify your new requirements and what you would like as the outcome of the work, that is, what might be physically produced or what might be achieved.


           </DIV><BR>


           <H1>Impact</H1> <LABEL FOR="important">Why is it important?</LABEL> <TEXTAREA NAME="important" ROWS="6" COLS="42" ID="important"></TEXTAREA><BR>


           <LABEL FOR="benefit">What is the benefit to UK and who would benefit from this work?</LABEL> <TEXTAREA NAME="benefit" ROWS="6" COLS="42" ID="benefit"></TEXTAREA><BR>


           <LABEL FOR="collaborations">Collaboration Options</LABEL>


           <SELECT NAME="collaborations" SIZE="1" ID="collaborations">


              <OPTION VALUE="Yes">Yes</OPTION>


              <OPTION VALUE="No">No</OPTION>


              <OPTION VALUE="Maybe">Maybe</OPTION>


              <OPTION VALUE="No Comment">No Comment</OPTION>


           </SELECT><BR>


           <INPUT TYPE="SUBMIT" VALUE="Submit Interest" NAME="Submit1" ID="Submit1">


           <INPUT TYPE="RESET" NAME="Reset1" VALUE="Clear Form" ID="Reset1"><BR>


         </FORM>


      </DIV> </BODY>


 </HTML>

How To Create Tableless Interfaces

Similar Tutorials

View Content

Hi

Does anyone here written any article on creating tableless (web 2.0) interfaces with CSS only?

I want to learn CSS so that I can get rid of tables and can design sites based on pure CSS and valid xhtml. any specific links on this topic are highly appreciated.

thanks

Book: Tableless Design?

Similar Tutorials

View Content

I've been designing web pages for 7 years now, using layout tables. I realize that it's time to let go with them now.

Do you recommend any good book about this? I've red Ben Henick's article on Alistapart (http://alistapart.com/articles/12lessonsCSSandstandards). Do you know if he has written any books about the topic too?

Slice From Psd And Make A Tableless Css Template

Similar Tutorials

View Content

Hi guys
I was given the task to slice a design in Photoshop and then to make a CSS tableless template.
I would like to know where to find some nice newbie tutorials about how to make this.

The following image is part of the main design that has to be converted to CSS website

And following is the code of one of the template files that the custom CMS has.

Code:

<br />
<div class="websiteintro" style="width:700px; margin-left: auto; margin-right: auto;">
<!--
	<div class="htmlcontent">
		<div style="text-align: center;">
			<span style="text-align: right;">
				<span style="font-weight: bold; color: rgb(204, 0, 0);">Citaat van de week...</span>
			</span>
			<br>
			<span style="text-align: right;">
				<span style="margin: 0cm 0cm 0pt; text-align: right;">
				'{textfragment naam="citaat_van_de_week"}'
				</span>
			</span>
		</div>
	</div>
-->
</div>
<br /><br />
<table id="homepagecontent" border="0" width="700" cellpadding="0" cellspacing="0">
<tr align="left" valign="top">
<td width="234">
	<div style="margin-bottom:20px;">
	<h1><strong>Laatste nieuwsberichten</strong></h1>
	{zoek_nieuws limiet="5" sorteer="datum_creatie DESC" var="nieuwsberichten"}
	
	{foreach from=$nieuwsberichten item=nieuws}
		<strong>{$nieuws->datum_creatie}</strong>: <a href='{$nieuws->link}'>{$nieuws->titel}</a><br />
	{/foreach}
	</div>
</td>
</tr>
</table>

<h1>. . .</h1>

I'll apreciate any urls or info you can give me.
Thanks a lot in advance.

Tableless Layout For A Simple Site.

Similar Tutorials

View Content

Hi. I'm making a registration and login pages with some additional information, and I'm wondering how to make them tableless? What I'd do with tables is put table in a table, because I want to do something like this:
A 640px (or any other value) width box in the center of the screen, in which there is another box under some text, which is borderless login box. Same would go for the registration box. And without tables - I have no idea how to do it.
Not sure if this is the right section, sorry if it isn't.

Thanks.

Tableless Design With Left Column Not First

Similar Tutorials

View Content

A website generally has a header/footerand then a left column and main column. The left column contains links and the main column contains the content.

Years ago I saw a design that was validated and used CSS to achieve a tableless design that actually had the main column content BEFORE the left column links in the sourcecode, but on the site itself, it was like a normal site (left column was on the left and main content was on the right or center).

Does this achieve better search engine results by having the main content first in the eyes of the search engines, but in reality, to the people, the left links actually shows up first.

Also, can someone provide a link to this or show some coding on what you have seen done to achieve this?

First Time Doing Tableless Form With Css - Having Some Problems

Similar Tutorials

View Content

Here is the form I am working on

Here are the problems I can't figure out how to fix:

In FF the form part inside the div class - form doesn't start until about 500px down or so.

Also the label and input box are not lining up horizontally properly.

I want the label to be closer to the box and less space in between each row.

In IE the colored box <div id="form> is not taking on the left padding properly. I want it to appear centered in the main col area like it is in FF and I want there to be less box on the left side.

Space between each row is more than I like also - but the rest is pretty close.

Here is the css:
Code:

#enquiry {
	padding: 20px 50px 0px 50px;
}

#enquiry h1 {
	text-align: center;
}

#form {
	background-color: #DDEEFF;
	border: 1px solid #000099;
	padding: 10px;
}

div.rows {
	clear: both;

}

#form div.rows span.label {
	float: left;
	width: 120px;
	text-align: right;
	color: #000099;
	font-weight: normal;
}

div.rows span.input {
	float: right;
	width: 335px;
	text-align: left;
}

#form span {
	clear: both;
	color: #000099;
	font-weight: bold;
	padding: 3px;
	display: block;
	text-align: center;
}

#comments {
	clear: both;
	text-align: center;
}

.submit {
	text-align: right;
	margin-right: 20px;
}

Here is the xhtml:
Code:

<div id="enquiry">
	
		<h1>Customer Support Enquiry Form</h1>
		
		<div id="form">
		
		<span>* Designates Required Fields</span>
	
		<form action="http://www.gomango.co.uk/cgi-bin/formail.cgi" method="POST">
        <input type="hidden" name="redirect" value="http://go.gomango.co.uk/vitalograph/uk/thank.html">
        <input type="hidden" name="recipient" value="marketing@vitalograph.com">
        <input type="hidden" name="subject" value="Vitalograph General Enquiry">
		<input type="hidden" name="required" value="Name,Address,Town,County,Postcode,Country">
		<input type=hidden name="bgcolor" value="#ffffff">
		<input type=hidden name="text_color" value="#000099">
		<input type=hidden name="link_color" value="#3399FF">
		<input type=hidden name="alink_color" value="#990099">
        <input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT">
		
			<div class="rows">
				<span class="label">Name*</span>
				<span class="input"><input name="Name" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">Company</span>
				<span class="input"><input name="Company" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">Address*</span>
				<span class="input"><input name="Address" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">Town/City*</span>
				<span class="input"><input name="Town" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">County/State*</span>
				<span class="input"><input name="County" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">Post/Zip Code*</span>
				<span class="input"><input name="Postcode" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">Country*</span>
				<span class="input"><input name="Country" type="text" size="40"></span>
			</div>
			
			<span>Please complete at least one of the three fields below</span>
			
			<div class="rows">
				<span class="label">Telephone</span>
				<span class="input"><input name="Name" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">Fax</span>
				<span class="input"><input name="Name" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">Email</span>
				<span class="input"><input name="Name" type="text" size="40"></span>
			</div>
			
			<span>Please send me information about:</span>
			
			<div id="comments"> <textarea name="infobox" cols="50" rows="6" wrap="VIRTUAL"></textarea>
			</div>
			
			<div class="submit"><input type="SUBMIT" value="Send Form" alt="Submit Brochure Request" class="buttons">
            <input type="RESET" class="buttons"></div>
		
		</form>
	  
	  </div>
	  
	  <p class="back"><a href="javascript:history.go(-1)">< Back</a></p>
	  
	</div>