I was looking for some help in regards to media queries. This is the first time I am using this on a site, but it doesn't seem to work. This is also the first time I am changing my html4 code to html5, not sure if that's where the problem lies.
My HTML Code:
<!doctype html> <!-- html5 doctype -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- line added to for responsive layout -->
<title>Dummy Site</title>
<link href="style5.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="wrapper">
<header></header>
<div id="spacer1"></div>
<div id="banner"></div>
<div id="range"></div>
<div id="spacer2"></div>
<div id="cols"></div>
<div id="spacer3"></div>
<footer></footer>
</div>
</div>
</body>
</html>
My CSS:
body {
margin:0 auto;
background:#f5f3ef;
}
a {
font-family: 'Arial';
font-size: 12px;
color: #66308f;
text-decoration:none;
font-weight:bold;
}
#container {
margin: 0 auto;
height: 1264px;
width: 100%;
}
#wrapper {
margin: 0 auto;
height: 1264px;
width: 893px;
background-color:#0CF;
}
header {
margin:0 auto;
height: 171px;
width: 883px;
}
#spacer1 {
height:59px;
}
#banner {
margin:0 auto;
width: 883px;
height: 439px;
background:url(z_imgs/banner.jpg) no-repeat;
}
#range {
margin: 0 auto;
height: 246px;
width: 883px;
}
#spacer2 {
height:24px;
}
#cols {
margin: 0 auto;
height:188px;
width:883px;
}
#spacer3 {
height:39px;
}
footer {
margin: 0 auto;
height:98px;
width:883px;
}
<!-- MEDIA QUERIES -->
#media (max-width: 850px) {
#wrapper {
background-color: red;
}
}
When I resize the browser to below 850px the color still stays the same and doesn't change to red.
It does not work since you are using HTML comments inside CSS code which leads to syntax error and browser not recognizing the code. Remove the comment or modify it from <!-- --> to /* */ and it works.
body {
margin: 0 auto;
background: #f5f3ef;
}
a {
font-family: 'Arial';
font-size: 12px;
color: #66308f;
text-decoration: none;
font-weight: bold;
}
#container {
margin: 0 auto;
height: 1264px;
width: 100%;
}
#wrapper {
margin: 0 auto;
height: 1264px;
width: 893px;
background-color: #0CF;
}
header {
margin: 0 auto;
height: 171px;
width: 883px;
}
#spacer1 {
height: 59px;
}
#banner {
margin: 0 auto;
width: 883px;
height: 439px;
background: url(z_imgs/banner.jpg) no-repeat;
}
#range {
margin: 0 auto;
height: 246px;
width: 883px;
}
#spacer2 {
height: 24px;
}
#cols {
margin: 0 auto;
height: 188px;
width: 883px;
}
#spacer3 {
height: 39px;
}
footer {
margin: 0 auto;
height: 98px;
width: 883px;
}
/* Media Queries */
#media (max-width: 850px) {
#wrapper {
background-color: red;
}
}
<!doctype html>
<!-- html5 doctype -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- line added to for responsive layout -->
<title>Dummy Site</title>
<link href="style5.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="wrapper">
<header></header>
<div id="spacer1"></div>
<div id="banner"></div>
<div id="range"></div>
<div id="spacer2"></div>
<div id="cols"></div>
<div id="spacer3"></div>
<footer></footer>
</div>
</div>
</body>
</html>
Related
I just started learning HTML and CSS and I have been stuck on the layout of a website in css for a while now. In the first picture you can see how i am trying to make it look and in the second picture you see how it looks right now...
I tried searching online but I don't seem to grasp the way layout and positioning works in CSS. Does anyone know what I am doing wrong??
Picture here!
2nd picture here!
html
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Catamaran:100|Pontano+Sans|Ruda:900" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
<title>ALISAN'S OCCASIONS</title>
</head>
<body>
<div class="header">
</div>
<div class="home_page">
<div class="home_left">
<ul id="social_media">
<li><img src="Facebook1.jpg"></li>
<li><img src="Instagram1.jpg"></li>
<li><img src="twitter1.jpg"></li>
</ul>
</div>
<div class="home_center">
</div>
<div class="home_right">
</div>
</div>
</body>
</html>
and this the CSS stylesheet
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: #8799b7;
overflow-y: scroll;
max-height: 735px;
}
.header {
display: block;
background-image: url("header4.jpg");
height: 500px;
}
.home_page {
display: block;
margin:0;
padding: 0;
}
.home_left {
display: inline-block;
height: 235px;
width: 506px;
margin: 0;
padding: 0;
}
.home_center {
display: inline-block;
height: 235px;
width: 506px;
margin: 0;
padding: 0;
}
.home_right {
display: inline-block;
height: 235px;
width: 506px;
margin: 0;
padding: 0;
You can simplify your code by using flexbox, as long as you don't need to support older browser.
The HTML would be:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Catamaran:100|Pontano+Sans|Ruda:900" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
<title>ALISAN'S OCCASIONS</title>
</head>
<body>
<div class="header">
header
</div>
<div class="home_page">
<div class="home_left">
left
</div>
<div class="home_center">
center
</div>
<div class="home_right">
right
</div>
</div>
</body>
</html>
The CSS:
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: #8799b7;
overflow-y: scroll;
max-height: 735px;
}
.header {
display: block;
background-image: url("header4.jpg");
height: 500px;
}
.home_page {
display: flex;
margin:0;
padding: 0;
}
.home_page > div {
border: 1px solid grey;
}
.home_left {
height: 235px;
width: 506px;
margin: 0;
padding: 0;
}
.home_center {
height: 235px;
width: 506px;
margin: 0;
padding: 0;
}
.home_right {
height: 235px;
width: 506px;
margin: 0;
padding: 0;
}
And you can see it in action at:
https://codepen.io/anon/pen/EvqXmg
I am helping a student with a project and we are going through a tutorial. The tutorial is here:
https://ihatetomatoes.net/demos/parallax-scroll-effect/
Here is our index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>joeys school project</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<body>
<main>
<section id="slide-1" class="homeSlide">
<div class="bcg" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide-1">
<div class="hsContainer">
<div class="hsContent" data-center="opacity: 1" data-106-top="opacity: 0" data-anchor-target="#slide-1 h2">
<h2>Mac Vs. Windows</h2>
<p>Which is better? Which should you choose?</p>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Here is our main.css:
body {
margin: 0;
}
.mac_header {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
/* CSS */
.hsContainer {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
opacity: 0;
}
.hsContent {
max-width: 450px;
margin: -150px auto 0 auto;
display: table-cell;
vertical-align: middle;
color: #ebebeb;
padding: 0 8%;
text-align: center;
}
.hsContent h2,
.copy h2 {
color: #ffffff;
font-size: 45px;
line-height: 48px;
margin-bottom: 12px;
}
.hsContent p {
width: 400px;
margin: 0 auto;
color: #b2b2b2;
}
.hsContent a {
color: #b2b2b2;
text-decoration: underline;
}
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}
/* Slide 1 */
#slide-1 .bcg {
background-image:url('../img/computers-1227142.jpg');
height: 733px;}
The issue is we can see the block for the text when we inspect the page in Chrome, but it is not displaying the text over the image. All we see is the outline of the div where it is located. We have researched how to get this working and also followed the tutorial correctly. Also we have compared our code to the tutorial and can't see where the disconnect is. Any ideas? At this point a solution that works instead of what is in the tutorial will be fine as well.
I have an issue with the div on my page. It's the only one I have, and it covers the middle of my page. With a few tweaks in CSS, I made it go all the way down.
The problem though, is that the video(which is inside the div element), is sneaking out like so:
http://i.stack.imgur.com/xybem.jpg
Here's the html:
<html>
<head>
<link rel="shortcut icon" href="Images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="Style.css" media="screen" />
<title>Arthur</title>
<meta content="text/html" charset="windows-1251">
</head>
<Body background="Images/background2.jpg">
<IMG class="imgborder" src="Images/button.png" align="left" height="50">
<div id="wrapper" style="background-color:black; width:60%; margin-left: auto ; margin-right: auto ;">
<img class="center" width="60%" src="Images/logo2.png">
<BR>
<img class="center imgborder" height="300" src="Images/muller.jpg">
<P>...</P>
<P>...</P>
<P>...</P></Font><
<iframe class="center" width="500" height="300" src="..." frameborder="5"
allowfullscreen></iframe></div>
</body>
</html>
And here's the CSS:
#charset "utf-8";
/* CSS Document*/
/*This section is for links*/
a:link
{
font-weight:normal; color:crimson
}
a:visited
{
font-weight:normal; color:Crimson;
}
a:hover
{
font-weight:bold; color: Royalblue; font-variant:small-caps;
}
/*This section is for a paragraph section*/
p {
font-style:normal; font-size:18px;
}
blue {
color:crimson;
}
/*This section is for the image's black border.*/
.imgborder {
border-color: crimson; border:thick; border-style:outset;
}
.body
{
background-color: #0000FF;
}
html {
height:100%;
}
body{
height:100%;
background-image:url('Images/background2.jpg');
background-repeat:no-repeat;
background-size:100%;
}
}
#wrapper {
margin: 0 auto;
width: 990px;
height:100%;
overflow:scroll;
position:relative;
}
#navigation {
margin: 0 auto;
width: 990px;
height: 55px;
background-color: #fff;
}
#bottomHalf {
margin: 0 auto;
width: 990px;
height: 100%;
background-color: #4d3c37;
}
div { /* set div to full width and height */
width: 100%;
height: 100%;
}
p {
margin-left:2cm; margin-right:2cm; font-family:"calibri"; color:crimson; font-size:16; text-align:justify;
}
table {
color:crimson;
}
.center {
margin: 0 auto;
}
img.center {
display: block; margin-left: auto; margin-right: auto;
}
iframe.center {
display: block; margin-left: auto; margin-right: auto;
}
The layout for this is rather simple and easy to achieve and has been covered here a lot, my problem comes from when I want the right div to be scrollable.
I simply cannot get the left side to be fluid and statically positioned while allowing the right side to be a fixed width and scrollable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" style="display: none !important;">
body {
margin: 0 0 0 0;
overflow: hidden;
}
#page-wrap {
background: white;
max-width: 100%;
}
#main-content {
background-color: #797979;
padding-right: 350px;
padding-top: 20px;
height: 100%;
float: left;
position: absolute;
}
#right-sidebar {
background-color: #cacaca;
width: 350px;
float: right;
overflow: auto;
height:100%;
}
</style>
</head>
<body>
<div class="page-wrap">
<div id="main-content">
<h2>Content Area</h2>
</div>
<div id="right-sidebar">
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Try this - jsFiddle
body {
margin: 0 0 0 0;
background-color: #797979;
/*overflow: hidden;*/
}
#page-wrap {
background: white;
max-width: 100%;
}
#main-content {
position:absolute;
right:200px;
left:0px;
padding:20px;
}
#right-sidebar {
background-color: #cacaca;
position:fixed;
overflow-y:scroll;
right:0px;
width:200px;
height:100%;
}
I'm trying to create a fluid layout with http://www.tinyfluidgrid.com/
I want to create a 2 columns layout (grid_12) inside the body (grid_16) but the left bar (grid_4) and the right bar doesn't wrap the whole body so what should I do:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>#</title>
<link rel="stylesheet" href="grid.css" type="text/css" media="screen" charset="utf-8">
<style type="text/css" media="screen">
/*
& A little bit of styling
*/
body {
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
h1 {
border: solid 1px black;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="grid_24">
<h1>topbar 24</h1>
</div>
<div class="grid_24">
<h1>logo 24</h1>
</div>
<div class="grid_24">
<h1>menu 24</h1>
</div>
<div class="grid_4">
<h1>4</h1>
</div>
<!-- -->
<div class="grid_16">
<h1>16</h1>
<div class="grid_12">
<h1>12/16</h1>
</div>
<div class="grid_12">
<h1>12/16</h1>
</div>
</div>
<!-- -->
<div class="grid_4">
<h1>4</h1>
</div>
<div class="grid_24">
<h1>24</h1>
</div>
</div>
</body>
</html>
Below the css:
/*
& Columns : 24
& Gutter %: 20%
& MinWidth: 800px
& MaxWidth: 1200px
*/
.grid_1 { width: 3.3333333333333%; }
.grid_2 { width: 7.5%; }
.grid_3 { width: 11.666666666667%; }
.grid_4 { width: 15.833333333333%; }
.grid_5 { width: 20%; }
.grid_6 { width: 24.166666666667%; }
.grid_7 { width: 28.333333333333%; }
.grid_8 { width: 32.5%; }
.grid_9 { width: 36.666666666667%; }
.grid_10 { width: 40.833333333333%; }
.grid_11 { width: 45%; }
.grid_12 { width: 49.166666666667%; }
.grid_13 { width: 53.333333333333%; }
.grid_14 { width: 57.5%; }
.grid_15 { width: 61.666666666667%; }
.grid_16 { width: 65.833333333333%; }
.grid_17 { width: 70%; }
.grid_18 { width: 74.166666666667%; }
.grid_19 { width: 78.333333333333%; }
.grid_20 { width: 82.5%; }
.grid_21 { width: 86.666666666667%; }
.grid_22 { width: 90.833333333333%; }
.grid_23 { width: 95%; }
.grid_24 { width: 99.166666666667%; }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16,
.grid_17,
.grid_18,
.grid_19,
.grid_20,
.grid_21,
.grid_22,
.grid_23,
.grid_24 {
margin-left: 0.41666666666667%;
margin-right: 0.41666666666667%;
float: left;
display: block;
}
.alpha{margin-left:0px;}
.omega{margin-right:0px;}
.container{
min-width: 800px;
max-width: 1200px;
margin: auto;
}
/* #
* tinyfluidgrid.com
& girlfriendnyc.com
*/
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}