Creating a custom header
-
I’m new to wordpress have always created websites using html/css and I am having a ton of trouble figuring this thing out. I watched a bunch of tutorials on vtc but I’m lost.
Basically I’m trying to create a custom header. It would have the main header container and then have 2 floating div’s displaying inline.
<div id="header"> <div id="left_head"> <img src="JS_Logo.gif" width="133" height="124"/></div> <div id="right_head"> <img src="GC_name.png" width="469" height="58"/> <p class="test"><marquee border="1" width="484" height="25" bgcolor="#000000" scrolldelay="10" scrollamount="1" align="middle" style="background-color: #404041; color: #FFFFFF; font-weight: bold;">Gold = <?PHP echo $prices;?> Silver = <?PHP echo $prices1;?> Platinum = <?PHP echo $prices2;?> Palladium = <?PHP echo $prices3;?> </marquee></p> <div class "menu"> \*My Navigation would go here*\</div></div> </div>
This is pretty ugly because I just threw it together as an example but left side would be logo – right side would have an image, underneath that would be a <p> containing a ticker and underneath that would be the navigation for the site.
CSS would look something like this:
#header { width: 780px; height: 150px; background-image: url(header_bg.gif); background-repeat: repeat-x; border-bottom: 5px solid #000; } #left_head { float: left; display: inline; width: 133px; height: 124px; margin: 14px 25px 15px 25px; } #right_head { float: left; display: inline; width: 590px; height: 124px; margin: 14px 0px 15px 0px; background-color: inherit; }
Now trying to accomplish this in wordpress. I started by using the default twentyeleven theme. I created a child theme and import the default style.css into it. I copied the css for the header and menu directly into my child theme css. I was able to get the background-image to work on the #branding. I created a id called Logo. Then placed the div into the header.php. I can see the alt text but the image wont display. I also changed the #access to float: left, display: inline and changed the width but it still wont move to the right.
I’m sure this is probably confusing but if someone could help me out or point me to somewhere that I can read about this. I’ve tried googling and watching the wordpress videos on vtc and I’m still stuck.
- The topic ‘Creating a custom header’ is closed to new replies.