Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Code a different structure in css

Tags:

css

structure

The image:

enter image description here

I want to code this image!

A simple code: (with problem)

.hr{
  position:relative;
  height:100px;
  background : #ddd;
  clear both;
  margin-top: 100px ;
}
.vr{
  position:absolute;
  width:100px;
  height:900px;
  background : #000;
  top:-300px;
  z-index:-1
}


<div class='hr' style=''><div class='vr' style='left:100px;'></div><div class='vr' style='right:100px;z-index:0'></div></div>
<div class='hr' style=''></div>

..............

like image 680
danial dezfooli Avatar asked Jul 31 '15 10:07

danial dezfooli


People also ask

How do you style a CSS rule?

A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

How do you declare multiple CSS styles?

Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. p is a selector in CSS (it points to the HTML element you want to style: <p>).

How do you style an element in CSS?

CSS Syntax The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

What are the two components of CSS?

At its most basic level, CSS consists of two components: Properties: These are human-readable identifiers that indicate which stylistic features you want to modify. For example, font-size, width, background-color. Values: Each property is assigned a value. This value indicates how to style the property.


2 Answers

You can do a hack using pseudo elements this way -

.hr{
  position:relative;
  height:100px;
  background : #ddd;
  clear both;
  margin-top: 100px ;
}
.vr{
  position:absolute;
  width:100px;
  height:900px;
  background : #000;
  top:-300px;
  z-index:-1
}

.bottom:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
}
<div class='hr' style=''>
  <div class='vr' style='left:100px;'></div>
  <div class='vr' style='right:100px;z-index:0'></div>
</div>
<div class='hr bottom' style=''></div>
like image 186
Siddharth Thevaril Avatar answered Oct 17 '22 06:10

Siddharth Thevaril


This is my approach: http://codepen.io/anon/pen/vOvNdK

I created 4 div elements in the LBRT order: the first element (the left vertical bar) overlaps the last one (the top horizontal bar) in the top-left cross thanks to a :before pseudoelement applied to the left vertical bar.

All the sizes and offsets are in relative units, so you could easily scale up (or down) the whole draw simply changing the size of the parent element.

Markup

<div class="draw">
  <div class="v1"></div>
  <div class="h2"></div>
  <div class="v2"></div>
  <div class="h1"></div>
</div>

CSS

.draw { 
  position: relative; 
  width: 400px;
  height: 400px;
  border: 1px #ccc dashed;
}

.draw div { position: absolute; }

.draw div[class^="h"] {
  height: 20%;
  width: 100%;
  left: 0;
  background: #d8d8d8;
}

.draw div[class^="v"] {
  height: 100%;
  width: 20%;
  top: 0;
  background: #212121;
}

.draw .h1 { top : 20%; }
.draw .h2 { top : 60%; }
.draw .v1 { left : 20%; }
.draw .v2 { left : 60%; }

.draw .v1:before { 
  position: inherit;
  z-index: 2;
  top: 20%;
  left: 0;
  width: 100%;
  height: 20%;
  content: "";
  background: inherit;
}

Result

enter image description here

like image 39
Fabrizio Calderan Avatar answered Oct 17 '22 07:10

Fabrizio Calderan