How to build columns in html? |
How to build columns in html? |
Roseline |
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 |
pandy |
Aug 7 2012, 01:27 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 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 . |
Lars |
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! |
pandy |
Aug 9 2012, 05:32 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 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. |
Lars |
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 |
Darin McGrew |
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/ |
Lars |
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 |
Jaycbrf4 |
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 |
Lars |
Aug 10 2012, 01:55 PM
Post
#9
|
Group: Members Posts: 4 Joined: 9-August 12 Member No.: 17,590 |
Thank you!!
That was exactly where i was looking for! |
Jaycbrf4 |
Aug 10 2012, 02:07 PM
Post
#10
|
Member Group: Members Posts: 33 Joined: 9-August 12 Member No.: 17,587 |
Thank you!! That was exactly where i was looking for! 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 |
Christian J |
Aug 10 2012, 03:01 PM
Post
#11
|
. Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 |
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. |
pandy |
Aug 10 2012, 03:02 PM
Post
#12
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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. |
Christian J |
Aug 10 2012, 03:09 PM
Post
#13
|
. Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 |
<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 |
Frederiek |
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/ |
Lo-Fi Version | Time is now: 26th April 2024 - 02:30 PM |