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.
Related
I'm using Bootstrap to style my html page. This is what I'm getting:
Both word are at the top of the screen but I'd like for them to be in middle vertically. Also they are in the center horizontally and I need them to be on the left and the right side of the screen.
Something like this:
This is my code:
<!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.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<div class="container">
<div class="row align-items-center">
<div class="col align-self-start">
Hello
</div>
<div class="col align-self-end">
World
</div>
</div>
</div>
</body>
<script src="script.js" defer></script>
</html>
I've tried different approach but very little change no metter how I edit my code.
Bootstrap has classes for vertical alignment. You’d want align-middle - bootstrap docs
Perhaps you mean align the text? somewhat unclear on the question if you mean the text to the entire "block" of the column.
.container *,.container-fluid * {
border: solid 1px pink;
padding: 1rem;
}
.test-high{height: 14rem;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container ">
<div class="row align-items-center test-high">
<div class="col text-left">
Hello
</div>
<div class="col text-right">
World
</div>
</div>
</div>
<div>A ml-auto example for the entire div removed the col class</div>
<div class="container">
<div class="row test-high align-items-center ">
<div>Hello</div>
<div class="ml-auto">World</div>
</div>
</div>
<div>A col example for the entire div as a column - note content may get outside its container col-1 and need say col-2 etc. ml-auto does the fun alignment</div>
<div class="container-fluid">
<div class="row test-high align-items-center ">
<div class="col-1">Hello</div>
<div class="ml-auto col-1">World</div>
</div>
</div>
body, html {
height: 100%;
background:#c9edff;
}
body {
margin: 0;
background: teal;
}
a {
text-decoration: none;
color: black;
font-family: 'roboto';
}
.align-self-start {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-left: 10px;
margin: 0 auto;
left: 0%;
background: whitesmoke;
padding: 10px;
box-shadow: 0px 0px 1px;
}
.align-self-start li {
padding-left: 10px;
list-style: none;
padding-top: 10px;
}
.align-self-end {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-right: 10px;
margin: 0 auto;
right: 0%;
background: darkgreen;
padding: 10px;
box-shadow: 0px 0px 1px;
}
.align-self-end li {
padding-right: 10px;
list-style: none;
padding-top: 10px;
}
.align-self-end a {
color: yellow;
margin: auto;
}
.nav_bar {
width: 100%;
background: lightblue;
display: inline-flex;
}
.nav_bar li {
margin: auto;
list-style: none;
}
.nav_bar a {
color: black;
}
a {
margin: auto;
text-align: center;
}
.border_form {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.border_form input{
height: 40px;
width: 400px;
border: none;
box-shadow: 0px 0px 0px whitesmoke;
}
.border_form input:focus{
height: 40px;
width: 400px;
border: none;
box-shadow: 0px 0px 0px whitesmoke;
outline: none;
}
.border_form button {
height: 40px;
width: 400px;
border: none;
box-shadow: 0px 0px 0px whitesmoke;
outline: none;
}
footer {
bottom: 0;
box-shadow: 0px 0px 1px;
background-color: yellow;
position: absolute;
width: 100%;
text-align: center;
}
footer li {
list-style: none;
display: inline-flex;
}
footer a {
padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<div class="nav_bar">
<ul>
<li>Home</li>
<li>News</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="border_form">
<form>
<input type="text" class="username_css" placeholder="Username">
<br>
<br>
<input type="password" class="password_css" placeholder="Password">
<br>
<br>
<button type="submit">Login</button>
</form>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col align-self-start">
<ul>
<li>Hello 1</li>
<li>Hello 2</li>
<li>Hello 3</li>
<li>Hello 4</li>
</ul>
</div>
<div class="col align-self-end">
<ul>
<li>World</li>
<li>World 2</li>
<li>World 3</li>
<li>World 4</li>
</ul>
</div>
</div>
</div>
<footer>
<ul>
<li>Footer</li>
<li>Footer 2</li>
<li>Footer 3</li>
</ul>
</footer>
</body>
</html>
// for all 1080p screens
Its been updated. This method will work on any browser. If it is not working on any other browser.. Then you need to use
#media only screen and (max-width: 1920px) {
.your_div {
}
}
// for iphone se
#media only screen and (max-width: 375px) {
.your_div {
}
}
^^
and you need to add
I'm trying to align an image next to some text on my webpage without using any position properties like right:, left:, top:, and bottom: but I just can't align it the way I want
body {
background-color: #fafafa;
font-family: Epilogeal, sans-serif;
}
.main {
padding: 20px;
overflow: hidden;
}
nav {
width: 100%;
position: sticky;
display: flex;
}
.nav-links {
flex: 1;
text-align: left;
padding-left: 50px;;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
padding-left: 50px;
}
a {
text-decoration: none;
color: hsl(0, 0%, 41%);
font-family: Epilogeal, sans-serif;
}
.register-btn {
border: 2px solid hsl(0, 0%, 41%);
border-radius: 15px;
padding: 10px;
width: 4%;
text-align: center;
position: fixed;
right: 60px;
top: 16px;
}
.login-btn {
color:hsl(0, 0%, 41%);
position: fixed;
right: 215px;
}
.hero {
padding: 150px;
}
.hero-header {
color: hsl(0, 0%, 8%);
font-size: 50px;
}
.hero-text {
color: hsl(0, 0%, 41%);
font-size: 18px;
float: left;
}
.image {
width: 700px;
height: 700px;
float: right;
margin-bottom: 100px;
}
<!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.0">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://fonts.google.com/specimen/Epilogue">
<title>Document</title>
</head>
<body>
<div class="main">
<nav>
<div class="logo">
<img src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\logo.svg" alt="logo">
</div>
<div class="nav-links">
<ul>
<li>Features</li>
<li>Company</li>
<li>Careers</li>
<li>About</li>
</ul>
</div>
<div class="login-btn">
Login
</div>
<div class="register-btn">
Register
</div>
</nav>
<div class="hero">
<div class="hero-header">
<h1>Make <br> remote work</h1>
</div>
<div class="hero-text">
<p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch productivity soar.</p>
</div>
<img class="image" src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\image-hero-desktop.png" alt="hero-image">
</div>
</div>
</body>
</html>
Here's what my webpage looks like:
And here's what I want it to look like:
I'm not good with positioning stuff in CSS, so any help would be much appreciated!
You can try this.
Replace the Hero Element with this.
<div class="hero">
<div class="hero-left">
<div class="hero-header">
<h1>Make <br> remote work</h1>
</div>
<div class="hero-text">
<p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch
productivity soar.</p>
</div>
</div>
<img class="image" src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\image-hero-desktop.png" alt="hero-image" />
</div>
and CSS of .hero selector with
.hero {
padding: 150px;
display: flex;
justify-content: space-between;
}
I am attempting to construct a timeline similar to the one that is shown below:
The difficulty I am having is constructing the bottom portion of the timeline that has icons connected by a single line, as well as adding the triangle to the bottom of each event. This is currently my code:
.navbar {
margin-bottom: 0px;
}
.jumbotron {
margin-bottom: 0px;
}
#timeline {
list-style: none;
white-space: nowrap;
overflow: auto;
padding-left: 0;
}
#timeline li {
display: inline-block;
padding: 1.5%;
border: 1px solid #c0c0c0;
border-radius: 5px;
box-shadow: 1px 1px 6px #757677;
margin-top: 2%;
text-align: center;
padding-bottom: 0;
width: 45%;
}
#timeline li+li {
margin-left: 2%;
}
#timeline li h3,
#timeline li em {
display: block;
}
#timeline_header {
padding-left: 0;
}
hr {
width: 100%;
}
#triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>LinkedIn</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Welcome!</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" id="timeline_header">
<h1>What I've Been Up To</h1>
</div>
</div>
<!--Timeline-->
<div class="row" style="overflow:auto">
<hr>
<ul id="timeline">
<li>
<h2>Job #2</h2>
<em><h4>May 2016 - Present</h4></em>
<h3>Software Developer</h3>
</li>
<div id="triangle"></div>
<div class="timeline_icon">
<img src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt=""></div>
<li>
<h2>Job #1</h2>
<em><h4>May 2012 - May 2016</h4></em>
<h3>Software Developer</h3>
</li>
<li>
<h2>Graduated from Colleg</h2>
<em><h4>May 2012</h4></em>
<h3>Bachelor's Degree</h3>
</li>
</ul>
</div>
</div>
<hr>
<footer>
<p> Copyright ©
<!--Script displays the current year-->
<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>
</p>
</footer>
</body>
</html>
The first list element in my list is my attempt at trying to add a triangle and an icon, but I can't figure out how to position the triangle on the bottom border, and how to position the icon directly below the triangle, with a horizontal rule, or other line, between icons.
The triangle is applied as a pseudo element ::after. The image is aligned with the block - it will be much easier to manipulate. Fixed the scroll view to scroll only in X, not in Y axis. The line is an object external to the scrollview, because otherwise its length is limited to the visible area and scrolls left with the view.
.navbar {
margin-bottom: 0px;
}
.jumbotron {
margin-bottom: 0px;
}
#timeline {
list-style: none;
padding-left: 0;
padding-top: 40px;
padding-bottom: 60px;
position: relative;
}
#timeline_border {
position: relative;
top: -123px;
display: block;
width: 100%;
height: 1px;
border-top: 2px solid #ccc;
z-index: -1;
}
#timeline li {
display: inline-block;
padding: 1.5%;
border: 1px solid #c0c0c0;
border-radius: 5px;
box-shadow: 1px 1px 6px #757677;
margin-top: 2%;
text-align: center;
padding-bottom: 0;
width: 45%;
position: relative;
}
#timeline > li:after {
position: absolute;
bottom: -20px;
left: 40px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: block;
content: "";
}
#timeline li+li {
margin-left: 2%;
}
#timeline li h3,
#timeline li em {
display: block;
}
#timeline_header {
padding-left: 0;
}
hr {
width: 100%;
}
#triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: inline-block;
}
.timeline_ruler {
white-space: nowrap;
overflow-x: scroll;
overflow-y: visible;
display: block;
height: auto;
padding-bottom: 100px;
}
.timeline_icon {
width: 80px;
height: 80px;
position: absolute;
bottom: -102px;
left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>LinkedIn</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Welcome!</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" id="timeline_header">
<h1>What I've Been Up To</h1>
</div>
</div>
<!--Timeline-->
<div class="row" style="overflow:auto">
<hr>
<div class="timeline_ruler">
<ul id="timeline">
<li>
<h2>Job #2</h2>
<em><h4>May 2016 - Present</h4></em>
<h3>Software Developer</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
<li>
<h2>Job #1</h2>
<em><h4>May 2012 - May 2016</h4></em>
<h3>Software Developer</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
<li>
<h2>Graduated from Colleg</h2>
<em><h4>May 2012</h4></em>
<h3>Bachelor's Degree</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
</ul>
</div>
<div id=timeline_border></div>
</div>
</div>
<hr>
<footer>
<p> Copyright ©
<!--Script displays the current year-->
<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>
</p>
</footer>
</body>
</html>
So when I fully reduce the browser size, I have my website looking like this, which is how I want it to look:
http://oi66.tinypic.com/10x7zw4.jpg
But when I start stretching out the browser, the position of my picture in the center will begin to change and move all the way to the left. I want the picture to stay on the center regardless of whether I stretch out the browser or reduce it. Is there a way I can fix this issue? Been trying to find out how to solve the issue but cannot find any clue. Please help, thank you.
My HTML:
<html>
<head>
<title>Jason H Kang</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div id="span">
<h1 class="text-center">Jason H Kang</h1>
<div class="intro">
<p class="text-center">23 Years Old | Junior Web Developer | NJ</p>
</div>
<div class="hello">
<p class="text-center">
Hello I am Jason Kang. Welcome to my personal website!</br>Please feel free to contact me if you have further inquiries.</p>
</div>
</div>
<div class="image">
<img src="kangjason.jpg" alt="face" class="img-circle">
</div>
<!-- <div class="button">
<button type="button" class="btn btn-success">Contact Me!</button>
</div> -->
<div id="footer">
<p class="copyright">Copyright: Jason Kang 2015</p>
</div>
</body>
</html>
My CSS:
body {
background-color: #F8F8FF;
color: #000000;
}
.navbar {
background: rgba(114, 180, 39, 1)
}
.navbar .brand, .navbar .nav > li > a {
color: #FFFFFF;
margin-left: 14em;
padding-right: 0em;
font-family: Gill Sans;
font-size: 1.0em;
}
.navbar .brand, .navbar .nav > li > a:hover {
color: #000000;
}
#footer {
background:#000000;
width:100%;
height:47px;
position:fixed;
bottom:0px;
left: 0px;
}
.copyright {
padding-top: 19px;
padding-left: 1.3%;
font-family: Arial;
font-size: 0.9em;
color: white;
}
.intro {
padding-left: 0.35%;
font-family: 'Source Sans Pro', sans-serif;
position: relative;
}
.hello {
padding-top: 1.5%;
padding-left: 5%;
font-family: 'Source Sans Pro', sans-serif;
position: relative;
}
.img-circle {
width: 11.0em;
height: 11.0em;
border: 1px solid black;
margin-left: 10em;
margin-top: 1em;
position: relative;
}
To center a block level element, you use margin:auto:
.img-circle {
width: 11.0em;
height: 11.0em;
border: 1px solid black;
margin: auto;
margin-top: 1em;
position: relative;
display:block;
}
JSFiddle Demo
Or, alternatively, you can set the parent to text-align:center;:
.image {
text-align: center;
}
JSFiddle Demo
Change your css for the img-circle class as follows
.img-circle {
width: 11.0em;
height: 11.0em;
margin: 0 auto;
border: 1px solid black;
display: flex;
}
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%;
}