Last week I had everything laid out perfectly fine. This week I added some css code and everything sunk into each other. Any idea as to why? Also, my navbar on top isn't applying the inline-block like is supposed to. Any hints as to why will be most appreciated. Please take it easy on me as I'm relatively new to this. I figure it is going to be something small that I either overlooked or I'm missing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> - ePortfolio</title>
<link rel="stylesheet" href="css/navigation.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<span class="fas fa-bars"></span>
</span>
Home
<ul class="main-nav" id="js-menu">
<li>JavaScript</li>
<li>Contact</li>
<li> Navigation</li>
</ul>
</nav>
<h1>Navigation Menu Gallery</h1>
</header>
<main>
<h2>Vertical Navigation Bar</h2>
<!--Code vertical navigation bar here-->
<nav ID="vertical_nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
<br>
<p>The vertical navigation bar was created using an unordered list while removing the ornaments along side of the content. I chose my colors by visiting W3Schools and viewing
the color picker and finding 5 hues of one specific color to keep an even flow. Vertical navigation would be used on websites with single page navigation. Vertical navigation is also
a good choice while creating a page with a lot of content where it can be coded to the side of the page to keep in view while scrolling. </p>
<h2>CSS Drop Down Menu</h2>
<!--Code dropdown navigation bar here-->
<nav ID="drop_nav">
<ul>
<li>Home</li>
<li><a href="#">Guitars
<span class="arrow">▼</span></a>
<ul class="submenu">
<li>Gibson</li>
<li>Fender</li>
<li>Ibanez</li>
</ul>
</li>
<li><a href="#">Drums
<span class="arrow">▼</span></a>
<ul class="submenu">
<li>Tama</li>
<li>Pearl</li>
<li>DW</li>
</ul>
</li>
<li><a href="#">Amplifiers
<span class="arrow">▼</span></a>
<ul class="submenu">
<li>Marshall</li>
<li>Peavy</li>
<li>Crate</li>
</ul>
</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
</nav>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa
<strong>strong</strong>. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus
mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis
enim. Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum
felis eu pede <a class="external ext" href="#">link</a>
mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate
eleifend tellus. Aenean leo ligula, porttitor eu,
consequat vitae, eleifend ac, enim. Aliquam lorem ante,
dapibus in, viverra quis, feugiat a, tellus. Phasellus
viverra nulla ut metus varius laoreet. Quisque rutrum.
Aenean imperdiet. Etiam ultricies nisi vel augue.
Curabitur ullamcorper ultricies nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus
mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis
enim. Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum
felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate
eleifend tellus. Aenean leo ligula, porttitor eu,
consequat vitae, eleifend ac, enim. Aliquam lorem ante,
dapibus in, viverra quis, feugiat a, tellus. Phasellus
viverra nulla ut metus varius laoreet. Quisque rutrum.
Aenean imperdiet. Etiam ultricies nisi vel augue.
Curabitur ullamcorper ultricies nisi.</p>
<br>
<br>
<br>
<h2>Navigation Bar Tabs</h2>
<nav id="tabs_nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus
mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis
enim. Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate
eleifend tellus. Aenean leo ligula, porttitor eu,
consequat vitae, eleifend ac, enim.</p>
</main>
<footer>
<p>© 2020 </p>
</footer>
<!--<script>
var mainNav = document.getElementById("js-menu");
var navBarToggle = document.getElementById("js-navbar-toggle");
onClick( function() {
navBarToggle.toggleClass("setActive");
}
</script> -->
</body></html>
"```"
#charset "utf-8";
main {
margin-top: 5%;
}
footer {
display: block;
display: flex;
justify-content: flex-end;
font-weight: 700;
background: #777;
padding: 0 5px 0 0;
}
/*Start vertical navigation bar*/
#vertical_nav {
margin: 0;
padding: 0;
}
#vertical_nav ul {
list-style-type: none;
width: 20%;
}
#vertical_nav ul li {
position: relative;
}
#vertical_nav ul li a {
width: 100%;
color: #7fdbff;
background-image: linear-gradient(to bottom right, #009, #0000b3, #0000cc, #0000e6, #00f);
display: block;
height: 64px;
font-family: bold Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
#vertical_nav ul li a:hover {
background-image: linear-gradient(to bottom, #009 20%, #0000cc 25%, #0000ff 33%);
}
/*Start Drop Menu*/
#drop_nav {
margin: 0;
padding: 0;
}
#drop_nav ul {
list-style-type: none;
width: 100%;
display: flex;
margin: 0;
padding: 0;
}
#drop_nav li {
position: relative;
width: 100%;
text-align: center;
}
#drop_nav a {
color: #ffffff;
background-color: #666699;
display: block;
height: 64px;
font-family: Arial, sans-serif;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: background 0.4s;
}
#drop_nav a:hover {
background-color: #b3b3cc;
}
#drop_nav li:hover .submenu > li {
}
.submenu li {
visibility: hidden;
position: relative;
margin-top: 0;
}
.submenu {
display: flex;
position: relative;
flex-direction: column;
width: 100%;
display: none;
}
.submenu li {
}
.submenu li:hover {
display: block;
}
#drop_nav li:hover .submenu > li {
display: block;
top: 1px;
visibility: visible;
}
.submenu li {
display: block;
position: absolute;
top: 0px;
}
.submenu {
display: flex;
flex-direction: column;
position: absolute;
width: 20%;
}
.submenu li {
position: relative;
}
.submenu li:hover {
display: flex;
}
.arrow {
margin-left: 8px;
color: #33334d;
font-size: 12px;
}
/*Start Navigation Tabs*/
#tabs_nav {
margin: 0;
padding: 0;
}
#tabs_nav ul {
width: 90%;
list-style-type: none;
display: flex;
}
#tabs_nav ul li {
width: 100%;
text-align: center;
position: relative;
}
#tabs_nav ul li a {
color: #ffffff;
height: 64px;
border-radius: 20px 20px 0 0 ;
margin: 0 -10px 0 5px;
z-index: 5;
text-decoration: none;
box-shadow: 0 0 4px rgba(0, 0, 0, .8);
blur-radius: 5px;
display: flex;
justify-content: space-around;
align-items: center;
display: block;
background-image: linear-gradient(#2ecc40, #001f3f);
position: relative;
transition: background 0.4s;
font-family: bold Arial, sans-serif;
font-weight: bold;
}
#tabs_nav a:hover {
margin-top: 10px;
padding-bottom: 10px;
margin-right: -5px;
z-index: 5;
position: relative;
}
/*Start responsive menu here*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.navbar {
font-size: 18px;
border: 1px rgba(0, 0, 0, .2);
padding-bottom: 10px;
background-image: linear-gradient(260deg, #ff4136, #0074d9);
}
.main-nav {
list-style-type: none;
display: none;
}
.active {
display: block;
}
.nav-links .home {
text-decoration: none;
color: rgba(35, 120, 27, .7);
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.home {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
color: rgba(0, 255, 255, .8);
font-size: 24px;
margin-top: 10px;
margin-right: 20px;
cursor: pointer;
position: absolute;
}
#media screen and (min-width: 768px) {
nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
padding-bottom: 0;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: column;
align-items: flex-end;
}
.main-nav li {
margin: 0;
}
.nav-links {
margin-left: 40px;
}
.home {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.home:hover .navlinks:hover {
background: rgba(0, 97, 254, 1.);
}
}
Your media query represents a 'mobile first' design - are you viewing your page on a desktop and this is when it is appearing 'sunk into each other'? You need to adjust your media query - as others stated, if you comment it out, your page is viewing fine on desktop.
Related
I'm trying to create a website where the first part is a video, on top of it is a navigation bar and description sentence. The second part is a div with a picture and a lorem ipsum paragraph. But the two-part is mushed together. Do you know why?
The first part is the video-container div. It contains a video, a navigation bar and some introductory words
The second part is the intro div which has an image and a paragraph side by side
<style>
html,
body {
border: 1px solid blue;
min-height:100%;
padding:0;
margin:0;}
* {
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
border: 0;
outline: 0;
margin-top: -5px;
}
.nav {
border: 1px solid red;
margin-right: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav li {
list-style-type: none;
}
.nav li a {
text-decoration: none;
font-size: 23px;
font-weight: 600;
color: #C71585;
letter-spacing: 0.03em;
}
.nav img {
width: 150px;
}
video {
width: 100%;
position: absolute;
object-fit: cover;
background-size: cover;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1;
box-sizing: content-box;
}
.video-container {
position: relative;
height: 100%;
border: 1px solid yellow;
}
.content {
border: 1px solid yellow;
position: absolute;
left: 50px;
top: 150px;
margin: 10px;
padding: 5px 20px;
font-size: 20px;
overflow: none;
}
.content h1 {
font-size: 100px;
color: #C71585;
}
#myBtn {
margin-left: 20px;
margin-top: 40px;
border: 1px solid #C71585;
font-size: 26px;
font-weight: 800;
color: #e827a0;
padding: 15px 60px;
background-color: transparent;
transition: 0.2s ease-in;
}
#myBtn:hover {
background-color: rgba(199, 21, 133);
color: white;
}
.intro {
overflow: none;
margin-top: 30px;
display: flex;
justify-content: space-around;
align-items: center;
}
.intro img {
width: 500px;
}
.intro-text {
width: 30%;
}
</style>
</head>
<body>
<div class="video-container">
<video autoplay muted loop id="video">
<source src="video.mp4" type="video/mp4">
</video>
<div class="nav">
<img src="logo.png" alt="logo">
<li>About me</li>
<li>My Portfolio</li>
<li>My resume</li>
<li>Contact me</li>
</div>
<div class="content">
<h1>Avid learner and</h1>
<h1>Constant striver</h1>
<button id="myBtn">Who am I</button>
</div>
</div>
<div class='intro'>
<img src="01.jpeg" alt="">
<div class="intro-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque ex a felis laoreet, ut bibendum sem eleifend. Quisque egestas sem sed velit molestie tincidunt. Phasellus at pellentesque odio. Phasellus sem leo, hendrerit et massa vehicula, iaculis cursus erat. Vestibulum et viverra nisi, sit amet condimentum sem. Duis gravida faucibus nisl nec pharetra. Curabitur convallis risus enim, nec semper lorem cursus varius. Quisque feugiat vitae dui non ultricies. Integer ipsum quam, dictum et quam nec, imperdiet euismod nulla. Nam bibendum sagittis orci, eget tincidunt risus luctus nec. Quisque lacus urna, tincidunt vel lobortis in, suscipit sit amet nunc. Fusce ultrices erat a nunc dignissim hendrerit. Maecenas sed pharetra quam, vitae suscipit nunc. Aenean molestie dui aliquet augue eleifend, quis congue ligula laoreet. Ut quis est pellentesque, fringilla odio ac, tincidunt nibh.
</div>
</div>
</body>
You can make use of css flex property, in your case please add
.flex-container {
display: flex;
flex-wrap: wrap;
}
under your style tags and assign this class to intro class div as <div class='intro flex-container'>, will this worked for you?
you can easily wrap the .video-container and .intro divs with a div tag and give it style display flex and make sure you add flex wrap also.
Then just give your video and intro containers width 100%
Hello i'm making a website layout and i'm having a problem with responsivnes.
On bigger screen it looks like this
While on smaller one i get this
Gallery strips not in one row but in two
Here's my HTML file
body header
{
font: 400 100px/1.3 'Oleo Script', Helvetica, sans-serif;
}
#menu ul{
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
#menu li{
display:inline-block;
float:left;
margin-right: 1px;
}
#menu li a{
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family:
"Helvetica Neue"
,Helvetica,
Arial,
sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*hover for top level
#menu li:hover a {
background: #19c589;
}
/*drop down links
#menu li:hover ul a{
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*drop down hover
#menu li:hover ul a:hover{
background: #19c589;
color: #fff;
}
/*hide drop down links
#menu li ul{
display: none;
float: none;
}
/*vertical drop down
#menu li ul li{
display: block;
float: none;
}
/*prevent text wrapping
#menu li ul li a{
width:auto;
min-width: 100px;
padding:0 20px;
}
/*Display drop down on hover
#menu ul li a:hover + .hidden,.hidden:hover{
display: block;
}
*/
/*Strip the ul of padding and list styling*/
body{
margin: 0;
padding: 0;
border: 0;
font-family: 'Roboto',sans-serif;
font-size: 100%;
font-weight: 400;
line-height: 1.75em;
color:#777;
vertical-align: baseline;
}
h1,h2,h3,h4,h5,h6
{
font-weight: 300;
color: #777;
}
h2
{
letter-spacing: -0.025em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
color: inherit;
text-decoration: none;
}
#header{
height:250px;
position: relative;
background: url(horizons.jpg);
background-position-x: 30%;
background-position-y: 90%;
background-repeat-x: no-repeat;
/*
background-attachment: fixed
*/
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
#menuDiv ul {
position: relative;
width:auto;
list-style-type:none;
margin:0;
margin-top: 10px;
padding:0;
top:0;
position: fixed;
margin-left: auto;
margin-right: auto;
}
/*Create a horizontal list with spacing*/
#menuDiv li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
#menuDiv li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height:
font-family: "Oleo Script","Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
#menuDiv li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
#menuDiv li:hover ul a {
background: #f3f3f3;
color: #2f0404;
height: 50px;
line-height: 40px;
}
/*Hover state for dropdown links*/
#menuDiv li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
#menuDiv li ul {
display: none;
}
/*Make dropdown links vertical*/
#menuDiv li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
#menuDiv li ul li a {
width: inherit;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
#menuDiv ul li a:hover + .hidden, .hidden:hover {
display: block;
}
#menuDiv ul#menu li:hover .hidden{
display: block;
}
/*For smartphone devices*/
#media screen and(max-width : 760px){
/*Dropdow inline*/
#nav ul{
position:static;
display: none;
}
/*vertical spacing*/
#nav li{
margin-bottom: 1px;
}
/*Make all menu links full width*/
#nav ul li, li a{
width: 100%;
}
/*Display 'show menu' link*/
#nav .show-menu {
display: block;
}
}
/*Show menu for phone browsers and hide it by default*/
#nav .show-menu{
font-family: "Helvectica Neue",Helvetica,Arial,sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
#nav input[type=checkbox]{
display: none;
}
/*Show menu when checkbox is chechked*/
#nav input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Wrap of the article
setting some positon width etc
*/
*/
#articleWrap{
}
#allContent{
vertical-align: baseline;
display:block;
float:left;
}
#articleContent{
max-width: 50%;
font-size: 11pt;
margin-left: auto;
margin-right:auto;
max-width:500px;
min-width: 100px;
}
/*leftSidebar holds row of links and comment section*/
/*row holds article field and leftSidebar*/
/*
.row {
font-weight: 300;
font-size: 10px;
line-height: 1.3;
padding-left: 10px;
padding-top:50px;
box-sizing: border-box;
float:left;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
top:0;
display: inline-flex;
}
.row header{
font-size:3.3em;
text-align: center;
padding-left: 40px;
}
.row list1{
float:left;
}
.row list2{
clear:left
}
.leftList{
float:left;
}
.leftList ul{
list-style-type: none;
}
.leftList li{
text-decoration: none;
border-bottom: 1px solid grey;
padding: 5px;
margin: 2px;
}
.leftList li:hover{
transform: scale(1.05);
}
leftSideBar properties*/
section,#textWrap {
margin-bottom: 3em;
vertical-align: top;
}
section {
padding-left: 50px;
padding-right: 50px;
}
/*Header element in section*/
#mainContent header{
/* padding-left: 50px; */
padding-top:40px;
margin-top:10px;
font-size:3.0em;
line-height: 1.3em;
letter-spacing: 2.7px;
text-align: center;
}
/*Left side bar configuration*/
/*date of comment add */
.posted
{
font-weight: bold;
}
.sidebar:first-child>*{
padding-top:0!important;
}
.sidebar>*{
padding-left:50px;
min-width: 400px;
}
.sidebar .row header{
padding-top:40px;
font-size:26pt;
}
/**/
/* remove bullets from lists */
.article-list li{
list-style-type: none;
}
.article-list a {
text-decoration: none;
color:#b9ba9b;
padding-left: 10px;
}
.article-list a:hover{
color:#6f6f5d;
}
.leftList header {
}
.commentSection header{
font-size:26pt;
}
*/
}
#textWrap{
width: 80.0%;
padding-left: 0;
}
#text{
font-size:13pt;
}
#mainContent{
display: inline-block;
max-width: 1000px;
min-width: 300px;
}
#main{
width: 100%;
}
#galleryIn{
}
.imageIn img{
width:200px;
height:200px;
margin:10px;
float:left;
box-shadow: 10px 10px 5px #888888;
}
.article-list li
{
}
/*Images preview */
#separatorImage header{
font-size:26pt;
}
ul.defaul li{
font-size:0.95em;
}
<html >
<head>
<meta lang="pl">
<META charset="UTF-8">
<TITLE>Tytuł strony!</TITLE>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700,500,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style2.css">
<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<META NAME="description" CONTENT="Site description">
<META NAME="robots" CONTENT="ALL">
</head>
<body>
<div id="header">
</div>
<div id="SelectNoStyle">
<div id="menuDiv">
<ul id="menu">
<li>
Home
</li>
<li>
About ￬
<ul class="hidden">
<li>Who We Are</li>
<li>What We Do</li>
</ul>
</li>
<li>
Gallery ￬
<ul class="hidden">
<li>Photography</li>
<li>ConceptArt</li>
<li>Funny</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="allContent">
<div id="mainContent">
<div id="textWrap">
<section id="text">
<header style="font-size:3.4em;">Do you live fully ?</header>
<p>
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor.
</p>
<p>
Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer.
</p>
<p>
Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
</p>
<p>
varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
</p>
</section>
</div>
</div>
</div>
<div class="sidebar">
<div class="row">
<div id="separatorImage">
<header> New in gallery </header>
<div id="galleryIn">
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
</div>
</div>
<div class="commentSection">
<section class="leftComment">
<header> Last Comments</header>
<ul class="last-com-list"></ul>
<li>
<p class="posted">
MAY 21, 2014 | (10 ) COMMENTS
</p>
<p class="comment">
Nullam non wisi a sem eleifend. Donec mattis libero eget urna. Pellentesque viverra enim.
</p>
</li>
<li>
<p class="posted">
MAY 21, 2014 | (10 ) COMMENTS
</p>
<p class="comment">
Nullam non wisi a sem eleifend. Donec mattis libero eget urna. Pellentesque viverra enim.
</p>
</li>
</section>
</div>
</div>
<!--PHP gallery which loads images from folder -->
</body>
</html>
I'm starting out with CSS, so I'm afraid to edit the code I already have. Part of it is main { max-width: 60em } for the text to be centered and a sticky menu. When I try adding .container { width: 100% } to another section like body or div, it messes up my sticky menu.
How can I make just one part of the page have a full width background?
(The issue is not about centering the look of the text, but the positioning on a page.) I want the text to be within 960px while having the background at 100% width.
/* === Globals === */
html,body,div,header,footer,section,article,figure,nav,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}/*remembertodefinefocusstyles!*/:focus{outline:0;}/*remembertohighlightinsertssomehow!*/ins{text-decoration:none;}del{text-decoration:line-through;}/*tablesstillneed'cellspacing="0"'inthemarkup*/table{border-collapse:collapse;border-spacing:0;}
/* === Structure === */
.clear {
clear: both;
}
#footer {
background-color: rgba(225, 225, 225, 1.0);
bottom: 0;
color: rgba(102, 102, 102, 1.0);
height: 350px;
text-align: center;
width: 100%;
}
#footer p {
font-size: 10px;
font-weight: bold;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
}
#footer p:first-child {
padding-top: 75px;
}
.menu {
-moz-box-shadow: 0 0 0.5em 0 #000;
-webkit-box-shadow: 0 0 0.5em 0 #000;
box-shadow: 0 0 0.5em 0 #000;
background-color: rgba(170, 68, 100, 0.95);
clear: both;
display: block;
height: 40px;
margin: 0;
padding: 10px 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 99;
}
.menu ul li a,
.menu-trigger {
color: white;
float: right;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding: 15px;
text-decoration: none;
text-transform: uppercase;
width: 50px;
}
.menu ul li a:active {
color: #ffffff;
}
.menu ul li a:hover {
color: #aa4464;
background: #fff;
}
.menu ul li:hover ul {
display: block;
}
.menu ul ul {
display: none;
position: absolute;
top: 50px;
right: 160px;
}
.menu ul ul li {
display: block;
}
.menu ul ul li a {
background-color: rgba(170, 68, 100, 0.95);
color: white;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
text-transform: uppercase;
width: 100px;
}
.menu-trigger {
display: none;
}
main {
margin: auto;
max-width: 60em;
padding: 75px 5% 50px;
}
main h2 {
font-family: 'Exo', serif;
font-size: 36px;
font-weight: 600;
line-height: 150%;
}
main p {
font-family: 'Arial', 'Helvetica', sans-serif;
font-size: 16px;
line-height: 150%;
}
.container {
width: auto 100%;
}
.testimonial {
margin: auto;
max-width: 60em;
padding: 75px 5% 50px;
color: #fff;
}
.work ul {
display: block;
margin: auto;
max-width: 60em;
}
.work li {
float: left;
margin: 1em 1%;
padding: 1em 1%;
text-align: center;
width: 20%;
}
.work a {
color: #fff;
display: block;
position: relative;
text-decoration: none;
}
.work h3 {
color: #666666;
font-family: Arial, helvetica, sans-serif;
font-size: 16px;
left: 0;
margin-top: -8px;
position: absolute;
text-transform: uppercase;
top: 100%;
width: 100%;
}
.work img {
width: 100%;
}
/* 960 */
#media all and (min-width: 960px) {
main h1 {
font-size: 160px;
}
}
/* 600 */
#media all and (min-width: 600px) {
main h2 {
font-size: 36px;
}
main p {
font-size: 20px;
}
main h1 {
font-size: 96px;
}
}
/* 768 */
#media only screen and
(max-width: 768px){
.menu-trigger {
display: none;
}
.work li {
width: 45%;
}
}
/* 480 */
#media only screen and
(max-width: 480px){
.menu-trigger {
display: inline;
position: fixed;
}
.menu ul li a {
display: block;
width: 100%;
z-index: 96;
}
.menu ul ul {
display: none;
position: absolute;
top: 50px;
right: 160px;
}
.menu ul ul li {
display: block;
}
ul.open {
background-color: rgba(170, 68, 100, 0.95);
height: 100%;
position: fixed;
right: 0;
top: 60px;
width: 100%;
}
.work li {
padding: inherit;
width: 95%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<title>Tantalizea Lacaden</title>
<link href="styles.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="parallax-styles.css" />
<script src="jquery.js"></script>
<link href='http://fonts.googleapis.com/css?family=Exo:400,600' rel='stylesheet' type='text/css'>
</head>
<body>
<nav class="menu open">
<ul>
<li>Contact</li>
<li>About</li>
<li>Work
<ul>
<li>Illustrations</li>
<li>Photography</li>
<li>Printed Work</li>
</ul>
</li>
<li>Home</li>
</ul>
<img src="hamburger.png" width="20px" />
</nav>
<main>
<img src="http://placehold.it/960x500">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, purus in porttitor pellentesque, erat arcu tincidunt diam, dapibus faucibus leo mauris at sapien. In porttitor vehicula sodales. Vivamus massa neque, facilisis eu felis ut, aliquet convallis nisi. Nam elementum tellus vitae gravida fermentum. Nullam et imperdiet leo. Integer ut euismod lorem, in placerat lacus. Curabitur bibendum arcu ut feugiat commodo. Suspendisse ut mi vel orci ullamcorper tincidunt. Nam vitae fringilla nibh. Nullam hendrerit blandit velit eu hendrerit.</p><br />
<p>Praesent eu enim non massa pellentesque lobortis. In in sagittis dolor. Aliquam non massa erat. Ut aliquet gravida tellus, sed volutpat nibh condimentum et. Nunc quam purus, vehicula quis venenatis et, porttitor vel dolor. Cras facilisis dui id elit bibendum, in ullamcorper leo ultricies. Praesent rutrum lacus sit amet sem convallis, ut interdum dolor vestibulum</p><br />
<p>Tum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In iaculis pharetra odio, sit amet consectetur elit facilisis ac. Praesent eget tristique ipsum. Donec malesuada bibendum lacinia. Praesent non purus sodales, pulvinar mi vitae, tincidunt leo. Phasellus vitae elit ut nisl semper fringilla id rutrum dolor. Donec a massa adipiscing, cursus risus vitae, porttitor tortor. Nullam sagittis est sapien, sit amet pharetra turpis imperdiet vel. Etiam sit amet ligula pretium, vulputate eros ac, bibendum velit. Aenean convallis ante purus, ac bibendum orci laoreet ac. Donec a convallis mauris. Nulla non lacus non ipsum pretium tempor. In hac habitasse platea dictumst. Aenean at ipsum vulputate, sagittis dui ut, pharetra neque. Nam eget sodales orci. Aliquam pharetra nunc at nisl pellentesque, nec fringilla enim iaculis.</p><br />
<section class="work">
<ul align="middle">
<li>
<a href="illustration.html">
<h3>Illustration</h3>
<img src="images/illustration.jpg" alt="" />
</a>
</li>
<li>
<a href="photography.html">
<h3>Photography</h3>
<img src="images/photography.jpg" alt="" />
</a>
</li>
<li>
<a href="print.html">
<h3>Print</h3>
<img src="images/print.jpg" alt="" />
</a>
</li>
<li>
<a href="web.html">
<h3>Web</h3>
<img src="images/web.jpg" alt="" />
</a>
</li>
</ul>
<div class="clear"></div>
</section>
</main>
<div class="container"><div class="testimonial"><h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, purus in porttitor pellentesque, erat arcu tincidunt diam, dapibus faucibus leo mauris at sapien. In porttitor vehicula sodales. Vivamus massa neque, facilisis eu felis ut, aliquet convallis nisi. Nam elementum tellus vitae gravida fermentum. Nullam et imperdiet leo. Integer ut euismod lorem, in placerat lacus. Curabitur bibendum arcu ut feugiat commodo. Suspendisse ut mi vel orci ullamcorper tincidunt. Nam vitae fringilla nibh. Nullam hendrerit blandit velit eu hendrerit.</p><br /></div></div>
<footer id="footer">
<p>tantalizea#gmail.com</p>
<p>2015 © Tantalizea Lacaden. All Rights Reserved.</p>
</footer>
</body>
</html>
I tried different things with the width, so I thought of doing the opposite. The following code worked! Thanks for the help, everyone! :)
.container {
min-width: 100%;
background-color: #aa4464;
}
I am seeing something strange in both firefox and chrome when I increase
the zoom level inside these browsers, although I see nothing wrong with
my CSS.
Here is the whole story:
I have a right-floated top-level div containing three right-floated right.
The three inner divs have all box-model measurements in pixels which add
up to the width of the enclosing container. Everything looks fine when
the browser size is 100%, but when I start making the browser smaller
with CTRL+scrollwheel or CTRL+minus the rightmost margin shrinks
down too fast and eventually becomes zero, forcing my rightmost
floated inner div to fall down below the other two!
I can't make sense out of this, almost seems like some integer division
is being performed incorrectly in the browser code, but alas firefox and
chrome both display the same result.
Here is the example (just zoom out with CTRL-minus to see what I mean):
Click Here to View What I Mean on Example Site
Just to narrow things down a bit, the tags of interest are the following:
div#mainContent
div#contentLeft
div#contentCenter
div#contentRight
I've searched stackoverflow for an answer and found the following
posts which seem related to my question but was not able to apply
them to the problem I am experiencing:
http://
stackoverflow.com/questions/6955313/div-moves-incorrectly-on-browser-resize
http://
stackoverflow.com/questions/18246882/divs-move-when-resizing-page
http://
stackoverflow.com/questions/17637231/moving-an-image-when-browser-resizes
http://
stackoverflow.com/questions/5316380/how-to-stop-divs-moving-when-the-browser-is-resized
I've duplicated the html and css code below for your convenience:
Here is the HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pinco</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="logo">
<a href="http://pinco.com">
<img class="logo" src="images/PincoLogo5.png" alt="Pinco" />
</a>
</div>
<div class="titolo">
<h1>Benvenuti!</h1>
<h2>Siete arrivati al sito pinco.</h2>
</div>
<nav>
<ul class="menu">
<li>Menù Qui</li>
<li>Menù Quo</li>
<li>Menù Qua</li>
</ul>
</nav>
</header>
<div id="mainContent">
<div id="contentLeft">
<section>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor turpis est, nec varius est pharetra scelerisque. Sed eu pellentesque purus, at cursus nisi. In bibendum tristique nunc eu mattis. Nulla pretium tincidunt ipsum, non imperdiet metus tincidunt ac. In et lobortis elit, nec lobortis purus. Cras ac viverra risus. Proin dapibus tortor justo, a vulputate ipsum lacinia sed. In hac habitasse platea dictumst. Phasellus sit amet malesuada velit. Fusce diam neque, cursus id dui ac, blandit vehicula tortor.
Phasellus interdum ipsum eu leo condimentum, in dignissim erat tincidunt. Ut fermentum consectetur tellus, dignissim volutpat orci suscipit ac. Praesent scelerisque urna metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pulvinar, sem a sodales eleifend, odio elit blandit risus, a dapibus ligula orci non augue. Nullam vitae cursus tortor, eget malesuada lectus. Nulla facilisi. Cras pharetra nisi sit amet orci dignissim, a eleifend odio hendrerit.
</p>
</article>
</section>
</div>
<div id="contentCenter">
<section>
<article>
<p>
Maecenas vitae purus at orci euismod pretium. Nam gravida gravida bibendum. Donec nec dolor vel magna consequat laoreet in a urna. Phasellus cursus ultrices lorem ut sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus purus felis, ornare quis ante vel, commodo scelerisque tortor. Integer vel facilisis mauris.
</p>
<img src="images/auto1.jpg" width="272" height="272" />
<p>
In urna purus, fringilla a urna a, ultrices convallis orci. Duis mattis sit amet leo sed luctus. Donec nec sem non nunc mattis semper quis vitae enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse dictum porta quam, vel lobortis enim bibendum et. Donec iaculis tortor id metus interdum, hendrerit tincidunt orci tempor. Sed dignissim cursus mattis.
</p>
</article>
</section>
</div>
<div id="contentRight">
<section>
<article>
<img src="images/auto2.jpg" width="272" height="272" />
<img src="images/auto3.jpg" width="272" height="272" />
<p>
Cras eu quam lobortis, sodales felis ultricies, rhoncus neque. Aenean nisi eros, blandit ac lacus sit amet, vulputate sodales mi. Nunc eget purus ultricies, aliquam quam sit amet, porttitor velit. In imperdiet justo in quam tristique, eget semper nisi pellentesque. Cras fringilla eros enim, in euismod nisl imperdiet ac.
Fusce tempor justo vitae faucibus luctus.
</p>
</article>
</section>
</div>
</div>
<footer>
<div class="footerText">
<p>
Copyright © Pinco
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />Fusce ornare turpis orci, nec egestas leo feugiat ac.
<br />Morbi eget sem facilisis, laoreet erat ut, tristique odio. Proin sollicitudin quis nisi id consequat.
</p>
</div>
<div class="footerLogo">
<img class="footerLogo" src="images/auto4.jpg" width="80" height="80" />
</div>
</footer>
</div>
</body>
</html>
and here is the CSS:
/* CSS Document */
* { margin: 0; border: 0; padding: 0; }
body { background: #8B0000; /* darkred */; }
body { margin: 0; border: 0; padding: 0; }
div#wrapper { margin: 0 auto; width: 960px; height: 100%; background: #FFC0CB /* pink */; }
header { position: relative; background: #005b97; height: 140px; }
header div.logo { float: left; width: 360px; height: 140px; }
header div.logo img.logo { width: 360px; height: 140px; }
header div.titolo { float: left; padding: 12px 0 0 35px; color: black; }
header div.titolo h1 { font-size: 36px; font-weight: bold; }
header div.titolo h2 { font-size: 24px; font-style: italic; font-weight: bold; color: white;}
header nav { position: absolute; right: 0; bottom: 0; }
header ul.menu { background: black; }
header ul.menu li { display: inline-block; padding: 3px 15px; font-weight: bold; }
div#mainContent { float: left; width: 100%; /* width: 960px; *//* height: 860px; */ padding: 30px 0; text-align: justify; }
div#mainContent img { margin: 12px 0; }
div#contentLeft { height: 900px; float: left; margin-left: 12px; border: 1px solid black; padding: 15px; width: 272px; background: #ccc; }
div#contentCenter { height: 900px; float: left; margin-left: 12px; border: 1px solid transparent; padding: 15px; width: 272px; background: #E00; }
div#contentRight { height: 900px; float: left; margin-left: 12px; border: 1px solid black; padding: 15px; width: 272px; background: #ccc; }
footer { clear: both; padding: 12px; background: #306; color: white; height: 80px; font-style: italic; font-weight: bold; }
footer div.footerText { float: left; }
footer div.footerLogo { float: right; }
a { color: white; text-decoration: none; }
EDIT 1:
I've checked all measurements again and carefully plugged in numbers until they
satisfied the following equation for the three uniform columns in the main area
with uniform collapsed margin areas on all sides:
TEXT_AREA * 3 + MARGIN * 4 + BORDER * 6 = 960px (the width of the
wrapper)
TEXT_AREA = WIDTH + 2 * PADDING
BORDER = 1
subject to the margin and padding set to reasonable values of course,
and here are some numbers which seemed OK which solve these constraints:
TEXT_AREA = 290px
MARGIN = 15px
BORDER = 1px
PADDING = 15px
WIDTH = 268px
which translates to the following:
div#mainContent { float: left; width: 960px; padding: 15px 0; text-align: justify; }
div#contentLeft { height: 900px; float: left; margin: 0 0 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
div#contentCenter { height: 900px; float: left; margin: 0 0 0 15px; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; }
div#contentRight { height: 900px; float: left; margin: 0 15px 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
However even now that everything is uniform, I still get the problem that when I zoom
out the rightmost column falls down below the others. One solution is to do the following:
div#contentRight { height: 900px; float: left; margin: 0 0 /* 15px */ 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
so that now the right column has no right margin, but the visual result is the same.
Now, when I zoom out, the rightmost column does not fall down, but its right margin
is so small compared to the others, so really, there is still a small problem.
Edit 2:
OK, I've done some more searching and found an even better solution. The solution
consists in having the margins in between the div column elements the same and having
the left and right margin adjust automatically. In order to achieve this, I had to
do away with floats, and use "display: inline-block" which IMHO is much more suitable
than floats and was designed for the purpose at hand:
div#mainContent { padding: 15px 0; width: 960px; text-align: center; }
div#contentLeft { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 0/*15px*/; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
div#contentCenter { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 15px; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; }
div#contentRight { display: inline-block; vertical-align: top; height: 900px; margin: 0 0/* 15px */ 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
div#mainContent section { text-align: justify; }
Now, at a normal zoom level all left margins will be 15px plus the last element's right
margin which will also be 15px. On the other hand, if I zoom out, there is some pixel
rounding going on, but the rounding is applied more or less equally on both sides,
which is somewhat better. This works in Firefox.
Edit 3:
Alas, I've tried reducing the in-between margins a bit, which makes the problem
go away with Chrome, but one of the div elements still drops down in IE10.
div#mainContent { padding: 15px 0; text-align: center; }
div#contentLeft { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 0/* 20px increased from 15px */; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; overflow: hidden; }
div#contentCenter { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 10px/* reduced from 15px */; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; overflow: hidden; }
div#contentRight { display: inline-block; vertical-align: top; height: 900px; margin: 0 0/* 20px increased from 15px */ 0 10px/* reduced from 15px */; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; overflow: hidden; }
div#mainContent section { text-align: justify; }
Edit 4:
I've come up with a solution which works in Firefox, Chrome, and IE10.
Basically, I've created three div wrappers around the three columns
and taken measurements again ensuring all measurements are symmetric.
Here is the source code:
HTML File:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pinco</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="logo">
<a href="http://pinco.com">
<img class="logo" src="images/PincoLogo5.png" alt="Pinco" />
</a>
</div>
<div class="titolo">
<h1>Benvenuti!</h1>
<h2>Siete arrivati al sito pinco.</h2>
</div>
<nav>
<ul class="menu">
<li>Menù Qui</li>
<li>Menù Quo</li>
<li>Menù Qua</li>
</ul>
</nav>
</header>
<div id="mainContent">
<div id="wrapperLeft">
<div id="contentLeft">
<section>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor turpis est, nec varius est pharetra scelerisque. Sed eu pellentesque purus, at cursus nisi. In bibendum tristique nunc eu mattis. Nulla pretium tincidunt ipsum, non imperdiet metus tincidunt ac. In et lobortis elit, nec lobortis purus. Cras ac viverra risus. Proin dapibus tortor justo, a vulputate ipsum lacinia sed. In hac habitasse platea dictumst. Phasellus sit amet malesuada velit. Fusce diam neque, cursus id dui ac, blandit vehicula tortor.
Phasellus interdum ipsum eu leo condimentum, in dignissim erat tincidunt. Ut fermentum consectetur tellus, dignissim volutpat orci suscipit ac. Praesent scelerisque urna metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pulvinar, sem a sodales eleifend, odio elit blandit risus, a dapibus ligula orci non augue. Nullam vitae cursus tortor, eget malesuada lectus. Nulla facilisi. Cras pharetra nisi sit amet orci dignissim, a eleifend odio hendrerit.
</p>
</article>
</section>
</div>
</div>
<div id="wrapperCenter">
<div id="contentCenter">
<section>
<article>
<p>
Maecenas vitae purus at orci euismod pretium. Nam gravida gravida bibendum. Donec nec dolor vel magna consequat laoreet in a urna. Phasellus cursus ultrices lorem ut sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus purus felis, ornare quis ante vel, commodo scelerisque tortor. Integer vel facilisis mauris.
</p>
<img src="images/auto1.jpg" alt="Auto 1" width="268" height="268" />
<p>
In urna purus, fringilla a urna a, ultrices convallis orci. Duis mattis sit amet leo sed luctus. Donec nec sem non nunc mattis semper quis vitae enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</article>
</section>
</div>
</div>
<div id="wrapperRight">
<div id="contentRight">
<section>
<article>
<img src="images/auto2.jpg" alt="Auto 2" width="268" height="268" style="margin-top: 0" />
<img src="images/auto3.jpg" alt="Auto 3" width="268" height="268" style="margin-top: 0" />
<p>
Cras eu quam lobortis, sodales felis ultricies, rhoncus neque. Aenean nisi eros, blandit ac lacus sit amet, vulputate sodales mi. Nunc eget purus ultricies, aliquam quam sit amet, porttitor velit. In imperdiet justo in quam tristique, eget semper nisi pellentesque. Cras fringilla eros enim, in euismod nisl imperdiet ac.
Fusce tempor justo vitae faucibus luctus.
</p>
</article>
</section>
</div>
</div>
</div>
<footer>
<img class="footerLogo" src="images/auto4.jpg" alt="Auto 4" width="80" height="80" />
<p class="footerText">
Copyright © Pinco Inc.
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />Fusce ornare turpis orci, nec egestas leo feugiat ac.
<br />Morbi eget sem facilisis, laoreet erat ut, tristique odio. Proin sollicitudin quis nisi id consequat.
</p>
</footer>
</div>
</body>
</html>
CSS File:
/* CSS Document */
*, body, article, secton, p { margin: 0; border: 0; padding: 0; }
body { background: #8B0000; /* darkred */; }
body { margin: 0; border: 0; padding: 0; }
div#wrapper { margin: 0 auto; width: 960px; height: 100%; background: #FFC0CB /* pink */; }
header { position: relative; background: #005b97; height: 140px; }
header div.logo { float: left; width: 360px; height: 140px; }
header div.logo img.logo { width: 360px; height: 140px; }
header div.titolo { float: left; padding: 12px 0 0 35px; color: black; }
header div.titolo h1 { font-size: 36px; font-weight: bold; }
header div.titolo h2 { font-size: 24px; font-style: italic; font-weight: bold; color: white;}
header nav { position: absolute; right: 0; bottom: 0; }
header ul.menu { background: black; }
header ul.menu li { display: inline-block; padding: 3px 15px; font-weight: bold; }
div#mainContent { float: left; padding: 15px 0; height: 900px; }
#wrapperLeft { float: left; margin-left: 15px; width: 305px; }
#wrapperCenter { float: left; margin: 0 15px 0 15px; width: 290px; }
#wrapperRight { float: left; margin-right: 15px; width: 305px; }
div#contentLeft { border: 1px solid black; padding: 15px; width: 273px; height: 868px; background: #ccc; overflow: hidden; }
div#contentCenter { border: 1px solid transparent; padding: 15px; width: 258px; height: 868px; background: #E00; overflow: hidden; }
div#contentRight { border: 1px solid black; padding: 15px; width: 273px; height: 868px; background: #ccc; overflow: hidden; }
div#mainContent section { text-align: justify; }
div#mainContent img { margin: 12px 0; }
footer { clear: both; padding: 12px; background: #306; color: white; height: 80px; font-size: 12px; font-style: italic; font-weight: bold; overflow: hidden; }
footer img.footerLogo { float: right; }
a { color: white; text-decoration: none; }
This is probably caused by sub-pixel rounding.
As you zoom, your browser may calculate pixel values with fractions of pixels. As a result of rounding these values up or down, pixel-perfect layouts can break. (Different browsers handle this in different ways.)
I had decent luck converting your pixel values to percentage values.
Here are the values that worked for me:
div#contentLeft,
div#contentCenter,
div#contentRight {
margin-left: 1.1%;
padding: 1.56%;
width: 28.3%;
}
Edit:
Here's another method, which essentially centers the three boxes in div#mainContent rather than spacing them so tightly with margins. It allows them a little more room to flex when zoomed.
I removed the margin-left from div#contentLeft and added the following CSS to center the three boxes:
div#wrapper {
overflow:hidden; /* ADDED THIS TO AVOID HORIZONTAL SCROLL */
}
div#mainContent {
position: relative; /* ADDED THIS */
left: 50%; /* ADDED THIS */
float: left;
padding: 30px 0px;
text-align: justify;
}
div#contentLeft {
position: relative; /* ADDED THIS */
left: -50%; /* ADDED THIS */
background: none repeat scroll 0% 0% #CCCCCC;
border: 1px solid black;
float: left;
height: 900px;
padding: 15px;
width: 272px;
/* margin-left:12px; REMOVED THIS */
}
div#contentCenter {
position: relative; /* ADDED THIS */
left: -50%; /* ADDED THIS */
background: none repeat scroll 0% 0% #EE0000;
border: 1px solid transparent;
float: left;
height: 900px;
margin-left: 12px;
padding: 15px;
width: 272px;
}
div#contentRight {
position: relative; /* ADDED THIS */
left: -50%; /* ADDED THIS */
background: none repeat scroll 0% 0% #CCCCCC;
border: 1px solid black;
float: left;
height: 900px;
margin-left: 12px;
padding: 15px;
width: 272px;
}
The boxes remain floated on one row even when Firefox is zoomed all the way out.
I've got an audacious project and would like some advice. I want to have a site that uses CSS Diamonds, I've attached an image to give a better idea of what I am looking at doing. Here are the issues I have run into so far:
The triangles are perfectly aligned until a submenu is added, then the right three shift to the right (this was working at one point). Also the li in which the submenu is under loses its diamond
The text on the submenu diamonds are not centered.
I cannot have the background image, then diamond then title. I have tried different z-indexs and it hasn't worked. (To see the menu titles, the background image needs to be removed, and the diamonds need to be -1 z-indexed)
Because I need to use spans to create the triangle text wrapping for the sidebar I cannot just make the sidebar div a diamond, so I still need to add the diamond in below it.
It would be great to have both the right text body and the sidebar text body wrap to the diamond, however I think this is not possible, therefore I reverted to just having the sidebar wrap.
Here is my HTML so far: I have commented out the submenu and my sidebar diamond attempt. http://jsfiddle.net/s4XXE/
/* reset.css */
html {
margin: 0;
padding: 0;
border: 0;
}
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
code,
del,
dfn,
em,
img,
q,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
dialog,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1.5;
background: white;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption,
th,
td {
text-align: left;
font-weight: normal;
float: none !important;
}
table,
th,
td {
vertical-align: middle;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
}
blockquote,
q {
quotes: """";
}
a img {
border: none;
}
:focus {
outline: 0;
}
/* typography.css */
html {
font-size: 100.01%;
}
body {
font-size: 75%;
color: #222;
background: #fff;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
color: #d10000;
}
h1 {
font-size: 3em;
line-height: 1;
margin-bottom: 0.5em;
}
h2 {
font-size: 2em;
margin-bottom: 0.75em;
}
h3 {
font-size: 1.5em;
line-height: 1;
margin-bottom: 1em;
}
h4 {
font-size: 1.2em;
line-height: 1.25;
margin-bottom: 1.25em;
}
h5 {
font-size: 1em;
font-weight: bold;
margin-bottom: 1.5em;
}
h6 {
font-size: 1em;
font-weight: bold;
}
h1 img,
h2 img,
h3 img,
h4 img,
h5 img,
h6 img {
margin: 0;
}
p {
margin: 0 0 1.5em;
}
.left {
float: left !important;
}
p .left {
margin: 1.5em 1.5em 1.5em 0;
padding: 0;
}
.right {
float: right !important;
}
p .right {
margin: 1.5em 0 1.5em 1.5em;
padding: 0;
}
a:focus,
a:hover {
color: #09f;
}
a {
color: #06c;
text-decoration: underline;
}
blockquote {
margin: 1.5em;
color: #666;
font-style: italic;
}
strong,
dfn {
font-weight: bold;
}
em,
dfn {
font-style: italic;
}
sup,
sub {
line-height: 0;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
}
address {
margin: 0 0 1.5em;
font-style: italic;
}
del {
color: #666;
}
pre {
margin: 1.5em 0;
white-space: pre;
}
pre,
code,
tt {
font: 1em'andale mono', 'lucida console', monospace;
line-height: 1.5;
}
li ul,
li ol {
margin: 0;
}
ul,
ol {
margin: 0 1.5em 1.5em 0;
padding-left: 1.5em;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
dl {
margin: 0 0 1.5em 0;
}
dl dt {
font-weight: bold;
}
dd {
margin-left: 1.5em;
}
table {
margin-bottom: 1.4em;
width: 100%;
}
th {
font-weight: bold;
}
thead th {
background: #c3d9ff;
}
th,
td,
caption {
padding: 4px 10px 4px 5px;
}
tbody tr:nth-child(even) td,
tbody tr.even td {
background: #e5ecf9;
}
tfoot {
font-style: italic;
}
caption {
background: #eee;
}
.small {
font-size: .8em;
margin-bottom: 1.875em;
line-height: 1.875em;
}
.large {
font-size: 1.2em;
line-height: 2.5em;
margin-bottom: 1.25em;
}
.hide {
display: none;
}
.quiet {
color: #666;
}
.loud {
color: #000;
}
.highlight {
background: #ff0;
}
.added {
background: #060;
color: #fff;
}
.removed {
background: #900;
color: #fff;
}
.first {
margin-left: 0;
padding-left: 0;
}
.last {
margin-right: 0;
padding-right: 0;
}
.top {
margin-top: 0;
padding-top: 0;
}
.bottom {
margin-bottom: 0;
padding-bottom: 0;
}
/* Customization */
body {
background: #efefef;
margin: 0px auto;
width: 1320px;
}
#bodydiv {
width: 100%;
background-image: url('http://i.stack.imgur.com/QVfwy.png');
background-repeat: repeat;
overflow: hidden;
}
ul {
list-style: none;
position: relative;
width: 100%;
text-align: center;
padding: 0px 0px 0px 28.6em;
margin-bottom: 0px;
display: block;
}
li {
float: left;
margin: 0em -1.45em;
font-weight: bold;
font-size: 2em;
}
ul li a {
color: red;
text-decoration: none;
}
ul li a:hover {
color: #eee;
text-decoration: none;
}
.triangle:after {
content: '';
position: relative;
top: 105px;
margin-left: -50%;
border: 5em solid transparent;
border-top-color: red;
z-index: 1;
}
li:nth-child(1).triangle:after {
border-top-color: blue;
}
li:nth-child(2).triangle:after {
border-top-color: green;
}
li:nth-child(3).triangle:after {
border-top-color: purple;
}
ul li ul {
font-size: .5em;
}
ul li ul a {
z-index: 1;
}
.diamond,
.diamond:after {
width: 0;
height: 0;
border: 4em solid transparent;
content: '';
z-index: 1;
}
.diamond {
border-bottom-color: red;
position: absolute;
top: -1em;
}
.diamond:after {
position: absolute;
margin-left: -4em;
top: 4em;
border-top-color: red;
}
.diamond.big,
.diamond.big:after {
width: 0;
height: 0;
border: 9em solid transparent;
content: '';
z-index: 1;
}
.diamond.big {
border-bottom-color: red;
position: absolute;
}
.diamond.big:after {
margin-left: -9em;
top: 9em;
border-top-color: red;
}
.diamond.huge,
.diamond.huge:after {
width: 0;
height: 0;
border: 500px solid transparent;
content: '';
z-index: 1;
}
.diamond.huge {
top: -500px;
border-bottom-color: red;
position: absolute;
}
.diamond.huge:after {
margin-left: -500px;
top: 500px;
border-top-color: red;
}
li:hover > ul li {
display: none;
}
ul ul li {
font-size: 1em;
display: block;
position: relative;
left: 1em;
margin-left: 1em;
margin-top: 1em;
}
ul ul li:nth-child(1).diamond {
border-bottom-color: orange;
top: 4em;
left: 6em;
}
ul ul li:nth-child(1).diamond:after {
border-top-color: orange;
}
ul ul li:nth-child(2).diamond {
border-bottom-color: aqua;
}
ul ul li:nth-child(2).diamond:after {
border-top-color: aqua;
}
*/
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Triangles</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=479;">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="bodydiv">
<ul>
<li class="current index triangle submenu">Home
<!--
<ul><li class="diamond">subpage 1</li><li class="diamond">subpage 2</li></ul>
-->
</li>
<li class="about triangle">Home
</li>
<li class="contact triangle">Home
</li>
<li class="other triangle">Home
</li>
</ul>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>
Heading for the page
</h1>
<div style="width:60%; float:left;">
<p style="font-size:1em; color:black;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at tellus ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc et erat magna. Aenean volutpat ultrices quam nec vestibulum. Nullam
quis ante vel tellus mattis laoreet. Duis vehicula est id lorem consequat pretium. Suspendisse potenti.
</p>
<p style="font-size:1em; color:black;">
Donec ut nunc ante, vel elementum ante. Vivamus mattis ornare fermentum. Quisque vitae justo quam. Cras nunc odio, sodales a condimentum id, laoreet sed neque. Integer adipiscing placerat sollicitudin. Etiam posuere, lacus ut bibendum mattis, nibh urna
ullamcorper nibh, vitae blandit massa nunc ac augue. Aliquam mollis aliquam magna eget rutrum. Suspendisse iaculis placerat dolor, at venenatis eros rutrum non. Phasellus pretium risus ac nisi sollicitudin sit amet adipiscing nisl malesuada. Cras
nisi nunc, hendrerit at elementum in, auctor a ligula. Maecenas pharetra condimentum aliquam. Nulla et ultricies nisi. Donec vitae neque ac augue iaculis pretium nec sed ipsum. Sed gravida facilisis congue. Nullam lobortis interdum augue ac venenatis.
Sed luctus turpis sed urna sollicitudin imperdiet.
</p>
<p style="font-size:1em; color:black;">
Nam lectus lacus, ultricies non placerat in, consectetur lacinia urna. Duis orci eros, porta nec tempus vitae, sollicitudin ac massa. Nam porta dignissim bibendum. Aenean hendrerit lacinia nisi vel viverra. Maecenas eu mi orci, vel laoreet massa. Fusce
rhoncus, tellus eu consectetur eleifend, lacus enim ultricies diam, ut rutrum mauris dolor nec nibh. Suspendisse tincidunt neque vitae ligula adipiscing consectetur quis et nisl. Fusce eu sem diam. Aenean iaculis laoreet lacus, a vulputate augue
egestas ut. Donec fringilla nisi sit amet arcu convallis in egestas nisl imperdiet. Nam interdum dolor nec nibh auctor eget sollicitudin orci iaculis. Proin turpis sem, ultricies facilisis euismod in, mattis in justo. Morbi feugiat semper blandit.
Quisque tincidunt semper sodales. Nullam suscipit tempor gravida.
</p>
<p style="font-size:1em; color:black;">
Vivamus eu diam id libero rhoncus ultrices ut eu lectus. Praesent diam elit, luctus a lobortis ac, faucibus in nisl. Duis id est purus, a condimentum leo. Quisque gravida metus sed arcu placerat nec convallis quam blandit. Cras laoreet vulputate sem et
consectetur. Curabitur felis erat, auctor vitae eleifend id, suscipit eget sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porttitor ultricies tortor in tincidunt.
</p>
<p style="font-size:1em; color:black;">
In hac habitasse platea dictumst. Sed erat leo, cursus vel pellentesque quis, pretium quis mi. Integer interdum neque non nisi luctus sollicitudin pellentesque nunc consectetur. Fusce auctor bibendum porta. Donec in est lacus, in luctus purus. Proin consectetur
molestie urna, eu laoreet ligula pellentesque eget. Cras at magna sit amet lacus consectetur viverra. Mauris sed faucibus nisl.
</p>
<style>
.lW {
float: left;
clear: left;
height: 18px;
}
.rW {
float: right;
clear: right;
height: 18px;
}
</style>
</div>
<div style="font-size:1em; color:black; width:40%; float:right;" class="sidebardiamond">
<div class="diamond big" style="position:relative; left:301px; top:-150px;">What is ACM?</div>
<div class="lW" style="width:78%;"></div>
<div class="lW" style="width:74.6%;"></div>
<div class="lW" style="width:71.2%;"></div>
<div class="lW" style="width:67.8%;"></div>
<div class="lW" style="width:64.4%;"></div>
<div class="lW" style="width:61%;"></div>
<div class="lW" style="width:57.6%;"></div>
<div class="lW" style="width:54.2%;"></div>
<div class="lW" style="width:50.8%;"></div>
<div class="lW" style="width:47.4%;"></div>
<div class="lW" style="width:44%;"></div>
<div class="lW" style="width:40.6%;"></div>
<div class="lW" style="width:44.4%;"></div>
<div class="lW" style="width:47.8%;"></div>
<div class="lW" style="width:51.2%;"></div>
<div class="lW" style="width:54.6%;"></div>
<div class="lW" style="width:58%;"></div>
<div class="lW" style="width:61.4%;"></div>
<div class="lW" style="width:64.8%;"></div>
<div class="lW" style="width:68.2%;"></div>
<div class="lW" style="width:71.6%;"></div>
<div class="lW" style="width:75%;"></div>
<div class="lW" style="width:78.4%;"></div>
<div class="lW" style="width:81.8%;"></div>
In hac habitasse platea dictumst. Sed erat leo, cursus vel pellentesque quis, pretium quis mi. Integer interdum neque non nisi luctus sollicitudin pellentesque nunc consectetur. Fusce auctor bibendum porta. Donec in est lacus, in luctus purus. Proin consectetur
molestie urna, eu laoreet ligula pellentesque eget. Cras at magna sit amet lacus consectetur viverra. Mauris sed faucibus nisl.</div>
<!--<div class="diamond huge" style="position:relative; left:5px; top:150px;"></div>
<br>-->
</div>
</body>
</html>
Good news! I have solved most of my issues. Here is my updated jsfiddle: http://jsfiddle.net/s4XXE/1/ I will continue to work on fixing all issues. Any assistance would be helpful.
FIXED: I used the submenu class to correct the offset that was caused by the addition of a submenu.
FIXED: The titles do show up now. I think I added display:relative; to the CSS so that it accepted the z-index
FIXED: Changed the triangles on the menu to before instead of after so the triangles still show up on the menus with submenus.
BUG: The submenus are shown when the mouse gets close to the menu item. It should just be showing the submenus when the mouse is on the triangle.
BUG: On the menu items a link is only 'valid' when the mouse is over the text. It would be nice to have it 'valid' when it is over the shape.
BUG: The titles on the submenus and sidebar title are still not centered.
BUG: Changing the "Home" titles messes everything up. (need to adjust for changing content)