The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> How to build columns in html?
Roseline
post Aug 7 2012, 12:07 PM
Post #1





Group: Members
Posts: 1
Joined: 7-August 12
Member No.: 17,574
Hello, I've been searching and searching html codes to do a simple thing: create two columns to display contact information on my website.
Can someone help please giving me the code?


(left column)

Dan Lamoureux
President, ext. 224
president@qcgn.ca

Sylvia Martin-Laforge
Director General, ext. 225
sylvia.martin-laforge@qcgn.ca

Stephen D. Thompson
Director of Policy, Research and Public Affairs, ext. 228
stephen.thompson@qcgn.ca

Rita Legault
Director of Communications and Public Relations, ext. 223
rita.legault@qcgn.ca


(right column)

Roseline Joyal-Guillot
Senior Project Officer, ext. 257
roseline.joyal@qcgn.ca

Patricia McCall
Manager, Operations and Business Development, ext. 255
patricia.mccall@qcgn.ca

Celine Cooper
Seniors Research Project Manager, ext. 221
celine.cooper@qcgn.ca

Véronique Desjardins
Project Officer, ext. 224
veronique.desjardins@qcgn.ca

Kadeeme Cruickshank
Finance Officer, ext. 254
finance@qcgn.ca
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 7 2012, 01:27 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
What search engine did you use? Can't have been Google.

Also see http://htmlhelp.com/reference/html40/tables/ and http://htmlhelp.com/faq/html/tables.html#tablestoc .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lars
post Aug 9 2012, 05:08 PM
Post #3





Group: Members
Posts: 4
Joined: 9-August 12
Member No.: 17,590
Hello,

I'm Lars and i have a question.
How do you make 4 columns but with no lines between the columns
Just 4 single texts
Like this:

text 1 text 2 text 3 text 4
yes no maybe really?


I'm from the Netherlands
sorry for the bad language!

I hope anyone can help me!

thank you!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 9 2012, 05:32 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Is this for layout reasons or do you want to present tabular data? Looks tabular to me and then a table is the correct way to do it. You can turn borders off with border="0".
http://htmlhelp.com/reference/html40/tables/table.html

You can also turn the borders off with CSS, but the above works fine.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lars
post Aug 10 2012, 07:17 AM
Post #5





Group: Members
Posts: 4
Joined: 9-August 12
Member No.: 17,590
I don't want a table
I just want 4 lines of text between each other!

Like this:

1.News 2.sport 3.etc. 4.etc.


This post has been edited by Lars: Aug 10 2012, 07:19 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 10 2012, 09:20 AM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Scroll down to the "Navigation" examples here:
http://www.alistapart.com/articles/taminglists/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lars
post Aug 10 2012, 10:38 AM
Post #7





Group: Members
Posts: 4
Joined: 9-August 12
Member No.: 17,590
Thanks that was a really great site!!
But it doesn't work because I don't no where to place the text

(Adding the following rules to the style sheet for the page: )
which files is that?

Can you make the files for me perhaps?



This post has been edited by Lars: Aug 10 2012, 10:40 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jaycbrf4
post Aug 10 2012, 01:38 PM
Post #8


Member
***

Group: Members
Posts: 33
Joined: 9-August 12
Member No.: 17,587
PANDY

STOP Suggesting Tables. No real web designer uses tables for anything other that excel data. Obviously you have no idea what you are talking about so stop steering all these people who are learning html, THE WRONG WAY!

This is SIMPLE CSS

Roseline:
CODE

<!DOCTYPE html>
<html lang="en">
  <head>
<title>2 col html</title>
    

<style type='text/css'>
#wrapper {
   width:600px;
   margin: 0 auto;
}
#left_col {
   width: 150px;
   margin: 0px;
   padding: 10px;
   border: solid 1px;
}
#right_col {
   float: right;
   width: 150px;
   margin: 0px;
   padding: 10px;
   border: solid 1px;
}

</style>
</head>
<body>
<div id="wrapper">
<div id="right_col">
<h3>Right Col</h3>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p></div>

<div id="left_col">
<h3>Left Col</h3>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p></div>
</div>

  </body>
</html>


Lars, same thing but using classes of float right for all divs instead of an id to define a single div...
CODE

<!DOCTYPE html>
<html lang="en">
  <head>
<title>2 col html</title>
    

<style type='text/css'>
#wrapper {
   width:800px;
   margin: 0 auto;
}
.col {
   float: left;
   width: 150px;
   margin: 5px;
   padding: 10px;
}


</style>
</head>
<body>
<div id="wrapper">
<div class="col">
<h3>Col 1</h3>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p></div>
<div class="col">
<h3>Col 2</h3>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p></div>
<div class="col">
<h3>Col 3</h3>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p></div>
<div class="col">
<h3>Col 4</h3>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p>
<p>name<br>address<br>phone</p></div>

</div>

  </body>
</html>


This post has been edited by Jaycbrf4: Aug 10 2012, 01:40 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lars
post Aug 10 2012, 01:55 PM
Post #9





Group: Members
Posts: 4
Joined: 9-August 12
Member No.: 17,590
Thank you!! biggrin.gif
That was exactly where i was looking for!
smile.gif smile.gif smile.gif smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jaycbrf4
post Aug 10 2012, 02:07 PM
Post #10


Member
***

Group: Members
Posts: 33
Joined: 9-August 12
Member No.: 17,587
QUOTE(Lars @ Aug 10 2012, 02:55 PM) *

Thank you!! biggrin.gif
That was exactly where i was looking for!
smile.gif smile.gif smile.gif smile.gif


happy.gif No Problem Lars -

If you are including any html after the 4 columns, be sure to add a clear after the floats:

<style>
.clear {
clear: all;
}
</style>

then add after columns <br class="clear">

This post has been edited by Jaycbrf4: Aug 10 2012, 02:09 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 10 2012, 03:01 PM
Post #11


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(Jaycbrf4 @ Aug 10 2012, 08:38 PM) *

STOP Suggesting Tables. No real web designer uses tables for anything other that excel data.

Just like pandy wrote, tables are meant for tabular data (that doesn't have to come from Excel, of course).

Using tables for the page layout is another issue, and I recall pandy has adviced against that for over a decade. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 10 2012, 03:02 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(Jaycbrf4 @ Aug 10 2012, 08:38 PM) *

PANDY

STOP Suggesting Tables. No real web designer uses tables for anything other that excel data. Obviously you have no idea what you are talking about so stop steering all these people who are learning html, THE WRONG WAY!


Maybe you should read what I wrote? Also, please don't yell. We scare easily around here. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 10 2012, 03:09 PM
Post #13


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(Jaycbrf4 @ Aug 10 2012, 09:07 PM) *

<style>
.clear {
clear: all;
}
</style>

That should be

CODE
<style type="text/css">
.clear {
  clear: both;
}
</style>

(and of course the STYLE element should be in the HEAD section). See also http://www.w3.org/TR/CSS21/visuren.html#propdef-clear

QUOTE
<br class="clear">

If you're using a BR element you might as well use its CLEAR attribute instead of the CSS:

CODE
<br class="all">

See also http://www.htmlhelp.com/reference/html40/special/br.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 11 2012, 04:58 AM
Post #14


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Or, use a clearfix without having to add any redundant markup.
See eg http://nicolasgallagher.com/micro-clearfix-hack/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 03:21 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC