I would like to know how to align the image next to the text in my code.
Please disregard how messy it is. I was doing a project for school and I didn't know how to fix this issue I'm having.
The project isn't mandatory although it's for a competition to win a raspberry pi that I need for a future project involving bitcoins.
https://jsfiddle.net/kdn1x2hk/3/
<!DOCTYPE! html>
<html>
<head>
<style>
body,
html {
margin-top: -11px;
margin: 0;
height: 100%;
min-width: 1000px;
background-color: red;
}
.bg {
margin-left: 20%;
width: 60%;
background-color: grey;
border-left: thick solid black;
border-right: thick solid black;
}
.background {
background-image: url("images/background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
min-height: 100%;
}
.banner {
width: 100%;
border-bottom: thick solid black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-bottom: thick solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none!important;
font-family: "Arial Black", Gadget, sans-serif;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #FFD700;
color: black;
}
.header {
font-size: 80pt;
font-family: "Arial Black", Gadget, sans-serif;
color: black;
text-align: center;
min-width: 80pt;
}
.dotted_line {
border-top: 2px dashed black;
width: 70%;
}
.paragraph {
font-size: 15pt;
width: 500px;
margin-left: 0%;
color: black;
}
.sub_header {
text-align: center;
font-size: 50pt;
color: black;
}
.credit {
width: 560;
size: 20pt;
text-align: center;
font-style: italic;
}
.video {
width: 70%;
margin-left: 15%;
border: thick solid black;
}
.credit_link {
text-decoration: none;
}
#image {
width: 45%;
}
#text {
width: 45%;
float: left;
font-size: 15pt;
color: black;
padding-top: 20px;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
.format {
width: 90%;
margin-left: 10%;
}
</style>
</head>
<body>
</body>
</html>
Changes:
Moved the #text before the #image inside format class container and used display:flex instead of float:left on your #text container to also provide vertical alignment.
Added align-items:center on format class to vertically align both of its contents i.e text and image.
Updated fiddle : https://jsfiddle.net/sbakj4x0/
body,
html {
margin-top: -11px;
margin: 0;
height: 100%;
min-width: 1000px;
background-color: red;
}
.bg {
margin-left: 20%;
width: 60%;
background-color: grey;
border-left: thick solid black;
border-right: thick solid black;
}
.background {
background-image: url("images/background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
min-height: 100%;
}
.banner {
width: 100%;
border-bottom: thick solid black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-bottom: thick solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none!important;
font-family: "Arial Black", Gadget, sans-serif;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #FFD700;
color: black;
}
.header {
font-size: 80pt;
font-family: "Arial Black", Gadget, sans-serif;
color: black;
text-align: center;
min-width: 80pt;
}
.dotted_line {
border-top: 2px dashed black;
width: 70%;
}
.paragraph {
font-size: 15pt;
width: 500px;
margin-left: 0%;
color: black;
}
.sub_header {
text-align: center;
font-size: 50pt;
color: black;
}
.credit {
width: 560;
size: 20pt;
text-align: center;
font-style: italic;
}
.video {
width: 70%;
margin-left: 15%;
border: thick solid black;
}
.credit_link {
text-decoration: none;
}
#image {
width: 45%;
}
#text {
width: 45%;
font-size: 15pt;
color: black;
padding-top: 20px;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
.format {
width: 90%;
margin-left: 10%;
overflow: hidden;
align-items: center;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<body>
<div class="background">
<div class="bg">
<img src="https://i.imgur.com/gsceMM5.png" class="banner">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Stats</li>
<li>History</li>
<li>Info</li>
<li>Contact</li>
</ul>
<p class="header"> WELCOME</p>
<hr class="dotted_line" />
<p class="sub_header">What is Bitcoin?</p>
<video class="video" poster="images/thumbnail.jpg" controls>
<source src="videos/info.mp4" type="video/mp4">
</video>
<p class="credit">
(Credit to <a class="credit_link" href="https://www.youtube.com/user/weusecoins">WeUseCoins</a> on youtube.com)
</p>
<div class="format">
<p id="text">
Bitcoin is a new currency that was created in 2009 by an unknown person using the alias Satoshi Nakamoto. Transactions are made with no middle men – meaning, no banks! Bitcoin can be used to book hotels on Expedia, shop for furniture on Overstock and
buy Xbox games. But much of the hype is about getting rich by trading it. The price of bitcoin skyrocketed into the thousands in 2017.
</p>
<img src="https://i.imgur.com/BGsKZms.png" id="image" />
</div>
</div>
</div>
</body>
Related
I'm having some troubles to align the upper_navdiv with the content div.
I want the upper_nav with links aligned with the right-hand side margin and that grows in the left-hand side direction depending on how many links there are inside and the width of each boxes.
Could you check which is the problem?
upper_nav is child of header that takes the whole width of the page:
div#upper_nav {
position: absolute;
bottom:0;
right:0;
width:80%;
}
So I would that the width would be the 80% of the parent width but I don't understand why the margin is not aligned correctly.
Here the example of my page:
html {
margin: 0;
padding: 0;
background-color: #ffffff;
font-size: 17px;
}
body {
font-family: Tahoma, Geneva, sans-serif;
color: #000;
text-align: justify;
background-image: url('url_immagine');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div#container {
overflow: hidden;
width: 95%;
margin: 0px auto;
background-color: #ffffff;
}
div#header {
/*background: url('header.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:18vw;*/
position: relative;
}
div#upper_nav {
position: absolute;
bottom: 0;
right: 0;
width: 80%;
/*background-color:#e6e6e6;*/
}
div#navigation_left {
padding: 1% 1%;
float: left;
width: 21%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#content {
overflow: auto;
margin-left: 25%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#footer {
clear: both;
/*background: url('footer.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:5vw;*/
width: 100%;
position: relative;
}
div#footer_content {
position: relative;
bottom: -50%;
text-align: center;
z-index: 9999;
background-color: #e6e6e6;
}
P {
color: #000;
font-family: Tahoma;
}
a {
text-decoration: none;
color: #0066FF;
font-size: 17px;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
h1 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 200%;
}
h2,
h3,
h4,
h5,
h6,
h7,
h8 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 150%;
}
ul#menu_header {
list-style: none;
line-height: 150%;
text-align: center;
}
ul#menu_header li {
background-color: #737373;
right: 0;
width: 19.6%;
margin: 0.2%;
float: left;
/* elementi su singola riga */
}
ul#menu_header li a {
color: #fff;
text-decoration: none;
}
ul#menu_header li.active,
ul#menu_header li:hover {
background-color: #b1b1b1;
}
ul#menu_left {
display: block;
list-style: none;
text-align: left;
text-decoration: none;
padding-left: 5%;
}
ul#menu_left li {
margin: 1%;
font-size: 5vw;
}
ul#menu_left li a {
color: #000;
display: block;
line-height: 150%;
text-decoration: none;
}
ul#menu_left li.active,
ul#menu_left li:hover {
background-color: #c9c9c9;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.panel a {
color: #000
}
.panel a:hover {
background-color: #b1b1b1
}
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="container">
<div id="header">
<img src="http://placehold.it/1600x900" width="100%" alt="Riunione annuale GTTI SIEm2019" />
<div id="upper_nav">
<ul id="menu_header">
<li class="active">Home</li>
<li>Link11</li>
<li>Link22</li>
<li>Link33</li>
<li>Link44</li>
</ul>
</div>
</div>
<div id="navigation_left">
<ul id="menu_left">links</ul>
</div>
<div id="content">
<p>text</p>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</div>
</body>
</html>
You notice the non-alignment resizing the window.
So my school is doing this competition, the five best websites win a RaspBerry Pi. I have a dilemma with mine currently. I have looked lost of places but nothing seems to work. Here is a link to some of my code on JSFiddle.
https://jsfiddle.net/kdn1x2hk/
My problem is, I have a DIV for my middle column where all of my info. goes and I'm trying to format it to where I can have an image on the left and text on the left, the only problem with that is I want to have it to where the div its in covers the text completely. If you see where the text goes beyond the grey background, thats what the problem is.
<!DOCTYPE! html>
<html>
<head>
<style>
body,
html {
margin-top: -11px;
margin: 0;
height: 100%;
min-width: 1000px;
background-color: red;
}
.bg {
margin-left: 20%;
width: 60%;
background-color: grey;
border-left: thick solid black;
border-right: thick solid black;
}
.background {
background-image: url("images/background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
min-height: 100%;
}
.banner {
width: 100%;
border-bottom: thick solid black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-bottom: thick solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none!important;
font-family: "Arial Black", Gadget, sans-serif;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #FFD700;
color: black;
}
.header {
font-size: 80pt;
font-family: "Arial Black", Gadget, sans-serif;
color: black;
text-align: center;
min-width: 80pt;
}
.dotted_line {
border-top: 2px dashed black;
width: 70%;
}
.paragraph {
font-size: 15pt;
width: 500px;
margin-left: 0%;
color: black;
}
.sub_header {
text-align: center;
font-size: 50pt;
color: black;
}
.credit {
width: 560;
size: 20pt;
text-align: center;
font-style: italic;
}
.video {
width: 70%;
margin-left: 15%;
border: thick solid black;
}
.credit_link {
text-decoration: none;
}
#image {
width: 45%;
}
#text {
width: 45%;
float: left;
font-size: 15pt;
color: black;
padding-top: 20px;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
.format {
width: 90%;
margin-left: 10%;
}
</style>
</head>
<body>
<div class="background">
<div class="bg">
<img src="https://i.imgur.com/gsceMM5.png" class="banner">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Stats</li>
<li>History</li>
<li>Info</li>
<li>Contact</li>
</ul>
<p class="header"> WELCOME</p>
<hr class="dotted_line" />
<p class="sub_header">What is Bitcoin?</p>
<video class="video" poster="images/thumbnail.jpg" controls>
<source src="videos/info.mp4" type="video/mp4">
</video>
<p class="credit">
(Credit to <a class="credit_link"
href="https://www.youtube.com/user/weusecoins">WeUseCoins</a> on
youtube.com)
</p>
<div class="format">
<img src="https://i.imgur.com/BGsKZms.png" id="image" />
<p id="text">
Bitcoin is a new currency that was created in 2009 by an unknown
person using the alias Satoshi Nakamoto. Transactions are made with no
middle men – meaning, no banks! Bitcoin can be used to book hotels on
Expedia, shop for furniture on Overstock and
buy Xbox games. But much of the hype is about getting rich by
trading it. The price of bitcoin skyrocketed into the thousands in 2017.
</p>
</div>
</div>
</div>
</body>
</html>
My code isn't organized on here for some reason, but I just copied the important stuff, leave out all the organizing and stuff I have to do because ill get to the eventually.
This is fortunately a really easy fix. All you're looking to do is add overflow: hidden to .format, so that the container expands to allow the background to cover all of the text contained within, without any scrollbars:
body,
html {
margin-top: -11px;
margin: 0;
height: 100%;
min-width: 1000px;
background-color: red;
}
.bg {
margin-left: 20%;
width: 60%;
background-color: grey;
border-left: thick solid black;
border-right: thick solid black;
}
.background {
background-image: url("images/background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
min-height: 100%;
}
.banner {
width: 100%;
border-bottom: thick solid black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-bottom: thick solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none!important;
font-family: "Arial Black", Gadget, sans-serif;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #FFD700;
color: black;
}
.header {
font-size: 80pt;
font-family: "Arial Black", Gadget, sans-serif;
color: black;
text-align: center;
min-width: 80pt;
}
.dotted_line {
border-top: 2px dashed black;
width: 70%;
}
.paragraph {
font-size: 15pt;
width: 500px;
margin-left: 0%;
color: black;
}
.sub_header {
text-align: center;
font-size: 50pt;
color: black;
}
.credit {
width: 560;
size: 20pt;
text-align: center;
font-style: italic;
}
.video {
width: 70%;
margin-left: 15%;
border: thick solid black;
}
.credit_link {
text-decoration: none;
}
#image {
width: 45%;
}
#text {
width: 45%;
float: left;
font-size: 15pt;
color: black;
padding-top: 20px;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
.format {
width: 90%;
margin-left: 10%;
overflow: hidden;
}
<!DOCTYPE html>
<body>
<div class="background">
<div class="bg">
<img src="https://i.imgur.com/gsceMM5.png" class="banner">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Stats</li>
<li>History</li>
<li>Info</li>
<li>Contact</li>
</ul>
<p class="header"> WELCOME</p>
<hr class="dotted_line" />
<p class="sub_header">What is Bitcoin?</p>
<video class="video" poster="images/thumbnail.jpg" controls>
<source src="videos/info.mp4" type="video/mp4">
</video>
<p class="credit">
(Credit to <a class="credit_link" href="https://www.youtube.com/user/weusecoins">WeUseCoins</a> on youtube.com)
</p>
<div class="format">
<img src="https://i.imgur.com/BGsKZms.png" id="image" />
<p id="text">
Bitcoin is a new currency that was created in 2009 by an unknown person using the alias Satoshi Nakamoto. Transactions are made with no middle men – meaning, no banks! Bitcoin can be used to book hotels on Expedia, shop for furniture on Overstock and
buy Xbox games. But much of the hype is about getting rich by trading it. The price of bitcoin skyrocketed into the thousands in 2017.
</p>
</div>
</div>
</div>
</body>
I've also created a snippet showcasing this here.
Hope this helps! :)
I have been working on developing my own webpage, and for the home page I wanted a nice looking banner with 3 tiles (1 big one left with 2 smaller ones stacked on top of eachother right).
I could get this all to work fine, but I now noticed that on mobile devices this really gets out of proportion, and I wanted to make the 3 tiles all on top of each other when the width of the screen gets less than let's say 300px.
However, I can not seem to get this to work by looking at other questions on stackoverflow, only tiles start to disappear
Example view of what I wish to accomplish
#media only screen and (min-width: 300px) {
.hero {
height: 400px;
width: 80%;
margin-left: auto;
margin-right: auto;
display: flex;
position: relative;
}
.left {
float: left;
width: 80%
}
.right {
float: left;
width: 80%
}
}
#media only screen and (min-width: 600px) {
.hero {
height: 400px;
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
position: relative;
}
}
.left {
background-image: url('http://via.placeholder.com/1600x1200');
background-size: cover;
flex: 1;
}
.left:hover {
opacity: 0.8;
}
.left:hover .btnLeft {
color: white;
background-color: orange;
border: 1px solid orange;
}
.right {
display: flex;
margin-left: 5px;
flex-direction: column;
flex: 0 0 40%;
}
.one {
height: 175px;
background-image: url('http://via.placeholder.com/380x260');
background-size: cover;
flex: 80%;
}
.one:hover {
opacity: 0.8;
}
.one:hover .btnTop {
color: white;
background-color: orange;
border: 1px solid orange;
}
.two {
height: 175px;
margin-top: 5px;
background-image: url('http://via.placeholder.com/380x260');
background-size: cover;
flex: 50%;
}
.two:hover {
opacity: 0.8;
}
.two:hover .btnBot {
color: white;
background-color: orange;
border: 1px solid orange;
}
.btnLeft {
margin-top: 300px;
background-color: white;
color: black;
border: 1px solid black;
border-radius: 2px;
padding: 3px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
font-family: 'Titillium Web', sans-serif;
font-weight: normal;
text-transform: capitalize;
}
.btnTop {
margin-top: 140px;
background-color: white;
color: black;
border: 1px solid black;
border-radius: 2px;
padding: 2px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 25px;
font-family: 'Titillium Web', sans-serif;
font-weight: normal;
text-transform: capitalize;
}
.btnBot {
margin-top: 140px;
background-color: white;
color: black;
border: 1px solid black;
border-radius: 2px;
padding: 2px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 25px;
font-family: 'Titillium Web', sans-serif;
font-weight: normal;
text-transform: capitalize;
}
<div class="hero">
<a href="http://example.com" class="left" >
<div class="btnLeft">Option 1</div>
</a>
<div class="right">
<a href="http://example.com" class="one" >
<div class="btnTop">Option 2</div>
</a>
<a href="http://example.com" class="two" >
<div class="btnBot">Option 3</div>
</a>
</div>
</div>
This is an easy effect to achieve using flexbox. On your smallest size screens give the .hero container a property of flex-direction:column to have them stack vertically. Once you hit your bigger breakpoint, change this to flex-direction:row.
Also, it's worthwhile to note that you don't need to add a float property to the .left and .right containers as this isn't how flexbox functions.
For a pretty in depth look of how flexbox works check out this link.
#media only screen and (min-width: 300px) {
.hero {
height: 400px;
width: 80%;
margin-left: auto;
margin-right: auto;
display: flex;
position: relative;
flex-direction:column;
}
}
#media only screen and (min-width: 600px) {
.hero {
height: 400px;
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
position: relative;
flex-direction:row;
}
}
.left {
background-image: url('http://via.placeholder.com/1600x1200');
background-size: cover;
flex: 1;
}
.left:hover {
opacity: 0.8;
}
.left:hover .btnLeft {
color: white;
background-color: orange;
border: 1px solid orange;
}
.right {
display: flex;
margin-left: 5px;
flex-direction: column;
flex: 0 0 40%;
}
.one {
height: 175px;
background-image: url('http://via.placeholder.com/380x260');
background-size: cover;
flex: 80%;
}
.one:hover {
opacity: 0.8;
}
.one:hover .btnTop {
color: white;
background-color: orange;
border: 1px solid orange;
}
.two {
height: 175px;
margin-top: 5px;
background-image: url('http://via.placeholder.com/380x260');
background-size: cover;
flex: 50%;
}
.two:hover {
opacity: 0.8;
}
.two:hover .btnBot {
color: white;
background-color: orange;
border: 1px solid orange;
}
.btnLeft {
margin-top: 300px;
background-color: white;
color: black;
border: 1px solid black;
border-radius: 2px;
padding: 3px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
font-family: 'Titillium Web', sans-serif;
font-weight: normal;
text-transform: capitalize;
}
.btnTop {
margin-top: 140px;
background-color: white;
color: black;
border: 1px solid black;
border-radius: 2px;
padding: 2px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 25px;
font-family: 'Titillium Web', sans-serif;
font-weight: normal;
text-transform: capitalize;
}
.btnBot {
margin-top: 140px;
background-color: white;
color: black;
border: 1px solid black;
border-radius: 2px;
padding: 2px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 25px;
font-family: 'Titillium Web', sans-serif;
font-weight: normal;
text-transform: capitalize;
}
<div class="hero">
<a href="http://example.com" class="left" >
<div class="btnLeft">Option 1</div>
</a>
<div class="right">
<a href="http://example.com" class="one" >
<div class="btnTop">Option 2</div>
</a>
<a href="http://example.com" class="two" >
<div class="btnBot">Option 3</div>
</a>
</div>
</div>
I know this sounds like an obvious question and answer, but I have spent a long time trying to figure this out, and for some reason, none of the answers are not working for me. Honestly, this is probably going to be a simple obvious answer I just can't catch. But here's the problem: I am making a website out of HTML5, CSS, and some PHP.
The issue is, that my links appear blue and purple with an underline. I know this is how they are supposed to look, but I have tried many different ways to re-style the links with text-decoration: none, and different colors and so on.
Here is my CSS and the HTML part with a link:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: brown;
}
.sidebar {
width: 25%;
height: 100%;
float: left;
background-color: #BC986A;
overflow-y: scroll;
}
.side-option {
width: 100%;
height: 155px;
background-color: #BC986A;
}
.side-option:hover, .side-option:focus {
background-color: #DAAD86;
}
.side-name {
font-family: "Indie Flower", cursive;
font-size: 1.8em;
margin: 2px 2px 0px 7px;
padding: 5px 5px 0px 5px;
}
.side-image {
width: 150px;
height: 97px;
margin: 0px 0px 0px 15px;
border: 0.3em solid #FBEEC1;
}
.info {
background-color: #659DBD;
width: 75%;
height: 100%;
float: right;
}
#name {
font-family: "Gloria Hallelujah", cursive;
font-size: 50px;
text-align: center;
color: #FBEEC1;
}
#s-name {
font-family: "Gloria Hallelujah", cursive;
font-size: 20px;
text-align: center;
color: #FBEEC1;
}
#image {
display: block;
width: 384px;
height: 256px;
margin-left: auto;
margin-right: auto;
border: 0.5em solid #BC986A;
margin-top: 10px;
}
#desc {
font-family: "Rock Salt", cursive;
font-weight: bold;
font-size: 20px;
text-align: center;
color: #DAAD86;
}
<div class="sidebar">
<a href="index.php?page=0"><div class="side-option">
<h2 class="side-name">Brown Bear</h2>
<img src="http://maxpixel.freegreatpicture.com/static/photo/1x/Animal-Brown-Bear-Beast-Bear-Teddy-Bear-Mammal-422682.jpg" class="side-image" alt="Brown bear standing in tall plants.">
</div></a>
I'm not sure if you needed all that, but there it is anyway.
For hover color change you can use this css
.sidebar a:hover{color:red; }
For keep the color focus after click
.sidebar a:focus{color:blue; }
1) You need to change your code from </div></a> at the end to this: </div></a></div>
2)Links can be styled differently depending on what state they are in.:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
You can read more about this in: https://www.w3schools.com/css/css_link.asp
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
a, a:link, a:visited{
text-decoration: none;
color: brown;
}
a:hover, a:active{
color: green;
}
.sidebar {
width: 25%;
height: 100%;
float: left;
background-color: #BC986A;
overflow-y: scroll;
}
.side-option {
width: 100%;
height: 155px;
background-color: #BC986A;
}
.side-option:hover, .side-option:focus {
background-color: #DAAD86;
}
.side-name {
font-family: "Indie Flower", cursive;
font-size: 1.8em;
margin: 2px 2px 0px 7px;
padding: 5px 5px 0px 5px;
}
.side-image {
width: 150px;
height: 97px;
margin: 0px 0px 0px 15px;
border: 0.3em solid #FBEEC1;
}
.info {
background-color: #659DBD;
width: 75%;
height: 100%;
float: right;
}
#name {
font-family: "Gloria Hallelujah", cursive;
font-size: 50px;
text-align: center;
color: #FBEEC1;
}
#s-name {
font-family: "Gloria Hallelujah", cursive;
font-size: 20px;
text-align: center;
color: #FBEEC1;
}
#image {
display: block;
width: 384px;
height: 256px;
margin-left: auto;
margin-right: auto;
border: 0.5em solid #BC986A;
margin-top: 10px;
}
#desc {
font-family: "Rock Salt", cursive;
font-weight: bold;
font-size: 20px;
text-align: center;
color: #DAAD86;
}
<div class="sidebar">
<a href="index.php?page=0"><div class="side-option">
<h2 class="side-name">Brown Bear</h2>
<img src="http://maxpixel.freegreatpicture.com/static/photo/1x/Animal-Brown-Bear-Beast-Bear-Teddy-Bear-Mammal-422682.jpg" class="side-image" alt="Brown bear standing in tall plants."/>
</div>
</a>
</div>
a {
text-decoration: none;
color: brown;
}
is where you need to make changes to edit links
to change hover options:
a:hover {
style it here
}
and for already visited links on your site:
a:visited {
style it here
}
You asked how to style links.
a{
color: red;
cursor: wait;
font-size: 24px;
transition: color 0.3s, text-shadow 0.3s;
text-decoration: none;
}
a:hover{
color: green;
text-shadow: 1px 2px 3px #000;
text-decoration: overline;
}
a:active{
font-weight: 900;
}
Working link.
I'm trying to create a navbar for my website. I've gone through the CSS and tried to resize the navbar and align the text. I don't know where I'm going wrong.
Here is a section of the css.
.nav {
font-family: "Indie Flower", serif;
font-size: larger;
color: white;
}
#navwrapper{
width = 100%
float: left;
margin: 0 auto;
list-style : none
font-family: "Indie Flower", Arial;
background-color: red;
height = 10px;
text-align = "center";
}
Also the HTML
<body>
<div id="main" class="main" style ="text-align = center">
</div>
<div id = "navwrapper">
<p class = "nav">Holder</>
</div>
<br>
<iframe src = "http://chrisfoose.blogspot.com" width = "100%" height = "300" frameborder = "0">
<p>Unfortunately your browser does not support dynamic content.</p>
</iframe>
</div>
</body>
Also, a link to what the current results are:
Codepen Link
var imgSrcArr = ["http://www.hdwallpapers.in/walls/running_horse-wide.jpg", "http://www.hdwallpapers.in/walls/colorful_background-wide.jpg", "http://www.hdwallpapers.in/walls/moonlight_cruise-wide.jpg"]
var imgSrcArr = ["background/000.jpg", "background/001.jpg", "background/002.jpg", "background/003.jpg", "background/004.jpg"]
window.onload = function() {
var randNum = Math.floor(Math.random() * 4);
document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')"
}
#import url(http://fonts.googleapis.com/css?family=Russo+One);
#import "compass/css3";
#import url(http://fonts.googleapis.com/css?family=Share+Tech+Mono);
#import url(http://fonts.googleapis.com/css?family=Indie+Flower);
svg {
width: 600px;
height: 120px;
display: block;
position: relative;
overflow: hidden;
margin: 0 auto;
background: black;
}
a {
text-decoration: none;
color: white;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
float: center;
}
div.main {
margin: auto;
;
height: 500px;
;
width: 1000px;
background-position: center;
backgroud-repeat: no-repeat border: 1px solid black;
}
body {
background-color: black;
}
#main {
width: 1000px;
margin: 0 auto;
}
#vid {
width: 1200px;
text-align: center;
}
#circle {
position: fixed;
z-index: 1;
}
#buttonred {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #8A0808;
border-style: solid;
text-align: center;
}
#buttonblue {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #4000FF;
border-style: solid;
text-align: center;
}
#buttongreen {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #088A08;
border-style: solid;
text-align: center;
}
#buttonpink {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: pink;
border-style: solid;
text-align: center;
}
#buttonorange {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: orange;
border-style: solid;
text-align: center;
}
#buttonback {
witdth: 100px;
height 100px;
border-radius: 100%;
background-color: red;
border-style: solid;
text-align: center;
}
;
table.center {
;
background-color: white;
;
margin.left: auto;
;
margin.right: auto;
;
}
table.center {
width: 70%;
margin-left: 200px;
margin-top: 300px;
color: white;
}
p {
font-family: Arial, Terminal, Times New Roman;
margin-top: 30px;
font-color: white;
line-height: 100px;
margin: 0;
}
p.bio {
background-color: white;
font-family: 'Russo One', sans-serif;
color: black;
margin-top: 50px margin-left: 50px
}
div.enclose {
margin-top: 50px margin-left: 50px
}
td.bio {
padding: 15px;
border-radius: 25px;
}
table.bio {
width: 70%;
margin-left: 300px;
margin-top: 150px;
padding: 50px;
}
table.video {
width: 85%;
margin-left: 150px;
margin-top: 200px;
}
table.graphics {
width: 85%;
margin-left: 50px;
margin-top: 150px;
background-color: black;
border: 1px border-color: white;
}
td.graphics {
border: 1px solid white;
align: center;
}
#videobanner {
width: 150px;
height: 50px;
background-color: grey;
text-align: center;
margin-top: 1px;
margin-bottom: 20px;
color: white;
}
p.video {
font-family: Arial;
font-size: large;
color: white;
text-align: center;
font-size: 18px;
margin-top: 5px;
}
p.menu {
font-family: "Indie Flower", serif;
font-color: white font-size: medium;
font-weight: 700;
}
.nav {
font-family: "Indie Flower", serif;
font-size: larger;
color: white;
}
#navwrapper {
width=100% float: left;
margin: 0 auto;
list-style: none font-family: "Indie Flower", Arial;
background-color: red;
height=10px;
text-align="center";
}
<body>
<div id="main" class="main" style="text-align = center">
<div id="navwrapper">
<p class="nav">Holder
</>
</div>
<br>
<iframe src="http://chrisfoose.blogspot.com" width="100%" height="300" frameborder="0">
<p>Unfortunately your browser does not support dynamic content.</p>
</iframe>
</div>
</div>
</body>
</html>
You were closing off your main div prematurely and your css was incorrectly formatted. Use colons not equals signs in css.
Here is the updated codepen.