Hey all, I am trying to style this section to look like this, like it does on the rest of my WordPress site. This is a header above a Vanilla forum installation. But I'm a total newbie at this and none of the CSS I use really works. It's displaying centered right now with the links 'kinda' over to the right like I want, but I want it all even and looking nice like the rest of my site. Would anyone be able to show me what's wrong with my code or where I put styling elements to make it look like the picture I've attached? The website is ne1up.com/chat, but please don't click elsewhere, it's an adult-only website. I've attached a picture of what my navbar header looks elsewhere. Thank you SO much for any help. And here is the code. You can see how it looks right now at ne1up dot com/chat - it's not pretty, sigh. <div id="topmenu" class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container" style="background:#000;color:#fff;position:relative; left:-20px;"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <i class="icon-bar"></i> <i class="icon-bar"></i> <i class="icon-bar"></i> </a> <a class="brand logo" style="position:relative; left:-20px;;" href="http://ne1up.com/"><img src="http://ne1up.com/wp-content/uploads/2013/06/alogo2.png" alt="Logo"</a> <nav id="nav-main" class="nav-collapse" role="navigation"> <form class="navbar-search pull-right" style="float:right;margin:5px;" method="get" id="searchform" action="http://ne1up.com/"> <input type="text" class="search-query" placeholder="Search" name="s" id="s" value=""> </form> <a style="color:#fff;float:right;margin:5px;" rel="nofollow" href="http://ne1up.com/favorites" title="My Favorites" class="topmenu-social pull-right">My Favorites<i class="icon-heart icon-large"></i></a> <a style="color:#fff;float:right;margin:5px;" rel="nofollow" href="http://ne1up.com/wp-login.php" title="Add Your Link" class="simplemodal-login topmenu-social pull-right">Add Your Link <i class="icon-heart icon-large"></i></a> <a style="color:#fff;float:right;margin:5px;" rel="nofollow" href="http://ne1up.com/chat" title="Online Chat" class="topmenu-social pull-right">Online Chat <i class="icon-heart icon-large"></i></a> <br> </nav> </div> </div> </div> HTML:
Hi, You can add this: <div id="topmenu" class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container" style="background:#000;color:#fff;position:relative; height: 40px;"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" style=" float: right; "> <i class="icon-bar"></i> <i class="icon-bar"></i> <i class="icon-bar"></i> </a> <a class="brand logo" style="position:relative; left: 40px;;float: left;" href="http://ne1up.com/"><img src="http://ne1up.com/wp-content/uploads/2013/06/alogo2.png" alt="Logo" <="" a=""> </a><nav id="nav-main" class="nav-collapse" role="navigation"><a class="brand logo" style="position:relative; left:-20px;;" href="http://ne1up.com/"> <form class="navbar-search pull-right" style="float:right;margin:5px;" method="get" id="searchform" action="http://ne1up.com/"> <input type="text" class="search-query" placeholder="Search" name="s" id="s" value=""> </form> </a><a style="color:#fff;float:right;margin:5px;" rel="nofollow" href="http://ne1up.com/favorites" title="My Favorites" class="topmenu-social pull-right">My Favorites<i class="icon-heart icon-large"></i></a> <a style="color:#fff;float:right;margin:5px;" rel="nofollow" href="http://ne1up.com/wp-login.php" title="Add Your Link" class="simplemodal-login topmenu-social pull-right">Add Your Link <i class="icon-heart icon-large"></i></a> <a style="color:#fff;float:right;margin:5px;" rel="nofollow" href="http://ne1up.com/chat" title="Online Chat" class="topmenu-social pull-right">Online Chat <i class="icon-heart icon-large"></i></a> <br> </nav> </div> </div> </div> HTML:
or add this: <div id="topmenu" class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container" style="background:#000;color:#fff;position:relative; height: 40px;"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" style=" float: right; "> <i class="icon-bar"></i> <i class="icon-bar"></i> <i class="icon-bar"></i> </a> <a class="brand logo" style="position:relative; left: 40px;;float: left;" href="http://ne1up.com/"><img src="http://ne1up.com/wp-content/uploads/2013/06/alogo2.png" alt="Logo" <="" a=""> </a><nav id="nav-main" class="nav-collapse" role="navigation"><a class="brand logo" style="position:relative; left:-20px;;" href="http://ne1up.com/"> <form class="navbar-search pull-right" style="float:right;margin:5px;" method="get" id="searchform" action="http://ne1up.com/"> <input type="text" class="search-query" placeholder="Search" name="s" id="s" value=""> </form> </a><a style="color:#fff;float:right;margin:5px;" rel="nofollow" href="http://ne1up.com/favorites" title="My Favorites" class="topmenu-social pull-right">My Favorites<i class="icon-heart icon-large"></i></a> <a style="color:#fff;float:right;margin:5px;" rel="nofollow" href="http://ne1up.com/wp-login.php" title="Add Your Link" class="simplemodal-login topmenu-social pull-right">Add Your Link <i class="icon-heart icon-large"></i></a> <a style="color:#fff;float:right;margin:5px;" rel="nofollow" href="http://ne1up.com/chat" title="Online Chat" class="topmenu-social pull-right">Online Chat <i class="icon-heart icon-large"></i></a> <br> </nav> </div> </div> </div> HTML:
Thank you! I will try these asap. I'm so helpless at even basic stuff like this. Your time and input is so appreciated, thanks so much.
That markup is a laundry-list of how not to build a page, lacking semantics, accessible form design, and in general does things that have no business on a page. I've no clue what that 'nav-collapse' nonsense is, from the pic it doesn't seem to actually be used... It would REALLY help to simplify this WAY down and use some accessible design here; to that end I'd also suggest axing the stupid 'false simplicity' of the placeholder for an actual label or input[submit] -- if you can't fit it, then it's a bad design. NONE of those style attributes have ANY business in the markup, particularly on an element that likely appears on all pages. There is little if any reason for the markup on that to be much more than: <div id="top"><div class="widthWrapper"> <h1> <a href="/"> ne1up? <span><!-- image replacement --></span> </a> </h1> <form method="get" action="/"> <fieldset> <input type="text" name="s" id="searchValue" /> <input type="submit" value="Search" class="submit" /> </fieldset> </form> <ul> <li class="myFavorites"> <a rel="nofollow" href="/favorites"> <span>My Favorites</span> </a> </li> <li class="addLink"> <a rel="nofollow" href="/wp-login.php"> <span>Add Your Link</span> </a> </li> <li class="onlineChat"> <a rel="nofollow" href="/chat"> <span>Online Chat</span> </a> </li> </ul> <!-- .widthWrapper, #top --></div> Code (markup): Background color and float containing on #top (I'd use float+100% width there), width constraining on .widthWrapper, float the h1 (the heading under which ALL content on the page is a subsection!), float the form, float the UL... The logo image goes on the span in the h1 apo'd over the text. Set the LI to display:inline, anchors as inline-block, relpo and overflow:hidden, put in the icons as background images on the anchors, and apo the spans to show on hover letting you style them instead of relying on the tooltips. (which generally speaking if you have to put a title on a anchor that's identical to the text inside it, you're doing something wrong!).
Thanks so much. You guys have both given me a much better understanding of this and I think I'm really getting it sorted out now. Had thought I could copy/paste from my WP header and strip away what I didn't need, still have the basic foundation...but it just confused the heck out of me as to what I was actually looking at, and what was relevant and what was not.