I'm trying to build a simple web page. It has a logo in the upper left corner, and on the same line to the right is a navbar. That all works fine. The problem is that I want to then have text below the logo & navbar (full width). No matter what I try, the text starts in the same line as the logo and navbar. How can I force the text to start below the logo & navbar?
Here's the html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Temp.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="logo" style="display:inline;">
<a href="Temp.html">
<img src="robert-half-technology-logo-600(40).gif"/>
</a>
</div>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>About Us</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
</div><br/><br/>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>About Us</h1>
<p class="normaltext">
Founded in 1948, Robert Half has a long company history of innovation, always guided by high ethical standards and the belief that finding the right fit for a client and candidate creates an engaged and energized workforce.
</p>
<p class="normaltext">
We pioneered the idea of professional staffing services nearly 70 years ago and, as the needs of businesses have evolved, so have we. In 1986, when current leadership acquired the Robert Half business from founder Bob Half, the staffing industry was much different than it is today. Our leadership team saw potential in moving toward a more specialized staffing approach and began placing temporary workers at higher skill levels. Our clients and candidates found value in professional-level staffing, which is why we launched a series of temporary professional staffing divisions in the finance and accounting, legal, creative and marketing, technology and administrative fields. And in 2002, we again saw opportunity and introduced Protiviti, a global independent risk consulting and internal audit service, to support companies as they faced more stringent financial reporting and disclosure practices under new regulations such as Sarbanes-Oxley.
</p>
<p class="normaltext">
Explore Robert Half’s history, learn about our leadership and accolades and see how we have found opportunity in innovation to create a $5 billion professional services organization.
</p>
<h2>1940s: The beginning</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1948</td>
<td>Robert Half founded by Bob and Maxine Half.</td>
</tr>
</table>
<h2>1960s: High ethical standards become a cornerstone</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1963</td>
<td style="padding-left:20px;">Bob Half speaks out against discriminatory recruiting and staffing practices in a letter to the Association of Personnel Agencies of New York.</td>
</tr>
</table>
<h2>1970s: A decade of firsts</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1973</td>
<td style="padding-left:20px">Robert Half opens its first international location in London.</td>
</tr>
<tr>
<td>1973</td>
<td style="padding-left:20px;">Accountemps, the first of many professional staffing divisions, is launched, thus beginning Robert Half’s specialized approach to temporary staffing.</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
And here's the css:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
.logo {
position: fixed;
z-index: 2000;
}
.video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX (-50%) translateY(-50%);
}
h1 {
text-align:center;
color:#a01b35;
}
.normaltext {
font-size: 18px;
font-family: "Futura BT W01 Book",OpenSansRegular,"Open Sans Regular",sans-serif;
line-height: 1.25;
}
Give margin-top to the container as much as need to accomodate Header height and give top:0px css to .logo class.
.container {
width: 1170px;
margin-top: 100px;
}
.logo{
position: fixed;
z-index: 2000;
top: 0px;
}
It's is because you are using a fixed navbar and logo so it sits on top of your container below.
Just apply a margin-top to your .container class and top:0 to your .logo class:
.container {
margin-top: 50px; //use what ever you need here for spacing.
}
.logo {
position: fixed;
top: 0;
z-index: 2000;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
.logo {
position: fixed;
z-index: 2000;
}
.video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX (-50%) translateY(-50%);
}
h1 {
text-align:center;
color:#a01b35;
}
.normaltext {
font-size: 18px;
font-family: "Futura BT W01 Book",OpenSansRegular,"Open Sans Regular",sans-serif;
line-height: 1.25;
}
.container {
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Temp.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="logo" style="display:inline;">
<a href="Temp.html">
<img src="robert-half-technology-logo-600(40).gif"/>
</a>
</div>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>About Us</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
</div><br/><br/>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>About Us</h1>
<p class="normaltext">
Founded in 1948, Robert Half has a long company history of innovation, always guided by high ethical standards and the belief that finding the right fit for a client and candidate creates an engaged and energized workforce.
</p>
<p class="normaltext">
We pioneered the idea of professional staffing services nearly 70 years ago and, as the needs of businesses have evolved, so have we. In 1986, when current leadership acquired the Robert Half business from founder Bob Half, the staffing industry was much different than it is today. Our leadership team saw potential in moving toward a more specialized staffing approach and began placing temporary workers at higher skill levels. Our clients and candidates found value in professional-level staffing, which is why we launched a series of temporary professional staffing divisions in the finance and accounting, legal, creative and marketing, technology and administrative fields. And in 2002, we again saw opportunity and introduced Protiviti, a global independent risk consulting and internal audit service, to support companies as they faced more stringent financial reporting and disclosure practices under new regulations such as Sarbanes-Oxley.
</p>
<p class="normaltext">
Explore Robert Half’s history, learn about our leadership and accolades and see how we have found opportunity in innovation to create a $5 billion professional services organization.
</p>
<h2>1940s: The beginning</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1948</td>
<td>Robert Half founded by Bob and Maxine Half.</td>
</tr>
</table>
<h2>1960s: High ethical standards become a cornerstone</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1963</td>
<td style="padding-left:20px;">Bob Half speaks out against discriminatory recruiting and staffing practices in a letter to the Association of Personnel Agencies of New York.</td>
</tr>
</table>
<h2>1970s: A decade of firsts</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1973</td>
<td style="padding-left:20px">Robert Half opens its first international location in London.</td>
</tr>
<tr>
<td>1973</td>
<td style="padding-left:20px;">Accountemps, the first of many professional staffing divisions, is launched, thus beginning Robert Half’s specialized approach to temporary staffing.</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Related
I am trying to get the div with div class bioDiv to line up under the image but have tried so many things that I am just getting more and more confused can anyone look at the code for me and give me a clue? Looking to keep the same look just move the div to a more central location.
here is the code:
body {
width: 100%;
height: auto;
background-image: url("../img/marble-background.gif");
background-size: 100% 100vh;
}
img {
border: 10px solid #E3C640;
}
.menuDiv {
background-color: white;
height: 850px;
width: 300px;
margin-top: 70px;
border: 15px solid #E3C640;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 30px;
}
.bioDiv {
background-color: white;
height: 850px;
width: 1200px;
border: 15px solid #E3C640;
position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cary McClures' Portfolio</title>
<style type="text/css">
#import url("bootstrap-5.1.3-dist/css/bootstrap.css");
</style>
</head>
<head>
<body>
<img style="position: absolute; right: 600px; top: 68px
" src="../img/images/me.jpg" width="400" height="600" alt="picture of cary" />
<div class="menuDiv">
<h2 style="color: goldenrod">Home</h2>
<br>
<h2 style="color: goldenrod">Biography</h2>
<br>
<h2 style="color: goldenrod">Education</h2>
<br>
<h2 style="color: goldenrod">Graphic Design</h2>
<br>
<h2 style="color: goldenrod">Freelance</h2>
<br>
<h2 style="color: goldenrod">Baking</h2>
<br>
<h2 style="color: goldenrod">Photo Gallery</h2>
<br>
<h2 style="color: goldenrod">Resume</h2>
<br>
<h2 style="color: goldenrod">Contacts</h2>
<br>
<h2 style="color: goldenrod">Sitemap</h2>
</div>
<div class="bioDiv">
<br>
<h2 style="color: goldenrod">Biography</h2>
<p>Cary L. McClure is an enthusiastic Geneva-based Educator, Culinary Artist, Graphic Designer, and Overachiever with a decade-long background in leadership and customer service.
</p>
<br>
<p>Hailing from Indianapolis originally, Cary’s avid interest in the graphic arts started while he was in high school back in 1983. Unable to attend college, he wound up in the food industry.
</p>
<br>
<p>After working as a Pastry Chef for several years, Cary ultimately has had to alter his career path, due a disability he endured during his time in the military.
</p>
<br>
<p>Currently Cary has been working as a Substitute teacher (K-12) for Adams Central and South Adams Schools.
</p>
<br>
<p>Cary served as an Adjunct Instructor at Ivy Tech Community College, where he taught students about Cakes, Filling and Icings, Wedding Cake Production, and Classical Pastries.
</p>
<br>
<p>In 2019 Cary obtained his bachelor’s degree in Visual Communication (Graphic Design) from Indiana University. Furthermore, he holds an Associates of Applied Science degree (with honors) in Hospitality & Culinary Pastry Arts from Ivy Tech.
</p>
<br>
<p>Outside of his career, Cary L. McClure enjoys reading fantastical books, PS4 and Xbox One gaming, and crafting gum-paste flowers. An avid traveler, he also loves exploring new places and is seeking a position that will allow him to travel across
the country. Above all, he cherishes spending quality time with his family. He is the proud father of one married son.
</p>
<br>
</div>
</body>
</head>
</html>
I would suggest making two containers (an aside and a main) and put the navigation list in the aside and the image and bio in the main. Something like this:
.container {
display: flex;
}
<div class="container">
<aside>
<h1>Put your nav here</h1>
</aside>
<main>
<img src="" height="200" width="300" />
<div>
<h1>Put Bio here</h1>
</div>
</main>
</div>
PS: In case you didn't know, aside and main are semantic HTML5 tags used to markup a page. You can use divs instead of them, but it's not best practice
In Bootstrap you do not have to dictate the widths etc, it can all be done using standard Bootstrap CSS which you dictate as a class= in your HTML. So, for the image you could have that fluid inside a column.
<div class="col-sm-12 col-md-10 mx-auto">
<img src="../img/images/me.jpg" class="img-fluid" alt="picture of cary"/>
</div>
That's full width (12 wide) on small screens and not quite full width (10 wide) on anything larger but mx-auto should center the entire Div. Setting the image to class img-fluid makes it the full width of the Div no matter the screen.
Hopefully after that you can use exactly the same column set up for .bioDiv.
<div class="col-sm-12 col-md-10 mx-auto">
<h2 style="color: goldenrod">Biography</h2>
continued content here....
</div>
Ultimately you are just wrapping the image in a Div and setting both it and bioDiv to the same column parameters. It should not hurt in any way to set up menuDiv a similar way.
this part has been bothering me for half an hour, and I dont know how to solve. So, how do I remove the lightgrey space between heading and div? Should I be using margin and padding to do it?
Below is my code:
<!-- Description -->
<h3 style="background-color:white; font-size:20px;">
Within three years, production area had more than tripled to meet growing demands. The year
1999 marked the completion of our current plant of 65,000
square feet, fully equipped with state-of-the-art technology, as well as the start of our
Surface Mount Technology process. Implementation of new
lead-free production lines began in early 2003. Our success is the result of the joint-efforts
of our innovative and quality-focused engineering team,
whose expertise range from design to debugging, and the dedication of the rest of our staff.
</h3>
<!-- ------------------------------ -->
<div style="width: 100%; display: table;margin:0px; padding:0px; background-color:#D6EAF8 ">
<div style="display: table-row">
<!-- ------------------------------------------------------------------ -->
<!-- Why Us -->
<div style="margin:0px; padding:0px; display: table-cell">
<h3 style="padding-left:620px">Why Us?</h3>
<ul style="padding-left:640px">
<li><a href="http://www.scope.com.my/2014/SMSB2014/qpolicy.htm" style="background-
color:#D6EAF8 ; color:black">Policy</a></li>
<li><a href="http://www.scope.com.my/2014/SMSB2014/manufacturing_capability.htm"
style="background-color:#D6EAF8 ; color:black">Capability</a></li>
<li><a href="https://www.scope.com.my/career.html" style="background-color:#D6EAF8 ;
color:black">Careers</a></li>
</ul>
</div>
<!-- Follow Us -->
<div style="margin:0px; padding:0px; display: table-cell">
<h3 style="padding-right:500px">Follow Us</h3>
<ul style="padding-left:20px">
<li><a href="https://www.facebook.com/pages/SCOPE-Manufacturers-M-Sdn-Bhd/304477286279886"
style="background-color:#D6EAF8 ; color:black">
<img src="icon1.jpg" alt=""> Facebook</a></li>
<li><img src="icon2.jpg" alt=""> Twitter</li>
<li><img src="icon3.jpg" alt=""> Linkedin</li>
</ul>
</div>
<!-- ------------------------------------------------------------------- -->
</div>
</div>
It's margin-bottom of h3, make it as h3 {margin-bottom: 0}
you should remove margin bottom: h3
<h3 style="background-color:white; font-size:20px;margin-bottom:0;">
All you really need is to apply margin-bottom:0; to the first h3:
<h3 style="background-color:white; font-size:20px; margin-bottom:0;">
Although, I'd like to offer you a solution without so much inline-CSS as well. Read more on What's so bad about in-line CSS?.
I've effectively moved duplicate styling into classes and included some id's to define your styling. All styling is included in pure CSS and could be included as an external style sheet.
See the JSFiddle
.h3_Summary {
background-color: white;
font-size: 20px;
margin-bottom: 0;
}
.div_outer {
width: 100%;
display: table;
margin: 0px;
padding: 0px;
background-color: #D6EAF8;
}
.div_inner {
display: table-row;
}
.div_container {
margin: 0px;
padding: 0px;
display: table-cell;
}
#h3_whyUs {
padding-left: 620px;
}
.ul_first {
padding-left: 640px;
}
ul li a {
background-color: #D6EAF8;
color: black;
}
#h3_followUs {
padding-right: 500px;
}
.ul_second {
padding-left: 20px;
}
<!-- Description -->
<h3 class="h3_Summary">
Within three years, production area had more than tripled to meet growing demands. The year
1999 marked the completion of our current plant of 65,000
square feet, fully equipped with state-of-the-art technology, as well as the start of our
Surface Mount Technology process. Implementation of new
lead-free production lines began in early 2003. Our success is the result of the joint-efforts
of our innovative and quality-focused engineering team,
whose expertise range from design to debugging, and the dedication of the rest of our staff.
</h3>
<!-- ------------------------------ -->
<div class="div_outer">
<div class="div_inner">
<!-- ------------------------------------------------------------------ -->
<!-- Why Us -->
<div class="div_container">
<h3 id="h3_whyUs">Why Us?</h3>
<ul class="ul_first">
<li>Policy</li>
<li>Capability</li>
<li>Careers</li>
</ul>
</div>
<!-- Follow Us -->
<div class="div_container">
<h3 id="h3_followUs">Follow Us</h3>
<ul class="ul_second">
<li><a href="https://www.facebook.com/pages/SCOPE-Manufacturers-M-Sdn-Bhd/304477286279886">
<img src="icon1.jpg" alt=""> Facebook</a></li>
<li><img src="icon2.jpg" alt=""> Twitter</li>
<li><img src="icon3.jpg" alt=""> Linkedin</li>
</ul>
</div>
<!-- ------------------------------------------------------------------- -->
</div>
</div>
Let me know if you want any clarification! Goodluck with it! :)
Add following css lines to your style sheet.
h3 { margin-bottom: 0; }
Doing a website recreation and trying to use bootstrap to do it. I ran into a problem of trying to position an image to the right of some text near the right edge of the web page.
Using margin-top and margin-right moves the picture how I want but using margin-bottom seems to have no effect... which is what I need. Any idea what I am doing wrong?
Here's a link to my codepen: https://codepen.io/gkunthara/pen/eRXmoP
And releveant code:
HTML
<div class="second-content">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p text-left"> Moving homes in Sydney is
stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not,
just notify us within 72 hours and we'll gladly return to reclean any
problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="firstpic.png">
</div>
CSS:
.second-content .first-pic {
width: 30%;
border: solid black;
margin-right: 100px;
margin-bottom: 50px; /* no effect /*
}
EDIT: updated codepen link just showing relevant code
As per your codepen you wanted image after text then need to add
float:left in this class second-header-p text-left.
.second-header-p.text-left{
float:left;
}
I add some section for your code. float:left and float:right help to do your task well.
<body>
<div class="second-content">
<div class="sec">
<h2 class="second-header"> Bond Back Guarantee</h2>
</div>
<div class="sec">
<p class="second-header-p text-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back ha
s never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning.
If not, just notify us within 72 hours and we'll gladly return to reclean any problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="https://thumb.ibb.co/iBF9Ea/firstpic.png" alt="firstpic" border="0">
</div>
</div>
</body>
css
.second-content {
height: 750px;
background-color: #fff;
border-style: solid;
}
.second-content .second-header {
font-size: 46px;
color: #3498DB;
margin-top: 100px;
margin-left: 150px;
}
.second-content .second-header-p {
width: 50%;
font-size: 120%;
margin-left: 150px;
line-height: 40px;
margin-top: 25px;
float:left;
}
.second-content .first-pic {
width: 30%;
border: solid black;
float:right;
}
.sec{
width:100%
}
Give pull-left class to your second-header-p.
.second-content {
height: 750px;
background-color: #fff;
border-style: solid;
padding: 20px;
}
.second-content .second-header {
font-size: 46px;
color: #3498DB;
}
.second-content .second-header-p {
width: 65%;
font-size: 120%;
line-height: 40px;
}
.second-content .first-pic {
width: 30%;
border: solid black;
}
<head>
<title> End of Lease Cleaning in Sydney</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="second-content">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p pull-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not,
just notify us within 72 hours and we'll gladly return to reclean any
problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="https://thumb.ibb.co/iBF9Ea/firstpic.png" alt="firstpic" border="0">
</div>
</body>
If you using bootstrap then use this code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<section class="second-content">
<div class="col-md-8">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p text-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not, just notify us within 72 hours and we'll gladly return to reclean any problem areas - free of charge.</p>
</div>
<div class="col-md-4">
<img src="https://thumb.ibb.co/iBF9Ea/firstpic.png" />
</div>
</section>
</body>
</html>
I'm currently building a one-page website for a coding school application. I'm nearly there but since yesterday, the external hypertext links I've put in my HTML code won't work. It was working perfectly fine until then and now you can't click on them. I don't see how the code is wrong.
The internal anchors (navigation bar items to go to different parts of the page) are working great, but I have trouble with the external links that lead to other website. The anchors are images of NGOs (WWF, Sea Shepherds, Greenpeace). I used to be able to go to their website from there.
Any help would be most welcome, since the project is due on the 12th of march!
Thank very much everyone!
Snippet:
$(document).ready(function() {
$('.js-scrollTo').on('click', function() {
var page = $(this).attr('href');
var speed = 750;
$('html, body').animate({
scrollTop: $(page).offset().top
}, speed);
return false;
});
});
$(document).ready(function() {
$('body').append('Haut');
});
$('.top_link').css({
'position': 'fixed',
'right': '20px',
'bottom': '50px',
'display': 'none',
'padding': '20px',
'background': '#fff',
'-moz-border-radius': '40px',
'-webkit-border-radius': '40px',
'border-radius': '40px',
'opacity': '0.9',
'z-index': '2000'
});
$(window).scroll(function() {
posScroll = $(document).scrollTop();
if (posScroll >= 550)
$('.top_link').fadeIn(600);
else
$('.top_link').fadeOut(600);
});
#font-face {
font-family: 'Old Standard TT';
src: url(OldStandard-Regular.ttf);
}
#font-face {
font-family: 'Bahiana-Regular';
src: url(Bahiana-Regular.otf);
}
header {
background-image: url("http://imageshack.com/a/img924/6688/ocZGBh.jpg");
background-size: cover;
min-height: 515px;
background-repeat: no-repeat;
background-position: center;
padding-top: 70px;
margin: auto;
}
nav {
width: 100%;
position: fixed;
height: 100%;
}
nav ul {
width: inherit;
display: table;
margin-top: 0px;
background-color: white;
float: left;
margin: 100%, auto;
}
nav ul li {
display: table-cell;
width: 16%;
}
ul li a {
display: block;
text-align: center;
color: rgba(0, 0, 0, .7);
text-decoration: none;
padding: 8px 8px 17px 8px;
font-family: 'Bahiana';
font-size: 25px;
}
body {
background-color: #DFDFDD;
margin: 0px;
}
h1 {
font-family: 'Old Standard TT', serif;
font-size: 25px;
color: #9e9c9c;
text-align: center;
margin-top: 15px;
}
h2 {
font-family: 'Old Standard TT', serif;
font-size: 30px;
color: #77D9D2;
text-align: center;
margin-left: 300px;
margin-right: 300px;
}
h3 {
font-family: "Old Standard TT", serif;
font-size: 20px;
color: #77D9D2;
}
section {
margin-top: 100px;
margin-bottom: 200px;
}
.pres,
.his,
.support {
text-align: center;
margin-left: 300px;
margin-right: 300px;
font-size: 20px;
color: #9e9c9c;
font-family: "Helvetica", sans-serif;
}
.pres-large {
font-family: 'Old Standard TT', serif;
font-size: 25px;
color: #77D9D2;
}
.des {
padding: 10px;
font-size: 15px;
font-family: "Helvetica", sans-serif;
text-align: justify;
color: #5F6C70;
}
.row {
display: flex;
margin: 60px 0;
text-align: center;
}
.card {
background-color: white;
width: 80%;
height: 800px;
margin-top: 25px;
margin-bottom: 25px;
}
.card.card-left {
margin: 0 5% 0 15%;
}
.card.card-right {
margin: 0 15% 0 5%;
}
.photo {
width: 100%;
}
#his {
clear: both;
}
table {
margin: auto;
}
table,
th,
td {
border-style: hidden;
text-align: center;
font-size: 20px;
font-family: 'Bahiana', Helvetica, sans-serif;
color: #9e9c9c;
width: 80%;
table-layout: fixed;
}
td {
width: 100px;
}
.tickets {
color: #77D9D2;
}
#gp {
float: left;
width: 200px;
margin-top: 20px;
}
#ssh {
float: right;
width: 200px;
margin-top: 15px;
}
#wwf {
width: 200px;
margin-left: 50px;
}
.press {
font-size: 25px;
font-family: "Old Standard TT";
color: #5F6C70;
text-align: center;
margin-left: 300px;
margin-right: 300px;
}
.separation {
display: block;
margin-left: auto;
margin-right: auto;
}
footer {
font-family: "Bahiana";
text-align: center;
font-size: 30px;
color: rgba(0, 0, 0, .7);
background-color: white;
margin-bottom: 10px;
padding-bottom: 0px;
}
<body>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<nav>
<ul>
<li id="nav-what"> <a class="js-scrollTo" href="#what">What is the Wild Circus</a></li>
<li id="nav-how"> <a class="js-scrollTo" href="#how">How does that work</a></li>
<li id="nav-history"> <a class="js-scrollTo" href="#his">History</a></li>
<li id="nav-tour"> <a class="js-scrollTo" href="#tour">Tour Dates</a></li>
<li id="nav-support"> <a class="js-scrollTo" href="#support">Support</a></li>
<li id="nav-press"> <a class="js-scrollTo" href="#press">Press</a></li>
</ul>
</nav>
<header>
<h1>
<img src="http://imageshack.com/a/img922/8683/f9lHHB.png"> <br>
Welcome to the most Amazing and Grandiloquent Sock Puppet show !!
</h1>
</header>
<section id="what">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>WHAT IS THE WILD CIRCUS?</h2>
<div class="pres">
<p>Did you know that because of Climate changing, the northpole ice floe is melting away a bit more every year and it gives polar bears a hard time to find food? <br>
<br>
Did you know that because of deforestation, Apes don’t know where to live anymore ? <br>
<br>
Times are quite hard for our furry friends, right now…But don’t feel sorry or helpless, there’s still a lot of stuff we can do to help them out !
</p>
<p class="pres-large">Oscar the Polar Bear, Maurice the Orang-utan, Freddy the Sloth and many more of their friends are waiting for you to show you where and how they live and why it’s important to keep them in their natural habitat. They will show you all the things you can do to help ! <br>
The wild Circus is an educationnal and entertaining way to discover some of the most endangered species of our world. Especially designed for kids, our shows bring you Orcas, Tucans, Polar Bears, Orangutans, sea turtles in their true environnement so you can discover how they live, why they are in danger and how to protect them. <br>
Through multiple funny and witty playlets, kids will learn facts and tips about wildlife and its preservation. We aim to bring knowledge and good times altogether. It’s a wonderful way to learn and have fun !
</p>
</div>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="how">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>HOW DOES IS WORK?</h2>
<div class="pres">
<p>The show is divided in several playlets. Each playlet covers a certain habitat, with multiple animals, each of them with a strong personnality the Kids will simply fall in love with them ! <br>
Every single animal is made of a giant sock and accessories and animated by one of our awesome puppet masters <br>
At the end of the show, kids will be able to meet them in person and ask any questions they want
</p>
</div>
<div class="row">
<div id="jungle" class="card card-left">
<h3>Welcome to the Jungle</h3>
<img class="photo" src="http://imageshack.com/a/img922/6589/OIQIpr.jpg">
<p class="des">Maurice the Orang-Utan, Stanley the Rhino and Krisha the Tigress are taking you to Sumatra Island. You will discover a beautiful, deep forest : the jungle. It’s currently dying from deforestation and so, all those gorgeous animals are losing their home. Let’s see what solution we can find to protect them</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
<div id="sea" class="card card-right">
<h3>Twenty thousands Leagues under the Sea</h3>
<img class="photo" src="http://imageshack.com/a/img921/111/Zr6ZHn.jpg">
<p class="des">Have you ever seen the clear waters of the great barrier reef, off the coast of Australia? Like in Pixar’s Finding Nemo, it’s a very colourful world with sea turtles, clownfishs, starfishs and corals. But overfishing and climate change are a threat to this paradise. On our trip to the Coral Triangle, we’ll meet Rita the Turtle, Cabo the clowfish and loads and loads of other fantastic creatures, so they can tell their story.</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
</div>
<div class="row">
<div id="santa" class="card card-left">
<h3>The Land of Santa</h3>
<img class="photo" src="http://imageshack.com/a/img924/1781/6fNY6c.jpg">
<p class="des">Temperatures in the Arctic are rising twice as fast as in the rest of the planet! When the ice melts, the sea level rises and polar bears like Oscar are having trouble finding food and a home. Plus, the pollution of waters by shipping traffic and drilling for petrol in this area is dramatically harmful for plankton, which is the basic food of tons of different sea creatures, like Bella the gigantic humpback whale. Santa’s not too happy about it and might even come and give us a hand to save those majestic mammals !</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
<div id="lung" class="card card-right">
<h3>The Lungs of the Planet</h3>
<img class="photo" src="http://imageshack.com/a/img922/1086/2ceBcx.jpg">
<p class="des">Last stop of our trip, but not least : The Amazon. The Amazon is the most gigantic, dense tropical forest called the Lung of the planet. It’s the home of one in ten known species on earth but also of many unnumbered undiscovered species of insects, monkeys, exotic birds. The Amazon is also the biggest victim of deforestation today and it is literally dying. And every animal even so tiny living there is dying with it. There is a clear link between the health of the Amazon and the health of the rest of the planet.<br>
The Amazon is gonna be our biggest stop cause there’s so much to see, so much to do. It is critical to preserve the tropical forest so we can promise a brighter future for Alvin the Spider Monkey, Freddy the Sloth, Mara the Tucan but also for every single living being on this planet, including you !<br>
Come on then, we’re waiting for you !!!
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
</div>
</section>
<section id="his">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>HISTORY</h2>
<p class="his">The story of the Wild Circus begins in 2006 when Elena Woodward, a Oregon kindergarden teacher started discussing environnement issues with her class of 3 and 4 years olds. The kids reacted strongly, fully understanding and feeling the injustice of our world toward the wildlife. Elena resented the fact that somehow, the kids are the fiercest defenders of nature but most of the time they just don’t know what’s happening to it. With her brother Ethan, she had this crazy idea to create a place where Kids could learn about wild animals and their preservation in an educationnal and entertaining way. They wanted something clever but simple and fun. Their love of socks did the rest. And so was born the Wild Circus.
They started performing in schools in Oregon but then it just caught on fire, becoming this huge success we now know ! After touring the US and Canada in 2016, The Wild Circus is now coming to Europe to share their knowledge and good spirits !
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="tour">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>TOUR DATES</h2>
<table>
<tr>
<td>April 16</td>
<td>Birmingham</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 17</td>
<td>London</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 20</td>
<td>Glasgow</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 21</td>
<td>Dublin</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 24</td>
<td>Paris</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 26</td>
<td>Amsterdam</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 27</td>
<td>Copenhagen</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 29</td>
<td>Stockholm</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 31</td>
<td>Berlin</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 2</td>
<td>Frankfurt</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 3</td>
<td>Milano</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 4</td>
<td>Prague</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 5</td>
<td>Vienna</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 7</td>
<td>Madrid</td>
<td class="tickets">Get Tickets</td>
</tr>
</table>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="support">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>THEY SUPPORT US, WE SUPPORT THEM!</h2>
<p class="support">
There's a lot of NGO that help preserving wildlife on an everyday basis. We love them and we know how important and crucial their job is. 10% of the tickets fare is going to them so they keep going protecting what's most treasurable on earth! Don't hesitate to support them too! You can meet them at the end of the show as they tour with us most of the time. If you want to donate or learn more about them and their work, here's their website links:<br>
<img src="https://cupom.com/wp-content/uploads/sites/12/2012/12/greenpeace-logo-e1356599879308.jpeg" id="gp"> <br>
<img src="https://totallyvegan.files.wordpress.com/2011/02/sea_shepherd.jpg" id="ssh"> <br>
<img src="http://logok.org/wp-content/uploads/2014/08/WWF_logo-1024x768.png" id="wwf"> <br>
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="press">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>PRESS</h2>
<p class="press">
"If you haven't seen this already, rush before it's too late. It's clever, witty and hilarious!" <i>-The independent-</i><br>
"Nature is calling for help in the smartest kid show to date. Go for it and bring your kids, siblings, nephews... The planet thanks you" <i>-Vanity Fair-</i><br>
"Best. Show. Ever!!!" <i>-The New York Times-</i><br>
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<footer>
<p>Eh! Wanna play a fun game while waiting to see the show? Go and check out Robozzle </p>
</footer>
</body>
If you remove height 100% from here:
nav {
width: 100%;
position: fixed;
/* height: 100%; */
}
And put target="_blank" to anchors all working fine
So I want it to float to the right, but I want the text and one image (which I haven't turned to links yet) to be in one line.
HTML code:
<html>
<title>Home - Welcome to Micro Skills!</title>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
<div id="header" class="header">
<div class="container">
<div class="logo">
<h1><img src="microskills_logo.jpg" width="275" height="106" alt="Logo - Micro Sills"></h1>
</div>
<div class="navBar">
<ul>
<b>
<li><img src="home_icon.jpg" width="256" height="256" alt="Home" class="home_icon"></li>
<li>About Us</li>
<li>Events</li>
<li>Get Involved</li>
<li>Contact Us</li>
</b>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<p>Welcome to the Community MicroSkills Development Centre website.
Since 1984, we have been serving communities in the Greater Toronto Area. As a non-profit, charitable organization, we strive to achieve excellence in our service delivery to women, newcomers to Canada, youth and other community members who trust us to support them in improving their economic and social well-being.
Community MicroSkills Development Centre is a multi-cultural, non-profit, community based organization committed to assisting the unemployed, with priority to women, racial minorities, youth and immigrants. Recognizing barriers that immigrants, racial minority, youth and women face in their efforts towards self-sufficiency, MicroSkills aims to enable them to participate more fully in Canadian society and assist them in acquiring the skills needed to achieve self-determination and economic, social and political equality.
Our programs are designed to assist the unemployed, with priority to women, racial minorities, youth and immigrants achieve career and personal goals. Clients can choose as many services as required to help them on their way to becoming self-reliant and economically self-sufficient.</p>
</div>
</div>
</html>
CSS code:
#charset "utf-8";
/* CSS Document */
body{
width:100%;
margin:auto;
}
.container{
width:85%;
margin:auto;
}
.header{
background-color:#900;
width:100%;
height:17%;
top:0;
position:fixed;
text-decoration:none;
}
.logo{
float:left;
}
.navBar{
float:right;
height: 10px;
}
li{
float:left;
margin-left:2%;
padding-top:20px;
color:#FFF;
text-transform:uppercase;
font-size:12px;
font-stretch:ultra-condensed;
padding-right:0;
}
.content{
padding-top:20%;
}
.home_icon{
height:50px;
width:50px;
}
I want the same positioning, but I want to move the text and image in the "navBar" slightly to the left to fit everything in one line.
You should add a width property to your .navBar CSS.
http://codepen.io/calebanth/pen/KrZBXo
.navBar {
float: right;
height: 10px;
width: 30%;
}