how to fix the css for button

on this website home page http://www.murraypark.com/ I want to replace the Room booking button (anchor) in the header, footer section with the social media icons and the room booking button should move to just above the icons.  What css changes would I need to make it look like as in the attached image.
0048MP-Website-Amends-st1-HomePa.png
mmalik15Asked:
Who is Participating?
 
wadehultsConnect With a Mentor Commented:
You will need to move your button code from the headerFoot div to the headerMid. I would recommend enclosing this in a child <div> element with positioning defined in your CSS. Something like:

 <div id="headerReservation" class="floatRight">{insert button code here}</div>

You would then insert your social media button codes into the place where your original reservation button code and enclose them in a <span id="social"> element to keep them in one spot within the <div id=headerFoot> section.

Once you have identified the various section id's, you can then tweak the CSS location attributes to place the elements to your liking. Except for the fine-tuning, you should be able to use your existing CSS without much modification, though you will need to add a definition section for the #headerReservation id similar to:

#headerReservation {
      float: right;
      height: 25px;
      width: 200px;
      position: fixed;
}

If you don't already, you will also need a float: clear; attribute in your #content <div>. This will prevent the main content region from inheriting any float values from preceding elements.

Of course, this is just a basic guideline to nudge you in the right direction. If you have any other scripting functions that come into play, you may need to make some additional changes.
0
 
mmalik15Author Commented:
Perfect buddy :)
0
All Courses

From novice to tech pro — start learning today.