The layout is mainly in a table with some items centred with CSS.
To remove the tables and keep the horizontal lines, should I be using margins and paddings with in line or is there another way to keep the phrases evenly spaced out ?
I have tried to find this out by googling, and using my CSS book but I cannot spot this one
I don’t want it done, I’d like to try and do it myself, but would like confirmation that I am using the right tools
[FONT=Verdana]Antony, let’s begin by replacing ALL occurrences of " " on the page with an ordinary space, INCLUDING those in the php menu. None seem to be needed. Right now, one table row is overflowing because of those non-breaking spaces between the words; i.e., the words can’t wrap normally.
The tables are inconsistent. All do not contain 5 columns and of course the column widths differ.
This page contains several mismatched tags. Some are orphans and some seem to be needed but are missing their partner.
The biggest problem that I see is that there is no obvious difference between links and ordinary text. Everything looks exactly the same. The user is given no clues.
If you can verbally describe how you want the page to look, I’ll see what I can do.[/FONT]
What I actually want to do is remove the tables, and shall we say style it properly.
I do want to keep the content of the horizontal rows as it is now. I know that the links are not highlighted at present but that’s easy enough to resolve.
It’s the layout that is the problem if I remove the tables.
What I am trying to ascertain is how, using CSS, I can get the phrases to space out equally across the page. Should I be using marging and padding and inline which does seem a bit cumbersome with a lot of guessing and adjustment. Or is there another way.
I’d welcome your efforts of course, and please have a go by all means
You know how to write tables? You know that the <td> tag is not used alone… that it has to be surrounded by <tr> tags which are in turn surrounded by <table> tags. That defines a complete table structure.
In the same way, <li> tags do not stand alone. They are part of a <ul> or <ol>, an unordered list or an ordered list. The structure of a list is
“And the big Back” is a paragraph and is not included in the list item with “were my dad lived”. Since it is apparently a continuation of the sentence about your dad, don’t you think it should be in that list item? I don’t understand what “And the big Back” means, so my assumption may be wrong. If so, please forgive.
[FONT=Verdana]Antony, if someone who is visually impaired attempts to read your page using a screen reader, that item will make no sense at all because the segments are entirely disconnected from one another in the HTML. They will never connect. It is not reasonable (screen reader or not) to try to put the paragraph under the list item using css. That would make less sense than using the old table code.
The content should be arranged in a logical, coherent order, THEN css can be utilized to present it on the page the way you would like it to appear (assuming appropriate HTML structure, of course).[/FONT]
[FONT=Verdana]Antony, hurstpages is rewritten with lists instead of tables.
This HTML page includes the php menu code. I recommend that you replace the code in your php menu with this version. I deleted the " "s in the menu and added “#header” to the top div, plus it’s indented which makes it very easy to read.
The footer code is at a different depth on this page.
There are TWO links to stylesheets in the head. While coding, I called the new code for this page with the second stylesheet link. You can test the same way, or you can simply add the new css to the end of the main stylesheet and delete the second link.
Conspicuously missing from the HTML page are the plethora of classes for every item. Your challenge is to delete the unused classes from the main stylesheet. There could be up to 30.
CHANGES/CHOICES
Headers and Links look different.
The CSS anchor behaviors break most of your rules, but those changes are easily undone.
The anchors are colored and have underlines like conventional HTML anchors, except :hover is white.
If you don’t want users to remember where they have been, you can change the :visited color to blue.
For what it’s worth, I recommend that you keep the blue color and the underline because that’s how older users expect anchors to behave.
Non-anchor text is still black.
Header text is larger than anchor text.
Anchors can have a border around the individual items, the row of items, or no border at all.
“Can you name them?” and “dad’s text” can be left-aligned or centered.
Hope this helps
[/FONT]
h2 {
font-size:1.25em;
text-align:center;
margin:.9em 0 .1em;
}
h3 {
font-size:1.2em;
text-align:center;
padding-bottom:8px;
margin:0;
}
.intro {
display:table;
padding-top:12px;
margin:0 auto;
}
.intro p {
margin:.375em 0px;
}
ul.list {
display:table;
border-spacing:1px 0;
padding:0px;
margin:0 auto;
}
.list.nohead {
margin-top:.9em;
}
.list li {
display:table-cell;
border:1px solid transparent; /* borders around the lists *//* #789, #bcd or transparent */
border-radius:7px;
vertical-align:top;
padding:0px 20px;
margin:0;
}
.list li span {
display:block;
text-align:left;
padding:.1em 0;
}
.list a {
display:inline-block;
padding:2px 0px 3px;
text-decoration:underline;
}
.list a:link {color:#00a;} /* dark blue */
.list a:visited {color:#707;} /* dark purple */
.list a:hover {color:#fff;} /* white */
.list a:active {color:#f00;} /* red */
.footer {
height:76px;
padding-top:24px;
text-align:center;
}
Thanks for this. It must have taken you some time.
I have utilised a lot but not all of it. With so many links on the page, I really think it looks wrong if they are all underlined, so I have switched it so that the headings are underlined and the links not. I just think it looks better. I also didn’t think that the blue and black contrast looked very good either so have moved it to all black. I shall have a think about a suitable font colour later on today.
Can you explain to me what this bit does please ?
.list li {
display:table-cell;
border:1px solid transparent; /* borders around the lists //#789, #bcd or transparent */
border-radius:7px;
vertical-align:top;
padding:0px 20px;
margin:0;
}
Is this what causes the items to be evenly spaced on the line ?
On www.c5d.co.uk, I removed the tables by doing this
Choice of colors are “in the eye of the beholder”. Most important to me is that the code is easy for you to read and modify to suit yourself.
The unordered list is coded to behave like a one-row table, the list items are the table-cells. The UL has no width declared and is centered with margin-left:auto; margin-right:auto;. Without a width, a one-row table will shrink-to-fit the width of its cells. The cells, in turn, conform to their contents. The horizontal padding within the li’s provide the visual spacing between text. If you temporarily replace “transparent” with a color, you will see the borders around the list items in the rows.
In <ul class=“census1841”> you should not need the <br> tags at all. Nothing should appear between the <ul> tags except <li> tags. Even the validator is balking at them.
.ED {margin-left:125px;display:inline; line-height:25px;} DELETE the red property and you should not need the <br> tags.
You should also not need to class every <li>. You can target every <li> by using the same technique shown in my code (did you notice the <li>s do not have classes?).
.census1841 li {... properties ...}
will target its <li>s without requiring you to class them individually.
If you take a web design course, or read a book or two, you will discover even more opportunities for improvement within you web site and learn how to do them.
Sounds like you’re about finished with this project. Been quite an experience, hasn’t it? And fun, too.
I can’t your point about the lines and one line table, but what when there are two columns in the table ?
Maybe a better use would be a table ?
If you have a look at this page with the classes in the <li> so all the second columns line up together, you would probably be horrified !! www.c5d.co.uk/1841.php