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%;
}
}
Related
I'm having trouble with my styling. This is my code:
<html>
<head>
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
html,
body {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
#header {
height: 100px;
background-color: lightgrey;
text-align: center;
}
#menu {
height: 30px;
background-color: #B81F00;
}
#menu a {
text-decoration: none;
color: white;
text-align: center;
width: 15vw;
line-height: 0;
display: inline-block;
/*border: black solid 1px;*/
height: 30px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
background-color: white;
color: #7B1700;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 600px) {
#menu a {
background-color: #B81F00;
float: center;
display: block;
width: 100%;
margin-top: 20px;
font-size: 20px;
line-height: 20px;
margin: 0;
padding: 0;
}
#menu {
position: relative;
padding-top: 0;
margin-top: 0;
height: auto;
}
}
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="menu">
<a href="#">
<p>Section1</p>
</a>
<a href="#">
<p>Section2</p>
</a>
<a href="#">
<p>Section3</p>
</a>
<a href="#">
<p>Section4</p>
</a>
</div>
</body>
</html>
Now, when I open it in mobile viewpoint, I get this:
As you can see, there is a little whitespace between those two elements, but I can't figure out what caused this.
The P elements have a margin, you should remove it. Use padding instead.
#menu a p {
padding: 1em;
margin: 0;
}
If you want to center the content of the P perfectly try to use flex-box.
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 am new to HTML and CSS and I have my own website.
The problem is that I don't know how to change the opacity when I hover over my text. I want it to become lighter if I'm hovering over my text in the menu on the right. Right now It's only changing when I hover over the image itself, the text changes too, but I want it to both change at the same time and on the same object, so I hover over the text; text changes and images opacity changes.
Here is my code:
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://fonts.googleapis.com/css?family=Roboto:300);
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
background-image: url(lucafraserProject/images/backgroundImage.png);
background-repeat: repeat;
}
#container {
width: 100%;
height: 1000px;
}
#header {
width: 100%;
height: 200px;
background-position: 50% 50%;
background-color: #000;
color: #FFF;
font-family: 'Roboto', sans-serif;
text-align: center;
font-size: 45px;
box-shadow: 3px 3px 5px 3px #ccc;
}
#aboutMe {
width: 50%;
height: auto;
background-color: #FFF;
font-family: 'Roboto', sans-serif;
color: #333333;
line-height: 2;
margin-top: 50px;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 36px;
padding-right: 36px;
box-shadow: 3px 3px 5px 3px #ccc;
float: left;
}
#footer {
width: 100%;
color: #333333;
text-align: center;
display: block;
font-family: 'Roboto', sans-serif;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
padding-top: 10px;
float: left;
}
.aboutMe {
font-size: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
.h2AboutMe {
font-size: 40px;
padding-bottom: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
.h1Header {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 40px;
padding-bottom: 50px;
}
#menuLinks {
background-color: #FFF;
height: auto;
width: 21%;
float: left;
padding: 25px 36px;
overflow: hidden;
font-family: 'Roboto', sans-serif;
color: #333333;
line-height: 2;
margin: auto;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 36px;
padding-right: 36px;
margin-top: 50px;
box-shadow: 3px 3px 5px 3px #ccc;
}
.h2Menu {
font-size: 40px;
padding-bottom: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
#menuRechts {
background-color: #FFF;
height: auto;
width: 21%;
float: left;
overflow: hidden;
font-family: 'Roboto', sans-serif;
color: #333333;
line-height: 2;
margin: auto;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 36px;
padding-right: 36px;
margin-top: 50px;
box-shadow: 3px 3px 5px 3px #ccc;
}
li {
text-decoration: none;
list-style-type: none;
margin-left: -40px;
vertical-align: middle;
margin-top: 10px;
}
a {
text-decoration: none;
list-style: none;
color: #000;
}
a:hover {
text-decoration: none;
font-size: 40px;
font-family: 'Roboto', sans-serif;
margin-top: 0px;
margin-bottom: 0px;
color: #000;
font-weight: bold;
}
#menuLinks li ul {
text-decoration: none;
list-style: none;
}
.marginClassP {
margin-top: -50px;
}
.marginLeft {
margin-left: 10px;
font-size: 20px;
}
.mainMenu {
font-size: 20px;
}
#widespace {
width: 2%;
height: 500px;
float: left;
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
}
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Styles */
}
/*1210px = follow me lelijk = new css, tablet device, mobile width = */
.pic {
opacity: 1;
filter: alpha(opacity=100);;
}
.pic:hover {
opacity: 0.3;
filter: alpha(opacity=30);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lucafraser.nl</title>
<link href="indexCSS.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div id="header">
<h1 class="h1Header">Welcome</h1>
</div>
<div id="widespace"></div>
<div id="menuLinks">
<h2 class="h2Menu">Menu</h2>
<ul>
<li><span class="mainMenu">Home</span></li>
<li><span class="mainMenu">About</span></li>
<li><span class="mainMenu">Portfolio</span></li>
<li><span class="mainMenu">Results</span></li>
<li><span class="mainMenu">News</span></li>
<li><span class="mainMenu">Blog</span></li>
<li><span class="mainMenu">Contact</span></li>
</ul>
</div>
<div id="widespace"></div>
<div id="aboutMe">
<h2 class="h2AboutMe">Home</h2>
<p class="aboutMe">I am trying to get this website to work on mobile devices. After that I will continue creating my website and I will be inserting pages with content. Also, I am trying to get the font-type I use to work for everyone so you don't see the ugly standard font-type. Thanks for your patience!<br />Update: The font is working now! I hope it's readable :D</p>
</div>
<div id="widespace"></div>
<div id="menuRechts">
<h2 class="h2Menu">Follow me</h2>
<ul>
<li><img src="lucafraserProject/images/48x48/facebook-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Facebook</span></li>
<li><img src="lucafraserProject/images/48x48/twitter-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Twitter</span></li>
<li><img src="lucafraserProject/images/48x48/googleplus-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Google+</span></li>
<li><img src="lucafraserProject/images/48x48/email-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Gmail</span></li>
<li><img src="lucafraserProject/images/48x48/instagram-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Instagram</span></li>
<li><img src="lucafraserProject/images/48x48/youtube-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">YouTube</span></li>
</ul>
</div>
<div id="widespace"></div>
<div id="footer">
<p>Copyright © Luca Fraser. Alle rechten voorbehouden.</p>
</div>
</div>
</body>
</html>
As you mentioned you know html and css please add class on links parent i.e ul see below example
<ul class="side-links">
then use below css in style file
.side-links li:hover{ opacity:0.3}
Done
It should go like this parent:hover child {opacity:0.3;}
here is the code example.
Instead of applying the hover effect when you hover over the a or the .pic apply it when you hover over their containing li element.
#menuRechts li:hover .pic{
opacity:0.3
}
#menuRechts li:hover a{
font-weight:bold;
}
you can always make us of css pseudo classes
img:hover{
opacity : 0.5;
}
this will decrease the opacity of every image by 50% , you can use any html element,css class or id instead of img
you can give any value between 0-1
1 being total visible and 0 being totally transparent
add this CSS:
#menuRechts li:hover {
opacity: 0.5;
}
and remove the .pic:hover code. This will make the entire LI element fade out, since it contains both the image and the text, theres no need to do both things separately.
Try to this code...
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="klematis.jpg" width="150" height="113" alt="klematis">
<img src="klematis2.jpg" width="150" height="113" alt="klematis">
<p><b>Note:</b> In IE, a !DOCTYPE must be added for
the :hover selector to work on other elements than the a element.</p>
</body>
</html>
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.