Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    172
    Thanks
    64
    Thanked 2 Times in 2 Posts

    How to create something like this with CSS

    I think it is possible:



    Thnak you in advance for any info.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello joliett89,
    It's easy as long as the browser understands CSS3 -
    Code:
    <!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>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    joliett89 (11-16-2012)

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Posts
    172
    Thanks
    64
    Thanked 2 Times in 2 Posts
    I actually got it by myself:

    Code:
    <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...

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Posts
    172
    Thanks
    64
    Thanked 2 Times in 2 Posts
    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.
    Last edited by joliett89; 11-16-2012 at 10:51 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •