How can I make the content that will change appear on the right side of my navigation bar align with with it but also make sure the navigation bar on the left remains static? Here is my code for my home page and my CSS files:
html {
color: #333;
}
body {
font-family: Arial, Verdana, Garamond;
background: #ccc;
margin: 0;
}
#header {
width: 100%;
height: 230px;
border-bottom: 1px solid #000000;
background: #CCCCCC;
}
#logo {
float: left;
width: 600px;
height: 60px;
margin: 10px;
background#ccc;
}
#top_info {
float: right;
width: 40px;
height: 40px;
background: #CCCCCC;
border: 1px soild #c7c7c7;
margin: 30px;
color: #E00000;
font-size: xx-large;
text-align: center;
}
a {
text-decoration: none;
font-size: x-large;
color: #000000;
}
/*This makes the color Black appear for the available menu options */
a:hover {
background: black;
color: #E00000;
}
/*This makes the color red appear when the user hovers over the available menu options */
#navbar {
height: 20px;
clear: both;
}
/*This makes the navigation bar*/
#navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/*This makes the navigation bar list*/
#navbar ul li {
float: left;
padding: 0 0 0 20px;
clear: both;
}
/*This makes the navigation bar options*/
#right_content {
float: right;
width: 390px;
height: 200px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Manga</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="Mangastyles.css" />
<div id="header">
<div id="logo">
<img src="Manga-logo.png" width="250" height="200" alt="J-Manga" </div>
<div id="top_info">Manga: Japanese Comic Books</div>
<div id="navbar"></div>
<ul>
<li>[ Home ]</li>
<li>[ Form ]</li>
<li>[ Pictures ]</li>
<li>[ Audio ]</li>
<li>[ Video ]</li>
</ul>
<div id="right_content">
<p> Manga are comics created in Japan or by creators in the Japanese language, conforming to a style developed in Japan in the late 19th century. They have a long and complex pre-history in earlier Japanese art.</p>
<p> In Japan, as in other parts of the world, people of all ages read manga. The medium includes works in a broad range of genres some of which include: comedy, business, historical drama, adventure, science fiction and fantasy, and many others.</p>
</div>
</div>
</body>
</html>
Related
When I run my code in the browser, I have this little line of white space at the bottom of the page. I’ve been trying different solutions but can’t seem to find one that works. Below is the home.html page. Maybe someone here can shed some light into the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="cooper, scooper, dog, pop, pick, up>
<meta name="author" content="primarysnail">
<meta name="viewport" content="width=device-width">
<meta name="description" content="connecting clients in need of dog pick pick up srvice with scoopers who will come to the client and scoop the poop">
<title>CoopersScoopers || Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
</head>
<body>
<header> <!-- company name top left; nav bar top right -->
<div class="container">
<div class="branding">
<h1><span>cooper</span>Scoopers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Contact Us</li>
<li>Find a Scooper</li>
</ul>
</nav>
</div>
</header>
<section class="showcase"> <!-- showcase section; button to find scooper (./find.html) -->
<div class="container">
<h1>Leave the</h1>
<br>
<h1>Poo to the</h1>
<br>
<h1>Professionals.</h1>
<button type="button">Connect With a Scooper Today</button>
</div>
</section>
<section class="info-bar"> <!-- info bar; shows scooper process in 3 sections -->
<div class="container">
<div class="box">
<img src="../images/poop.jpg">
<h3>Connect With a Local Scooper</h3>
</div>
<div class="box">
<img src="../images/location.jpg">
<h3>Mark Your Poo</h3>
</div>
<div class="box">
<img src="../images/calendar.jpg">
<h3>Schedule Future Scoops</h3>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h1>Come Experience the Joy of a Poop-Free Life.</h1>
</section>
</body>
<footer>
<p>Copyright © primarySnail//</p>
</footer>
</html>
Here is the linked style.css file:
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
}
/* global */
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
button {
height: 50px;
background-color: #ffff00;
opacity: 0.8;
border: none;
padding-right: 30px;
padding-left: 30px;
float: left;
margin-top: -20px;
float: right;
}
button a {
text-decoration: none;
color: #4b0082;
font-weight: bold;
font-size: 25px;
}
/* header */
header {
padding-top: 30px;
min-height: 70px;
border-bottom: 4px solid #f0e68c;
background-color: #ffffff;
color: #8a2be2;
font-size: 10px;
}
header a {
text-decoration: none;
}
nav a {
color: #8a2be2;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
header span {
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0px 10px 0px 10px;
}
.branding {
float: left;
}
.branding h1 {
margin: 0;
padding: 0px 10px 0px 10px;
border: 4px solid #8a2be2;
}
header nav {
float: right;
margin-top: 10px;
}
header .current {
border: 1px solid #999;
background-color: #8a2be2;
border-collapse: collapse;
}
header .current a {
color: #ffffff;
font-weight: bold;
}
/* showcase */
.showcase {
background-color: #8a2be2;
color: #ffffff;
text-align: left;
min-height: 200px;
border-bottom: 4px solid #f0e68c;
}
.showcase h1 {
font-size: 55px;
margin-top: 0;
margin-bottom: 0;
padding: 0px;
display: inline-block;
}
/* info bar*/
.info-bar {
margin-top: 20px;
border-bottom: 4px solid #f0e68c;
}
.info-bar .box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
.info-bar .box img {
width: 90px;
height: 90px;
}
/* testimonials */
.testimonials {
background-color: #8a2be2;
color: #ffffff;
}
.testimonials h1 {
text-align: center;
}
/* footer */
footer {
background-color: #f0e68c;
margin-top: 0px;
padding: 5px;
text-align: center;
color: black;
opacity: 0.6;
}
I cannot for the life of me figure out why that little line of white space is in there at the very bottom. screenshot
Yes, I have observed white space showing in the bottom. It is because the elements inside body tag is not occupying the full available body size.
elemets heights are as
body- 722
header- 104
.showcase- 251enter code here
.info-bar- 201
.testimonials- ~71
footer- ~62
the white space in the botom is remaining area of viewport. If you make the browser smaller the white space will go away.
To fix this proble you can use below css to the body.
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
/* Add below lines*/
display: flex;
flex-direction: column;
align-items: stretch;
}
I am trying to float my aside element to the right of my main element and for some reason it is too large. I specified the width of the main as 60% and the aside as 39% (because the body element is 99%) but somehow this ratio is just not displayed correctly.
Here is the html and css:
* {
margin: 0;
padding: 0;
}
html {
background: url("/images/sheetmusic.gif") repeat 0 0;
background-size: 30%;
background-attachment: fixed;
background-position: center;
}
body {
font-family: arial, Helvetica, sans-serif;
font-size: 100%;
width: 99%;
max-width: 800px;
margin: 0 auto;
background-color: rgba(255, 248, 228, 0.95);
border: 2px solid #585858;
}
a:link {
color: #e07400;
}
a:visited {
color: gray;
}
a:hover,
a:focus {
font-style: italic;
}
/*====================HEADER========================*/
header img {
float: left;
width: 100%;
max-width: 136.078px;
}
.orange_header {
color: #e07400;
}
header h1 {
margin: 0 auto;
font-size: 200%;
text-shadow: 2px 1px 1px black;
padding-top: 0.7em;
padding-bottom: 0.5em;
}
/*====================NAV MENU========================*/
#nav_menu a {
margin: 0;
border-right: 1px solid silver;
}
#nav_menu a.current {
color: white;
display: block;
background-color: #a78349;
}
#nav_menu ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 34px;
}
#nav_menu>ul>li {
float: left;
width: 20.748125%;
/* 165.985/800*100 */
}
#nav_menu ul li a {
display: block;
text-align: center;
text-decoration: none;
padding: 0.5em 0;
margin: 0;
background-color: #ab6b06;
color: white;
}
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul ul li {
float: none;
}
#nav_menu ul li:hover>ul {
display: block
}
#nav_menu>ul::after {
content: "";
clear: both;
display: block;
}
#lastmenuitem {
border: none;
}
/*====================MAIN========================*/
main {
display: block;
position: relative;
width: 60%;
}
main h2 {
font-size: 150%;
padding-top: 0.5em;
padding-bottom: 0.2em;
padding-left: 1em;
}
strong {
color: #ab6b06;
}
main p {
font-size: 100%;
padding-left: 1.5em;
padding-right: .5em;
padding-bottom: 1em;
}
main ul,
ol {
padding-left: 3em;
padding-right: .5em;
padding-bottom: 1em;
line-height: 1.2em;
}
/*=============ASIDE====================*/
aside {
display: block;
float: right;
width: 39%;
margin-top: 1em;
border-left: 2px solid #ab6b06;
}
aside h3 {
font-size: 120%;
margin-left: 1em;
margin-bottom: 0.2em;
}
aside>p {
padding: 0;
margin-left: 1em;
margin-right: .5em;
word-wrap: break-word;
}
#sittingpic {
padding-left: 2em;
}
blockquote {
margin-left: 1em;
margin-right: .5em;
margin-bottom: 1em;
text-indent: 0;
}
.image {
position: relative;
border: 1px solid #333;
margin: 2%;
margin-left: 1em;
}
.image img {
width: 70%;
max-width: 150px;
}
iframe {
padding-left: 2em;
width: 90%;
max-width: 720px;
}
/*====================FOOTER========================*/
footer {
background-color: #ab6b06;
font-family: georgia, serif;
font-size: 90%;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Annemie's Guitar School | Learn Classical Guitar</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<header>
<img src="images/guitarlogo2.png" alt="Guitar" height="109.93">
<h1 class="orange_header">Annemie's Guitar School</h1>
</header>
<nav id="nav_menu">
<ul>
<li>Home</li>
<li>Useful links</li>
<li>Lessons
<ul>
<li>Sitting position</li>
<li>Reading music</li>
<li>Right Hand Technique</li>
<li>Left Hand Technique</li>
<li>Practising and Memorization</li>
</ul>
</li>
<li>Bio</li>
</ul>
</nav>
<main>
<aside>
<h3>History of the guitar</h3>
<p>In this documentary, Julian Bream walks you through the history of the classical guitar in Spain. He plays pieces that are relevant to the different eras of the guitar. Although the documentary is fairly slow paced - it is worth the watch! <br>
Watch video
</p>
<h3>Anatomy of the guitar</h3>
<img src="images/clas-diagram.jpg" alt="Guitar Diagram" class="image" height="300">
<h3>Quote of the day</h3>
<blockquote>“Sometimes you want to give up the guitar, you’ll hate the guitar. But if you stick with it, you’re gonna be rewarded” ~<cite> Jimi Hendrix</cite></blockquote>
</aside>
<h2 class="orange_header">Classical Guitar</h2>
<p>The guitar is arguably the most popular and versatile instrument in the world. It is used in a variety of different musical styles like rock, blues, folk and pop. <strong>This school focusses on the classical style of playing. </strong> With classical
guitar you use nylon strings and play all the voices (bass, alto, soprano) using a special right hand technique. The guitar becomes a “mini orchestra”.</p>
<h2 class="orange_header">Before you start...</h2>
<p>This school requires you to know a few basics before you can start the lessons. <br>We assume that you can:</p>
<ul>
<li>Tune your guitar</li>
<li>Play chords comfortably</li>
<li>Read tablature</li>
</ul>
<p>If you can‘t do these things - do not worry!<br> We suggest you make use of the “Useful links” page to teach yourself the basics of guitar.</p>
<h2 class="orange_header">The Lessons</h2>
<ol>
<li>Sitting position</li>
<li>Reading music</li>
<li>Right Hand Technique</li>
<li>Left Hand Technique</li>
<li>Practising and Memorization</li>
</ol>
<h2 class="orange_header">About Annemie</h2>
<p>Find out more about the author of this site by going to the Bio page.</p>
</main>
<footer>
<p>©2017, Annemie's Guitar School</p>
</footer>
</body>
</html>
I think you misunderstood the concept of widths. You set the width of main to 60%. This will cover only the 60% of the body tag. You also set the width of aside to 39%, but this element is parent to main. That means that it will cover the 39% of the main container. I don't know if I understood your question (I don't have the reputation right now to ask for more details with comments) so I consider you want something like the following (excuse my bad drawing skills):
click to see the image
I propose to make the following changes:
First create a new div element (I named it main-content) and add the left floating content inside it.
<main>
<aside>
<h3>History of the guitar</h3>
<p>In this documentary, Julian Bream walks you through the history of the classical guitar in Spain. He plays pieces that are relevant to the different eras of the guitar. Although the documentary is fairly slow paced - it is worth the watch! <br>
Watch video
</p>
<h3>Anatomy of the guitar</h3>
<img src="images/clas-diagram.jpg" alt="Guitar Diagram" class="image" height="300">
<h3>Quote of the day</h3>
<blockquote>“Sometimes you want to give up the guitar, you’ll hate the guitar. But if you stick with it, you’re gonna be rewarded” ~<cite> Jimi Hendrix</cite></blockquote>
</aside>
<!-- the newly created div -->
<div id="main-content">
<h2 class="orange_header">Classical Guitar</h2>
<p>The guitar is arguably the most popular and versatile instrument in the world. It is used in a variety of different musical styles like rock, blues, folk and pop. <strong>This school focusses on the classical style of playing. </strong> With classical
guitar you use nylon strings and play all the voices (bass, alto, soprano) using a special right hand technique. The guitar becomes a “mini orchestra”.</p>
<h2 class="orange_header">Before you start...</h2>
<p>This school requires you to know a few basics before you can start the lessons. <br>We assume that you can:</p>
<ul>
<li>Tune your guitar</li>
<li>Play chords comfortably</li>
<li>Read tablature</li>
</ul>
<p>If you can‘t do these things - do not worry!<br> We suggest you make use of the “Useful links” page to teach yourself the basics of guitar.</p>
<h2 class="orange_header">The Lessons</h2>
<ol>
<li>Sitting position</li>
<li>Reading music</li>
<li>Right Hand Technique</li>
<li>Left Hand Technique</li>
<li>Practising and Memorization</li>
</ol>
<h2 class="orange_header">About Annemie</h2>
<p>Find out more about the author of this site by going to the Bio page.</p>
</div>
<!-- new div ends here -->
</main>
Then change your css style to this:
/* we removed the width property to cover the whole page. */
main {
display: block;
position: relative;
}
aside {
display: block;
float: right;
width: 40%; /* this was changed */
margin-top: 1em;
border-left: 2px solid #ab6b06;
}
#main-content {
width: 60%;
}
I'm making a portfolio for some projects I've worked on whilst learning to code. I've added a banner to the top of each project's webpage, but I'm having issues with a site which is unresponsive (Jubilee Austen page).
Using the Chrome Inspector tool, it says the banner is 55px tall, but it appears smaller than it does on another project page (Rogue Pickings page), where the height of the banner is also 55px. How could this be?
Jubilee Austen page
Rogue Pickings page
Does anyone know how I can fix this so that both banners appear the same height?
Thanks so much in advance!
/* ===== JUBILLEE AUSTEN ===== */
font-family: atelas;
src :url('../fonts/atelas/atelas.ttf') format('opentype');
}
/* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
.back {
width: 100%;
background-color: #1D2120;
padding: 10px 0;
position: fixed;
top: 0px;
}
.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
background-image: url('empty.gif');
}
.back-wrap {
width: 90%;
margin: auto;
}
.chevron {
margin: 0;
}
.chevron img {
width: 35px;
float: left;
margin-right: 1.5%;
}
.back-text {
margin: 0 0 0 3%;
font-family: atelas;
font-size: 6em;
color: #e2e2e2;
text-decoration: none;
line-height: 0.8;
display: none;
}
#example {
clear: both;
padding-top: 50px;
}
/* ======== ORIGINAL CSS ======== */
/* -------- START OF ORIGINAL CSS -------- */
body {
font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
height: 600px;
}
/***** GRID *****/
.full-width {
width: 1200px;
margin: 0 auto;
}
.half-width {
width: 600px;
float: left;
}
.third-width {
width: 400px;
float: left;
}
/***** HEADER *****/
header {
height: 800px;
background: url('../img/hero.png');
background-size: cover;
}
header h1 {
padding: 50px 0;
font-family: 'Lora', serif;
font-size: 30px;
color: #BBC085;
padding-left: 80px;
}
#nav {
float: right;
padding: 75px 0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
color: #828282;
padding-left: 80px;
}
header h2 {
width: 1000px;
clear: both;
font-family: 'Lora', serif;
font-size: 72px;
line-height: 80px;
color: #9a9a9a;
padding: 20px 0 0 80px;
}
header h2 span {
color: #262a2b
}
/***** ABOUT *****/
#about .full-width {
padding: 80px 0;
}
#about h2 {
font-family:'Lora', serif;
font-size: 36px;
}
#about p {
font-size: 21px;
color: #7F7F7F;
line-height: 42px;
padding-right: 50px;
}
/***** WORK *****/
#work {
background: #F9CEB7;
text-align: center;
}
#work .full-width {
padding: 115px 0;
}
#work img {
padding-bottom: 30px;
}
#work h3 {
font-size: 24px;
width: 180px;
margin: 0 auto;
}
#work p {
font-family: 'Lora', serif;
font-size: 18px;
line-height: 30px;
color: #262a2b;
padding: 0 35px;
}
/**** CONTACT *****/
#contact {
background: #EBEBEB;
}
#contact .full-width {
padding: 110px 0;
}
#contact img#contact-img {
border: 16px solid #ffffff;
}
#contact h2, #contact #email-header, #contact #socialmedia-header, #contact ul {
padding-left: 115px;
}
#contact #envelope {
padding: 0 10px 0 115px;
}
#contact h2 {
font-family: 'Lora', serif;
font-size: 36px;
}
#contact #email-header{
font-size: 32px;
font-weight: 400;
margin: -30px 0 5px 0;
}
#contact #socialmedia-header {
font-weight: bold;
font-size: 29px;
margin: 40px 0 0px 0;
}
#contact a {
text-decoration: none;
color: #C49075;
font-weight: bold;
font-size: 28px;
}
#contact ul {
list-style: none;
}
#contact ul li {
display: inline-block;
}
#contact ul img {
font-size: 32px;
padding-right: 48px;
}
/* ======== END ORIGINAL CSS ======== */
/* TABLET */
#media all and (min-width: 768px) {
}
#media screen and (min-width: 940px) {
/* -------- PORTFOLIO BANNER CSS -------- */
.chevron img {
width: 30px;
}
.back-text {
font-size: 3em;
}
}
<!doctype html>
<!-- JUBILEE AUSTEN -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Jubilee Austen | Developer</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- FONTS -->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- PORTFOLIO BANNER -->
<section class="back">
<a class="div-link" href="../index.html"><span></span></a>
<div class="back-wrap">
<figure class="chevron">
<img src="../img/chevron-b.png" />
<img src="../img/chevron-g.png" />
<img src="../img/chevron-o.png" />
<img src="../img/chevron-r.png" />
</figure>
<p class="back-text">back</p>
</div>
</section>
<!-- START OF ORIGINAL BODY -->
<div id="example">
<!-- NAV/TITLE PANEL -->
<header>
<div class="full width">
<div class="half-width">
<h1>Jubilee Austen</h1>
</div>
<!-- NAV BAR -->
<div class="half-width" id="nav">
<nav>
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- <span>Hi,</span> used to change colour of just "Hi," text -->
<h2><span>Hi,</span> I'm a developer that loves clean & elegant code.</h2>
</div>
</header>
<main>
<!-- ABOUT PANEL -->
<section id="about">
<div class="full-width">
<h2>A little bit about me.</h2>
<div class="half-width">
<p>I've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism. As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
</div>
<div class="half-width">
<p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
</div>
</div>
</section>
<!-- PROCESS PANEL -->
<section id="work">
<div class="full-width">
<div class="third-width">
<img src="img/icon-html.png" alt="HTML icon"/>
<h3>Hand-Coded HTML</h3>
<p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
</div>
<div class="third-width">
<img src="img/icon-css.png" alt="CSS icon"/>
<h3>Well-Organized CSS</h3>
<p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
</div>
<div class="third-width">
<img src="img/icon-pencil.png" alt="Pencil icon"/>
<h3>Easy Converting PSD to HTML</h3>
<p>You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.</p>
</div>
</div>
</section>
<!-- CONTACT PANEL -->
<footer id="contact">
<div class="full-width">
<div class="half-width">
<img id="contact-img" src="img/contact.png" alt="Person typing at laptop"/>
</div>
<div class="half-width" id="contact-info">
<h2>Like what you see?</h2>
<h3 id="email-header">Let's meet for a cup of coffee.</h3>
<img id="envelope" src="img/icon-envelope.png" alt="mail icon"/>hi#jubileeausten.com
<h4 id="socialmedia-header">Or, find me on the interwebs</h4>
<!-- ICON LINKS -->
<ul>
<li><img src="img/icon-twitter.png" alt="Twitter icon"/></li>
<li><img src="img/icon-tumblr.png" alt="Tumblr icon"/></li>
<li><img src="img/icon-instagram.png" alt="Instagram icon"/></li>
<li><img src="img/icon-linkedin.png" alt="Linkedin icon"/></li>
<li><img src="img/icon-github.png" alt="GitHub icon"/></li>
</ul>
</div>
</div>
</footer>
</main>
<!-- END OF ORIGINAL HTML -->
</div>
</body>
</html>
/* ===== ROGUE PICKINGS ===== */
/* =========================================================================
Author's custom styles
========================================================================== */
#font-face {
font-family: atelas;
src :url('../fonts/atelas/atelas.ttf') format('opentype');
}
/* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
.back {
width: 100%;
background-color: #1D2120;
padding: 10px 0;
position: fixed;
top: 0px;
}
.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
background-image: url('empty.gif');
}
.back-wrap {
width: 90%;
margin: auto;
}
.chevron {
margin: 0;
}
.chevron img {
width: 35px;
float: left;
margin-right: 1.5%;
}
.back-text {
margin: 0 0 0 3%;
font-family: atelas;
font-size: 6em;
color: #e2e2e2;
text-decoration: none;
line-height: 0.8;
display: none;
}
#example {
max-width: 1200px;
margin: auto;
clear: both;
padding-top: 55px;
}
/* ======== ORIGINAL ROGUE PICKINGS CSS ======== */
html {
font-size:16px;
}
body {
/*max-width: 1200px; --- REMOVED FOR PORTFOLIO BANNER --- */
margin: 0 auto;
font-size: 1em;
font-family: Montserrat, Helvetica, Arial, sans-serif;
}
header {
font-size: 1em;
}
.top-section {
font-size: 1em;
}
.bottom-section {
font-size: 1em;
}
footer {
font-size: 1em;
}
header, .top-section, .bottom-section, footer {
max-width: 90%;
}
h1, h3, h4 {
text-transform: uppercase;
}
h1 {
color: black;
font-size: 1.875em;
text-align: center;
width: auto;
padding: 2.45% 0;
}
h3 {
color: black;
font-size: 1.125em;
text-align: center;
padding: 15px;
}
h4 {
color: black;
font-size: 0.75em;
}
.main-title h3 {
text-align: left;
padding: 5px 0px;
text-transform: uppercase;
color:#77a466;
}
/*The widths are in a percentage!*/
header {
width: 100%;
height: 10%;
margin: 0 auto;
}
header .heading {
border-bottom:3px solid #77a466;
height: auto;
}
header span {
color: #77a466;
}
header nav {
padding: 8% 0px;
margin:auto;
}
header nav a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 0.875em;
padding: 0 10px 20px 10px;
color:#77a466;
display: block;
text-align: center;
}
#last-nav {
padding: 0 10px;
}
/*The widths are in a percentage!*/
.top-section, .bottom-section {
width: 100%;
margin: 0 auto;
clear: both;
}
.main-image {
width: 100%;
height: auto;
float: left;
clear: both;
}
.main-image img {
width: 100%;
border-bottom:3px solid #77a466;
border-top: 3px solid #77a466;
}
.main-title {
width: 100%;
height: auto;
float: left;
}
.main-title p {
padding: 0px;
line-height: 156.25%;
font-size: 1em;
}
.section-one, .section-two, .section-three {
width: 100%;
height: auto;
clear: both;
border-top: 1px solid #eee;
}
.section-one h4, .section-two h4, .section-three h4 {
padding: 10px 30px 10px 0px;
}
.menu {
list-style: none;
padding: 0px 30px 0px 0px;
}
.menu li {
padding: 10px 0;
color:#77a466;
}
.reviews {
color: #333;
line-height: 135%;
font-size: 1em;
}
.address {
font-size: 1em;
line-height: 150%;
}
.reviews, .address {
padding: 0px 30px 0px 0px;
}
/*The widths are in a percentage!*/
footer {
width: 100%;
height: 50px;
border-top:3px solid #eee;
margin: 0 auto;
clear: both;
text-align: center;
}
footer span {
font-family: "Wisdom Script", script;
text-transform: lowercase;
color: #77a466;
font-size: 0.875;
}
#media all and (min-width: 600px) and (max-width: 939px) {
header nav {
padding: 3.75% 0px;
}
}
#media screen and (min-width: 940px) {
/* -------- PORTFOLIO BANNER CSS -------- */
.chevron img {
width: 30px;
}
.back-text {
font-size: 3em;
}
#example {
width: 96%;
padding: 40px 2% 0 2%;
}
/* -------- ORIGINAL CSS -------- */
body {
/*width: 96%; --- REMOVED FOR PORTFOLIO BANNER --- */
/*padding: 0 2%; --- REMOVED FOR PORTFOLIO BANNER --- */
}
header, .top-section, .bottom-section, footer {
max-width: 100%;
}
header h1 {
text-align: left;
float: left;
}
header {
height: 100px;
}
header .heading {
border-bottom: none;
}
header nav {
float: right;
width: auto;
padding: 45px 0px;
}
header nav a {
display: inline;
}
.section-one, .section-two {
border-right: 1px solid #eee
}
.section-one h4 {
padding: 10px 0px;
}
.section-two h4, .section-three h4 {
padding: 10px 30px;
}
.menu {
padding: 0px;
}
.reviews, .address {
padding: 0px 30px;
}
.section-one, .section-two, .section-three {
width: 33%;
height: auto;
clear: none;
float: left;
border-top: 1px solid #eee;
}
}
/* -------- END ORIGINAL CSS -------- */
<!doctype html>
<!-- ROGUE PICKINGS -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Rogue Pickings</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- PORTFOLIO BANNER -->
<section class="back">
<a class="div-link" href="../index.html"><span></span></a>
<div class="back-wrap">
<figure class="chevron">
<img src="../img/chevron-b.png" />
<img src="../img/chevron-g.png" />
<img src="../img/chevron-o.png" />
<img src="../img/chevron-r.png" />
</figure>
<p class="back-text">back</p>
</div>
</section>
<!-- START OF ORIGINAL BODY -->
<div id="example">
<!-- MODULE: Logo & Nav -->
<header>
<div class="heading">
<h1><span>rogue</span> pickings</h1>
</div>
<nav>
About
Menu
Locations
Gallery
Reviews
<a id="last-nav" href="#contact">Contact</a>
</nav>
</header>
<!-- MODULE: Top Section -->
<div class="top-section">
<div class="main-image"><img src="img/download.jpg" />
</div>
<div class="main-title" id="about">
<h3>Welcome to our little corner of the internet!</h3>
<p>Welcome to Rogue Pickings, the roaming truck bringing you the freshest ingredients and ideas in food. Our team works hard so you can be sure our ingredients are always fresh and picked carefully. Our menu changes every day and is made with you in mind. We can't wait to come to you! Check out our locations to see where you can find us. </p>
</div>
</div>
<!-- MODULE: Bottom Section -->
<div class="bottom-section">
<div class="section-one" id="menu"><h4>Today's Specials</h4>
<ul class="menu">
<li>Flaming Hummus & Falafel Salad</li>
<li>Sizzling Bean Burrito</li>
<li>Green Gloves Tamales</li>
</ul>
</div>
<div class="section-two" id="reviews"><h4>Our Awesome Reviews</h4>
<p class="reviews">"I got so excited about the yumminess of the falafel salad that I am typing this review as I inhale my lunch. Yes it is that good.... Service was super friendly and quick. Can't wait see you Rogue Pickings again tomorrow!"</p>
</div>
<div class="section-three" id=contact><h4>Contact</h4>
<p class="address">1001 Potrero Avenue<br>
San Francisco, CA 94110<br>
(415) 206-8000 </p>
</div>
</div>
<!-- MODULE: Footer -->
<footer>
<h4>Powered by lots of <span>fresh</span> ingredients.</h4>
</footer>
<!-- END OF ORIGINAL ROGUE PICKINGS HTML -->
</div>
</body>
</html>
i cant remember if zoom level is persistant on an iphone but it is on desktop browsers, could you have zoomed in/out of one of them? is there a way of making sure you are at 100% zoom?
Edit
is the smaller one contained in a set of tags that is smaller than 55px? as that would cause it to be restricted to the smaller size
Your banner is not responsive, its height is fixed (55px). If the site is being displayed differently - different viewport zoom, your banner will seems to be smaller/larger.
Check the viewport meta tag in those sites:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If the initial-scale is different or if one of the pages is missing the viewport tag it can explain the differences.
As mentioned before, the zoom affects the presented width and this affects the visual size of your banner. If you want it to be responsive, you should change the height units into percentage instead of pixels.
EDIT
The first page is much wider than the second, when you zoom out to see all the page it changes the visual height of your banner.
In my CSS, the redbar.png image is going higher than it needs to be (located in #container). It's going over my horizontal nav and shouldn't be and I'm bot entirely sure how to get it to go away.. Any tips would be greatly appreciated!
Here is the website with the issue : http://cit.macc.edu/~nduncan/tut4/case2/redball.htm
Here is my HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Red Ball Pizza</title>
<script src="modernizr-1.5.js"></script>
<link href="pizza.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<header><img src="rblogo.png" alt="Red Ball Pizza" /></header>
<nav class="horizontal">
<ul>
<li>Home</li>
<li>Menu</li>
<li>Locations</li>
<li>Catering</li>
<li>About Us</li>
</ul>
</nav>
<nav class="vertical">
<ul>
<li>Pizza</li>
<li>Salad</li>
<li>Pasta</li>
<li>Sandwiches</li>
<li>Appetizers</li>
<li>Pocket Pizzas</li>
<li>Fish & Shrimp</li>
<li>Chicken & Wings</li>
<li>Beverages</li>
<li>Dessert</li>
<li>Catering</li>
<li>Download Menu</li>
<li>Catering Menu</li>
</ul>
</nav>
<section id="main">
<img src="toppings.png" alt="" />
<p>At Red Ball Pizza, we want to satisfy every appetite. That's
why our menu contains a variety of different items. With
so many choices, everyone's favorites are available!
</p>
<p>
Red Ball Pizza is NOT a franchise, a chain, or a corporation.
It is 100% locally owned and operated. Red Ball Pizza is
devoted to providing the highest quality and the best service
possible. Our only goal is to provide you with a great
pizza … EVERY TIME!
</p>
<div class="coupon">
<h1>Classic Combo</h1>
<p>16" 1-Topping Pizza
& a 2-Liter of Your Choice
For Only $14.99
</p>
<p>Expires 3/14</p>
</div>
<div class="coupon">
<h1>Pizza & Stix</h1>
<p>16" Specialty Pizza
Reg. Cheese Stix & a 2-Liter
For Only $21.99
</p>
<p>Expires 3/14</p>
</div>
<div class="coupon">
<h1>1/2 Price</h1>
<p>Buy any 16" Specialty Pizza
at Reg. Price & Get a 2nd
Pizza For Half Price
</p>
<p>Expires 3/14</p>
</div>
<div class="coupon">
<h1>Pizza & Wings</h1>
<p>14" 2-Topping Pizza
& 12 Wings
For Only $15.99
</p>
<p>Expires 3/31</p>
</div>
<div class="coupon">
<h1>$3.00 Off</h1>
<p>Get $3.00 Off
any 16" Pizza at
Menu Price
</p>
<p>Expires 3/31</p>
</div>
<div class="coupon">
<h1>Sub Dinner</h1>
<p>1 Toasted Sub & Chips
& 1 20oz Soda
For Only $6.99
</p>
<p>Expires 3/31</p>
</div>
</section>
<aside>
<h1>Pizza Pizzazz</h1>
<ul>
<li>93% of Americans eat pizza at least once a month.</li>
<li>Mozzarella was originally made from the milk of Indian
water buffalo in the 7th century.</li>
<li>75 acres of cheese is eaten every day.</li>
<li>23 pounds of cheese is eaten every year by the average
person.</li>
<li>The tomato was brought back to Italy by Spaniards returning
from Mexico in the 16th century.</li>
<li>The busiest night for take-out pizza orders is Halloween.</li>
<li>The first pizzeria opened in 1830 in Naples, Italy. </li>
</ul>
</aside>
<footer>
<address>
Red Ball Pizza •
811 Beach Drive •
Ormond Beach, FL 32175 •
(386) 555 - 7499
</address>
</footer>
</div>
</body>
</html>
And here is my CSS. Problem lies in #container.
header, section, aside, footer, nav {
display: block;
}
/* body styles */
body {
background-color: red;
font-family: Verdana, Geneva, sans-serif;
padding: 0px;
margin: 0px;
}
#container {
width: 1000px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
border-left: 1px solid black;
border-right: 1px solid black;
background: white url(redbar.png) top left repeat-y;
}
#container header {
background-color: white;
height: 100px;
}
#container nav.horizontal {
height: 70px;
width: 100%;
background-color: white;
}
#container nav.horizontal ul li{
background-color: white;
font-size: 16px;
height: 50px;
line-height: 50px;
width: 180px;
display: block;
float: left;
margin-left: 5px;
margin-right: 5px;
text-align: center;
}
#container nav.horizontal ul li a{
display: block;
background-color: red;
color: white;
text-decoration: none;
border-radius: 30px / 25px;
}
#container nav.horizontal ul li a:hover {
background-color: rgb(255,101,101);
color: black;
}
#container nav.vertical {
float: left;
clear: left;
width: 200px;
}
#container nav.vertical ul li {
list-style-type: none;
text-indent: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
#container nav.vertical ul li a {
color: white;
text-decoration: none;
}
#container nav.vertical ul li a:hover {
color: black;
}
#main {
background-color: rgb(255,211,211);
float: left;
width: 600px;
}
#main p {
font-size: 20px;
margin: 15px;
}
#main img{
float: right;
margin: 15px;
width: 350px;
border-bottom-left-radius: 350px;
}
#main div.coupon {
border: 5px dashed black;
float: left;
width: 170px;
height: 150px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
background-image: url(slice.png), url(notice.png);
background-position: center, bottom right;
background-repeat: no-repeat;
background-color: white;
}
#main div.coupon h1 {
color: white;
background-color: rgb(192,0,0);
font-size: 16px;
letter-spacing: 2px;
text-align: center;
height: 25px;
font-variant: small-caps;
}
#main div.coupon p{
font-size: 14px;
text-align: center;
margin: 5px;
}
aside {
float: left;
width: 200px;
}
aside h1 {
color: rgb(192,0,0);
font-size: 20px;
letter-spacing: 2px;
font-weight: normal;
text-align: center;
}
aside ul li {
background-color: rgb(255,135,135);
border-radius: 5px;
color: black;
list-style-type: none;
margin: 10px;
padding: 5px;
}
footer {
margin-left: 200px;
clear: left;
}
footer address {
border-top: 1px solid red;
color: red;
font-size: 10px;
font-style: normal;
text-align: center;
margin-top: 25px;
padding-bottom: 20px;
}
#container nav.horizontal {
margin-top: -16px;
}
Add this to CSS.
Ok, here we go, just because I love you. I think the problem you describe is being caused by the ul element inside of your horizontal class div. By default browsers will give uls padding/margin. All I had to do to fix this was set .horizontal ul {margin:0; padding: 0;}.
you could clear the nav by adding the following
container nav.horizontal {
...
overflow: auto;
then you probably want to add the appropriate margin / padding such as margin-bottom: 16px to get inline with the margin on the ul.
Also, you should look into css resets. I didn't see any here and they'll make you life easier.
As I am transitioning from using template layouts to writing my own css scripts, I have run into many issues, but there's one preventing me from continuing. I have successfully created a 3 column layout with floating divs, however upon browser re-size the right column overlays the middle div. I have imported the script found on Div sections shifts when i resize the window with no success. Basically I want the layout to behave like the current one, at http://www.allstarselectric.com , but using %. I am using % for cross resolution support, so is there a workaround/solution, or are pixels absolutely necessary? Any help would be greatly appreciated.
CSS:
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
color: #666;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background-color: #4a4d51;
background-image: url(images/templatemo_body.jpg);
background-repeat: repeat-x;
background-position: top
}
.content{
position: fixed;
width: 100%;
height: 100%;
background-image: url(images/templatemo_body.jpg);
}
.contentbody{
float: left;
width: 70%;
height: 100%;
}
.wrapper {
width:100%
}
.sidebar{
float: left;
width: 15%;
height: 100%;
border: 0px solid #BBB;
background-color:#dddddd;
}
.sidebar li{
list-style-type:none;
margin:0;
padding:0;
}
.sidebar2{
float: left;
width: 15%;
height: 100%;
border: 0px solid #BBB;
background-color:#dddddd;
}
.sidebar2 li{
list-style-type:none;
text-align: center;
margin:0;
padding:0;
}
.chromestyle{
width: 100%;
font-weight: bold;
}
.chromestyle:after{ /*Adds margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*Affects the background/menustyle*/
.chromestyle ul{
border: 0px solid #BBB;
width: 730px;
height: 45px;
background: url(imgs/navm.jpg) center center no-repeat; /*THEME CHANGE HERE*/
padding: 0 15px;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
/*Affects menu text*/
.chromestyle ul li a{
float: left;
display: block;
color: #000;
padding: 8px 20px;
margin: 0 1px 0 0;
text-decoration: none;
border: none;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
color: #fff;
background: #ff0011
center center repeat-x; /*THEME CHANGE HERE*/
}
.current { color: #fff; background: ; }
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: #d5a30b;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}
HTML:
<html>
<head>
<title>Allstars Electric</title>
<meta name="keywords" content="electricians," />
<meta name="description" content="Electrical Contractor DFW" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/drop.js">
</script>
<style type="text/css">
<!--
.style2 {color: #FFFF00}
.style3 {
font-size: 36px
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function JumpToIt(list) {
var newPage = list.options[list.selectedIndex].value
if (newPage != "None") {
location.href=newPage
}
}
//-->
</SCRIPT>
</head>
<body>
<div class="wrapper">
<div class="sidebar" id="sidebar"><li>home</li></div>
<div class="contentbody">
<center>
<div class="chromestyle" id="chromemenu">
<ul>
<li>Home</li>
<li>Special Offers</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
<li>Themes</li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
1
2
3
4
5
</div>
<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
Electrical
Heating & Air Conditioning
</div>
<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
Dark
Light
</div>
<!-- Dropdown End -->
<br><tr>text/other</br></tr>
</center>
</body>
</div>
</div>
<div class="sidebar2" id="sidebar2"><li>Home</li>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
</div>
</body>
</html>
In your CSS, you have a fixed width set for .chromestyle ul. Change that width to a %, and that should fix your problem.
The first answer to the article you linked provides you with the most reasonable solution: "You can wrap around the two divs with another div of a minimum width you want the page to be viewed in." There isn't much point in trying to fit a page to a 320x240 browser; scroll bars can't be avoided in that kind of resolution.
Something like this
.foowrap { min-width: 550px; width: 100%; overflow:auto; }
.foo { width:30%; float:left; }
<div class="foowrap">
<div class="foo">bar</div>
<div class="foo">baz</div>
<div class="foo">bum</div>
</div>
Then make sure that the total minimum width of the divs inside (class foo in the example) is not more than the min-width you set. Watch out for borders especially.
By the way, you have two </body> and you're using <center>, both of which are things you should avoid. This bit doesn't make much sense either: <br><tr>text/other</br></tr>