working on it ...
Explore Public Snippets
Found 70 snippets matching: "css layout"
public by lbottaro 429417 14 7 3
HTML header - footer layout using CSS and DIV
This code renders a HTML basic layout with header, main and footer contents.
The main content has 2 columns and the right one contains two rows.
Source: http://stackoverflow.com/questions/6778808
<html>
<head>
<style type="text/css">
#maincontent {
width:950px;
height:100%;
margin:0 auto;
}
#header {
width:946px;
height:150px;
border:#000 solid;
border-width:2px 2px 1px 2px;
}
#leftcolumn {
width:395px;
height:703px;
border:#000 solid;
border-width:1px 1px 1px 2px;
float:left;
}
#toprow {
width:549px;
height:351px;
border:#000 solid;
border-width:1px 2px 1px 1px;
float:left;
}
#bottomrow {
width:549px;
height:350px;
border:#000 solid;
border-width:1px 2px 1px 1px;
float:left;
}
#footer {
width:946px;
height:150px;
border:#000 solid;
border-width:1px 2px 2px 2px;
clear:both;
}
</style>
<body>
<div id="maincontent">
<div id="header">Header Content</div>
<div id="leftcolumn">Leftcolumn Content</div>
<div id="toprow">Toprow Content</div>
<div id="bottomrow">Bottomrow Content</div>
<div id="footer">Footer Content</div>
</div>
</body>
</html>external by YeomanYe 49 0 1 0
CSS:layout halignCenterByVh
CSS:layout halignCenterByVh:
halignCenterByVh.css
/*只适用与在视口中居中的场景*/
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
external by YeomanYe 48 0 1 0
CSS:layout alignCenterByPadding
CSS:layout alignCenterByPadding:
alignCenterByPadding.css
/*通过padding设置居中可用于，满幅背景,定宽的内容*/
.test{
padding:1em;
padding:1em calc(50% - 450px);
}
external by YeomanYe 47 0 1 0
CSS:layout halignCenterByFlexbox
CSS:layout halignCenterByFlexbox:
halignCenterByFlexbox.css
/*当我们使用 Flexbox 时， margin: auto 不仅在水平方向上将元素居中， 垂直方向上也是如此*/
body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
}
external by Orestiarsi 18 0 1 0
file:///Users/oresti/Downloads/CSS%20layout%20and%20fonts-Assessment/index.html
file:///Users/oresti/Downloads/CSS%20layout%20and%20fonts-Assessment/index.html:
main.css
@font-face {
src: local('Oleo Script'), url(http://fonts.gstatic.com/s/oleoscript/v5/_weQNDK6Uf40CiGFKBBUjogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
font-family: Oleo Script;
/*font-style: normal;
font-weight: 400;*/
src: local('Poiret One'), url(http://fonts.gstatic.com/s/poiretone/v4/HrI4ZJpJ3Fh0wa5ofYMK8QzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2')
}
header {background-image: url("../img/header-background.jpg");
height: 500px;
width: 1280px;
color: white;
position: relative;
}
h1 {text-shadow: 2px 2px 2px black;
margin-left: 300px;
margin-right: 300px;
display: inline-block;
text-align: center;
font-size: 70px;
font-family: Oleo Script;
font-style: normal;
font-weight: 400;
padding-top: 5%;
color: white;
}
h2 {text-shadow: 2px 2px 2px black;
margin-left: 300px;
display: inline-block;
text-align: center;
font-family: Poiret One;
font-size: 20px;
font-style: normal;
font-weight: 400;
}
hr {border-width: thin;
margin-left: 320px;
margin-right: 320px;
}
#left-img {background-image: url(../img/left-img.jpg);}
#middle-img{background-image: url(../img/middle-img.jpg);
margin-left: 25px;
margin-right: 25px;
}
#right-img {background-image: url(../img/right-img.jpg);}
.single-img-card {
margin-left: 75px;
margin-right: 75px;
background-size: cover;
display: inline-block;
height: 200px;
width: 200px;
image-orientation: center;
}
.callout-wrapper {
background-color: #43996a;
height: 200px;
width: 1280px;
}
.callout-msg {
margin-left: 100px;
margin-right: 100px;
color: white;
text-align: center;
}
.primary-text {
font-size: 45px;
font-family: Oleo Script;
text-shadow: 4px 4px 4px black;
padding-top: 25px;
align-content: center;
}
.contact-msg {
padding-top: 25px;
font-size: 30px;
border-width: thin;
margin-left: 150px;
padding-top: 25px;
font-family: Oleo Script;
align-content: center;
}
.contact-phone {
font-size: 25px;
margin-left: 40%;
align-content: center;
font-family: Oleo Script;
}
.contact-email {
font-size: 30px;
margin-left: 50%;
align-content: center;
color: black;
}
.footer-wrapper {
background-color: #333333;
height: 60px;
width: 1280px;
}
.site-footer-text {
margin-left: 450px;
margin-right: 300px;
display: inline-block;
text-align: center;
font-size: 20px;
font-family: Oleo Script;
font-style: normal;
font-weight: 400;
color: white;
padding-top: 10px;
}
external by faridulhassan 3 0 1 0
#sass #css-layout — Margin and Padding loop for SASS.
#sass #css-layout — Margin and Padding loop for SASS.:
margins-padding
// Margins and Padding
// -------------------------
$i: 0;
@while $i <= 50 {
.mt#{$i} { margin-top: 1px * $i; }
.mb#{$i} { margin-bottom: 1px * $i; }
.ml#{$i} { margin-left: 1px * $i; }
.mr#{$i} { margin-right: 1px * $i; }
.pt#{$i} { padding-top: 1px * $i; }
.pb#{$i} { padding-bottom: 1px * $i; }
.pl#{$i} { padding-left: 1px * $i; }
.pr#{$i} { padding-right: 1px * $i; }
$i: $i + 5;
}
external by YeomanYe 3 0 1 0
CSS:layout halignCenterByPos
CSS:layout halignCenterByPos:
halignCenterByPos.css
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
external by netsuite 80 0 1 0
css: layout depth colors, different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding
css: layout depth colors, different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding:
layout depth colors.css
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
external by TheSeamau5 34 0 1 0
Wrapping CSS Layout in Elm
Wrapping CSS Layout in Elm:
csslayout.elm
type alias Bounds = {
left : Float,
right : Float,
top : Float,
bottom : Float
}
bounds : Bounds
bounds = Bounds 0 0 0 0
type FlexDirection = Row | Column
type FlexAlignment = FlexStart |
Center |
FlexEnd |
Stretch |
SpaceBetween |
SpaceAround
type PositionType = Relative | Absolute
type alias Style = {
dimensions : {
width : Float,
height : Float
},
position : Bounds,
margin : Bounds,
padding : Bounds,
borderWidth : Bounds,
flexDirection : FlexDirection,
justifyContent : FlexAlignment,
alignItems : FlexAlignment,
alignSelf : FlexAlignment,
flex : Float,
positionType : PositionType
}
style : Style
style = {
dimensions = {
width = 100,
height = 100
},
position = bounds,
margin = bounds,
padding = bounds,
borderWidth = bounds,
flexDirection = Column,
justifyContent = SpaceAround,
alignItems = Stretch,
alignSelf = Stretch,
flex = 1,
positionType = Relative
}
external by nnchambs 22 0 1 0
CSS Layout Challenges
CSS Layout Challenges:
CSS-Layout-Challenges-Codepen-NickChambers
##### Challenge Number // this is an h5 title in Markdown
Description of approach // this is a paragraph is Markdown
[Challenge number](link to code pen here) // this is a link in Markdown.
##### Challenge 1
Created three black divs with white text and set them all to inline-block. Floated div2 and div3 to the right and re-positioned them in the HTML (div3 above div2). Added 5px margin-right to div2.
[Challenge 1](http://codepen.io/nnchambs/pen/mEkVgj)
---
##### Challenge 2
-Created three black divs with white text and set them all to block display.
-Set div2 to margin auto, and div3 to float:right.
[Challenge 2](http://codepen.io/nnchambs/pen/QEXNWL)
##### Challenge 3
- Created a black div and a gray div.
- Set the margins on div1 and div2 to auto and display to inline-block.
- Set margins of div2 to position the element in the middle of div1.
- Added block level header with 40px of height. Wrapped div2 in the div1 element so they will be nested together.
- Added a container div element with block positioning to push div1 and div2 to the right.
- Set div1's positioning to relative and reduced it's left margin by 100px to center the element.
[Challenge 3](http://codepen.io/nnchambs/pen/XKLdmpL)
##### Challenge 4
- Created a black div1, gray div2, and .container div elements.
- Set div1 and div2 elements' height and width to 100px to create square.
- Set the container div element's height and width to 150px.
- Set div2 float to right with a z-index of 2 to keep it on top of div1.
- Set position of div2 to relative so we can position it within the container.
- Set div2 margin-bottom to 50px to push it's left corner up into the middle of div1.
[Challenge 4](http://codepen.io/nnchambs/pen/zBVqap)
##### Challenge 5
- Created three black div elements (div1, div2, div3) with heights and widths of 100px and block display.
- Floated div1 to the right to set it in the top right corner.
- Set div2's margin to auto to position it in the middle of the page and gave it a relative position.
- Set div3's float to left to position it in the bottom left.
- Wrapped div1 in a 100px tall header element to push it up in the page flow.
- Set div2 margin-bottom to 50px to push it's left corner up into the middle of div1.
[Challenge 5](http://codepen.io/nnchambs/pen/YWoqdr)
##### Challenge 6
- Created three div elements ("div2", "div3", and "container")
- Wrapped the "container" element in a footer element so we can easily position it on the bottom and wrapped div2 and div3 in the container element.
- Set div2 and div3's height and width to 100px.
- Floated div3 to the right to put it in the top right corner of the footer element
- Floated div1 to the right to set it in the top right corner.
- Set div2's margin to auto to position it in the middle of the page and gave it a relative position.
- Set div3's float to left to position it in the bottom left.
- Set footer position to absolute and set the right and bottom values to 0px so it will be absolutely positioned in the bottommost right corner.
- Created a p element to contol the position of the "div1" text and set the display to inline and position to absolute with a top value of -10px to position it in the top left of the container div element.
[Challenge 6](http://codepen.io/nnchambs/pen/yJdJyz)
##### Challenge 7
- Created two div elements (div1, div2) and wrapped div2 in div1
- Set div2's height and width to half of div1's height and width
- Floated div2 to the right and gave it a margin-top of 100px (half of div1's height and width).
- Set div2 and div3's height and width to 100px.
- Set div1's position to absolute and declared top and left as 0px to push it to the farthest possible top and left position.
[Challenge 7](http://codepen.io/nnchambs/pen/Bzgzkp)
##### Challenge 8
- Created two div elements (div1, div2) and wrapped div2 in div1
- Set div2's height and width to half of div1's height and width
- Set display to inline-block
- Floated div2 to the right
- Set div1's position to absolute with top and left values of 0 to put it in the uppermost lefthand corner
[Challenge 8](http://codepen.io/nnchambs/pen/ZOdOar)
##### Challenge 9
- Created three div elements (div1, div2, and div3) and wrapped div2 and div3 in div 1.
- Set dimensions of div1 to 300px height by 150px width.
- Set dimensions of div2 and div3 to 100px height by 100px width.
- Set display of all divs to inline-block.
- Set all div positions to absolute.
- Positioned div 1 in the uppermost lefthand corner with a left and top value of 0.
- Positioned div 2 and div 3 with a left position of 25px to center them within div 1.
- Gave div2 a top positioning of zero to set it at the top of the window and div3 a bottom positioning of 0 to set it at the bottom.
[Challenge 9](http://codepen.io/nnchambs/pen/OXZXEm)
##### Challenge 10
- Created three div elements (div1, div2, and div3) and wrapped div2 and div3 in div 1.
- Set dimensions of div1 to 150px height by 300px width.
- Set dimensions of div2 and div3 to 100px height by 100px width.
- Set display of div2 and div3 to inline-block.
- FLoated div2 to the left and floated div3 to the right.
- Gave div2 and div3 margin-tops of 25 and div 2 a margin-left of 25 and div3 a margin-right of 25.
- Gave the container element a padding of 25px and a left-padding of 550px to push div1 into the center.
[Challenge 10](http://codepen.io/nnchambs/pen/PzAzLj)
##### Challenge 11
- Created three div elements (div1, div2, and div3) and wrapped div2 and div3 in div 1.
- Set dimensions of div1 to 150px height by 300px width.
- Set dimensions of div2 and div3 to 100px height by 100px width.
- Set display of div2 and div3 to inline-block.
- FLoated div2 to the left and floated div3 to the right.
- Gave div2 and div3 margin-tops of 25 and div 2 a margin-left of 25 and div3 a margin-right of 25.
- Gave the container element a padding of 25px and a left-padding of 550px to push div1 into the center.
[Challenge 11](http://codepen.io/nnchambs/pen/PzAzLj)
