ryanforprez
Coder
Hello I have used flex box before without problems, but with this new code I am using to show a hover when over text I am not sure how to make my body content and body content 1 to be in 2 rows at the top, instead of stacked on each other
CSS:
.bodycontent {
display: flex;
flex-wrap: wrap;
font-size: 25px;
padding-left: 1%;
line-height: 20px;
font-family: Sans;
letter-spacing: 1px;
width: 33%;
padding-bottom: 3px;
flex; 1;
}
.bodycontent1 {
display: flex;
flex-wrap: wrap;
font-size: 25px;
padding-left: 50%;
line-height: 20px;
font-family: Sans;
letter-spacing: 1px;
width: 33%;
padding-bottom: 3px;
flex: 2;
z-index: 9;
}
.images{
width: 33%;
z-index: -9;
padding-left: 10px;
}
HTML:
<div class="bodycontent">
<a href="index.html" id = "ryan" onmouseover="mouseOver()" onmouseout="mouseOut()"><p>Look At This Photograph</p></a>
</div>
<div class="bodycontent">
<a href="index.html" id = "ryan" onmouseover="mouseOver1()" onmouseout="mouseOut1()"><p>1017 A L Y X 9SM</p></a>
</div>
<div class="bodycontent">
<a href="index.html" id = "ryan" onmouseover="mouseOver2()" onmouseout="mouseOut2()"><p>Tendencies</p></a>
</div>
<div class="bodycontent">
<a href="index.html" id = "ryan" onmouseover="mouseOver3()" onmouseout="mouseOut3()"><p>Bean Sans</p></a>
</div>
<div class="bodycontent1">
<a href="index.html" id = "ryan" onmouseover="mouseOver4()" onmouseout="mouseOut4()"><p>Canyon Daze</p></a>
</div>
<div class="bodycontent1">
<a href="index.html" id = "ryan" onmouseover="mouseOver5()" onmouseout="mouseOut5()"><p>Mutiny</p></a>
</div>
<div class="bodycontent1">
<a href="index.html" id = "ryan" onmouseover="mouseOver6()" onmouseout="mouseOut6()"><p>Pill Poppers</p></a>
</div>
<div class="images">
<img id="look" class="lookat" src="Images/lookat-this2.gif">
<img id="alyx" class="alyx" src="Images/thumbalyx.png">
<img id="tend" class="tend" src="Images/thumbtend.png">
<img id="bean" class="bean" src="Images/thumbbean.png">
<img id="daze" class="daze" src="Images/thumbdaze.png">
<img id="mutiny" class="mutiny" src="Images/Mutiny_Ring.png">
<img id="pill" class="pill" src="Images/thumbpp.png">
</div>
<script>
function mouseOver() {
document.getElementById("look").style.display = "block";
}
function mouseOut() {
document.getElementById("look").style.display = "none";
}
function mouseOver1() {
document.getElementById("alyx").style.display = "block";
}
function mouseOut1() {
document.getElementById("alyx").style.display = "none";
}
function mouseOver2() {
document.getElementById("tend").style.display = "block";
}
function mouseOut2() {
document.getElementById("tend").style.display = "none";
}
function mouseOver3() {
document.getElementById("bean").style.display = "block";
}
function mouseOut3() {
document.getElementById("bean").style.display = "none";
}
function mouseOver4() {
document.getElementById("daze").style.display = "block";
}
function mouseOut4() {
document.getElementById("daze").style.display = "none";
}
function mouseOver5() {
document.getElementById("mutiny").style.display = "block";
}
function mouseOut5() {
document.getElementById("mutiny").style.display = "none";
}
function mouseOver6() {
document.getElementById("pill").style.display = "block";
}
function mouseOut6() {
document.getElementById("pill").style.display = "none";
}
\
</script>