![]() |
![]() ![]() |
![]() |
TW Allen |
![]()
Post
#1
|
Member ![]() ![]() ![]() Group: Members Posts: 42 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 |
pandy |
![]()
Post
#2
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,731 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. ![]() |
TW Allen |
![]()
Post
#3
|
Member ![]() ![]() ![]() Group: Members Posts: 42 Joined: 12-April 21 Member No.: 27,890 ![]() |
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. ![]() Thanks for looking at it. This sure isn't helping my confidence in web page building. |
TW Allen |
![]()
Post
#4
|
Member ![]() ![]() ![]() Group: Members Posts: 42 Joined: 12-April 21 Member No.: 27,890 ![]() |
|
pandy |
![]()
Post
#5
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,731 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. |
pandy |
![]()
Post
#6
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,731 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!
![]() |
TW Allen |
![]()
Post
#7
|
Member ![]() ![]() ![]() Group: Members Posts: 42 Joined: 12-April 21 Member No.: 27,890 ![]() |
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! ![]() 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. |
pandy |
![]()
Post
#8
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,731 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 id="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 |
TW Allen |
![]()
Post
#9
|
Member ![]() ![]() ![]() Group: Members Posts: 42 Joined: 12-April 21 Member No.: 27,890 ![]() |
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 |
pandy |
![]()
Post
#10
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,731 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.
![]() 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. |
TW Allen |
![]()
Post
#11
|
Member ![]() ![]() ![]() Group: Members Posts: 42 Joined: 12-April 21 Member No.: 27,890 ![]() |
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. ![]() 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 |
TW Allen |
![]()
Post
#12
|
Member ![]() ![]() ![]() Group: Members Posts: 42 Joined: 12-April 21 Member No.: 27,890 ![]() |
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. ![]() 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 |
pandy |
![]()
Post
#13
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 ![]() |
I don't know. What is the paradox?
|
TW Allen |
![]()
Post
#14
|
Member ![]() ![]() ![]() Group: Members Posts: 42 Joined: 12-April 21 Member No.: 27,890 ![]() |
|
pandy |
![]()
Post
#15
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,731 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/ |
![]() ![]() |
![]() |
Lo-Fi Version | Time is now: 26th April 2024 - 11:29 AM |