I was hoping someone can help me out. When I open my page I'm trying to create in Firefox it is zoomed right in. also when I open in safari it is a different layout (the col-md-1 from the left side had disappeared.) I am new to this so I'm sorry if my code is terrible or the answer is quite obvious. I have been trying a few things to fix it but nothing seems to work. thanks in advance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Life Atlas</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Alegreya" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400i" rel="stylesheet">
<style>
/* Style the links inside the navigation bar */
a:hover { text-decoration: none; }
.topnav {
text-align:center;
z-index: 99;
color: black;
text-decoration:none;
border:1px solid #ccc;
border-radius: 6px;
border-width:1px 0;
position:absolute;
left: 0;
top: 20;
list-style:none;
padding:0;
background-color: white;
width: 100%;
}
.topnav li
{
display:inline;
font-size: 30px;
}
.topnav a{
display:inline-block;
padding:50px;
text-decoration: none;
color: #BFBFBF;}
/* Change the color of links on hover */
.topnav a:hover {color: black;}
/* Add a color to the active/current link */
.topnav a.active {
color: black;}
#title{font-family: 'Alegreya', serif;
font-size: 250px;
text-align: center;}
.stories{font-size: 50px;}
.leftstories{font-size: 50px; display: block;}
.title-stories{font-size: 100px;
font-family: 'Lora', serif;
color: #BC9B5D;
padding-right: 100px;
padding-left: 100px;
width: 80%;}
.text-insert {text-align: justify;
padding-top: 50px;
padding-right: 100px;
padding-left: 100px;}
.right{
text-decoration: none;
padding-bottom:0px;
list-style: none;}
.right li{margin-top: 75px;}
.right li img{margin-top: 75px;
margin-bottom: 0px;}
.left{
text-decoration: none;
padding-bottom:0px;
list-style: none;}
.left li{margin-top: 75px;}
.left li img{margin-top: 75px;
margin-bottom: 75px;}
#import url(https://fonts.googleapis.com/css? family=Noto+Sans:400,700);
* {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%; }
.image {background: url(photos/main-image-web.jpg) no-repeat fixed; background-image: no-repeat fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 1000px;}
.banner h1, .banner h3, .banner h6, .banner p{
margin: 0;
text-align: center;
color: #7F7F7F;
background-color: white;}
.banner {
color: white;
background: url(photos/mornington.jpg) top left/cover no-repeat;
height: 2000px;
display: flex;
justify-content: center;
align-items: center;}
.banner h1{font-style: 'Lora', serif;
font-size: 100px;
padding-top: 30px;
padding-bottom: 50px;
padding-left: 150px;
padding-right: 150px;}
.banner p{font-size: 50px;
font-weight: normal;
padding-top: 50px;}
.banner h1: hover{color: black;
opacity: 0;}
</style>
</head>
<BODY>
<div class ="container-fluid">
<h1 id="title">Life Atlas</h1>
<div class="container-fluid">
<ul class="topnav">
<li>HOME</li>
<li>ABOUT</li>
<li>PHOTOGRAPHY</li>
<li>TRAVEL BLOG</li>
<li>COLLABORATION</li>
<li>CONTACT</li>
</ul>
</div></div>
<div class="image"></div>
<section class="content">
<div class="container-fluid" class="row">
<div class="col-md-1"></div>
<!-- Left Hand Column -->
<div class="col-md-5" style="margin-top: 450px">
<ul class="left">
<li>
<img src="photos/USA-2.jpg" style="width: 100%" class="pull-right">
</li>
<li>
<img src="photos/Bridge.jpg" style="width: 100%" class="pull-right">
</li>
<div class="leftstories">
<li>
<p style="padding-left: 100px">PHOTOGRAPHY</p>
<h2 class="title-stories">Looking for a dedicated and loveable photographer? You're in the right place.</h2>
<p class="text-insert">Whether it’s a relaxed family portrait session, a special event, a personal portrait session, the day you marry the love of your life; Life Atlas is dedicated to capturing beautiful passing moments and making sure that they can live forever..</p>
</li>
</div>
<li>
<img src="photos/homepageprofile.jpg" style="width: 100%">
</li>
</ul>
</div>
<!-- right hand column -->
<div class="stories">
<div class="col-md-5" style="padding-left: 50px">
<ul class="right">
<li>
<p style="padding-left: 100px;">TRAVEL</p>
<h2 class="title-stories">Stories from around the world</h2>
<p class="text-insert">Journey with me around the world, across the country, and sometimes even just down the street. A compilation of stories and advice, this is the atlas of my travels, written to help improve your travels.
This is advice straight from my heart, about all those things closest to it; adventure, photographic opportunities that take your breath away, and culinary delights that pair best with a glass of red.</p></li>
<li>
<img src="photos/Inspo.jpg" style="width: 100%">
</li>
<li>
<img src="photos/event.jpg" style="width: 100%">
</li>
<li>
<img src="photos/homepagewedding.jpg" style="width: 100%">
</li>
<li>
<p style="padding-left: 100px;">PERSONAL</p>
<h2 class="title-stories">So who is Life Atlas?</h2>
<p class="text-insert">The more suitable question may in fact be 'what is Life Atlas'? Each of our lives are a journey, and inevitably a story. My quest as a photographer is to add to your Life Atlas; to capture moments and memories that become part of your life story.
Life Atlas is the sum of your adventures, of my adventures. It is the every growing and ever evolving story of who I am, what I seek, how I work, where I've travelled and who I've met along the way.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10">
<div class="banner">
<div class="banner-text"><a href="">
<p>READ MY LATEST BLOG</p>
<p>TRAVEL TO THE</p>
<h1>Mornington Peninsula</h1>
</div></a>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<p></p>
</section>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">. </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="/parallax.js.1.5.0"></script>
</BODY>
</html>
Related
So to start off let me just note that I am not tech savy at all. I find most computers difficult and I wouldn't be taking this class unless I needed it to graduate from my university.
I'm trying to make a webpage for class thats due tomorrow and I am struggling to get all my stuff positioned properly. I made a mock up design in photoshop for what I'm trying to achieve but actually implementing it has been beyond fustrating.
Most floats aren't working(Probably my fault since I'm struggling to understand the concept).
I also made a secondary background image but its registering as a normal one I think.
Also is there a string of code I can use to center everyting like it is in my mock up?
How its suppose to look
How mine looks
My code:
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x;
}
#HeaderImage{
background-image: url(../img/HeaderImage.png);
background-repeat: no-repeat;
z-index: 1;
background-position: left;
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
text-align: center;
}
/* Nav Element */
/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}
.site-navigation {
height: 155px;
}
.site-navigation img {
margin-top: 16px;
float:left;
}
.site-navigation ul {
width: 490px;
margin: 0 auto;
}
.site-navigation li {
margin: 35px 33px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* Header Element */
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
border-bottom: 1px solid #d9d9d9;
margin: auto;
margin-top: 115px;
padding-bottom: 42px;
}
.search{
}
.SearchGlass{
float: left;
position: top;
}
<div class="container"></div>
<header class="Team Sky">
<nav class="site-navigation">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
<ul class="clearfix">
<li>shop</li>
<li>checkout</li>
<li>video</li>
</ul>
<!-- SEARCH BAR AND MAGNIFYING GLASS!-->
<div class="SearchGlass" id="SearchGlass">
<img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>
<form>
<div class="search">
<!-- don't need a label here - use placeholder="" (see forms we did in class - it's on moodle -->
<label for="search">search</label>
<input id="search" type="text" name="search"/>
</div>
</form>
</nav>
<div id="HeaderImage">
<img src="img/HeaderImage.png" alt="Dude on a bike">
</div>
<!-- need to close your form element -->
<div class="TeamSkylogo">
<h2>Team Sky</h2>
</div>
<div class="RoadToYellow">
<P>the road to yellow</P>
</div>
<!--Shop Team Sky-->
<main>
<h1> TEAM NEWS </h1>
<!-- each article/blog should be in it's own container -->
<div class="articleone">
<img src="img/ArticleImageOne.png" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
<div class="articletwo">
<img src="img/ArticleImageTwo.png" alt="Bikes by River">
<h1>Krudder Gets a Break</h1>
<P>The powerful German who was a rock in the beginning of the season will now get a break from and is expected to return for the Malecour at the end of the season</P>
<!--readon !-->
</div>
<div>
<img src="img/ArticleImageThree.png" alt="Bike Dudes Biking">
<h1>Kinnick's New Contract</h1>
<P>Peter Kinnick contract is still not settled with the team manager Alistar McDowell saying that a new contract offer has been made</P>
<!--readon !-->
</div>
<div class="articlefour">
<img src="img/ArticleImageFour.png" alt="Single Guy On Bike">
<h1>Froom In Third</h1>
<P>Chris Froom Finished Third in the opening prologue stage at the Criterium du Dauphine with a strong showing on the first day</P>
<!--readon !-->
</div>
</main>
<footer>
<img src="img/sponsor1.png" alt="Team Sky Sponsor">
<img src="img/sponsor2.png" alt="Pinarello">
<img src="img/sponsor3.png" alt="Shimano">
<img src="img/sponsor4.png" alt="Rayha">
<img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>
THANK YOU FOR YOUR HELP
This might help you, but there are lot of issues in the above given code,hope you can get it correct , try this code for now
body {
background-image: url(../img/background.png);
background-repeat: repeat-x;
}
#HeaderImage{
background-image: url(../img/HeaderImage.png);
background-repeat: no-repeat;
z-index: 1;
background-position: left;
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
text-align: center;
}
/* Nav Element */
/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}
.site-navigation {
height: 155px;
}
.site-navigation img {
margin-top: 16px;
float:left;
}
.site-navigation ul {
width: 490px;
margin: 0 auto;
}
.site-navigation li {
margin: 35px 33px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* Header Element */
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
border-bottom: 1px solid #d9d9d9;
margin: auto;
margin-top: 115px;
padding-bottom: 42px;
}
.search{
}
.SearchGlass{
float: left;
position: top;
}
.article{
float: left;width: 100%;margin-bottom: 15px
}
.article img {float: left;width: 28%;margin-right: 1%}
.article h1{float:left;width: 70%;margin: 5px 0;text-align: left;}
.article p{float:left;width: 70%;margin: 5px 0;text-align: left;}
h1{text-align: left;}
footer{display: block;width: 100%;float: left;}
<div class="container">
<header class="Team Sky">
<nav class="site-navigation">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
<ul class="clearfix">
<li>shop</li>
<li>checkout</li>
<li>video</li>
</ul>
<!-- SEARCH BAR AND MAGNIFYING GLASS!-->
<div class="SearchGlass" id="SearchGlass">
<img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>
<form>
<div class="search">
<!-- don't need a label here - use placeholder="" (see forms we did in class - it's on moodle -->
<label for="search">search</label>
<input id="search" type="text" name="search"/>
</div>
</form>
</nav>
<div id="HeaderImage">
<img src="img/HeaderImage.png" alt="Dude on a bike">
</div>
<!-- need to close your form element -->
<div class="TeamSkylogo">
<h2>Team Sky</h2>
</div>
<div class="RoadToYellow">
<P>the road to yellow</P>
</div>
<!--Shop Team Sky-->
<div>
<h1> TEAM NEWS </h1>
<!-- each article/blog should be in it's own container -->
<div class="article">
<img src="http://via.placeholder.com/600x500" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
<div class="article">
<img src="http://via.placeholder.com/600x500" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
</div>
<footer>
<img src="img/sponsor1.png" alt="Team Sky Sponsor">
<img src="img/sponsor2.png" alt="Pinarello">
<img src="img/sponsor3.png" alt="Shimano">
<img src="img/sponsor4.png" alt="Rayha">
<img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>
</div>
I want my navigation links to be centered in my fixed navigation bar i tried to
adding padding but somehow the navigation expands. Also i tried to vertical-align but that didn't do much. I am really new to CSS so explanations would be helpful in cases if this happened again
HTML
`<html>
<html>
<head>
<title>Photography | Home </title>
<link href="app.css" rel="stylesheet"/>
<script type="application/javascript" src="on.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showcase">
<div class="container">
<h2>Photography</h2>
<p>Our photo's are always presente in the best
quality possible with carefulness
</p>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">asdasdsada
<img src="./images/CameraIcon.png">
<h2>Photography</h2>
<p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p>
</div>
<div class="box">
<img src="./images/CommunityICON.jpg">
<h2>Guranteed!</h2>
<p>If you are not satisfied with our work you will have an 80% refund</p>
</div>
<div class="box">
<img src="./images/TimeIcon.png">
<h2>Time Managment</h2>
<p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p>
</div>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>`
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
padding-top: 30px;
}
header a {
text-decoration: none;
text-transform: uppercase;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float:right;
text-align: center;
padding-right: 20px;
}
nav {
text-align: center;
}
I would use display: flex. It makes this really easy. Use align-items: center; to center vertically and justify-content: space-between to separate the logo from the nav. Then I would also float your nav li's left, so they're in order. You could use flex there, too, but isn't necessary.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
}
header a {
text-decoration: none;
text-transform: uppercase;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
text-align: center;
padding-right: 20px;
}
nav {
text-align: center;
}
<html>
<head>
<title>Photography | Home </title>
<link href="app.css" rel="stylesheet" />
<script type="application/javascript" src="on.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showcase">
<div class="container">
<h2>Photography</h2>
<p>Our photo's are always presente in the best quality possible with carefulness
</p>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">asdasdsada
<img src="./images/CameraIcon.png">
<h2>Photography</h2>
<p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p>
</div>
<div class="box">
<img src="./images/CommunityICON.jpg">
<h2>Guranteed!</h2>
<p>If you are not satisfied with our work you will have an 80% refund</p>
</div>
<div class="box">
<img src="./images/TimeIcon.png">
<h2>Time Managment</h2>
<p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p>
</div>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
Whenever i Resize my website it keeps getting messed up, and I have tried everything to fix it but i cant figure it out. I tried bootstrap, but didn't quit understand the meaning of it. I am new so advice is appreciated and Thanks for helping
Regard Hussein M.
body {
color: white;
font-family: sans-serif;
background-repeat: round;
background-image: url(Gaming.jpg);
background-position: -430px -100px;
}
h1 {
font-family: sans-serif;
width: 100%;
height: 100%;
margin: 10px;
padding: 0px;
}
ul {
}
table {
padding-left: 50px;
}
body {
min-width: 800px;
position: relative;
font-family: sans-serif;
}
img {
margin: 0;
position: absolute;
top: 500%;
left: 50%;
margin-right: -50%;
border-color: red;
border-width: medium;
}
#menu1 {
float: left;
padding-left: 25px;
}
#menu2 {
float: right;
padding-right: 50px;
}
.nav {
font-size: 17px;
font-family: inherit;
position: relative;
top: -9px;
padding: 9px 0px 50px 0px;
margin-bottom: 0px;
}
.nav ul,li,a{
display: inline;
padding-left: 10px;
text-decoration: none;
color: rgb(22, 239, 239);
}
.main {
position: absolute;
top: 150px;
left: 5px;
}
.h1z1 {
border-radius: 5px;
border: 1px solid #fff;
margin: 1 auto;
padding: 0px ;
margin-top: 60px;
width: 20%;
text-align: left;
}
.h1z1-img {
border-radius: 5px;
display: inline-block;
}
.h1z1-description {
display: inline-block;
margin-left: -25px;
top: px;
}
.Buy {
text-decoration: underline;
margin-left: -8px;
}
.H1Z1head {
margin: -10px;
margin-left: 40px;
}
.go {
color:aqua;
position: fixed;
top: 190px;
left: 380px;
}
.go {
text-decoration: underline;
font-size: 25px;
}
<!DOCTYPE HTML>
<html>
<head>
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?4aNAebvVIseGLS8uJOO3z9Bsrlfecjl7";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->
<title>Gaming Library</title>
<link rel="stylesheet" type="text/css"
href="Stylesheet.css" />
</head>
<body>
<div class="nav">
<ul id="menu1">
<li>Homes</li>
<li>About</li>
<li>Affliates</li>
<li>Donate</li>
</ul>
<ul id="menu2">
<li>Old web</li>
<li>Sign Up</li>
<li>Login</li>
<li>Contact Support</li>
</ul>
</div>
<div class="go">
<h1>Go to feautered games</h1>
</div>
<!-- Næste side
<div class="h1z1">
<div>
<ul>
<h2 class="H1Z1head">H1Z1</h2>
</ul>
<img class="h1z1-img" src="KOTK.jpg" width="250" height="180">
</div>
<div class="h1z1-description">
<ul>
<li>
<p>H1Z1: King of the Kill is a fast-paced shooter in which players compete in large-scale chaotic PvP spectacles of skill, wit and a little luck, where everyone must fight to the death to stand alone at the top of the podium.</p>
<h3 class="Buy">Buy Now only $20.99 </h3>
</li>
</ul>
</div>
</div>
-->
</body>
</html>
Here is a simple example how to get your content responsive with Bootstrap, that you didn't understand. https://jsfiddle.net/qaxhxcb3/1/ (Here u can resize and such)
body {
font-family: 'Montserrat', sans-serif !important;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 14px;
}
.navbar-nav li a:hover {
color: green !important;
}
section h1 {
color: white;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.pink {
background-color: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Gaming Library</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Homes</li>
<li>About</li>
<li>Donate</li>
<li>Affliates</li>
<li>Support</li>
</ul>
</div>
</div>
</nav>
<!-- First section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-4 green">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 red">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 blue">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
<!-- Second section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-12 pink">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
</body>
</html>
As can you see, you put your content inside the class "container", then "row" after than u choose how you will display your content with the grid system. The Bootstrap grid system allows up to 12 columns across the page.
and the grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
and there is also different columns that decide how it will be displayed on the screen. In the example i got three col-sm-4 and it must always add up to 12 for each row class. In the second section i created there is col-sm-12, and that fill up the whole grid. Hope this helps a litte bit.
But, i suggest you read some Bootstrap tutorials from w3school to get a hang of it.
I just started using bootstrap and am having a problem with my image shifting out of place when I resize my browser. The background image that is holding my image and text doesn't seem to be scaling either. when I maximise my browser everything is in place and perfect. As you can see in the first image that is where my problem is. The second image is how it looks maximised and how it should look with all screen sizes. Any help appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="images/theater.ico" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<div id="rainbow"><img alt="rainbow gradient" src=
"images/rainbow.png"></div>
<div id="header">
<!--home-->
<p id="logo"><img alt="Bethan Rainforth a comedic dancer" src=
"images/logo.png" class="img-responsive"></p>
</div>
<div id="nav-bar">
<nav class="nav">
<ul class="list-inline">
<li>
Home
</li>
<li>
<a class="gray" href="work.html">Work</a>
</li>
<li>
<a class="gray" href="gallery.html">Gallery</a>
</li>
<li>
<a class="gray" href="hireme.html">Hire!</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="row">
<div class="about-me row">
<div class="col-md-12">
<img alt="Bethan Rainforth" class="img-responsive" id="pic" src=
"images/pic.png">
<p class="about-text">I am a physical comedian, continuously
being inspired by comical characters and exaggerated
movement. I fuse elements of dance and theatre to create
performances that are somewhat over-the-top, and
outrageous. I use locking technique as a foundation build
and produce uproarious performances suitable for an
eclectic audience. I aim to leave audience members feeling
uplifted, swimming in their own tears of laughter,
momentarily forgetting any worries or woes.</p>
</div><!--End of col-md-12 about me-->
</div><!--End of about me row-->
</div><!--End of about me wrapper-->
/********************************
Body of page
*********************************/
html,
body {
background-image: url(images/background.png);
margin: 0 auto;
}
#container{
width: 960px;
margin: 0 auto;
}
/********************************
Header
*********************************/
#rainbow img{
margin-bottom: 15px;
}
#logo img {
width: 320px;
}
/********************************
Navigation
*********************************/
nav a {
font-family: Hobo Std;
padding: 50px;
}
ul {
list-style-type: none;
}
nav {
text-align: center;
margin-left: 20px;
}
a {
text-decoration: none;
}
nav li {
display: inline;
width: 150px;
}
.gray,
a:hover,
a:visited,
a:active {
color: #a5a5a5;
text-decoration: none;
}
#home {
background-image: url(images/pinkpaint.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 30px;
margin: 0 auto;
color: #000;
}
ul.list-inline{
margin-top: 25px;
}
/********************************
About Me
*********************************/
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
.about-me {
background-image: url(images/border.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
width: 730px;
height: 490px;
display: block;
margin: 0 auto;
}
p.about-text{
color: #7ca5d2;
font-family: hobo std;
font-size: 1.2em;
line-height: 35px;
margin: 75px;
}
It seems this is adding 74px to the top of the image:
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
Try removing the margin-top code and see what happens. If needed for desktop, you can add a media query so that it is removed when resized. For example:
#media and (max-width:700px) {
img#pic {
margin-top: 0;
}
}
Let me know if that doesn't work.
this is for sure a noobish html question, because i am new at this stuff.
Anyways lets get to it:
1st, check the fiddle:
http://jsfiddle.net/d6767uur/
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="frontpage.css" rel="stylesheet">
</head>
<body>
<div class="navBar">
<div class="greyline"> </div>
<div class="menu"> smoothies </div>
<div class="greyline"> </div>
<div class="menu"> milkshakes </div>
<div class="greyline"> </div>
<div class="menu"> juicy facts </div>
<div class="greyline"> </div>
<div class="menu"> about us </div>
<div class="greyline"> </div>
<div class="stuffwithsmall"> © All rights reserved.. </div>
</div>
<div class="frontWrapper">
<h1> HELLO </h1>
<div style="margin-left: 750px; margin-top: -435px;"> <img src="frontfruit.jpg"> </div>
</div>
</body>
</html>
CSS:
#font-face { font-family: SourceSansPro-Regular; src: url('SourceSansPro-Regular.otf'); }
body {
margin: 0px;
padding: 0px;
}
.navBar {
width: 205px;
height: 667px;
background-color: #55AE3A; //hover = 398a20
}
.greyline {
width: 205px;
height: 1px;
background-color: darkgrey;
}
.menu {
font-family: 'SourceSansPro-Regular';
color: white;
font-size: 25px;
opacity: 0.64;
height: 40px;
text-decoration: none;
}
.menu:hover {
background-color: #398a20;
}
.stuffwithsmall {
color: #75715e;
font-family: helvetica;
margin-top: 320px;
}
Question: why is that header going down below the main menu, and how do i change it, so that it goes to the right of the menu?
Your navbar div goes down that far because .stuffwithsmall class is inside it and has a huge margin-top. You can fix that by moving it lower, after the closing tag of navbar div.
In css, change:
.navbar {
height: auto;
width: 100%;
}