Check out this html . i want the background color of div - 'social' to appear but it is not appearing .. :(
i have tried both overflow: hidden and clear: both .. but none of them are working .. please help
#charset "utf-8";
/* CSS Document */
body {
border-top: solid 10px #ff6b39;
padding: 0;
margin: 0;
}
.wrap {
width: 940px;
margin: 0 auto;
}
header {
padding: 0;
margin: 0;
padding-top: .001em;
position: relative;
border-bottom: 2px solid #e5e5e5;
}
header h1 {
background: url(img/sprite.png) no-repeat 0 0;
background-position: 0px -51px;
width: 172px;
height: 25px;
text-indent: -9999px;
float: left;
margin-top: 25px;
}
header h1 a {
width: 172px;
height: 25px;
display: block;
}
header p {
margin-top: 26px;
float: left;
margin-left: 25px;
font-size: 14px;
font-family: "Myriad Pro";
color: rgb(123, 123, 123);
line-height: 1.786;
text-align: left;
}
header nav {
clear: both;
}
header nav ul {
padding: 0;
margin: 0;
position: absolute;
top: 25px;
right: 0;
}
header ul li {
list-style: none;
padding: 0 18px;
float: left;
border-right: 1px solid #e4e4e4;
}
header nav ul li:last-child {
border-right: none;
}
header nav ul li:last-child {
padding-right: 0px;
}
header ul li a {
text-decoration: none;
font-size: 20px;
font-family: "Georgia";
color: rgb(245, 103, 55);
font-style: italic;
line-height: 0.85;
text-align: right;
display: block;
}
.social {
clear: both;
position: relative;
margin: 0;
padding: 0;
background: #e5e5e5;
}
.social h2 {
font-size: 30px;
font-family: "Georgia";
color: rgb(0, 0, 0);
font-style: italic;
line-height: 1.4;
text-align: left;
font-weight: 100;
float: left;
}
.social ul {
padding: 0;
margin: 0;
position: absolute;
top: 25px;
right: 0;
}
.social ul li {
list-style: none;
float: left;
}
.social ul li a {
font: 0/0;
color: transparent;
background-color: transparent;
text-decoration: none;
display: inline-block;
padding-right: 10px;
background: url(img/sprite.png) no-repeat 0 0;
width: 41px;
height: 41px;
}
.social a.facebook {
background-position: 0px 0px;
}
.social a.vimeo {
background-position: -49px 0px;
}
.social a.lastfm {
background-position: -100px 0px;
}
.social a.linkedin {
background-position: -150px 0px;
}
.social a.dribble {
background-position: -200px 0px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>mumbo website - PSD to HTML</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<header>
<h1>Mumbo logo</h1>
<p>Powered by Jeffrey Way Industries</p>
<nav>
<ul>
<li>about</li>
<li>portfolio</li>
<li>contact</li>
</ul>
</nav>
</header>
<div class="social">
<h2>Take a look at our work to see what we mean</h2>
<ul>
<li>facebook</li>
<li>vimeo</li>
<li>lastfm</li>
<li>linkedin</li>
<li>dribbble</li>
</ul>
</div> <!-- end of social -->
<div class="heroimage">
<img src="img/hero-image.png" alt="hero image">
</div>
<div class="maincontent">
<h2>Risus portacon vestibulum posuere</h2>
<p>Cray sustainable vegan post-ironic mixtape. 8-bit sustainable sed put a bird on it keytar fingerstache et, ennui street art proident wayfarers viral ethnic. Eu craft beer anim, keffiyeh chambray occaecat jean shorts hella selvage keytar butcher vice in. American apparel pour-over master cleanse, fingerstache etsy qui umami dreamcatcher twee.</p>
<ul class="bullet">
<li>Cray sustainable vegan</li>
<li>Chambray occaecat jean shorts</li>
<li>Hella selvage</li>
<li>Over master cleanse</li>
</ul>
</div><!-- end of maincontent -->
<div class="blogspots">
<h2>Take a look at our work to see what we mean</h2>
<div id="sixposts">
<div class="post">
<img src="img/thumb1.png" alt="thumb1">
<h3>Purus Egestas Fusce</h3>
<p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p>
</div>
<div class="post">
<img src="img/thumb2.png" alt="thumb1">
<h3>Purus Egestas Fusce</h3>
<p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p>
</div>
<div class="post">
<img src="img/thumb3.png" alt="thumb1">
<h3>Purus Egestas Fusce</h3>
<p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p>
</div>
<div class="post">
<img src="img/thumb4.png" alt="thumb1">
<h3>Purus Egestas Fusce</h3>
<p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p>
</div>
<div class="post">
<img src="img/thumb5.png" alt="thumb1">
<h3>Purus Egestas Fusce</h3>
<p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p>
</div>
<div class="post">
<img src="img/thumb6.png" alt="thumb1">
<h3>Purus Egestas Fusce</h3>
<p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p>
</div>
</div> <!-- end of sixposts -->
</div><!-- end of blogspots -->
<div class="maincontent">
<h2>Ornare Tristique Adipiscing Dolor</h2>
<p>Cray sustainable vegan post-ironic mixtape. 8-bit sustainable sed put a bird on it keytar fingerstache et, ennui street art proident wayfarers viral ethnic. Eu craft beer anim, keffiyeh chambray occaecat jean shorts hella selvage keytar butcher vice in. American apparel pour-over master cleanse, fingerstache etsy qui umami dreamcatcher twee.</p>
<ul class="bullet">
<li>Cray sustainable vegan</li>
<li>Chambray occaecat jean shorts</li>
<li>Hella selvage</li>
<li>Over master cleanse</li>
</ul>
</div><!-- end of maincontent -->
<footer>
<p>© 2012 All Rights Reserved. Powered by Jeffrey Way Industries</p>
<ul>
<li>about</li>
<li>portfolio</li>
<li>contact</li>
</ul>
</footer>
</div> <!-- end of warp -->
</body>
</html>
Looks you have used background-image for list-items, however they are not visible in your code output. By removing float:left from .social ul li you will then able to see the background color of div.
Related
See the following Codepen sample:
https://codepen.io/anon/pen/yWXRvR
Concerning the tourplaces container at the bottom of the page (see CSS section commented as Article: tour dates: tourplaces at the bottom of the CSS):
Why is it that when I arbitrarily change the left or right padding of a .place (e.g. the first .place : padding-left: 0), the .place images as well as their container suddenly become different sizes?
The .place containers then become inconsistent, having different heights. This is not what I want - I want them to stay horizontally bottom-aligned like they initially were.
Is it because the padding makes the image's width more narrow and then the height automatically adjusts along with it, making the .place content box longer?
/* General styles */
* {
box-sizing: border-box;
font-family: Arial;
}
body {
margin: 0;
}
a {
text-decoration: none;
}
/* Specific styles */
/* nav */
nav {
position: sticky;
top: 0;
z-index: 1;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a{
padding: 16px 24px;
color: white;
display: block;
text-transform: uppercase;
}
nav ul li a:hover {
background-color: #ccc;
}
nav ul li:nth-of-type(5) {
/*position: relative;*/
}
nav ul li:nth-of-type(5) div a {
display: block;
color: black;
text-transform: capitalize;
}
nav ul li:nth-of-type(5) div a:hover a {
background-color: #ccc;
}
nav ul li:nth-of-type(5) div {
display: none;
position: absolute;
z-index: 1;
box-shadow: 0 0 5px #aaa;
background: white;
}
nav ul li:nth-of-type(5):hover div {
display: block;
}
#search {
float: right;
}
#search i {
color: white;
padding: 16px 24px;
font-size: 18px;
transition: 0.5s ease;
}
#search i:hover {
color: #aaa;
}
.fa-sort-down {
vertical-align: text-top;
font-size: 18px;
transform: translateY(-25%);
}
/* Animation */
#bandpics {
overflow: hidden;
}
img#chicago,
img#la,
img#ny {
width: 100%;
display: block;
position: absolute;
animation-name: slide;
animation-duration: 18s;
animation-iteration-count: infinite;
}
img#chicago {
animation-delay: 6s;
}
img#la {
animation-delay: 4s;
}
img#ny {
animation-delay: 2s;
}
#keyframes slide {
0% { opacity: 1; }
22% { opacity: 1; }
33% { opacity: 0; }
88% { opacity: 1; }
100% { opacity: 1; }
}
/* Article: the band */
#band {
width: 100%;
position: relative;
margin-top: 50%;
text-align: center;
padding: 10% 30%;
background-color: white;
}
#band h2 {
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.25em;
}
#band > h4 {
font-style: italic;
font-weight: 500;
color: #888;
}
#band h4::first-letter {
text-transform: capitalize;
}
#band p {
text-align: justify;
margin-bottom: 7%;
line-height: 1.3em;
}
#bandmembers {
overflow: hidden;
}
.bandmember img {
max-width: 50%;
}
.bandmember h4 {
font-weight: 100;
}
/* Article: tour dates */
/* Article: tour dates: sales lines */
#tourdates , #tourplaces {
background-color: black;
padding: 1% 30%;
}
#tourdates h2 {
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.25em;
color: white;
text-align: center;
}
#tourdates h4 {
text-align: center;
color: #888;
font-style: italic;
}
#tourdates h4:first-letter {
text-transform: uppercase;
}
.month {
color: #888;
background-color: white;
padding: 3%;
border-bottom: 1px solid #ccc;
}
.month span:first-of-type {
text-transform: capitalize;
margin-right: 15px;
}
.month span {
display: inline-block;
}
div.month:nth-of-type(1) span:nth-of-type(2),
div.month:nth-of-type(2) span:nth-of-type(2) {
background-color: #f44336;
color: white;
padding: 5px 10px;
}
div.month:nth-of-type(1) span:nth-of-type(2)::first-letter,
div.month:nth-of-type(2) span:nth-of-type(2)::first-letter {
text-transform: uppercase;
}
div.month:last-of-type {
position: relative;
}
div.month:last-of-type span:nth-of-type(2) {
background-color: black;
color: white;
border-radius: 50%;
padding: 4px 10px;
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
}
/* Article: tour dates: tourplaces */
#tourplaces {
overflow: hidden;
margin: -8px;
}
.place {
float: left;
width: 33.33333%;
background-clip: content-box;
background-color: white;
padding-left: 8px;
padding-right: 8px;
}
.place img {
width: 100%;
}
.place img:hover {
opacity: 0.60;
}
.place-info {
padding-left: 8px;
padding-right: 8px;
padding-bottom: 8px;
}
.place-info > *:not(p) {
text-transform: capitalize;
}
.place-info h4 {
white-space: nowrap;
}
.place-info h4:nth-of-type(2) {
color: #888;
font-weight: 400;
}
.place button {
background-color: black;
color: white;
padding: 10px;
}
#media only screen and (min-width: 1000px) {
#band {
padding: 5% 30%;
}
.bandmember {
float: left;
width: 33.33333%
}
.bandmember img {
max-width: 60%;
}
}
<!-- from:
https://www.w3schools.com/w3css/tryw3css_templates_band.htm#
-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<nav>
<ul>
<li>home</li>
<li>band</li>
<li>tour</li>
<li>contact</li>
<li>more <i class="fas fa-sort-down"></i>
<div>
merchandise
extras
media
</div>
</li>
<li id="search">
<i class="fas fa-search"></i>
</li>
</ul>
</nav>
<div id="container">
<div id="bandpics">
<img id="chicago" src="https://www.w3schools.com/w3images/chicago.jpg" alt="Chicago">
<img id="la" src="https://www.w3schools.com/w3images/la.jpg" alt="LA">
<img id="ny" src="https://www.w3schools.com/w3images/ny.jpg" alt="NY">
</div>
<article id="band">
<h2>the band</h2>
<h4>we love music</h4>
<p>We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div id="bandmembers">
<div class="bandmember">
<h4>name</h4>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="bandmember">
</div>
<div class="bandmember">
<h4>name</h4>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="bandmember">
</div>
<div class="bandmember">
<h4>name</h4>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="bandmember">
</div>
</div>
</article>
<article id="tourdates">
<h2>tour dates</h2>
<h4>remember to book your tickets!</h4>
<div class="month">
<span>september</span><span>sold out</span>
</div>
<div class="month">
<span>october</span><span>sold out</span>
</div>
<div class="month">
<span>november</span><span>3</span>
</div>
</article>
<article id="tourplaces">
<div class="place">
<img src="https://www.w3schools.com/w3images/newyork.jpg" alt="NY">
<div class="place-info">
<h4>new york</h4>
<h4>fri 27 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</div>
<div class="place">
<img src="https://www.w3schools.com/w3images/paris.jpg" alt="Paris">
<div class="place-info">
<h4>paris</h4>
<h4>sat 28 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</div>
<div class="place">
<img src="https://www.w3schools.com/w3images/sanfran.jpg" alt="San Francisco">
<div class="place-info">
<h4>san francisco</h4>
<h4>sun 29 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</article>
</div>
Padding affects container size?
It depends, in this case it does, but only the height, not the width, since the width is defined.
Is it because the padding makes the image's width more narrow and then
the height automatically adjusts along with it, making the .place
content box longer?
That is partially correct, it does affect the size of the image and also affects the text inside, making the height bigger or smaller depending on the value of the padding.
It is difficult to see how the width of the container is not changing because you have background-clip: content-box; this makes the background clipping on the limits of the content, then there is a part of the container that you are not able to see, if you put a border, lets say border: 1px solid red; within your .place class you would be able to see left and right paddings.
For this case I would use flex or grid, a grid example: (notice that I defined the height of the first container to 500px and the others are stretching itself to fill all the remaining space)
/* General styles */
* {
box-sizing: border-box;
font-family: Arial;
}
body {
margin: 0;
}
a {
text-decoration: none;
}
#tourdates , #tourplaces {
background-color: black;
padding: 1% 10%;
}
/* Article: tour dates: tourplaces */
#tourplaces {
overflow: hidden;
margin: -8px;
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.place {
background-clip: content-box;
background-color: white;
padding-left: 8px;
padding-right: 8px;
border: 1px solid red;
}
.place.first-place{
padding-left: 25px;
height: 500px
}
.place.second-place{
padding-left: 0px
}
.place img {
width: 100%;
}
.place img:hover {
opacity: 0.60;
}
.place-info {
padding-left: 8px;
padding-right: 8px;
padding-bottom: 8px;
}
.place-info > *:not(p) {
text-transform: capitalize;
}
.place-info h4 {
white-space: nowrap;
}
.place-info h4:nth-of-type(2) {
color: #888;
font-weight: 400;
}
.place button {
background-color: black;
color: white;
padding: 10px;
}
<article id="tourplaces">
<div class="place first-place">
<img src="https://www.w3schools.com/w3images/newyork.jpg" alt="NY">
<div class="place-info">
<h4>new york</h4>
<h4>fri 27 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</div>
<div class="place second-place">
<img src="https://www.w3schools.com/w3images/paris.jpg" alt="Paris">
<div class="place-info">
<h4>paris</h4>
<h4>sat 28 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</div>
<div class="place">
<img src="https://www.w3schools.com/w3images/sanfran.jpg" alt="San Francisco">
<div class="place-info">
<h4>san francisco</h4>
<h4>sun 29 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</article>
Could someone explain me why text goes out of div? And I cannot center vertically.
Why it's out of ul list box?
.experience-section {
padding: 0 25px;
}
.experience-section .figure {
font-family: 'Garamond-Italic';
background: url('../img/x.svg') no-repeat;
background-size: 100%;
height: 283px;
width: 283px;
}
.experience-section .figure ul li:first-child {
font-size: 193px;
}
.experience-section .figure ul li:nth-child(2) {
font-size: 80px;
letter-spacing: 0.2em;
margin-top: 23px;
}
<div class="col-md-4">
<div class="experience-section" style="background-image:url(assets/img/welcome-bg-1.jpg);">
<div class="figure">
<ul>
<li>15</li>
<li>years</li>
</ul>
</div>
<h3>Our words talk about experience</h3>
<p>Nunc rhoncus advenenatis est nec hdrerit. Donec eu mauris sapien. Maecen id metus pellentesque ex feugiat cursus cenustsque feugiatus cursus cesius alteri.</p>
</div>
</div>
image here
.experience-section {
padding: 0 25px;
}
.experience-section .figure {
font-family: 'Garamond-Italic';
background: url('../img/x.svg') no-repeat;
background-size: 100%;
height: auto;
width: 283px;
}
.experience-section .figure ul li:first-child {
font-size: 193px;
}
.experience-section .figure ul li:nth-child(2) {
font-size: 80px;
letter-spacing: 0.2em;
margin-top: 23px;
}
<div class="col-md-4">
<div class="experience-section" style="background-image:url(assets/img/welcome-bg-1.jpg);">
<div class="figure">
<ul>
<li>15</li>
<li>years</li>
</ul>
</div>
<h3>Our words talk about experience</h3>
<p>Nunc rhoncus advenenatis est nec hdrerit. Donec eu mauris sapien. Maecen id metus pellentesque ex feugiat cursus cenustsque feugiatus cursus cesius alteri.</p>
</div>
</div>
The size of the font is less than the div height but due to the default value of line-height, the text goes out of Div.
the reason is you hardcoded a height:283px to .experience-section .figure. Since the font size is high, it was overlapping.you can set height auto to fix it.
The hover I've added to the title it's not showing.
I tried to add hover only to the .div class and later on add hover to the on the #titulo id.
This is the layout that I'm trying to copy for practice Layout .
P.D Sorry for my english.
#import "normalize.css";
/****************************
GENERAL
****************************/
body {
font-family: sans-serif;
background-color: rgb(246, 245, 241);
max-width: 100%;
width: 800px;
margin: 0 auto;
}
.div a {
color: rgb(185, 56, 78);
}
#titulo:hover {
color: #B9384E;
}
.div a:hover {
background-color: #B9384E;
color: white;
text-decoration: none;
}
/****************************
HEADING
****************************/
header {
font-family: 'Oswald', sans-serif;
}
h1 {
font-weight: bold;
font-size: 3em;
}
h1,
h2 {
padding: 0;
margin: 0.15em;
}
#titulo a {
color: black;
text-decoration: none;
}
h3 {
color: rgb(185, 56, 78);
font-size: 1.5em;
padding-top: 30px;
}
h3,
h4 {
margin: 3px;
}
h2 span {
text-decoration: line-through;
}
/****************************
NAVIGATION
****************************/
.selected {
background-color: rgb(185, 56, 78);
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
nav {
text-align: left;
background-color: black;
color: #fff;
font-size: 1.25em;
border-radius: 5px;
}
nav ul {
list-style: none;
padding-left: 0;
}
nav li {
display: inline-block;
padding: 10px 25px 10px 25px;
}
nav li a {
color: white;
text-decoration: none;
}
nav li:hover {
background-color: rgb(185, 56, 78);
}
/****************************
DIV
****************************/
#primary-content,
#secondary-content,
#info {
background-color: white;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
max-height: 100%;
}
#primary-content img {
border: 2px solid rgb(246, 245, 241);
margin: 30px 20px 30px 70px;
}
#primary-content,
#secondary-content,
#pollassociales,
#info {
margin-bottom: 30px;
}
#blogroll {
width: 75%;
float: left;
}
#social {
float: right;
width: 25%;
}
#info {
clear: both;
}
#parrafo {
float: left;
clear: both;
width: 50%;
padding-left: 10px;
}
#primary-content {
padding-left: 10px;
}
#primary-content p {
font-size: 0.9em;
}
/****************************
UNORDERED LIST
****************************/
#columnas {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
padding: 0;
}
#pollassociales h5 {
width: 14.7%;
}
#pollassociales li {
font-size: 0.8em;
width: 85.3%;
padding: 10px 5% 10px 0;
list-style: none;
}
/****************************
FOOTER
****************************/
footer p {
float: right;
}
/****************************
PAGE:HOME
****************************/
/****************************
COLORS
****************************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet">
</head>
<body id="index" class="home">
<header>
<div id="titulo">
<h1>
Smashing HTML5!
</h1>
<h2>
HTML5 in the year <span>2022</span> 2009
</h2>
</div>
<nav>
<ul>
<li class="selected">home</li>
<li>portfolio</li>
<li>blog</li>
<li>contact</li>
</ul>
</nav>
</header>
<div class="div" id="primary-content">
<div id="parrafo">
<h3>Featured Article</h3>
<h4>HTML5 in Smashing Magazine</h4>
<p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser HTML5 and <a href="https://www.w3.org/TR/css3-roadmap/"
target="_blank">CSS3</a> website today!</p>
</div>
<div id="imagen">
<img src="img/sm-logo.gif">
</div>
</div>
<div class="div" id="secondary-content">
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By Enrique Ramírez</p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By Enrique Ramírez</p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By Enrique Ramírez</p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
</div>
<div id="pollassociales" class="div">
<div id="blogroll">
<h5>blogroll</h5>
<ul id="columnas">
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
</ul>
</div>
<div id="social">
<h5>social</h5>
<ul>
<li>delicious</li>
<li>digg</li>
<li>facebook</li>
<li>last.fm</li>
<li>rss</li>
<li>twitter</li>
</ul>
</div>
</div>
<div class="div" id="info">
<h4>Smashing Magazine</h4>
<p>Amazing Magazine</p>
<img src="img/avatar.gif">
<p>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</p>
</div>
<footer class="div">
<p>2005-2009 Smashing Magazine.</p>
</footer>
</body>
</html>
The color is not showing because it gets overwritten by:
#titulo a {
color: black;
text-decoration: none;
}
I added the snippet below to the bottom of the css, because it is at the bottom it will overwrite the previous css rules.
#titulo:hover a {
color: #B9384E;
}
#import "normalize.css";
/****************************
GENERAL
****************************/
body {
font-family: sans-serif;
background-color: rgb(246, 245, 241);
max-width: 100%;
width: 800px;
margin: 0 auto;
}
.div a {
color: rgb(185, 56, 78);
}
.div a:hover {
background-color: #B9384E;
color: white;
text-decoration: none;
}
/****************************
HEADING
****************************/
header {
font-family: 'Oswald', sans-serif;
}
h1 {
font-weight: bold;
font-size: 3em;
}
h1,
h2 {
padding: 0;
margin: 0.15em;
}
#titulo a {
color: black;
text-decoration: none;
}
h3 {
color: rgb(185, 56, 78);
font-size: 1.5em;
padding-top: 30px;
}
h3,
h4 {
margin: 3px;
}
h2 span {
text-decoration: line-through;
}
/****************************
NAVIGATION
****************************/
.selected {
background-color: rgb(185, 56, 78);
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
nav {
text-align: left;
background-color: black;
color: #fff;
font-size: 1.25em;
border-radius: 5px;
}
nav ul {
list-style: none;
padding-left: 0;
}
nav li {
display: inline-block;
padding: 10px 25px 10px 25px;
}
nav li a {
color: white;
text-decoration: none;
}
nav li:hover {
background-color: rgb(185, 56, 78);
}
/****************************
DIV
****************************/
#primary-content,
#secondary-content,
#info {
background-color: white;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
max-height: 100%;
}
#primary-content img {
border: 2px solid rgb(246, 245, 241);
margin: 30px 20px 30px 70px;
}
#primary-content,
#secondary-content,
#pollassociales,
#info {
margin-bottom: 30px;
}
#blogroll {
width: 75%;
float: left;
}
#social {
float: right;
width: 25%;
}
#info {
clear: both;
}
#parrafo {
float: left;
clear: both;
width: 50%;
padding-left: 10px;
}
#primary-content {
padding-left: 10px;
}
#primary-content p {
font-size: 0.9em;
}
/****************************
UNORDERED LIST
****************************/
#columnas {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
padding: 0;
}
#pollassociales h5 {
width: 14.7%;
}
#pollassociales li {
font-size: 0.8em;
width: 85.3%;
padding: 10px 5% 10px 0;
list-style: none;
}
/****************************
FOOTER
****************************/
footer p {
float: right;
}
/****************************
PAGE:HOME
****************************/
/****************************
COLORS
****************************/
#titulo:hover a {
color: #B9384E;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet">
</head>
<body id="index" class="home">
<header>
<div id="titulo">
<h1>
Smashing HTML5!
</h1>
<h2>
HTML5 in the year <span>2022</span> 2009
</h2>
</div>
<nav>
<ul>
<li class="selected">home</li>
<li>portfolio</li>
<li>blog</li>
<li>contact</li>
</ul>
</nav>
</header>
<div class="div" id="primary-content">
<div id="parrafo">
<h3>Featured Article</h3>
<h4>HTML5 in Smashing Magazine</h4>
<p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser HTML5 and <a href="https://www.w3.org/TR/css3-roadmap/"
target="_blank">CSS3</a> website today!</p>
</div>
<div id="imagen">
<img src="img/sm-logo.gif">
</div>
</div>
<div class="div" id="secondary-content">
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By Enrique Ramírez</p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By Enrique Ramírez</p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By Enrique Ramírez</p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
</div>
<div id="pollassociales" class="div">
<div id="blogroll">
<h5>blogroll</h5>
<ul id="columnas">
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
</ul>
</div>
<div id="social">
<h5>social</h5>
<ul>
<li>delicious</li>
<li>digg</li>
<li>facebook</li>
<li>last.fm</li>
<li>rss</li>
<li>twitter</li>
</ul>
</div>
</div>
<div class="div" id="info">
<h4>Smashing Magazine</h4>
<p>Amazing Magazine</p>
<img src="img/avatar.gif">
<p>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</p>
</div>
<footer class="div">
<p>2005-2009 Smashing Magazine.</p>
</footer>
</body>
</html>
I'm having this problem with a page I'm creating.screenshot
Here is the code for the html:
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>JJ TECH</title>
<link rel="stylesheet" href="_css/estilo.css"/>
</head>
<body>
<div id="interface">
<header id="cabecalho">
<nav id="menu">
<h1>Menu Principal</h1>
<ul>
<li>Home</li>
<li>Informações</li>
<li>Contato</li>
</ul>
</nav>
</header>
<p>Lorem ipsum dolor sit amet, elit ferri facilisi has an, eos probatus perpetua maluisset ad. Minim ponderum pro ut, cu vim referrentur philosophia, ex posse causae signiferumque mei. Dico erant veniam sea et, ut elitr ponderum delicata sed. Tation euismod vix ex, usu latine omnesque no. Vel no libris maiestatis.</p>
</div>
</body>
and css:
#charset "UTF-8";
body{
font-family: Arial, sans-serif;
background: #370b44;
}
div#interface{
width: 900px;
background: #fff;
margin: -20px auto 0 auto;
padding: 20px;
}
p{
text-align: justify;
text-indent: 30px;
}
/*CONFIGURAÇÃO DO MENU*/
nav#menu h1{
display: none;
}
nav#menu ul{
background-color: rgba(0,0,0,.5);
overflow: hidden;
list-style: none;
display: block;
font-size: 13pt;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
nav#menu li{
float: left;
/*border-right: 1px solid #555;*/
}
nav#menu li:hover:not(.active){
background: #000;
}
a{
display: block;
text-decoration: none;
color: #fff;
padding: 15px;
}
.ativo{
background: #751891;
}
How can I make my content come after my menu, not under it?
Since your navigation is position fixed, you have to push down the content using padding or margin. First set body margin to 0. Then add padding-top: 60px; to div#interface. That should be a good starter. And of course try to learn something about block elements, inline elements, floating elements and check their different behavior regarding layouting.
You need to update your css for div#interface
div#interface{
width: 900px;
background: #fff;
margin: 67px auto 0 auto;
padding-top: 20px;
}
I hope this may help:
Change it according to your requirements. Especially add style in separate file.
You need to shuffle your HTML markup and add position fixed to div#interface I suggest change its width to 100%
here is the working code:
<head>
<meta charset="UTF-8"/>
<title>JJ TECH</title>
<style>
body{
font-family: Arial, sans-serif;
background: #370b44;
}
div#interface{
width: 900px;
background: #fff;
margin: -20px auto 0 auto;
padding: 20px;
position:fixed;
top:71px;
}
p{
text-align: justify;
text-indent: 30px;
}
/*CONFIGURAÇÃO DO MENU*/
nav#menu h1{
display: none;
}
nav#menu ul{
background-color: rgba(0,0,0,.5);
overflow: hidden;
list-style: none;
display: block;
font-size: 13pt;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
nav#menu li{
float: left;
/*border-right: 1px solid #555;*/
}
nav#menu li:hover:not(.active){
background: #000;
}
a{
display: block;
text-decoration: none;
color: #fff;
padding: 15px;
}
.ativo{
background: #751891;
}
</style>
</head>
<body>
<header id="cabecalho">
<nav id="menu">
<h1>Menu Principal</h1>
<ul>
<li>Home</li>
<li>Informações</li>
<li>Contato</li>
</ul>
</nav>
</header>
<div id="interface">
<p>Lorem ipsum dolor sit amet, elit ferri facilisi has an, eos probatus perpetua maluisset ad. Minim ponderum pro ut, cu vim referrentur philosophia, ex posse causae signiferumque mei. Dico erant veniam sea et, ut elitr ponderum delicata sed. Tation euismod vix ex, usu latine omnesque no. Vel no libris maiestatis.</p>
</div>
</body>
Hello I have made a website where people can get information on various topics. I spent all day yesterday adding in Rectangles to the background to make the site look slightly nicer. Last night I looked at the site on my phone and saw that the rectangles were not lined up correctly like they should be and the way they are on PC. I dont have enough reputation to post Images so I'll describe the problem.
On pc a rectangle is drawn behind one block of text and a rectangle is drawn behind an image. On the phone the image has the rectangle behind it but the text only has part of the rectangle behind it. Its as if they wont line up or the text is being re-formatted or something. The site name is omicrome.com if you want yo see for yourself. Here's the code that takes care of the part of the site with the problem.
<div class = "container_24">
<header>
<div id = "rectban"></div>
<h1>Omicrome</h1>
<nav>
<ul>
<li><a href="# " class = selected>Home</a></li>
<li>Articles</li>
<li><a href="software.html">Projects</a ></li>
<li>About</li>
</ul>
</nav>
<div id = "rect0"></div>
<div class = "banner grid_18" href="about.html">
View Article
<h2>
</h2>
</div>
<div class=" grid_8 callout"></div>
View Gallery
</header>
<div id = "rect1"></div>
<div id = "rectIndexContact"></div>
<div id = "contactblock">
<h6>Contact</h6>
<center>Email</center>
<center>Twitter</center>
</div>
<div class = "main clearfix">
<div class ="grid_9">
<h3>About The Site</h3>
<p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section...
<p>Find Out More</p>
</div>
<div class ="grid_9">
<h3>Our Content</h3>
<p>We post a variety of ideas and project's based around space and technology. Some of them include a hand held cheap computer, software to teach people about space... </p><p>
</p>
<br>
<p>Find Out More</p>
</div>
<div class ="grid_6">
</div>
Here is the CSS:
#rect1{
position: absolute;
margin-top: 10px;
margin-left: -6px;
width: 750px;
height: 208px;
background: #ffffff;
z-index: -1;
}
#rect2{
position: absolute;
margin-top: 195px;
margin-left: -6px;
width: 750px;
height: 1663px;
background: #ffffff;
z-index: -1;
}
h6{
font-size: 26px;
border-bottom: 1px solid #d1d1d1;
padding-bottom: 20px;
margin-bottom: 15px;
line-height: 1em;
padding-right: 83px;
}
.banner{
background: url(../img/rectoday.jpg) no-repeat;
width:695px;
height:250px;
margin-top: 10px;
clear:both;
}
.callout{
background: url(../img/callout.png) no-repeat;
text-indent: -9999px;
width : 250px;
height:250px;
margin: -250px 710px 22px;
float: left;
}
header{
overflow: hidden;
}
header h1{
background: url(../img/logo.png) no-repeat;
text-indent: -9999px;
width : 220px;
height:60px;
margin: -10px 5px 22px;
float: left;
}
nav{
float: right;
padding-top:10px;
margin-right: 09px;
}
nav li{
display: inline;
}
li{
margin-left: 24px;
}
nav a{
text-transform: lowercase;
}
.grid_4{
}
.grid_3{
margin-left: 60px;
}
a{
color:#7e7e7e;
text-decoration: none;
}
a:hover, .selected{
color: black;
}
a:.selected{
color:black;
}
p{
font-size: 13px;
line-height: 20px;
color: #353535;
}
The rectangles are just with the id "rect1" or "rect0". Here is a link to the screenshots: https://drive.google.com/open?id=0B5JL3GH0xtHPMzVESWhSb1JDa0k and https://drive.google.com/file/d/0B5JL3GH0xtHPdUZSZm1ZMlFYWGs/view?usp=sharing How can I make the rectangles match up with the text and images the same way on pc's and phone's? Thanks -Jack.
UPDATE:
Created another example for clarification: jsfiddle updated.
There are two cases in the example below, the first one uses a wrapper like I am recommending, and the second one uses a rectangle using position absolute and fixed height like you are using. Check it out in different viewports and see what happens.
HTML:
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae massa eget ante tincidunt finibus. Maecenas dolor ipsum, feugiat a lacus quis, efficitur egestas elit. Cras quis mattis eros. Aliquam enim felis, sollicitudin ac orci at, mattis interdum libero. Nunc pretium mi diam, sit amet facilisis urna condimentum cursus. Aliquam fringilla ipsum aliquam tortor sodales aliquet. Sed imperdiet odio vitae malesuada molestie.
</p>
</div>
<div class="rect1"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae massa eget ante tincidunt finibus. Maecenas dolor ipsum, feugiat a lacus quis, efficitur egestas elit. Cras quis mattis eros. Aliquam enim felis, sollicitudin ac orci at, mattis interdum libero. Nunc pretium mi diam, sit amet facilisis urna condimentum cursus. Aliquam fringilla ipsum aliquam tortor sodales aliquet. Sed imperdiet odio vitae malesuada molestie.
</p>
CSS:
.wrapper {
background-color: #7DF481;
padding: 10px 20px;
}
.rect1 {
position: absolute;
top: 140px;
background-color: #ff0000;
height: 90px;
width:100%;
z-index: -1;
}
EDIT:
You should read more about responsive design, you could use a framework like Bootstrap. There's also media features that limit the stylesheet's scope, you can read more about that here: Using Media Queries.
The problem is that you are relying on a fixed height for your rectangles. The text will try to fit in the viewport of your device, making your container have a higher height. I recommend you using a wrapper instead of fixed rectangles. Here's an example: jsfiddle
HTML:
<div class="container_24">
<header>
<div id="rectban"></div>
<h1>Omicrome</h1>
<nav>
<ul>
<li><a href="# " class=s elected>Home</a></li>
<li>Articles</li>
<li><a href="software.html">Projects</a ></li>
<li>About</li>
</ul>
</nav>
<div id="rect0"></div>
<div class="banner grid_18" href="about.html">
View Article
<h2>
</h2>
</div>
<div class=" grid_8 callout"></div>
View Gallery
</header>
<div id="rect1">
<div id="rectIndexContact"></div>
<div id="contactblock">
<h6>Contact</h6>
<a href="mailto:crew#omicrome.com" class="button" id="contactEMAIL">
<center>Email</center>
</a>
<a href="https://twitter.com/Error404inSpace" class="button" id="contactTwitter">
<center>Twitter</center>
</a>
</div>
<div class="main clearfix">
<div class="grid_9">
<h3>About The Site</h3>
<p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section...
<p>Find Out More</p>
</div>
<div class="grid_9">
<h3>Our Content</h3>
<p>We post a variety of ideas and project's based around space and technology. Some of them include a hand held cheap computer, software to teach people about space... </p>
<p>
</p>
<br>
<p>Find Out More</p>
</div>
<div class="grid_6">
</div>
</div>
CSS:
#rect1 {
background-color: #ffffff;
padding: 10px 20px;
}
#rect2 {
position: absolute;
margin-top: 195px;
margin-left: -6px;
width: 750px;
height: 1663px;
background: #ffffff;
z-index: -1;
}
h6 {
font-size: 26px;
border-bottom: 1px solid #d1d1d1;
padding-bottom: 20px;
margin-bottom: 15px;
line-height: 1em;
padding-right: 83px;
}
.banner {
background: url(../img/rectoday.jpg) no-repeat;
width: 695px;
height: 250px;
margin-top: 10px;
clear: both;
}
.callout {
background: url(../img/callout.png) no-repeat;
text-indent: -9999px;
width: 250px;
height: 250px;
margin: -250px 710px 22px;
float: left;
}
header {
overflow: hidden;
}
header h1 {
background: url(../img/logo.png) no-repeat;
text-indent: -9999px;
width: 220px;
height: 60px;
margin: -10px 5px 22px;
float: left;
}
nav {
float: right;
padding-top: 10px;
margin-right: 09px;
}
nav li {
display: inline;
}
li {
margin-left: 24px;
}
nav a {
text-transform: lowercase;
}
.grid_4 {}
.grid_3 {
margin-left: 60px;
}
a {
color: #7e7e7e;
text-decoration: none;
}
a:hover,
.selected {
color: black;
}
a:.selected {
color: black;
}
p {
font-size: 13px;
line-height: 20px;
color: #353535;
}