Explore Public Snippets
Found 71 snippets matching: "css layout"
public by lbottaro 429401 12 7 3
HTML header - footer layout using CSS and DIV
<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
/*只适用与在视口中居中的场景*/ main { width: 18em; padding: 1em 1.5em; margin: 50vh auto 0; transform: translateY(-50%); }
external by YeomanYe 48 0 1 0
CSS:layout alignCenterByPadding
/*通过padding设置居中可用于,满幅背景,定宽的内容*/ .test{ padding:1em; padding:1em calc(50% - 450px); }
external by YeomanYe 47 0 1 0
CSS:layout halignCenterByFlexbox
/*当我们使用 Flexbox 时, margin: auto 不仅在水平方向上将元素居中, 垂直方向上也是如此*/ body { display: flex; min-height: 100vh; margin: 0; } main { margin: auto; }
external by Orestiarsi 17 0 1 0
file:///Users/oresti/Downloads/CSS%20layout%20and%20fonts-Assessment/index.html
@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.
// 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
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
* { 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
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
##### 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)