This is my first post on stack overflow, so if I do something wrong please inform me :).
This is the HTML:
<nav>
<div><img src="images/logo.png"</div>
<div>Noticias</div>
<div>Eventos</div>
<div>Alumnos</div>
<div>Contacto</div>
</nav>
<div id="content">
<h3><span class="green">Noticias |</span> Los comunicados y anuncios <span class="green">oficales</span> de la institución</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec magna pulvinar, posuere lacus nec, suscipit risus. Nunc vitae sollicitudin nisl.</p>
And the CSS:
#import url(http://fonts.googleapis.com/css?family=Comfortaa); *{border:1px dotted black;}
html {
background-color: #FFFFFF;
min-height: 2000px;
}
body {
color: #1F4F75;
font-family: Comfortaa, sans-serif;
}
nav {
height: 10%;
width:100%;
position: fixed;
box-shadow: 0px 10px 10px #888888;
background-color: #FFFFFF;
display: block;
}
nav div {
display: block;
float:right;
height: 100%;
font-size: 25px;
}
nav:first-child {
float:left;
}
#content {
width: 70%;
margin: auto;
margin-top: 7%;
}
.green {
color:#91BA30;
}
h3 {
font-size: 25px;
text-align: center;
font-weight: 700;
}
p {
line-height: 1.4;
font-size: 17px;
text-align: justify;
color: #1F4F75;
font-weight: 400;
}
This is the fiddle http://jsfiddle.net/LuTLm/ .
My nav has 5 elements: an image and four links. I'm trying to make the apear aligned on the navigation bar, with every element floating to the right, exept the first one (the image) wich floats left and should be resized to fit on the 10% nav.
This shoul be pretty basic. I'm just starting to code web. Alternatives are also welcome as long as they are a actual better solutions.
Sorry, I missed the bit about floating the img left..
clean up the html to close off the IMG tag with /> and then either add a class or inline css to float the div containing the img to the left..
<div style='float:left'><img src="images/logo.png" /></div>
or
<div class='FloatLeft'><img src="images/logo.png" /></div>
.FloatLeft
{
float: left;
}
or
change the css like this
nav div:first-child {
float:left;
}
Just update yuor css from
nav:first-child {
float:left;
}
to
nav div:first-child {
float:left; // make it float left
width: 10%; // resize it to 10% width
}
DEMO
You can also use CSS tables to do navigation bars. I've found they have a lot of nice properties, such as filling up the full width with evenly spaced navigation items, and are well supported in all modern browsers. They even work well with all sorts of semantic markup, including links of lists.
Given the HTML:
<body>
<nav>
<div>
<img src="images/logo.png">
</div>
<div>Noticias</div>
<div>Eventos</div>
<div>Alumnos</div>
<div>Contacto</div>
</nav>
<div id="content">
<h3><span class="green">Noticias |</span> Los comunicados y anuncios <span class="green">oficales</span> de la institución</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec magna pulvinar, posuere lacus nec, suscipit risus. Nunc vitae sollicitudin nisl.</p>
You would use the following CSS:
#import url(http://fonts.googleapis.com/css?family=Comfortaa);
html {
background-color: #FFFFFF;
min-height: 2000px;
}
body {
color: #1F4F75;
font-family: Comfortaa, sans-serif;
}
nav {
height: 10%;
width:100%;
position: fixed;
top: 0;
left: 0;
box-shadow: 0px 10px 10px #888888;
background-color: #FFFFFF;
display: table;
table-layout: auto;
}
nav div {
display: table-cell;
font-size: 25px;
vertical-align: middle;
}
nav div:first-child {
width: 10%;
}
#content {
width: 70%;
margin: auto;
margin-top: 7%;
}
.green {
color:#91BA30;
}
h3 {
font-size: 25px;
text-align: center;
font-weight: 700;
}
p {
line-height: 1.4;
font-size: 17px;
text-align: justify;
color: #1F4F75;
font-weight: 400;
}
DEMO
Related
After moving things around, I tried to change the position: absolute to position: relative of the actual iframe class, it made the video position under 'Featured' but the dimension of the video is messed up. If I change it back to position: absolute, the video covers the entire page banner, but the responsiveness is good, however the dimension is too big. How do I make it look like the video is under the Featured page, aligned in the center, and responsive as well?
This is my code:
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/*setting font size as 62.5%=10px for easier REM fontsize calculations*/
html, body {
font-size: 62.5%;
height: 100%;
margin: 0;
font-family: font-family: 'Playfair Display', serif;
}
/*making the image parallax as a banner*/
.parallax1 {
background: url(https://i.imgur.com/6wPsROo.png);
min-height: 100%;
background-position: center;
position: relative;
opacity: .95;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
top: 0;
}
* {
padding: 0;
margin: 0;
text-declaration: none;
list-style: none;
box-sizing: border-box;
}
body {
background-color: white;
}
/*customizing banner text*/
#slogan {
font-size: 4.5rem;
color: white;
text-shadow: 1px 1.5px 1px #A26B40;
font-weight: lighter;
}
.heading2 {
width: 100%;
height: auto;
left: 0;
top: 50%;
position: absolute;
text-align: center;
line-height: 3.2rem;
}
#slogan-subheading {
font-size: 2.5rem;
color: white;
text-shadow: .5px .5px 1px #A26B40;
font-weight: lighter;
}
#shop-now {
background-color: #bd8d58;
width: 10%;
height: auto;
margin: 0 auto;
position: relative;
padding: 0px;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
}
#shop-now:hover {
cursor: pointer;
}
/*make container for each row comprising an image with caption side by side*/
.prod-container {
flex-direction: row;
display: flex;
padding: 10px 20px;
text-align: center;
justify-content: center;
}
/*customize each cell*/
.image-and-capt {
padding: 10px 40px;
}
/*customize productimg*/
#product-img {
width: 200px;
border-radius: 50%;
box-shadow: 3px 5px 15px rgba(182,124,72,0.3);
}
/*customize product name & description*/
#product-name, #product-descrp {
font-family: 'Open Sans', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: rgba(54, 46, 39, 0.8);
}
#product-name {
font-size: 1.5rem;
padding-top: 10px;
}
#product-descrp {
font-size: 1rem;
padding-top: 4px;
}
.featured-container {
background: rgba(255, 214, 170, 0.6);
padding: 50px 100px;
}
.vid-container {
position: relative;
width: 100%;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
}
.vid-container-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
display: block;
margin: 0 auto;
}
/*centering the logo and customizing size*/
#header-img {
max-width: 200px;
max-height: auto;
height: auto;
width: auto;
padding: 10px 0px 0px 0px;
}
/*customizing the navigation links*/
.nav-link {
text-decoration: none;
color: #54473C;
font-family: 'Playfair Display', serif;
display: column;
font-size: 1.5rem;
}
/*customizing the actual navigation bar*/
#nav-bar {
background-color: rgb(248, 234, 203);
height: 80px;
width: 100%;
padding: 0px 20px 0px 50px;
z-index: 1000;
position: fixed;
top: 0;
width: 100%;
transition: 0.6s;
}
/*aligning the nav links on the right of the header image*/
nav ul {
float: right;
padding: 0px 20px;
}
/*aligning the links to become horizontally aligned next to each other*/
nav ul li {
display: inline-block;
padding: 25px 10px 5px 50px;
margin-left: 0px;
}
/* customizing appearance of nav-links when hovered*/
.nav-link:hover, nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
transition: .5s;
color: white;
}
/* customizing nav-link when focused or clicked */
.nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
color: white;
}
/* customizing the three bars, making it invisible if in default full page view */
.check-bar {
font-size: 2.5rem;
color: #BF8D7A;
float: right;
cursor: pointer;
margin-right: 5px;
line-height: 80px;
display: none;
}
/*making the checkbox invisible, this checkbox is used as a condition later, that when checked itll make the navlinks appear in a a specific media query*/
#check {
display: none;
}
body, html {
height: 100%;
}
.products-container {
background: #f6f7e9;
padding: 50px 80px;
}
#sections {
font-family: 'Open Sans', sans-serif;
text-align: center;
width: 45%;
font-weight: 800;
font-size: 4rem;
margin: 0 auto;
text-transform: uppercase;
font-weight: lighter;
color: rgba(54, 46, 39, 0.5);
width: 100%;
text-align: center;
border-bottom: 1px solid rgba(54, 46, 39, 0.1);
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background: #f6f7e9;
padding: 0 10px;
}
#media (max-width: 792px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 175px;
max-height: auto;
}
}
#media (max-width: 712px){
.nav-link{
font-size: 1.2rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
}
#media (max-width: 675px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -30px;
}
}
#media (max-width: 675px){
.nav-link{
font-size: 1.1rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -40px;
}
}
/*configure what happens when you click three bars*/
#media (max-width: 500px){
.check-bar{
display: block;
}
/*center the logo , not yet done */
#header-img {
max-width: 200px;
max-height: auto;
display: block;
margin: auto;
}
ul{
position: fixed;
width: 100%
height: 100vh;
top: 80px;
/*when three bars are clicked the left bottom right values makes the whole ul disappear*/
left: -100%;
bottom: -100%;
right: 100%;
text-align: center;
background: rgba(255, 214, 170, 0.9);
transition: all .5s;
/* for stack, this makes the ul box in front of the parallax image since its z index is greater than the parallax*/
z-index: 2;
}
nav ul li {
display: block;
padding: 20px;
}
.nav-link {
font-size: 1.6rem;
font-weight: bold;
margin-left: 60px
}
#check:checked ~ul {
left: 0;
right: 0;
bottom: 0;
}
.nav-link:hover {
background: none;
color: #BF8D7A;
}
.parallax1 {
z-index: 1;
}
}
#media (max-width: 467px){
#header-img{
max-width: 190px;
}
.nav-link {
font-size: 1.6rem;
}
}
#media (max-width: 314px){
#header-img{
max-width: 200px;
margin: auto auto 0px auto;
padding-top: 10px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar {
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
#media (max-width: 271px){
#header-img{
max-width: 200px;
margin: auto auto 0px 0px;
padding-top: 5px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar{
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
#media (max-width: 251px){
#header-img{
max-width: 180px;
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
.nav-link {
font-size: 1.2rem;
}
#nav-bar {
padding-left: 8px;
}
.check-bar {
font-size: 1.8rem;
padding-top: 0px;
}
}
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<body>
<header id="header">
<nav id="nav-bar">
<input type="checkbox" id="check">
<label for="check" class="check-bar">
<i class="fas fa-bars"></i>
</label>
<img id="header-img" src="https://i.imgur.com/zxchwt8.gif">
<ul>
<li id="nav-links-list"><a class="nav-link" href="#the-products">products</a></li>
<li id="nav-links-list"><a class="nav-link" href="#featured" target=_blank>featured</a></li>
<li id="nav-links-list"><a class="nav-link" href="#pricing" target=_blank>pricing</a></li>
<li id="nav-links-list"><a class="nav-link" href="#contacts" target=_blank>contact</a></li>
</ul></nav></header>
<div class="parallax1">
<div class="heading2">
<span class="border">
<h1 id="slogan">Pamper your skin.</h1>
<h3 id="slogan-subheading">Cruelty-free, environmentally conscious, and organic. </h3>.
<span id="box"><h4 id="shop-now">SHOP NOW</h4></span
</div>
</div>
<div class="products-container">
<section id="the-products">
<h2 id="sections"><span>products</span></h2>
<div class="image-and-capt">
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/iSuRo4f.png" alt ="mock-up foundation">
<h3 id="product-name"> Foundation with SPF 50 </h3>
<p id="product-descrp"> Medium-coverage, long-lasting, and available in 50 shades.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/KSXpO9w.png" alt="moisturizer">
<h3 id="product-name"> Moisturizer for All Skin Types</h3>
<p id="product-descrp"> Nourishing and brightening, reduces appearance of fine lines and wrinkles.
</div>
</div>
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/cqzlfal.png" alt ="mock-up tinted moisturizer">
<h3 id="product-name"> Tinted Moisturizer </h3>
<p id="product-descrp"> Light-coverage with 50 shades, nourishing and brightening.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/UdInLk3.png" alt ="mock-up face wash">
<h3 id="product-name"> Facewash </h3>
<p id="product-descrp"> Gentle and hydrating facewash, thourougly cleanses dirt, make-up and sebum.</p>
</div>
</div>
</section>
</div>
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class"vid-container">
<iframe class="vid-container-iframe" src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560" height="315" frameborder="0"></iframe>
</div>
</section></div>
<section id="pricing">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
<section id="contact">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
</div>
</header>
</body>
Your code is a mess to be honest. You have multiple div without closing tag,p without closing tags,
also some = are missing while declaring classes in your html code.
First go through your code, make sure that every single tag has a closing tag, after that continue with your video because if you dont fix these things, then your responsivity will be broken because of those unclosed tags.
Have a look into that, i have fixed the video so now it is under your featured section, you just have to play around with it to make it responsive after you closed every unclosed tag.
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class="vid-container">
<iframe class="vid-container-iframe"
src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560"
height="315" frameborder="0"></iframe>
</div>
</div>
</section>
So i'm working on a nav bar which should be aligned horizontally, but it won't. If i try to use
display: inline-block;
and then
float: left;
the navbar collides with the rest of my divisions
Here's my code:
http://jsfiddle.net/0p287vmb/
Try this:
nav
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
}
nav
a:hover {
background-color: white;
display: inline-block;
}
I removed the commas because with commas it translates to nav & a. In your case removing it solves the problem also it overwrote the width of the nav that's why it doesn't seem to take up the whole width.
That's because you are overriding the width of the navbar in
nav,
a {
...
width: 200px;
...
}
and the display block here:
nav,
a:hover {
background-color: white;
display: inline-block;
}
Just move the navbar styling after nav,a:hover ..., and remove nav from the same place because you are also ovveriding the background color of the nav.
Also, on the last line it should be font-weight not text-weight.
* {
font-family: Verdana;
font-size: 14px;
margin: 0;
}
p {
padding 20px;
}
#wrapper {
width: 900px;
background-color: #ff3333;
margin: auto;
}
header {
background-color: #00c9fd;
width: 900px;
}
nav,
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
float: left;
}
a:hover {
background-color: white;
display: inline-block;
}
nav {
background-color: #cccccc;
width: 900px;
}
#bigimage {
width: 900px;
}
#bigimage,
p {
color: #00c9fd;
background-color: #ffffff;
font-size: 12px;
}
main {
width: 900px;
}
article {
background-color: #cccccc;
width: 900px;
}
#contact {
background-color: #cccccc;
width: 900px;
}
footer {
background-color: #00c9fd;
width: 900px;
}
header,
h1 {
padding: 20px 0px 5px 0px;
color: rgb(255, 255, 255);
font-size: 30px;
font-family: Impact;
text-weight: normal;
}
<div id="wrapper">
<header>
<h1>SUPERCOMPUTERS</h1>
</header>
<nav>
Home
Meer informatie
Tijdlijn
</nav>
<div id="bigimage">
<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
<p>
<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
at, dignissim faucibus eros.
</p>
</div>
<main>
<article>hoi1</article>
<article>hoi2</article>
<article>hoi3</article>
</main>
<div id="contact">hoi4</div>
<footer>hoi5</footer>
</div>
Your selector was wrong. You wrote nav, a which would mean to apply those styles to both nav and a elements. Infact you needed nav a which means to only apply those styles to a elements that are children of nav elements.
nav a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
float: left;
}
You should remove the width from nav tag.
* {
font-family: Verdana;
font-size: 14px;
margin: 0;
}
p {
padding 20px;
}
#wrapper {
width: 900px;
background-color: #ff3333;
margin: auto;
}
header {
background-color: #00c9fd;
width: 900px;
}
nav {
background-color: #cccccc;
width: 900px;
}
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 5px 10px;
float: left;
}
nav,
a:hover {
background-color: white;
display: inline-block;
}
#bigimage {
width: 900px;
}
#bigimage,
p {
color: #00c9fd;
background-color: #ffffff;
font-size: 12px;
}
main {
width: 900px;
}
article {
background-color: #cccccc;
width: 900px;
}
#contact {
background-color: #cccccc;
width: 900px;
}
footer {
background-color: #00c9fd;
width: 900px;
}
header,
h1 {
padding: 20px 0px 5px 0px;
color: rgb(255, 255, 255);
font-size: 30px;
font-family: Impact;
text-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_new.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>SUPERCOMPUTERS</h1>
</header>
<nav>
Home
Meer informatie
Tijdlijn
</nav>
<div id="bigimage">
<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
<p>
<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
at, dignissim faucibus eros.
</p>
</div>
<main>
<article>hoi1</article>
<article>hoi2</article>
<article>hoi3</article>
</main>
<div id="contact">hoi4</div>
<footer>hoi5</footer>
</div>
</body>
</html>
I am making an author box. I want the person's picture at the right of the box while still inside the parent div. Whatever styles I apply, I can't make the picture appear inside the div and on the right smoothly, what is wrong here?
.authorBox {
background: #222222;
width: 100%;
padding:1.5em 2em;
position: relative;
border-left:15px solid #d53362;
box-sizing: border-box;
}
h5.author {
color: #fff;
font-weight: 600;
font-size: 1.5em;
}
h5.authorRole {
color: #d53362;
font-weight: 600;
font-size: 1.3em;
}
p.authorQuote {
color:#444;
font-style: italic;
margin-top: 20px;
font-size: 1.1em;
line-height: 1.5em;
}
.personImg1 {
width:100%;
height:100%;
background-size: cover;
background-image: url(../img/person1.jpeg);
}
.personContainer {
float:right;
}
<div class="authorBox">
<h5 class="author">First Last</h5>
<h5 class="authorRole">Job role goes here</h5>
<p class="authorQuote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu erat at nisl laoreet ultrices"</p>
<div class="personContainer">
<div class="personImg1"></div>
</div>
</div>
First of all a div with no height and width won't be seen, so you div with the background has to have a defined width/height so you can see it.
and you put in the right by positioning it absolute and right:0 or a small amount just to push it from the edge.
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.authorBox {
background: #222222;
width: 100%;
padding: 1.5em 2em;
position: relative;
border-left: 15px solid #d53362;
box-sizing: border-box;
}
h5.author {
color: #fff;
font-weight: 600;
font-size: 1.5em;
}
h5.authorRole {
color: #d53362;
font-weight: 600;
font-size: 1.3em;
}
p.authorQuote {
color: #444;
font-style: italic;
margin-top: 20px;
font-size: 1.1em;
line-height: 1.5em;
}
.personContainer {
height: 100px;
width: 300px;
position: absolute;
right: 10px;
top: 1.5em;
}
.personImg1 {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-image: url('http://via.placeholder.com/350x150');
}
<div class="authorBox">
<h5 class="author">First Last</h5>
<h5 class="authorRole">Job role goes here</h5>
<p class="authorQuote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu erat at nisl laoreet ultrices"
</p>
<div class="personContainer">
<div class="personImg1"></div>
</div>
</div>
Your .personImg1 has width:100%; and height:100%;, which means it gets the full width and height of its parent container - i.e. relative settings.
But the parent container's only CSS property is .personContainer { float:right; } – there are no width or height settings for it, resulting in zero height both for this container, the .personImg1 DIV and therefore also the background-image of .personImg1. So you need to assign some width and height to .personContainer
Actually you might want to consider to just use a regular img tag instead of that .personImg1 DIV and its background-image...
Are you locating your image properly from your folders?
Also, you can try this
.personImg1 {
display:block;
position:absolute;
background:url("../img/person1.jpeg");
background-size: 100% 100%;
background-repeat:no-repeat;
width:100%;
height:100%;
float:right;
bottom:0;
right:0;
}
Try this solution using flex box.
.authorBox {
background: #222222;
width: 100%;
padding: 1.5em 2em;
position: relative;
border-left: 15px solid #d53362;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
h5.author {
color: #fff;
font-weight: 600;
font-size: 1.5em;
}
h5.authorRole {
color: #d53362;
font-weight: 600;
font-size: 1.3em;
}
p.authorQuote {
color: #444;
font-style: italic;
margin-top: 20px;
font-size: 1.1em;
line-height: 1.5em;
}
.personImg1 {
width: 100px;
height: 100px;
background-size: cover;
background-image: url(../img/person1.jpeg);
}
<div class="authorBox">
<div class="colContainer">
<h5 class="author">First Last</h5>
<h5 class="authorRole">Job role goes here</h5>
<p class="authorQuote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu erat
at nisl laoreet ultrices"</p>
</div>
<div class="personContainer">
<div class="personImg1"></div>
</div>
</div>
Please note the nav utilises JS as well as the footer text. The rest is all HTML/CSS. I can show the JS if needs be but I believe this issue lies either with the HTML or the CSS.
In the preview of the site, the navigation (nav01/menu) and the body/main area are shifted to the right slightly (approximately by 10px). So instead of the navigation and main red area being in line with the banner image/bg they're offset to the right. I'm assuming this is what has caused a horizontal scroll bar (there's approximately 400px of additional blank space on the right hand side of the website).
I've set margins to 0 in the specific areas but these left and right margins remain.
The second issue is with what will become a hidden content/dropdown area (currently visible) and the page divider for the next page (scrolling single page). In each of these instances, pagedown and hidden box, I've specified the width as 100% yet they remain central and don't even stretch to the actual image sizes.
Any help with these 2 problems would be appreciated. I'm sure it's something simple but I just can't seem to find it after hours of trying.
..............................
#fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
}
#fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
font-weight: thin;
}
#container {
position: absolute;
top: 0px;
left: 0px;
background-color: #73008C;
background-image: url("banner.jpg");
background-size: 100%;
width: 100%;
height: 800px;
content: 60px;
padding: 0px;
border: 5px #73008C;
margin-left: 0px;
margin-right: 0px;
z-index: -3;
}
#header {
position: absolute;
background-color: rgba(255, 255, 255, 0.4);
width: 100%;
height: 12%;
margin: auto;
z-index: 1;
}
#logo {
position: relative;
border: 0px;
margin-top: 9px;
z-index: 2;
}
#nav01 {
position: absolute;
background-color: #374754;
width: 100%;
height: 40px;
padding: 0px;
margin-left: 0px;
margin-top: 85px;
margin-right: 0px;
border-radius: 0px 0px 6px 6px
}
ul#menu {
font-family: Swisz;
position: relative;
background-color: #374754;
padding: 0;
margin-top: 13px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu li {
display: inline;
margin-right: 5px;
}
ul#menu li a {
background-color: #374754;
padding: 10px 10px;
text-decoration: none;
color: #ffffff;
border-radius: 4px 4px 4px 4px;
}
ul#menu li a:hover {
color: white;
font-style: bold;
background-color: #d83030;
}
#overlay {
font-family: Swisz;
position: relative;
margin-left: auto;
margin-right: auto;
top: 250px;
bottom: 200px;
width: 30%;
height: 30%;
background-color: #d83030;
padding: 15px 15px;
color: #ffffff;
border-radius: 8px 8px 8px 8px;
}
#info {
position: relative;
left: 400px;
top: 280px;
}
body {
font-family: "Helvetica", Verdana, sans-serif;
font-size: 12px;
background-color: #ffffff;
color: #ffffff;
text-align: center;
padding: 0px;
}
#main {
position: absolute;
top: 600px;
padding: 10px;
padding-left: 200px;
padding-right: 200px;
background-color: #d83030;
background-position: top center;
margin: 0;
}
#h1 {
font-family: Swisz;
text-shadow: 5px 5px 5px ##374754;
color: #ffffff;
text-align: center;
font-size: 30px;
}
#h3 {
font-family: Helvetica, sans-serif;
color: #ffffff;
text-align: left;
font-size: 12px;
}
.h5 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 16px;
}
#hiddenbox {
position: relative;
width: 100%;
height: 298px;
background-image: url("hidden_bg.jpg");
background-repeat: repeat-x;
padding: 5px;
padding-top: 7px;
margin: 0;
text-align: left;
}
.pagedown {
position: relative;
width: 100%;
padding: 0;
top: 900px;
margin: 0;
}
#sub {
position: relative;
padding-left: 20%;
padding-right: 20%;
padding-bottom: 10%;
padding-top: 1%;
color: #374754;
top: 1200px;
background-color: #ffffff;
margin: 0;
#h4 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 40;
}
#footer {
position: relative;
color: #ffffff;
margin-bottom: 0px;
margin-top: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>TITLE HEREd</title>
<link href="Site.css" rel="stylesheet">
<script src="Script.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="logo.png" alt="Logo" style="width: 20%; height: 20%"></img>
</div>
</div>
</div>
<nav id="nav01"></nav>
<div id="overlay">
<h1>Filler title text here<h1>
<h2>Filler filler filler filler filler</h2>
</div>
<div id="info">
<img src="seehow.png" alt="See How" style="width:345px;height:240px">
</div>
<div id="main">
<h1>LIPSUM</h1>
<h2>main content will al be placed here</h2>
<img src="wilfcent.png" alt="Wilf" style="width:345px;height:428px">
<div id="hiddenbox">
<h3>drop down content/hiddent content here/h3>
<img src="promo.png" alt="Promotion" style="width:321px;height:176px"></img>
</div>
<img src="pagedown.gif" alt="Page down" style="width:100%;height:68px"></img>
</div>
<div id="sub">
<h4> How It Works </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut turpis sapien. Proin tempus nibh ac rhoncus congue. Nullam pretium placerat vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sed est vitae libero placerat tristique. Aliquam pulvinar convallis mi, vitae consequat tortor pellentesque ut. In lacinia, ex vel accumsan viverra, est ex efficitur justo, pulvinar luctus mi leo nec risus. Sed nec tellus bibendum, convallis enim at, elementum lectus. Fusce eu enim blandit, volutpat eros lobortis, auctor odio. Praesent tristique sem elit, nec consequat tortor placerat at. Nullam eu arcu et ex iaculis feugiat ut quis enim. Nulla quis libero placerat, accumsan nulla et, laoreet magna. Sed congue ut nunc maximus gravida.</p>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>
To solve your first issue of the navigation and the body being shifted give the body tag a margin:0px. This will move them back into place.
The 400px of blank space is caused by the left:400px you have on the #info element.
Your second issue is caused by the padding-left and padding-right you have on the #main element. Remove those, and give a width:100% to the #main. The parent and now the child both fill the width of the page.
The first problem is quite simple. All browser handle html tags differently, and most of the browsers for example have given the <body> a margin, which causes you the 10px.
Simply add this to your css file:
body, html {
margin: 0;
padding: 0;
}
The reason for the 400px on the right side is your <div id="info"> tag. This div got the attribute (set by the browsers default) div {display: block}, which says the div does block the full width, that is available by the screen size.
Then you gave it the css attributes position: relative; left: 400px. That means, that the div, as said above, already has the full width plus the 400px added as space from the left. Because of that its overscaled.
A smoother version is to change the leftinto padding, so it becomes:
#info {
position: relative;
padding-left: 400px;
top: 280px;
}
Your second issue is caused by the padding-(left/right)attributes on your #main div. You can simply remove them and your div gets the full width of the page.
Last, you have got one missing <symbol in this line before the closing </h3> tag.
<h3>drop down content/hiddent content here/h3>
Hope this helps, feel free to ask for further information.
Best regards,
Marian.
I'm backend coder and I'm very new in frontend development, but I have a free time now and I want to try learn basics of HTML / CSS :)
These images describe my question:
I have following. Simple info on the left side and title on the right side.
But if title is long my markup goes bad:
I want to achieve this (Paint):
In other words I want to increase height of the main (gray) block and center its content vertically if title too long.
Here is my code:
<div class="header"> <!-- Main (gray) block -->
<div class="author">
<div class="left">
<img src="http://cs421319.vk.me/v421319968/b0e1/ljfuXCyMOFI.jpg" width="50" height="50"/>
</div>
<div class="author_details">
<span class="name">_Dark_</span>
<br>
<span class="time">01.01.2014 — 23:59 </span>
</div>
</div>
<div class="title">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin, est non tempus lacinia, urna. </h1>
</div>
</div>
And LESS:
.header {
min-height: 60px;
background-color: #EEE;
padding: 5px;
-moz-box-sizing: border-box;
box-sizing: border-box;
.title {
display: inline-block;
vertical-align: top;
}
h1 {
font-weight: normal;
font-size: 24px;
margin: 0;
}
.author {
max-width: 200px;
display: inline-block;
border-right: 1px solid #CCC;
}
.author_details {
margin: 0 0 0 55px;
padding: 0 5px 0 0;
.name {
font-size: 20px;
font-weight: bold;
}
.time {
font-size: 12px;
}
}
}
Sorry if I explained my problem bad, but I really doesn't know what to do and I want some advice about my (ugly maybe) code :)
Here is JSFiddle with current markup
Your code (HTML) is okay, but can be more simplified, with less elements:
<div class="infoBox">
<p>
<img src="http://cs421319.vk.me/v421319968/b0e1/ljfuXCyMOFI.jpg" />
_Dark_<br />
<span>01.01.2014 — 23:59 </span>
</p>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin, est non tempus lacinia, urna. </h1>
</div>
With this CSS (added some comments to explain what some things do).
.infoBox {
min-height: 60px;
background: #eee;
padding: 5px;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: table; /* display the box as table */
width: 100%;
}
.infoBox > p, /* selects all p that are direct child of .infoBox */
.infoBox > h1 {
display: table-cell; /* display the p and h1 as a table cell */
}
.infoBox > p {
width: 200px;
margin: 0;
padding: 0;
font-size: 20px;
font-weight: bold;
}
.infoBox > p img {
width: 50px;
height: 50px;
margin-right: 5px;
float: left;
}
.infoBox > p span {
font-size: 12px;
font-weight: normal;
}
.infoBox > h1 { /* select h1 that is a direct child of .infoBox */
font-size: 14px;
margin: 0;
padding: 0;
}
Also check this demo.
Your markup is way too intensive. Look here to make a simpler markup:http://jsfiddle.net/hdqvY/8/
Just keep in mind a few things. If you can group things together, it makes it easier to place items within the page. That small box of information is contained in one area while your text(paragraph) can be contained in another. Getting the boxes to line up is easy: just use display:inline-block; and float:left; to get them to line up. But keep in mind the width of the surrounding container along with the boxes inside so they match up.
HTML
<div class="container">
<div class="box">//Main (gray)block<br>
<img src="http://cs421319.vk.me/v421319968/b0e1/ljfuXCyMOFI.jpg" width="50" height="50"/><br>
_Dark_<br>
01.01.2014-23:59
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin, est non tempus lacinia, urna.
</div>
</div>
CSS
.container{
width:800px;
height:100%;
display:inline-block;
}
.box{
width:140px;
height:300px;
display:inline-block;
float:left;
}
.text{
font-family:arial;
font-size:14px;
display:inline-block;
width:400px;
text-wrap:none;
float:left;
}