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>
Related
I am using flexbox and the footer is outside of flexbox contents.
my issue is the footer is in the middle of flex items and is not setting on the bottom. I don't know what I did wrong. everything I've tried either hasn't worked so far.
any help will be apperiaciate.thanks
here is my full code : https://codepen.io/ROY1319/project/editor/ANyGyr
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #9bf6ff;
font-family: 'Oswald', sans-serif;
width: 100%;
}
#headerExperience {
line-height: 200px;
font-family: "proxima nova bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: khaki;
background-color: steelblue;
background-image: url("images/Experience\ background\ imagee.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
margin-bottom: 25px;
}
.container {
display: flex;
height: 100vh;
flex-direction: column;
gap: 25px;
align-items: center;
margin-bottom: 25px;
}
.century,
.LNA {
border: 2px solid black;
font-size: 16px;
background-color: #E5ECE9;
display: block;
}
.century,
.LNA {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1 0 15OPX
}
.headers,
.tasks {
display: block;
align-content: space-around;
}
/* nav and ul */
ul {
overflow: hidden;
display: inline-block;
/* how do I set the vertical spacing between the list items? */
}
li {
margin: 10px 0;
letter-spacing: 2px;
}
footer {
background-color: orangered;
padding: 0 1rem;
bottom: 0;
width: 100%;
height: 2.5rem;
}
footer .foot {
display: flex;
justify-content: space-between;
align-items: center;
color: red;
padding: 5em 0;
}
footer ul {
list-style: none;
margin: 0;
}
footer li {
display: inline-block;
padding: 0.75rem 1.25rem;
}
<!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="experience.css" />
<title>Experience</title>
</head>
<body>
<!--Header-->
<div id="headerExperience">
<h1>Experience</h1>
</div>
<!--container-->
<div class="container">
<!-- Century-->
<div class="century">
<div class="media">
<img src="imag logo.png" alt="CenturyImage" />
<figcaption>Century Logo</figcaption>
</div>
<div class="headers">
<h2>ddddd</h2>
<h3>IT student Worker</h3>
<h4>Whie MN,2018</h4>
</div>
<div class="tasks">
<h5>TASKS</h5>
<ul>
<li>
1.Instructed users over the phone by describing what to look for and steps to take.
</li>
<li>
2.Adapted to change and learn new version of Microsoft quickly.
</li>
<li>
3.Assisted department staff with assigned tasks including technology equipment prep, filling, shredding.
</li>
<li>4.Created appropriate technical documents.</li>
</ul>
</div>
</div>
<!-- lNA-->
<div class="LNA">
<div class="media">
<img src="images/logo.jpg" alt="logo" />
<figcaption>LNA Logo</figcaption>
</div>
<div class="headers">
<h2>LNA</h2>
<h3>Digital Support Specialist</h3>
<h4>Minneapolis MN,2021-Present</h4>
</div>
<div class="tasks">
<h5>Tasks</h5>
<ul>
<li>1.Update and manage a simple program website.</li>
<li>2.Help participants access free and safe internet service.</li>
<li>
3.Encrypting hard drives of participants' laptops using bit Locker built-in window OS.
</li>
<li>
4.Distribute free laptops and tech accessories to participants.
</li>
<li>5.Lead small student groups practicing computer skills.</li>
</ul>
</div>
</div>
</div>
<footer> // footer started here
<div class="foot">
<div class="copyright">© A Team</div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
<li>Experience</li>
<li>Achievemants</li>
<li>About</li>
</ul>
</nav>
</div>
</footer>
</body>
</html>
I have this website with a nav bar. at the moment the nav text (theory, More) gets bold the on hover, however i have been trying to make the text scale/grow in a smooth transition as it hovers. But the text only seems to bolden at the moment and i cannot get the text to scale up
may someone look over my code and note my mistake
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="Developer" content="Alejandro Muratalla / ElitePower">
<title>Power Training | Home</title>
<style>
body{
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
nav{
float: right;
margin-top: 10px;
}
/* Header */
header{
background: #0D98BA;
color: #FFD700;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF4500 3px solid;
}
#a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: all .1s ease-in-out
}
header ul{
margin: 0;
padding: 0;
}
header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding{
float: left;
}
header #branding h1{
margin: 0;
}
header .highlight, header .current a{
color: #000000;
font-weight: bold;
}
#a:hover{
font-weight: bold;
transform: scale(1.5);
}
/* Showcase */
#showcase{
min-height: 400px;
}
</style>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="images" style="max-width:500px">
<img class="slide1" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
<a>'s default display is inline. transform cannot be applied unless display is reset to value which allow sizing. (or formatting context). You can reset it to inline-block.
body {
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
float: right;
margin-top: 10px;
}
/* Header */
header {
background: #0d98ba;
color: #ffd700;
padding-top: 30px;
min-height: 70px;
border-bottom: #ff4500 3px solid;
}
.a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: all 0.1s ease-in-out;
display:inline-block;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header .highlight,
header .current a {
color: #000000;
font-weight: bold;
display: inline-block;
}
.a:hover {
font-weight: bold;
transform: scale(1.5);
}
/* Showcase */
#showcase {
min-height: 400px;
}
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="images" style="max-width:500px">
<img class="slide1" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
Note: I turned the three id="a" into class="a"
I'm building a little play HTML page as I teach myself how to code. I've watched several walkthrough videos and want to incorporate what I've learned without watching the video so that it sticks better. Here is an image of what I'm dealing with.
I want these three sections, 'Learn HTML', 'Learn CSS3', and 'Learn Javascript' to be centered on the page. I created a <section ID=""> tag to center everything on the page under the showcase and 3 separate <div class=""> for each box.
My problem is two-fold, not only are the border boxes not centering on the page, but the boxes aren't even appearing.
Here's the code...
body {
background-color: #FFFAF0;
color: black;
font-family: garamond;
font-weight: normal;
margin: 0;
line-height: 1.6em;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#topheader {
background-color: #228B22;
color: white;
margin: auto;
padding: 15px;
text-align: center;
}
#navbar {
background-color: black;
color: white;
}
#navbar ul {
padding: 0;
list-style: none;
}
#navbar li {
display: inline;
margin: auto;
padding-right: 50px;
text-align: center;
}
#navbar a {
color: white;
text-decoration: none;
}
#showcase {
background-image: url('../coding/codage.png');
background-position: center right;
min-height: 300px;
margin-bottom: 30px;
text-align: center;
color: white;
}
#main {
width: 33.3% padding:10px;
margin: auto;
}
.top {
float: left;
border: 3px black;
box-sizing: border-box;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ByMyself.css">
<meta charset="utf-8">
<title>How To Build A Website By Yourself</title>
</head>
<body>
<header id="topheader">
<div class="container">
<h1>Learning HTML5 and CSS3</h1>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul>
<li>Home</li>
<li>Learning HTML5</li>
<li>Learning CSS3</li>
<li>About Us</li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container">
<h1>How to learn how to build a website from scratch! Code The Future!
</h1>
</div>
</section>
<div class="clr"></div>
<section id="main">
<div class="top">
<h2>Learn HTML5</h2>
<ul>
<ol>Step 1 - Watch Tutorials</ol>
<ol>Step 2 - Take Notes</ol>
<ol>Step 3 - Repeat Until It Sinks In</ol>
</ul>
</div>
<div class="top">
<h2>Learn CSS3</h2>
<ul>
<ol>Step 1 - Watch Tutorials</ol>
<ol>Step 2 - Take Notes</ol>
<ol>Step 3 - Repeat Until It Sinks In</ol>
</ul>
</div>
<div class="top">
<h2>Learn Javascript</h2>
<ul>
<ol>Step 1 - Watch Tutorials</ol>
<ol>Step 2 - Take Notes</ol>
<ol>Step 3 - Repeat Until It Sinks In</ol>
</ul>
</div>
</section>
</body>
</html>
There are a few problems:
FLOAT: What you need to do is apply both a width (of about a third) and a margin to your three .top elements. Note that the width should take the margins into consideration, which can be achieved by subtracting them with the calc() function. I've gone with margin: 0 20px; for a horziontal marign of20px and no vertical margin, along with width: calc(33% - 40px);, which takes both the left and right margins into consideration before finding 33% of the available width.
BORDER: You've applied a rule of border: 3px black, which is almost right; you're looking for border: 3px solid black; the solid is critical!
In addition to this, your 'list items' are <ol>, which stands for ordered list. You've essentially got multiple ordered lists inside of an unordered list. These should be list items (<li>) instead, inside of <ol> items, which would look like:
<ol>
<li>Step 1 - Watch Tutorials</li>
<li>Step 2 - Take Notes</li>
<li>Step 3 - Repeat Until It Sinks In</li>
</ol>
However, having said that, you'd benefit from simple <div> tags instead, as each point wants to be on its own line, and you're adding your own "Step 1" prefixes.
This can be seen in the following (click Run Code Snippet then Full Page):
body {
background-color: #FFFAF0;
color: black;
font-family: garamond;
font-weight: normal;
margin: 0;
line-height: 1.6em;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#topheader {
background-color: #228B22;
color: white;
margin: auto;
padding: 15px;
text-align: center;
}
#navbar {
background-color: black;
color: white;
}
#navbar ul {
padding: 0;
list-style: none;
}
#navbar li {
display: inline;
margin: auto;
padding-right: 50px;
text-align: center;
}
#navbar a {
color: white;
text-decoration: none;
}
#showcase {
background-image: url('../coding/codage.png');
background-position: center right;
min-height: 300px;
margin-bottom: 30px;
text-align: center;
color: white;
}
#main {
width: 33.3% padding:10px;
margin: auto;
}
.top {
float: left;
border: 3px solid black;
box-sizing: border-box;
text-align: center;
margin: 0 20px;
width: calc(33% - 40px);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ByMyself.css">
<meta charset="utf-8">
<title>How To Build A Website By Yourself</title>
</head>
<body>
<header id="topheader">
<div class="container">
<h1>Learning HTML5 and CSS3</h1>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul>
<li>Home</li>
<li>Learning HTML5</li>
<li>Learning CSS3</li>
<li>About Us</li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container">
<h1>How to learn how to build a website from scratch! Code The Future!
</h1>
</div>
</section>
<div class="clr"></div>
<section id="main">
<div class="top">
<h2>Learn HTML5</h2>
<div>Step 1 - Watch Tutorials</div>
<div>Step 2 - Take Notes</div>
<div>Step 3 - Repeat Until It Sinks In</div>
</div>
<div class="top">
<h2>Learn CSS3</h2>
<div>Step 1 - Watch Tutorials</div>
<div>Step 2 - Take Notes</div>
<div>Step 3 - Repeat Until It Sinks In</div>
</div>
<div class="top">
<h2>Learn Javascript</h2>
<div>Step 1 - Watch Tutorials</div>
<div>Step 2 - Take Notes</div>
<div>Step 3 - Repeat Until It Sinks In</div>
</div>
</section>
</body>
</html>
Hope this helps!
How can I position 3 images like this with CSS?
I've tried multiple methods such as inline-block to position my images like the image above, but all went wrong. I have also tried looking through the internet to find a tutorial on this sort of thing, but couldn't find anything that could help me.
#import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
#import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic);
html {
height: 100%;
box-sizing: border-box;
}
body {
width: 1500px;
text-align: center;
font-family: arial;
margin: 0 auto;
}
header ul {
display: flex;
list-style-type: none;
justify-content: space-around;
padding-bottom: 10px;
align-items: center;
border-bottom: 2px solid black;
font-family: 'Source Code Pro';
}
footer ul {
display: inline-block;
list-style-type: none;
align-items: center;
font-family: 'Source Code Pro';
}
.logo {
font-family: 'Source Code Pro';
font-size: 40px;
padding-top: 20px;
font-weight: lighter;
}
/* Website nav code */
#top-nav ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
/* Shop nav code */
#bottom-nav {
display: flex;
list-style-type: none;
justify-content: space-around;
margin-top: 50px;
padding-bottom: 10px;
align-items: center;
font-family: 'Crimson Text';
}
#bottom-nav ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
#bottom-nav ul li {
display: inline-block;
padding: 15px 20px 0 20px;
}
nav ul {
list-style-type: none;
}
.info {
display: none;
color: #fff;
left : 0;
top : 45%;
right : 0;
text-align : center;
position: absolute;
}
/* Images code */
/* Footer code */
#footer {
background: black;
text-align: center;
color: white;
width:100%;
float:left;
}
.wrap {
position:relative;
margin:0 auto;
width:900px;
height: 200px;
}
.wrap ul {
list-style-type: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Gullible</title>
<link rel="stylesheet" href="css/women.css" media="screen" title="no title" charset="utf-8"/>
<link href="normalize.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false"></script>
</head>
<body>
<header>
<nav id="top-nav">
<h1 class="logo">Gullible</h1>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</nav>
</header>
<nav id="bottom-nav">
<ul>
<li>Men</li>
<li>Women</li>
<li>Denim</li>
<li>Suits</li>
<li>Dresses</li>
<li>Accessories</li>
</ul>
</nav>
<div id="jacket" class="pics"><img src="http://i.imgur.com/YJMNEtS.jpg"/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
<div id="jacket1" class="pics"><img src="http://i.imgur.com/xWJN7RP.jpg"/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div id="hoodie" class="pic"><img src="http://i.imgur.com/47iFqA1.jpg"/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
</div>
<div id="" class="pic"><img src=""/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div id="footer">
<div class="wrap"><strong>FIND US ON</strong>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Pintrest</li>
<li>Instagram</li>
</ul>
</div>
<div class="wrap"><strong>NAVIGATION</strong>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Newsletter</li>
</ul>
</div>
</div>
</body>
</html>
Use CSS flexbox.
Very simple, using a nested flex container.
.outer-flex-container {
display: flex;
}
.inner-flex-container {
display: flex;
flex-direction: column;
margin-left: 5px;
}
<div class="outer-flex-container">
<div class="image">
<img src="http://dummyimage.com/300x205/cccccc/fff" alt="">
</div>
<div class="inner-flex-container">
<div class="image">
<img src="http://dummyimage.com/150x100/cccccc/fff" alt="">
</div>
<div class="image">
<img src="http://dummyimage.com/150x100/cccccc/fff" alt="">
</div>
</div><!-- END .inner-flex-container -->
</div><!-- END .outer-flex-container -->
Benefits of flexbox:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.
Check the below code, hope it helps.. Note the style is inline, you can put it wherever you want. The best place is in the external CSS file but again it's your wish:-
<html>
<body>
<div id="" class="pic" style="float:left;background:yellow;">
<div class="overlay" style="float:left;width:30%;">
Left Hand Side Pic
<img src=""/></div>
<div id="right-side" style="float:left;width:70%;">
<div id="RightPicAbove" class="info" style="background:red;">
Left Hand Side Above Pic
</div>
<div id="RightPicBelow" class="info" style="background:green;">
Rigth Hand Side Below Pic
</div>
</div>
</body>
</html>
Try this
<div id="jacket" class="pics">
<div class="imgcont">
<img src="http://i.imgur.com/47iFqA1.jpg" />
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div class="imgcont">
<div id="jacket1" class="pics"><img src="http://i.imgur.com/xWJN7RP.jpg" />
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div id="hoodie" class="pic">
<img src="http://i.imgur.com/YJMNEtS.jpg" />
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
</div>
</div>
<div id="" class="pic"><img src="" />
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div id="footer">
<div class="wrap"><strong>FIND US ON</strong>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Pintrest</li>
<li>Instagram</li>
</ul>
</div>
<div class="wrap"><strong>NAVIGATION</strong>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Newsletter</li>
</ul>
</div>
</div>
and css
#import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
#import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic);
html {
height: 100%;
box-sizing: border-box;
}
body {
width: 1500px;
text-align: center;
font-family: arial;
margin: 0 auto;
}
header ul {
display: flex;
list-style-type: none;
justify-content: space-around;
padding-bottom: 10px;
align-items: center;
border-bottom: 2px solid black;
font-family: 'Source Code Pro';
}
footer ul {
display: inline-block;
list-style-type: none;
align-items: center;
font-family: 'Source Code Pro';
}
.logo {
font-family: 'Source Code Pro';
font-size: 40px;
padding-top: 20px;
font-weight: lighter;
}
/* Website nav code */
#top-nav ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
/* Shop nav code */
#bottom-nav {
display: flex;
list-style-type: none;
justify-content: space-around;
margin-top: 50px;
padding-bottom: 10px;
align-items: center;
font-family: 'Crimson Text';
}
#bottom-nav ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
#bottom-nav ul li {
display: inline-block;
padding: 15px 20px 0 20px;
}
nav ul {
list-style-type: none;
}
.info {
display: none;
color: #fff;
left: 0;
top: 45%;
right: 0;
text-align: center;
position: absolute;
}
/* Images code */
/* Footer code */
#footer {
background: black;
text-align: center;
color: white;
width: 100%;
float: left;
}
.wrap {
position: relative;
margin: 0 auto;
width: 900px;
height: 200px;
}
.wrap ul {
list-style-type: none;
}
.imgcont {
display: inline-block;
}
I think what you want to be using is called floats. If you float your #hoodie picture to the left and then put your #jacket pics inside a containing div (lets call it .jackets for simplicity's sake) then float that to the right, you should get the desired effect. See my jsfiddle.
Btw you're missing an enclosing div tag on your #jacket element.
.jackets {
float: right;
}
#hoodie {
float: left;
width: 50%;
}
#jacket {
float: right;
}
#jacket1 {
float: right;
clear: both;
}
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%;
}