I'm currently facing some challenges with a simple task, due to being new to web design and system administration. My boss requested two phone numbers instead of one in the top box, and I need them aligned while keeping the "free estimate" button in place.
I tried using a DIV with relative positioning, but it's not pushing the main header menu bar down as expected.
CSS:
#head {
float: right;
width: 500px;
height: 79px;
font-size: 1.5em;
padding-right: 27px;
padding-bottom: 6px;
display: block;
position:relative;
}
#head1 {
width: 450px;
float: left;
font-family: kreon;
font-size: 1.3em;
}
h1 {
font-size: 1.6em;
color: #FFFFFF;
font-family: kreon;
text-shadow: 2px 1px 1px #000;
-webkit-font-smoothing: antialiased;
}
.header {
position: relative;
}
.container {
width: 1030px;
margin: 0 auto;
z-index: 2;
}
.header {
position: relative;
}
HTML:
<div class="container">
<div class="header">
<div id="head1">
<h1>Safer Products, Better Results!</h1></div><div id="head">
<h1><img src="topbutn.png" width="182px" height="33px" alt="topbtn"> (618) 632-8873
<br>(636) 272-8873 </h1>
</div>
<img src="/mainbar2.png" alt="main" name="Nav Bar"
border="0" usemap="#Map" id="bar">
<map name="Map">
<area shape="rect" coords="33,20,231,159" href="/index.html" alt="Lawn and Landscaping from the pros!">
<area shape="rect" coords="862,31,949,145" href="/paybal.php" alt="">
<area shape="rect" coords="741,33,847,148" href="http://www.facebook.com/pages/Tee-Time-Lawn-Care/173861472673451" alt="Expert Advice Blog">
<area shape="rect" coords="626,33,722,146" href="/landscaping.html" alt="Landscaping services">
<area shape="rect" coords="516,31,614,146" href="/pestcontrol.html" alt="Pest control">
<area shape="rect" coords="395,31,508,146" href="/trees.html" alt="Tree and shrub Services">
<area shape="rect" coords="275,32,379,147" href="/lawncare.html">
</map>
<!-- end .header -->
</div>