www.webdeveloper.com
Results 1 to 7 of 7

Thread: Can't get effect I want

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    7

    Can't get effect I want

    So I made this design and then tried to code it in html and css but came into problems.
    I could get the background and the bar going across the top but I could not get the text aligned to the left and right and to be verticaly aligned in the middle of the bar within the widths of the wrapper shown as the light colour.

    Design: http://i49.tinypic.com/2pu0k5g.png

    Hope you understand what I mean. Can someone let me know how it can be done?

    Thanks.

  2. #2
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    deleted by me.

    James
    Last edited by polyglot; 02-15-2013 at 08:26 PM.

  3. #3
    Join Date
    Feb 2013
    Posts
    7
    I don't think you understand.

    This is my html code:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="fonts.css">
    <title></title>
    </head>
    
    <body>
    
    	<div id="topbar">
    	</div>
    	
    	<div id="wrapper">
    	
    		<div id="topbarmain">
    		
    		<div id="onehundrednetwork">
    		TEST
    		</div>
    		
    		</div>
    	
    	</div>
    
    </body>
    
    </html>
    And this is the CSS I have:


    Code:
    body
    {
    	background-color: #4f4f4f;
    	margin: 0px;
    }
    
    #topbar
    {
    	background-color: #2a2a2a;
    	height: 45px;
    	width: 100%;
    }
    
    #wrapper
    {
    	width: 1032px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #topbarmain
    {
    	position: absolute;
    	top: 0px;
    	height: 45px;
    	background-color: #2a2a2a;
    }
    
    #onehundrednetwork
    {
    	display: table-cell;
    	vertical-align: middle;
    	height: 45px;
    	color: #fff;
    	text-align: left;
    	font-size: 16px;
    	text-shadow: #000 0px 2px; 
    	font-family: nevis, sans-serif;
    }
    I don't know how to make it look like the image i provided (adding the text on the right hand side.)

  4. #4
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    Deleted by me.

    James
    Last edited by polyglot; 02-15-2013 at 08:27 PM. Reason: added link

  5. #5
    Join Date
    Feb 2013
    Posts
    7
    Oh ok but I dont' see where you got these numbers of errors from as there is no live page. It's also not and error, it's a method i al looking for on how to do it.

  6. #6
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    Sorry, I was under the impression you posted the link to your page -- I will delete my previous responses.

    James

  7. #7
    Join Date
    Feb 2013
    Posts
    7
    I was a bit confused. Thanks for you time though.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles