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;}
Related
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:
The text-align for the link at the bottom of the page won't work.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cssforwebsite.css"/>
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,500,600,800" rel="stylesheet">
</head>
<body>
<div id="top">
<h1>TRAVEL GUIDE</h1>
</div>
<div id="body">
<p>In this webpage I will write about many different tourist attractions. These will include countries from continents all around
the world. From countries with a warm, tropical climate, to countries with sub-zero temperatures, this page contains it all.</p>
<h2>France</h2>
<p>France, in Western Europe, encompasses medieval cities, alpine villages and Mediterranean beaches. Paris, its capital, is famed for its fashion houses, classical art museums including the Louvre and monuments like the Eiffel Tower. The country is also renowned for its wines and sophisticated cuisine. Lascaux’s ancient cave drawings, Lyon’s Roman theater and the vast Palace of Versailles attest to its rich history.<p>
<ul>
<li>The Eifel Tower</li>
<img src="https://cache-graphicslib.viator.com/graphicslib/thumbs674x446/9205/SITours/skip-the-line-eiffel-tower-tour-and-summit-access-in-paris-296015.jpg" width="200px"height="160px"/>
</ul>
Travel website for more help finding a holiday
</div>
</body>
</html>
Here is the CSS for the webpage:
body{
background-image: url("http://i.stack.imgur.com/jGlzr.png");
}
#top{
width:74%;
margin: 0 auto;
background-image:url("http://www.thetreesandthestars.co.uk/wp-content/uploads/2014/10/Up-the-beach.jpg");
height:400px;
background-position: center center;
}
*{
font-family: "Raleway";
color: #444444;
font-size: 18px;
}
h1{
color: black;
text-align: center;
position:relative;
line-height: 450px;
}
#body{
background:white;
width: 1000px;
width: 74%;
margin: 0 auto;
}
p,h2{
text-align: center;
}
#help{
text-align:center;
}
/*This makes the link black if the mouse is not hovering over it and the user hasn't visited the link before*/
a:link {
color: black;
}
/*This makes the link cyan if the user has visited this website before*/
a:visited {
color: cyan;
}
/*this makes the link blue when the mouse is hovering over it*/
a:hover {
color: blue;
}
/*the link appears red when someone is holding their mouse down and hovering on top of it*/
a:active {
color: red;
}
Please help with this. It is for a homework project. Whenever I add the image it aligns left. What is the problem with this?
It's because the a element is inline by default, which means it only occupies as much space as needed on the page. To be able to center it, make it a block element display: block; or wrap it in a block element parent, and apply text-align to the parent.
<a style="text-align:center;display:block;" href="#">centered</a>
<p style="text-align:center;">centered</p>
body {
background-image: url("http://i.stack.imgur.com/jGlzr.png");
}
#top {
width: 74%;
margin: 0 auto;
background-image: url("http://www.thetreesandthestars.co.uk/wp-content/uploads/2014/10/Up-the-beach.jpg");
height: 400px;
background-position: center center;
}
* {
font-family: "Raleway";
color: #444444;
font-size: 18px;
}
h1 {
color: black;
text-align: center;
position: relative;
line-height: 450px;
}
#body {
background: white;
width: 1000px;
width: 74%;
margin: 0 auto;
}
p,
h2 {
text-align: center;
}
#help {
text-align: center;
}
/*This makes the link black if the mouse is not hovering over it and the user hasn't visited the link before*/
a:link {
color: black;
}
/*This makes the link cyan if the user has visited this website before*/
a:visited {
color: cyan;
}
/*this makes the link blue when the mouse is hovering over it*/
a:hover {
color: blue;
}
/*the link appears red when someone is holding their mouse down and hovering on top of it*/
a:active {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cssforwebsite.css" />
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,500,600,800" rel="stylesheet">
</head>
<body>
<div id="top">
<h1>TRAVEL GUIDE</h1>
</div>
<div id="body">
<p>In this webpage I will write about many different tourist attractions. These will include countries from continents all around the world. From countries with a warm, tropical climate, to countries with sub-zero temperatures, this page contains it
all.</p>
<h2>France</h2>
<p>France, in Western Europe, encompasses medieval cities, alpine villages and Mediterranean beaches. Paris, its capital, is famed for its fashion houses, classical art museums including the Louvre and monuments like the Eiffel Tower. The country is
also renowned for its wines and sophisticated cuisine. Lascaux’s ancient cave drawings, Lyon’s Roman theater and the vast Palace of Versailles attest to its rich history.
<p>
<ul>
<li>The Eifel Tower</li>
<img src="https://cache-graphicslib.viator.com/graphicslib/thumbs674x446/9205/SITours/skip-the-line-eiffel-tower-tour-and-summit-access-in-paris-296015.jpg" width="200px" height="160px" />
</ul>
<a href="https://www.google.co.uk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjirL3Jy_7RAhUEBcAKHVs9C6AQFggaMAA&url=http%3A%2F%2Fwww.worldtravelguide.net%2F&usg=AFQjCNGnX8FXlQKh9hEebd1Syt2Wh33q_Q&sig2=B-usIraK2zeErXSMJVlRmw&bvm=bv.146094739,bs.1,d.d2s"
id="help" style="text-align:center; display: block;" target="_blank">Travel website for more help finding a holiday</a>
</div>
</body>
</html>
try something like this, add your anchor tag inside a paragraph tag
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>
Okay, I've seen loads of information about this, but none of the suggested fixes worked for me, or perhaps I just didn't properly understand, so if someone could break this down elementary for me that'd be great, or point me to another link that does. I have a series of divs to make my header, a main container with the logo inside floating left, and then another container floating right, that works all fine, but the internal "menu" container contains two divs in it, one supposed to be at the top, the other at the bottom... to visualize it, its login or register links at the top, and a series of menu links at the bottom. The problem is the ones that are supposed to be at the bottom are actually going to the top, right under the register and login links. If that didn't give you a visual picture, then here is the actual header http://www.sunnahspace.com/pages/header.php i've tried loads of stuff, maybe I've just been trying it wrong though. i've tried the whole, position absolute stuff and honestly i don't even know what that means, but I get the feeling I'm headed in the right direction. Thanks in advance for anyone's help!
<style type="text/css">
.header_links {
font-family: GeosansLight;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.header_menu {
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#header {
background-image:url(../img/header_bg.jpg);
background-repeat:repeat-x;
width:100%;
height:111px;
}
#logo {
float:left;
margin-left:20px;
}
#header_menu_container {
float:right;
margin-right:20px;
height:111px;
}
#header_menu_top {
margin-top:10px;
vertical-align:top
}
#header_menu_bottom {
margin-top:10px;
vertical-align:bottom
}
</style>
<div id="header">
<div id="logo"> <img src="../img/logo.png" width="390" height="105" alt="SunnahSpace">
</div>
<div id="header_menu_container">
<div id="header_menu_top" align="right">Login <span class="header_links">|</span> <span class="header_links">Join</span>
</div>
<div id="header_menu_bottom" align="right" style="vertical-align:bottom"><span class="header_menu">Home</span><span class="header_menu"> | Profile | About | Contact</span>
</div>
</div>
</div>
<style type="text/css">
.header_links {
font-family: GeosansLight;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.header_menu {
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#header {
background-image:url(../img/header_bg.jpg);
background-repeat:repeat-x;
width:100%;
height:111px;
}
#logo {
float:left;
margin-left:20px;
}
#header_menu_container {
float:right;
margin-right:20px;
height:111px;
}
#header_menu_top {
margin-top:10px;
vertical-align:top
}
#header_menu_bottom {
margin-top:10px;
vertical-align:bottom
}
</style>
<div id="header">
<div id="logo"> <img src="../img/logo.png" width="390" height="105" alt="SunnahSpace">
</div>
<div id="header_menu_container">
<div id="header_menu_top" align="right">Login <span class="header_links">|</span> <span class="header_links">Join</span>
</div>
<div id="header_menu_bottom" align="right" style="vertical-align:bottom"><span class="header_menu">Home</span><span class="header_menu"> | Profile | About | Contact</span>
</div>
</div>
</div>
add the following to your styles
#header_menu_bottom {
bottom: 15px;
position: absolute;
text-align: right;
width: 300px;
right: 0;
}
#header_menu_container {
position: relative;
}
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?