Mon, 2017-07-24 01:23
Hey Guys and Gals,
So I really struggle with placement in development. I look at a lot of websites with my job, and I want to code them on my own. I've studies HTML, CSS, PHP, and JavaScript, and I'm a master of none. I do a lot with WordPress, so I'm hoping to master that with some help here!
Here's my issue. I can't style a header to save my life. I know how I want it to look. I just can't achieve what I want to see(photo of what I want attached):
<!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js"> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="site-header"> <div id="header-image"> <img width="200" height="80" alt="" class="header-image" src="http://onofri.org/example/wp-content/uploads/2013/06/header1.jpg"> </div> <h1><a href="<?php bloginfo('url'); ?>/"> <div id="phone"> <a href="tel:636-277-8817">636-277-8817</a> </div> </div> <div id="main-nav"> <?php wp_nav_menu(array('theme_location' => 'main_nav', 'container' => '')); ?> </div> <div id='site-content'>
#site-header { background: #A28497; border-bottom: double 3px #aba; border-left: solid 1px #9a9; border-right: solid 1px #565; border-top: solid 1px #9a9; letter-spacing: 0.2em; margin: 0; padding: 15px 10px 15px 60px; border-radius: 5px; background-repeat: y; } #header-image { float: left; margin-bottom: 15px; } a[href^=tel] { color: white; display: inline-block; font-style: normal; margin-top: 10px; padding: 3px 5px; text-decoration: none; } #phone { text-align: right; color: #ffffff; font-weight: 300; letter-spacing: 1px; } #site-header h1 { font-size:32px; color: #ffff; font-weight: 300; letter-spacing: 1px; }