working on it ...

Filters

Explore Public Snippets

Sort by

Found 71 snippets matching: "css layout"

    public by lbottaro  429401  12  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  17  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
    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)
    
    
    
    
    
    
    • Public Snippets
    • Channels Snippets