Hello I have a problem regarding the footer part of this web page like for some reason the footer doesnt line up properly and im not sure whats wrong with it
this is what its supposed to look like (https://imgur.com/Bmvfbrx) but this is what it looks like (https://imgur.com/vY1kPTH). Just please tell me what i did wrong and that will be appreiated please and thank you.Also I have 0 errors on validator too.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="cyclestyle.css">
<title>Cycling Tours</title>
</head>
<body>
<div id="container">
<section id="header">
<header>
<nav>
<ul>
<li>About us</li>
<li>Ask Us</li>
<li>Destination</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Reviews</li>
<li>Trip Prep</li>
</ul>
</nav>
<h1>Cycling Tours</h1>
<figure>
<img id="banner" src="images/cycling_banner.png" alt="cycling">
</figure>
</header>
</section>
<section id="aboutus">
<h3> About Us </h3>
<p> Cycling Tours began when Bill Randolf and three of his friends from high school began to cycle regularly every weekend. Their routine cycling evolved into frequent cycling trips and they cultivated a following. Before they knew it, other friends and family members asked to join them in their trips.</p>
<img src = "images/cyclists.jpeg" alt="cyclists" class = "floatright">
<p>Cyclists are enthusiastic and very health and environmentally conscious. For this reason, all of our trips include vegan options for meals, recycled paper food serving utensils, and hybrid vehicles to escort the cyclists.</p>
<p>Our trips are suitable for solo cyclists, couples, friends, and families. We provide camping accommodation for off-road cycling trips, and shared accommodations for couples, friends and families. If you are travelling solo, we can match you with someone for shared accommodations. You can also pay the single-supplement if you wish to have a room of your own.</p>
<p>After you've completed one trip with us, we're sure you'll want to do more. Over 80% of our customers have been on at least one prior trip with us. We're always looking for new ideas for trips, so please let us know if you have any ideas!</p>
</section>
<section id="tripinfo">
<h3>Trip Information</h3>
<br>
<p>Our trips are planned carefully to provide the best experience for cyclists.</p>
<br>
<p>Types of trips include self-contained camping tours, inn-to-inn tours and other adventure cycling.</p>
</section>
<footer>
<div id = "footer">
<hr>
<hr>
<p>Cycling Tours✻ P.O. Box 4455✻ Brantford,ON✻ N3T 2J0 <br> Image Credit: http://www.bikelink.com/images/banner01.jpg </p>
</div>
</footer>
</div>
</body>
</html>
cyclestyle.css
* {
margin: 0;
padding: 0;
}
body {
height:90vh;
}
p {
text-indent: 50px;
line-height:1.5em;
}
#tripinfo {
background-color:#bbccdd;
float:right;
width:20%;
height:68.5vh;
}
header {
}
#banner {
width:100%;
}
nav {
list-style-type: none;
text-align: center;
text-decoration: none;
}
nav li {
display: inline ;
}
#container {
width: 1000px;
margin: 20px auto;
}
* {
box-sizing: border-box;
}
nav a{
border: 2px solid black;
padding: 8px;
border-radius:10px 10px 0px 10px;
text-decoration:none;
background-color:#bbccdd;
color:white;
font-family: verdana;
font-weight:bold;
}
a:hover {
color: black;
}
#aboutus {
float:left;
width:80%;
height:80vh;
}
h1 {
position:absolute;
font-family:Verdana;
color:White;
font-size:3.5em;
}
h3 {
font-family:Verdana;
}
p {
font-family:Verdana;
font-size:.90em;
}
#footer {
text-align:centre;
font-weight:bold;
}
#container {
width: 1000px;
}
You are almost there. Need to remember when you use the float. Always create another div that use CSS clear:both and it will push the next div to the bottom.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="cyclestyle.css">
<title>Cycling Tours</title>
</head>
<body>
<div id="container">
<section id="header">
<header>
<nav>
<ul>
<li>About us</li>
<li>Ask Us</li>
<li>Destination</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Reviews</li>
<li>Trip Prep</li>
</ul>
</nav>
<h1>Cycling Tours</h1>
<figure>
<img id="banner" src="images/cycling_banner.png" alt="cycling">
</figure>
</header>
</section>
<section id="aboutus">
<h3> About Us </h3>
<p> Cycling Tours began when Bill Randolf and three of his friends from high school began to cycle regularly every weekend. Their routine cycling evolved into frequent cycling trips and they cultivated a following. Before they knew it, other friends and family members asked to join them in their trips.</p>
<img src = "images/cyclists.jpeg" alt="cyclists" class = "floatright">
<p>Cyclists are enthusiastic and very health and environmentally conscious. For this reason, all of our trips include vegan options for meals, recycled paper food serving utensils, and hybrid vehicles to escort the cyclists.</p>
<p>Our trips are suitable for solo cyclists, couples, friends, and families. We provide camping accommodation for off-road cycling trips, and shared accommodations for couples, friends and families. If you are travelling solo, we can match you with someone for shared accommodations. You can also pay the single-supplement if you wish to have a room of your own.</p>
<p>After you've completed one trip with us, we're sure you'll want to do more. Over 80% of our customers have been on at least one prior trip with us. We're always looking for new ideas for trips, so please let us know if you have any ideas!</p>
</section>
<section id="tripinfo">
<h3>Trip Information</h3>
<br>
<p>Our trips are planned carefully to provide the best experience for cyclists.</p>
<br>
<p>Types of trips include self-contained camping tours, inn-to-inn tours and other adventure cycling.</p>
</section>
<div class="clearfix"></div>
<footer>
<div id = "footer">
<hr>
<hr>
<p>Cycling Tours✻ P.O. Box 4455✻ Brantford,ON✻ N3T 2J0 <br> Image Credit: http://www.bikelink.com/images/banner01.jpg </p>
</div>
</footer>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
height:90vh;
}
p {
text-indent: 50px;
line-height:1.5em;
}
#tripinfo {
background-color:#bbccdd;
float:right;
width:20%;
height:68.5vh;
}
header {
}
#banner {
width:100%;
}
nav {
list-style-type: none;
text-align: center;
text-decoration: none;
}
nav li {
display: inline ;
}
#container {
width: 1000px;
margin: 20px auto;
}
* {
box-sizing: border-box;
}
nav a{
border: 2px solid black;
padding: 8px;
border-radius:10px 10px 0px 10px;
text-decoration:none;
background-color:#bbccdd;
color:white;
font-family: verdana;
font-weight:bold;
}
a:hover {
color: black;
}
#aboutus {
float:left;
width:80%;
/* height:80vh; */ /* I remove this line */
}
h1 {
position:absolute;
font-family:Verdana;
color:White;
font-size:3.5em;
}
h3 {
font-family:Verdana;
}
p {
font-family:Verdana;
font-size:.90em;
}
.clearfix {
clear:both;
}
#footer {
text-align:center;
font-weight:bold;
}
#footer p {
padding-top:10px;
}
#container {
width: 1000px;
}
DEMO
To fix the margin you could try adding float:right;width:100%; into #footer and adding:
#footer p {
padding-top:10px;
padding-left:20%;
}
to fix the whacky text format.
#footer and #footer p:
#footer {
text-align:centre;
font-weight:bold;
float:right;
width:100%;
}
#footer p {
padding-top:10px;
padding-left:20%;
}
If you want to add some thickness into your hr line you could also add:
hr {
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
}
Result:
Related
My website will not scroll vertically. This is stopping some of the content being displayed. I have tried to fix this but so far I have had no success using the the CSS overflow property. This is not scrolling in Google Chrome and is not bringing up any errors when I use the developer tools.
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Football Informer</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<div class="container">
<img src="https://www.freewebheaders.com/wordpress/wp-content/gallery/football/world-cup-goal-keeper-sport-website-header.jpg" class="header_img" alt="Error">
<div class="text">
<h1>The Football Informer</h1>
<p class="strapline">The Home of Football</p>
</div>
</div>
<ul>
<li><a class="active" href="home.html">Home</a></li>
<li>About</li>
</ul>
<div class="main_text">
<p class="intro_home_page">Welcome to The Football Informer. This is the place to keep up to date with the footballing world.<br>
Keep up to date with the big roomers about transfers and club takeovers. Or follow the Premier League fight in the leagues featured section. If you have any suggestions about the site please see the About page to see our contact information.</p>
<div class="heading">
<h1>Featured Articles</h1>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://thefootballfaithful.com/allardyce-reveals-cenk-tosun-struggles/" target="blank">
<p class="article_title ">Allardyce reveals Cenk Tosun struggles.</p>
<img src="https://i1.wp.com/thefootballfaithful.com/wp-content/uploads/2018/02/img_7476.jpg?resize=660%2C330" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Less than a month after joining Everton for £27m, Sam Allardyce has revealed that Cenk Tosun is struggling to adapt to life in the Premier League.</p>
<p class="article_intro">The Turkish international sat out of the Toffees’ 5-1 humbling at the hands of Arsenal on Saturday evening, with the once outcasted Oumar Niasse selected to start the game.<br>
Speaking after the defeat, Allardyce that the 26-year-old has struggled with the ‘pace and physicality of the game.’</p>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://www.skysports.com/football/news/11715/11237193/leeds-sack-head-coach-thomas-christiansen-after-cardiff-thrashing" target="blank">
<p class="article_title ">Leeds sack head coach Thomas Christiansen after Cardiff thrashing</p>
<img src="http://e0.365dm.com/17/09/16-9/20/skysports-thomas-christiansen-leeds_4110664.jpg?20170925180918" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Leeds have sacked head coach Thomas Christiansen after a 4-1 thrashing at home to Cardiff on Saturday - their sixth Championship game without a win.</p>
<p class="article_intro">Christiansen's side had been without a win since Boxing Day and a spate of ill-discipline had seen three different players sent-off in four games.<br>
Leeds had been pushing for a place in the top six but slipped to 10th after the Cardiff defeat and the club announced his departure just over 24 hours later.<br>
Statement "Leeds United can confirm that head coach Thomas Christiansen has left the club."
</p>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://www.skysports.com/football/news/11685/11240190/patrice-evra-completes-free-transfer-to-west-ham" target="blank">
<p class="article_title ">Patrice Evra completes free transfer to West Ham</p>
<img src="https://www.wessexfm.com/news/images/feed.php?url=http%3A%2F%2Fe3.365dm.com%2F18%2F02%2F640x380%2Fskysports-patrice-evra-west-ham-united-premier-league-football-pose-posing_4225196.jpg%3F20180207173535" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Patrice Evra has completed his free transfer to West Ham and signed a contract until the end of the season.</p>
<p class="article_intro">Evra, 36, arrived at the club's Rush Green training complex on Wednesday morning before passing a medical and signing a short-term contract until the end of June 2018.<br>
Sky Sports News understands Everton were also interested in the former Manchester United, Juventus and Monaco left-back but the player favoured a move to London.</p>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://www.skysports.com/football/news/11685/11240190/patrice-evra-completes-free-transfer-to-west-ham" target="blank">
<p class="article_title ">Patrice Evra completes free transfer to West Ham</p>
<img src="https://www.wessexfm.com/news/images/feed.php?url=http%3A%2F%2Fe3.365dm.com%2F18%2F02%2F640x380%2Fskysports-patrice-evra-west-ham-united-premier-league-football-pose-posing_4225196.jpg%3F20180207173535" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Patrice Evra has completed his free transfer to West Ham and signed a contract until the end of the season.</p>
<p class="article_intro">Evra, 36, arrived at the club's Rush Green training complex on Wednesday morning before passing a medical and signing a short-term contract until the end of June 2018.<br>
Sky Sports News understands Everton were also interested in the former Manchester United, Juventus and Monaco left-back but the player favoured a move to London.</p>
</div>
</div>
</body>
</html>
.container {
position: relative;
margin-top: 0;
margin-bottom: 0;
height:150px;
}
.header_img {
width:100%;
height:150px;
margin:0;
}
.text {
font-size:26px;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
color:red;
}
.strapline {
font-size:22px;
position: absolute;
top: 70px;
left: 50%;
transform: translate(-50%, -50%);
color:red;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #666666;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
.main_text {
margin-left:15%;
width:85%;
position: fixed;
height:100%;
background-color: #b3b3b3;
margin-top: 0;
margin-bottom: 0;
}
.intro_home_page {
font-size:20px;
text-align: center;
}
.heading {
background-color:red;
}
.article_title {
color:white;
font-size:24px;
}
.article_intro {
font-size:18px;
}
.article_strapline {
font-size:18px;
font-weight:bold;
}
.grey_background {
background-color:grey;
height:30px;
}
.interesting_article_img {
height:165px;
width:330px;
float: left;
}
img {
border: 0;
}
p, h1 {
margin: 0;
}
.featured_articles_format{
height:195px;
}
Any suggestions are greatly appreciated and I hope that I have asked a precise enough question.
You need to change the .main-text style. The position fixed is preventing scrolling.
.main_text {
margin-left:15%;
width:85%;
position: relative;
height:100%;
background-color: #b3b3b3;
margin-top: 0;
margin-bottom: 0;
}
This will fix the scrolling problem, may have to refactor the markup to make it look proper. Maybe look into using a css library/framework. Save you a lot of time and effort.
http://jsbin.com/qabewarawi/1/edit?html,css,output
It's been about 5 years since my intro to website design class and I just wanted to add a clickable image below my nav float left and when I added it, it took up the css properties of the nav left div since it was inside the div. So i put it in its own div and when i cleared both on it to bring it below the nav for some reason it seems connected to the sidebar div and it gets cleared too and is at the same height as the image for some reason and i don't know how to fix it. I have researched floating with css and can't seem to find my solution.
Thank you
image of the website issue => website
Below is the HTML for the complete page but the issues lies within the div newtab & div sidebar
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battle Ready</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="battlefield.css">
<link href="images/favicon.ico" rel="icon" type="image/x-icon"/>
</head>
<body>
<!--The fonts I used were verdana for the body and sidebar and table
headings, Agnes for the main titles under the banner, and BankGothic
Md BT for the navigation.-->
<script type="text/javascript">
<!--
alert("Welcome to BattleReady.com! This page is to inform you about
each of the playable kits on the videogame Battlefield 3 and how to
effectively use them. If you do not have the game, you should
definitely try it out!");
// -->
</script>
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Assault</li>
<li>Engineer</li>
<li>Support</li>
<li>Recon</li>
</ul>
</div>
<div id="newtab"
style="clear:both;">
<a href="images/BF3.jpg" target="_blank"><img
src="images/BF3_thumb.png" width="101" height="128" alt="Battlefield 3
Game Cover" style="width:101px;height:128px;border:0px;"></a>
</div>
<div id="sidebar">
<h3>Upcoming Events</h3>
<p class="events">With purchasing Battlefield Premium© you get
early access to future DLC. Coming out soon is DICE's new
expansion pack "After Math" which comes out December 4th.
For more information about Premium© and other upcoming
expansion packs, visit
<a href="http://battlelog.battlefield.com/bf3/premium/"
target="blank">Premium</a>.</p>
<h3>Social</h3>
<p class="events">• Dice's Battlefield 3 Twitter
will provide you more information
about any upcoming changes to the game.</p>
<p class="events">• Dice's Battlefield 3 <a
href="https://www.facebook.com/battlefield"
target="_blank">Facebook</a> will showcase community videos
and provide trailers and more information about the game.</p>
</div>
<div id="center">
<h2>What is Battle Ready?</h2>
<p>DICE's Battlefield 3 was released October 25, 2011. Heralded as
"The Call of Duty Killer" Battlefield 3 has lived up to the hype.
Whether you were
there at the midnight release of the game or you are about to
purchase it today the level of being ready for the battlefield is
determined by the skill of the player. This website will develop
your skills and help you to be battle ready when you go boots down
on the battlefield for the first time.</p>
<hr>
<h3>Battlefield 3: Why is it Special?</h3>
<p>So you may be asking yourself, "What makes Battlefield 3
different from any other generic FPS on the market?" and there are a
plethora of reasons of why Battlefield 3 is one of the best FPS's
on the market today. The answer to the question is simply four
things that Battlefield 3 has that other games don't have:</p>
<ul>
<li>Colossal-sized maps</li>
<li>Realistic destruction</li>
<li>All-terrain vehicle play</li>
<li>The game itself centers around teamwork</li>
</ul>
<p> The colossal size of the maps that the player gets to play on
for a variety of game modes
helps the player to be completely emerged in the battle and
helps give them the battlefield experience that cannot be obtained on
any other game. Destruction is it's finest on the game with
DICE's new game engine Frostbite 2.0 that will make you wonder
if you are still on a game or if it has become reality. The
variety of vehicles that the player gets to choose to from to operate
are jets, tanks, jeeps, and boats.</p>
<hr>
<h3>Battlefield 3 Expansion Packs</h3>
<p>Battlefield 3 will have a total of five multiplayer expansion
packs that will further enhance your multiplayer experience.
The first three expansion packs (Back to Karkand, Close Quarters,
and Armored Kill) have already been released leaving two more
for you to wait on in anticipation. With each expansion pack the
player gets not only maps, but also new weapons, vehicles, and
unique assignments that will reward the player with new weapon skins
as well as unlockable dog tags.</p>
<div id="gallery">
<ul>
<li><a href="images/BacktoKarkand1.jpg"
target="_blank"><img src="images/BacktoKarkand_thumb.png" width="128"
height="71"
alt="Back to Karkand thumb"><span><img
src="images/BacktoKarkand.jpg" width="500" height="265" alt="Back to
Karkand">
<br>Back to Karkand Expansion Pack</span></a></li>
<li><a href="images/Close_Quarters1.jpg" target="_blank">
<img src="images/close_quarters_thumb.png" width="128" height="76"
alt="Close Quarters thumb"><span><img
src="images/close_quarters.jpg" width="500" height="265" alt="Close
Quarters">
<br>Close Quarters Expansion Pack</span></a></li>
<li><a href="images/Armored_Kill1.jpg" target="_blank">
<img src="images/Armored_Kill_thumb.png" width="128" height="76"
alt="Armored Kill thumb"><span><img
src="images/Armored_Kill.jpg" width="500" height="265" alt="Armored
Kill">
<br>Armored Kill Expansion Pack</span></a></li>
<li><a href="images/Aftermath1.jpg" target="_blank"><img
src="images/Aftermath_thumb.png" width="128" height="76"
alt="Aftermath thumb">
<span><img src="images/Aftermath.jpg" width="500"
height="265" alt="Aftermath"><br>Aftermath Expansion Pack</span></a>
</li>
<li><a href="images/End_Game1.jpg" target="_blank"><img
src="images/End_Game_thumb.png" width="128" height="76" alt="End Game
thumb"><span>
<img src="images/End_Game.jpg" width="500" height="265"
alt="End Game"><br>End Game Expansion Pack</span></a></li>
</ul>
</div>
<div id="footer"> Copyright © 2012 Battle Ready<br>
Contact Us
</div>
</div>
</div>
</body>
</html>
CSS for Page:
/*I chose the color scheme of orange, blue, grey, and white as I
obtained those colors from the Battlefield 3 game cover. I chose
orange as the headers, blue as links visited and grey as the
backgrounds with white and black being the text color.*/
body { margin:0;
background-color: #000; }
#container { background-color: #444;
color: #fff;
min-width: 960px;
font-family: Verdana, Arial, sans-serif;
width:80%;
margin-left:auto;
margin-right:auto;
}
#header {border-bottom: 2px solid #000000;
height: 120px;
background-image: url(images/banner2.jpg);
background-position: bottom;
background-repeat:no-repeat;
padding: 0 20px; }
#nav { float: left;
width: 150px;}
#newtab {float:left;
width:101px;
}
#sidebar{ float: right;
clear:right;
width: 210px;
background-image: url(images/background.png);
background-position:bottom;
background-repeat:repeat;}
#sidebar a{ text-decoration:none;}
#sidebar a:link { color:#F63;}
#sidebar a:visited { color:#F03;}
#sidebar a:focus, #sidebar a:hover { color:#FF0;}
#sidebar a:active { color:#039;}
#center { margin: 0 210px 0 160px;
padding: 1px 10px 20px 10px;
background-color: #CCC;
color: #000; }
#footer { font-size: .70em;
text-align: center;
color: #f63;
background-color: #CCC;
padding-top: 10px;
clear: both;}
#footer a:link { color:#F63;}
#footer a:visited { color: #039; }
#footer a:focus, #footer a:hover { color: #FF0; }
#footer a:active { color: #F03;}
h1 { margin-top: 0;
font-size: 3em;
text-align: left;
text-shadow: 2px 2px 2px #000000;}
#nav ul { font-family: "BankGothic Md BT", arial, sans-serif;
margin-top: 20px;
list-style-type: none;
}
#nav a { text-decoration: none;
font-size: 1.2em;
border:1px solid #000;
padding:20px;
width:70px;
display:block;
background-color:#CCC;
margin-right:30px;
margin-left:-20px;
}
#nav a:link { color:#F63;}
#nav a:visited { color: #F03; }
#nav a:focus, #nav a:hover { color: #F63;
background-color:blue; }
#nav a:active { color: #093;}
#center p { margin: 20px; }
#center h2, #center h3 { font-family: "Imprint MT Shadow", Arial,
sans-serif;
color: #f63;
background-color: #CCC; }
#floatright { margin: 10px;
float: right; }
#sidebar h3 { padding-bottom: 2px;
margin: 10px;
font-size: .90em;
color: #039;
background-color: #CCC;
text-align:center;}
.events { font-size: .80em;
margin: 10px; }
#gallery {position:relative;}
#gallery ul {width:300px;
list-style-type:none;}
#gallery li {display:inline;
float:left;
padding:10px;}
#gallery img {border-style:none;
float:none;}
#gallery a {text-decoration:none;
color:#F63;
font-style:italic;}
#gallery span {display:none;}
#gallery a:hover span {display:block;
position:absolute;
top:10px;
left:340px;
text-align:center;}
#movie {text-align:center;}
table {width:75%;
margin:auto;
border-collapse:collapse;
border:outset 1px yellow;
color:#000;}
Caption {font-size:1.5em;
font-weight:bold;
color:#f63;}
th,td {border: 2px solid #039;}
thead {Background-color:#f63;
color:#fff;}
tbody td {vertical-align:top;
padding-left:5px;
padding-top:5px;}
tbody tr {background-color:#999;}
#title {text-align:center;}
Trying to get two div's to line up side by side but having some trouble getting them to connect with each other. This is the design of what im trying to make where it says "We're hiring today" and "Schedule Today".
HTML:
<!DOCTYPE html>
<head>
<title>Merry Maids</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<div class="backgroundofdivgreen">
<header>
<div class="logo"><img src="images/logo.jpg"></div>
<nav>
Home
Services
Offers
People
Franchises
Reviews
<div class ="phone">
Call Us Today: (800) Merry Maids
</div>
<div class="media">
<img src="images/twitter.png">
<img src="images/facebook.png">
</div>
<div class="clearboth"></div>
</header>
</nav>
</div>
<div class="banner"><img src="images/banner.jpg" alt="Merry Maids Banner Image"></div>
<div class="spacer1"></div>
<article>
<div class="wrapper">
<div class="yellow">
<h1>Schedule Appointments</h1>
<p>Our cleaning services are thorough, consistent and customized. If you would like to request a special service, change your cleaning schedule, or skip an area in your home, just let us know! We are happy to fulfill every request in order to exceed your expectations.Merry Maids home cleaning services are available weekly, every other week, monthly or one-time. On every visit, your Merry Maids team dusts, vacuums, washes and sanitizes each room.</p>
</div>
<div class="green">
<h1>We're Hiring Today</h1>
<p>For more than 30 years, our team members have provided reliable service for homeowners like you worldwide. We clean people's homes like they are our own and we treat our team members with the same concern, respect and care we expect them to show our customers. Merry Maids knows that our team members are our greatest asset and we recognize the power of our people.</p>
</div>
CSS:
.clearboth {
clear:both;
}
.backgroundofdivgreen {
height: 96px;
margin: 0px;
background-color: #39b54a;
}
header {
width: 980px;
background-color: #39b54a;
margin: 0px auto;
}
nav {
float:right;
width: 570px;
text-align: right;
padding-top:10px;
}
nav a {
color:white;
margin: 0px 25px 0px 0px;
text-decoration:none;
}
nav a:hover {
color: #fff799;
}
.logo {
float:left;
}
.phone {
margin: 40px 0px 0px 130px;
color: white;
float:left;
}
.media {
float: right;
margin: -23px 30px 0px 0px;
}
.banner {
height:553px;
width:1600px;
margin: 0px auto;
}
.spacer1 {
height:20px;
background-color: #39b54a;
margin: 0px auto;
}
.wrapper {
margin: 0 auto;
overflow: hidden;
}
.yellow {
position:fixed;
width:800px;
height:313px;
background-color: #fff799;
float:left;
text-align:right;
}
.green {
position:fixed;
width:800px;
height:313px;
background-color: #005e20;
float:right;
}
Remove the position: fixed from the two divs. (position: fixed takes an element out of the document flow so the floats have no effect on them.)
You'll also need to make sure the wrapper has enough width to accommodate the full width of both divs.
Hey everyone I am having an issue where my social media buttons for my website are not staying in the nav header area. I have tried using the float attribute and it wont stay in the header here are some images to show you what I am talking about.
http://imgur.com/zwmtXju
as you can see in this image the social media buttons wont stay in the header area, any help would be appreciated. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<header>
<nav class="clearfix">
<a href="#" id="brand">
<h1>Skull</h1>
</a>
<ul class="clearfix">
<li>Moonshine</li>
<li>Recipes</li>
<li>The Blog</li>
<li>The Store</li>
<div id="socialMedia">
<img src="imgs/fbsm.png" alt=""/>
<img src="imgs/tsm.png" alt=""/>
<img src="imgs/psm.png" alt=""/>
</div>
</ul>
Skull®
</nav>
</header>
<div id="content">
<div id="story">
<p id="ourStory">Our Story</p>
<h1 id="bootleg">Bootlegging</h1>
<p id="storyBoard">
<span class="storyTelling">This is our history,</span>
<span class="storyTelling">our story,</span>
<span class="storyTelling">of how we became one of the greatest</span>
<span class="storyTelling">moonshine brands on the planet.</span>
<span class="storyTelling">A story of struggle,</span>
<span class="storyTelling">and independence,</span>
<span class="storyTelling">accompanied by expert craftmanship.</span>
<span class="storyTelling">Using years as chapters of our book of life</span>
<span class="storyTelling">we will show you what makes our moonshine so great.</span>
<span class="storyTelling">Scroll down and enjoy.</span>
</p>
</div>
<div id="timeLine">
<div id="present">
<h1>Here and Now</h1>
<p>Now in 2014 we are a globally recognized brand that many people know and love. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="2000">
<h1>2000</h1>
<p>In 2000, bars started buying our moonshine to make drinks with. This was a huge milestone for Skull®
Because, it brought our brand to the attention of many people that were not yet customers of our great alcohol. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1960">
<h1>1960</h1>
<p>By 1960 we were booming with popularity. Skull alcohol became a recognized brand.</p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1933">
<h1>1933</h1>
<p>By 1933 Prohibition was repealed, and the market grew thin. But that didn't stop us. Skull alcohol was born.
With our superior craftsmanship skills, and our excellent customer satisfaction our legacy continued</p>
<img src="imgs/prohibitionends.jpg" width="263" height="185" alt=""/>
</div>
<div id="1920">
<h1>1920</h1>
<p>By the early 1900s, states began passing laws that banned alcohol sales, and consumption. in 1920,
nationwide Prohibition went in to effect. It was the greatest thing moonshiners could have asked for.
Because there was no legal alcohol available, the demand for moonshine shot up like a rocket. Moonshiners
had so much business they couldn't even keep up with the demand. Hidden saloons called speakeasies were even
opened in every city. they were used to sell the illegal whisky.</p>
<img src="imgs/dry.jpg" height="200" alt=""/>
</div>
<div id="1860">
<h1>1860</h1>
<p>The hatred from the Whisky Rebellion escalated in to the 1860s as the government continued
to try and collect excise tax to fund the Civil War. At this time Moonshiners and many other anti-governmental
groups, such as the KKK, joined forces to kill anyone who would release the location of their stills and attack IRS officials and
their families.</p>
<img src="imgs/kkk.jpg" width="263" height="185" alt=""/>
</div>
<div id="1794">
<h1>1794</h1>
<p>The American people, who had just fought a war to get out from under oppressive British taxes
(among other things), were not particularly pleased. So, they decided to just keep making their own
whisky, completely ignoring the federal tax. All the resentment that the citizens had toward the
government eventually exploded when several hundred angry citizens took over the city of Pittsburgh,
Pennsylvania. President George Washington called apon the militia, a group of 13,000 troops to disperse
The angry mob. The Whiskey Rebellion was a failure.</p>
<img src="imgs/wr.jpg" alt=""/>
</div>
<div id="1791">
<h1>1791</h1>
<p>Moon shining began very early in American history. Shortly after the Revolution,
the United States found itself struggling to pay for the expense of fighting a long war.
The solution was to place a federal tax on liquors and spirits that would soon be known
as the whisky tax.</p>
<img src="" alt=""/>
</div>
</div>
</div>
<footer>
<div class="footerContent"></div>
<div class="footerContent"></div>
<div class="footerContent"></div>
</footer>
</div><!--containerEnd-->
</body>
</html>
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
body {
width: 1920px;
background-color: #202021;
}
#container{
width: 100%;
margin: 0;
background: url('../imgs/565.jpeg') repeat-y center center fixed ;
}
header{
width: 100%;
height: 100px;
}
nav{
width: 100%;
height: 100px;
position: relative;
border-bottom: 2px solid #cccccc;
}
#brand{
margin-top:15px;
width: 250px;
height: 70px;
float: left;
background: url('../imgs/skullAlcoholText.png') no-repeat;
}
#brand h1{
display: none;
}
nav ul{
padding: 0;
margin: 0 auto;
width: 600px;
height: 100px;
list-style: none;
color: #fff;
border-bottom: 2px solid #cccccc;
}
nav li{
display: inline;
float: left;
}
nav a{
color: #fff;
display:inline-block;
width: 150px;
text-align: center;
text-decoration: none;
line-height: 100px;
}
nav li a{
border-right: 1px solid #cccccc;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:first-child a{
border-left: 1px solid #cccccc;
}
nav a:hover, nav a:active {
color: #ffffff ;
}
#socialMedia{
width: 320px;
float: right;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#socialMedia a:first-child{
}
#socialMedia a{
width: 100px;
}
nav a#pull {
display: none;
}
#content {
text-align: center;
}
#story{
margin: auto;
line-height: 2;
width: 300px;
height: 200px;
}
#ourStory, #bootleg, #storyBoard{
text-align: center;
color: #ffffff;
}
Your nav ul width is 600px. It's too small to contain all these elements. Therefore div is on next row. I also prefer to change div on something more semantic, like ul.
Put your code in table
<table width="646" border="0">
<tr><td width="98"><ul class="clearfix"><li>Moonshine</li></td><td width="82"><li>Recipes</li></td><td width="88"><li>The Blog</li></td><td width="110"><li>The Store</li></td>``<td width="78"><div id="socialMedia"><img src="imgs/fbsm.png" alt=""/></div></td><td width="78"><div id="socialMedia"><img src="imgs/tsm.png" alt=""/></div></td><td width="82"><div id="socialMedia"><img src="imgs/psm.png" alt=""/></div></td></tr></table></ul>
The following is my first cut at coding-up a reddit-like comment in html+css. I have a few questions about css and the general structure:
How do I get the comment body ("The King took off his hat...") to align with the comment head ("Nathan, posted...") and the comment tail ("reply permalink ...")? I tried making the margin-bottom for .comment-left a little longer but that didn't fix the issue.
I know I've been a little trigger-happy with the tags. Which ones are redundant?
Is there a better/tighter way to get the same structure?
Thanks all, Nathan
ps I used the handy information here for stacking my voting arrows on top of each other.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>CSS sandbox: comments</title>
<style type="text/css">
.vote {
width: 15px;
float: left;
clear: left;
}
.vote img {
display: block;
float: none;
clear: both;
width: 15px;
}
.userpic img {
width: 60px;
}
.comment-contents li {
list-style-type: none;
margin-bottom: 10px;
}
.comment-left {
float: left;
}
.head {
margin-left:10px;
}
.tail-list li {
display: inline;
}
img {
border: 0;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="comment">
<span class="comment-left">
<span class="vote">
<img alt="^" title="vote up" src="http://www.reddit.com/static/aupgray.gif">
<img alt="v" title="vote down" src="http://www.reddit.com/static/adowngray.gif">
</span>
<span class="userpic">
<a href="#">
<img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
</a>
</span>
</span>
<span class="comment-main">
<ul class="comment-contents">
<li class="head">
Nathan, posted 2 hours ago
[-]
</li>
<li class="middle">
<p>The king took off his hat and looked at it. Instantly an immense
crowd gathered. The news spread like wildfire. From a dozen leading
dailies,reporters and cameramen came rushing to the scene pellmell in
highpowered monoplanes. Hundreds of reserves,responding without
hesitation to a riotcall,displayed with amazing promptness quite
unparalleled inability to control the everincreasing multitude,but
not before any number of unavoidable accidents had informally
occurred.</p>
<p>Chapter 1 - untitled (eecummings)</p>
</li>
<li class="tail">
<ul class="tail-list">
<li>reply</li>
<li>permalink</li>
<li>offensive?</li>
</ul>
</li>
</ul>
</span>
</div>
</body>
</html>
Update your css with a left padding on ".comment-contents li" and a remove the margin on ".head"
.comment-contents li {
list-style-type: none;
margin-bottom: 10px;
padding-left: 60px;
}
.head {
margin-left:0px;
}
While you are at it, just use padding instead of margin for ".comment-contents li":
.comment-contents li {
list-style-type: none;
padding: 0 0 10px 60px;
}
I recommend not using padding and margin on a class unless absolutly necessary.
Don't have time to do CSS at the moment (maybe later), but you should be able to achieve the look with this markup:
<div class="comment">
<p class="user">
<a href="#">
<img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
</a>
Nathan, posted 2 hours ago
[-]
</p>
<p>The king took off his hat and looked at it. Instantly an immense
crowd gathered. The news spread like wildfire. From a dozen leading
dailies,reporters and cameramen came rushing to the scene pellmell in
highpowered monoplanes. Hundreds of reserves,responding without
hesitation to a riotcall,displayed with amazing promptness quite
unparalleled inability to control the everincreasing multitude,but
not before any number of unavoidable accidents had informally
occurred.
</p>
<p>Chapter 1 - untitled (eecummings)</p>
<ul class="commentTools">
<li class="voteUp">vote up</li>
<li class="voteDown">vote down</li>
<li>reply</li>
<li>permalink</li>
<li>offensive?</li>
</ul>
</div>
And the CSS
.comment {
position:relative;
padding-left:75px;
}
.comment p {
}
.comment .user img {
float:left;
margin-left:-60px;
}
.comment .commentTools {
padding-left:0;
}
.comment .commentTools li {
display:inline;
}
.comment .commentTools .voteUp, .comment .commentTools .voteDown {
position:absolute;
display: block;
left:0;
}
.comment .commentTools .voteUp {
top:0;
}
.comment .commentTools .voteDown {
top:15px;
}
.comment .commentTools .voteUp a, .comment .commentTools .voteDown a {
display:block;
width: 15px;
height: 15px;
text-indent:-5000em;
}
.comment .commentTools .voteUp a {
background: url(http://www.reddit.com/static/aupgray.gif) no-repeat;
}
.comment .commentTools .voteDown a {
background: url(http://www.reddit.com/static/adowngray.gif) no-repeat;
}
I haven't tested this so there may be some bugs. Let me know if youwant any of the CSS explained.
How about setting the p margin-left to be set at 30px?