The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Two Columns
TW Allen
post May 4 2021, 12:58 PM
Post #1


Member
***

Group: Members
Posts: 31
Joined: 12-April 21
Member No.: 27,890



I'm pretty sure this is a CSS problem and not an HTML problem, but I could (easily) be wrong.

see: allendesigns.com
and allen.css

I'm trying to avoid using tables. I want the text on the left and the image on the right. Obviously I want the image smaller, but I'm concerned using px instead of % because of the various screen sizes in use. I would rather use something like 40%. But my first problem is that I cannot get the image to appear next to (to the right of) the text. I am trying really hard not to open Dreamweaver.

Thank you
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 4 2021, 03:09 PM
Post #2


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

Group: WDG Moderators
Posts: 19,728
Joined: 9-August 06
Member No.: 6



I don't know why your stuff is spooked all the time. No changes I make to your style sheet takes and I find no problems with it. I had to use inline CSS to make changes show up. I don't think the CSS you have for the two-columns take effect either.

I wouldn't go about it as you've done, but you should see an effect of it and there isn't any. It doesn't work locally when I download the files either. The validators don't find anything major and neither do I.

I'm stumped. wacko.gif



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TW Allen
post May 4 2021, 04:50 PM
Post #3


Member
***

Group: Members
Posts: 31
Joined: 12-April 21
Member No.: 27,890



QUOTE(pandy @ May 4 2021, 03:09 PM) *

I don't know why your stuff is spooked all the time. No changes I make to your style sheet takes and I find no problems with it. I had to use inline CSS to make changes show up. I don't think the CSS you have for the two-columns take effect either.

I wouldn't go about it as you've done, but you should see an effect of it and there isn't any. It doesn't work locally when I download the files either. The validators don't find anything major and neither do I.

I'm stumped. wacko.gif


Thanks for looking at it. This sure isn't helping my confidence in web page building.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TW Allen
post May 4 2021, 05:34 PM
Post #4


Member
***

Group: Members
Posts: 31
Joined: 12-April 21
Member No.: 27,890



QUOTE(pandy @ May 4 2021, 03:09 PM) *

...

I wouldn't go about it as you've done, but...


How would you go about it?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 4 2021, 06:13 PM
Post #5


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

Group: WDG Moderators
Posts: 19,728
Joined: 9-August 06
Member No.: 6



I would place the image before the list, float the image right and let the list be. Possibly I'd place them both in the same DIV.

The DIVs aren't needed at all really. It's just that I still like to follow HTML 4.01 Strict rules and then inline elements can't be contained directly in BODY. But in HTML 5 they can. So basically you can remove both DIVs and float the image directly.

I still don't get why your style sheet doesn't work. It doesn't have to do with the server since I downloaded the lot and the problem is still there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 4 2021, 06:19 PM
Post #6


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

Group: WDG Moderators
Posts: 19,728
Joined: 9-August 06
Member No.: 6



Yes, I do! God almighty, I must be going blind! In the HTML you've given the DIVs the id twoleftcolumn and the id tworightcolumn but in the CSS you refer to them as classes! laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TW Allen
post May 5 2021, 11:22 AM
Post #7


Member
***

Group: Members
Posts: 31
Joined: 12-April 21
Member No.: 27,890



QUOTE(pandy @ May 4 2021, 06:19 PM) *

Yes, I do! God almighty, I must be going blind! In the HTML you've given the DIVs the id twoleftcolumn and the id tworightcolumn but in the CSS you refer to them as classes! laugh.gif


O.K., I don't know the difference/when to use class vs. id but I will study.

I tried it both ways. The image is still inline and does not float right.

Another similar problem: see allendesigns/Projects/20501/20501.html
I'm trying to do a table where sometimes I have one column, sometimes I have two columns and sometimes I have three columns.
I want the table to be centered on the page/screen and I want the items in the two column and three column rows to be centered on the table. I can't seem to get that to work.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 5 2021, 11:35 AM
Post #8


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

Group: WDG Moderators
Posts: 19,728
Joined: 9-August 06
Member No.: 6



There are two main differences. An id can be use one (1) time per page. A class can be used as many times as you want. Say you want some paragraphs to have red text - then class is the way to go. If you want an identifier for a DIV containing what goes at the top of your page you could use id because you aren't likely to want more than one.

The advantage of id is that it has high specificity. It overrides most other selectors.


But in this case the problem isn't your choice, but that you weren't consistent. You used two IDs in the html but refer to them as classes, in the CSS. So your selectors don't match anything because there are no classes with that name.

This selector
CODE
.foo     { color: red }

matches this P or any other element with the same class.
HTML
<p class="foo">...</p>


This selector
CODE
#bar     { color: blue }

matches this P - and hopefully nothing else because you can only use an ID once in a page.
HTML
<p class="bar">...</p>


Since you used IDs in the HTML your CSS selectors should begin with a hash sign, not a dot.

You can read about basic selectors here.
https://htmlhelp.com/reference/css/structure.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TW Allen
post May 5 2021, 12:41 PM
Post #9


Member
***

Group: Members
Posts: 31
Joined: 12-April 21
Member No.: 27,890



