I'm working on a project, I have the layout how my client wants it. I'm rekatively new to responsive layouts. In mobile devices with width 321px Im struggling to get right column to expand over the full width of the screen/device.
I understand this is likely a duplicate question, below is a fiddle but if anyone can take a look and either offer some adive or point me to previous answers I'd be grateful.
#media only screen
and (max-width : 320px) {
.container {
width: 321px ! important;
}
#columnright {
display: block ! important;
float: non ! important;
width: 100% ! important;
clear: right;
margin-left; 10%;
}
}
body {
background-image: url(images/khBG.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
margin: 0;
padding: 0;
font-family: "Century Gothic", Verdana, sans-serif;
color: black;
border: 1px solid black;
}
#banner {
padding-right: 5%;
opacity: 0.7234;
background-color: #ffffff;
border-bottom: 1px solid black;
}
#banner ul {
float: right;
font-size: 0.70em
}
#banner ul li {
display: block;
float: left
}
#columnleft {
padding-left: 1%;
background-color: #ffffff;
border-bottom: 1px solid black;
opacity: 0.7234;
float: left;
width: 15%;
margin-left: 0%;
padding-top: 1%;
}
#columnright {
padding-left: 1%;
background-color: #ffffff;
border-bottom: 1px solid black;
opacity: 0.7234;
padding-top: 2%;
width: 50%;
float: right;
overflow: hidden;
margin-right: 30%;
}
#columnright ul {
overflow: hidden;
}
#footer {
clear: both;
background-color: #ffffff;
filter: alpha(opacity=60);
opacity: 0.7234;
padding-bottom: 1em;
padding-left: 200px;
font-size: .60em;
}
#pic-gallery {
margin-left:17.5%;
width: 400px;
height: 400px;
border: 1px solid black;
align-items: center;
display:flex;
}
#pic-ver {
padding-top: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 100px;
}
#pic-hor {
padding-top: 100px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 50px;
}
#myGallery {
position: relative;
width: 320px;
/* Set your image width */
height: 267px;
/* Set your image height */
}
#myGallery img {
display: none;
position: absolute;
top: 0;
left: 0;
}
#myGallery img.active {
display: block;
}
.titlegrp {
}
.title {
float: right;
margin-right: 17.5%;
margin-top: 7.5%;
}
.subtitle {
font-family: "Segoe Script", Segoe, sans-serif;
font-size: 1.05em;
}
.h1 {
font-family: "Segoe Script", Segoe, sans-serif;
font-size: .9em;
}
.imgleft {
float: left;
margin-right: 5px;
}
.imgright {
float: right;
margin-right: 60px;
}
.contentpara {
padding-left: 15px;
}
.sidelinks {
font-family: "Century Gothic", Verdana, sans-serif;
}
.sidelinks a:link {
text-decoration: none;
color: black;
}
.sidelinks a:hover {
text-decoration: none;
font-family: "Segoe Script", Segoe, sans-serif;
}
.sidelinks a:visited {
text-decoration: none;
color: blue;
}
.tablecont {
padding-left: 15px;
}
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
}
div.img:hover {
border: 1px solid #777;
}
div.img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.image-wrapper {
margin: auto;
align-items: center;
justify-content: center;
}
.gal-butt {
font-size: 2.5em;
margin: auto;
}
<!doctype html>
<html lang="en">
<header>
<meta charset="utf-8">
<title>Katie's House - West Hull Based Childminder</title>
<link rel="ICON" href="images/KH_logo.ico" type="image/ico" />
<meta name="description" content="">
<meta name="author" content="Brian Johnson">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="KHjscript.js"></script>
<link rel="stylesheet" href="kHIndex.css">
</header>
<body>
<div class="container">
<div id="banner">
<ul class="none">
<li class="nav"> <a href="https://www.facebook.com/KatieSummersChildminder/" target="_blank">
<img border="0" alt="Contact us on Facebook" src="images/fBook_Icon_Black.gif" width="30" height="30"></a></li>
<li class="nav"> <a href="mailto:katiesummers789#gmail.com">
<img border="0" alt="Contact via Email" src="images/email_Icon_Black.gif" width="30" height="30"></a></li>
<li class="field"><input type="text" title="Search" text="Search" /></li>
</ul>
<div class="titlegrp">
<img class="title" src="images/kH_title.png" alt="Katies House Title">
<img src="images/KH_logo.jpg" alt="Katies House Logo">
</div>
<div style="clear: both;"></div>
</div>
<div id="columnleft">
<div class="subtitle"><p><u>Site Navigation</u></p></div>
<div class="sidelinks">
Home
<br>
About
<br>
Sample Day
<br>
Gallery
<br>
Testimonials
<br>
Enquiries
<br>
</div>
</div>
<div id="columnright">
<div class="subtitle"><u>Katie's House Services</u></div>
<div class="imgleft"><img border="1" alt="Katie and Mindees" src="images/katie_intro_page.jpg"></a>
</div>
<p>What Katie's house can offer you</p>
<ul>
<li>Early years child care 0-5 years</li>
<li>Funded places for eligible 2,3 and 4 year olds at 15 hours per week free</li>
<li>Long term and short term care</li>
<li>Full time and part time places</li>
<li>Professional and affordable</li>
</ul>
<hr>
<p>My Qualifications</p>
<p>I attend training regularly and have qualifications in:</p>
<ul>
<li>Paediatric First Aid</li>
<li>Child Protection</li>
<li>Special Educational Needs</li>
<li>Food Hygiene</li>
<li>Health and Safety</li>
<li>Equal Opportunities</li>
<li>Home based Childcare</li>
<li>Working with two year olds</li>
<li>schemas</li>
<li>NVQ3 Children's care, Learning and Development</li>
<li>Open University - Understanding Autism</li>
</ul>
<br>
<p>Click below for a little information on Childminding</p>
Pacey's Info on Registered Childminders
<div style="clear: both;"></div>
<br>
</div>
<div id="footer">
<p>Brian Johnson
<br>© Copyright 2016. All Rights Reserved</p>
</div>
</div>
</body>
</html>
https://jsfiddle.net/aw3eb1oa/
You were really close - just need to put your media query at the bottom of the CSS so it can override the other styles. Then add a width:100%; and margin-left: 0;
#columnleft, #columnright {
float: none;
width: 100%;
}
#columnright {
display: block ! important;
clear: right;
margin-left: 0;
}
Updated: Fiddle
You need to over-ride your earlier CSS like this:
#media only screen and (max-width : 320px) {
.container {
width: auto;
}
#columnleft,#columnright {
float: none;
width: 100%;
}
}
I am a beginner, and I am having trouble recreating my mockup in CSS. One issue is the second section of my homepage (benefits). I wanted a two column checkerboard layout alternating white and cardboard backgrounds. I'm not sure if the answer is to change the media queries or include more subclasses. I'm generally lost on this. Here is my mockup. Thank you in advance.
Did I mention that you have to speak to me as if I am 5 years old?
html,
body {
overflow-x: hidden;
}
body {
font-family: "Montserrat", Helvetica, Arial, sans-serif;
font-weight: 100;
color: #1F1309;
}
/* HEADER */
header {
color: #FFFFFF;
}
header .logo {
float: left;
}
header nav {
padding: 1em 0;
}
header nav ul {
display: inline;
text-align: right;
float: right;
margin: 0;
}
header nav ul>li {
list-style-type: none;
display: inline-block;
margin: 0 15px;
}
header nav ul>li.btn-outline {
padding: 10px 15px;
border: 2px solid #FFFFFF;
border-radius: 4px;
}
header nav ul>li.btn-outline:hover {
background: #FFFFFF;
}
header nav ul>li>a {
color: #FFFFFF;
text-decoration: none;
}
header nav ul>li.btn-outline:hover>a {
color: #845F5A;
}
header .headline {
text-align: center;
display: block;
text-align: center;
padding-bottom: 95px;
}
header .headline h1 {
font-size: 48px;
font-weight: normal;
margin: 95px 0 0;
}
header .headline p {
font-size: 22px;
line-height: 26px;
font-weight: 100;
margin: 10px 0 40px;
}
header,
footer,
section {
overflow: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Crimson Text", Helvetica, Arial, serif;
color: white;
}
h2 {
font-size: 48px;
font-weight: normal;
margin-bottom: 20px;
line-height: 1.5em;
}
p {
font-size: 16px;
line-height: 19px;
font-weight: 100;
}
/* GRID */
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.container:before,
.container:after {
content: " ";
display: table;
}
.container:after {
clear: both;
}
.one-half,
.one-third,
.one-fourth {
width: 96%;
float: left;
position: relative;
min-height: 1px;
margin: 0 2% 20px;
}
/*IMAGES*/
.hero {
vertical-align: top;
background-image: url("images/brainstorm.png");
background-size: cover;
position: relative;
}
.overlay {
position: relative;
}
.overlay:before {
position: absolute;
content: " ";
top: 0;
left: 0;
width: 500%;
height: 100%;
display: none;
z-index: 0;
}
.overlay:hover:before {
display: block;
}
.black:before {
background-color: #000000;
opacity: .35;
}
.brown:before {
background-color: #7E6233;
}
.hero * {
position: relative;
/* hack */
}
/* BUTTONS */
.btn {
border-radius: 4px;
color: #FFFFFF;
font-weight: 700;
text-decoration: none;
padding: 10px 30px;
background: #F9461C;
box-shadow: 0 2px 4px 2px rgba(71, 19, 7, 0.90);
;
}
.container-second-hero {
vertical-align: top;
height: 287px;
background-image: url("images/Guy-on-grass.png");
background-size: cover;
position: relative;
}
.benefits {
background-image: url("images/cardboard.png");
background-repeat: repeat;
display: block;
position: relative;
color: #1F1309;
text-align: center;
height: 100%;
}
.benefits ul li {
list-style-type: none;
display: inline-block;
}
.benefits i {
color: #1F1309;
font-size: 144px;
margin: 0;
border: 0;
vertical-align: middle;
display: block;
height: 336px;
width: 100%;
}
.benefits h2 {
color: #1F1309;
font-size: 48px;
font-weight: bold;
}
.benefits p {
font-size: 24px;
line-height: 1.5em;
}
.additional-features {
background-image: url("images/cardboard.png");
background-repeat: repeat;
text-align: center;
display: block;
padding-bottom: 72px;
display: table;
width: 100%;
}
.additional-features h1 {
display: table-cell;
vertical-align: center;
text-align: center;
}
.additional-features h3 {
font-family: "Crimson Text", Helvetica, Arial, sans-serif;
color: #1F1309;
font-size: 36px;
}
.additional-features ul {
color: #1F1309;
font-size: 18px;
line-height: 1.5em;
font-weight: 100;
list-style: none;
}
/* PRICING */
.pricing {
background: #FFFFFF;
padding: 4em 0;
text-align: center;
padding: 4em 0;
}
.pricing h2,
.pricing h3,
.pricing h4,
.pricing p {
color: #1F1309;
line-height: 0.5em;
}
.pricing ul {
margin: 0 auto;
padding: 2em 0;
}
.pricing ul li {
list-style-type: none;
}
.pricing .container p {
line-height: 1.5em;
}
.box {
padding: 0 0 15px;
background: rgba(124, 49, 70, 0.18);
border: 1px solid #979797;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
min-height: 439px;
position: relative;
margin-top: 25px;
width: 100%;
}
.box.middle {
border: 1px solid rgba(31, 19, 8, 0.55);
box-shadow: 0 2px 0 1px rgba(46, 60, 65, 0.52);
background: #FFFFFF;
min-height: 485px;
margin-top: 0px;
width: 110%;
}
.box h3 {
font-family: "Crimson Text", Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 48px;
}
.box h4 {
font-size: 50px;
font-weight: normal;
margin: 40px 0 10px;
color: #1F1309;
text-transform: uppercase;
}
.box h4 span {
font-size: 32px;
vertical-align: top;
}
.box h4 span.month {
font-family: "Crimson Text", Helvetica, Arial, sans-serif;
font-weight: 100;
color: #1F1309;
font-size: 20px;
vertical-align: middle;
}
.box ul li {
font-size: 18px;
margin-bottom: 20px;
font-weight: 100;
}
.box .btn {
position: absolute;
bottom: 60px;
left: 40px;
right: 40px;
}
.small {
font-size: 12px;
color: #FEFEFE;
line-height: 15px;
font-style: italic;
}
/* TESTIMONIALS */
.testimonials {
padding: 4em 0;
text-align: center;
}
.testimonials h2 {
color: #1F1309;
}
.testimonials ul li {
list-style-type: none;
}
.testimonials blockquote {
color: #FFFFFF;
text-align: left;
font-style: italic;
background: #1F1309;
position: relative;
padding: 30px;
width: auto;
margin: 0;
}
.testimonials blockquote:after {
top: 100%;
left: 13%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #1F1309;
border-width: 10px;
margin-left: -10px;
}
.testimonials img {
height: 65px;
width: 65px;
border-radius: 50%;
float: left;
display: inline-block;
margin: 20px 10px 0 0;
}
.testimonials p.name {
float: left;
display: inline-block;
text-align: left;
font-size: 13px;
margin-top: 30px;
}
.testimonials .second,
.fourth {
position: relative;
top: 20px;
}
/* FOOTER */
footer {
background-color: #34495E;
background-image: linear-gradient(to top, #3498DB 0%, #3498DB 50%, #34495E 50%, #34495E 100%);
color: #FFFFFF;
height: 150px;
position: relative;
overflow: hidden;
z-index: 0;
}
footer p,
footer nav ul {
font-size: 14px;
font-weight: 100;
text-align: center;
margin: 10px auto 0;
}
footer nav ul li {
list-style-type: none;
display: inline;
}
footer nav ul li a {
color: #FFFFFF;
text-decoration: none;
}
footer .right-footer-block {
background-color: transparent;
}
footer .logo {
padding: 2.35em 0;
margin: 0 auto;
display: block;
}
#media (min-width: 992px) {
footer {
background-color: #3498DB;
background-image: linear-gradient(to left, #3498DB 0%, #3498DB 33.33337%, #34495E 33.33337%, #34495E 100%);
height: 100px;
}
footer p,
footer nav ul {
padding: 2em 0;
text-align: left;
}
footer .right-footer-block {
background-color: #3498DB;
}
footer .logo {
padding: 2em 0 2em 1.5em;
}
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
.one-half {
width: 46%;
}
.one-third {
width: 32.64177%;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
.one-fourth {
width: 21%;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
#media (min-width: 4000px) {
.container {
width: 3800px;
}
html {
font-size: 150% line-height: 150%
}
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UZ-Compatible" content="IE=Edge">
<meta charset="UTF-0">
<title>Save, share, and collaborate | Blockbox</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i|Montserrat:400,700" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/animate.css" </head>
<body>
<!-- Hero -->
<header>
<div class="hero overlay black">
<nav class="container">
<div class="one-half">
<img src="images/site-white-logo.png" alt="Blocbox" />
</div>
<div class="one-half">
<ul>
<li>Sign In</li>
<li class="btn-outline">Sign Up</li>
</ul>
</div>
</nav>
<div class="container headline">
<h1 class="animated fadeIn">Save, share and collaborate.</h1>
<p>blocbox lets you collect and sort information.<br/>Create simple notes, store images, and add links.</p>
Start Your Free Trial!
</div>
</div>
</header>
<main role="main">
<!-- Benefits -->
<section class="benefits">
<ul class="container">
<li class="one-half">
<div class="top">
<h2>Create notes</h2>
<p>Using Markdown, you can create simple text-based documents to save and share. You can collaborate with others to write and edit content.</p>
</div>
<i class="fa fa-file-o"></i>
<div class="bottom">
<h2>Add Links</h2>
<p>Forget bookmarking sites in your browser. With blocbox, you can add links, group them and view them from any computer.</p>
</div>
</li>
<li class="one-half">
<i class="fa fa-picture-o"></i>
<div class="middle">
<h2>Save images</h2>
<p>Are there images you find interesting enough to save? Now you have a way to organize and store those within blocbox.</p>
</div>
<i class="fa fa-link"></i>
</ul>
</section>
<!-- Additional Features -->
<section class="additional-features">
<div class="container-second-hero">
<h1>Access blocbox anywhere.</h1>
</div>
<ul class="container">
<li class="one-third">
<h3>Collaborate</h3>
<ul>
<li>Invite collaborators</li>
<li>Chat in real time</li>
</ul>
</li>
<li class="one-third">
<h3>Organize</h3>
<ul>
<li>Tag items</li>
<li>Search for items</li>
<li>Create boxes</li>
</ul>
</li>
<li class="one-third">
<h3>Do</h3>
<ul>
<i class="fa-calendar-check-o"></i>
<li>Assign due dates</li>
<i class="fa-clock-o"></i>
<li>Set reminders</li>
</ul>
</li>
</ul>
</section>
<!-- Pricing -->
<section class="pricing">
<div class="container">
<h2>How much does blocbox cost?</h2>
<p>We have many options to fit your needs. It's free to try for 30 days*, and you can always change your plan once you signed up. <br/>Here are the different features of each plan:</p>
</div>
<ul class="container">
<li class="one-third">
<div class="box">
<h3>Casual</h3>
<h4>Free</h4>
<ul>
<li>Up to 5 boxes</li>
<li>Up to 10 collaborators</li>
<li><strong>2GB</strong> of storage</li>
</ul>
Start Your Free Trial!
</div>
<li class="one-third">
<div class="box middle">
<h3>Professional</h3>
<h4><span>$</span>5<span class="month">/month</span></h4>
<ul>
<li>Unlimited boxes</li>
<li>Up to 20 collaborators</li>
<li><strong>5GB</strong> of storage</li>
<li>Real-time collaboration</li>
</ul>
Start Your Free Trial!
</div>
</li>
<li class="one-third">
<div class="box">
<h3>Expert</h3>
<h4><span>$</span>10<span class="month">/month</span></h4>
<ul>
<li>Unlimited boxes</li>
<li>Unlimited collaborators</li>
<li><strong>Unlimited</strong> storage</li>
<li>Real-time collaboration</li>
</ul>
Start Your Free Trial!
</div>
</li>
</ul>
</section>
<!-- Testimonials -->
<section class="testimonials">
<div class="container">
<h2>Who uses blocbox?</h2>
<p>blocbox has more than 100,000 satisfied users storing and collaborating<br/> with teams across the world. Here's what a few have to say:</p>
</div>
<ul class="container">
<div class="first">
<li class="one-fourth">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."
</blockquote>
<img src="https://pbs.twimg.com/profile_images/620606106142806016/_80ZF1Qd.jpg" alt="avatar">
<p class="name"><strong>Abinav Thakuri</strong><br/>Freelance Designer, N. Dakota</p>
</div>
</li>
<li class="one-fourth second">
<div class="second">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."
</blockquote>
<img src="https://pbs.twimg.com/profile_images/620606106142806016/_80ZF1Qd.jpg" alt="avatar">
<p class="name"><strong>Abinav Thakuri</strong><br/>Freelance Designer, N. Dakota</p>
</div>
</li>
<li class="one-fourth third">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."
</blockquote>
<img src="https://pbs.twimg.com/profile_images/620606106142806016/_80ZF1Qd.jpg" alt="avatar">
<p class="name"><strong>Abinav Thakuri</strong><br/>Freelance Designer, N. Dakota</p>
</li>
<li class="one-fourth fourth">
<div class="fourth">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."
</blockquote>
<img src="https://pbs.twimg.com/profile_images/620606106142806016/_80ZF1Qd.jpg" alt="avatar">
<p class="name"><strong>Abinav Thakuri</strong><br/>Freelance Designer, N. Dakota</p>
</div>
</li>
</ul>
</section>
<!-- Call to Action -->
<section class="CTA">
<div class="container">
<h2>Ready to give it a try?</h2>
<p>We have many options to fit your needs. It's free to try for 30 days*, and you can always change your plan once you signed up.</p>
Start Your Free Trial!
</div>
<!-- Footer -->
<footer>
<div class="container footer-nav-block">
<div class="left-footer-block one-third">
<p class="copyright-block">© 2015. <strong>Blocbox</strong> - All Rights Reserved.</p>
</div>
<nav class="link-block middle-footer-block one-third">
<ul>
<li>Terms</li> /
<li>Privacy Policy</li> /
<li>Contact Us</li> /
<li>About Us</li> /
<li>Twitter</li>
</ul>
</nav>
<div class="right-footer-block one-third">
<img class="logo" src="images/site-brown-logo.png" alt="Blocbox" />
</div>
</div>
</footer>
</main>
</body>
</html>
</body>
</html>
You could just make it a table, and use CSS to set the background using some nth-child logic.
To center your text you can use flex boxes with a container inside of it, I just made it a div and marked it as display:inline-block; with some CSS.
Since I'm pretty sure your cardboard is an image, all you'd have to do is to replace the background-color:rgb(###,###,###); by a background-image element.
and you should be it.
table.Container{
width:100%;
}
table.Container td{
display:inline-flex;
text-align:center;
align-items:center;
justify-content:center;
vertical-align:middle;
height:2in;
flex-direction:row;
box-sizing:border-box;
width:50%;
}
table.Container td > div{
display:inline-block;
}
table.Container tr:nth-child(odd) > td:nth-child(odd),
table.Container tr:nth-child(even) > td:nth-child(even){
background-color:rgb(219, 148, 50);
}
table.Container tr:nth-child(even) > td:nth-child(odd),
table.Container tr:nth-child(odd) > td:nth-child(even){
background-color:white;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<table class="Container">
<tbody>
<tr>
<td><div>your ontent here</div></td>
<td><div>your ontent here</div></td>
</tr>
<tr>
<td><div>your ontent here</div></td>
<td><div>your ontent here</div></td>
</tr>
<tr>
<td><div>your ontent here</div></td>
<td><div>your ontent here</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
I have a footer menu I am creating for WordPress. I have my main navigation links then at the end I want a collapsing/expanding link for social icons. I have created both separately but do not know how to make them display on one line. Any help is appreciated.
Main Navigation:
<!DOCTYPE html>
<html>
<head>
<style>
#footernav {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight:bold;
text-align: center;
}
#footernav li {
margin-right: 20px;
display: inline;
}
</style>
</head>
<body>
<div id="footernav">
<li>Customer Care</li>
<li>Privacy Policy</li>
<li>Terms</li>
<li>Newsletter</li>
<li>Contact</li>
</div>
</body>
</html>
Expanding/Collapsing Social Link:
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
/*SOCIAL*/
.list {
display:none;
height:auto;
margin:0;
float: center;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
.hide:hover, .show:hover {
color: #eee;
font-weight: bold;
opacity: 1;
margin-bottom: 25px;
}
.list p {
height:auto;
margin:0;
.hover:hover {
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0px 0px 5px #000
}
/*END SOCIAL*/
</style>
<div class='social'>
Follow Us (+)
Follow Us (-)
<div class="list">
<p>
<a href="http://www.facebook.com" target= "_blank" ><img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'" ></a>
<a href="http://www.twitter.com" target= "_blank1" ><img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'" ></a>
<a href="http://www.instagram.com" target= "_blank2" ><img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'" ></a>
</p>
</div>
</div>
</body>
</html>
FIDDLE: http://jsfiddle.net/7j0nb4az/
First of all, you're missing the <ul> tag wrapped around your <li>'s inside the jsFiddle. Secondly, once you wrap the <li>'s with a <ul> tag, adding this CSS to your stylesheet will solve the issue:
#footernav ul {
padding: 0px;
display: inline-block;
}
Here's a working demo:
/*MAIN NAVIGATION*/
#footernav {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#footernav li {
margin-right: 20px;
display: inline;
}
#footernav li a {
text-decoration: none;
}
#footernav ul {
padding: 0px;
display: inline-block;
vertical-align: top;
}
a#show {
vertical-align: top;
}
#footernav li:nth-child(5) {
margin-right: 0px;
}
a.hide {
margin-left: 15px;
}
/*END MAIN NAVIGATION*/
/*SOCIAL*/
.list {
display: none;
height: auto;
margin: 0;
float: center;
}
.show {
display: none;
}
.hide:target + .show {
display: block;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display: inline;
}
.hide:hover,
.show:hover {
color: #eee;
font-weight: bold;
opacity: 1;
margin-bottom: 25px;
}
.list p {
height: auto;
margin: 0;
.hover: hover {
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0px 0px 5px #000
}
<!DOCTYPE html>
<body>
<div id="footernav" class="footernav">
<ul>
<li>Customer Care
</li>
<li>Privacy Policy
</li>
<li>Terms
</li>
<li>Newsletter
</li>
<li>Contact
</li>
<ul>
<div class='social'> Follow Us (+)
Follow Us (-)
<div class="list" <a href="http://www.facebook.com" target="_blank">
<img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'">
</a>
<a href="http://www.twitter.com" target="_blank1">
<img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'">
</a>
<a href="http://www.instagram.com" target="_blank2">
<img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'">
</a>
</div>
I'm trying to make my header banner stretch / fit to the website's dimensions, however, I am unsure how to make this happen on every browser.
HTML5:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="text_h">
Welcome to KUBE Toy Library!
</span>
<span class="banner_h">
<img src="Images\Top_Banner.jpg" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
positon: relative;
width: 100%;
}
.text_h{
position: absolute;
color: white;
text-align: center;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
If your wondering why this is being created, this is for a school assessment task, and all content is fictious.
Try:
* {margin:0; padding: 0;}
.banner_h {display: block; width: 100%;}
.banner_h img {width:100%}
Check the result out in a fiddle.