Table row hovering issue


#21

Hi everyone, i am really sorry i couldn’t make as i promiesed before yesterday due some connectivity problem in my country, but here how i tried to change in my html and css syntax, please tell me what do you thing? Thank you in advance .


#22

In a bit of a rush today but a couple of little pointers.:slight_smile:

Some of these are probably a result of the html code you’ve been handed to work on but in the interests of using CSS and HTML correctly I will mention them anyway.

You have this selector in your CSS:

#header #nav a

Ids are unique to a page. There can only be one ID with the same name on a page. Therefore prefixing #nav with #header does not make it more unique. The browser already knows where #nav is situated because there is only one on the page. Therefore that selector can simply be written as:

#nav a

That halves the work for the browser and avoids specificity issues later.

On the subject of specificity it is best to usurp ids and use classes for all your CSS instead. This keeps them all much easier to control as ids carry more weight than classes and will over-rule any classes set on the element.

Avoid long descendant selectors also. e.g.

#header #nav a

That means every time you want to style that ‘a’ element you have to use the whole path that you originally used. This bloats the css and makes it harder to manage styles later on. Where possible keep rules as succinct as possible. That doesn’t mean avoid descendant selectors but use sparingly and wisely.

I mentioned this before:

body{
  margin: 1%;
  padding: 1%;
}

Vertical margins refer to the width of the element not the available height so a 1% top and bottom margin will vary depending on the width of the window. This means that the space will not look consistent. I would use rem, em or px for vertical margin and padding and not percentages.

Your table rollover is still causing the columns to jiggle and is unacceptable. I gave you answers for this previously so will not mention them here.

The html for your nav is wrong.

  <ul id="nav">
      <a href="index.html">Home</a>

Where are the <li></li> elements?

You could change the ul to nav instead and then you wouldn’t need the list elements. I still prefer to use ul and li elements but that’s just a personal choice.

Still gaps in your attributes:

<div id = "images">

That may break some browsers so remove the gaps. (If you click the down arrow at the top of the html section of the codepen there is an option to tidy the html for the codepen. It will also point out your missing list elements. Note that in the codepen html panel you only need to add the html that is inside the body tags; you don’t add the head stuff in that panel.)

