View Full Version : How to create something like this with CSS

11-16-2012, 09:52 AM
I think it is possible:


Thnak you in advance for any info.

11-16-2012, 10:33 AM
Hello joliett89,
It's easy as long as the browser understands CSS3 -
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
#container {
width: 150px;
margin: 50px auto;
padding: 0 0 200px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #999;
background: #fff;
h1 {
line-height: 75px;
margin: 0;
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
background: #00f;
color: #fff;
text-align: center;
<div id="container">
<!--end container--></div>

11-16-2012, 11:13 AM
I actually got it by myself:

<div id="top" style="width: 180px; height: 58px; background-color: #1982d1; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom: none;">
<h3 style="color: white; font-size: 125%; text-align: center; padding: 5px;">Premium Sites With Abbey Brooks</h3>
<div id="bottom" style="width: 176px; height: 250px; border: 2px solid; border-color: #666; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top: none; margin-bottom: 20px;">
<ul style="list-style-type: none; padding: 5px;">
<li>First link goes here</li>
<li>Second link goes here</li>
<li>Third link goes here</li>

the <li> text doesnt "text-aling: left;" for some reason...

11-16-2012, 11:25 AM
http://office-porn.net (there is no adult content)

I can't align the text in the bottom part ("First link goes here" etc) to the left. I am not sure why...

I added text-align: left (and text-align: left !important) to div id="bottom", ul, li and none of these work...

# # # # # EDIT

I got this one too, thank you. It was a margin coming from Twenty Eleven theme css.