<!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
Related
I have an existing Gmail signature that works fine. It was saved and implemented over a year ago. I tried copying/pasting the same signature, but even it breaks. It's almost like Gmail has changed the way they allow HTML signatures.
I wanted to ask if anyone had any tips for me. I tried changing all classes to inline styles but still no luck. To be clear, it breaks to a new line right after the logo image, but only after its sent.
When I'm composing and in the Drafts, the signature is fine. Only after sending does it break to a new line after the logo.
Any tips? Can anyone can offer any guidance into formatting this HTML to work as a Gmail signature?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img { margin: 0; padding: 0; outline: none; border: none; }
h1, h2, div, a { font-family: Tahoma, Sans-Serif; }
h1, h2 { margin: 0 0 0 0; font-weight: 500; }
a, a:hover { color: #000; text-decoration: none; }
h1 { font-size: 16px; }
h2 { font-size: 14px; }
.column { display: inline-block; }
.column:first-of-type {
margin-right: 5px;
padding-right: 5px;
border-right: 1px solid #343a40;
}
img.logo {
width: 55px;
height: 55px;
}
.contact { margin: 0 0 0 0; font-weight: 500; }
.contact > a:first-of-type {
display: inline-block;
font-size: 14px;
color: #777;
margin-right: 25px;
padding-top: 3px;
}
.social-icons { float: right; }
.social-icons img {
width: 18px;
height: 18px;
margin: 4px 0 0 5px;
line-height: 0;
}
</style>
</head>
<body>
<section class="email-signature-container">
<div class="column">
<img class="logo" src="https://i.imgur.com/x8NDcYM.png" alt="SISYN Networking" />
</div>
<div class="column">
<h1>Dan Lindsey</h1>
<h2>Full Stack Engineer, <a target="_blank" href="http://luxdig.com">LuxDigital</a></h2>
<div class="contact">
336-355-5575
<div class="social-icons">
<a target="_blank" href="https://linkedin.com/in/mdlindsey"><img src="https://i.imgur.com/tkL1tNk.png" alt="LinkedIn" /></a>
<a target="_blank" href="https://stackoverflow.com/users/9468754/lux"><img src="https://i.imgur.com/0luxbot.png" alt="StackOverflow" /></a>
<a target="_blank" href="https://github.com/sisyn"><img src="https://i.imgur.com/pBv6GHr.png" alt="GitHub" /></a>
<!--
<a target="_blank" href="Skype:336-355-5575"><img src="https://i.imgur.com/83Jil5D.png" alt="Skype" /></a>
<a target="_blank" href="https://fb.com/dan.sisyn"><img src="https://i.imgur.com/LU362Re.png" alt="Facebook" /></a>
<a target="_blank" href="#"><img src="twitter.png" alt="Twitter" class="social-icon" /></a>
<img src="youtube.png" alt="YouTube" class="social-icon" />
<img src="google.png" alt="Google+" class="social-icon" />
-->
</div>
</div>
</div>
</section>
</body>
</html>
I see you were missing display block, borders on your images and you are using divs. I have added display block to images and borders. Also i placed a table around the social media icons.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img { margin: 0; padding: 0; outline: none; border: none; }
h1, h2, div, a { font-family: Tahoma, Sans-Serif; }
h1, h2 { margin: 0 0 0 0; font-weight: 500; }
a, a:hover { color: #000; text-decoration: none; }
h1 { font-size: 16px; }
h2 { font-size: 14px; }
.column { display: inline-block; }
.column:first-of-type {
margin-right: 5px;
padding-right: 5px;
border-right: 1px solid #343a40;
}
img.logo {
width: 55px;
height: 55px;
}
.contact { margin: 0 0 0 0; font-weight: 500; }
.contact > a:first-of-type {
display: inline-block;
font-size: 14px;
color: #777;
margin-right: 25px;
padding-top: 3px;
}
.social-icons { float: right; }
.social-icons img {
width: 18px;
height: 18px;
margin: 4px 0 0 5px;
line-height: 0;
}
</style>
</head>
<body>
<section class="email-signature-container">
<div class="column">
<img class="logo" src="https://i.imgur.com/x8NDcYM.png" alt="SISYN Networking" style="display: block;border:0px;" />
</div>
<div class="column">
<h1>Dan Lindsey</h1>
<h2>Full Stack Engineer, <a target="_blank" href="http://luxdig.com">LuxDigital</a></h2>
<div class="contact">
336-355-5575
<div class="social-icons">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><a target="_blank" href="https://linkedin.com/in/mdlindsey"><img src="https://i.imgur.com/tkL1tNk.png" alt="LinkedIn" style="display: block;border:0px;" /></a></td>
<td><a target="_blank" href="https://stackoverflow.com/users/9468754/lux"><img src="https://i.imgur.com/0luxbot.png" alt="StackOverflow" style="display: block;border:0px;" /></a></td>
<td><a target="_blank" href="https://github.com/sisyn"><img src="https://i.imgur.com/pBv6GHr.png" alt="GitHub" style="display: block;border:0px;" /></a></td>
</tr>
</tbody>
</table>
<!--
<a target="_blank" href="Skype:336-355-5575"><img src="https://i.imgur.com/83Jil5D.png" alt="Skype" /></a>
<a target="_blank" href="https://fb.com/dan.sisyn"><img src="https://i.imgur.com/LU362Re.png" alt="Facebook" /></a>
<a target="_blank" href="#"><img src="twitter.png" alt="Twitter" class="social-icon" /></a>
<img src="youtube.png" alt="YouTube" class="social-icon" />
<img src="google.png" alt="Google+" class="social-icon" />
-->
</div>
</div>
</div>
</section>
</body>
</html>
Let me know if this works for you ( i think it will)
I'm working on my portfolio which has three section tags. I've declared a background colour for the whole body, however, I want different colours to take full width for the 2nd & 3rd section tags -- just like body background colour.
While I did try to achieve that using the below code, the background colour for both the section tags isn't taking full page width. Any help on this would be appreciated.
HTML
<html>
<head>
<title>Srujan Sagar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato|Pacifico|Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
Srujan Sagar
</header>
<section>
<p class="main-content">
Hello! I'm an India-based self-taught FrontEnd Developer.
<br />
<br /> I have a diverse set of skills, ranging from design, to HTML + CSS + Javascript, all the way to Django.
</p>
<img src="images/main_img.jpg" alt="my picture" width="140" class="logo" />
<ul class="social-links">
<li>
<a href="https://www.facebook.com/Srujan.SaGar" target="_blank">
<span class="fa fa-facebook-square" style="font-size:32px;color:#A63A50"></span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa fa-github" style="font-size:34px;color:#A63A50"></span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa fa-linkedin-square" style="font-size:32px;color:#A63A50"></span>
</a>
</li>
</ul>
<br /> <br />
<p class="line"></p>
</section>
<nav class="main-content">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</nav>
<section class="second-content">
<h3>Hi there!</h3>
</section>
<section class="third-content">
<h3>Hi there!</h3>
</section>
</body>
</html>
CSS:
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
}
header {
font-family: 'Pacifico', sans-serif;
letter-spacing: 3px;
font-size: 90px;
padding-top: 10px;
color: #A63A50;
}
.main-content {
font-size: 1.3em;
font-family: 'Raleway', sans-serif;
color: #CA7989;
width: 500px;
margin: 0 auto;
padding-top: 25px;
}
.logo {
border-radius: 50%;
border: 1px solid #CA7989;
margin: 30px 0 0 0;
}
.social-links {
margin: 25px 30px 0 0;
}
a {
text-decoration: none;
color: #CA7989;
}
li {
list-style-type: none;
display: inline;
margin: 0 10px 0 0;
}
.line {
max-width: 550px;
margin: 0 auto;
border-top: 1px solid #CA7989;
}
nav a:hover {
color: #A63A50;
background: #F5E6E6;
}
.second-content {
background:#ebebeb;
width: 100%;
height: 465px;
}
.third-content {
margin-top:-18px;
background:#CA7989;
width: 100%;
height: 465px;
}
View the above code in CodePen
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
/* set margin and padding 0*/
margin:0;
padding:0;
}
margin: 0;
on the body, it's the default margin.
Maybe remove margin and padding from the body :
body {
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
margin:0;
padding:0;
}
Just add margin: 0; to bodyto remove the default margin.
https://codepen.io/anon/pen/aWdwaG
Try adding this
background-size : cover;
in "body" of your CSS :
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
background-size: cover;
}
then try removing margin and padding of your body and that should do it!
You should also take a look at this article : https://css-tricks.com/perfect-full-page-background-image/
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>
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
<!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>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li id="pic1">
<a href="img/Jack.jpg">
<img src="img/Jack.jpg" width="500" height="400" alt="">
<p> This is me </p>
</a>
</li>
<li id="pic2">
<a href="img/Life.jpg">
<img src="img/Life.jpg"width="500" height="400" alt="">
<p> This concludes my life(lol!) </p>
</a>
</li>
<li id="pic3">
<a href="img/Study.jpg">
<img src="img/Study.jpg"width="500" height="400" alt="">
<p> This shows what I study </p>
</a>
</li>
<li id="pic4">
<a href="img/2.jpg">
<img src="img/2.jpg"width="500" height="400" alt="">
<p> This is what I believe</p>
</a>
</li>
</ul>
</section>
<footer>
<div id="mus">
<embed src="Neo.mp3" loop="true" autostart="true" height="55mm">
</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>
</div>
</body>
</html>
Here is my CSS
a {
text-decoration:none;
}
#wrapper {
max-width:940px;
margin: 0 auto;
padding: 0 5%;
}
#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;
}
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;
margin:0;
}
img{
max-width: 100%;
}
#gallery{
margin: 0;
padding: 0;
list-style: none; /** remove bullet point **/
}
#gallery li{
float:left;
width: 45%;
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;
}
Why it only takes a portion of the width of the webpage?
I tried to set max-width and width 100%, it did not work.
How do I make footer take 100% of the width of the webpage?
That is what I am trying to do.
Your footer is inside the div.wrapper. Move it outside of the div. You'll have to fix the margin.
your current structure is :
<div id="wrapper"> ... <footer> .. </footer> </div>
you have to pull out the footer from wrapper div like :
<div id="wrapper"> ... </div> <footer> .. </footer>
Demo
<!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>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li id="pic1">
<a href="img/Jack.jpg">
<img src="img/Jack.jpg" width="500" height="400" alt="">
<p> This is me </p>
</a>
</li>
<li id="pic2">
<a href="img/Life.jpg">
<img src="img/Life.jpg"width="500" height="400" alt="">
<p> This concludes my life(lol!) </p>
</a>
</li>
<li id="pic3">
<a href="img/Study.jpg">
<img src="img/Study.jpg"width="500" height="400" alt="">
<p> This shows what I study </p>
</a>
</li>
<li id="pic4">
<a href="img/2.jpg">
<img src="img/2.jpg"width="500" height="400" alt="">
<p> This is what I believe</p>
</a>
</li>
</ul>
</section>
</div>
<footer>
<div id="mus">
<embed src="Neo.mp3" loop="true" autostart="true" height="55mm">
</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>
Woking jsFiddle
Actually you must take out ... outside your main DIV
try this:
css
footer{
font-size: 1em;
text-align: center;
clear:both;
margin:0;
}
.footer_content{
width: 100%;
position: absolute;
left: 0;
font-size: 1em;
text-align: center;
clear:both;
padding-top: 20px;
color: #ccc;
line-height: 0.8em;
background: black;
margin:0;
}
html
<footer>
<div class="footer_content">
<div id="mus">
<embed src="Neo.mp3" loop="true" autostart="true" height="55mm">
</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>
</div>
</footer>