I am trying to draw a rectangle and I found the website for css code(http://css-tricks.com/examples/ShapesOfCSS/). How do I put together in HTML? In other words, how do I define #rectangle in HTML.
Facebook always has blue rectangle at the top of each page. What is the best way to achieve like them?
I appreciate if someone could help me.
This question is related to
html
css
css-shapes
the css you are showing must be applied to a block element, like a div. So :
<div id="#rectangle"></div>
You need to identify your sections and then style them with CSS. In this case, this might work:
HTML
<div id="blueRectangle"></div>
CSS
#blueRectangle {
background: #4679BD;
min-height: 50px;
//width: 100%;
}
css:
.example {
display: table;
width: 200px;
height: 200px;
background: #4679BD;
}
html:
<div class="retangulo">
</div>
Use <div id="rectangle" style="width:number px; height:number px; background-color:blue"></div>
This will create a blue rectangle.
Would recommend using svg for graphical elements. While using css to style your elements.
#box {_x000D_
fill: orange;_x000D_
stroke: black;_x000D_
}<svg>_x000D_
<rect id="box" x="0" y="0" width="50" height="50"/>_x000D_
</svg>HTML
<div id="rectangle"></div>
CSS
#rectangle{
width:200px;
height:100px;
background:blue;
}
I strongly suggest you read about CSS selectors and the basics of HTML.
To mimic the rectangle with fixed position on facebook, try something like this:
<div id="rectangle"></div>
CSS
#rectangle {
width:100%;
height:60px;
background:#00f;
position:fixed;
top:0;
left:0;
}
In the HTML page you have to to put your css code between the tags, while in the body a div which has as id rectangle. Here the code:
<!doctype>
<html>
<head>
<style>
#rectangle
{
all your css code
}
</style>
</head>
<body>
<div id="rectangle"></div>
</body>
</html>
I do the following in my eBay listings:
<p style="border:solid thick darkblue; border-radius: 1em;
border-width:3px; padding-left:9px; padding-top:6px;
padding-bottom:6px; margin:2px; width:980px;">
This produces a box border with rounded corners.You can play with the variables.
Source: Stackoverflow.com