QUOTE(pandy @ May 5 2021, 11:35 AM) *

There are two main differences. An id can be use one (1) time per page. A class can be used as many times as you want. Say you want some paragraphs to have red text - then class is the way to go. If you want an identifier for a DIV containing what goes at the top of your page you could use id because you aren't likely to want more than one.

The advantage of id is that it has high specificity. It overrides most other selectors.


But in this case the problem isn't your choice, but that you weren't consistent. You used two IDs in the html but refer to them as classes, in the CSS. So your selectors don't match anything because there are no classes with that name.

This selector
CODE
.foo     { color: red }

matches this P or any other element with the same class.
HTML
<p class="foo">...</p>


This selector
CODE
#bar     { color: blue }

matches this P - and hopefully nothing else because you can only use an ID once in a page.
HTML
<p class="bar">...</p>


O.K., so, since I am using it more than once, I should be using classes with periods, not IDs with hashtags. I thought that's what I originally did.

With that revision, allendesigns.com/index.html works! Thank you for that help!

allendesigns.com/projects/20501/20501.html still doesn't align the way I would like it to. When I use the Validator, I get a warning that reads: A table row was 2 columns wide, which is less than the column count established by the first row (3). Which I get, but I don't know how to fix. If I use colspan="2", then the first two columns are the same width (total) as the left column in a two column row and the right column is the same width as the right column in a two column row.
How do I fix that?
Sorry to be such a pain. Yesterday, I worked 12 hours on a page and a half with only two breaks for a sandwich at lunch and one at dinner. Doing web pages is not my livelyhood (thank God, I would starve), so I need to get this process down so that I don't spend that much time on it instead of billable work. All my project pages are going to look something like this. Also see: allendesigns.com/projects/20402/20402.html to get an idea of what I am doing. 20501 is more complicated because the number of columns in a row change from 1 to 2 to 3. 20402 is much simpler.
Thank you.
Thank you

Since you used IDs in the HTML your CSS selectors should begin with a hash sign, not a dot.

You can read about basic selectors here.
https://htmlhelp.com/reference/css/structure.html

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 5 2021, 12:46 PM
Post #10


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

Group: WDG Moderators
Posts: 19,728
Joined: 9-August 06
Member No.: 6



Good. But what I can see you only used each of them once, so either class or id is OK. You just need to remember what's what. happy.gif

Maybe I wasn't clear. You can have as many IDs as you want, but just one of each, with the same name. So you can have #this, #that and #whatever in the same page but just one instance of each of them.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TW Allen
post May 5 2021, 01:10 PM
Post #11


Member
***

Group: Members
Posts: 31
Joined: 12-April 21
Member No.: 27,890



QUOTE(pandy @ May 5 2021, 12:46 PM) *

Good. But what I can see you only used each of them once, so either class or id is OK. You just need to remember what's what. happy.gif

Maybe I wasn't clear. You can have as many IDs as you want, but just one of each, with the same name. So you can have #this, #that and #whatever in the same page but just one instance of each of them.


No, I got that. I may use twocolumn and threecolumn more than once.

Any ideas on how to fix the 1 column, 2 column, 3 column paradox?

Thank you
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TW Allen
post May 5 2021, 01:48 PM
Post #12


Member
***

Group: Members
Posts: 31
Joined: 12-April 21
Member No.: 27,890



QUOTE(TW Allen @ May 5 2021, 01:10 PM) *

QUOTE(pandy @ May 5 2021, 12:46 PM) *

Good. But what I can see you only used each of them once, so either class or id is OK. You just need to remember what's what. happy.gif

Maybe I wasn't clear. You can have as many IDs as you want, but just one of each, with the same name. So you can have #this, #that and #whatever in the same page but just one instance of each of them.


No, I got that. I may use twocolumn and threecolumn more than once.

Any ideas on how to fix the 1 column, 2 column, 3 column paradox?

Thank you


I THOUGHT I had it figured out, but no.
I thought if I broke the tables into several tables that would solve the problem. But the images appear to be all over the place. In both cases (twocolumn and threecolumn), I want the left column to align right (float:right) and the right column to align left (float: left), but they don't seem to do that. I'm referring to:
allendesigns.com/projects/20501/20501.html and allen.css.
Help!

This post has been edited by TW Allen: May 5 2021, 01:49 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 5 2021, 02:01 PM
Post #13


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

Group: WDG Moderators
Posts: 19,728
Joined: 9-August 06
Member No.: 6



I don't know. What is the paradox?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TW Allen
post May 8 2021, 10:09 AM
Post #14


Member
***

Group: Members
Posts: 31
Joined: 12-April 21
Member No.: 27,890



QUOTE(pandy @ May 5 2021, 02:01 PM) *

I don't know. What is the paradox?


Getting the images, the captions and the tables to center vertically on the page regardless if the row is one column, two columns or three columns.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 8 2021, 02:53 PM
Post #15


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

Group: WDG Moderators
Posts: 19,728
Joined: 9-August 06
Member No.: 6



Found this overview. Haven't read all of it.
https://blog.logrocket.com/13-ways-to-vertical-center/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 23rd June 2021 - 10:28 AM