I am EXTREMELY new to CSS and HTML (beginners course at uni) so I'm not sure if this is a super basic issue or not.
I'm using CODA 2 on a mac.
I have 5 HTML pages and a separate stylesheet.css.
In Coda preview the CSS works on the HTML pages. If I manually save the .css the HTML pages don't display any CSS. If I slightly edit anything on the .CSS the HTML pages refresh in preview and display the CSS again.
If I open my HTML pages in the browser (chrome/firefox) they are displayed without any css.
The correct links to the .CSS page are on all my HTML pages (under the title).
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="ms.css" />
Any help would be MUCH appreciated as time is ticking away and I am completely lost.
Cheers
EDIT*
All the files are located within the same folder.
CSS code
`#charset "utf-8";
/* CSS Document */
header {
a:link color:white;
a:visited {color:white;
font-family: sans-serif;
background-color: #004292;
width: 640px;
}
header nav a {
color: white;
text-decoration: none;
font-family: sans-serif;
}
header > h1 > a {
color: white;
text-decoration: none;
font-family: fantasy;
font-size: large;
}
header nav a:hover {
background-color:white;
color: #004292;
border: 1px solid white;
}
body {
width: 1080px;
background-color: #004292;
padding-left: 0px;
border-bottom-left-radius: 0px;
}
nav > ul {
width 1080px;
}
nav > ul > li {
display: inline;
float: right;
}
nav > ul > li > a {
float: right;
padding: 0 15px;
transition: background-color 0.5s, border-color 1s;
}
.onion {
background-color: #004292;
font-family: sans-serif;
color: white;
float: left;
width: 640px;
margin-left: auto;
margin-right: right;
padding-top: 100px;
}
section {
background-color: #004292;
font-family: Arial, sans-serif;
color: white;
float: left;
width: 640px;
}
.lcol {
width: 100px;
float: left;
}
.lcol img {
width 200px;
}
.rcol {
width: 100px;
float: right;
}
.rcol img {
width 200px;
}
#wrap {
width: 640px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
font-family: Arial, sans-serif;
color: white;
float: left;
}
#beef img{
width: 512px;
height: 306px;
background-image: url(kingswood_text.jpg);
background-position: 0 0;
}
#beef img:hover {
background-position: 0 100%;
opacity: 0.1;
}
#wrap img:hover {
opacity: 0.1;
background-position: 0 0;
}
#wrap img {
margin: 10px;
border:2px solid white;
width: 512px;
height: 306px;
background-image: url(kingswood_text.jpg) bottom;
}
#yelp {
background-color: white;
color: white;
width: 1080px;
margin-top: 100px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
border-bottom-left-radius: 0px;
float: left
}
#yelp img {
margin-left: auto;
margin-right: auto;
}
footer {
width: 640px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
color: white;
background-color: #004292;
font-family: Arial, sans-serif;
clear: both;
display: block;
padding-top: 100px;
padding-left: 50px;
}
HTML for the index.html page.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>GTM Canberra</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="ms.css" />
</head>
<body>
<!-- Header -->
<header>
<div id="corn"
<h1>GTM </h1>
<nav>
<!-- nav links -->
<ul>
<li>About</li>
<li>FAQ</li>
<li>Event Info</li>
<li>Getting There</li>
<li>Lineup</li>
</ul>
</nav>
</div>
</header>
<!-- Logo/Image/PageID -->
<div id="yelp"
<section>
<img src="images/logo.jpg" alt="logo" width="647" height="358">
</section>
</div>
<!-- Content -->
<div id="wrap"
<section>
<div class="rcol">
<a id="beef">
<a href="lineup.html"><img src="images/steptones.jpg" alt="steptones" >
</a>
<a href="lineup.html"><img src="images/stone.jpg" alt="stone" >
</div>
<div class="lcol">
<a href="lineup.html"><img src="images/north.jpg" alt="north" >
<a href="lineup.html"><img src="images/kingswood.jpg" alt="kingswood" >
</div>
</section>
</div>
<!--Footer -->
<footer>
<p> Presented by Cattleyard Promotions and supported by triple j and Channel V </p>
</footer>
</body>
</html>
You have to close your opening div tags, from this
<div id="corn"
to this
<div id="corn">
Same with <div id="yelp"and <div id="wrap"
Also in your css you forgot to put colons in some parts, like
.lcol img {
width 200px;
}
instead of
.lcol img {
width: 200px;
}
In new projects, it's better to start with as little code as you can in both the HTML and CSS files (and js files too) just to see that all files are linked together.
Edit:
a:visited {color:white
In the CSS file, can you please remove the first line or at least remove the accent before #charset "utf-8";
`#charset "utf-8";
Related
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
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.
I'm just getting started on HTML5 and CSS3 (working through The Odin Project) and the first project is to duplicate the Google homepage. I was able to get everything set up, but it seems like my CSS is somehow preventing my header links from acting like links. You can't click on them and the hover effects don't work.
They work fine on my footer and my nav text-decoration is applied, so I'm not sure what's making it act like it's not a link. I've only tested it in Chrome, so I'm not even worried about compatability issues yet. Am I doing the HTML5 wrong? Or is it some kind of weird rule like you can't use hover effects with inline-block or something? I'm not familiar enough with it yet to have learned all those nuances yet...
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li>+Mara</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="images/options.png" width="35px"></li>
<li><img src="images/bell.png" width="35px"></li>
<li><img src="images/plus.png" width="35px"></li>
<li><img src="images/photo.jpg" width="40px" class="rounded_img"></li>
</ul>
</nav>
<div class="container">
<img class="logo" src="https://www.google.com/images/srpr/logo11w.png" width="320px"/>
<center><form action="#" method="post" name="google_search_form">
<input type="search" name="googlesearch" class="search"><br/><br/>
<input type="submit" value="Google Search" class="button">
<input type="submit" value="I'm Feeling Lucky" class="button">
</form></center>
</div> <!--End container-->
<footer>
<ul>
<span class="left"><li>Advertising</li></span>
<span class="left"><li>Business</li></span>
<span class="left"><li>About</li></span>
<span class="right"><li>Settings</li></span>
<span class="right"><li>Terms</li></span>
<span class="right"><li>Privacy</li></span>
</ul>
</footer>
</body>
</html>
And the CSS:
.container{
position: relative;
vertical-align: middle;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 270px;
clear: right;
}
.search {
width: 650px;
height: 35px;
margin-top: 40px;
font-size: 27px;
background: url('images/voice.gif') 97% 50% no-repeat;
opacity:0.6;
background-size: 17px;
border: blue solid 1px;
}
.button {
font-family: Helvetica, Roboto, sans-serif;
font-weight: bold;
color: black;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
border-radius: 2px;
width: 140px;
height: 40px;
}
nav {
width: 600px;
height: 30px;
font-size: 1em;
font-family: Helvetica, Roboto, sans-serif;
font-weight: lighter;
text-align: center;
position: relative;
float: right;
}
nav ul {
height: auto;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
padding: 10px;
vertical-align: middle;
}
.atext {
text-decoration: none;
color: black;
}
.atext: hover {
text-decoration: underline;
background-color: yellow;
}
.aicon {
opacity: 0.6;
}
.aicon:hover {
opacity: 1.0;
}
footer {
width: 102%;
height: 40px;
left: -20px;
right: -20px;
font-size: 1em;
font-family: Arial, sans-serif;
position: absolute;
bottom: 0;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
}
footer ul {
height: auto;
padding: 0;
margin: 0;
}
footer li {
display: table-cell;
padding: 10px;
vertical-align: middle;
}
footer li a {
text-decoration: none;
color: gray;
}
.left {
float: left;
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
.rounded_img {
border-radius: 20px;
}
Any help will be greatly appreciated. Thanks!
Oh, and I haven't even started on JavaScript yet, so I'd like to avoid JavaScript if possible!
Here is a fiddle: http://jsfiddle.net/Lvfmwhvu/
The problem is your container element, if you remove the position relative it will work, but not sure if it will be maintained in the same position, but you can check it and modify your css accordingly:
.container{
vertical-align: middle;
}
Hope this helps.
Your main container isn't clearing the floated navbar. Because it falls later in your document, it has a higher layer index and covers the navbar. Try this:
.container {
...
clear: both;
}
Demo
So I'm just having some fun with HTML and CSS, and I was trying to overlay some text over an image.
The way I was taught was to give the image a div all for itself, and set it as the background image. Then you could type right over it.
However, I want the background-image of the div to comply to some CSS I already wrote, telling the image to scale to the page's width.
Is there a way of applying CSS to the 's background image? Or should I choose another route?
Thanks in advance,
Rain
Code:
body {
background-color: #d0d0d5;
}
#pageWrapper {
margin-left: -10px;
margin-top: -15px;
margin-right: -200px;
background-color: #9b9a9d;
height: 1500px;
width: 100%;
}
#header {
font-family: Lato;
font-weight: bold;
background-color: #ffffff;
height: 70px;
width: 100%;
border-bottom: 2px solid #E8E8F0;
}
.links {
list-style-type: none;
font-size: 14px;
color: #000;
}
.linkLeft {
float: left;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-right: 20px;
color: #000;
text-transform: uppercase;
}
.linkRight {
float: right;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-left: 20px;
color: #000;
text-transform: uppercase;
}
#link5 {
padding-right: 40px;
}
#imageWrapper {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#jumbotron {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
background-image: url(img/Canadian-Rockies-Mountains.jpg);
}
<!DOCTYPE html>
<html lang=en>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href="main.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="pageWrapper">
<div id="header">
<ul class="links"><li>Home</li>
<li>Browse</li>
<li>Help</li>
<li>Log In</li>
<li>Sign Up</li></ul>
</div> <!--header END-->
<div id="imageWrapper">
<!--<div id="imageText">
<h1>Discover the Canadian Rockies.</h1>
<p>Book a trip to Canada today, guy.</p>
</div>-->
<div id="jumbotron"></div>
<!--Original code used to place image before I wanted text overlay follows-->
<!--<img id="jumbotron"src="img/Canadian-Rockies-Mountains.jpg" />-->
</div>
</div> <!--pageWrapper END-->
</body>
</html>
Look here:
http://www.w3schools.com/css/css3_backgrounds.asp
http://www.w3schools.com/css/css_background.asp
These properties (like background-size) will be in relation to the div who has the background-image set. To make the div itself fill its parent, set width: 100% in the div's class
simple example to apply css for image inside div
CSS
.header-shadow{
background-image: url('../images/header-shade.jpg');
background-color:red;
height:50px;
}
JsFiddle
you can try something like this:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url("http://www.w3schools.com/cssref/paper.gif");
width: 100%;
}
</style>
</head>
<body>
<div>
<h1>Hello World!</h1>
</div>
</body>
</html>
If I'm reading your question properly, background-size: cover will force the image to expand the way you want. I've modified your code, is this the effect you're looking for?
body {
background-color: #d0d0d5;
}
#pageWrapper {
margin-left: -10px;
margin-top: -15px;
margin-right: -200px;
background-color: #9b9a9d;
height: 1500px;
width: 100%;
}
#header {
font-family: Lato;
font-weight: bold;
background-color: #ffffff;
height: 70px;
width: 100%;
border-bottom: 2px solid #E8E8F0;
}
.links {
list-style-type: none;
font-size: 14px;
color: #000;
}
.linkLeft {
float: left;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-right: 20px;
color: #000;
text-transform: uppercase;
}
.linkRight {
float: right;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-left: 20px;
color: #000;
text-transform: uppercase;
}
#link5 {
padding-right: 40px;
}
#imageWrapper {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
background-image: url(http://placekitten.com/g/200/300);
background-size: cover;
height: 200px;
}
<!DOCTYPE html>
<html lang=en>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href="main.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="pageWrapper">
<div id="header">
<ul class="links"><li>Home</li>
<li>Browse</li>
<li>Help</li>
<li>Log In</li>
<li>Sign Up</li></ul>
</div> <!--header END-->
<div id="imageWrapper">
<div id="imageText">
<h1>Discover the Canadian Rockies.</h1>
<p>Book a trip to Canada today, guy.</p>
</div>
</div>
</div> <!--pageWrapper END-->
</body>
</html>
This is how you cover a complete screen and make it adapt to screen size.
html, body {
position:relative;
height: 100%;
background:url('yoururl')no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here is what it looks like:
If I remove the image, the text centers perfectly:
#A.B
I mean, it worked... Sort of.
I am having some problems with the image pushing the title to the right, as you can see, it's not exactly centred.
HTML:
<!doctype html>
<head>
<meta charset="UTF-8">
<meta name"description" content"Mobile Cat Grooming Service">
<meta name"keywords" content"Cat, Grooming, Service, Colchester">
<meta name"author" content"Jordan Downs">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="master.css"/>
<script type="text/javascript">
function changeFontSize(element, step) {
var el = document.getElementById(element);
var curFont = parseInt(window.getComputedStyle(el).fontSize, 10);
el.style.fontSize = (curFont + step) + 'px';
}
</script>
<script>
function changecolor(code) {
document.body.style.backgroundColor=code
}
</script>
</head>
<h2>
<center>
<button type="button" onClick="changeFontSize('content', 2);">A+</button>
<button type="button" onClick="changeFontSize('content', -2);">A-</button>
<script language="javascript" type="text/javascript"></script>
<form>
<input type="button" name="Button1" value="Default" onclick="changecolor('white')">
<input type="button" name="Button1" value="Scheme 1" onclick="changecolor('#FE2EF7')">
<input type="button" name="Button1" value="Scheme 2" onclick="changecolor('#FA58D0')">
<input type="button" name="Button1" value="Scheme 3" onclick="changecolor('#B404AE')">
</form>
</center>
</h2>
<body>
<div id="page">
<header>
<img src="Images/catlogo.jpg" alt= "logo"/>
<h1><center>Mobile Cat Grooming Service</center></h1>
</header>
<nav>
<ul>
<li><a alt="Home button" href="index.html">Home</a></li>
<li><a alt="History page button" href="history.html">History</a></li>
<li><a alt="Appointment page button" href="appointments.html">Appointments</a></li>
<li><a alt="Contact us page button" href="contactus.html">Contact us</a></li>
</ul>
</nav>
</head>
CSS:
body {
font-family: arial, helvetica, sans-serif;
line-height: 1.8em;
zoom: 150%;
}
#page {
margin:2% auto;
width: 100%;
overflow: hidden;
}
header {
float: left;
clear: both;
width: 96%;
color: #fff;
background-color: #660066;
padding: 1%;
margin-left: 1%;
}
header img {
float: left;
width: 12%;
height: 12%;
background: #660066;
}
h2 {
float: left;
margin-bottom: -1%;
width: 96%;
color: #fff;
background-color: #660066;
padding: 1%;
margin-left: 1%;
border-bottom: 2px solid;
border-color: #Cc3399;
}
nav {
font-family: "Times New Roman";
position: relative;
margin: auto;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
text-decoration: none;
padding: 5px 0;
width: 100px;
background: #Cc3399;
color: #eee;
float: left;
text-align: center;
border-left: 1px solid #fff;
}
nav ul li a:hover {
background: #660066;
color: #fff;
}
I suspect there is something we're not seeing as your existing code seems to be fine although I have removed the center tag which has been deprecated and substituted text-align:center.
If it still doesn't center in your FULL HTML, then we need to examine the remainder of the code.
header {
float: left;
clear: both;
width: 96%;
color: #fff;
background-color: #660066;
padding: 1%;
margin-left: 1%;
}
header img {
float: left;
width: 12%;
height: 12%;
background: #660066;
}
header h1 {
text-align: center;
}
<header>
<img src="http://placekitten.com/g/200/300" alt= "logo"/>
<h1>Mobile Cat Grooming Service</h1>
</header>
try this
header {
float: left;
clear: both;
width: 96%;
color: #fff;
background-color: #660066;
padding: 1%;
margin-left: 1%;
position:relative;
}
header img {
width: 12%;
height: 12%;
background: #660066;
position:absolute;
left:0;
top:0;
}
There are a few different ways to do this, you could use position:absolute; in your image or a more extendable way would be something like this:
<header>
<img src="Images/catlogo.jpg" alt= "logo"/>
<h1 class="centerTitle">Mobile Cat Grooming Service</h1>
</header>
css:
centerTitle {
width: 100%;
text-align: center;
margin-left: -12%;
}
I'm not sure how you want your image aligned compared to the page and/or the header but the reason the image is pushing your h1 over is because it is being floated and therefore taken out of the normal document flow. The h1 lines itself up as if the floated image wasn't there. The reason the h1 is shift over is that the space it takes up is still respected even though it is taken out of the normal document flow.
I can make further suggestions once I know the desired layout.
EDIT 1
I would probably use absolute positioning to solve this.
<header>
<img src="http://lorempixel.com/150/200/city">
<h1>Your Title Here</h1>
</header>
header {
text-align: center;
position: relative;
}
header img {
position: absolute;
top: 0;
left: 0;
z-index: 1; /* use this if you're having stacking issues */
}
Here is a jsFiddle demonstrating the above code: http://jsfiddle.net/3h5zdzbr/1/