Tables not aligning in Expound Theme
-
I am having some trouble trying to format my desired layout. I want to have a logo followed by a series of tables in two columns (one column on the left [float: left] and one column on the right [float: right]). I want the left column to have a column header of “Single Season Leaders” and the right column to have a column header of “Career Leaders”. My tables don’t seem to be floating properly or lining up like I’d prefer. I’m not sure why.
Here is a link to the only page on my site that has what I am trying to accomplish.
http://thebaseballscholar.com/1371-2/
The blog I need help with is: (visible only to logged in users)
-
Hello,
With the way the HTML is set up currently, it is difficult to utilize CSS to modify the Table titles. They do not have any class or id titles to set them apart from other items on the page.
If you remove those titles the two charts align to each other much better. Is it possible to put the titles in the header of the chart instead? If so, give that a try, remove “Single Season Leaders” and ” Career Leaders” put those titles in the table them selves, and see how the alignment looks to you.
If you still want move around the tables to be in more specific locations add this text to your CSS
.single_season_team {
position: relative;
top: 10px;
left: 30px;
}.career_team {
position: relative;
top: 10px;
right: 30px;
}Move around the pixel totals to move each chart into the perfect position.
I hope this helps, let me know if you have any questions.
-
charliescheer,
I can’t get that to work either. I’m pretty new to html/css, can you explain to me how I might use class and/or id to help me accomplish my layout?
I am open to changing the column headers from paragraphs to any other type of element. I just need some guidance.
Thanks.
-
My tables don’t seem to be floating properly or lining up like I’d prefer. I’m not sure why.
If you can explain a bit further how you want thing aligned and positioned, we can see what we can do. Table get quite complicated on responsive designed themes, such as Expound.
-
nwabearsfan,
A real quick explanation of class and id is a way of identifying different types of HTML so that they you can apply CSS to them. Think of class as a group of items that you want to format the same, and think of id as an object that you will format individually from everything else. You can have both a class and a id on one item.
Applying class and id in html looks like this
<p class=”my-class” id=”p1-id”>
<div class=”my-class” id=”div1-id”>
<div class=”my-class” id=”new-id”>You can name the classes and ids anything you want. In this example if you utilized the class “my-class” all of these things would accept the formatting changes. But each one has its own individual ID so they can also be formatted individually.
When writing CSS code you add formatting like this
.my-class {
property: value;
}#p1-id {
property: value;
}#div-id {
property: value
}When defining a class in CSS it is always .class-name and an ID is #id-name
For CSS you don’t even need to add Class and ID! you can just style the individual HTML elements them selves like so
body {
property: value;
}This will change properties for the entire body section of the web page. You can also get more specific, such as
div p p {
property: value;
}This will modify all paragraphs inside a paragraph inside a div container. The reason we add classes and ids is to add created control of what is being formatted, and help prevent mistakes. If you, for instance, formatted all paragraphs to be the color blue, that could really affect the look of your site, but if the paragraph you wanted to change had a individual id you could change just that one paragraph.
If you want to learn more about utilizing CSS and HTML together check out this site.
https://www.codecademy.com/learn/web
I found this to be an excellent tutorial on html and CSS. You can also read through these wordpress CSS support files for more info.
https://en.support.wordpress.com/custom-design/css-basics/
https://en.support.wordpress.com/custom-css/
https://en.support.wordpress.com/custom-design/editing-css/For your site specifically, when you are modifying your page, click over to the HTML view, scroll down to your tables, and give them specific id tags (they already have class tags) should look like this.
<table id=”table-1″>
Give each one a unique id, then return to your CSS page and add this text for each ID#table-1 {
position: relative;
top: 25px;
left: 25px;
}Once you have done this for each of your tables (each ID) you should be able to define a pixel value for how far away from the left and from the top of the section of your site the table is in. Just keep changing the numbers for top and left till it looks just right!
I hope this helps, let me know if you have any questions.
-
I was able to fix my problem by creating one large table and simply nesting the other tables within the larger table.
I still running into two issues I cannot solve.
1. My paragraphs are not aligning with the rest of the table…
2. My header padding (the theme preset, maybe) seems to be throwing off my alignment (row text is not in line with the header, header is slightly to the right).
3. I cannot get my links to be colored properly. I’d like them to be blue for unvisited and purple for visited links.Please reference one of these pages when looking at this…
https://thebaseballscholar.com/teams/arizona-diamondbacks/
https://thebaseballscholar.com/teams/arizona-diamondbacks/batting-leaders/
https://thebaseballscholar.com/teams/arizona-diamondbacks/pitching-leaders/Thanks in advance. This is not as difficult as I thought but sometimes I run into problems I just can’t solve.
-
Hi,
1. My paragraphs are not aligning with the rest of the table…
Looking at this page, https://thebaseballscholar.com/teams/arizona-diamondbacks/ , are you talking about the paragraph above your tables?
2. My header padding (the theme preset, maybe) seems to be throwing off my alignment (row text is not in line with the header, header is slightly to the right).
th { background-color: #fff; padding: 2px 20px 2px 2px !important; text-align: left; }3. I cannot get my links to be colored properly. I’d like them to be blue for unvisited and purple for visited links.
I see you have the visited color for links going purple. To change the non-visited color of the links, add the following.
a { color: #1f56f5; } -
thesacredpath,
Sorry for the confusion.
1.
https://thebaseballscholar.com/teams/arizona-diamondbacks/batting-leaders/
https://thebaseballscholar.com/teams/arizona-diamondbacks/pitching-leaders/In the above links right now the “Career Leaders” (<td><big>Career Leaders</big></td>), “WAR” (<p class=”team_leaders”>WAR</p>), “Batting Average” (<p class=”team_leaders”>Batting Average</p>, etc, and the tables below them are not in a straight vertical line. Is there way to shift the tables so they align with the other two (“Career Leaders”, WAR, etc.)
2.
Can you explain the “!important;” that you added to the end of the padding css?3. Makes sense. Will try later this evening.
Thanks!
-
1. You have a float: right; in table.career_team that is causing the alignment issues. Remove that and it looks like all is good.
2. The !important is a CSS keyword that tells the browser, ‘hey, this is important, apply this instead of anything else’. It is sort of a big CSS hammer, but in general it is a good idea not to use it too much as it can end up causing issues. In this case though, the custom CSS was not overriding the original CSS with the same CSS selector. Typically you can construct a more specific CSS selector, but in this case, when I tried doing that it would still not override, so… the big CSS hammer.
-
thesacredpath,
Jackpot!! Everything looks like I want now. I’m sure I’ll be back with more questions but for now, thank you for all your help!
-
-
Here’s not newest problem: I have several tables containing links but the links are not clickable. I have other links on the same page that are functioning properly. Here is a link to a page…
https://thebaseballscholar.com/ballparks/turner-field/
Thank you in advance.
-
Hi, I’m seeing Atlanta Braves linked in the bottom two sections on the table to the left of the image. I checked all other fields and do not see that any of the other fields are linked at all.
I also checked in the Text tab in the editor for that page and again, I see only the two links there.
If by chance the link code was malformed, the software would have striped it out so that it would not cause the page to blow up.
Can you tell me which other fields are supposed to be linked?
-
In the <p> section of the page their is an Atlanta Braves link as well. If you view the page and try to click the links the only link that I can click is the Atlanta Braves link in the paragraph section. The code in the two table links looks right but when viewing the page they are not clickable.
Am I making sense?
-
While messing with my CSS when I removed the pointer events from the following css:
table {
display: inline-block;
padding: 5px;
border: 10px;
background-color: #ffffff;
width: auto;
pointer-events: none;
}Removing the pointer-events: none; allowed my link to be clickable but now while hovering over that cell it fades to white which I don’t want, which is why I included the pointer-events: none;…
Any way around this?
-
Yeah, pointer-events none would take away the clickability, which is why I was puzzled to not be able to inspect the elements in the table from my web inspector (takes it away there too).
Tables can sometimes be a challenge. I would suggest adding a CSS class to the table
<table class="my-table">
and then do this in the CSS.my-table { pointer-events: none; }then assign a second CSS class to the td elements that have links
<td class="team_two, my-link">
and then you can do this to reverse the pointer event on link cells.my-link { pointer-event: auto; } .my-link:hover { background-color: #d3d3d3; }The above is just working in my head (which is a scary place) so I’ve not tested all this in reality (whatever that is).
Let me know your thoughts.
-
thesacredpath,
Once again, you have solved my problem. Thank you very much. I’d love to say I’m good to go but I’m I’ll encounter another problem beyond my skills soon.
Thanks.
-
-
Looks like I spoke too soon. The solution you offered works for this page (https://thebaseballscholar.com/ballparks/turner-field/) because there is only on <td> in the <tr> I want the link in.
However, when the <tr> has multiple <td> with only one of them having a link it’s back to giving weird colored backgrounds and a generally undesired look. Here is an example:
https://thebaseballscholar.com/teams/arizona-diamondbacks/pitching-leaders/If you hover over any of the “Randy Johnson” links you’ll see the undesired visual.
Any ideas or suggestions?
-
You know, this is getting seriously complex, and tables can be crazy making.
First off, I would have a separate class for rows that sets the background color instead of using the same class as for the cells and that can cause issues.
This is going to take some time to work out. I’m having to start from scratch on things with only one of your nested tables to see what I can do.
- The topic ‘Tables not aligning in Expound Theme’ is closed to new replies.
WordPress.com Forums 