The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> How to convert older website done in Tables to Div tags and CSS, I have been unable to convert my tables layouts to a modern layout
chris montez
post Apr 26 2020, 09:54 PM
Post #1


Newbie
*

Group: Members
Posts: 18
Joined: 26-April 20
Member No.: 27,299



Hello I have always used tables for layouts and have been unsuccessful learning div tags and CSS. I would be grateful if someone could convert this table to a modern presentation as I am transitioning to a responsive website and don't know how tables react to that:

<table width="1200" border="0" cellspacing="3" cellpadding="3" align="center">
<tr>
<td height="25" align="center"> <p4>Choose Your 2021 Iditarod Adventure From One of Our 8 Tours Below</p4></td></tr></table>
<br>
<table width="1000" border="0" cellspacing="10" cellpadding="2" align="center">
<tr>
<td width="330" align=center ><a href="../totalrace/index.htm"><p5>21 Day Ultimate Iditarod Experience</p5>
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</td>

<td width="330" align=center ><a href="../startcombo/index.htm"><p5>11 Day Race Start / Checkpoints</p5><img src="Dallaswillow.jpg" width="330" height="219" alt="11 Day Race Start and Checkpoints">
</a>
March 02- March 12, 2021</td>

<td width="330" align=center> <a href="../finishcombo/index.htm"><p5>14 Day McGrath / Nome Finish Tour</p5><img src="14dayfinish.jpg" width="330" height="219
" alt="14 day finish">

</a>
March 8- March 22, 2021</td>

</tr>
<tr><td width="1000" height="20"></td></tr>
<tr>
<td width="330" align=center><a href="../nome/index.htm"><p5> 10 Day Nome Finish Tour</p5><img src="10daynomefinish.jpg" width="330" height="219" alt="10 Day Nome Finish Tour">

</a>
March 13- March 22, 2021</td>

<td width="330" align=center><a href="../iditarod/index.htm"><p5>6 Day Race Start Tour</p5><img src="6dayracestart.jpg" width="330" height="219" alt="6 Day Race Start Tour">

</a>
March 02 - March 08, 2021</td>

<td width="330" align=center><a href="../mcgrath/index.htm"><p5>5 Day Checkpoints Tour</p5><img src="5daymcgrath.jpg" width="330" height="219" alt="5 Day Checkpoint Tour">

</a>
March 08 - March 12, 2021</td>

</tr>
<tr><td width="1000" height="20"></td></tr>
<tr>


<td width="330" align=center><a href="../nome/index.htm"><p5>14 Day Nome Finish &amp; Northern Lights </p5>
<img src="images/bettlesaurora.jpg" width="330" height="219" alt="14 Day Nome Finish and Bettles Lodge"></a>
March 08 - March 22, 2021</td>
<td width="330" align=center>&nbsp;</td>

<td width="330" align=center> <a href="../racestartnorthernlightscombo/index.htm">
<p5>11 Day Race Start &amp; Northern Lights </p5><img src="suefarraurora.jpg" width="330" height="219" alt="11 Day Race Start and Northern Lights">

</a>
March 02 - March 12, 2021</td>

</tr>
</table>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 27 2020, 08:46 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



QUOTE(chris montez @ Apr 27 2020, 04:54 AM) *

I am transitioning to a responsive website and don't know how tables react to that

You can still use tables for tabular data (but then preferably without a fixed width). This doesn't look like tabular data though.

QUOTE
<table width="1200" border="0" cellspacing="3" cellpadding="3" align="center">
<tr>
<td height="25" align="center"> <p4>Choose Your 2021 Iditarod Adventure From One of Our 8 Tours Below</p4></td></tr></table>


The above looks like a heading, so let's use that:

CODE
<h1>Choose Your 2021 Iditarod Adventure From One of Our 8 Tours Below</h1>

