SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member Apposl's Avatar
    Join Date
    Apr 2013
    Location
    Salem, OR
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question So close just need basic css styling help with header, anyone up?

    Hey all,

    I am trying to style this code to look like the picture I've attached, 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?

    header-bar.jpg

    The website is ne1up.com/chat if you want to see what I'm talking about, 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.

    HTML Code:
    <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>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    It's a little hard to style this without the full code as you have elements in there without rules applied to them but based on the above code you would need a rough structure like this:

    Code:
    	<div class="container">
    						<div class="head-left"><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" href="http://ne1up.com/"><img src="http://ne1up.com/wp-content/uploads/2013/06/alogo2.png" alt="Logo"></a></div>
    						<nav id="nav-main" class="nav-collapse" role="navigation">
    								<form class="navbar-search pull-right"  method="get" id="searchform" action="http://ne1up.com/">
    										<div>
    												<input type="text" class="search-query" placeholder="Search" name="s" id="s" value="">
    										</div>
    								</form>
    								<ul class="nav2">
    										<li><a 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></li>
    										<li><a 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></li>
    										<li><a 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></li>
    								</ul>
    						</nav>
    				</div>
    With css like this (don't use inline css as that is too awkward to manage):

    Code:
    <style type="text/css">
    .container:after {
    	content:" ";
    	display:block;
    	clear:both;
    	height:0;
    	overflow:hidden;
    }
    .container {
    	background:#000;
    	color:#fff;
    	position:relative;
    	line-height:38px;
    	min-height:38px;
    	zoom:1.0;
    }
    .head-left {
    	float:left;
    	margin:0 0 0 20px;
    	padding:0 20px 0 0;
    	border-right:1px solid #fff;
    }
    .head-left a, .head-left img { float:left }
    .navbar-search {
    	float:right;
    	margin:0 100px 0 0;
    }
    .navbar-search input {
    	margin:-2px 5px 0;
    	vertical-align:middle;
    }
    .nav2 {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    .nav2 li { float:right }
    .nav2 a {
    	color:#fff;
    	float:right;
    	margin:0 5px
    }
    .nav2 a:visited { color:#fff }
    .nav2 a i {
    	display:inline-block;
    	vertical-align:middle
    }
    </style>

  3. #3
    SitePoint Member Apposl's Avatar
    Join Date
    Apr 2013
    Location
    Salem, OR
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you SO much for your time in that reply, Paul!

    I had basically just tried to copy/paste. :-| Had figured that wouldn't work but figured it would give me a starting point since I don't know what I'm doing. :-)

    I'm going to work some more on this as soon as my daughter is done monopolizing my computer just wanted to thank you a lot for your time and effort answering my question!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •