Changing CSS from HTML that's in PHP

Question

I made HTML Elements in php by echoing it; I wanted to change the css of that html, but it didn't work. I was wondering if you could do this?

The PHP

                }  else {

                    include("steamauth/SteamConfig.php");
                    include('steamauth/userInfo.php'); //To access the $steamprofile array
                    //Protected content
                    echo '<div class="dropdown">';
                    echo '<a class="dropdown-toggle" href="#">';
                    echo '<img src="'.$steamprofile['avatar'].'" height="30" style="border-radius: 100%;">';
                    echo '</a>';
                    echo '<div class="dropdown-content">';
                    echo '<a class="logout" href="'.$steamauth['logoutpage'].'"</a>';
                    echo '</div>';                  
                    echo '</div>';
                }

The CSS

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown-toggle:hover .dropdown-content {
     display: block;
}

.dropdown-toggle:hover .dropbtn {
    background-color: #3e8e41;
}

remember that css+html is a browser/client-side thing. doesn't matter than the html is generated by php - the browser doesn't see ANY Of the php, just the html that php generated. if the css isn't working with the html, then you're generating incorrect html, or the css is incorrectly written. — Marc B
– Marc B, Commented Apr 19, 2016 at 16:57

Mainone · Accepted Answer · 2016-04-19 17:00:49Z

1

First of all, you have a syntax error in your HTML:

echo '<a class="logout" href="'.$steamauth['logoutpage'].'"</a>';

Should be

echo '<a class="logout" href="'.$steamauth['logoutpage'].'">Logout</a>';

Your CSS is working fine, it just doesn't do anything because:

For .dropdown-content you use display:none. So the link is hidden.

Also, you are trying to display the dropdown-content by doing this:

.dropdown-toggle:hover .dropdown-content {
    display: block;
}

But dropdown-content is no child of dropdown-toggle so this does nothing. Fix it by changing it to this (also, see this jsfiddle):

.dropdown-toggle:hover ~ .dropdown-content {
    display: block;
}

However, with this approach you can't click to the link as you won't be hovering dropdown-toggle anymore. Best option is to place dropdown-content inside dropdown-toggle. See this jsfiddle to see that in action.

The only other CSS that is not about .dropdown-content is .dropdown-toggle:hover .dropbtn, but there is no element with class dropbtn..

edited Apr 19, 2016 at 17:00

answered Apr 19, 2016 at 16:52

Mainone

1081 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Toozyne Over a year ago

Thanks for that :) but it dosen't work? it does not make a drop down and show the logout button?

Toozyne Over a year ago

Thanks :) but i cant indent the elements as its in php?

Collectives™ on Stack Overflow

Changing CSS from HTML that's in PHP

The PHP

The CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The PHP

The CSS

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related