ok so I have a nav tool bar and some href links with pictures instead of just links.
I made it so when you hover over them they get bigger BUT they clip over the nav bar
and I don’t want that. Any help?
Here is a link to the code running in codepen.io and yes I know people don’t like that
but it makes it easy for me and you can’t notice it just in the forum.
Also note this is the legacy project for a portfolio so I steadily update it and it also
uses bootstrap and not flex box or css grid. All the comments in the code are for me
from working on the project on and off and asking people for help.
And if u have a quick answer is there a way to get rid of the blue underlines when
you hover over the href text. I have changed the color of the text but the blue underline is
kinda ugly.
<div class="container-fluid">
<!–– my navigation bar ––>
<nav>
<ul>
<li ><a href="#header-text">Home</a></li>
<li ><a href="#about">About</a></li>
<li ><a href="#music">Music</a></li>
<li ><a href="#contact">Contact</a></li>
</ul>
</nav>
<!––my header ––>
<header class="blue-gradient-down">
<h2 id="header-text" class="text-center h2-margin ">
Barron, V, Brock
</h2>
<p class="text-center reg-p-class">
I have worked in html, css, JavaScript, gml, and java.
</p>
</header>
<main>
<h3 class="text-center projects-h3">
These are some of the projects I have done.
</h3>
<!–– some of my projects and pictures––>
<div class="pic">
<a href="https://github.com/bmansk8/java-game" target="_blank">
<img class="project-pictures" src="https://us.123rf.com/450wm/iunewind/iunewind1504/iunewind150400075/39500459-program-basic-code-.jpg?ver=6" alt="java work">
<p class="text-center pic-text">my java game repo</p>
</a>
</div>
<div class="pic">
<a href="https://github.com/bmansk8/pragmatic" target="_blank">
<img class="project-pictures" src="https://thumb7.shutterstock.com/display_pic_with_logo/253597/230705539/stock-photo-programming-code-abstract-screen-of-software-developer-computer-script-more-similar-in-my-230705539.jpg" alt="ruby project">
<p class="text-center pic-text">my ruby game repo</p>
</a>
</div>
<div class="pic">
<a href="https://codepen.io/bmansk14/pen/MVowzL" target="_blank">
<img class="project-pictures" src="https://www.billboard.com/files/media/john-mayer-aug-2017-billboard-1548.jpg" alt="picture of john mayer">
<p class="text-center pic-text">my tribute page</p>
</a>
</div>
<div class="pic">
<a href="https://codepen.io/bmansk14/pen/KRmpPO" target="_blank">
<img class="project-pictures"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1845118/depositphotos_5573951-stock-photo-html-css-tags.jpg" alt="A free code camp project">
<p class="text-center pic-text">my first free code camp project</p>
</a>
</div>
<p class="width">sample text and stuff
i once had a cat
meow meow
i love memes rarw xd</p>
</main>
<footer>
<div class="silver-background">
<p class="h3-sep text-center">Made by Barron V Brock</p>
</div>
</footer>
</div>
body{
background-color: #D3D3D3;
}
my css is down here
(also have bootstrap running)
.width{
width:10px;
}
.project-pictures{
border-color: gray;
border-width: 2.5px;
border-style: solid;
border-radius: 25%;
width: 400px;
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.pic{
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.pic:hover{
transform: scale(1.1);
}
.pic-text{
color:black;
}
.grey-circle-border{
border: 3px solid gray;
padding: 25px;
border-radius: 50%;
}
.blue-gradient-down{
background: linear-gradient(180deg,#D3D3D3,#00FFFF,#D3D3D3);
}
/*negitive padding is not a thing but margin is, Also
this allows the nav bar to jump just above the object but
there is some styiling things I need to sort out first*/
.nav-bar-bump{
padding:80px;
margin-top:-80px;
margin-bottom:-80px;
}
/* nav is a new thing in html5 for help with nav bars and lets me style only
this ul/li elemeant */
nav ul{
list-style-type: none;
/*list style type dumps the dots */
margin: 0;
padding: 0;
/*The overflow property specifies what should happen if content overflows an element's box. */
overflow: hidden;
background-color: #C0C0C0;
position: fixed;
/*position fixed makes it stay at the spot
on the screen even if you scroll down
*/
top: 0;
width: 100%;
border: 2px solid #000;
}
nav li{
border-right: 2px solid #000000;
float: left;
}
nav li a {
display: block;
color: black;
text-align: center;
/*The CSS padding property is used to generate space around an element's content, inside of any defined borders. */
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #A9A9A9;
color: white;
}