That’s enough for now and I’ll let others jump in with comments.:slight_smile: (Note that there may be differing opinions (which is fine) as there is always more than one way to approach this assuming you know what you are doing.


#23

Hi @PaulOB Thank you for the clear explanation and i will be working on it


#24

Interesting. I thought you were unable to change the HTML.

OK. I wrote the following page based on your earlier html can’t be changed code. I did add a couple of elements in the HTML (<thead>, <tbody> and an opening <div class="outer">) but for the sake of complying with your instructor’s requirements they can be easily removed.

While I prefer to assign css rules to classes, your assignments to elements seem OK to me on this one page. I often do the same thing and then go back and add classes as needed to accommodate additional pages efficiently.

Personally, I avoid the use of IDs except as needed by JavaScript, fragment identifiers, forms, or an infrequent exception. Their “weight” often complicates writing overrides later.

The CSS is at the top of the page. It can be easily separated. Note that your original link is still there but has been commented out.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ultimate Frisbee - Teams</title>
<!--
    <link rel="stylesheet" href="css/hw1.css">
-->
    <style>
body {
    background-color:#fef5e7;
    font-family:Arial, Helvetica, sans-serif;
    padding:1%;
    margin:1%;
}
.outer {
    max-width:1200px;
    margin:0 auto;
}
header {
    overflow:hidden;
    background-color:#7b7d7d;
    padding:20px 10px;
}
header nav {
    float:right;
    color:#000;
    text-align:center;
    padding:12px;
    text-decoration:none;
    font-size:18px; 
    border-radius:25px;
}
header h1 {
    color:#fef5e7;
    font-size:30px;
    font-weight:bold;
    text-align:center;
    margin:.25em auto;
}
header a:hover {
    background-color:#fef5e7;
    color:#000;
}
header a.active {
    background-color:#1E90FF;
    color:#fff;
}
nav a {
    display:inline-block;
    border:2px solid #fbeee6;
    border-radius:25px;
    font-size:25px;
    text-decoration:none;
    padding:15px;
}
main {
    display:table;
    width:100%;
    border-collapse:separate;  /* separate is the default */
}
.photos {
    display:table-cell;
    width:35%;
    border:1px solid#7b7d7d;
    border-right-color:#000;
    background-color:#7b7d7d;
    padding:1.5em;
}
.photos img {
    display:block;
    width:100%;
    height:auto;
    margin-bottom:1.5em;
    border:1px solid #000;
}
.teams {
    display:table-cell;
    border-top:1px solid #000;
    vertical-align:top;
    padding:0 0 0 1em;
}
.teams p {
    font-size:120%;
}
h2 {
    text-align:center;
    text-transform:uppercase;
    margin-top:5%;
}
table {
    width:100%;
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.4;
    padding-top:1%; 
}
th {
    font-size:120%;
    border:1px solid #cbc2b4;
    border:1px solid black;
    border-bottom:5px solid #3498DB;
    border-top-right-radius:8px;
    border-top-left-radius:8px;
    background-color:#7b7d7d;
    padding:1em 0.5em;
}
td {
    opacity:0.5;
    font-weight:bold;
    border:1px solid #cbc2b4;
    background:#bcbcbc;
    padding:0.5em;
}
td,
th {
    text-align:left;
}
td + td,
th + th {
    text-align:center;
}
tr:hover td {
    opacity:1;
}
    </style>
</head>
<body>

<div class="outer">
    <header>
        <h1>Ulimate Frisbee Teams</h1>
        <nav>
            <a href="index.html">Home</a>
            <a href="history.html" class = "active">Teams</a>
            <a href="history.html">History</a>
            <a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
        </nav>
    </header>
    <main>
        <aside class="photos">
            <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_19.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" width="800" height="434" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"> </a>
            <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg" width="800" height="533" alt="Ultimate Frisbee Colorado Cup 2005"></a>
            <a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg" width="1024" height="713" alt="Ultimate Frisbee"></a>
        </aside>
        <section class="teams">
            <h2>College Teams</h2>
            <p>This is not meant to be a comprehensive list of all the teams, just a sampling from around the United States. I focused on the ones that I though had cools names.</p>
            <table>
                <thead>
                    <tr>
                        <th>Team Name</th>
                        <th>Location</th>
                        <th>League Type</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Afterburn - Air Force</td>
                        <td>Colorado</td>
                        <td>Men's</td>
                    </tr>
                    <tr>
                        <td>Cold Front (Bates College)</td>
                        <td>Maine</td>
                        <td>Women's</td>
                    </tr>
                    <tr>
                        <td>Disco Inferno (Brown University)</td>
                        <td>Rhode Island</td>
                        <td>Women's</td>
                    </tr>
                    <tr>
                        <td>Bad Habit (Catholic University)</td>
                        <td>Washington DC</td>
                        <td>Men's</td>
                    </tr>
                    <tr>
                        <td>Jive Turkeys (Dickinson College)</td>
                        <td>Pennsylvania</td>
                        <td>Both</td>
                    </tr>
                    <tr>
                        <td>Knights of the Round Disc(Longwood College)</td>
                        <td>Virginia</td>
                        <td>Men's</td>
                    </tr>
                    <tr>
                        <td>Ninjas (University of Minnesota)</td>
                        <td>Minnesota</td>
                        <td>Women's</td>
                    </tr>
                    <tr>
                        <td>Flying Squirrels (Hendrix College)</td>
                        <td>Arizona</td>
                        <td>Men's</td>
                    </tr>
                    <tr>
                        <td>Superfly (Yale)</td>
                        <td>Connecticut</td>
                        <td>Men's</td>
                    </tr>
                    <tr>
                        <td>Flywheel (University of Michigan</td>
                        <td>Michigan</td>
                        <td>Women's</td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
</div>

</body>
</html>

Because you have demonstrated some different HTML, I intend to write one more version in which I have a little fun just because I can imp-smiling .

EDIT: I just realized that I did not convert your tabs to 4 spaces. So I just replaced the code with 4 spaces replacing tabs. Sorry for the oops.


#25

:joy: Ok For my assignment yes i can’t change the HTML Code, now this is copy for my personal practice, but Thank you for your points as well

For the First HTML Code, i have a question and please correct me if i am wrong because from what i understood is better always to use in our HTMl when our content semantically related to each other if not we can use div right? so isn’t the first HTML content related to each other ?


#26

I’m sorry, I do not quite understand your question. Would you mind asking again?
The code in which post number, please?


#27

in My assignment code before, here the link:


#29

Please forgive my delay. I had to take an obligatory cat nap.

I’m still not positive that I understand your question because you are using the HTML supplied by your instructor. However, I’ll give it a try. Please don’t hesitate to let me know if I am off base.

How the HTML is framed is not rigidly etched in stone. It is common for a simple layout to have a <header> which contains page introductory data such as a title and menu, a <main> section for the content, and a <footer> for whatever one wishes to place at the bottom of the page. The <main> portion can be subdivided into <section>s. The <aside> element is used for supplementary information that is not essential to the <main> content. Your use of the <aside> and <section> elements seems appropriate to me.

And you are correct to say that if a semantic element is not available for a particular job, then using a generic <div> would probably be OK assuming a block element is needed. It would not feel comfortable answering your question too firmly because everything depends on context.

<aside>
You should be saving bookmarks to authoritative resources as you learn about them! They will be your best guides in the future. teacher
</aside>

Now, I would like for you to give me some feedback, please. If you have not done so, please copy my code from post #24 to a new file, give that file an html suffix and double-click that file to open it in your browser. Observe how it behaves and tell me what you think of the way the page behaves. Remember that the 3 tags that I added can be deleted and the HTML should then be the same as your teacher’s or very close to it.

If someone else picks up this topic while I am away, your feedback will be helpful to them even if they use different CSS.

I haven’t written my next version yet, but it won’t take long. My focus will be the table and will show how to get what your teacher wants by using bad code. :eek: :smiling_imp: (yes, I have to change the HTML a little).

In the meanwhile, you need to be deciding how you want the images to be handled at the narrowest (smartphone or narrow tablet) widths. That will likely require a media query.


#30

Hi @ronpat, i am sorry for the late reply. You actually understood my question and you answered perfectly . I have just used your code from #24 it behave totally different in my browser the layout look like shrink . please check the photo, why this happened especially you didn’t change much in the css coding please? or did i miss something?

!


#31

This is the capture of my work


#32

It looks like you might have missed a couple of styles or I might have assumed too much. Can you please include the HTML and CSS that is used in your screen shot in your next post?

You can drag and drop the HTML and CSS files into the post.

Being able to look at the code helps me spot mistakes on your part and my part and avoid bad guesses on my part :slight_smile:

Thank you cat-sm


#34

Sorry @ronpot, i posted up above my old code before , here is the final one:


#35

salma_817,

This cannot be your final code. Your latest, perhaps, but not your final. I must ask: (1) Why have you changed from the semantically appropriate elements to divs with IDs? (2) At least two of us have advised against the casual use of IDs yet the IDs are still being used. (3) We have also advised to remove the spaces around the equals signs which has not been done.

In addition, the unordered lists in the menu are not valid. In fact, your code now shows several validation errors. Did you test your code in the validator as you have been advised to do?

How do you write your code? Do you use a text editor? or do you use an IDE? or do you write everything on codepen? I am asking because you seem to have changed your teacher’s requirements which you said could not be changed.

I do not understand your actions. Whose advice are your following?

Finally if the problem that I am supposed to see is the difference between your code and mine… use mine and throw yours away because mine is valid and it almost follows your original requirements. I cannot userstand the changes you are making if you do not explain them.


#36

Hi @ronpat, Yes you are right, i meant to say latest not final(Excuse my poor English please)

I used div with id because i have 4 pages that should be with the same header and nav style. is my action style wrong please?
Note:
for the other 4 pages, i didn’t know how to uploaded in codepen so you can see them when you click on the buttons menu above.
i did the change in my sublime editor and i forget to validate my code(which will not happened again for sure)
would you check my HTML code again please and tell me what do you think please?
Also am using my assignment code for my personal practice because i wanna now what mistakes i may make and what i should avoid it in the future. Thank you for your patience and help.


#37

Very astute quote, salma_817. I like it. :slightly_smiling_face: . If that is my only typo in that post, then I’m improving. :lol:

Your English seems OK to me, although “final” did concern me and I explained why. It is much better than “poor”. On the other hand, you do not express your thoughts very completely. Perhaps you could say more to link them together.

My problem at the moment is that your requirements seem to have changed without explanation.

But you said that you could not change the HTML that you showed us in your first codePen.

When I cannot “connect the dots” or follow a person’s logic (thinking,path,goal), I usually ask questions - which I have - but most of my questions have not been addressed. I even tried numbering some of the questions but that was only marginally helpful.

Tell us again what your teacher requires so we can help you meet those requirements. You said that the HTML could not be changed from the semantic elements and you enumerated the behaviors needed in the CSS. I have been working with/around those requirements. You have not mentioned your other pages before now, but I assumed they would be written later after your were satisfied with the first page. It’s OK that they are already started or written but it does not make sense that the head of the page was written with code that is different from your original codePen. I believe that your goal is that they should all be the same in which case you could use shared CSS. The better method is the one that you showed us first. However there may be something about the div method that you prefer. If so, you need to explain the behavior (not the code) that you prefer so we can help you write code that matches the behavior. Don’t hesitate to be picky! agree

I am in time zone GMT -5 (Eastern USA). What time zone are you in and what hours are you usually available to post on this forum. I can probably adjust my schedule to match yours so we can exchange more than one post every two days.

How to post code is explained early in our posting gudelines. If you have not read them already, please take some time and do so now. They are well written and very helpful.

It is explained that one can attach an image to a post by dragging and dropping the image into the post. Athough we request that code be posted as a visible “working page”, one can also drag and drop an HTML file and a CSS file into a post. So that is a choice you can make rather than writing codePens. That means that you can attach one or more of the other pages into a post and they will work the same for us as they do for you.

Moving on…

That statement does not explain why the code is different from your teacher’s requirements. I am still puzzled.

I don’t know either.
From codePen, I always copy the code to a file that I can open on my PC so I can troubleshoot it, so if you attach files rather than codePens it saves me a bit of time.

Sublime is a popular editor. Good choice for writing code.

Which code?
Change IDs to classNames except where IDs are needed (see post #24). Add “thead” and “tbody” to table. Consider adding div.outer (if you don’t know why, ASK.) Delete spaces around equals signs.
You have been given advice that you have not followed so I do not know what your priorities are. I cannot confidently check your code until I know how you want the page to look and behave. Please compare my recent post to yours in your browser and describe in detail the “look” that you want to see, THEN we can talk about code. Be sure to change the width of your browser window from wide to narrow as one of your tests. If your teacher does not require your page to be responsive, please state that, otherwise we expect responsive to be the norm nowadays.


#38

*/ Hi @ronpat, i already finished my assignment long time ago, but am using the same assignment code that i shared here before for my personal practice gain, as i understood from @PaulOB in previous conversation that my HTML code assignment is bad and It can be written in a better syntax than how it done in my assignment. That’s why i don’t know if you remember or maybe you miss to read that part, i asked you if it’s ok to i try re-write or to do some modification in my HTML code that still can achieved my assignment style and share it with all of you So you can tell me according to your experience if the few change i made created better version or not. This have nothing to do with my assignment now but yes i used the same copy of it. The other page where included since day 0 but when i made my copy i didn’t know how to upload them in code-pen so they will appear when someone click on my links .
Kindly find the first attached file
teams.html (3.4 KB)

second fileindex.html (2.5 KB)

Third file history.html (2.4 KB)

The CSS attached File style.css (3.2 KB)

I am at the follwoing time zone
Central Africa Time
Time zone in Sudan (GMT+2), it’s 6:47 pm in my place right now, i think you are morning time right now . If am not wrong


#39

It’s about midday (noon) here, but my time is not important. Your time is. When do you usually have free time to use the forums and work on your code? I can adjust my schedule to be available when the time is good for you.

I have read all of the posts in this thread. If there are other topics, I may not have read them, though.

I have not looked at your attached files yet. I must go out for awhile now, but I will look at them when I return.

In the meanwhile, PLEASE:
In post #30 you included screen shots comparing my code and yours. Please describe what you like and what you dislike in the two files. I am looking for more guidance from you before writing more code.

Cheers


#40

@ronpat, Ok Cool, what day are you free please? what about 7:00 pm in my time? pardon me now, i will answer you tomorrow about your code and my code . Thank you again and have a good day