Responsive header |
Responsive header |
Legless |
Feb 23 2017, 11:21 AM
Post
#1
|
Newbie Group: Members Posts: 16 Joined: 6-January 17 Member No.: 26,256 |
Hello,
For the first time in many years, I have to write some html/css code - and ohhhh how the web has moved on.... I have to make a header for a forum which is 1000px wide and centered in the middle of the page. It has a logo to the left and a banner to the right and then some links underneath. It also should be responsive - but I can't even get the first part done. (i.e. floating the banner to the right.) Here is what I have so far... CODE #myWrap { width: 1000px; margin: 0 auto; padding-top: 12px; border: solid 1px #ff0000;} #forumLogo {display: inline-block; float: left; } #forumBanner {display: float: right; width: 500px;} #forumMenu {margin: 10px 0; text-align:center;} .forumMenu li {display: inline; } .forumMenu li a{display: inline-block;} .clearfix { style="clear: both;"} CODE <div id="myWrap"> <div id="forumLogo"> LOGO </div> <div id=forumBanner"> BANNER </div> <div class="clearfix;"></div> <div id="forumMenu"> <ul class="forumMenu"> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> <li><a href="">Link 5</a></li> </ul> </div> </div> Would it be possible for someone to give me some pointers here? I am stuck! Thanks. This post has been edited by Legless: Feb 23 2017, 11:22 AM |
Lo-Fi Version | Time is now: 17th April 2024 - 09:41 PM |