How to create something like this with CSS

joliett89

11-16-2012, 08:52 AM

I think it is possible:

http://ghetto-porn.com/hello.gif

Thnak you in advance for any info.

Excavator

11-16-2012, 09:33 AM

Hello joliett89,
It's easy as long as the browser understands CSS3 - <!DOCTYPE HTML>
<html>
<head>
<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;
}
</style>
</head>
<body>
<div id="container">
<h1>Hello!</h1>
</div>
</body>
</html>

joliett89

11-16-2012, 10: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>
<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>
</ul>
</div>

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

joliett89

11-16-2012, 10: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.