Related
I'm working on a test website in wordpress that displays fine in firefox and edge, but not Chrome, specifically the tabbed headers and the responsive design (Chrome isn't reading the media queries in the style.css file at all for some reason). I've validated the code I have access to and I'm still having a discrepancy.
The website in question:
http://alessiosrestaurant.ashleywalters.net/
Curiously, I've done a static page which isn't using wordpresses code and it shows up fine on Chrome, using the same styles below. It seems to be when I integrate the two that the issues appear.
The static version:
http://alessiosrestaurant.ashleywalters.net/wp-content/themes/Frank-master/index2.html
Pertinent screenshots:
firefox vs chrome
>>Corresponding code below<<
header.php code:
<?php
/**
* #package Frank
*/
?>
<!DOCTYPE html>
<!--[if IE 7 | IE 8]>
<html class="ie" lang="en-US">
<![endif]-->
<!--[if (gte IE 9) | !(IE)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<?php
wp_title( '—', true, 'right' );
bloginfo( 'name' );
?>
</title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link href="https://fonts.googleapis.com/css?family=Pragati+Narrow" rel="stylesheet">
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body id="page" <?php body_class(); ?>>
<!--[if lt IE 9]>
<div class="chromeframe">Your browser is out of date. Please upgrade your browser or install Google Chrome Frame.</div>
<![endif]-->
<header class="header">
<h1>Alessio's</h1>
<nav>
<ul>
<li class="first">Home</li>
<li >The Food
<ul>
<li>Pizza</li>
<li>Menu</li>
<li>Catering</li>
</ul>
</li>
<li>The People
<ul>
<li>About Us</li>
<li>Locations</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
</li>
<li>Order Online</li>
</ul>
</nav>
<ul id="social">
<li><img alt="image" src="wp-content/themes/Frank-master/images/twitter.svg" />
<li><img alt="image" src="wp-content/themes/Frank-master/images/facebook.svg" />
<li><img alt="image" src="wp-content/themes/Frank-master/images/instagram.svg" />
</ul>
</header> <!-- End Banner -->
style.css (the only stylesheet used for the main styles):
/*
Theme Name: Frank
Theme URI: http://somerandomdude.com/work/frank
Description: The next step of the Franklin Street theme.
Author: P.J. Onori, heavily altered by Ashley Walters
Author URI: http://somerandomdude.com/hello/
Version: 0.9.3
License: GPL 3.0
License URI: http://www.gnu.org/copyleft/gpl.html
Tags: brown, red, white, two-columns, fixed-width, sticky-post, custom-menu
*/
/* ------------------------*/ /* ---------->>> Style Resets <<<-----------*/ /* ------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
* {
margin: 0;
padding: 0;
border: 0;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
list-style-type: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
html {overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* ------------------------*/ /* ---------->>> Global Styles <<<-----------*/ /* ------------------------*/
body
{
background: url(images/bg.svg) repeat-x #f8f8f8;
background-size: 8px 250px;
color: #222;
font: normal 1.25rem/2rem 'Pragati Narrow', sans-serif;
padding:0;
margin: 0;
}
a {color: #940902;}
a:hover {color: #333; text-decoration: underline;}
img {border: none;}
h1, h2, h3, h4, h5, h6, blockquote {font-family: Georgia, serif; font-weight: normal; text-align: left;}
h2 {font-size: calc(2vw + 2rem); margin-bottom: 2rem; line-height: calc(2vw + 2rem);}
a img { border: 0;}
img {
height: auto; /* Make sure images are scaled correctly. */
max-width: 100%; /* Adhere to container width. */
}
hr {visibility: hidden; clear: both;}
img.left {margin: .65rem 2rem 0 0; border: 5px solid white; box-shadow: 1px 1px 3px #999; border-radius: 2px;}
.left {float: left;}
p.right {margin-bottom: 1rem; display: block; text-align: right; margin-right: 4rem;}
.bold {font-weight: bold;}
.alignleft {
float:left;
margin:5px 20px 20px 0;
}
a img.alignleft {
float:left;
margin:5px 20px 20px 0;
}
/* ------------------------*/ /* ---------->>> Header Styles <<<-----------*/ /* ------------------------*/
header.header {
width: 100%;
margin: auto;
height: 250px;
background: url(images/logo.svg) no-repeat 6% 48% ;
background-size: 300px 90px;
border-top: 0px solid black;
position: relative;
}
header.header h1 {display: none;}
header.header a {color: white; transition: all 0.2s; text-decoration: none; }
header.header ul {display: block;}
header.header ul li {display: inline-block; }
nav
{
box-sizing: content-box;
position: absolute;
top: 170px;
right: 0px;
background: url(images/tab.svg) no-repeat top left;
background-size: 1600px 108px;
z-index: 99;
letter-spacing: .085em;
padding-top: .75rem;
}
nav ul li.first {margin-left: 120px; padding-left: .7rem; }
nav a {display: block; color: white;}
nav a:hover {color: #ccc; text-decoration: none;}
nav ul {
display: block;
padding-right: 3rem;
height: 36px;
}
nav ul li
{
display: inline-block;
margin-right: -4px;
position: relative;
padding: 1rem 1.5rem 1.5rem 1.5rem;
transition: all 0.2s;
}
nav ul li ul {
padding: 0;
position: absolute;
top: 67px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s;
}
nav ul li ul:first-child {border-top: 10px solid black;}
nav ul li ul li {
background: #7d2316;
border-bottom: 1px solid #741e12;
display: block;
color: #fff;
font-weight: normal;
font-size: .9em;
width: 80%; display: block;
padding: .75rem 1.75rem;
}
nav ul li ul li:hover { background: #000; border-bottom: 1px solid black;}
nav ul li:hover ul {
display: block;
opacity: .95;
visibility: visible;
}
li.order {display: none;}
a.arrow {
border-radius: 10px;
background: url(images/double-arrow.svg) no-repeat top right #92321f;
background-size: contain;
padding: 0 1.5rem 0 1rem;
}
a.arrow:hover {background-color: black;}
#social {position: absolute; top: 55px; right: 5%; z-index: 99; display: block;}
#social li {padding: 0 0 0 0; margin: 1rem .75rem; display: inline-block; width: 58px; transition: all 0.5s ease;}
#social li:hover {transform: rotate(360deg);}
/* ------------------------*/ /* ---------->>> Main Structure<<<-----------*/ /* ------------------------*/
.main-column { padding: 3em 0 1em 0; width:50%;}
.main-column, .sole-column {
text-align: justify;
max-width: 1000px;
}
.main-column, .side-column {display: inline-block;}
.sole-column {
display: block;
margin: 0 auto;
padding: 4em 0 2em 0;
width:65%;
}
.side-column {
display: inline-block;
vertical-align: top;
width: 40%;
padding-left: 2rem;
}
.side-column img {margin-right: 0%;}
.side-column h3 {font: normal 1.5vw/2rem 'Pragati Narrow', sans-serif; display: inline; }
.two-column {width: 90%; margin: 0 auto; text-align: center;}
/* ------------------------*/ /* ---------->>> Blog Styles <<<-----------*/ /* ------------------------*/
#primary {
margin-top: 0;
width:70%;
max-width: 1100px;
background-color: #fbfbfb;
display: inline-block;
border-right: 4px solid white;
}
.post-title, .post-title-mobile {font-size: 2rem; margin-bottom: 1rem; }
.post-title-mobile {display: none;}
.post-title a, .post-title-mobile a {text-decoration: none; padding-bottom: .35rem; color: #222;}
.post-title a:hover {color: #940902; border-bottom: 2px dotted black; }
.post { border-bottom: 4px solid white; padding: 2rem 4rem 1.5rem 4rem;}
.post p {text-align: justify; overflow: hidden;}
.comments {padding-bottom: 1rem; float: right;}
.pagination {padding: 2rem 4rem; font-size: 1.5rem; text-align: left;}
.clearfix:after, .post-content:after, .single .post-content p:after, .comment-content:after {
clear: both;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.wp-post-image
{
width: 200px;
display: inline-block;
clear: left;
margin: .5rem 0px 0px 0;
border: 6px solid white;
box-shadow: 1px 1px 3px #ccc;
}
div.thumbdate
{
display: inline-block;
width: 100px;
padding-right: 2rem;
font-size: 1.15rem;
box-sizing: content-box;
margin-bottom: 0;
padding-bottom: 0;
}
.date {line-height: 1; width: 6.8rem; margin: .6rem 0 1rem 0;}
.day
{
float: left;
border-right: 2px solid #000;
padding-right: .15em ;
margin: 0 .15em 0 0;
font: 3em 'Times', serif;
color: #940902;
line-height: .75;
}
.year {font-size: .95em; }
.month
{
font-size: 1.15em;
text-transform: uppercase;
margin-top: .35em;
}
.day, .year, .month {display: block; font-weight: bold; }
/* Blog sidebar */
#sidebar
{
display: inline-block;
vertical-align: top;
width: 28%;
padding: 2rem;
margin-top: 1rem;
text-align: left;
}
#sidebar h3 {padding-bottom: .75rem; font-size: 2rem;}
#sidebar a {text-decoration: none; color: #840700;}
#sidebar a:hover {color: #000; }
#sidebar ul {line-height: 1;}
#sidebar ul li {padding: 2rem; }
#sidebar h3, #sidebar ul li {border-bottom: 2px dotted #ccc;}
.sidebardate {display: inline-block; float:left; margin-right: 1rem;}
.sidebarmonth {font-size: .95rem; text-transform: uppercase;}
.sidebarday {font-size: 1.55rem; color: #840700; margin-top: -.25rem; font-family: 'Times', serif}
.sidebarmonth, .sidebarday {display: block; font-weight: bold;}
/*tab styles */
.divider {background: url(images/tab-bg.svg) repeat-x, linear-gradient(90deg, #fbfbfb 50%, #f4f4f4 50%) repeat-y; background-size: 15px 47px, auto auto; margin-top: -2em; padding-top: 47px; text-align: center;}
h2.tab
{
padding: .8em 4em 0em 1.65em;
font-size: 2em;
display: inline-block;
clear: both;
color: white;
background: url(images/tab-reverse.svg) no-repeat top right;
background-size: 1600px 108px;
margin: 0;
z-index: 99;
}
h2.tab:before {
content: '';
display: block;
}
/* ------------------------*/ /* ---------->>> Homepage Styles <<<-----------*/ /* ------------------------*/
#menu
{
width: 100%;
max-width: 600px;
margin-top: 6rem;
border: 4px solid white;
box-shadow: 1px 1px 3px #ccc;
background: url(images/food-display.jpg) no-repeat;
background-size: cover;
}
#menu:hover {opacity: .9; transition: opacity .3s;}
#menu img {width: 100%; height: auto; }
#menu h2 {display: none;}
.deals {margin: 3rem 0 2rem 0;}
.deals h3
{
font-family: 'Pragati Narrow', sans-serif;
font-weight: bold;
}
.deals ul
{
background: url(images/connector.svg) no-repeat 1.5rem 30px;
background-size: 1px 200px;
list-style-type: none;
}
.deals ul li
{
padding: 0rem 0 1.6rem 4rem;
}
.deals ul li.silverware
{
background: url(images/icon-silverware.svg) no-repeat;
}
.deals ul li.kids
{
background: url(images/icon-kids.svg) no-repeat;
}
.deals ul li.punch
{
background: url(images/icon-double-punch.svg) no-repeat;
}
.deals ul li.kids, .deals ul li.silverware, .deals ul li.punch
{
background-size: 50px 50px;
background-position: 0 7px;
}
#browse {width: 100%; background: url(images/tab-bg.svg) repeat-x #f4f4f4; background-position: 0 0px; background-size: 15px 47px; padding-top: 57px; margin-top: -4rem;}
h2.browse
{
display: inline-block;
padding: 1em 6em 1em 4em;
font-size: 1.25em;
color: white;
background: url(images/icon-menu.svg) no-repeat 1em .85em, url(images/tab-reverse.svg) no-repeat top right;
background-size: 47px 41px, 1600px 108px;
margin: 2rem 0 0 0;
}
#browse ul
{
z-index: 99;
margin-top: -.5em;
}
#browse ul li
{
display: inline-block;
width: 16.6667%;
outline: 3px solid white;
}
#browse ul li a
{
display: block;
text-align: center;
background: url(images/block-transparent.png) repeat-x;
background-size: 10px 47px;
background-position: bottom left;
color: white;
position: relative;
width: 100%;
height: 175px;
border-bottom: 10px solid black;
}
#browse ul li a em
{
padding: 0rem .2rem .1rem.2rem;
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 1.15rem;
}
#browse ul li a:hover
{color: #ccc;
border-bottom: 10px solid #940902;
background: url(images/block.png) repeat-x;
background-size: 10px 47px;
background-position: bottom left;
transition: border-bottom 0.5s ease, background 0.5s ease;
}
.pasta {background: url(images/browse-pasta.jpg);}
.pizzas {background: url(images/browse-pizza.jpg);}
.soups {background: url(images/browse-soups.jpg);}
.appetizers {background: url(images/browse-appetizers.jpg);}
.entrees {background: url(images/browse-entrees.jpg);}
.subs {background: url(images/browse-subs.jpg);}
.pasta, .pizzas, .soups, .appetizers, .entrees, .subs
{
background-repeat: no-repeat;
background-color: black;
background-size: cover;
height: 175px;
padding: 0em;
}
/*Makes the thumb on the homepage scale with the paragraph*/
p.scaling-thumb {
background: url(images/pizza-thumb-border.png), url(images/pizza-thumb.jpg);
overflow: hidden;
background-size: 9rem auto;
padding-left: 11rem;
background-position: bottom left, 0 7px;
background-repeat: no-repeat;
}
.nowrap {white-space: nowrap;}
/* Force Metaslider Plugin to adhere to new styles */
.metaslider {overflow:hidden;}
.metaslider .caption-wrap {opacity: .9 !important;}
.caption {font-size: 2rem;
font-family: Georgia, serif;
color: white;
line-height: 2rem;
padding: 1.5rem 0 !important;
text-align: center;}
#slider
{
background-image: url(http://alessiosrestaurant.ashleywalters.net/wp-content/uploads/2017/10/slider2-2000x561.jpg);
height: 435px;
position: relative;
background-repeat: no-repeat;
background-size: cover;
border-bottom: 40px solid black;
text-align: center;
margin-top: 3px;
}
#slider p
{
font-size: 2vw;
font-family: Georgia, serif;
color: white;
line-height: 1em;
background-color: black;
border-bottom: 0px solid white;
opacity: .9;
padding: .5em;
margin: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#slider img {max-width: 20%; height: auto; margin-top: .5em;}
/* ------------------------*/ /* ---------->>> Footer Styles <<<-----------*/ /* ------------------------*/
footer.footer
{
border-top: 0px solid black;
width: 100%;
background: url(images/tab-bg.svg) repeat-x, url(images/brick.jpg) repeat top left;
background-position: 0 0px, top left;
background-size: 15px 47px, 1587px 397px; padding-top: 57px;
background-color: #63140a;
color: white;
padding: 0rem 0 0 0;
}
/*footer.footer h2:before {content: '\e0c8'; font-family: "Material Icons"; font-size: 2.75rem; vertical-align: inherit;}*/
footer.footer h2 {margin-bottom: 0; vertical-align: middle;
background: url(images/tab-bg.svg) repeat-x black; background-position: 0 0px;
background-size: 15px 47px; padding: 1.5rem 2rem .75rem 2rem; font-size: 2rem; border-bottom: 3px solid #eee; }
footer.footer h3 {font-size: 2rem; font-family: 'Pragati Narrow', sans-serif; margin-bottom: .5rem; letter-spacing: .1rem;}
footer.footer ul+p {
text-align: center;
background-color: black;
outline: 2px solid #eee;
padding: 1.5rem 1rem;
margin-top: -10px;
width: 100%;
font-size: 1.15rem;
color: #eee;
letter-spacing: .05rem;
}
.locations {text-align: left; margin: 0 auto; width: 75%; }
footer.footer ul {text-align: center; margin: 0rem auto 0 auto; padding-top: 0rem; width: 80%;}
footer.footer ul li {display: inline-block; margin: 2rem auto; width: 33%; padding: 1rem 0;
vertical-align: top; line-height: 1.35; text-align: center; }
footer.footer ul li:nth-child(n+2) {border-left: 0px dotted #eee;}
p.location {background: url(images/icon-location.svg); letter-spacing: .05rem;}
p.hours {background: url(images/icon-hours.svg);}
p.phone {background: url(images/icon-phone.svg); padding-bottom: 5px; letter-spacing: .05rem;}
p.location, p.hours, p.phone {background-repeat: no-repeat; background-size: 26px; padding-left: 40px; background-position: 0 4px; margin-bottom: 1rem;}
/* ------------------------*/ /* ---------->>> Responsive Design <<<-----------*/ /* ------------------------*/
/*For large tablets*/
#media screen and (max-width: 1100px) {
.post { padding: 2rem 2rem 1rem 2rem; width: 100%; }
.post h3 {font-size: 3vw;}
#primary {margin: 0 auto 0rem auto; width: 100%; display: block; border: none; border-bottom: 4px solid white;}
#sidebar {width: 100%; display: block; margin: 0 0 3rem 0; padding: 0;}
#sidebar ul {padding: 0 4rem;}
#sidebar ul li {border: none;}
#sidebar ul li:nth-child(n+2) {border-top: 2px dotted #ccc;}
#sidebar h3:first-of-type {display: block; background: url(images/tab-bg.svg) repeat-x black;
background-size: 15px 47px; padding: 2rem 2rem 1rem 2rem;
font-size: 2rem; outline: 4px solid white; color: white; border: none; margin-bottom: 1rem;}
.pagination {padding: 1rem 2rem; }
.main-column {margin: 0 auto; padding: 2rem; width: 40%;}
.two-column {width: 100%;}
.side-column {width: 40%;}
.sole-column {width: 100%; margin: 2.5rem auto; padding: 1rem 3rem 0 3rem;}
.deals {width: 50%; margin: 2rem auto;}
.deals ul {background: none;}
header.header { background-position: 6% 40% ; padding-top: 48px; height: 300px;}
nav {position: relative; display: block; background-color: black; border-bottom: 4px solid white; padding: 1rem 1rem 2rem 1rem; }
nav ul {display: block; padding-right: 0; width: 90%; margin-left: auto; margin-right: auto; text-align: center;}
nav ul li.first {margin-left: 0px; padding-left: 0em; }
nav ul li {text-align: left;}
#slider {height: 300px;}
#slider p {font-size: 2.25vw; padding: .75em; margin-bottom: -1.5em;}
#slider img {margin-top: .5em; max-width: 15%; height: auto;}
#social {position: absolute; top: 95px; right: 5%; }
#social li {margin: 0em 0 0em 1em; width: 50px; }
.divider {background: url(images/tab-bg.svg) repeat-x #f4f4f4;}
h2.browse-menu {background-position: 1rem 1rem, top right; }
#menu { padding: 0em; margin: 10em auto 0 auto; }
h2.tab
{
padding-left: 1.5em;
font-size: 3.5vw;
}
footer.footer ul {width: 100%;}
footer.footer ul li {width: 32%;}
}
/*For all other tablets*/
#media screen and (max-width: 768px) {
.deals {width: 70%; }
.comments {display: none;}
.locations { padding: 0rem 5rem; width: 100%;}
h2.tab {display: block; background: url(images/tab-bg.svg) repeat-x black; background-position: 0 0px; background-size: 15px 47px; padding: 2rem 2rem 1rem 2rem; font-size: 2.25rem;}
.divider {background: none;}
header.header {background: url(images/logo.svg) no-repeat center 40%; background-size: 250px 75px; border-top: 1px solid black; }
nav {font-size: .85em;}
nav ul {display: block; padding-right: 0; padding-left: 0; width: 100%; margin-left: auto; margin-right: auto; text-align: center;}
nav ul li.first {display: none; }
nav ul li { text-align: left; margin-right: 0; padding: 1em 1.5vw; }
nav ul li ul {top: 67px; width: 125px;}
#social {width: 90%; text-align: center; margin: 90px auto 0 auto;}
#social li {outline: 0px solid purple; margin: 0; width: 50px;}
#social li:nth-child(2) {margin: 0em 1.25rem; }
a.arrow {display: none;}
.main-column {width: 100%;}
.sole-column {padding: 0rem 1.5rem 0 1.5rem;}
.side-column {width: 100%; padding: 1rem;}
.deals {width: 100%; margin: 0 auto;}
#menu {margin: -2rem 0 2rem 0;}
p.scaling-thumb {background: none; padding: 0 .5rem;}
#primary {background-color: #f4f4f4;}
#sidebar ul {padding: 0 1rem;}
.post-title-mobile {display: block; border-bottom: 2px dotted #666; padding-bottom: .75rem;}
.post-title-mobile a:hover {color: #940902; }
.post-title {display: none;}
.post p {overflow: initial;}
#browse {background: none; margin: 0; padding: 0;}
h2.browse {background: url(images/icon-menu.svg) no-repeat 1rem center, url(images/tab-bg.svg) repeat-x black;
background-size: 47px 41px, 15px 47px;
display: block;
margin: 0;
padding: 2rem 2rem 2rem 5rem;}
#browse ul li {width: 33.33%; padding: 0; margin-top: -.5rem; }
#browse ul {margin: 0;}
#browse ul li a em {font-size: calc(2vw + .5rem);}
.locations {padding: 2rem 1rem 2rem 2rem; width: 300px;}
footer.footer ul {margin: 0; padding: 0; }
footer.footer ul li {max-width: 100%; width: 100%; border-right: 5vw solid black; border-left: 5vw solid black; background: url(images/left-arrow-bg.png) no-repeat center left;
margin: 0; }
footer.footer ul li:nth-child(n+2) {border-top: 2px dotted #eee; border-right: 5vw solid black; border-left: 5vw solid black;}
footer.footer ul li p {font-size: 1.25rem;}
footer.footer h2 {display: block;}
}
index.php:
<?php
/**
* #package Frank
*/
?>
<?php get_header(); ?>
<?php
echo do_shortcode("[metaslider id=12]");
?>
<div id="content" class="home">
<div class="sole-column">
<h2><span class="nowrap">Good People.</span> <span class="nowrap">Good Food.</span></h2>
<p class="scaling-thumb">
Family-owned and operated, Alessio's Restaurant & Pizzeria has been part of the Metro Atlanta community for over 20 years.
We pride ourselves on serving you the finest pizza, calzones, pasta, and sandwiches this side of the Big Apple.
Our authentic New York style pizza and Italian classics are made from scratch with fresh ingredients and hand-tossed dough.
We served all our food with a smile so come on over and see us soon.
</p>
</div>
<h2 class="browse">Browse Our Menu</h2>
<div id="browse" >
<ul><!-- The li tags below must have no space between them or gaps will appear <img alt="image" src="wp-content/themes/Frank-master/images/pizza-footer.jpg" class="left" />-->
<li class="pizzas"><a href="#" ><em>Pizza</em></a>
</li><li class="pasta"><a href="#" ><em>Pasta</em></a>
</li><li class="entrees"><a href="#" ><em>Entrees</em></a>
</li><li class="subs"><a href="#" ><em>Subs & Paninis</em></a>
</li><li class="soups"><a href="#" ><em>Soups & Salads</em></a>
</li><li class="appetizers"><a href="#" ><em>Appetizers</em></a>
</li>
</ul>
</div>
<div class="two-column">
<div class="main-column deals">
<h2>Hot Deals</h2>
<ul>
<li class="silverware">
<h3>Monday</h3>
$3.00 off a 16" cheese pizza & $5.00 off a pitcher of domestic beer
</li>
<li class="kids">
<h3>Tuesday</h3>
Kids eat free (with one adult purchase of $10 or more)
</li>
<li class="punch">
<h3>Wednesday</h3>
Double punch day
</li>
</ul>
</div>
<div class="side-column">
<div id="menu">
<h2>Download our Menu</h2>
<img src="wp-content/themes/Frank-master/images/download-menu.svg" alt="Icon of a spoon and a folding menu" />
</div>
</div>
</div>
<hr>
<h2 class="tab"> Latest Alessio's News</h2>
<div class="divider">
<div id="primary">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
<article class="post clearfix clear" id="p<?php the_ID(); ?>">
<div class="alignleft thumbdate">
<div class="date">
<em class="day"><?php the_time('d'); ?></em><div class="month-year"><em class="month"><?php the_time('M'); ?></em><em class="year"><?php the_time('Y'); ?></em></div>
</div>
<?php the_post_thumbnail(); ?> </div>
<h2 class="post-title"><?php the_title(); ?></h2>
<section class="post-content clearfix">
<?php the_excerpt(); ?>
</section>
<p class="comments">Comment<img alt="image" src="wp-content/themes/Frank-master/images/icon-comments.svg" height="22" width="32" /></p>
</article>
<?php endwhile; endif; ?>
<?php comments_template(); ?>
<p class="pagination">
<?php global $wp_query;
$big = 999999999; // need an unlikely integer
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages
) );
?>
</p>
</div>
<aside id="sidebar">
<h3 class="widget-title">Recent Posts</h3>
<ul>
<?php $the_query = new WP_Query( 'posts_per_page=10' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<li><div class="sidebardate"><span class="sidebarday"><?php the_time('d'); ?></span><span class="sidebarmonth"><?php the_time('M'); ?></span></div>
<?php the_title(); ?></li>
<?php
endwhile;
wp_reset_postdata();
?>
</ul>
</aside>
</div></div>
<?php get_footer(); ?>
I've only been practicing HTML and CSS for a little over a year. I obviously have a lot to learn. When I started the re-design of my site, I used an available template. I've changed nearly everything except the sidebar. It has the sidebar on the left, and I want it on the right, because I figure it'll look nicer. I've changed the float from left to right for the sidebar. I've changed the float from right to left for the content. This just causes a lot of problems that I can't explain, and I don't know how to fix it. I've toyed with a lot of the css. Please help me understand what I'm doing wrong, and what I'm not thinking of changing that needs to be changed. I've played with this on a fiddle, and here it is with my changes (as you can see, I didn't get anywhere): The Fiddle
Here's my original:
HTML
<body>
<div id="wrapper">
<div id="header">
<!-- end div#logo -->
<div id="menu">
<ul style="
overflow: hidden;
width: 892px;
/* text-align: center; */
margin: 0 auto;
">
<li id="logo"></li>
<li>Home</li>
<li>Games</li>
</ul>
</div>
<!-- end div#menu -->
</div>
<!-- end div#header -->
<div id="page">
<div id="page-bgtop">
<div id="content">
<!-- InstanceBeginEditable name="Page Content" --><div class="post">
<h2 class="title">New Site Update!</h2>
<p class="byline">Posted by Nicholas Maguire</p>
<div class="entry">
<p> This is the editable area.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div><!-- InstanceEndEditable -->
</div>
<!-- end div#content -->
<div id="sidebar">
<ul>
<li id="search">
<h2>Search</h2>
<form method="get" action="">
<fieldset>
<input type="text" id="seach-text" name="s" value="" />
<input type="submit" id="search-submit" value="Search" />
</fieldset>
</form>
</li>
<li>
<h2>Newest Games</h2>
<ul>
<li>ATV Destoyer</li>
<li>Army Driver</li>
<li>Arkanoid</li>
<li>Amazing Football</li>
<li>Alien Vs Predator</li>
<li>Airport Madness</li>
<li>Age of War</li>
</ul>
</li>
<li>
<h2>Contact Me</h2>
<ul>
<li>Contact Form</li>
<li>Requests</li>
</ul>
</li>
</ul>
</div>
<!-- end div#sidebar -->
<div style="clear: both; height: 1px"></div>
</div>
</div>
<!-- end div#page -->
</div>
<!-- end div#wrapper -->
<div id="footer">
<p id="legal">Copyright © 2014 Crazy Block. All Rights Reserved. </p>
<p id="links">Privacy Policy | Terms of Use</p>
</div>
<!-- end div#footer -->
</body>
CSS
{
margin: 0;
padding: 0;
}
body {
background: #E9E9E9;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #757E82;
margin: 0;
}
h1, h2, h3 {
color: #AA2808;
}
h1 {
}
h2 {
}
h3 {
}
p, blockquote, ul, ol {
margin-bottom: 20px;
line-height: 2em;
}
p {
}
blockquote {
}
ul, ol, li {
margin: 0px;
padding: 0px;
list-style: none;
}
a {
text-decoration: underline;
color: #1692ef;
}
a:hover {
text-decoration: none;
color: #165bef;
}
/* Wrapper */
#wrapper {
}
/* Header */
#header{
width: 100%;
height: 91px;
margin: 0;
top: 0;
}
/* Logo */
#logo {
float: left;
width: 270px;
height: 76px;
margin: 0px;
padding: 15px 0px 0px;
margin-left: 27%;
}
#logo h1 {
margin: 0;
padding: 0;
font: normal 36px Georgia, "Times New Roman", Times, serif;
}
#logo h2 {
margin: -2px 0 0 0;
padding: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
font-weight: bold;
color: #444444;
}
#logo h2 a {
color: #9AA9B1;
}
#logo a {
text-decoration: none;
color: #165bef;
}
/* Menu */
#menu {
float: right;
width: 100%;
height: 54px;
margin-top: 0;
background: #ffffff url("/images/menu_bar.jpg") repeat-x left top;
position:fixed;
}
#menu ul {
overflow: hidden;
width: 892px;
margin: 0 auto;
padding: 0 30px;
list-style: none;
line-height: normal;
}
#menu li {
display: inline;
text-align: center;
}
#menu a {
display: block;
float: left;
height: 36px;
padding: 18px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
li#logo {
height: 52px;
width: 52px;
background: url('/images/cb_logo.png') no-repeat;
margin-top: 1px;
margin-right: 1px;
margin-left: 1px;
}
#menu a:hover, #menu .active a {
background: #1687ef;
color: #FFFFFF;
}
/* Search */
#search {
height: 45px;
padding: 0px 0px 40px 0px;
}
#search form {
margin: 0;
padding: 12px 0px 0 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search input {
float: left;
font: 12px Georgia, "Times New Roman", Times, serif;
}
#search-text {
width: 120px;
height: 18px;
padding: 3px 0 0 5px;
border: 1px solid #000000;
color: #000000;
}
#search-submit {
height: 21px;
margin-left: 10px;
padding: 0px 2px;
border: none;
background: #000000;
color: #FFFFFF;
}
/* Page */
#page {
width: 892px;
margin: 0 auto;
}
#page-bgtop {
padding: 0px 30px;
}
/* Content */
#content {
float: right;
width: 564px;
padding-top: 30px;
}
.post {
margin: 0px 0px 30px 0px;
}
.post .title {
margin: 0px;
padding: 0px 0px 5px 0px;
color: #1f201d;
}
.post .title a {
padding: 4px 35px 4px 15px;
background-color: #1535EF;
text-decoration: none;
font-weight: normal;
color: #FFFFFF;
}
.post .entry {
}
.post img {
float: left;
padding: 15px 0px;
}
.post .meta {
text-align: right;
padding-top: 20px;
border-bottom: 1px solid #E5E5E5;
font-weight: bold;
color: #202020;
}
.post .byline {
float: right;
margin-top: -30px;
font-size: 12px;
color: #5E5E5E;
}
/* Sidebar */
#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
position: fixed;
}
#sidebar ul {
margin: 0;
padding: 10px;
list-style: none;
line-height: normal;
}
#sidebar li {
margin-bottom: 1px;
}
#sidebar li ul {
margin: 0px;
padding: 0px 0px 40px 0px;
}
#sidebar li li {
margin: 0;
padding: 9px 0px;
border: none;
background: url(images/img07.jpg) repeat-x left bottom;
}
#sidebar h2 {
margin: 0px;
padding: 0px;
border-bottom: 2px solid #EBEBEB;
font-size: 160%;
font-weight: normal;
color: #454E55;
}
#sidebar h3 {
font-size: 77%;
color: #454E55;
}
#sidebar p {
margin: 0;
line-height: normal;
color: #0038ff;
}
#sidebar a {
border: none;
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Submenu */
#submenu {
}
/* News */
#news {
}
#news a {
font-size: 85%;
}
Try this,
#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
/*position: fixed;*/ //remove it
}
#content {
float: left; // change right to left
width: 564px;
padding-top: 30px;
}
Fiddle
When you used Position attribute in css float attribute won't work. So instead of float used right:0; see below code.
#sidebar {
/* float: left;*/
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
position: fixed;
right:0;
}
#content {
float: left;
width: 564px;
padding-top: 30px;
}
And provide 100% width to inside (p, h2, div) so they wrap inside the #content div.
My code is suppose to make a two-column layout, the header at the top, footer at the bottom, navigation at the left column in between the top and bottom, and finally the main at the right column. The problem is that the main is overlapping with the navigation column.
Here is the CSS for my file:
body { background-color: #000033;
background-image: url(primehorizontal.png);
color: #003300;
font-family: Arial, Helvetica, sans-serif;
margin-left:180px;
padding: 0px 20px 180px 0px;}
header { background-repeat: no-repeat;
height: 100px; }
h1 { white-space: nowrap;
overflow: hidden;}
h2 { color: #003366; }
h3 { padding-top: 10px;
color: #006600; }
nav { float: left;
width: 150px;
font-weight: bold;
font-size: 1.2em; }
nav a { text-decoration: none;
text-align: center;
color: #FFFFCC;
font-weight: bold;
border: 3px outset #CCCCCC;
padding: 5px; }
nav a:link { background-color: #003366; }
nav a:visited{ background-color: #48751A; }
nav a:hover { border: 3px inset #333333; }
nav ul { list-style-type:none;
margin: 0;
padding-left: 0; }
dd { font-style: italic;
font-size: .90em;
height: 200%; }
.contact { font-weight: bold;
font-size: .90em;
font-family: "Times New Roman", sans-serif; }
.floatleft { float: left;
padding: 0 20px 20px 0; }
.clear { clear:left; }
footer { font-size: .60em;
clear:both;
margin-left: 180px;}
img { border-style:none; }
#wrapper { background-color:#FFFFCC;
min-width: 700px;
max-width: 960px;
padding: 0px 0px 20px 30px;
border: 1px ridge blue;
width: 80%;
margin-right: auto;
margin-left: auto;
box-shadow: inset -3px -3px 3px 3px #00332B;}
header, nav, main, footer {display:block;}
Here is one of my html5 files:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="prime.css"/>
<title>Prime Properties :: Financing</title>
</head>
<body>
<div id="wrapper">
<header>
<h1><img src="primelogo.gif" width="650" height="100" alt="Prime Logo"></h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Listings</li>
<li>Financing</li>
<li>Contact</li>
</ul>
</nav>
<main>
<h2>Financing</h2>
<p>We work with many area mortgage and finance companies.</p>
<h3>Morgages FAQs</h3>
<dl>
<dt>What amount of morgage do I qualify for?</dt>
<dd>The total basic monthly housing cost is normally based on 29% to 41% of your gross monthly income<dd>
<dt>Which percentage is most often used?</dt>
<dd>The perecentage used depends on the lending institution and type of financing.</dd>
<dt>How do I get started?</dt>
<dd>Contact us today to help you arrange financing for your home</dd>
</dl>
</main>
<footer>
Copyright © 2014 Prime Properties<br>
Paul Clef Ube
</footer>
add this:
main{
float:left;
width:calc(100% - 150px);
}
I have added the new width (you might want to add a fallback) so the main always fit with your fixed sized nav (plus the padding on the wrapper)
Got the issue worked out. Just played around with your code a bit, thought you may find it useful.
Though calc() is tempting, it's not necessarily the best choice due to compat issues.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background-color: #000033;
background-image: url(primehorizontal.png);
color: #003300;
font-family: Arial, Helvetica, sans-serif;
}
header {
position: relative;
background: #003366 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/worldmap.png) no-repeat center 35%;
height: 100px;
margin-left: -21px;
margin-right: -21px;
overflow: hidden;
}
header img {
position: absolute;
top: 0;
left: 24px;
bottom: 0;
right: auto;
margin: auto;
display: inline-block;
max-width: 140px;
height: 65px;
}
h1 {
padding-left: 55px;
font-size: 25px;
line-height: 100px;
color: white;
}
h2 {
margin-bottom: 5px; color: #003366;
}
h3 {
margin: 2px 0px 6px;
padding-top: 15px;
color: #006600;
}
nav {
float: left;
display: inline-block;
margin: 0;
padding-top: 20px;
width: 150px;
font-size: 1.2em; }
nav a {
display: inline-block;
width: 100%;
text-decoration: none;
text-align: center;
color: #FFFFCC;
font-weight: bold;
border: 3px outset #CCCCCC;
padding: 5px;
margin: 2px 0;
}
nav a:link {
background-color: #003366;
}
nav a:visited {
background-color: #48751A;
}
nav a:hover {
border: 3px inset #333333;
}
nav ul {
list-style-type:none;
}
dt {
}
dd {
display: inline-block;
margin: 4px 0 10px 18px;
line-height: 1.2;
font-style: italic;
font-size: .90em;
height: 200%;
}
dt:first-child {
margin-top: 15px;
}
.contact {
font-weight: bold;
font-size: .90em;
font-family: "Times New Roman", sans-serif;
}
.floatleft {
float: left;
padding: 0 20px 20px 0;
}
.clear {
clear:left;
}
footer {
font-size: .60em;
width: 100%;
clear: both;
}
img {
border-style: none;
}
#wrapper {
background-color: #FFFFCC;
width: 80%;
min-width: 700px;
max-width: 960px;
padding: 30px 20px 15px;
border: 1px ridge blue;
margin: auto;
box-shadow: inset -3px -3px 3px 3px #00332B;
}
main {
padding: 20px 0px 20px 20px;
display: inline-block;
width: 100%;
max-width: 77%;
}
I see you have a class "floatleft", but you never assign it to anything.
Try giving your elements locations. For instance if you wanted something to float left tell it how from from the left it should go. In your CSS you may trying something like this in .floatleft{ float: left; left: 10px}. .floatright{ float: right; right: 10px;}.
I added an Iframe to a page and it pushed my sidebar down. I tried different ways to float it, but I'm still stuck. Any help would be appreciated. Here's the HTML and CSS for the page:
http://lkwalker.com/writing.html
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>LK Walker</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of the text -->
<h1><a href="index.html">Lauren K. Walker
<p><span class="logo_colour"> | Teacher | </span> <span class="logo_colour">Writer | </span></span> <span class="logo_colour">Yogi | </span></a></h1></p>
</div>
</div>
<nav>
<ul class="sf-menu" id="nav">
<li>About</li>
<li>Schedule
<ul>
<li>Retreats</li>
<li>Privates</li>
</ul>
<li>Energy Medicine Yoga</li>
<li>Military</li>
<li>Writing
<ul>
<li>Social Media</li>
<li>Theatre</li>
</ul>
<li>Contact</li>
</nav>
</header>
<div id="site_content">
<div id="top_border"></div>
<ul id="images">
<li><img src="images/lkwalker.jpg" width="600" height="300" alt="LK Walker" /></li>
<li><img src="images/navasana.jpg" width="600" height="300" alt="Navasana" /></li>
<li><img src="images/donna.jpg" width="600" height="300" alt="Donna Eden" /></li>
<li><img src="images/tree.jpg" width="600" height="300" alt="Tree" /></li>
<li><img src="images/raven.jpg" width="600" height="300" alt="Birding" /></li>
<li><img src="images/yogacow.jpg" width="600" height="300" alt="Cow Pose" /></li>
</ul>
<div class="content">
<h1>Articles</h1>
<iframe width="500" height="400" align="left" src ="http://lkwalkerwriting.blogspot.com/" width="500" height="500">
<p>Your browser does not support iframes.</p>
</iframe><br />
<ul>
<li><a href="http://www.nytimes.com/2012/04/15/education/edlife/upward-facing-soldier.html?smid=pl-share"> New York Times -
Upward Facing Soldier </a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/do-you-have-to-be-skinny-to-do-yoga">Mother Nature News -
Do you need to be Skinny to do Yoga?</a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/what-is-energy-medicine-yoga"> Mother Nature News -
What is Energy Medicine Yoga?</a></li>
</ul>
<div id="sidebar_container">
<img class="paperclip" src="images/paperclip.png" alt="paperclip" />
<div class="sidebar">
<h4><p>Check out our newest clothing partner, MahaDevi, use code EMYoga to get a 15% discount.</p>
<p><em>Like us on FaceBook - Follow us on Twitter</em><!-- START SOCIAL MEDIA WIDGET --><ul id="socialbar"><li id="facebook"><a target="_blank" href="htp://www.facebook.com/EnergyMedicineYoga"><IMG src="http://www.topproducerwebsite.com/images/site_defaults/generic/facebook.png"></a></li><li id="twitter"><a target="_blank" href="http://twitter.com/energymedyoga"><IMG src="http://www.topproducerwebsite.com/images/site_defaults/generic/twitter.png"></a></li></ul><style>#socialbar img {border:0px;}#socialbar li img {width:48px; height:48px;}#socialbar li a:hover {position:relative;top:2px;}#socialbar{padding:0px;list-style: none outside none; margin:0px; position: static;}#socialbar li {display:inline;padding-right:2px;}#socialbar{width:180px;text-align:center;}</style><!-- END SOCIAL MEDIA WIDGET --></p>
</div>
</div>
</div>
<footer>
<p>Copyright © Energy Medicine Yoga| Whitefish, MT | Contact Us |</p>
</footer>
</div>
<p> </p>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#images').kwicks({
max : 600,
spacing : 2
});
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>
CSS:
#font-face {
font-family: Jacques Francois, times, serif;
src: url('../fonts/Jacques Francois.otf');
src: local("Jacques Francois"), url('../fonts/Jacques Francois.otf');
}
#font-face {
font-family: lilly, arial, sans-serif;
src: url('../fonts/lilly.ttf');
src: local("lilly"), url('../fonts/lilly.ttf');
}
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
body {
font: normal .80em 'lilly', sans-serif;
background: #cab0cb;
color: #444;
height: 100%;
width: 1000px;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
img {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Jacques Francois', serif;
letter-spacing: 0em;
padding: 0 0 5px 0;
text-align: center;
}
h1, h2, h3 {
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
}
h2 {
font-size: 160%;
padding: 9px 0 5px 0;
color: #04662e;
}
h3 {
font-size: 140%;
padding: 5px 0 0 0;
}
h4, h6 {
color: #615044;
padding: 0 0 5px 0;
font-family: normal 160% 'Jacques Francois', serif;
font: bold 145% times, serif;
}
h5, h6 {
color: #615044;
font: italic 95% times, serif;
letter-spacing: normal;
padding: 0 0 15px 0;
}
a, a:hover {
outline: none;
text-decoration: underline;
color: #B30303;
}
a:hover {
text-decoration: none;
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul {
margin: 2px 0 22px 17px;
clear: both;
}
ul li {
list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: 1.5em;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
#main, nav, #container, #logo, #site_content, footer
{
margin-left: auto;
margin-right: auto;
}
#main {
margin: 5px auto;
width: 940px;
background: transparent;
padding-bottom: 30px;
}
header {
background: transparent;
height: 130px;
}
#logo {
width: 940px;
height: 140px;
background: transparent;
color: #888;
padding: 0;
float: left;
border-bottom: 1px solid #AFABAB;}
#logo h1, #logo h2 {
font-family: normal 320% 'Jacques Francois', times, serif;
border-bottom: 0;
text-transform: none;
margin: 0;
}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
padding: 0;
color: #331d59;
text-decoration: none;
font-size: 48px;
}
#logo_text h1 a .logo_colour {
color: #2c89b3;
}
#logo_text a:hover .logo_colour {
color: #2c89b3;
}
#logo_text h2 {
font-size: 140%;
padding: 0 0 0 0;
color: #04662e;
}
nav {
height: 44px;
float: right;
text-align: center;
margin-left: auto;
margin-right: auto;
width:90%;
padding: 10px 10px;
color: #222;
border-top: 2px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
width: 100%;
}
iframe
{
width: 60%;
clear: both;
}
#site_content {
width: 940px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 0 0 15px 0;
border-bottom: 1px solid #AFABAB;
}
#top_border {
border-top: 1px solid #fff;
padding-top: 20px;}
#sidebar_container {
float: right;
vertical-align: top;
display: inline;
width: 30%;
margin: 0 0 0 0;
}
.sidebar {
float: right;
vertical-align: top;
width: 180px;
margin: 0 0 17px 0;
background: #EFF8FB;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
padding: 0 15px 5px 13px;
}
.sidebar h3, .content h1 {
padding: 0 15px 20px 0;
font: 230% 'Days', arial, sans-serif;
font-style: bold;
text-shadow: #FFF 1px 1px;
margin: 0 1px;
color: #444;
}
.sidebar h3 {
color: #444;
font: 250% 'Lilly', arial, sans-serif;
padding: 0 15px 5px 0;
}
.sidebar ul {
margin: 0 0 15px 0;
}
.sidebar li a, .sidebar li a:hover {
color: #555;
text-decoration: none;
}
.sidebar li a:hover {
text-decoration: underline;
}
.sidebar_item, .content_item {
padding: 15px 0;
}
.paperclip {
position: relative;
z-index: 0;
vertical-align: middle;
margin: -15px 0 -60px -40px;
}
.content {
text-align: left;
width: 670px;
margin: 25px 0 0 0;
float: left;
font-size: 120%;
}
.content ul {
margin: 2px 0 22px 0px;
}
.content ul li, .sidebar ul li {
list-style-type: none;
background: url(../images/bullet.png) no-repeat;
margin: 0 0 0 0;
padding: 0 0 4px 28px;
line-height: 1.5em;
}
footer {
width: 940px;
clear: both;
font: 170% 'Lilly', arial, sans-serif;
height: 30px;
padding: 20px 0 20px 0;
float: left;
text-align: center;
border-top: 10px solid #eeeeee;
}
footer p {
line-height: 1.7em;
padding: 0 0 10px 0;
color: #000;
}
footer a {
color: #000;
text-decoration: 1px 1px #FFF;
}
footer a:hover {
color: #000;
text-shadow: none;
text-decoration: underline;
}
.form_settings {
margin: 15px 0 0 0;
}
.form_settings p {
padding: 0 0 4px 0;
}
.form_settings span {
float: left;
width: 200px;
text-align: left;
}
.form_settings input, .form_settings textarea {
padding: 5px;
width: 299px;
font: 100% arial;
border: 1px solid #D5D5D5;
background: #FFF;
color: #47433F;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
}
.form_settings .submit {
font: 140% 'Days', arial, sans-serif;
border: 0;
width: 99px;
margin: 0 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #ddd; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#fff, #ddd);
background: -o-linear-gradient(#fff, #ddd);
background: -webkit-linear-gradient(#fff, #ddd);
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
border: 1px solid #ddd;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
color: #222;
text-shadow: 1px 1px #FFF;
}
.form_settings textarea, .form_settings select {
font: 100% arial;
width: 299px;
}
.form_settings select {
width: 310px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
.separator {
width: 100%;
height: 0;
border-top: 1px solid #D9D5CF;
border-bottom: 1px solid #FFF;
margin: 0 0 20px 0;
}
table {
margin: 10px 0 30px 0;
}
table tr th, table tr td {
background: #BBB;
color: #FFF;
padding: 7px 4px;
text-align: left;
}
table tr td {
background: #DDD;
color: #444;
border-top: 1px solid #FFF;
}
/* Image Transitions */
ul#images {
margin: 0 15px 10px 0;
padding: 0;
list-style: none;
position: relative;
}
ul#images li {
display: block;
overflow: hidden;
padding: 0;
float: left;
width: 155px;
height: 300px;
}
/**
Stylesheet for SooperFish by www.SooperThemes.com
Author: Jurriaan Roelofs
**/
/* Configuration of menu width */
html body ul.sf-menu ul,html body ul.sf-menu ul li {
width: 200px;
}
html body ul.sf-menu ul ul {
margin: 0 0 0 200px;
}
/* Framework for proper showing/hiding/positioning */
ul.sf-menu,ul.sf-menu * {
margin: 0;
padding: 0;
}
ul.sf-menu {
display: block;
position: relative;
}
ul.sf-menu li {
display: block;
list-style: none;
float: left;
position: relative;
}
ul.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
ul.sf-menu a {
display: block;
position: relative;
}
ul.sf-menu ul {
position: absolute;
width:70%;
top: auto;
}
ul.sf-menu ul a {
zoom: 1; /* IE6/7 fix */
}
ul.sf-menu ul li {
float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
width: 150px;
}
ul.sf-menu ul ul {
top: 0;
margin: 0 0 0 150px;
}
ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul,
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {
left: auto;
}
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {
left: -999999px;
}
/* autoArrows CSS */
span.sf-arrow {
width: 7px;
height: 7px;
position: absolute;
top: 20px;
right: 5px;
display: block;
background: url(../images/arrows-black.png) no-repeat 0 0;
overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
font-size: 1px;
}
ul ul span.sf-arrow {
right: 5px;
top: 20px;
background-position: 0 100%;
}
/* Theming the menu */
ul#nav {
float: left;
}
ul#nav ul {
background: #ddd;
margin-top: 5px;
padding-bottom: 15px;
}
ul#nav li a {
padding: 7px 18px 6px 18px;
font: 150% 'Lilly', arial, sans-serif;
text-decoration: none;
color: #000;
margin-right: 2px;
}
ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus {
color: #000;
text-shadow: 1px 1px #fff;
}
ul#nav ul li a {
color: #000;
}
ul#nav ul li a:hover {
color: #B30303;
margin-right: 2px;
}
/* Image Transitions */
ul#images {
margin: 0 15px 10px 0;
padding: 0;
position: relative;
}
ul#images li {
display: block;
overflow: hidden;
padding: 0;
float: left;
width: 155px;
height: 300px;
list-style: none;
}
#sidebar_container {
float: right;
vertical-align: top;
display: inline;
width: 200px;
margin: 0 0 0 0;
position: relative;
bottom: 536px;
left: 269px;
}
Add these lines to your sidebar_container id and try!!
Also you had added an iframe and this side_bar class in a single main div, and haven't specified their positions.
The issue is because of </div> closing.
Cut and paste the entire sidebar container after closing of </div>
Now
<div id="content">
bla bla bla
<div id="sidebar-container">
bla bla bla
</div> <!-- closing sidebar -->
</div> <!-- closing content -->
Change it to
<div id="content">
bla bla bla
</div> <!-- closing content -->
<div id="sidebar-container">
bla bla bla
</div> <!-- closing sidebar -->
Your issue not with iframe it is causing because of UL
Its taking its space you left content in div like
<div class="left_container">
<!-left content-->
<iframe width="65%" height="400" align="left" src="http://lkwalkerwriting.blogspot.com/">
&lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
</iframe><br>
<ul style="
/* width: 108px; */
/* float: left; */
clear: both;
">
<li><a href="http://www.nytimes.com/2012/04/15/education/edlife/upward-facing-soldier.html?smid=pl-share"> New York Times -
Upward Facing Soldier </a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/do-you-have-to-be-skinny-to-do-yoga">Mother Nature News -
Do you need to be Skinny to do Yoga?</a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/what-is-energy-medicine-yoga"> Mother Nature News -
What is Energy Medicine Yoga?</a></li>
</ul>
</div>
<div class="sidebar_container">
<!--sidebar content-->
</div>
CSS:
.left_container
{
width: 69%;
float: left;
}
remain css is same as yours thanks.
This is a messy fix but should resolve the issue for the moment. If you make these changes in your css it should all line up. I used Firebug on firefox to test it and it worked just fine.
.content {
float: left;
font-size: 120%;
margin: 25px 0 0;
text-align: left;
width: 940px;
}
.content ul {
float: left;
margin: 2px 0 22px;
}
sidebar {
background: none repeat scroll 0 0 #EFF8FB;
border-radius: 7px;
display: inline;
float: right;
margin: -450px 0 17px;
padding: 0 15px 5px 13px;
vertical-align: top;
width: 180px;
}
I would not suggest this is a permanent solution but it should help in the meantime
I am trying to learn how to use templates in Web pages. Thanks to something I found on stackoverflow, I have the basics going. Now I want some control over the formatting. I found an example which looks nice so I thought I would use it to learn something. I'll show 2 images so the problem will be clear:
I don't really care about the form itself. It just serves as an example to learn something. There are a couple of things I would like to control over:
1) Notice in the original that the Company Name is placed nicely with respect to the jpeg image. In my case it is stuck to the left.
2) In the original if I expand the Firefox window the form stays centered and there is white space on both sides. In my case the Primefaces controls take the whole window and they are too high, cutting off part of the jpeg image.
I saw the original uses style.css so I tried to copy and paste different items, but nothing gave me the control I'm looking for. I'll show the only thing in style.css which makes any difference:
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
This is the beginning of the original form
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Xhtml18</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1>Company <span>Name</span></h1>
<p>Nice Slogan Goes Here</p>
</div>
<div id="menu">
<ul>
<li class="current_page_item">Homepage</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>SUPPORT</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
I tried putting in all the inner definitions, but they made no difference. I have my version much simpler
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Master template</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</h:head>
<h:body>
<div id="logo">
<h1>Company <span>Name</span></h1>
<p>Nice Slogan Goes Here</p>
</div>
<ui:insert name="AreaOne">Default text</ui:insert>
</h:body>
</html>
Finally in my xhtml file the crucial step which allows me to do the templating
<h:body>
<ui:composition template="master.xhtml">
<ui:define name="AreaOne">
So that the major point of templating seems to be working, just I need some more control over it. Sorry for the long message but I think I need it all to explain the problem.
EDIT:
I don't know how to add a file per se, so I'll spell it out as code
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #000;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2.8em;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
text-decoration: none;
color: #419725;
}
a:hover {
}
#wrapper {
margin: 0 auto;
padding: 0;
}
/* Header */
#header-wrapper {
height: 234px;
}
#header {
width: 950px;
margin: 0 auto;
padding: 0px 0px 0px 30px;
}
/* Logo */
#logo {
float: left;
width: 500px;
margin: 0px;
padding: 30px 0px 0px 60px;
color: #f7f7f7;
}
#logo h1, #logo p {
}
#logo h1 {
padding: 0px 0px 0px 0px;
letter-spacing: -1px;
font-size: 3.8em;
background: redc;
}
#logo h1 span {
color: #efc527;
}
#logo p {
margin: 0;
padding: 0px 0px 0px 0px;
font-size: 16px;
color: #fff;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #f7f7f7;
}
/* Search */
#search {
float: left;
width: 280px;
height: 40px;
padding: 0px;
}
#search form {
height: 40px;
margin: 0;
padding: 0px 0 0 10px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: 1px solid #DEDEDE;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 22px;
border: none;
background: #e4e4e4;
color: #171d21;
}
/* Menu */
#menu {
float: right;
width: 950px;
height: 50px;
margin: 0 auto;
padding: 0;
}
#menu ul {
float: left;
margin: 0;
padding: 74px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
margin-right: 1px;
padding: 16px 20px 15px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #fff;
border: none;
}
#menu a:hover, #menu .current_page_item a {
background: #131618;
text-decoration: none;
color: #FFFFFF;
}
#menu .current_page_item a {
}
/* Page */
#page {
width: 990px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
background: url(images/img03.jpg) repeat-y left top;
}
#page-bgtop {
padding: 40px 0px 20px 0px;
background: url(images/img02.jpg) no-repeat left top;
}
/* Content */
#content {
float: left;
width: 720px;
padding: 0px 0px 0px 0px;
}
.post {
margin-bottom: 40px;
border-bottom: 1px dotted #E7E2DC;
margin-right: 10px;
}
.post .title {
height: 41px;
padding: 7px 0px 0px 30px;
letter-spacing: -.5px;
}
.post .title a {
border: none;
color: #000;
}
.post .meta {
margin-bottom: 30px;
padding: 0px 30px 0px 30px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
font-style: italic;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 30px 20px 30px;
padding-bottom: 20px;
text-align: justify;
}
.links {
padding-top: 20px;
font-size: 12px;
font-weight: bold;
}
/* Sidebar */
#sidebar {
float: right;
width: 240px;
margin: 0px;
padding: 0px 20px 0px 10px;
color: #fff;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}
#sidebar li li {
line-height: 35px;
border-bottom: 1px dotted #E7E2DC;
margin: 0px 30px;
border-left: none;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar li li a {
padding: 0px 0px 0px 15px;
}
#sidebar h2 {
height: 38px;
padding-left: 30px;
letter-spacing: -.5px;
font-size: 1.8em;
color: #fff;
}
#sidebar p {
margin: 0 0px;
padding: 0px 30px 20px 30px;
text-align: justify;
}
#sidebar a {
border: none;
color: #efc527;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
}
#calendar tbody td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/* Footer */
#footer {
height: 50px;
margin: 0 auto;
padding: 0px 0 30px 0;
font-family: Arial, Helvetica, sans-serif;
border-top: 5px solid #4ac221;
width: 990px;
background: #262626;
}
#footer p {
margin: 0;
padding-top: 40px;
line-height: normal;
font-size: 9px;
text-transform: uppercase;
text-align: center;
color: #fff;
}
#footer a {
color: #fff;
}
Your brackground has the center attribute, that's why you've got your logo on the center and the text is not on it.
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
You can remove the center attribute or you can move the text by doing something like that (just an example!)
<div align="center"><h1>Company <span>Name</span></h1></div>
Then, to stop your primefaces' components to autoresize, you've got to override the default css.
I guess that you're using a PanelGrid, so you can try with
<p:panelGrid columns="2" style="width: 200px !important">....</p:panelGrid>
I'm not sure that !important is required, but basically you've got to give a fixed width to the component to stop it from auto-resizing
EDIT:
If you want to apply your style to every p:panelGrid component, you should consider overriding the whole css class.
Just take a look here to know the css class names of each primefaces component :
http://primefaces.googlecode.com/files/primefaces_users_guide_3_2.pdf