• Locked
No replies
Mon, 2017-07-24 01:23
stlcardsfan
stlcardsfan's picture
Offline
newbie
St Louis
Last seen: 3 years 9 weeks ago
St Louis
Timezone: GMT-5
Joined: 2017-07-24
Posts: 1
Points: 2

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;
}

Top
Tags: