+- Vivarium (https://vivariumrpg.com)
+-- Forum: OOC (https://vivariumrpg.com/forumdisplay.php?fid=1)
+--- Forum: Community (https://vivariumrpg.com/forumdisplay.php?fid=8)
+---- Forum: Art & Coding (https://vivariumrpg.com/forumdisplay.php?fid=10)
+---- Thread: CSS and HTML coding help (/showthread.php?tid=3989)
CSS and HTML coding help - Middy - 4/9/2024
Hello all!
Hoping this is the right place for this <3
I am working on a project for my web class, my last BIG project for the semester, and I am having some issues with my hovering CSS/HTML.
I can't tell if it's even working, but to me it looks like it's popping up UNDERNEATH the image already shown, I've tried some positiong things but it doesn't seem to show up correctly no matter what I am doing.
I can share links and files, Discord is probably the best place to contact me about anything as I can have an easy access record to everything on here and my phone <3
I thank anybody in advance that offers assistance, I've tried many different thing AND I've searched all over google... Nothing seems to be working...
Thanks again <333
RE: CSS and HTML coding help - latrodectus - 4/9/2024
Did you index the boxes that are positioned?
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
RE: CSS and HTML coding help - Middy - 4/9/2024
Hmm... Adding an index didn't seem to help at all :/
I almost wonder If i'm not seeing a hover action at all? Perhaps I am just seeing the highlight of the word popping up?
It's the left nav bar
http://space.wccnet.edu/~tolson5/web110/layouts/layout4/projects.html
So you can see what I'm talking about.
RE: CSS and HTML coding help - Carey - 4/9/2024
So are you wanting the text to Float over/on the image to one side?
RE: CSS and HTML coding help - Middy - 4/9/2024
The link apparently needs a login so I will try to find another way to show the best example of what I mean.
RE: CSS and HTML coding help - Middy - 4/10/2024
OKAY So i just copied the part I am having issues with, I felt the instructions would be more clear lol
When moused over, given focus, or when the navigation item reflects the current page the text color changes to #fff, the background color is #333, and the background image is pressed-arrow.png. The attached video shows the effect when these are moused over.
RE: CSS and HTML coding help - Middy - 4/12/2024
For anyone following lol
Okay, I've narrowed down the issue, I had the image somewhere it shouldn't have been, now I am trying to place a class in a tag without shifting the text in the button.
Here's the snippet I've focused on that seems to be where the problem is
<nav class="float">
<div>
<ul>
<li>
<a href="#"><div> home</div>
</a>
</li>
<li class="button2">
<a href="#">
<div>what we do</div>
</a>
</li>
<li class="button2">
<a href="#">
<div>projects</div>
</a>
</li>
<li class="button2">
<a href="#">
<div>careers</div>
</a>
</li>
<li class="button2">
<a href="">
<div>contact</div>
</a>
</li>
<li class="button2">
<a href="#">
<div> site map</div>
</a>
</li>
</ul>
</div>
</nav>
And the CSS
.button2
{
width: 100px;
background-color: #b2cce5;
padding-left: 30px;
line-height: 2em;
display: block;
margin: 14px;
padding: 0px;
}
nav div ul li a div
{
background: url("../layout4/images/unpressed-arrow.png");
background-repeat: no-repeat;
text-align: center;
color: #fff;
text-indent: 10px;
text-decoration: none;
}
.button2 a:hover
{
width: 100px;
display: block;
text-decoration: none;
color: #fff;
background: url("../layout4/images/pressed-arrow.png");
background-repeat: no-repeat;
}
RE: CSS and HTML coding help - latrodectus - 4/20/2024
I do not see an attached video Middy send me a DM on Discord @ latrodectus
RE: CSS and HTML coding help - Middy - 4/22/2024
I appreciate all the interest here of people willing to help! My project was turned in and I still couldn't figure out the issue (lol) but luckily he didn't dock many points for this.
Thank you again everyone for the interest <3