I'm create html page called AboutUs.html. I was tasked to complete the page but there is a problem. I want to align the three box in horizontally something like this:
but I try using some CSS code but still could not align in horizontal.
Wrong Output:
I want the first box to be left, for second box to be center and the third box to be right. Can anyone please help me fix this problem.
This is About.html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Two Trees Creative - About Us </title>
<link rel="stylesheet" href="_stylesheets/Css_Reset.css"/>
<link rel="stylesheet" href="_stylesheets/mystyle.css"/>
</head>
<body>
<div id="wrapper">
<header>
<a id="logo" href="#">Two Tree Creative</a>
<nav id="mainNav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section id="welcome">
<h1>Designing your world</h1>
<p>One pixel at a time</p>
</section>
<section id="about">
<h2>About us</h2>
<article id="about_info">
<p>Two Trees Creative is a full-service graphic design agency based in Ventura, CA. Our goal is to provide elegant work and unsurpassed customer service to our clients in every way.</p>
<h3>Meet Our Team of Creatives</h3>
<p>Collectively we have over 15 years experience in the graphic design industry, and our services include brand identity development, business cards, brochures, flyers, catalogs, and more. Thank you for considering us for your next project, and we hope to hear from you soon.</p>
</article>
<aside id="about_team">
<div class="row">
<div class="image">
<img src="_images/team/alex_morrales.jpg" alt="Alex Morrales" width="150" height="150">
<p>Alex Morrales</p>
</div>
<div class="image">
<img src="_images/team/david_kim.jpg" alt="David Kim" width="150" height="150">
<p>David Kim</p>
</div>
<div class="image">
<img src="_images/team/jenny_tabers.jpg" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
</div>
<div class="row"></div>
</aside>
</section>
<footer>
<p>Photoshop adapted from www.lynda.com - Photoshop CC for Web Designed by Justin Seeley</p>
</footer>
</div>
</body>
</html>
For mystyle.css code, under about_team id element i need to code something in order for the 3 box to be align in horizontally.
#wrapper {
max-width: 1280px;
margin: auto;
}
/*header*/
header {
background-color: white;
width:100%;
height: 165px;
text-align: center;
margin-top: 60px;
}
#logo {
background: url(../_images/ttc_logo.png) no-repeat;
width: 85px;
height: 85px;
margin: auto;
margin-bottom: 0px;
display: block;
text-indent: -9999px;
}
#welcome
{
background: url(../_images/banner.jpg);
width:100%;
height:650px;
overflow:hidden;
text-align:center;
color:white;
vertical-align:middle;
}
#welcome h1
{
font-size:4em;
font-family:'Adobe Garamond , serif';
padding-top:200px;
text-transform:uppercase;
}
#welcome p
{
font-size:3em;
font-family:'Adobe Garamond , serif';
font-style:italic;
font-weight:bold;
}
#about
{
margin:auto;
height:550px;
background-image:url(../_images/tree1.gif), url(../_images/tree1.gif);
background-position:-150px, 115%;
background-repeat:no-repeat, no-repeat;
}
#about h2
{
text-align:center;
text-transform: uppercase;
font: 3em 'Adobe Garamond, serif';
font-weight:bold;
padding-top:50px;
margin-bottom:25px;
color:rgb(82, 71,65);
}
#about h3
{
font:36px Arial, sans-serif;
margin-top:60px;
margin-bottom:10px;
color:rgb(134,118,92);
}
#about_info{
float:left;
margin: 0 auto;
padding-top:37px;
width:40%;
height:400px;
padding-left:125px;
}
#about_team
{
float:left;
margin: auto;
height:400px;
padding-top:37px;
padding-left:20px;
}
#mainNav{
width: 680px;
margin: auto;
}
#mainNav ul li {
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
}
#mainNav li a:link{
text-align: center;
display: block;
float: left;
width: 110px;
text-decoration: none;
text-transform: uppercase;
color: #5b866b;
margin: 20px 20px;
height: 20px;
padding: 5px;
border-radius: 5px;
}
#mainNav ul li a:hover,
#mainNav ul li a:focus
{
background: rgb(185,140,72);
color: white;
box-shadow: 2px 3px 4px 0px #CC9933;
}
footer{
background-color: #dee7e1;
text-align:center;
height:20px
padding:20px;
clear:both;
}
https://jsfiddle.net/ow6hc90f/1/
Just add
.image {
float: left;
}
and remove the float from this
#about_team {
/* float:left; */
margin: auto;
height:400px;
padding-top:37px;
padding-left:20px;
}
You can use CSS Flexbox. Make your three .image divs wrap under a parent div (.image-block - in my case).
Look at this Codepen
Something like this:
.image-block {
display: flex;
justify-content: center;
}
.image {
margin-right: 10px;
text-align: center;
}
<div class="image-block">
<div class="image">
<img src="http://placehold.it/200x200" alt="Alex Morrales" width="150" height="150">
<p>Alex Morrales</p>
</div>
<div class="image">
<img src="http://placehold.it/200x200" alt="David Kim" width="150" height="150">
<p>David Kim</p>
</div>
<div class="image">
<img src="http://placehold.it/200x200" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
</div>
Hope this helps!
Add width: 3 times (imageWidth+margin) into #about_team and add width: 150px and display: inline-block into .image. font-size: 0 in #about_team is to remove space between inline-block element, and you need to restore the size in the .image.
#about_team {
width: 480px;
float: right;
font-size: 0;
}
#about_team .image{
display: inline-block;
width: 150px;
margin-right: 10px;
font-size: 14px;
}
<aside id="about_team">
<div class="row">
<div class="image">
<img src="https://avatars3.githubusercontent.com/u/1024025?v=3&s=400" alt="Alex Morrales" width="150" height="150">
<p>Alex Morrales</p>
</div>
<div class="image">
<img src="https://pbs.twimg.com/profile_images/558109954561679360/j1f9DiJi.jpeg" alt="David Kim" width="150" height="150">
<p>David Kim</p>
</div>
<div class="image">
<img src="http://a5.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE5NDg0MDU0NTIzODQwMDE1.jpg" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
<div class="image">
<img src="http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE1ODA0OTcxNjk3OTMxNzg5.jpg" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
<div class="image">
<img src="http://i142.photobucket.com/albums/r96/thisdayinmusic/PaulMcCartneyHandsomePaul.png" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
<div class="image">
<img src="http://static.giantbomb.com/uploads/original/8/84561/1465721-georgeharrison.jpg" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
</div>
</aside>
Related
I have used flexbox already to try this, but for some reason it isn't working. On a smaller screen size, everything's centered. I tried doing justify-content: center for flexbox, but that isn't working. I will put down the code snippet as well as screen shots showing what I'm seeing. You may look at snippet, but it uses a combination of percents and pixels, so it may look weird. Can I handle simple centering without media queries? Even if I did use one, I still can't get it to center on my desktop.
html {
height: 100%;
}
body{
height: 100%;
margin: 0;
font-family: courier;
font-size: 19px;
}
#container {
min-height: 100%;
margin-bottom: -150px;
width: 100%;
}
#container:after {
content: "";
display: block;
}
#content{
display:flex;
float:left;
width: 800px;
flex-wrap: wrap;
justify-content: center;
}
#footer, #container:after{
height: 150px;
}
#footer{
background-color: #006699;
clear: both;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 120px;
color: white;
border-right: solid white 1px;
}
.sub:last-child{
border: 0px;
}
#leftbar{
width: 10%;
height: calc(100vh - 150px);
background-color: black;
float:left;
}
#rightbar{
width: 10%;
height: calc(100vh - 150px);
background-color: black;
float: right;
}
#nav {
list-style: none;
font-weight: bold;
width: 100%;
text-align: center;
background: rgba(0, 102, 153, 0.4);
height: 100px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: auto;
// background-color: #006699;
text-align: center;
}
#nav li {
margin: 0px;
display: inline-block;
}
#nav li a {
padding: 10px;
display: inline-block;
text-decoration: none;
font-weight: bold;
font-size: 30px;
color: white;
// background-color: #006699;
}
#nav li a:hover {
color: white;
text-shadow: 2px 2px 4px white;
}
.clear {
clear: both;
}
div.img {
margin: 5px;
border: 1px solid #595959;
float: left;
width: 180px;
}
div.img:hover{
border: 1px solid #b3b3ff;
}
div.img img {
width: 100%;
height: auto;
}
div.desc{
padding: 15px;
text-align: center;
}
div.head{
text-align:center;
background-color:black;
color: orange;
}
<!DOCTYPE HTML>
<html>
<head lang="en">
<link rel="stylesheet" type="text/css" href="new.css" />
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script>
</script>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>Home</li>
<li>Works</li>
<li>About</li>
</ul>
</div>
<div class="clear"></div>
<div class="upperbox">
<div id="leftbar"> </div>
<div id="rightbar"></div>
<div id="content">
<div class="img">
<div class="head">Color Palettes</div>
<img src="purple.png" alt="the color purple">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="blue.png" alt="the color blue">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="yellow.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="brown.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="grey.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="green.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="red.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="gold.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>
</body>
</html>
erase float:left; from #content and add margin: 0 auto to it.
You can either give your #content the CSS of margin: 0 auto;, like so:
#content {
margin: 0 auto;
}
(Maybe you will also have to not float it to the left)
Or you could take a look at other modern possibilities for centering an element:
https://css-tricks.com/centering-percentage-widthheight-elements/
https://css-tricks.com/centering-in-the-unknown/
https://codemyviews.com/blog/how-to-center-anything-with-css
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 asked this question before, but it was too confusing and I couldn't clarify it as well. I fixed my website and now doing test to make my responsive site work on different mobile platform. However, when open the site on Android mobile, everything is fall apart.
For responsive design, I am using external file and linking it to html like this.
here is the website http://www.sfu.ca/~nnabeel use mobile to open the site.
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:786px)" href="medium-style.css" /> <!--Tablet-->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="small-style.css" /> <!--Mobile-->
I am using meta-tag to make the site scale able to different platforms.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimun-scale=1.0, initial-scale=1.0"/>
Here is my HTML/CSS code for responsive design.
HTML:
<body>
<div id="controls">
Home
Work
About
</div>
<div id="pagewrap">
<div id="home">
<article>
<img src="images/Logo.png" width="150" height="150" alt="Logo"/>
<p>My name is Nabeel Muhammad and I change innovative ideas into design </p>
<div id="socialmedia">
<img src="images/twitter.jpg" height="40" width="40" alt="Twitter Logo"/>
<img src="images/linkedin.jpg" height="40" width="40" alt="Linkedin Logo"/>
</div> <!--Social Media Ends-->
</article>
<div id="skillslevel"><p>Skills Level</p></div>
<section>
<div id="psskills"> <img src="images/photoshop.png" width="40" height="40" alt="Adobe PhotoShop" /> </div>
<div id="psrating"> </div>
<div id="aiskills"> <img src="images/illustrator.png" width="40" height="40" alt="Adobe Illustrator" /> </div>
<div id="airating" > </div>
<div id="inskills"> <img src="images/indesign.png" width="40" height="40" alt="Adobe InDesign" /> </div>
<div id="inrating"0> </div>
<div id="dwskills"> <img src="images/dremweaver.png" width="40" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="dwrating"> </div>
<div id="prskills"> <img src="images/premier.png" width="40" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="prrating"> </div>
<div id="htmlskills"> <img src="images/html.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="htmlrating"> </div>
<div id="cssskills"> <img src="images/css.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="cssrating"> </div>
<div id="jsskills"> <img src="images/javascript.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="jsrating"> </div>
<div id="jqskills"> <img src="images/jquery.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="jqrating"> </div>
</section>
<div id="scale"> <img src="images/linebar.png" width="330" alt="Scale"/> </div>
<div id="ratingnumber">
<ul>
<li>1</li>
<li>5</li>
<li>10</li>
</ul>
</div>
</div> <!--Home Ends-->
</div>
CSS for mobile
#pagewrap {
width: 480px;
margin: 0 0 0 -0.6em;
position:relative;
}
#controls {
margin:-0.3em auto 0 -0.3em;
text-align: center;
width:480px;
font-family: 'Bebas';
font-size:1.87em;
background-color: #b0d8a3;
line-height:1.3em;
}
#controls a {
display: inline-block;
width: 480px;
margin: 0 auto;
background: #5cc3c1;
color: #fff;
text-decoration: none;
border-radius: 5px;
line-height: 32px;
}
#home article img {
position:relative;
left:3em;
top:4em;
}
#home article p {
font-size:2.5em;
font-family: 'Bebas';
text-align:left;
position:relative;
width:10em;
left:1em;
top:1em;
line-height:1.1em;
padding: 0 0;
}
#socialmedia {
position: relative;
top:-1.8em;
left:-0.5em;
margin-right:1em;
}
#socialmedia img {
position:absolute;
left:8em;
top: 2.5em;
}
/*Skills*/
#skillslevel {
position:absolute;
top:25em;
left:2.5em;
}
#skillslevel p {
font-size:1.5em;
font-family: 'Cabin';
}
section {
position: relative;
bottom:22.5em;
}
section #psskills {
position: absolute;
left:2.5em;
top:27em;
}
section #psrating {
width: 20.3em;
height: 2.3em;
background: #bfddc3;
position: absolute;
left:5.5em;
top:27em;
}
section #aiskills {
position: absolute;
left:2.5em;
top:30em;
}
section #airating {
width:18.6em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:30em;
}
section #inskills {
position:absolute;
left:2.5em;
top:33em;
}
section #inrating {
width:19.3em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:33em;
}
section #dwskills {
position:absolute;
left:2.5em;
top:36em;
}
section #dwrating {
width:19.8em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:36em;
}
section #prskills {
position:absolute;
left:2.5em;
top:39em;
}
section #prrating {
width:19.3em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:39em;
}
section #htmlskills {
position:absolute;
left:2.5em;
top:42em;
}
section #htmlrating {
width:20.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:42em;
}
section #cssskills {
position:absolute;
left:2.5em;
top:45em;
}
section #cssrating {
width:20.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:45em;
}
section #jsskills {
position:absolute;
left:2.5em;
top:48em;
}
section #jsrating {
width:14.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:48em;
}
section #jqskills {
position:absolute;
left:2.5em;
top:51em;
}
section #jqrating {
width:12.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:51em;
}
#scale {
position:absolute;
top:48.5em;
left:5.2em;
}
#ratingnumber ul{
position:absolute;
top:57em;
left:-6em;
list-style:none;
}
#ratingnumber ul li{
display:inline-block;
margin-left:9em;
font-family: 'Cabin';
font-size:16px;
}
I know its alot of CSS, some of you might find some of the things useless, but that is how I approach the problem.
So when I open the website in tablet, it works fine, but as soon as I open it in mobile, the design fell apart.
Thanks for the help.
I've noticed in your viewport you've spelt minimum in minimum-scale incorrectly.
This will break the scaling.
My footer isn't at the bottom of the page.
Solutions I have tried:
- W3C validator (now passed)
- Cleaning up code (indenting etc)
- Checked all divs and tags were ended
None of the above worked, and the problem still persists.
Here is a screen shot of the problem:
Please not the red bar across the middle is the footer. Its meant to be at the bottom, not in the middle of the page.
My Html:
<body>
<div id="call-back"></div>
<div id="header">
<br>
<span style="color:#BB2131;">
Welcome to Madhouse Creative </span>
<div style="float:right;">
<img src="images/social/twitter.png" class="social_button" alt="">
<img src="images/social/facebook.png" class="social_button" alt="">
</div>
<br>
<br>
<img src="images/logo.png" alt="logo">
<div id="nav">
<ul id="list-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div id="head-slider-break"></div>
<div id="home-slider">
<script type="text/javascript">
$(window).load(function()
{
$('#slider').nivoSlider();
});
</script>
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider" style="margin-top:30px;">
<img src="images/middleimage3.png" alt="" >
<img src="images/middleimage.png" alt="" >
<img src="images/middleimage2.png" alt="" >
</div>
</div>
</div>
<div id="wrapper">
<h1>A <span style="color:#BB2131;">WEB</span> AND <span style="color:#BB2131;">GRAPHIC DESIGN</span> COMPANY</h1>
<p>Madhouse Creative is a new, innovative company looking to bring a fresh look to how businesses market and present themselves on the internet with elegant designs that contain endless potential. Specialists in user immersing visualisations, they bring a unique approach to brand identity.</p>
<p>Based in Kent, working with business throughout the UK. We aim to change the way your business is seen, heard and talked about. Contact us today to see how we could help your business.</p>
<div style="width:960px;border:1px dashed #cccccc; margin-top:40px;"></div>
<h1>WHAT <span style="color:#BB2131;">WE</span> CAN <span style="color:#BB2131;">OFFER</span>?</h1>
<div id="what-we-offer" style="border:2px solid #cccccc;">
<div class="col">
<div class="red-box">
<h3 style="margin-top:0px;">WEB DESIGN</h3>
</div>
<img src="images/design-web-image.png" class="home-thumb-image" alt="">
</div>
<div class="col">
<div class="red-box">
<h3 style="margin-top:0px;">WEB MARKETING</h3>
</div>
<img src="images/web-marketing.png" class="home-thumb-image" alt="">
</div>
<div class="col">
<div class="red-box">
<h3 style="margin-top:0px;">GRAPHIC DESIGN</h3>
</div>
<img src="images/graphic-design.png" class="home-thumb-image" alt="">
</div>
<div class="col">
<div class="red-box">
<h3 style="margin-top:0px;">LOGO DESIGN</h3>
</div>
<img src="images/logodesign.png" class="home-thumb-image" alt="">
</div>
<div class="col">
<div class="red-box">
<h3 style="margin-top:0px;">VISUALIZATION</h3>
</div>
<img src="images/visualization.png" class="home-thumb-image" alt="">
</div>
<div class="col">
<div class="red-box">
<h3 style="margin-top:0px;">WEB APPS</h3>
</div>
<img src="images/web-marketing2.png" class="home-thumb-image" alt="">
</div>
</div>
</div>
<div id="footer">
</div>
Here is my CSS:
body {
background-color:#ffffff;
margin: 0px;
}
h1 {
font-family: "Helvetica Neue" bold;
color:#cccccc;
font-size: 35pt;
line-height: 1.1;
}
#content h1 {font-family: "Helvetica Neue" bold;
color:#cccccc;
font-size: 35pt;
line-height: 1.1;
margin-bottom: -10px;
}
h2, h3, h4, h5, h6{
font-family: "Helvetica Neue" bold;
color:#808080;
}
a {color:#BB2131; text-decoration: none;}
a:hover {color:#BB2131; text-decoration: underline;}
#header{height: 50px; width: 100%;font-family: "Helvetica Neue";
}
#home-slider {
margin:0 auto;width:960px; height:auto;
}
#head-slider-break {height:60px;}
#wrapper{
width:960px;
margin:0 auto;
color:#000000;
font-family: "Helvetica Neue";
font-size:12pt;
line-height:1.2;
word-spacing:1.5;
}
#social{
text-align: right;
padding-top: 4px;
}
#header1{height: 50px; width: 100%; background-image: url(images/header.png);}
#headtxt {margin-top: -40px;}
#nav {width:400px; float: right;}
ul#list-nav {
list-style:none;
padding:0px;
float: right;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
height: 40px;
padding: 7px;
color:#808080;
float:left;
text-align:center;
line-height: 3;
font-size: 15px;
font-family: "Helvetica Neue" bold;
font-weight: bolder;
}
ul#list-nav li a:hover {
color:#BB2131;
}
#head{
color: #ffff66;
font-family: ;
font-size: 30px;
}
.container {
padding-left: 20px;
padding-right: 20px;
}
.social_button {
width:36px;
height:36px;
}
#index_middle_image {
margin-top:30px;
}
#request_call_back {
margin-left:10px;
}
.nivoSlider {
position:relative;
width:960px; /* Change this to your images width */
height:397px; /* Change this to your images height */
background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position:relative;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
#redbox {background-image:url('images/red-box-for-web.png'); width:160px;
height:75px;;color:#ffffff; font-size:14pt;
font-family: "Helvetica Neue"; float:left; text-align:center; line-height:80px; padding-right: 30px;overflow: hidden;}
#greybox {background-image:url('images/grey-box-for-web.png'); width:160px;
height:75px;color:#BB2131; font-size:14pt;
font-family: "Helvetica Neue"; float:left;text-align:center;line-height:80px; padding-right: 30px; overflow: hidden;}
#what-we-offer .col {float: left; width: 315px; padding: 2px;}
#what-we-offer {width: 960px;margin-bottom: 10px;
padding: 5px;
height: auto;
float: left;}
.red-box {
background-image: url(images/red-box.png);
width: 315px;
height: 68px;
margin-bottom: 5px;
margin-top: 5px;
}
#what-we-offer h3 {color: #ffffff; text-align: center; line-height: 4;}
.home-thumb-image {width:315px; height: 179px;}
#call-back{background-image: url(images/REQUEST-CALL-BACK-2.png); float: right; width: 100px; height: 100px; top: 0; right: 0; position: fixed; }
#footer {background-image: url(images/footer2.png); height: 300px;}
#home-text {width:960px; height:auto;}
#header {
width:960px;
margin:0 auto;
font-family: "Helvetica Neue";
font-size:12pt;
word-spacing:1.5;
}
I have done my best to include any necessary code and edit out any unnecessary CSS.
If anyone could help diagnose what is wrong with my code and/or what I need to add it would be a great help.
It looks like you are floating #what-we-offer. Add clear:both to #footer to make sure you clear all the floating elements.
Try to add clear: both; to your footer's CSS. This should solve the problem.
I am new to webdesign and I thought I grasped the idea on how to make a layout. I am having a hard time positioning the images correctly in my layout to make a proper header.
The image posted is what i am trying to achieve. I posted the code I wrote which is totally wrong. Any help is appreciated! -thank you
http://img220.imageshack.us/img220/7097/helpcopy.jpg)
HTML
<div id="container">
<div id= "header">
<div id="leftimage">
<img src="images/1.jpg" alt="" width="604" height="85" />
</div>
<div id ="rightimage">
<div id="verticalimage">
<img src="images/2.jpg" alt="" width="29" height="85" />
</div>
<div id="horizontalimages">
<img src="images/3.jpg" alt="" width="182" height="32" />
<img src="images/4.jpg" alt="" width="182" height="22" />
<img src="images/5.jpg" alt="" width="182" height="31" />
</div>
</div>
</div>
</div>
CSS
body{
background: white;
font-family: Arial, Helvetica, sans-serif;
color:#7d806c;
font-weight: bold;
}
#container{
width: 1000px;
margin:0 auto;
outline: 1px dashed red;
}
#leftimage{
width:604;
height: 85;
float: left;
}
#rightimage{
width: 211;
height: 85;
float: right;
margin: 25px 0 0 0;
}
#verticalimage{
width:29;
height:85;
float:left;
}
#horizontalimages{
width:182;
height:85;
float: right;
}
There is no style for header so its not aligning the div properly. and px is missing in "horizontalimages" class. Add the below style in your css
#header {position:relative; background-color:#FFF}
#horizontalimages{width:182px; height:85px; float: right;}
I am just scripting this out by looking at your layout. Hopefully it will help you to figure out how to manage the floats. Output: http://jsfiddle.net/P3Sjk/
<html>
<body>
<style type="text/css">
* { margin:0px; padding:0px; }
div.header{ width:1000px; }
div.w604 { float:left; width:604px; height:85px; background-color:#65FF00; }
div.w29 { float:right; width:29px; height:85px; background-color:#000000 }
div.w182 { float:right; width:182px; height:85px; }
div.h32 { width:182px; height:32px; background-color:#FFD800; }
div.h22 { width:182px; height:22px; background-color:#FF4E00; }
div.h31 { width:182px; height:31px; background-color:#6601FF; }
</style>
<div class="header">
<div class="w604"></div>
<!---whitespace-->
<div class="w182">
<div class="h32"></div>
<div class="h22"></div>
<div class="h31"></div>
</div>
<div class="w29"></div>
</div>
</body>
</html>
You forgot to add px to the end of your CSS width/height declarations.
And with some reformatting of the floats, I came up with this:
http://jsfiddle.net/4gddY/.
Still trying to figure out the problem with the spacing between the horizontal images.
EDIT: Setting the images to display: block worked. http://jsfiddle.net/4gddY/1/
Here is the CSS:
body{
background: white;
font-family: Arial, Helvetica, sans-serif;
color:#7d806c;
font-weight: bold;
}
#container{
width: 1000px;
margin:0 auto;
outline: 1px dashed red;
}
#leftimage{
width:604px;
height: 85px;
float: left;
}
#rightimage{
width: 211px;
height: 85px;
margin: 25px 0 0 auto;
}
#verticalimage{
width:29px;
height:85px;
float:left;
}
#horizontalimages{
width:182px;
height:85px;
margin-left: auto;
}
img {
display: block;
}
i dont know how u want to display your header images
but on my guesses
you have try this
<div id="horizontalimages">
<img src="Images/image3.jpg" alt="" width="182" height="32" /><br />
<img src="Images/image4.jpg" alt="" width="182" height="22" /><br />
<img src="Images/image5.jpg" alt="" width="182" height="31" /><br />
</div>