I have this website with a nav bar. at the moment the nav text (theory, More) gets bold the on hover, however i have been trying to make the text scale/grow in a smooth transition as it hovers. But the text only seems to bolden at the moment and i cannot get the text to scale up
may someone look over my code and note my mistake
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="Developer" content="Alejandro Muratalla / ElitePower">
<title>Power Training | Home</title>
<style>
body{
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
nav{
float: right;
margin-top: 10px;
}
/* Header */
header{
background: #0D98BA;
color: #FFD700;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF4500 3px solid;
}
#a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: all .1s ease-in-out
}
header ul{
margin: 0;
padding: 0;
}
header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding{
float: left;
}
header #branding h1{
margin: 0;
}
header .highlight, header .current a{
color: #000000;
font-weight: bold;
}
#a:hover{
font-weight: bold;
transform: scale(1.5);
}
/* Showcase */
#showcase{
min-height: 400px;
}
</style>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="images" style="max-width:500px">
<img class="slide1" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
<a>'s default display is inline. transform cannot be applied unless display is reset to value which allow sizing. (or formatting context). You can reset it to inline-block.
body {
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
float: right;
margin-top: 10px;
}
/* Header */
header {
background: #0d98ba;
color: #ffd700;
padding-top: 30px;
min-height: 70px;
border-bottom: #ff4500 3px solid;
}
.a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: all 0.1s ease-in-out;
display:inline-block;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header .highlight,
header .current a {
color: #000000;
font-weight: bold;
display: inline-block;
}
.a:hover {
font-weight: bold;
transform: scale(1.5);
}
/* Showcase */
#showcase {
min-height: 400px;
}
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="images" style="max-width:500px">
<img class="slide1" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
Note: I turned the three id="a" into class="a"
Related
Somewhat like a ebay search page like this
enter image description here
in my code, only the first listed item looks just like the image above, but every picture after floats to the right side of the page, but the text stays on left.
I want it to look like this:
[]-list
[] -list
[] -list
with the code I have, the image in the second div is pushed to the right side. I want all images and text aligned underneath each other to look somewhat like the ebay layout
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<html>
<style>
*, html {
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
color: #000;
font-size: 30px;
font-family: Arial;
}
.clear {
clear: both
}
product_img
{
display:flex;
40px
}
.businessInfo
{
float: left;
margin-left: 12px;
width: 552px;
text-align: left;
}
.businessName
{
float: left;
margin-top: 2px;
text-align: left;
color: #ffffff ;
}
.sitePromotion
{
float: left;
margin-top: 6px;
font-size: 14px;
color: #ffffff ;
}
.baseLocation{
float: left;
font-size: 15px;
background: #ffffff ;
}
.location {
float: left;
font-size: 15px;
color: #ffffff ;
}
.contactInfo {
float: left;
margin-top: 4px;
font-size: 15px;
color: #ffffff ;
}
.connectInfo {
float: left;
margin-top: 10px;
font-size: 15px;
color: #ffffff ;
}
.moreConnectInfo {
float: left;
margin-top: 6px;
font-size: 15px;
color: #ffffff;
}
</style>
</head>
<body>
<body style="background-color:black;">
<h1 style= "color:grey;font-size:50px;">dollas</h1>
<h2 style="color:white; font-size:25px;;">North Jersey</h2>
<hr>
<!-- business 2-->
<div class="product_img">
<img alt="KB's BBQ SMOKEHOUSE - IRVINGTON, NJ 07111 (Menu & Order
Online)" class="n3VNCb"
src="https://menufyproduction.imgix.net/637255010998628698+201756.png?
auto=compress,format&h=1080&w=1920&fit=max" data-noaft="1"
jsname="HiaYvf" jsaction="load:XAeZkd;" style="width: 200px; height:
150px; margin: 0px;">
</div>
</div>
<div class="businessInfo">
<div class="businessName">KB's BBQ Smokehouse</div>
<div class="clear"></div>
<div class="location">Location: 1077 Stuyvesant Ave, Irvington, NJ
07111</div>
<div class="clear"></div>
<div class="contactInfo">Phone: (973) 982-6528</div>
<div class="clear"></div>
<div class="connectInfo">Website:https://kbbbqsmokehouse.com/ </div>
<div class="clear"></div>
</div>
<!-- business 3-->
<div class="product_img">
<img data-visualcompletion="media-vc-image" alt="May be an image of 1 person
and text that says 'Ard Bakery Arielitas'" class="ji94ytn4 r9f5tntg d2edcug0
r0294ipz" referrerpolicy="origin-when-cross-origin"
src="https://scontent.fewr1-
5.fna.fbcdn.net/v/t31.18172-
8/26198629_1997772167107826_8453467514730795477_o.jpg?_nc_cat=105&ccb=1-
3&_nc_sid=09cbfe&_nc_ohc=1EVQdCkudYUAX-
_oK4D&_nc_ht=scontent.fewr1-
5.fna&oh=db53b58b37272d072239b01f939d602f&oe=60B6C98F" style="width:
200px; height: 150px; margin-left: -300px;">
</div>
</div>
<div class="businessInfo">
<div class="businessName">Arielita's Bakery</div>
<div class="clear"></div>
<div class="location">Location:Montclair, NJ</div>
<div class="clear"></div>
<div class="contactInfo">To order:https://www.arielitasbakery.com/menu
</div>
<div class="clear"></div>
<div class="connectInfo">Website:https://www.arielitasbakery.com/menu
</div>
<div class="clear"></div>
</div>
Check this below snippet. Its just an skeleton. It will help you to build such layout.
.product_wrapper {
}
.product_loop {
display : flex;
width: 100%;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.product_image { background : #ccc; flex : 0 0 20%; height: 150px }
.product_content { flex : 1; padding: 10px }
<div class="product_wrapper">
<div class="product_loop">
<div class="product_image">
<img>
</div>
<div class="product_content">
<h3>Product Title</h3>
<p>Product content goes here</p>
</div>
</div>
<div class="product_loop">
<div class="product_image">
<img>
</div>
<div class="product_content">
<h3>Product Title</h3>
<p>Product content goes here</p>
</div>
</div>
</div>
I have added 9 cards to the website I'm making and I'm having two issues.
(1) How do I center the 9 cards? As it is more to the left and not centered to the screen.
(2) How do I remove the scroll bar? It seems like the spacing between the top and bottom cards and also below the bottom cards is a lot therefore its moving down and has a scroll bar.
Website Image
<!DOCTYPE html>
<html>
<head>
<title>Discover | Sweeties</title>
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
<style>
.navigation{
padding-top:30px;
padding-bottom:30px;
position:absolute;
top:0;
width:100%;
z-index:1001;
}
.navbar-right{
float:right;
padding-right:10%;
}
.navbar-right a{
text-decoration:none;
padding:10px;
color: #FFFFFF;
font-family:Calibri;
font-weight:900;
font-size: 25px;
}
.navbar-right a:hover{
text-decoration:underline;
}
.navbar-logo{
padding-left:10%;
font-family:Calibri;
font-size:30px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
.video-container {
z-index: -100;
width:100%;
height:75%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
#video-bg{
width:100%;
}
.portfolio-section{
margin-top:50%;
}
.tagline-left{
float:left;
width:50%;
text-align:center;
}
.tagline-right{
float:right;
width:50%;
text-align:center;
}
.tagline-video{
width:75%;
}
.tagline-right-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:17%;
font-family:Calibri;
color:#FFFFFF;
width:290px;
font-size:40px;
}
.tagline-left-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:11%;
font-family:Calibri;
color:#fff;
width:375px;
font-size:40px;
}
</style>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0,0,0,0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
</style>
</head>
<body>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="Videos/beach1.mp4" type="video/mp4">
</video>
</div>
</body>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Calibri;
}
.main{
margin: 3%;
}
.card{
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img{
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title{
text-align: center;
padding: 20px;
}
h1{
font-size: 40px;
}
h2{
font-size: 22px;
}
.des{
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button{
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding:10px;
}
button:hover{
background-color: black;
color: white;
transition: .5s;
cursor: pointer;
}
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.20);
}
.card:hover img {
transform: scale(1);
}
</style>
<body>
<div class="main">
<div class="card">
<div class="image">
<img src="Images/rakiraki.jpg">
</div>
<div class="title">
<h1>
Rakiraki</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Lautoka.jpg">
</div>
<div class="title">
<h1>
Lautoka</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/nadi.jpg">
</div>
<div class="title">
<h1>
Nadi </h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/sigatoka.jpg">
</div>
<div class="title">
<h1>
Sigatoka</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2 >
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/ph.jpg">
</div>
<div class="title">
<h1>
Pacific Harbour</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/suva.jpg">
</div>
<div class="title">
<h1>
Suva</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Labasa.jpg">
</div>
<div class="title">
<h1>
Labasa</h1>
</div>
<div class="des">
<h2> KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/savusavu.jpg">
</div>
<div class="title">
<h1>
Savusavu</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The best approach that I would suggest is flex.
I have added some custom style to yoy existing code just to make it fine in flex.
Here is my additional css added.
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
Your working fiddle.
.navigation {
padding-top: 30px;
padding-bottom: 30px;
/* position: absolute;
top: 0; */
width: 100%;
z-index: 1001;
}
.navbar-right {
float: right;
padding-right: 10%;
}
.navbar-right a {
text-decoration: none;
padding: 10px;
color: #ffffff;
font-family: Calibri;
font-weight: 900;
font-size: 25px;
}
.navbar-right a:hover {
text-decoration: underline;
}
.navbar-logo {
padding-left: 10%;
font-family: Calibri;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
#video-bg {
width: 100%;
}
.portfolio-section {
margin-top: 50%;
}
.tagline-left {
float: left;
width: 50%;
text-align: center;
}
.tagline-right {
float: right;
width: 50%;
text-align: center;
}
.tagline-video {
width: 75%;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Calibri;
}
.main {
/* Commented */
/* margin: 3%; */
}
.card {
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img {
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title {
text-align: center;
padding: 20px;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 22px;
}
.des {
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button {
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding: 10px;
}
button:hover {
background-color: black;
color: white;
transition: 0.5s;
cursor: pointer;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.2);
}
.card:hover img {
transform: scale(1);
}
/* Custom styles */
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
body {
background: cadetblue;
}
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
</div>
</header>
<div class="background-wrap">
<video
id="video-bg-elem"
preload="auto"
autoplay="true"
loop="loop"
muted="muted"
>
<source src="https://youtu.be/ujKVJcwbpRo" type="video/mp4" />
</video>
</div>
<div class="main">
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Rakiraki
</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button
onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'"
>
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Lautoka
</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Nadi
</h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Sigatoka
</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Pacific Harbour
</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Suva
</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Labasa
</h1>
</div>
<div class="des">
<h2>KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Savusavu
</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
</div>
I am trying to position the "selected" hero on the right to be aligned with the gallery of heroes to the left so I can add information and a button below the selected hero later on. This page is only missing a paragraph of text that will go below both the gallery; The selected hero and a confirmation button that will go under the hero portrait on the right. Would it be easier to contain all of it in one huge section? Or am I making this too complicated?
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time{
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow:hidden;
background-color: black;
}
.navbar a{
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover{
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
#heroList{
width: 1000px;
margin: 0 50px;
margin-top: 200px;
}
.heroes{
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames{
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color:black;
}
.heroes img{
width: 175px;
height: 175px;
}
#chosenHero{
width: auto;
margin: 0 50px;
margin-top: 50px;
}
.myHero{
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
If you cannot use grid system, try following CSS modifications:
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time {
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow: hidden;
background-color: black;
}
.navbar a {
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
.navbar:after {
clear: both;
content: "";
display: block;
}
#heroList {
width: calc(100% - 200px);
float: left;
}
.heroes {
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames {
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color: black;
}
.heroes img {
width: 175px;
height: 175px;
}
#chosenHero {
width: 200px;
float: left;
}
.myHero {
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
This would be the proper way of doing it.
https://i.imgur.com/xIm2fbV.png
I am trying to get my webpage to be responsive. It is a 3 column layout, and every time I check it in a mobile and tablet emulator it just looks horrible. I am new to html5 so I am not sure what I am doing and I have been trying to figure this out for a while now and have come to a brick wall. Any suggestions would be amazing!
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
color: #000000;
background-color: #969696;
margin: 0;
}
/* STRUCTURE */
.wrapper {
max-width: 1240px;
width: 100%;
margin: 0px auto;
}
header {
background-color: #000000;
text-align: right;
color: #FFFFFF;
height: 120px;
padding: 10px;
border-bottom: 2px solid;
}
.columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5px 0;
}
.column {
flex: 1;
margin: 0px;
padding: 20px;
background-color: #FFFFFF;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
footer {
padding: 0 15px;
}
#navigation {
height: 60px;
font-size: 20px;
font-family: Verdana;
font-weight: bold;
text-align: center;
background-color: #000000;
}
#navigation ul {
height: auto;
padding: 9px 0px;
margin: 0px;
}
#navigation li {
display: inline;
padding: 16px;
}
#navigation a {
text-decoration: none;
color: #FFFFFF;
}
#rose {
overflow: hidden;
}
#newDiv {
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
margin-left: 80px;
margin-right: 80px;
}
#media screen and (max-width: 980px) {
.columns .column {
margin-bottom: 5px;
flex-basis: 40%;
&:nth-last-child(2) {
margin-right: 0;
}
&:last-child {
flex-basis: 100%;
margin: 0;
}
}
}
#media screen and (max-width: 680px) {
.columns .column {
flex-basis: 100%;
margin: 0 0 5px 0;
}
}
<!DOCTYPE html >
<html lang="en">
<head>
<title>St. Pete Flower Market</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new3.css">
<!-- [if it IE 9]>
<script src="html5shiv.js>
</script>
<![endif]-->
</head>
<div class="wrapper">
<header> <img src="logo.jpg" alt="flower logo" style="float:left;" height="105" ;>
<h1>St. Pete Flower Market</h1>
</header>
<nav>
<div id="navigation">
<ul>
<li><a class="navigation" href="index.html">Home</a></li>
<li><a class="navigation" href="contact.html">Contact Us</a></li>
<li><a class="navigation" href="occasions.html">Occasions</a></li>
<li><a class="navigation" href="flowers.html">Flowers</a></li>
<li><a class="navigation" href="giftbaskets.html">Gift Baskets</a></li>
<li><a class="navigation" href="deals.html">Deals</a></li>
<li><a class="navigation" href="aboutus.html">About Us</a></li>
</ul>
</div>
</nav>
<section class="columns">
<div class="column">
<h2>1st Content Area</h2>
</div>
<div class="column">
<div id="rose">
<img src="roses.jpg" alt="roses" height="300">
</div>
<div id="newDiv">
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" alt="sunflowers" height="300" width="300">
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" alt="flowerdeals" height="300" width="300">
<p>This is image 2</p>
</div>
</div>
<div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" alt="sunflowers" height="300" width="300">
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" alt="flowerdeals" height="300" width="300">
<p>This is image 2</p>
</div>
</div>
</div>
</div>
<div class="column">
<h2>3rd Content Area</h2>
</div>
</section>
<footer>
<h3>Footer</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</footer>
</div>
</html>
So I have 3 images wrapped inside a div, and I've used both float: left; and "pull-left" to try and get the images to align next to each other, but they won't for some reason. They were aligned side by side before I added a jQuery cycle plugin to make the images into individual slide shows that fade in/out images (in the #Slideshow div), after I added the script they stacked on top of each other, I have no idea how to fix this.
/*style sheet*/
#Backg
{
background-image: url("Graphics/ravenna.png");
background-repeat: repeat;
height: 100%;
}
/*Biggest Container and Pattern Backg*/
#PrimaryC {
padding: 10px;
background-image: url("Graphics/paper_fibers.png");
background-repeat: repeat;
height: 100%;
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}
#Header /*Retro Games Arcade Logo*/
{
height: 100px;
width: 100%;
background-image: url("Graphics/SiteLogo.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.Content /*Holds Arcade Photo and Text in 2 columns*/
{
width: 100%;
height: 500px;
background-color: white;
resize: both;
border-radius: 0px 25px 25px 25px;
border: 1px solid white;
}
#HeaderText /*Title*/
{
font-family:'Rokkitt', serif;
font-size: 35px;
color: black;
text-decoration: underline;
padding-right: 20px;
}
#RegularText /*Main Text Body*/
{
font-family:'Rokkitt', serif;
font-size: 18px;
padding-right: 20px;
}
.dropcap
{ float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}
#Arcade /*Arcade Photo*/
{
width: 100%;
}
/*Navigational Buttons*/
.post-content
{
font-family:'Didact Gothic', sans-serif;
font-size: 150%; /*20px*/
top: 120px;
left:15px;
position: relative;
letter-spacing: 2px;
}
#RightRow
{
Position: relative;
}
.centerBlock
{
position: relative;
top: -200px;
padding-left: 10px;
}
#slideshow img
{
float: left;
margin-right: 25px;
margin: 0;
position: relative;
}
#slideshow
{
margin:auto;
}
#keyframes slideshow
{
0% {background-color: white;]
50% {background-color: red;}
}
}
.col-md-12
{
position: relative;
}
.footer-basic-centered{
background-color: #683025;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: center;
font: normal 18px sans-serif;
box-shadow: 0 5px 5px -5px black;
padding: 15px;
margin-top: 80px;
}
.footer-basic-centered .footer-company-motto{
color: white;
font-size: 24px;
margin: 0;
font-family:'Rokkitt', serif;
}
.footer-basic-centered .footer-company-name{
color: #8f9296;
font-size: 14px;
margin: 0;
}
.footer-basic-centered .footer-links{
list-style: none;
font-weight: bold;
color: #ffffff;
padding: 35px 0 23px;
margin: 0;
font-family: 'Didact Gothic', sans-serif;
}
.footer-basic-centered .footer-links a{
display:inline-block;
text-decoration: none;
color: inherit;
}
#media (max-width: 600px) {
.footer-basic-centered{
padding: 35px;
}
.footer-basic-centered .footer-company-motto{
font-size: 18px;
}
.footer-basic-centered .footer-company-name{
font-size: 12px;
}
.footer-basic-centered .footer-links{
font-size: 14px;
padding: 25px 0 20px;
}
.footer-basic-centered .footer-links a{
line-height: 1.8;
}
}
/*Desktop*/
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 22px;
position: relative;
top: -360px;
}
/*Tablet Devices*/
#media (min-width: 768px) and (max-width: 969px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
top: -270px;
font-size: 50%;
}
}
/*Mobile Devices*/
#media(max-width: 767px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
font-size: 20%;
top: auto;
}
.post-content
{
top: 20px;
font-size: 80px;
}
.Content
{
height: 600px;
}
}
/*1200*/
#media (min-width: 970px) and (max-width: 1119px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 25px;
position: relative;
top: -310px;
font-size: 60%;
}}
}
<!DOCTYPE html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="Styles.css" />
<!--Main Style Sheet-->
<link rel="stylesheet" href="bootstrap.min.css" />
<!--Bootstrap Style Sheet-->
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Didact+Gothic' rel='stylesheet' type='text/css' />
<!--Fonts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript"> <!--Image Fade Script-->
$(document).ready(function() {
$('.Slot').cycle({
fx: 'fade'
});
});
</script>
<title>Retro Games Arcade</title>
</head>
<body>
<div id="Backg">
<div id="PrimaryC" class="container">
<!--Primary Container-->
<div id="Header">
<!--Site Logo-->
</div>
<div class="Content">
<!--Main Content Container-->
<div class="row">
<!--Row 1-->
<div class="col-sm-6">
<!--Left Col-->
<img src="Graphics/Arcade.png" id="Arcade" class="hidden-xs" />
<div class="caption post-content">
<div id="Home">home</div>
<!--Home Button-->
<div id="Stock">stock</div>
<!--Stock Button-->
<div id="AboutUs">about us</div>
<!--About Us Button-->
<div id="ContactUs">contact us</div>
<!--Contact Us Button-->
</div>
</div>
<div class="col-sm-6" id="RightRow">
<!--RightCol-->
<p id="HeaderText">Welcome to the Retro Games Arcade</p>
<p id="RegularText">
<span class="dropcap">H</span>ere you can find a treasure of Retro Video Games, sell your unwanted hardware/software;
and also have our professional team repair any damaged hand-held gaming devices.
<br />
<br />We have one of the biggest collectecions of Retro Video Games in the UK, and have genres ranging from Puzzle
Games and Platformers, to Roleplaying Games and Stratgey Games.
<br />
<br />Our staff have over 100 years combined experience of playing retro video games and a professional certified
Nintendo technician, so if you want a recommendation for your
<br />sons birthday present, or you need to get your old GameCube repaired; we are your guys.</p>
</div>
</div>
<div class="col-md-6">
<div id="slideshow" class="centerBlock hidden-xs hidden-sm hidden-md">
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG1.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L1.png" width="158" height="162">
</div>
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG2.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L2.png" width="158" height="162">
</div>
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG3.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L3.png" width="158" height="162">
</div>
</div>
</div>
</div>
<div class="row">
<!--Row 3-->
<div class="col-md-12">
<img src="Graphics/Aracde3.png" id="Vector" class="img-responsive center-block" class="hidden-xs" />
</div>
</div>
</div>
</div>
<footer class="footer-basic-centered">
<p class="footer-company-motto">Expand Your Retro Playground.</p>
<p class="footer-links">
Home ·
Stock ·
About Us ·
Contact Us</p>
<p class="footer-company-name">Retro Games Arcade ɠ2015</p>
</footer>
</div>
</div>
</body>
</html>
Very difficult to read through that code, so I'm not sure if I'm targeting the right area.
I'm assuming you want these images to be in-line:
<div class="col-md-6">
<div id="slideshow" class="centerBlock hidden-xs hidden-sm hidden-md">
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG1.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L1.png" width="158" height="162">
</div>
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG2.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L2.png" width="158" height="162">
</div>
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG3.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L3.png" width="158" height="162">
</div>
</div>
</div>
Just use bootstrap:
<div class="col-md-6">
<div class="col-md-4">
*images*
</div>
<div class="col-md-4">
*images*
</div>
<div class="col-md-4">
*images*
</div>
</div>