I'm new at html and css and i would appreciate if someone would give me a hand with this on. Thank you for all you anwsers in advance.
A strange thing happened when because i added the background and i can't figure out why my hover and active are disabled.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Project1</title>
<link href="cssprojectgallery.css" rel="stylesheet" type="text/css">
<div class="logo" >
<img src="../MT portfolio/lg.png" alt="" width="180" height="178" class="logo"/>
</div>
</head>
<body>
<nav>
<li><a< href".html">Home</li></a>
<li><a< href"projects.html">Projects</li></a>
<li><a< href"about.html">About</li></a>
<li><a< href"contact.html">Contact</li></a>
</nav>
<div class="gal">
<img src="LOGOS/Ampire.jpg" width="800" alt=""/>
<img src="LOGOS/Pacakama.jpg" alt="" width="800"/>
<img src="LOGOS/Zoom.jpg" alt="" width="800"/>
<img src="LOGOS/Futura.jpg" alt=""width="800""/>
<img src="LOGOS/Soundgrounded.jpg" alt=""width="800""/>
<img src="LOGOS/Gams.jpg" alt=""width="800""/>
<img src="LOGOS/Bullseye.jpg" alt=""width="800""/>
<img src="LOGOS/Union.jpg" alt=""width="800""/>
<img src="LOGOS/Skylinq.jpg" alt=""width="800""/>
</div>
</body>
</html>
CSS
#charset "utf-8";
.logo {
padding-bottom: 30px;
text-align: center;
}
nav {
font-family: "Proxima Nova ScOsf ExCn Rg";
text-align: center;
font-size: 35px;
word-spacing: 80px;
padding-right: 50px;
padding-bottom: 2%;
padding-left: 50px;
color: #000000; }
li {
display: inline;
color: #000000;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: lightgray;
}
a:active {
color: black;
}
body {
background-image: url(../mt/back.jpg);
background-sizce: cover;
}
.gal {
text-align: center;
background-color: #000000;
background-size: 0% auto;
margin-top: 0.5%;
padding-top: 2%;
padding-bottom: 0.5%;
border-top-left-radius: 0px;
margin-right: 20%;
margin-left: 20%;
margin-bottom: 5%;
}
.gal img {
vertical-align: middle;
padding-top: 1%;
padding-bottom: 2%;
}
Your markup is not valid that is why hover and active states are not responding. Please correct your HTML code as follows.
<nav>
<ul>
<li>
Home
</li>
<li>
Projects
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
Related
I want to make a simple gallery.
I set up the width and height of li and the img size, but it doesn't fit.
I want to make unified image sizes.
What's wrong with my code?
body
{
margin: 0;
padding: 0;
background-color: #fff;
color: black;
font-family: sans-serif, Arial;
font-size: 15px;
line-height: 1.5;
}
.container
{
max-width: 1200px;
margin: auto;
}
.container a
{
background: #ccc;
color: #666;
text-decoration: none;
padding: 10px;
border-radius: 20px;
padding-left: 20px;
padding-right: 20px;
display: inline-block;
transition: background 0.5s, color 0,5s;
}
.container a:hover
{
background: #aaa;
color: #fff;
}
main
{
background: #111;
padding: 25px;
width: 100%;
float: left;
box-sizing: border-box;
}
/*Gallery*/
.gallery
{
background: #999;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 25px;
display: block;
width: 100%;
}
.gallery li
{
background: red;
width: 31%;
float: left;
margin-left: 1%;
margin-right: 1%;
height: 175px;
}
.gallery img
{
background: blue;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.container .gallery a
{
background: transparent;
padding: 0;
display: block;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta lang="hu">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="res/teszt.css">
<title>test</title>
</head>
<body>
<!-- FEJLÉC -->
<div class="container">
<main>
<ul class="gallery">
<li>
<a href="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" target="_blank">
<img src="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" target="_blank">
<img src="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpaperaccess.com/full/255959.jpg" target="_blank">
<img src="https://wallpaperaccess.com/full/255959.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpapercave.com/wp/wp4013939.jpg" target="_blank">
<img src="https://wallpapercave.com/wp/wp4013939.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" target="_blank">
<img src="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
</ul>
</main>
</div>
</body>
</html>
Just define some height and width to image it will start working.
body
{
margin: 0;
padding: 0;
background-color: #fff;
color: black;
font-family: sans-serif, Arial;
font-size: 15px;
line-height: 1.5;
}
.container
{
max-width: 1200px;
margin: auto;
}
.container a
{
background: #ccc;
color: #666;
text-decoration: none;
padding: 10px;
border-radius: 20px;
padding-left: 20px;
padding-right: 20px;
display: inline-block;
transition: background 0.5s, color 0,5s;
}
.container a:hover
{
background: #aaa;
color: #fff;
}
main
{
background: #111;
padding: 25px;
width: 100%;
float: left;
box-sizing: border-box;
}
/*Gallery*/
.gallery
{
background: #999;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 25px;
display: block;
width: 100%;
}
.gallery li
{
background: red;
width: 31%;
float: left;
margin-left: 1%;
margin-right: 1%;
height: 175px;
}
.gallery img
{
background: blue;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.container .gallery a
{
background: transparent;
padding: 0;
display: block;
height: 200px;
width: 100%;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta lang="hu">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="res/teszt.css">
<title>test</title>
</head>
<body>
<!-- FEJLÉC -->
<div class="container">
<main>
<ul class="gallery">
<li>
<a href="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" target="_blank">
<img src="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" target="_blank">
<img src="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpaperaccess.com/full/255959.jpg" target="_blank">
<img src="https://wallpaperaccess.com/full/255959.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpapercave.com/wp/wp4013939.jpg" target="_blank">
<img src="https://wallpapercave.com/wp/wp4013939.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" target="_blank">
<img src="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
</ul>
</main>
</div>
</body>
</html>
I am building a website for myself as a sort of a CV.
Things are going pretty well, though I do have one problem.
In the CSS I targeted all the images in the jumbotron, but still, one of the images won't resize when I make the browser smaller, the rest does. I have no idea why so after already searching and trying, I thought maybe you guys could help me out here.
What does resize are the icon's for social media and contact.
What doesn't resize, is the catcolor.img (yeah it's a picture of me holding a cat in the Azores, really cute and all that).
.jumbotron {
/*background: url('image.jpg') no-repeat center center;
background-size: cover;*/
height: 400px;
background-color: transparent;
margin-left: 7%;
margin-right: 7%;
}
.jumbotron img {
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
border: 4px solid white;
max-width: 100%;
height: auto;
}
.jumbotron h1, p {
color: black;
}
.jumbotron p {
font-size: 18px;
margin-top: 40px;
}
#nopadding {
padding-left: 0px;
}
.btn-default {
text-decoration: none;
margin-top: 15px;
background-color: #281A1F;
color: white;
font-size: 14px;
}
.btn-default:hover {
background-color: #5D6263;
color: white;
}
.jumbotron li {
list-style: none;
margin: 13px;
}
.jumbotron ul {
padding: 0px;
}
.contact img {
border: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<h1>TITLE</h1>
<p id="nopadding">SUBTITEL</p>
Go to latest creation
</div>
<div class="col-md-3">
<img src="img/catcolor.jpg">
</div>
<div class="col-md-1">
<ul class="contact">
<li><img src="img/usedicons/linkedin.png" height="35" width="35"></li>
<li><img src="img/usedicons/instagram.png" height="35" width="35"></li>
<li><img src="img/usedicons/wordpress.png" height="35" width="35"></li>
<li><img src="img/usedicons/pinterest.png" height="35" width="35"></li>
<li><img src="img/usedicons/flickr.png" height="35" width="35"></li>
<li><img src="img/usedicons/gmail.png" height="35" width="35"></li>
</ul>
</div>
</div>
</div>
</div>
I would like to center the text on my homepage vertical in the middel of the page. Right now i tried to do this with a percentage, but this isn't the right way because when i open the webpage on my phone or an ipad the text doesn't center. Does anyone know how i can center it the right way?
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html, body{
width: 100%;
margin: 0;
padding: 0;
height:100%;
}
/* wrapper */
#wrapper {
min-height: 100%;
position: relative;
}
/* menu */
#header {
height: 80px;
width: 100%;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover{
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
padding-bottom:80px;
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
margin-top: 15%;
}
/* footer */
#footer {
background: #000000;
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
display offers you 2 options : the table layout or the flex model ( both will push footer down if content grows)
test snippets in full page mode and resize window
1) display:table/table-row/table-cell (should include IE8 and older browsers CSS 2.1)
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html,
body,
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
/* wrapper */
#wrapper {
display: table;
position: relative;
}
/* menu */
#header {
height: 80px;
display: table-row;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover {
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
vertical-align: middle;
display: table-cell;
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
}
/* footer */
#footer {
background: #000000;
width: 100%;
height: 80px;
display: table-row;
text-align: center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
2) the flex model (latest browsers)
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html,
body,
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
/* wrapper */
#wrapper, #content {
display: flex;/* triiger flex model prefixed might be needed for not so old browsers */
flex-direction:column /* here we need to stack elements */
}
/* menu */
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover {
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
flex:1;/* take as much space avalaible */
justify-content:center;/* because it is display:flex too, you can horizontally center its contents */
align-items:center;/* because it is display:flex too, you can vertically center its contents */
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
}
/* footer */
#footer {
background: #000000;
height: 80px;
text-align:center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
add overflow:auto to #content and it will show a scrollbar if needed , so footer is not pushed down.
Try adding this CSS to the text you want centered:
.your_centered_element {
position: absolute;
top:50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
This will keep the element centered.
Read about the transform: translateX(-50%) translateY(-50%); in the MDN docs
Hope this helps!
One solution here is to use viewport-width and viewport-height units:
.anouk {
position: absolute;
top: 0;
left: 0;
width: 100vw;
line-height: 100vh;
margin: 0;
padding: 0;
text-align: center;
}
for centering the text you have to use **margin auto**
css file--
* {
border: 1px dashed black;
}
div >p {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #FFD700;
margin: auto;
}
html code
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet3.css"/>
<title>Result</title>
</head>
<body>
<div><p >
Anouk Den Haag
</p></div>
</body>
</html>
SEE THE SNAPSHOT
I need the text "Relax.Revive.Renew..." to be on top of the background image, right under the header. At the moment it stays at the bottom of the image. I was able to place it there by putting inside the header tag, but the header is sticky, and I need it to scroll with the background.
Here's my html:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
<title>New Breath Massage</title>
<!-- The "link" tag identifies your external CSS style sheet. Edit this link to use your particular file -->
<link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
</head>
<body>
<div class="container">
<div class="header"> <!-- contains the constant stuff at the top of the page -->
<header>
<div class="logo">
<img src="images/newBreathLogo.png" width="298" height="100" alt="Logo">
</div>
<nav>
<ul class="horizNav">
<li>Offerings | </li>
<li>Testimonials | </li>
<li>Articles | </li>
<li>Contact</li>
<div class="socialIcons">
<img src="images/facebook-icon.png" width="32" height="32" alt="Facebook Icon">
<img src="images/google-plus-icon.png" width="32" height="32" alt="Google Plus Icon">
<img src="images/twitter-icon.png" width="32" height="32" alt="Twitter Icon">
</div>
</ul>
</nav>
</div>
</header>
<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />
<section><!-- landing page (matthew) -->
<div class="tagline">
Relax.Revive.Renew...
</div>
</section>
Here's the css:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 24px;
line-height: 108px;
height: 108px;
background: #fff;
color: #ccc;
font-family: 'Helvetica', sans-serif;
opacity: 0.8;
border-style: solid;
border: orange;
}
/*code for full bleed bg image from paulmason.name*/
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
/*min-width: 1024px;*/
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
/*END code for full bleed bg image from paulmason.name END*/
h1 {
font-weight: lighter;
font-size: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
font-family: "Helvetica", sans-serif;
font-size: 1.1em;
}
nav {
font-family: "Helvetica", sans-serif;
}
a:link {
text-decoration: none;
color: #999;
}
a:hover {
text-decoration: none;
color: #ff9966;
}
a:visited {
text-decoration: none;
color: #ff9966;
}
.logo {
float: left;
/*padding: 10px*/;
}
.socialIcons {
float: right;
margin: 10px;
}
.tagline{
opacity: 1;
height: 150px;
font-family: 'Pinyon Script', serif;
text-align: left;
font-size: 120px;
line-height: 100px;
color: #999;
/*float: left;*/
/*border-bottom: 500px;*/
margin: 0px 25% 0px 20px;
/*padding: 0px 0px 40px;*/
display: inline-block;
}
Sorry, it won't let me post an image.
Thank you!
You're not using your image as a background image, you're using an inline-image:
<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />
I swapped it into the background of your section (named the class background) and did a tiny bit of styling: http://codepen.io/anon/pen/gbXrYv
Try using the z-index CSS attribute. This basically sets the layer on the page that the element is on. Once you set that, you can do one of two things:
position: absolute
top: -(x)px
or...
margin-top: -(x)px;
I hope this helps :)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Jack Yuan | Web Developer</title>
<link rel="stylesheet" href="CSS/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Jack Yuan</h1>
<h2>Web Developer</h2>
</a>
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li> Items For Sale <li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="sec">
<section>
<ul id="item_gallery">
<li>
<a href="itemImg/001.JPG">
<img src="itemImg/001.JPG" width="100" height="100" alt="">
<p> Hard Choices </p>
</a></li>
<li>
<a href="itemImg/002.JPG">
<img src="itemImg/002.JPG"width="100" height="100" alt="">
<p> Linear Algebra </p>
</a></li>
<li>
<a href="itemImg/003.JPG">
<img src="itemImg/003.JPG"width="100" height="100" alt="">
<p> Physics 111 + 112 </p>
</a></li>
<li>
<a href="itemImg/004.JPG">
<img src="itemImg/004.JPG"width="100" height="100" alt="">
<p> For BUS 111</p>
</a></li>
<li>
<a href="itemImg/005.JPG">
<img src="itemImg/005.JPG" width="100" height="100" alt="">
<p> Chemistry for G11 </p>
</a></li>
<li>
<a href="itemImg/006.JPG">
<img src="itemImg/006.JPG"width="100" height="100" alt="">
<p> Chinese-English Dictionary </p>
</a></li>
<li>
<a href="itemImg/007.JPG">
<img src="itemImg/007.JPG"width="100" height="100" alt="">
<p> English-Chinese Dictionary </p>
</a></li>
<li>
<a href="itemImg/008.JPG">
<img src="itemImg/008.JPG"width="100" height="100" alt="">
<p> Amath 250</p>
</a></li>
<li>
<a href="itemImg/009.JPG">
<img src="itemImg/009.JPG"width="100" height="100" alt="">
<p> STAT 230 </p>
</a></li>
<li id="ten">
<a href="itemImg/010.JPG">
<img src="itemImg/010.JPG"width="100" height="100" alt="">
<p> CS116 </p>
</a></li>
<li id="eleven">
<a href="itemImg/011.JPG">
<img src="itemImg/011.JPG"width="100" height="100" alt="">
<p> For CS245</p>
</a></li>
</ul>
</section>
</div>
<footer>
<div id="mus">
<embed src="夜空中最亮的星 Calculasian.mp3" loop="true" autostart="true" height="55mm">
<p> 夜空中最亮的星 </p>
<p>Presented by Calculasian </p>
</div>
<div id="logo">
<a href="https://www.facebook.com/jackyuan.jack">
<img src="img/facebook.gif" alt="FaceBook Logo" class="icon">
</a>
<a href="https://twitter.com/Jack19909100">
<img src="img/twitter.png" alt="Twitter Logo" class="icon">
</a>
</div>
<p>Jack Yuan</p>
<p>All Rights Reserved.</p>
</footer>
</body>
</html>
This is my CSS
a {
text-decoration:none;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
margin: 0;
padding-top: 4mm;
font-size: 2em;
font-family: 'Lobster', cursive;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-family: 'Gloria Hallelujah', cursive;
font-size: 1.5em;
margin: -5px 0 0;
font-weight: normal;
}
body{
font-family: 'Gloria Hallelujah', cursive;
}
a {
color: #6ab47b;
}
header{
background: #6ab47b;
border-color:#599a68;
float:left;
margin: 0;
padding: 5px 0 0 0;
width: 100%;
}
nav{
background: #599a68;
text-align: center;
margin: 20px 0 0;
}
nav a, nav a:visited {
color:#fff;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav a{
font-weight: 800;
padding: 15px 10px;
}
h1, h2{
color:#fff;
}
h3{
margin: 0 0 1em 0;
}
nav a.selected , nav a:hover {
color:#32673f;
}
footer{
font-size: 1em;
text-align: center;
clear:both;
padding-top: 20px;
color: #ccc;
line-height: 0.8em;
background: black;
padding-bottom: 1mm;
}
img{
max-width: 100%;
}
#gallery img{
width: 100%;
}
#gallery{
margin:0;
list-style: none; /** remove bullet point **/
}
#gallery li{
float:left;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p{
margin: 0;
padding: 0;
font-size: 1.5em;
color: #bdc3c7;
}
.icon{
width: 40px;
height: 40px;
margin: 5mm 5px;
}
body{
background: orange;
margin:0;
color:#999;
}
/******
Page about
******/
.profile-photo{
display:block;
max-width:600px;
margin:0 auto 30px;
border-radius: 100%;
padding-top: 10mm;
}
#confu{
margin-top: 70mm;
}
#context{
font-family: 'Montserrat', sans-serif; font-size: 1.5em;
}
#aboutsec{
font-family: 'Pacifico', cursive; font-size:1.5em;
text-align:center;
}
#mus p{
margin-top:0;
padding-top:0;
line-height: 0.8em;
}
#item_gallery{
margin:0;
list-style:none;
}
#item_gallery li{
float: left;
padding-top: 22px;
padding-right: 26px;
padding-left: 26px;
width:110px;
}
#item_gallery p,img{
margin:0;
padding: 0;
}
#sec{
height:40cm;
}
I am trying to build a gallery here. But when i was trying to add one more img to the 2nd line, it started at the middle of the line instead of the leftmost position. I've tried "clear:left", but it did not work. Anyone can help? Thanks!
fiddle link: http://jsfiddle.net/Arh63/
You can try this:
Remove float:left and use display:inline-block;
Demo
#item_gallery li{
display:inline-block;
padding-top: 22px;
padding-right: 26px;
padding-left: 26px;
width:110px;
vertical-align:top;
}
I have just remove the line <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'> and it is started working. May be this font settings have some styles.
Really Wondering!!
DEMO