I've set the height of my wrapper to auto so it would automatically adjust to any screen but the wrapper isn't wrapping around the inner divs. The wrapper is seems to be 150px even though I don't know why. Note: The wrapper is the container.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Playstation 4 Home Page English</title>
<style type="text/css">
#import url("styles/Default Style.css");
#import url("styles/Homepage.css");
#import url("styles/styles.css");
</style>
<link rel="shortcut icon" href="images/icons/Playstation-logoicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../engine1/style.css" />
<script type="text/javascript" src="../engine1/jquery.js"></script>
</head>
<body style="background:#CCCCCC;">
<div id="Container">
<div id="Header"> <img src="images/Header.png" width="400" height="95"
style=
"position: absolute;
left: 189px;
top:10px;">
<div id="Social-Networks"><img src="images/icons/Playstation-logo.png" width="36" height="36"><img src="images/icons/1387937374_Youtube.png" width="36" height="36" style="margin-left:5px;"><a href="https://twitter.com/PlayStation" title="Officiële Playstation Twitter" target="_blank"><img src="images/icons/1387937314_Twitter.png" width="36" height="36"
style="margin-left:5px;"></a><img src="images/icons/1387947454_Facebook.png" width="36" height="36" style="margin-left:5px;"></div>
</div>
<div id="ContentHolder">
<div id='cssmenu'>
<ul>
<li class='active'><a href='homepage.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Artikelen</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Nederlands</span></a> </li>
<li class='has-sub'><a href='#'><span>Engels</span></a> </li>
</ul>
</li>
<li><a href='gallery.html'><span>Galerij</span></a></li>
<li style="float:right" class='last'><a href='#'><span>Over</span></a></li>
<li style="float:right" class='has-sub'><a href='#'><span>Contact</span></a></li>
</ul>
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="../data1/images/SonyPlaystationGeschiedenisSlider.jpg" alt="SonyPlaystationGeschiedenisSlider" title="Het onstaan van Het Gaming Icoon" id="wows1_0"/></li>
<li><img src="../data1/images/RemotePlayPS4PSVita.jpg" alt="RemotePlayPS4PSVita" title="Remote-Play voor de PS4 en PS Vita" id="wows1_1"/></li>
</ul></div>
<div class="ws_bullets"><div>
1
2
</div></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="../engine1/wowslider.js"></script>
<script type="text/javascript" src="../engine1/script.js"></script>
<div id="Side-Content">
<script type="text/javascript" src="http://output78.rssinclude.com/output?type=js&id=815822&hash=b0095ae8bebb910e5dc0f397a646173e"></script>
</div>
<div id="ContentHolder1">
<h1>Welkom op onze Playstation 4 News Website!</h1>
adjskl;fjaklsfdjaflds;
<hr>
lkdajf;lkdaj;fas
</div>
</div>
</div>
<div id="Copyright">©Copyright Mounteder Abdulrazag, Tom Borghouts</div>
</div>
</body>
</html>
And my CSS:
#charset "utf-8";
/* CSS Document */
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
#Container {
height:auto;
width: 975px;
margin-left:auto;
margin-right:auto;
background-color:#006;
overflow:hidden;
}
#Wrapper {
margin:auto;
background-color:#EEEEEE;
width: 975px;
margin-left: auto;
margin-right: auto;
}
#ContentHolder {
width:975px;
background-color:#0F0;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
#Header {
height: 125px;
margin-right: auto;
margin-left: auto;
background-color: #000;
width: 975px;
}
#Social-Networks {
height:36px;
width:164px;
margin-right:230px;
margin-top:80px;
float:right;
}
#Social-Networks img {
opacity:1;
}
#Social-Networks img:hover {
opacity:0.9;
}
#ContentHolder1 {
width:650px;
height:925px;
margin-left:42px;
margin-right:auto;
margin-top:-10px;
background-color:transparent;
color: #8B8B8B;
}
#Side-Content {
width:250px;
height:600px;
float:right;
background-color:transparent;
}
#Content1 {
width: 725px;
height:1235px;
color: #9B9B9B;
margin-top:-18px;
margin-left:5px;
background-color: #03C;
border-radius: 4px 0px 0px 0px;
text-align: center;
font-family: "Open Sans";
}
hr {
height: 1px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 4px;
}
#Copyright {
height: 25px;
width: 975px;
margin-right: auto;
margin-left: auto;
background-color: #0000d3;
text-align:left;
font-family:"Open Sans";
}
try
#Container {
float: left; //this
display: inline-block; // or this
}
Related
I am new to the CSS and HTML world and am struggling with my content overlapping whenever I resize my browser. If someone could take a look at my code and help me understand how to fix this issue that would help a lot! Thank you!
HTML:
<!doctype html>
<html>
<head>
<link href="java.js" rel="alternate stylesheet" type="text/javascript">
<link href="stylessheet.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<link href="gallery/src/paintwithlight/lightbox.css" rel="stylesheet">
<title>Neon Angels</title>
</head>
<body class="fix">
<div id="wrapper">
<div class="section black" id="section1">
<h2 id="welcome">The Neon Angels Welcome You!
<img src="wingslogo.svg" alt="" id="top">
<img src="wingslogo.svg" alt="" id="top2">
</h2>
<p>
<img src="wings.jpg" alt="wings" width="750" id="wings">
</p>
<ul class="nav">
<li>About Us</li>
<li>Painting with Light</li>
<li>Portraits</li>
<li>Nature</li>
<li>Contact Us</li>
</ul>
<div class="mouse">
<div class="mouse-icon">
<span class="mouse-wheel"></span>
</div>
</div>
</div>
<div class="section about" id="section2">
<h2 id="abouthead">About the Neon Angels</h2>
<p id="about">
The Neon Angels specialize in painting with light photography. We absolutely love that our job consist of playing in the dark with glow sticks for hours. Our motto at Neon Angels is: "Even when it gets dark do not forget that you can glow". We are a unique company that loves abstract art, but we also do nature photography and portraits. Below you will find a video showing the process of how we work.
</p>
<iframe width="620" height="415" src="https://www.youtube.com/embed/Xzjy6kTZxW0" frameborder="0" allowfullscreen></iframe>
<ul class="nav">
<li>Welcome</li>
<li>Painting with Light</li>
<li>Portraits</li>
<li>Nature</li>
<li>Contact Us</li>
</ul>
<div class="mouse">
<div class="mouse-icon" >
<span class="mouse-wheel" id="blackmouse"></span>
</div>
</div>
</div>
<div class="section paint" id="section3">
<h2 id="painthead">Painting with Light</h2>
<p id="painting">
Painting with light is an art that takes time and rhythm. Normally we handle our sessions jamming out to music because it requires a type of rhythmic nature that only arises like when music is involved. Please feel free to look through any of our pictures and if you too would like a painting session please visit our contact page.
</p>
<div id="paintpic">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/angelin.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/abstract.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/anna.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/blue_light.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/butterfly.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/clash.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/craze.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/flower.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/greenswirl.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/halfcircle.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/mindblown.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/mystic.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/radiation.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/rainbow.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/stuckcircle.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/swirl.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/whitelight.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/wings.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/yellow-blue.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/zeus.jpg" width="300" height="200">
</div>
<ul class="nav">
<li>Welcome</li>
<li>About Us</li>
<li>Nature</li>
<li>Portraits</li>
<li>Contact Us</li>
</ul>
<div class="mouse">
<div class="mouse-icon">
<span class="mouse-wheel"></span>
</div>
</div>
</div>
<div class="section nature" id="section4">
<h2 id="naturehead">Nature</h2>
<p id="nature">
The reason why Neon Angels takes on nature photography is to always find the most unique perspectives. There are many places on Earth that the human eye neglects to see and that is where photography comes in.
</div>
<ul class="nav">
<li>Welcome</li>
<li>About Us </li>
<li>Painting with Light</li>
<li>Portraits</li>
<li>Contact Us</li>
</ul>
<div class="mouse">
<div class="mouse-icon" >
<span class="mouse-wheel" id="blackmouse"></span>
</div>
</div>
</div>
<div class="section portraits" id="section5">
<h2 id="portraithead">Portraits</h2>
<p id="port">
Neon Angels Photography would love to capture you in the light. </br>
Please check out our portraits for what we could do for you!
</p>
<div id="portpic">
<img class="gallery" src="gallery/src/Portraits/JPEG/IMG_0679.jpg" width="200" height="300">
<img class="gallery" src="gallery/src/Portraits/JPEG/IMG_0789.jpg" width="200" height="300">
<img class="gallery" src="gallery/src/Portraits/JPEG/IMG_0793.jpg" width="200" height="300">
<img class="gallery" src="gallery/src/Portraits/JPEG/IMG_3202.jpg" width="200" height="300">
<img class="gallery" src="gallery/src/Portraits/JPEG/IMG_0986.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/Portraits/JPEG/IMG_4945.jpg" width="200" height="300">
</div>
<ul class="nav">
<li>Welcome</li>
<li>About Us</li>
<li>Painting with Light</li>
<li>Nature</li>
<li>Contact Us </li>
</ul>
<div class="mouse">
<div class="mouse-icon">
<span class="mouse-wheel"></span>
</div>
</div>
</div>
<div class="section contact" id="section6">
<h2 id="contacthead">Contact Neon Angels</h2>
<p id="paracontact">
The Neon Angels take pride in delivering the most unique photographs around and we would love to have you as a client. Please contact Neon Angels for any quetions about paint with light photography or a consult. Thank you!
</p>
<div id="last">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/anna.jpg" width="900" height="700">
</div>
<p> Phone Number: 859-772-2156
</br>
Email: neonangels#gmail.com
</p>
<ul class="nav">
<li>Welcome</li>
<li>About Us</li>
<li>Painting with Light</li>
<li>Nature</li>
<li>Portraits</li>
</ul>
<div class="mouse">
<div class="mouse-icon" >
<span class="mouse-wheel" id="blackmouse"></span>
</div>
</div>
</div>
<footer> <div id="parawork"><i>Copyright © May 2nd, 2016</i> | <i>Neon Angels Photography</i></div> <img src="wingslogo-white2.svg" alt="" id="bottom">
<img src="wingslogo-white2.svg" alt="" id="bottom2">
</br>
<i>Email: neonangelsphotography#gmail.com</i>
</br>
</br>
<i> Phone Number: 859-772-2156</i>
</footer>
</div>
<script src="gallery/src/js/lightbox.js"></script>
</body>
</html>
CSS:
#charset "utf-8";
*{
margin:0;
padding:0;
}
body{
font-family:aguafina-script;
font-size: 34px;
font-style: italic;
letter-spacing:-1px;
}
#wrapper{
width: 100%;
margin: 0 auto;
}
.section{
text-shadow: 1px 1px 2px #f0f0f0;
text-align: center;
}
#top{
width: 100px;
height: 100px;
float: right;
}
#top2{
width: 100px;
height: 100px;
float: left;
}
#port{
margin-left: 300px;
margin-right: 300px;
padding-top: 25px;
}
#paracontact{
margin-left: 300px;
margin-right: 300px;
padding-top: 25px;
}
.section p#about{
color:#000000;
}
.section h2#abouthead{
background:#00FFE3;
padding: 50px;
}
.section h2#naturehead{
background:#00FFE3;
padding: 50px;
color: black;
}
.section #welcome{
background: #00FFE3;
color:#000000;
border-bottom: thick solid #00FFE3;
border-bottom-width: 30px;
padding-top: 10px;
}
.black{
height: 1200px;
background: black;
}
.contact{
background: #00FFE3;
color:#000000;
border-bottom: thick solid #00FFE3;
border-bottom-width: 30px;
padding-top: 10px;
letter-spacing: .25px;
line-height: 40px;
}
.nature{
height: 1600px;
background: #00FFE3;
color:#000000;
border-bottom: thick solid #00FFE3;
border-bottom-width: 30px;
padding-top: 10px;
letter-spacing:.25px;
line-height: 40px;
}
.about{
color:#000;
background:#00FFE3;
height: 1400px;
letter-spacing: .25px;
line-height: 40px;
}
#about{
margin-left: 300px;
margin-right: 300px;
padding-top: 25px;
}
#painthead{
padding: 50px;
}
#contacthead{
margin: 50px;
}
#nature{
margin-left: 300px;
margin-right: 300px;
padding-top: 25px;
}
.paint{
height: 1700px;
background: black;
color: white;
line-height: 40px;
}
#paintpic{
padding-left: 250px;
padding-right:250px;
padding-bottom:50px;
}
#portpic{
padding-left: 250px;
padding-right:250px;
padding-bottom:50px;
padding-top: 50px;
}
#natpic{
padding-left: 250px;
padding-right:250px;
padding-bottom:50px;
padding-top:50px;
}
.portraits{
background: #000000;
color: white;
height: 1400px;
letter-spacing: .25px;
line-height: 40px;
}
#painting{
margin-right: 300px;
margin-left: 300px;
padding-bottom: 75px;
letter-spacing: .25px;
}
iframe{
margin-top: 50px;
margin-bottom: 60px;
border:thick solid #FF0086;
border-width: 30px;
}
.nav{
list-style: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.black ul li{
white-space: nowrap;
display:inline;
color:#aaa;
float:left;
}
.black ul li a{
padding:0px 10px;
color:#f0f0f0;
white-space: nowrap;
}
.black ul li a:hover{
text-decoration: none;
color: #80F9FF;
font-style: normal;
font-weight: 400;
font-family: aguafina-script;
white-space: nowrap;
}
.about ul li{
display: inline;
color:#aaa;
padding:2px;
}
.about ul li a{
color:#000000;
}
.about ul li a:hover{
text-decoration: none;
font-style: normal;
font-weight: 400;
font-family: aguafina-script;
color:#FF8A91;
}
#portraithead{
padding: 50px;
}
.nature ul li{
float:left;
padding:2px;
margin:5px;
color:#aaa;
}
.nature ul li a{
display:block;
color:#222;
}
.nature ul li a:hover{
text-decoration:none;
color:#000;
}
.portraits ul li{
padding: 5px;
margin:5px;
display:inline;
color:#aaa;
float:left;
}
.paint ul li a{
color:#f0f0f0;
}
.paint ul li a:hover{
text-decoration: none;
color: #80F9FF;
font-style: normal;
font-weight: 400;
font-family: aguafina-script;
}
.paint ul li{
padding: 5px;
margin:5px;
display:inline;
color:#aaa;
float:left;
}
.portraits ul li a{
color:#f0f0f0;
}
.portraits ul li a:hover{
text-decoration: none;
color: #80F9FF;
font-style: normal;
font-weight: 400;
font-family: aguafina-script;
}
.contact ul li{
padding: 5px;
margin:5px;
display: inline;
color:#aaa;
float:left;
margin-top: 80px;
}
.contact ul li a{
color:#000000;
}
.contact ul li a:hover{
text-decoration: none;
font-style: normal;
font-weight: 400;
font-family: aguafina-script;
color:#FF8A91;
}
.mouse{
margin-top: 10%;
margin-bottom:20%;
margin-left:50%;
width: 100px;
}
.mouse-icon{
width: 25px;
height: 45px;
border: 2px solid white;
border-radius: 15px;
cursor: pointer;
position: relative;
text-align: center;
}
.mouse-wheel{
height: 6px;
margin: 2px auto 0;
display: block;
width: 3px;
background-color: white;
border-radius: 50%;
-webkit-animation: 1.6s ease infinite wheel-up-down;
-moz-animation: 1.6s ease infinite wheel-up-down;
animation: 1.6s ease infinite wheel-up-down;
}
#blackmouse{
background-color:#000000;
}
#-webkit-keyframes wheel-up-down {
0%
{
margin-top: 2px;
opacity: 0;
}
30% {
opacity: 1;
}
100% {
margin-top: 20px;
opacity: 0;
}
}
#-moz-keyframes wheel-up-down {
0% {
margin-top: 2px;
opacity: 0;
}
30% {
opacity: 1;
}
100% {
margin-top: 20px;
opacity: 0;
}
}#keyframes wheel-up-down {
0% {
margin-top: 2px;
opacity: 0;
}
30% {
opacity: 1;
}
100% {
margin-top: 20px;
opacity: 0;
}
}
footer{
background-color:black;
text-align:center;
color: white;
padding: 30px;
height: 200px;
font-size:20px;
}
#bottom{
width: 100px;
height: 100px;
float: right;
}
#bottom2{
width: 100px;
height: 100px;
float: left;
}
#parawork{
margin-top: 50px;
}
#last{
padding-top: 50px;
padding-bottom: 50px;
}
I posted the part about your responsive video yesterday. Maybe you didn't see the code, I'll look after I see my kids for a while at the rest of what you have there
/* Flexible iFrame */
.flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" frameborder="0" style="border:0"></iframe>
</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
So i was trying to make a copy of the BBC website, and everything was fine until i tried i tried to zoom in.The header's color was slowly going away from right to left as i kept zooming in, is this some kind of browser bug or is there somthing wrong with my code?Everything looks good at 100% size. This is how it looks zoomed in http://i.imgur.com/GyZ6Wov.png
<!doctype html>
<html>
<head>
<title>Hristijan BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body,p,ul{
margin: 0;
font-family: Arial;
color: black;
padding:0;
}
#topMenu{
height: 40px;
font-size: 0.9em;
font-weight: bold;
}
.fixedWidth{
height: inherit;
width: 1000px;
margin: 0 auto;
}
#logo{
float: left;
padding:8px 6px 4.2px 4px ;
border-right: 1px solid gray;
}
#signIn{
float: left;
padding: 12px 85px 10px 10px;
border-right: 1px solid gray;
}
#signIn img{
float:left;
background-color: lightgray;
}
#signIn p{
float: left;
margin-left: 10px;
}
ul{
margin: 0;
list-style: none;
}
.headerItem{
float: left;
padding-left: 14px;
padding-top: 10px;
padding-right: 14px;
border-right: 1px solid gray;
padding-bottom: 13px;
}
#search{
float:left;
padding-top:10px;
padding-left: 10px;
}
#search input{
float:left;
height: 22px;
padding-left:5px;
width:140px;
background-color: lightgray;
border:none;
}
#search img{
float:left;
height: 20px;
}
#newsLine{
background-color: #BB1919;
height: 60px;
}
#newsLine p{
float: left;
color:white;
font-size: 2.5em;
padding-top:4px;
}
#navMenu{
background-color: #A91717;
height: 35px;
}
.mainMenuItem{
float:left;
color:white;
padding-top:0;
padding-left:0px;
padding-right: 15px;
margin-top:10px;
border-right: 1px solid orangered;
padding-left:5px;
}
h1{
color:gray;
}
h1:hover{
color: #1167A8;
}
#mainContent{
float:left;
width: 650px;
}
#description{
float:left;
text-align: justify;
float:left;
width: 225px;
color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="topMenu">
<div class="fixedWidth">
<div id="logo">
<img src="http://static.bbci.co.uk/frameworks/barlesque/2.93.13/orb/4/img/bbc-blocks- dark.png">
</div>
<div id="signIn">
<img src="http://static.bbci.co.uk/id/0.32.25/img/bbcid_orb_signin_dark.png">
<p>Sign in</p>
</div>
<ul >
<li class="headerItem">News</li>
<li class="headerItem">Sport</li>
<li class="headerItem">Weather</li>
<li class="headerItem">Shop</li>
<li class="headerItem">Earth</li>
<li class="headerItem">Travel</li>
<li class="headerItem">More...</li>
</ul>
<div id="search">
<input type="text" placeholder="Search">
<img src="http://static.bbci.co.uk/frameworks/barlesque/2.93.13/orb/4/img/orb-search-dark.png">
</div>
</div>
</div>
<div id="newsLine">
<div class="fixedWidth">
<p>NEWS</p>
</div>
</div>
<div id="navMenu">
<div class="fixedWidth">
<ul>
<li class="mainMenuItem">Home</li>
<li class="mainMenuItem">Video</li>
<li class="mainMenuItem">World</li>
<li class="mainMenuItem">UK</li>
<li class="mainMenuItem">Business</li>
<li class="mainMenuItem">Tech</li>
<li class="mainMenuItem">Science</li>
<li class="mainMenuItem">Magazine</li>
<li class="mainMenuItem">Entertainment & Arts</li>
<li class="mainMenuItem">Health</li>
<li class="mainMenuItem">In Pictures</li>
<li class="mainMenuItem">More</li>
</ul>
</div>
</div>
<div id="content">
<div class="fixedWidth">
<div id="mainContent">
<h1>Pope arrives in conflict with CAR</h1>
<div id="description">
<p>Pope Francis has arrived in the Central African Republic, a country torn apart by violence between Muslim rebels and Christian militias, on the last leg of his African tour.</p>
</div>
</div>
</div>
</div>
</div>
I try to implement the following list known from Word (SmartArt).
The lines can be straight.
Currently this is my solution:
HTML:
<div>
<div style="float: left; text-align: center; width: 55px;">
<hr width="2" size="20" class="hrInhouse">
</div>
</div>
<div style="clear: both;"></div>
<div>
<div style="float: left;"class="circleInhouse"></div>
<div style="float: left; width: 80%;">
<p class="boxInhouse">
Strategischer Verkauf <Seminarthemen>
</p>
</div>
</div>
<div style="clear: both;"></div>
<div>
<div style="float: left; text-align: center; width: 55px;">
<hr width="2" size="20" class="hrInhouse">
</div>
</div>
<div style="clear: both;"></div>
<div>
<div style="float: left;"class="circleInhouse"></div>
<div style="float: left; width: 80%;">
<p class="boxInhouse">
Prozessorientierte Verkaufstechnik <Seminarthemen>
</p>
</div>
</div>
<div>
<div style="float: left; text-align: center; width: 55px;">
<hr width="2" size="20" class="hrInhouse">
</div>
</div>
<div style="clear: both;"></div>
<div>
<div style="float: left;"class="circleInhouse"></div>
<div style="float: left; width: 80%;">
<p class="boxInhouse">
Team-Selling <Seminarthemen>
</p>
</div>
</div>
<div style="clear: both;"></div>
<div>
<div style="float: left; text-align: center; width: 55px;">
<hr width="2" size="20" class="hrInhouse">
</div>
</div>
<div style="clear: both;"></div>
CSS:
.box{
background: #415985;
color: white;
padding: 10px;
font-size: 12px;
}
.circle{
width: 50px;
height: 50px;
border-radius: 50px;
border: 2px solid #415985;
}
.hr{
padding: 0;
margin-bottom: 0;
margin-top: -5px;
}
Inline CSS will be outsourced to the CSS file.
However I'm not fully satisfied as the lines don't fit exactly to the circles and the boxes/rectangles have to be moved "behind" the circles.
How can this be done? I'm looking for a clean solution.
You can just use li's and pseudo-elements to do this
ul{
list-style:none;
}
li{
display:block;
width:200px;
height:70px;
padding:20px;
padding-left:80px;
font-size:28px;
color:#fff;
background:dodgerblue;
margin:10px 0;
position:relative;
}
li:after{
position:absolute;
content:"";
width:100px;
height:100px;
background:#fff;
border:5px solid dodgerblue;
border-radius:50%;
top:0px;
left:-50px;
}
ul:before{
content:"";
position:absolute;
width:5px;
height:500px;
background:#fff;
border:2px solid dodgerblue;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
This one has a bit more curved lines like you asked
ul{
list-style:none;
}
li{
display:block;
width:200px;
height:70px;
padding:20px;
padding-left:80px;
font-size:28px;
color:#fff;
background:dodgerblue;
margin:10px 0;
position:relative;
}
li:after{
position:absolute;
content:"";
width:100px;
height:100px;
background:#fff;
border:5px solid dodgerblue;
border-radius:50%;
top:0px;
left:-50px;
}
ul:before{
content:"";
left:-30px;
position:absolute;
width:100px;
border-radius:50%;
height:550px;
background:#fff;
border-right:5px double dodgerblue;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
To build on #Akshay's answer, you could also then modify each li if you know how many you are going to have.
ul {
list-style: none;
overflow: auto;
box-sizing: border-box;
margin: 10px;
}
ul::before {
content: '';
width: 350px;
height: 550px;
border-radius: 50%;
border: 8px double #0195cb;
border-left: 0;
position: absolute;
top: 25px;
left: -200px;
}
li {
display: block;
width: 200px;
height: 70px;
padding: 20px;
padding-left: 80px;
font-size: 28px;
color: #fff;
background: dodgerblue;
margin: 10px 10px;
position: relative;
}
li:after {
position: absolute;
content: "";
width: 100px;
height: 100px;
background: #fff;
border: 5px solid dodgerblue;
border-radius: 50%;
top: 0px;
left: -50px;
}
li:nth-child(2) {
margin-left: 50px;
}
li:nth-child(3) {
margin-left: 90px;
}
li:nth-child(4) {
margin-left: 50px;
}
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
Image map if you want it to look exactly like the picture.
DEMO
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flexCircle</title>
<style>
area { cursor:pointer; pointer-events:auto; }
</style>
</head>
<body>
<section>
<nav>
<img src="flexCircle.png" alt="" usemap="#fcMap" />
<map name="fcMap" id="fcMap">
<area alt="circleLink" title="Back" href="#" shape="circle" coords="75,64,45" />
<area alt="circleLink" title="Home" href="#" shape="circle" coords="101,171,45" />
<area alt="circleLink" title="Forward" href="#" shape="circle" coords="75,282,45" />
<area alt="bannerLink" title="About" href="#" shape="poly" coords="109,244,633,243,633,314,110,314,121,281" />
<area alt="bannerLink" title="Blog" href="#" shape="poly" coords="137,137,633,138,633,205,135,208,151,174" />
<area alt="bannerLink" title="Contact" href="#" shape="poly" coords="111,30,634,25,632,100,108,97,124,63" />
</map>
<!-- Coordinates generated with Easy Imagemap Generator by Dario D. Miller | http://imagemap-generator.dariodomi.de/ -->
</nav>
</section>
</body>
</html>
<!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