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.
Related
So I am trying to create a website with recipes, so I put images of the recipes, with the name of the recipe underneath, but the problem is that they are not landing in the center beneath the image. They are the same distance apart, but I can't get each text to go under the image in the center. How would I do this? I would suggest viewing the result of the code in full view because I have not coded the website to work properly when the window is minimized. Also, you won't see the images because they are files on my computer.
<style>
body{
background: rgb(239,239,239);
padding:0;
margin:0;
}
a:nth-child(2) {
margin-left: 300px;
}
nav{
height: 120px;
length:relative;
background: rgb(250,131,131);
}
.header{
overflow:hidden;
background-color: white;
padding: 20px 10px;
}
.header-right a {
float:right;
color:black;
text-align:center;
padding:12px;
text-decoration:none;
font-family: 'Paprika', cursive;
font-size:18px;
line-height: 25px;
border-radius:4px;
font-size:14px;
}
.header a.logo{
font-size: 25px;
font-weight: bold;
float:left;
font-family:"Poppins", cursive;
text-decoration:none;
color:black;
letter-spacing: 10px;
}
.header-right a:hover{
background-color: rgb(248,248,248);
color:black;
}
.header a.active {
background-color: rgb(225,225,225);
color:black;
}
.header-right input[type=text] {
float:right;
padding:6px;
margin-top:9px;
margin-right:16px;
font-size:17px;
}
.latest{
font-family: "Pavanam", snas-serif;
text-align: center;
letter-spacing:8px;
}
.simple{
font-family: "Pavanam", snas-serif;
text-align: center;
letter-spacing:8px;
font-size: 12px;
margin-top:300px;
}
hr{
width:10%;
}
.doball:hover, .cookie:hover, .cake:hover, .snacks:hover{
transform:scale(1.2);
box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}
a:nth-child(2) {
margin-left: 300px;
}
.choccook{
height:150px;
margin-left:50px;
margin-top:100px;
margin-bottom:50px;
width:230px;
height:230px;
}
.oreocak, .coffcake, .granbar,.banbread, .cinnroll{
height:150px;
margin-left:1.5px;
margin-bottom:50px;
width:230px;
height:230px;
object-fit:cover;
}
.choccook:hover, .oreocak:hover, .coffcake:hover, .granbar:hover, .banbread:hover, .cinnroll:hover{
opacity:50%;
}
.recip{
margin-left:50px;
margin-top:-50px;
font-size: 14px;
font-weight: bold;
font-family:"Pavanam", cursive;
text-decoration:none;
color:black;
letter-spacing: 5px;
}
.recipnameone,.recipnametwo, .recipnamethree, .recipnamefour, .recipnamefive{
margin-left:100px;
}
.doball, .cookie, .cake, .snacks{
margin-left:30px;
margin-bottom:100px;
width:80px;
height:80px;
object-fit:cover;
transition: 0.5s ease;
border-radius:50%;
}
.categories{
margin-left:550px;
}
.circone{
font-size: 13px;
font-weight: bold;
font-family:"Pavanam", cursive;
text-decoration:none;
color:black;
letter-spacing:3px;
}
.categnames{
margin-left:40px;
margin-top:-120px;
}
.circtwo, .circthree, .circthree, .circfour{
margin-left:55px;
.recipnamefive{
font-size:13px;
}
.recippics{
margin-top:-80px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Bake It Simple</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Paprika&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pavanam&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
BAKE IT SIMPLE
<div class="header-right">
About
Recipes
<input type="text" placeholder="Search...">
</div>
</div>
<h3 class="latest">LATEST RECIPES</h3>
<hr>
<div class="recippics">
<img class="choccook" src="file:///C:/Users/Pranavi.Kedari/Pictures/cookies.jpg" href="#"></img>
<img class="oreocak" src="file:///C:/Users/Pranavi.Kedari/Pictures/oreocake.jpg" href="#"></img>
<img class="coffcake" src="file:///C:/Users/Pranavi.Kedari/Pictures/coffeecake.jpg" href="#"></img>
<img class="granbar" src="file:///C:/Users/Pranavi.Kedari/Pictures/granolabars.png" href="#"></img>
<img class="banbread" src="file:///C:/Users/Pranavi.Kedari/Pictures/bananabread.jpg" href="#"></img>
<img class="cinnroll" src="file:///C:/Users/Pranavi.Kedari/Pictures/cinnamonrolls.jpg" href="#"></img>
</div>
<p class="recip"><span class="recipname"> C.C. COOKIES</span> <span class="recipnameone"> OREO CAKE</span> <span class="recipnametwo"> COFFEE CAKE</span> <span class="recipnamethree"> GRANOLA BARS</span> <span class="recipnamefour"> BANANA BREAD</span> <span class="recipnamefive"> CINNAMON ROLLS</span></p>
<h3 class="simple">SO SIMPLE, IT TASTES BETTER</h3>
</hr>
<div class="categories">
<img class="doball" src="file:///C:/Users/Pranavi.Kedari/Pictures/doughcirc.jpg" href="#"></img>
<img class="cookie" src="file:///C:/Users/Pranavi.Kedari/Pictures/cookies.jpg" href="#"></img>
<img class="cake" src="file:///C:/Users/Pranavi.Kedari/Pictures/oreocake.jpg" href="#"></img>
<img class="snacks" src="file:///C:/Users/Pranavi.Kedari/Pictures/granolabars.png" href="#"></img>
<div class="categnames">
<p class="circone"> DOUGHS <span class="circtwo"> COOKIES</span> <span class="circthree"> CAKES</span> <span class="circfour"> SNACKS</span></p>
</div>
</div>
</div>
</body>
</html>
You have your recipe names separate from your recipe images, which is difficult (if not impossible) to get everything to align. It would be easier to associate the names with the images in separate blocks. I set each block to float left to show how to align the text, but you could use flex to setup how your recipes will work on different screen sizes.
.recipe {
position: relative;
float: left;
padding: 0;
margin: 0;
margin-left: 25px;
width: 150px;
}
.recipe img {
width: 100%;
height: auto;
}
.recipe p {
width: 100%;
text-align: center;
}
<div class="recippics">
<div class="recipe">
<img src="file:///C:/Users/Pranavi.Kedari/Pictures/cookies.jpg">
<p>C.C. COOKIES</p>
</div>
<div class="recipe">
<img src="file:///C:/Users/Pranavi.Kedari/Pictures/oreocake.jpg">
<p>OREO CAKE</p>
</div>
<div class="recipe">
<img src="file:///C:/Users/Pranavi.Kedari/Pictures/coffeecake.jpg">
<p>COFFEE CAKE</p>
</div>
</div>
For future questions, you don’t need to include all of the unused stuff like the header CSS. Just include enough to show the problem.
I have this website with a nav bar. at the moment the nav text (theory, More) gets bold the on hover, however i have been trying to make the text scale/grow in a smooth transition as it hovers. But the text only seems to bolden at the moment and i cannot get the text to scale up
may someone look over my code and note my mistake
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="Developer" content="Alejandro Muratalla / ElitePower">
<title>Power Training | Home</title>
<style>
body{
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
nav{
float: right;
margin-top: 10px;
}
/* Header */
header{
background: #0D98BA;
color: #FFD700;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF4500 3px solid;
}
#a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: all .1s ease-in-out
}
header ul{
margin: 0;
padding: 0;
}
header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding{
float: left;
}
header #branding h1{
margin: 0;
}
header .highlight, header .current a{
color: #000000;
font-weight: bold;
}
#a:hover{
font-weight: bold;
transform: scale(1.5);
}
/* Showcase */
#showcase{
min-height: 400px;
}
</style>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="images" style="max-width:500px">
<img class="slide1" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
<a>'s default display is inline. transform cannot be applied unless display is reset to value which allow sizing. (or formatting context). You can reset it to inline-block.
body {
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
float: right;
margin-top: 10px;
}
/* Header */
header {
background: #0d98ba;
color: #ffd700;
padding-top: 30px;
min-height: 70px;
border-bottom: #ff4500 3px solid;
}
.a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: all 0.1s ease-in-out;
display:inline-block;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header .highlight,
header .current a {
color: #000000;
font-weight: bold;
display: inline-block;
}
.a:hover {
font-weight: bold;
transform: scale(1.5);
}
/* Showcase */
#showcase {
min-height: 400px;
}
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="images" style="max-width:500px">
<img class="slide1" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
Note: I turned the three id="a" into class="a"
So to start off let me just note that I am not tech savy at all. I find most computers difficult and I wouldn't be taking this class unless I needed it to graduate from my university.
I'm trying to make a webpage for class thats due tomorrow and I am struggling to get all my stuff positioned properly. I made a mock up design in photoshop for what I'm trying to achieve but actually implementing it has been beyond fustrating.
Most floats aren't working(Probably my fault since I'm struggling to understand the concept).
I also made a secondary background image but its registering as a normal one I think.
Also is there a string of code I can use to center everyting like it is in my mock up?
How its suppose to look
How mine looks
My code:
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x;
}
#HeaderImage{
background-image: url(../img/HeaderImage.png);
background-repeat: no-repeat;
z-index: 1;
background-position: left;
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
text-align: center;
}
/* Nav Element */
/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}
.site-navigation {
height: 155px;
}
.site-navigation img {
margin-top: 16px;
float:left;
}
.site-navigation ul {
width: 490px;
margin: 0 auto;
}
.site-navigation li {
margin: 35px 33px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* Header Element */
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
border-bottom: 1px solid #d9d9d9;
margin: auto;
margin-top: 115px;
padding-bottom: 42px;
}
.search{
}
.SearchGlass{
float: left;
position: top;
}
<div class="container"></div>
<header class="Team Sky">
<nav class="site-navigation">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
<ul class="clearfix">
<li>shop</li>
<li>checkout</li>
<li>video</li>
</ul>
<!-- SEARCH BAR AND MAGNIFYING GLASS!-->
<div class="SearchGlass" id="SearchGlass">
<img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>
<form>
<div class="search">
<!-- don't need a label here - use placeholder="" (see forms we did in class - it's on moodle -->
<label for="search">search</label>
<input id="search" type="text" name="search"/>
</div>
</form>
</nav>
<div id="HeaderImage">
<img src="img/HeaderImage.png" alt="Dude on a bike">
</div>
<!-- need to close your form element -->
<div class="TeamSkylogo">
<h2>Team Sky</h2>
</div>
<div class="RoadToYellow">
<P>the road to yellow</P>
</div>
<!--Shop Team Sky-->
<main>
<h1> TEAM NEWS </h1>
<!-- each article/blog should be in it's own container -->
<div class="articleone">
<img src="img/ArticleImageOne.png" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
<div class="articletwo">
<img src="img/ArticleImageTwo.png" alt="Bikes by River">
<h1>Krudder Gets a Break</h1>
<P>The powerful German who was a rock in the beginning of the season will now get a break from and is expected to return for the Malecour at the end of the season</P>
<!--readon !-->
</div>
<div>
<img src="img/ArticleImageThree.png" alt="Bike Dudes Biking">
<h1>Kinnick's New Contract</h1>
<P>Peter Kinnick contract is still not settled with the team manager Alistar McDowell saying that a new contract offer has been made</P>
<!--readon !-->
</div>
<div class="articlefour">
<img src="img/ArticleImageFour.png" alt="Single Guy On Bike">
<h1>Froom In Third</h1>
<P>Chris Froom Finished Third in the opening prologue stage at the Criterium du Dauphine with a strong showing on the first day</P>
<!--readon !-->
</div>
</main>
<footer>
<img src="img/sponsor1.png" alt="Team Sky Sponsor">
<img src="img/sponsor2.png" alt="Pinarello">
<img src="img/sponsor3.png" alt="Shimano">
<img src="img/sponsor4.png" alt="Rayha">
<img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>
THANK YOU FOR YOUR HELP
This might help you, but there are lot of issues in the above given code,hope you can get it correct , try this code for now
body {
background-image: url(../img/background.png);
background-repeat: repeat-x;
}
#HeaderImage{
background-image: url(../img/HeaderImage.png);
background-repeat: no-repeat;
z-index: 1;
background-position: left;
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
text-align: center;
}
/* Nav Element */
/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}
.site-navigation {
height: 155px;
}
.site-navigation img {
margin-top: 16px;
float:left;
}
.site-navigation ul {
width: 490px;
margin: 0 auto;
}
.site-navigation li {
margin: 35px 33px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* Header Element */
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
border-bottom: 1px solid #d9d9d9;
margin: auto;
margin-top: 115px;
padding-bottom: 42px;
}
.search{
}
.SearchGlass{
float: left;
position: top;
}
.article{
float: left;width: 100%;margin-bottom: 15px
}
.article img {float: left;width: 28%;margin-right: 1%}
.article h1{float:left;width: 70%;margin: 5px 0;text-align: left;}
.article p{float:left;width: 70%;margin: 5px 0;text-align: left;}
h1{text-align: left;}
footer{display: block;width: 100%;float: left;}
<div class="container">
<header class="Team Sky">
<nav class="site-navigation">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
<ul class="clearfix">
<li>shop</li>
<li>checkout</li>
<li>video</li>
</ul>
<!-- SEARCH BAR AND MAGNIFYING GLASS!-->
<div class="SearchGlass" id="SearchGlass">
<img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>
<form>
<div class="search">
<!-- don't need a label here - use placeholder="" (see forms we did in class - it's on moodle -->
<label for="search">search</label>
<input id="search" type="text" name="search"/>
</div>
</form>
</nav>
<div id="HeaderImage">
<img src="img/HeaderImage.png" alt="Dude on a bike">
</div>
<!-- need to close your form element -->
<div class="TeamSkylogo">
<h2>Team Sky</h2>
</div>
<div class="RoadToYellow">
<P>the road to yellow</P>
</div>
<!--Shop Team Sky-->
<div>
<h1> TEAM NEWS </h1>
<!-- each article/blog should be in it's own container -->
<div class="article">
<img src="http://via.placeholder.com/600x500" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
<div class="article">
<img src="http://via.placeholder.com/600x500" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
</div>
<footer>
<img src="img/sponsor1.png" alt="Team Sky Sponsor">
<img src="img/sponsor2.png" alt="Pinarello">
<img src="img/sponsor3.png" alt="Shimano">
<img src="img/sponsor4.png" alt="Rayha">
<img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>
</div>
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>
http://i.stack.imgur.com/SEFNd.png
I'm new to HTML5 so my code is likely to be messy, I'm trying to lay out block elements as shown above, but because I've chosen the body to float left it ends up below the slideshow. Here's how I've coded it:
#container {
height: 800px;
width: 985px;
position:relative;
}
<article>
<span class="titlespacer">title text here</span></p>
<ul>
<li class="bodyspacer">Bullet</li>
<span class="bodyspacer"><br>
</span>
<li class="bodyspacer">Bullet</li>
<span class="bodyspacer"><br>
</span>
<li class="bodyspacer">Bullet</li>
<span class="bodyspacer"><br>
</span>
<li class="bodyspacer">Bullet</li>
<span class="bodyspacer"><br>
</span>
<li class="bodyspacer">Bullet</li>
</ul>
<aside>
<div id="slideshow">
<img src="images/polaroid1.jpg" width="320" height="332" class="polaroid">
<img src="images/polaroid2.jpg" width="320" height="332" class="polaroid">
<img src="images/polaroid3.jpg" width="320" height="332" class="polaroid">
</div>
</aside>
</article>
CSS
#slideshow {
height: 332px;
width: 320px;
float: none;
clear:both;
}
.bodyspacer {
font-weight: normal;
font-size: 18px;
font-family: 'droid sans', Arial, Helvetica, sans-serif;
text-align: left;
display: block;
float: left;
width: 460px;
padding-right: 70px;
line-height: 20px;
margin-left: 80px;
padding-left: 5px;
list-style-image: url(../fishing/images/rod.png);
clear: none;
overflow: hidden;
}
.titlespacer {
font-family: 'Arvo', Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: 400;
text-align: center;
display: block;
float: left;
width: 435px;
padding-left: 50px;
padding-right: 50px;
background-repeat: no-repeat;
background-color: #1B378B;
margin-right: 10px;
height: 35px;
color: #FFF;
margin-top: 30px;
padding-top: 10px;
border: 3px double #FFF;
margin-left: 40px;
}
you'll need the following:
your css
#container {
width:960px;
position:relative;
}
header{
float:left;
}
article{
width:600px;
float:left;
}
aside{
width:360px;
float:left;
}
.clear{
clear:both;
}
your html5
<div id="container">
<header>your header</header>
<article>
<section>your content</section>
</article>
<aside>
<div id="slideshow">
<ul>
<li><img src="..."></li>
<li><img src="..."></li>
</ul>
</div>
</aside>
<div class="clear"></div>
<footer>your footer</footer>
</div>
i hope it helped you!