#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    8
    Rep Power
    0

    [Solved] Web page not applying code (vertical align middle)


    Hello:

    I have some CSS code which when I run the web page the code isn't being applied. The image and text is at the very top of the web page.

    You can view the page here http://www.fullfocuscp.com/ .

    Below I will include the CSS code and the HTML.

    Thank you in advance for the help.

    CSS:
    Code:
    /*-----	Simple reset  ----*/
    
    *{
    	margin:0;
    	padding:0;
    }
    
    /*------ General ------*/
    
    html{
    	background:url(images/back-of-church.jpg) no-repeat center center;  /* This image will be displayed fullscreen */
    	min-height:100%;  /* Ensure the html element always takes up the full height of the browser window */
    	background-size:cover;  /* The Magic */
    }
    
    body{
    	min-height:100%;  /* Workaround for some mobile browsers */
    	font:14px/1.3 'Segoe UI',Arial, sans-serif;
    }
    
    /*------ Header  -------*/
    
    #bar {
    	background-color: #111111;
    	top: 0;
    	box-shadow: 0 -1px 2px rgba(0,0,0,0.4);
    	height: 45px;
    	left: 0;
    	position: fixed;
    	width: 100%;
    	z-index: 100000;
    	opacity:.20;
    	filter: alpha(opacity=20); 
    	-moz-opacity: 0.20;
    
    img {
    	border:3px;
    }
    
    .toptext {
    	color: #9C6300;
    	font-size: 14px;
    	font-family: arial;
    	font-weight: bold;
    	left: 55%;
    	margin-top: 10px;
        margin-left: 110px;
    	position: absolute;
    	text-decoration: none;
    	top: 0;
    	vertical-align: middle;
    }
    
    .toplinks {
    	color: #9C6300;
    	font-size: 14px;
    	font-family: arial;
    	font-weight: bold;
    	left: 55%;
    	margin-top: 10px;
        margin-left: 110px;
    	position: absolute;
    	text-decoration: none;
    	top: 0;
    	vertical-align: middle;
    }
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Expires" content="-1" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta name="keywords" content="atlanta headshot photography,
                                   atlanta headshot photographer,
    							   atlanta advertising photography,
    							   atlanta advertising photographer,
    							   atlanta product photography,
    							   atlanta product photographer/>
    <meta name="description" content="Atlanta headshot photography, atlanta advertising photography, atlanta product photography serving the metro Atlanta area." />
    <META HTTP-EQUIV="distribution" CONTENT="Global">
    <meta http-equiv="resource-type" content="document">
    <META name="robots" content="index,follow">
    <META name="robots" content="ALL">
    <META name="REVISIT-AFTER" content="7 days">
    <meta name="SKYPE_TOOLBAR" content ="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/> 
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
           
            <!--[if lt IE 9]>
              <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->
        </head>
        
    <body>
    
    	
    	<img src="images/logo.png">
    	<span class="toptext">678 - 591 - 8121</class>
    	<span class="toplinks">HOME | PORTFOLIO | PRICING | ABOUT | CONTACT</span>	
    			
        <div id="bar">		
    	</div>	
    	
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    14
    Rep Power
    0
    I hope you don't mind a complete overhaul:

    Here's a preview:
    http://jsfiddle.net/leev18/z3xsW/embedded/result/
    will be deleted 24 hours

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Expires" content="-1" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta name="keywords" content="atlanta headshot photography,
                                   atlanta headshot photographer,
    							   atlanta advertising photography,
    							   atlanta advertising photographer,
    							   atlanta product photography,
    							   atlanta product photographer/>
    <meta name="description" content="Atlanta headshot photography, atlanta advertising photography, atlanta product photography serving the metro Atlanta area." />
    <META HTTP-EQUIV="distribution" CONTENT="Global">
    <meta http-equiv="resource-type" content="document">
    <META name="robots" content="index,follow">
    <META name="robots" content="ALL">
    <META name="REVISIT-AFTER" content="7 days">
    <meta name="SKYPE_TOOLBAR" content ="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/> 
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
           
    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    		
    <!--[if IE]>
    <style style="text/css">
    #nav-bar {
    	background-image: url("http://i282.photobucket.com/albums/kk246/leeV18/BGs/black-bg-transparent020_zps831e0e37.png");
    }
    </style>
    <![endif]-->
    </head>
        
    <body>
    
    	<div id="nav-bar">
    		<a href="#" id="site-logo"></a>
    		<div id="toplinks">
    			<a href="#">HOME</a> | 
    			<a href="#">PORTFOLIO</a> | 
    			<a href="#">PRICING</a> | 
    			<a href="#">ABOUT</a> | 
    			<a href="#">CONTACT</a> : 678 - 591 - 8121
    		</div>			
    	</div>
    	
    </body>
    </html>
    CSS:
    Code:
    /*-----	Simple reset  ----*/
    
    *{
    	margin:0;
    	padding:0;
    }
    
    /*------ General ------*/
    html, body { height: 101%; }
    
    body {
    	background:url(http://www.fullfocuscp.com/images/back-of-church.jpg) no-repeat center center;  /* This image will be displayed fullscreen */
    	background-size:cover;  /* The Magic */
    	font-family: arial;
    	font:14px/1.3 'Segoe UI',Arial, sans-serif;
    }
    
    /*------ Header  -------*/
    	
    #nav-bar {
    	top: 0;
    	height: 35px;
    	line-height: 35px;
    	padding: 10px;
    	position: fixed;
    	width: 100%;
    	z-index: 100000;
    	background-color:rgba(17,17,17,0.20);
    }
    
    #site-logo {
    	float: left;
    	height: 35px;
    	width: 500px;
    	display: block;
    	background-image: url("http://www.fullfocuscp.com/images/logo.png");
    }
    
    #toplinks {
    	float: left; 
    	margin-left: 20px;
    }
    
    #toplinks a {
    	color: #9C6300;
    	font-size: 14px;
    	font-weight: bold;
    	text-decoration: none;
    }
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    8
    Rep Power
    0
    Thank you, thank you, thank you......

    That is exactly what I need. I see the approach you took. And, I didn't mind the overhaul. Sometimes it has to happen.

    Just a quick question. How was the transparent image created? Did you use PhotoShop?

    Thanks again. Greatly appreciated.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    14
    Rep Power
    0
    Originally Posted by hbradshaw
    How was the transparent image created? Did you use PhotoShop?
    Paint.NET + Transparent Plugin
    - http://www.getpaint.net/download.html
    - http://forums.getpaint.net/index.php?/topic/2800-transparency-adjustment-effect-plugin/
    Both are free. You'll love using it.
    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

    By the way, fixed navigation bars can be bad. Because they can look bad on mobile browsers. Just pull out your iphone or ipod touch and see it for yourself. Computer World reports 25% of the web browser users are mobile browsers. A lot of people, including my families, are using iphones/ipod touch/droid/etc. to browse the web now.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    8
    Rep Power
    0
    Thanks again. I'll explore the sites.

IMN logo majestic logo threadwatch logo seochat tools logo