www.webdeveloper.com
Results 1 to 7 of 7

Thread: Can't get effect I want

  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 07:26 PM.
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.

  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 07:27 PM. Reason: added link
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.

  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
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.

  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