(BTW here's no such thing as a P4 element).

QUOTE
<td width="330" align=center ><a href="../totalrace/index.htm"><p5>21 Day Ultimate Iditarod Experience</p5>
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</td>

Each cell like the above might be replaced with something like:

CODE
<p>
<a href="../totalrace/index.htm">
21 Day Ultimate Iditarod Experience
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</p>

(There's no P5 element either). The only exception is the second-last empty cell. Do you want an empty space like that?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 27 2020, 09:06 AM
Post #3


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



For the styling, I also add a container around the P elements:

CODE
<div class="container">
...
</div>


Finally here's the actual styling, with comments inside /* and */:

CODE
<style>

h1 {
font-weight: normal; /* Removes the default bold style of H1 elements. */
font-size: 100%; /* Normal text size. */
text-align: center; /* Centers the text. */
}

div.container {
margin-top: 2em;
margin-left: auto;
margin-right: auto;
width: 80%; /* Here the DIV container is centered using a trick from combining an explicit "width" with "auto" values for the left and right margins. */
text-align: center; /* Inside the DIV, the actual P elements are centered too with "text-align: center" --this only works here because the Ps are styled as "display: inline-block" (see below). */
}

p {
display: inline-block; /* This makes each P element line up in a row that can also be centered, just like inline text .*/
margin: 0.5em; /* This is a short-hand for all four side margins. */
}

p img {display: block;} /* This makes each IMG a block element inside each P, so that the text appears on their own lines above and below the IMG. */

</style>


If you only have one page like this, you can put the above STYLE element in the page's HEAD section (if you have several pages with the same layout, it might be more practical to use an external stylesheet file though).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chris montez
post Apr 27 2020, 10:50 AM
Post #4


Newbie
*

Group: Members
Posts: 18
Joined: 26-April 20
Member No.: 27,299



QUOTE(Christian J @ Apr 27 2020, 09:06 AM) *

For the styling, I also add a container around the P elements:

CODE
<div class="container">
...
</div>


Finally here's the actual styling, with comments inside /* and */:

CODE
<style>

h1 {
font-weight: normal; /* Removes the default bold style of H1 elements. */
font-size: 100%; /* Normal text size. */
text-align: center; /* Centers the text. */
}

div.container {
margin-top: 2em;
margin-left: auto;
margin-right: auto;
width: 80%; /* Here the DIV container is centered using a trick from combining an explicit "width" with "auto" values for the left and right margins. */
text-align: center; /* Inside the DIV, the actual P elements are centered too with "text-align: center" --this only works here because the Ps are styled as "display: inline-block" (see below). */
}

p {
display: inline-block; /* This makes each P element line up in a row that can also be centered, just like inline text .*/
margin: 0.5em; /* This is a short-hand for all four side margins. */
}

p img {display: block;} /* This makes each IMG a block element inside each P, so that the text appears on their own lines above and below the IMG. */

</style>


If you only have one page like this, you can put the above STYLE element in the page's HEAD section (if you have several pages with the same layout, it might be more practical to use an external stylesheet file though).


I put the style code in the head section and put the <div class="container">
... at the start of each row and the </div> at the end of each row with 4 <p></p> elements in each row. But the <p> elements are still lining up in a centered column. Here is what the web page should look like: https://iditarodtours.com/newindex2020.htm As you can see the whole page is laid out in tables as I have been using the same basic layout for 20+ years and tables and frames is how we did it when I learned this. Any suggestion what might be causing a single column instead of 2 rows?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 27 2020, 11:06 AM
Post #5


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



QUOTE(chris montez @ Apr 27 2020, 05:50 PM) *

and put the <div class="container">
... at the start of each row and the </div> at the end of each row with 4 <p></p> elements in each row.

No, only use one container with all the P elements inside it:

CODE
<div class="container">
<p></p>
<p></p>
<p></p>
...
</div>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chris montez
post Apr 27 2020, 12:16 PM
Post #6


Newbie
*

Group: Members
Posts: 18
Joined: 26-April 20
Member No.: 27,299



QUOTE(Christian J @ Apr 27 2020, 11:06 AM) *

QUOTE(chris montez @ Apr 27 2020, 05:50 PM) *

and put the <div class="container">
... at the start of each row and the </div> at the end of each row with 4 <p></p> elements in each row.

No, only use one container with all the P elements inside it:

CODE
<div class="container">
<p></p>
<p></p>
<p></p>
...
</div>




This is the code I have put in place of the table and instead of getting 2 rows of 4 <p></p> elements I have one vertical column:

<div class="container">
<p width align=center ><p><a href="../totalrace/index.htm">
<h1>21 Day Ultimate Iditarod Experience</h1>
<img src="images/fulltour.jpg" width="400" height="300" alt="21 Day Tour"> </a>
March 02- March 22, 2021 </p>
<p style="text-align:left">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p style="text-align:right"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>

<p><a href="../startcombo/index.htm">
<h1>11 Day Race Start / Checkpoints</h1>
<img src="images/_DSC0078 copy.jpg" width="400" height="300" alt="Racing Dogs"></a>
March 02- March 12, 2021</p>
<p style="text-align:left">Lunging, jumping sled dogs straining to start the Race. Five days on the trail seeing the teams and mushers </p>
<p style="text-align:right"><img src="images/button.jpg" width="119" height="31" alt="button"></p>


<p><a href="../finishcombo/index.htm">
<h1>14 Day McGrath / Nome Finish Tour</h1>
<img src="images/bakerfinish400.jpg" width="400" height="300" alt="baker">
</a>
March 8- March 22, 2021</p>
<p style="text-align:left">McGrath, Nikolai, Takotna, Unalakleet, White Mountain, Nome, Dog mushing, Helicopter ride, the Race finish</p>
<p style="text-align:right"><a href="../finishcombo/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>



<p><a href="../nome/index.htm">
<h1> 10 Day Nome Finish Tour</h1>
</a><img src="images/dallas-finish400.jpg" width="400" height="300" alt="Dallas Seavey">March 13- March 22, 2021
<p style="text-align:left">Be there at the finish line in Nome cheering on your favorite musher as they cross under the Burl Arch
<p style="text-align:right"><a href="../nome/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>

<p><a href="../iditarod/index.htm">
<h1>6 Day Race Start Tour</h1>
<img src="images/smithsonian300400.jpg" width="400" height="300" alt="siberians">
March 02 - March 08, 2021
</p>
<p style="text-align:left">Experience the unmatched excitement of hundreds of screaming, lunging sled dogs ready to start their journey </p>
<p style="text-align:right"><a href="../iditarod/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>


<p><a href="../mcgrath/index.htm">
<H1>5 Day Checkpoints Tour</H1>
<img src="images/_DSC0066400.jpg" width="400" height="300" alt="Checkpoint dogs"> </a>
March 08 - March 12, 2021</p>
<p style="text-align:left">Four nights on the Iditarod Trail at the McGrath checkpoint with day trips to Nikolai and Takotna checkpoints</p>
<p style="text-align:right"><a href="../mcgrath/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>



<p><a href="../nome/index.htm">
<H1>14 Day Nome Finish &amp; Northern Lights </H1>
<img src="images/randy400.jpg" width="400" height="300" alt="Randy"> </a>
March 08 - March 22, 2021</p>
<p style="text-align:left"> Come celebrate the winning musher crossing under the Burl Arch before traveling to Bettles for Aurora displays</p>
<p style="text-align:right"><a href="../nome/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p></td>
<td width="330" align=center><img src="indexdogs.jpg" width="390" height="390" alt="dogs"></td>

<p><a href="../racestartnorthernlightscombo/index.htm">
<H1>11 Day Race Start &amp; Northern Lights </H1>
<img src="suefarraurora400.jpg" width="400" height="300" alt="Arora display Bettles Lodge"> </a>
March 02 - March 12, 2021</p>
<p style="text-align:left">All the excitement of the Race Start, the Mushers Banquet, dog mushing plus the Aurora in Bettles</p>
<p style="text-align:right"><a href="../racestartnorthernlightscombo/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>


</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 27 2020, 12:32 PM
Post #7


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



QUOTE(chris montez @ Apr 27 2020, 07:16 PM) *

instead of getting 2 rows of 4 <p></p> elements I have one vertical column:

I made the layout responsive in such a way that the number of columns depends on the viewport width. But there are also HTML errors:

QUOTE
<p width align=center ><p><a href="../totalrace/index.htm">
<h1>21 Day Ultimate Iditarod Experience</h1>

You can't put a H1 element inside a P (I only used the H1 for the top heading of the page). Also you can't nest P elements. This is the HTML structure I used:

CODE
<div class="container">

<p>
<a href="../totalrace/index.htm">
21 Day Ultimate Iditarod Experience
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</p>

<p>
<a href="../totalrace/index.htm">
21 Day Ultimate Iditarod Experience
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</p>

<p>
<a href="../totalrace/index.htm">
21 Day Ultimate Iditarod Experience
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</p>

</div>


The following content wasn't part of the original post, not sure how you want it to look:

QUOTE
<p style="text-align:left">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p style="text-align:right"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>

unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chris montez
post Apr 27 2020, 12:50 PM
Post #8


Newbie
*

Group: Members
Posts: 18
Joined: 26-April 20
Member No.: 27,299



QUOTE(Christian J @ Apr 27 2020, 12:32 PM) *

QUOTE(chris montez @ Apr 27 2020, 07:16 PM) *

instead of getting 2 rows of 4 <p></p> elements I have one vertical column:

I made the layout responsive in such a way that the number of columns depends on the viewport width. But there are also HTML errors:

QUOTE
<p width align=center ><p><a href="../totalrace/index.htm">
<h1>21 Day Ultimate Iditarod Experience</h1>

You can't put a H1 element inside a P (I only used the H1 for the top heading of the page). Also you can't nest P elements. This is the HTML structure I used:

CODE
<div class="container">

<p>
<a href="../totalrace/index.htm">
21 Day Ultimate Iditarod Experience
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</p>

<p>
<a href="../totalrace/index.htm">
21 Day Ultimate Iditarod Experience
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</p>

<p>
<a href="../totalrace/index.htm">
21 Day Ultimate Iditarod Experience
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</p>

</div>


The following content wasn't part of the original post, not sure how you want it to look:

QUOTE
<p style="text-align:left">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p style="text-align:right"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>

unsure.gif



In each paragraph there is a centered title, there is an image underneath, underneath that there is a line of centered text with the dates , underneath that there is text aligned to the left, underneath that and aligned to the right there is a button.The original styling code I used is below, it allowed me to change the style of each line of text. But you said the <p4> <p5> etc... wasn't usable. If I have them defined in the style section can I still use them or should I switch them to h1, h2, h3 ....?

<STYLE type=text/css>
A:link {
COLOR: #330000; TEXT-DECORATION: none
}
A:visited {
COLOR: #330000; TEXT-DECORATION: none
}
A:active {
COLOR: #33000 text: none
}
A:hover {
COLOR: #ff6666; TEXT-DECORATION: none
}

p {
font-family-: Georgia, serif;
font-size: 18px;
color:#300;
text-align:left;

}

p2 {
font-family-: Georgia, serif;
font-size: 18px;
color:#300;
text-align:right;

}
.blue {
color: #00F;
}

p3 {
font-family-: Georgia, serif;
font-size: 16px;
color:#333;
text-align: left;
}

p4 {
font-family-: Georgia, serif;
font-size: 30px;
color:#333;
text-align: center;
}

p5 {
font-family-: Georgia, serif;
font-size: 20px;
color:maroon;
text-align: center;
}
p6 {
font-family-: Georgia, serif;
font-size: 25px;
color:#333;
text-align: center;
}
p7 {
font-family-: Georgia, serif;
font-size: 22px;
color:#300;
text-align: right;
}

img.left { float:left }
img.right {float:right }
</STYLE>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 27 2020, 01:07 PM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,821
Joined: 9-August 06
Member No.: 6



You can't invent your own elements. Period. You have to make do with those that exist.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 27 2020, 01:23 PM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,821
Joined: 9-August 06
Member No.: 6



What you probably are looking for are classes.

Instead of...
CODE
p2 {
font-family-: Georgia, serif;
font-size: 18px;
color:#300;
text-align:right;
}


...you can have this (I correced a mistake you had, font-family-).
CODE
p.2 {
font-family: Georgia, serif;
font-size: 18px;
color:#300;
text-align:right;
}


Then you go like this in the HTML.

CODE
<p class="2">Whatever... </p>


It's better though that you come up with names that means something for you classes. 1, 2 and so on is hard to remember what they are for.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 27 2020, 03:27 PM
Post #11


WDG Member
********

Group: Root Admin
Posts: 8,332
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE(pandy @ Apr 27 2020, 11:23 AM) *
...you can have this (I correced a mistake you had, font-fmily-).
CODE
p.2 {
font-family: Georgia, serif;
font-size: 18px;
color:#300;
text-align:right;
}


Then you go like this in the HTML.

CODE
<p class="2">Whatever... </p>


It's better though that you come up with names that means something for you classes. 1, 2 and so on is hard to remember what they are for.
But note that class labels cannot start with a digit:
https://www.w3.org/TR/CSS21/syndata.html#characters

So the HTML should be something like
CODE
<p class="x2"> ... </p>

and the CSS should be something like
CODE
p.x2 { ... }


Or better yet, use something with meaning rather than "x2".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 27 2020, 05:41 PM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,821
Joined: 9-August 06
Member No.: 6



Ah! Forgot about that CSS makes that addition. I checked the HMTL spec since I wasn't totally sure if is was both class names and IDs that have that limitation or only IDs. In HTML class names can start with a digit, as I understand it. Strange, really, since classes hardly had any use before CSS. Maybe the no beginning digit thing came with CSS2? Must check that out of curiousity.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 27 2020, 05:47 PM
Post #13


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,821
Joined: 9-August 06
Member No.: 6



Didn't find it in the CSS1 spec, but validators/checkers say no to leading digits for CSS1 too.

Now I found it.
https://www.w3.org/TR/REC-CSS1/#forward-compatible-parsing

Hmm. Does that mean it was changed for forward compatibility reasons? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 28 2020, 05:09 AM
Post #14


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



Now I'm getting a bit off-topic (the topic-starter can safely ignore this), but https://mathiasbynens.be/demo/crazy-class escapes the CSS selector for this HTML:

CODE
class="123"  

like this:

CODE
.\31 23 { background: lime; }

(note the space). An explanation is given on https://mathiasbynens.be/notes/css-escapes
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 28 2020, 07:14 AM
Post #15


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



QUOTE(chris montez @ Apr 27 2020, 07:50 PM) *

But you said the <p4> <p5> etc... wasn't usable. If I have them defined in the style section can I still use them or should I switch them to h1, h2, h3 ....?

In practice you can actually invent elements that don't exist (like P4) and style them with CSS (all my newer browsers support this), but it's much better to stick with existing HTML elements since they have a defined function or semantic meaning. This is especially important for search engines or voice browsers, that may only see the HTML structure of your page but none of the styling.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 28 2020, 08:10 AM
Post #16


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



Here's a new version! I changed a lot of the HTML structure in order to accomodate the extra P elements at the bottom.

I also changed the images' ALT texts. The first IMG really doesn't need one, since the H2 text performs that function (but the HTML spec still wants you to use an empty ALT attribute value). The second IMG's ALT text might be empty too, since it's the same link as the first, but I used the text "Read more" anyway to avoid a potentially confusing empty link.

CODE
<h1>Choose Your 2021 Iditarod Adventure From One of Our 8 Tours Below</h1>

<main>

<section>
<a href="../totalrace/index.htm">
<h2>21 Day Ultimate Iditarod Experience</h2>
<img src="21day.jpg" width="330" height="221" alt=""></a>
<p class="date">March 02- March 22, 2021</p>
<p class="description">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p class="button"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="Read More"></a></p>
</section>

<section>
<a href="../totalrace/index.htm">
<h2>21 Day Ultimate Iditarod Experience</h2>
<img src="21day.jpg" width="330" height="221" alt=""></a>
<p class="date">March 02- March 22, 2021</p>
<p class="description">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p class="button"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="Read More"></a></p>
</section>

<section>
<a href="../totalrace/index.htm">
<h2>21 Day Ultimate Iditarod Experience</h2>
<img src="21day.jpg" width="330" height="221" alt=""></a>
<p class="date">March 02- March 22, 2021</p>
<p class="description">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p class="button"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="Read More"></a></p>
</section>

</main>


Here's the new CSS:

CODE

body {
color: #000;
background: #fff;
}

h1 {
font-weight: normal;
font-size: 140%;
text-align: center;
}

h2 {
font-weight: normal;
font-size: 120%;
text-align: center;
color: maroon;
background: #fff;
}

main {
margin-top: 2em;
margin-left: auto;
margin-right: auto;
width: 80%; /* Here the MAIN container is centered using a trick from combining an explicit "width" with "auto" values for the left and right margins. */
text-align: center; /* Inside MAIN, the SECTION elements are centered too with "text-align: center" --this only works here because SECTIONs are styled as "display: inline-block" (see below). */
}

section {
width: 330px; /* same as the image or maybe slightly larger */
display: inline-block; /* This makes the SECTION elements line up in a row that can be centered, similar to inline text .*/
margin: 0.5em; /* This is a short-hand for all four side margins. */
}


a:link, a:visited, a:active {
text-decoration: none;
color: #300;
background: #fff;
}
a:hover {
color: #f66;
background: #fff
}

p {
font-family: Georgia, serif;
font-size: 18px;
color: #300;
background: #fff;
}

p.date {text-align: center;}
p.description {text-align: left;}
p.button {text-align: right;}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chris montez
post Apr 29 2020, 05:19 PM
Post #17


Newbie
*

Group: Members
Posts: 18
Joined: 26-April 20
Member No.: 27,299



Stlll the same issue of the elements lining up in one centered column instead of 3 separate rows with 3 elements in each row.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 30 2020, 05:14 AM
Post #18


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



QUOTE(chris montez @ Apr 30 2020, 12:19 AM) *

Stlll the same issue of the elements lining up in one centered column instead of 3 separate rows with 3 elements in each row.

If my example doesn't work please post the code of the whole page you're working on.

But didn't you want a responsive page? If so, the number of rows and columns may depend on the width of the browser window (that's how my layout is meant to work). There are other approaches of course, such as using a 3x3 grid layout for desktop browsers and a single column for mobile.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chris montez
post Apr 30 2020, 08:19 PM
Post #19


Newbie
*

Group: Members
Posts: 18
Joined: 26-April 20
Member No.: 27,299



Here is the code for the page and on my 21in desktop monitor I get 3 rows with one section in each row instead of 1 row with 3 sections in it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>

body {
color: #000;
background: #fff;
}

h1 {
font-weight: normal;
font-size: 140%;
text-align: center;
}

h2 {
font-weight: normal;
font-size: 120%;
text-align: center;
color: maroon;
background: #fff;
}

main {
margin-top: 2em;
margin-left: auto;
margin-right: auto;
width: 80%; /* Here the MAIN container is centered using a trick from combining an explicit "width" with "auto" values for the left and right margins. */
text-align: center; /* Inside MAIN, the SECTION elements are centered too with "text-align: center" --this only works here because SECTIONs are styled as "display: inline-block" (see below). */
}

section {
width: 330px; /* same as the image or maybe slightly larger */
display: inline-block; /* This makes the SECTION elements line up in a row that can be centered, similar to inline text .*/
margin: 0.5em; /* This is a short-hand for all four side margins. */
}


a:link, a:visited, a:active {
text-decoration: none;
color: #300;
background: #fff;
}
a:hover {
color: #f66;
background: #fff
}

p {
font-family: Georgia, serif;
font-size: 18px;
color: #300;
background: #fff;
}

p.date {text-align: center;}
p.description {text-align: left;}
p.button {text-align: right;}

</style>
</head>

<body>

<h1>Choose Your 2021 Iditarod Adventure From One of Our 8 Tours Below</h1>

<main>

<section>
<a href="../totalrace/index.htm">
<h2>21 Day Ultimate Iditarod Experience</h2>
<img src="21day.jpg" width="330" height="221" alt=""></a>
<p class="date">March 02- March 22, 2021</p>
<p class="description">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p class="button"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="Read More"></a></p>
</section>

<section>
<a href="../totalrace/index.htm">
<h2>21 Day Ultimate Iditarod Experience</h2>
<img src="21day.jpg" width="330" height="221" alt=""></a>
<p class="date">March 02- March 22, 2021</p>
<p class="description">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p class="button"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="Read More"></a></p>
</section>

<section>
<a href="../totalrace/index.htm">
<h2>21 Day Ultimate Iditarod Experience</h2>
<img src="21day.jpg" width="330" height="221" alt=""></a>
<p class="date">March 02- March 22, 2021</p>
<p class="description">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p class="button"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="Read More"></a></p>
</section>

</main>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 1 2020, 04:32 AM
Post #20


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



QUOTE(chris montez @ May 1 2020, 03:19 AM) *

Here is the code for the page and on my 21in desktop monitor I get 3 rows with one section in each row instead of 1 row with 3 sections in it:

That sounds normal for a narrow browser window and/or content that's zoomed in. To increase the number of columns in narrow windows, I think you can remove the "width", "margin-left" and "margin-right" from the MAIN element (seems they're not really necessary after all). Without those properties I get two columns in 800px or wider, and three columns in about 1100px.

BTW to help MSIE11 center the content (though it's a rare browser these days) you can style the MAIN element as "display: block".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 5th June 2020 - 06:33 PM