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}
Related
I have been trying to find a workaround to overflow:hidden not applying to fixed elements, and I came across clip and clip-path. As clip is deprecated, I am trying to use clip-path to create the desired effect. I have successfully created the effect I am looking for in both Firefox and Safari, but the clip-path function does not appear to be working in Chrome.
I've included the current HTML and CSS below; the desired effect is for each title and subtitle to only be visible when their respective parent element is in view. If you are viewing on Firefox or Safari this should be working appropriately. However, if viewing on Chrome you should see that the clip-path function is not applying and therefore you can see both titles and subtitles at the same time when viewing the first parent element (the turquoise rectangle).
As you can see in the code, I am using clip-path: fill-box which works in both Firefox and Safari, but not Chrome. I've also tried inset(0), which still works in FF/Safari but it too fails in Chrome.
* {
padding: 0;
margin: 0;
border: none;
}
html {
background-color: black;
}
.info {
list-style-type: none;
margin-left: 13vw;
padding: 0;
overflow: hidden;
position: fixed;
color: white;
z-index: -1;
top: 80vh;
}
.container {
width: 100%;
height: 110vh;
}
.parent {
position: absolute;
width: 100%;
height: 110vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events: none;
clip-path: fill-box;
}
.parent_1 {
background-color: turquoise;
}
.parent_2 {
background-color: tomato;
}
.parent_3 {
background-color: purple;
}
.subchild {
position: fixed;
color: white;
width: 60vw;
left: 14vw;
}
.p1, .p3 {
top: 40vh;
}
.p2 {
top: 45vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link href="css/clip.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="container container_1">
<Div class="parent parent_1">
<Div class="child child_1">
<p class="subchild p1">
First Title
</p>
<p class="subchild p2">
First Subtitle
</p>
</Div>
</Div>
</section>
<section class="container container_2">
<Div class="parent parent_2">
<Div class="child child_2">
<p class="subchild p3">
Second Title
</p>
<p class="subchild p2">
Second Subtitle
</p>
</Div>
</Div>
</section>
</body>
</html>
I decided to play a little with Javascript. I've changed a little the HTML and the CSS. The subchilds are positioned top: 150px;.
function getY(element) {
var rect = element.getBoundingClientRect();
return rect.bottom;
}
let container1 = document.querySelector(".container_1");
let container2 = document.querySelector(".container_2");
let container3 = document.querySelector(".container_3");
let subchild1 = document.querySelector(".container_1 .subchild");
let subchild2 = document.querySelector(".container_2 .subchild");
let subchild3 = document.querySelector(".container_3 .subchild");
document.addEventListener('scroll', function() {
let bottom1 = getY(container1);
let bottom2 = getY(container2);
let bottom3 = getY(container3);
if ((bottom1 > 166) && (bottom2 > 166) && (bottom3 > 166)) {
subchild1.style.display = "block";
}
else {
subchild1.style.display = "none";
}
//
if ((bottom1 < 166) && (bottom2 > 166) && (bottom3 > 166)) {
subchild2.style.display = "block";
}
else {
subchild2.style.display = "none";
}
//
if ((bottom1 < 166) && (bottom2 < 166) && (bottom3 > 166)) {
subchild3.style.display = "block";
}
else {
subchild3.style.display = "none";
}
});
* {
padding: 0;
margin: 0;
border: none;
}
html {
background-color: black;
}
.info {
list-style-type: none;
margin-left: 13vw;
padding: 0;
overflow: hidden;
position: fixed;
color: white;
z-index: -1;
top: 80vh;
}
.container {
width: 100%;
height: 110vh;
}
.parent {
position: absolute;
width: 100%;
height: 110vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events: none;
}
.parent_1 {
background-color: turquoise;
}
.parent_2 {
background-color: tomato;
}
.parent_3 {
background-color: purple;
}
.subchild {
position: fixed;
color: white;
width: 60vw;
left: 14vw;
top: 150px;
}
.container_1 .subchild {
display: block;
}
.container_2 .subchild {
display: none;
}
.container_3 .subchild {
display: none;
}
<section class="container container_1">
<Div class="parent parent_1">
<Div class="child child_1">
<p class="subchild">
First Title
</p>
</Div>
</Div>
</section>
<section class="container container_2">
<Div class="parent parent_2">
<Div class="child child_2">
<p class="subchild">
Second Title
</p>
</Div>
</Div>
</section>
<section class="container container_3">
<Div class="parent parent_3">
<Div class="child child_3">
<p class="subchild">
Third Title
</p>
</Div>
</Div>
</section>
I'm trying to set my body's background color to a simple grey background but I am getting a two blocks with different greys like this:
* {
padding: 0px;
margin: 0px;
}
body {
height: 100vmax;
width: 100vmax;
background-color: rgb(23, 23, 23);
}
#menuClosed {
width: 45px;
height: auto;
}
#menuOpen {
width: 45px;
height: auto;
filter: brightness(0) invert(1);
}
#sidebarOpen {
background-color: rgb(23, 23, 23);
display: table;
text-align: center;
height: 100vh;
color: white;
padding: 0px 50px;
font-size: 34px;
font-family: sans-serif;
}
#sidebarOpen button {
padding: inherit;
padding-top: 10px;
padding-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue" defer></script>
<script src="./app.js" defer></script>
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div id="root">
<div id="sidebar">
<img v-show="sidebar.open === false" #click="sidebar.open = true" src="./assets/navi/menu.png" id="menuClosed">
<div v-show="sidebar.open === true" id="sidebarOpen">
<img #click="sidebar.open = false" src="./assets/navi/menu.png" id="menuOpen">
<p>menu</p>
</div>
</div>
</div>
</body>
</html>
this is my js file
Vue.config.devtools = true
var rootvue = new Vue({
el: "#root",
data: {
sidebar: {
open: false
}
}
})
Then when i click the menu button it goes away and turns into this
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 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>
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;
}