I want to create a drop down menu, when i click the glyphicon the down arrow, it should view the drop down menu which has these items [Messages, log out, etc..].
However when i click it nothing appears at all, what is missing here?
//Html File:
<html>
<!-- Head -->
<head>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<!-- Body -->
<body>
<div class="navbar">
<i class="fa fa-home"></i> Marble
<a class="left"> <i onclick="myFunction(this)" class=" fa fa-bell" ></i> Notifications </a>
<a class="left user"> <i class=" fa fa-user-circle"> </i> User </a>
<div class="dropdown">
<a class="editClass dropdown-toggle" data-toggle="dropdown" > <span class=" glyphicon glyphicon-menu-down"></span> </a>
<ul class="dropdown-menu"> //when i remove class="dropdown-menu", the items appears but the drop down is gone, and when i add them back, the items are not shown when i click the drop down icon.
<li> <a> <i class="fa fa-envelope-o"></i> Messages </a> </li>
<li role="separator" class="divider"></li>
<li> <a> <i class="fa fa-hourglass-3"></i> Timeline </a> </li>
<li role="separator" class="divider"></li>
<li> <a> <i class="fa fa-cog"></i> Settings </a> </li>
<li role="separator" class="divider"></li>
<li> <a> <span class="glyphicon glyphicon-log-out"></span> Log Out </a> </li>
<li role="separator" class="divider"></li>
</ul>
</div>
</div>
<div>
<img src="Diagram.png" alt="diagram" width="400" height="300">
</div>
<div>
<p id="sentence"> "You don't have any projects" </p>
<button onclick="createProject()" class="button1 btn btn-lg"> <b> Add Project </b> </button>
</div>
<div>
<form class="form-popup" id="projects">
<h2 align="center"> <span class="glyphicon glyphicon-th"></span> New Project </h2>
<input type="text" placeholder="Project Name" required> <br>
<textarea placeholder="Project Description" required=""></textarea> <br>
<p> Start Date: </p>
<p> End Date: </p>
<input type="Date" name="start Date" required="">
<input type="Date" name="End Date" required="">
<h2 align="center"> <span class="glyphicon glyphicon-book"> </span> References </h2>
<div id="refTextBoxes">
<input type="text" placeholder="Add Reference" required> <br>
</div>
<button onclick="addRef()"> Add another </button> <br>
<button type="submit" onclick="hideAndAdd()" > Done </button>
<!-- class="btn" bt3ml el button shakl kda 7elw -->
</form>
</div>
<script>
function myFunction(x)
{
x.classList.toggle("fa-bell-slash");
}
function createProject()
{
document.getElementById("projects").style.display = "block";
}
function addRef()
{
var totalTextBoxes = document.getElementsByClassName("input_text");
totalTextBoxes = totalTextBoxes.length + 1;
document.getElementById("refTextBoxes").innerHTML=document.getElementById("refTextBoxes").innerHTML+
"<input type='text' class='input_text' id='input_text"+totalTextBoxes+"' placeholder='Add Reference' + required> <br>";
}
function hideAndAdd()
{
var x = document.getElementById("sentence");
x.style.display = "none";
}
</script>
</body>
<!-- Closing of html tag -->
</html>
//Css File:
body
{
font-family: Arial, Helvetica, sans-serif;
/* background-color: #ABB1BA; */
}
.form-popup
{
display: none;
}
/* Style the navigation bar */
.navbar
{
width: 100%;
background-color: #877ebf;
overflow: auto;
}
/* Navbar links */
.navbar a
{
float: left ;
text-decoration: none;
color: #CCCCCC;
font-size: 17px;
padding: 12px;
}
/* Navbar links on mouse-over */
.navbar a:hover, i:hover, span:hover
{
background-color: #555;
cursor: pointer;
}
img
{
display: block;
margin-left: auto;
margin-right: auto;
}
p
{
text-align: center;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 20px;
}
button
{
text-align: center;
font-size: 16px;
margin: 25px 475px;
cursor: pointer;
}
.button1
{
background-color: #CCCCCC;
color: #333333;
border: 4px solid #877ebf;
}
/*
.navbar i.editClass, span.editClass
{
float: right;
}
*/
.left
{
position: absolute;
right:135;
}
.user
{
/*margin: 25px 25px; */
/*float: right;
padding: 100px; */
position: absolute;
right:40;
}
.editClass
{
position: absolute;
right:5;
}
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
I'm using here Bootstrap, html, and css.
I think there is problem in the css file, but i can't manage to find where exactly.
You have overflow effectively hidden on your navbar. Remove that.
.navbar {
/* overflow: auto; */
}
Demo
You'll want to get familiar with your browser's document inspector. It'll make diagnosing things like this almost effortless.
Related
I'm working on a website. I'm coloring the menu items, but when coloring in the top left image (background color), it gets colored in square.
I would like to have it colored in skewed, so that it follows the black outline.
A screenshot of the problem and some of the html:
Is there anything I could do to make this work?
The html code of the bar:
<div class="iwgh2-bar">
<div class="iw2-layout iw2-default-breakpoint">
<div class="iw2-wrapper iw2-default-margin">
<div class="iw2-inner-wrapper">
<div class="iwgh2-navigation">
<a class="iw2-branded" href="https://www.vlaanderen.be/nl" target="_self">
<div class="iwgh2-branding-logo"></div>
<span>Vlaanderen</span>
</a>
<div class="iw2-menu iw2-menu-has-items" data-show-menu-help="Toon navigatie menu" data-hide-menu-help="Verberg navigatie menu">
<div class="iwgh2-navigation-menu-toggle-wrapper">
<div class="iwgh2-navigation-menu-toggle-animation-wrapper" style="">
<a class="iwgh2-navigation-menu-site" style="" href="http://binnenland.vlaanderen.be">Agentschap Binnenlands Bestuur</a>
<a class="iwgh2-navigation-menu-breadcrumb" style="" href="http://www.gelijkekansen.be">Gelijke Kansen</a>
<a class="iwgh2-navigation-menu-toggle iw2-exclude-from-outbound-link-tracking" href="javascript:;" aria-expanded="false" aria-owns="64ed92f1-fece-e61f-2d15-0af8093d9040" aria-controls="64ed92f1-fece-e61f-2d15-0af8093d9040"><span class="iw2-visually-hidden iw2-help-text"> Toon navigatie menu </span></a>
</div>
</div>
<div class="iwgh2-flyout-wrapper iw2-window-closed" style="display: none; left: 375.4px;" tabindex="-1" id="64ed92f1-fece-e61f-2d15-0af8093d9040">
<div class="iwgh2-search iw2-hidden" role="search">
<div class="iwgh2-form-label">
<label for="iwgh2-search-field">Zoeken</label>
</div>
<div class="iwgh2-form-textfield">
<input id="iwgh2-search-field" class="iwgh2-search-field iwgh2-form-text" name="query" type="search">
</div>
<div class="iwgh2-form-actions">
<div class="iwgh2-form-action">
<div class="iwgh2-form-button">
<input class="iwgh2-form-submit" name="op" value="" type="submit">
</div>
</div>
</div>
</div>
<ul class="iw2-menu-items" tabindex="-1">
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://lokaalbestuur.vlaanderen.be" target="_self">Lokaal Bestuur</a></li>
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://www.thuisindestad.be" target="_self">Vlaams Stedenbeleid</a></li>
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://integratiebeleid.vlaanderen.be" target="_self">Integratie en Inburgering</a></li>
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://www.vlaamserand.be" target="_self">Beleid Vlaamse Rand</a></li>
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://brussel.vlaanderen.be/home.html" target="_self">Beleid Brussel</a></li>
</ul>
</div>
</div>
</div>
<div class="iwgh2-extensions">
<div class="iwgh2-extension-contact" data-show-menu-help="Toon menu" data-hide-menu-help="Verberg menu">
<a class="iwgh2-extension-contact-toggle iw2-exclude-from-outbound-link-tracking" href="http://www.gelijkekansen.be/Praktisch/Contact.aspx" target="_self" aria-owns="906864c8-0db7-9b35-52ce-143b0e4d962a" aria-controls="906864c8-0db7-9b35-52ce-143b0e4d962a" aria-expanded="false"><span class="iw2-visually-hidden iw2-help-text"> Toon menu </span>Contacteer ons</a>
<div class="iwgh2-extension-contact-wrapper iwgh2-flyout-wrapper">
<div class="iwgh2-contact-menu iw2-window-closed iw2-menu-has-items" style="display:none;" tabindex="-1" id="906864c8-0db7-9b35-52ce-143b0e4d962a">
<div class="iwgh2-contact-menu-header">
<span class="iw2-menu-item-title">Gelijke kansen</span>
</div>
<ul class="iw2-menu-items">
<li class="iw2-menu-item iw2-contact-section-entry iw2-contact-section-entry-icon-link iw2-contact-section-entry-type-link"><a class="iw2-menu-item-wrapper" href="http://www.gelijkekansen.be/Praktisch/Contact.aspx" target="_self"><span class="iw2-menu-item-title">Contacteer ons</span>
<div class="iw2-menu-item-description"></div>
</a></li>
<li class="iw2-menu-item iw2-contact-section-entry iw2-contact-section-entry-icon-link iw2-contact-section-entry-type-link"><a class="iw2-menu-item-wrapper" href="http://binnenland.vlaanderen.be/klachten" target="_self"><span class="iw2-menu-item-title">Klachten</span>
<div class="iw2-menu-item-description">Waar kan ik terecht met een klacht?</div>
</a></li>
</ul>
</div>
<div class="iwgh2-windows">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css:
.iwgh2.iwgh2-redesign .iwgh2-bar {
background-color: #fff;
border-bottom: 1px solid #cbd2da;
}
.iwgh2.iwgh2-redesign.iwgh2-default-margin .iw2-layout .iw2-wrapper.iw2-default-margin {
padding: 0;
}
.iwgh2-bar .iw2-wrapper {
*zoom: 1;
position: relative;
}
.iw2-wrapper .iw2-inner-wrapper {
position: relative;
}
.iwgh2-navigation {
float: left;
white-space: nowrap;
}
.iwgh2.iwgh2-redesign .iwgh2-navigation>a {
color: #333332;
font-size: 1.1875em;
line-height: 2.31579em;
text-transform: none;
transition: color 0.2s;
}
.iwgh2.iwgh2-redesign.iwgh2-redesign-alt .iwgh2-branding-logo {
position: relative;
width: 47px;
background-color: #FFE507;
overflow: hidden;
}
.iwgh2 .iw2-menu {
display: inline-block;
vertical-align: bottom;
position: relative;
}
.iwgh2.iwgh2-redesign.iwgh2-default-margin .iw2-layout {
max-width: none;
}
.iwgh2-bar .iw2-layout {
position: relative;
overflow: visible;
}
Take a look at this fiddle and see if that is what you wanted
#trapezoid {
border-bottom: 100px solid #FFE507;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
https://jsfiddle.net/CaffeinatedCod3r/r7deqakL/
More CSS Shapes : https://css-tricks.com/the-shapes-of-css/
Below is the HTML code for my angular JS web app:
<div class="choice" >
<br> <br>
<ul>
<li class="players" ng-repeat="player in players">
<img ng-src="{{player.image}}"><br><br>
<span class="glyphicon glyphicon-user"></span> {{player.name}} <br>
<span class="glyphicon glyphicon-flag"></span> {{player.Team}} <br>
<span class="glyphicon glyphicon-tag"></span>₦{{player.price}} <br>
<span class="glyphicon glyphicon-knight"></span>{{player.position| uppercase }}<br>
<span class="glyphicon glyphicon-info-sign"></span>{{player.Status}}
<br>
<button class="btn btn-secondary btn-sm" ng-class="{'btn-danger': history.indexOf(player) >= 0 }" ng-click="buy(player)">{{history.indexOf(player)>=0?'REMOVE':'SELECT'}}</button>
</li>
</ul>
<br><br>
<button type="submit" class="btn btn-lg btn-primary btn-md " ng-disabled="history.length<6" ng-disabled="getTotal<0" ng-click="saveTeam()" > Save Team </button>
<br><br>
</div>
And below is the CSS:
.choice{
background: white;
color: #333;
font-size: 13px;
}
.choice ul {
list-style: none;
}
.choice img {
max-height: 100px;
max-width: 65px;
margin-top: 7px;
}
.players{
display: inline-table;
float: left;
text-align: left;
}
MY ISSUE:
The Issue i have is that the spacing in between the line elements is not consistent between the list elements. Depending on the length of the name a player, the space between one player and the next is displayed inconsistently. I had hopes that using the flex: left; would solve this but it does not. Is there a way to achieve equal spacing between the list elements ?
use ulClass class in your <ul> tag. and its css as below
.ulClass{
display: flex;
flex-direction: column;
justify-content: space-between;
}
I have navigation created using nav tabs.
I wan't to set color on hover, but I can't
I tried this, but not working .
.tab2:hover {
background-color: green;
}
.tab3:hover {
background-color: green;
}
HTML
<div class="col-md-10">
<nav class="row">
<ul class="nav nav-tabs">
<li class="tab1"> <span class="glyphicon glyphicon-user"></span> Name    <span class="glyphicon glyphicon-chevron-down"></span> </li>
<li class="tab1"><span class="glyphicon glyphicon-flag"></span>Text Link </li>
<li class="tab1"> <span class="glyphicon glyphicon-envelope"></span> Message </li>
<li class="tab1"> <span class="glyphicon glyphicon-oil"></span>10 </li>
<li class="tab1"><span class="glyphicon glyphicon-asterisk"></span>   </li>
<li class="tab1"><span class="glyphicon glyphicon-home"></span>  </li>
<li class="tab2"> <span class="glyphicon glyphicon-chevron-down"></span>     KATEGORIJE </li>
<li class="tab2">RADNJE</li>
<li class="tab2">VOZILA</li>
<li class="tab2">NEKRETNINE</li>
<li class="tab2">NAJNOVIJE</li>
<li class="tab2">HITNO</li>
<li class="tab2">USLUGE</li>
<li class="tab2">        <span class="glyphicon glyphicon-chevron-down"></span>     OSTALI LINKOVI </li>
</ul>
</nav>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.nav>li>a {
padding: 10px 3px;
font-weight: bold;
color:white;
font-size: 13px;
}
.tab1 {
background-color:#324255;
height: 42px;
}
.tab2 {
background-color:#405072;
height: 42px;
}
.tab3 {
background-color: #405072;
height:42px;
}
.nav-tabs li {
border-left: 1px solid #52617b;
border-right: 1px solid #52617b;
}
ul {
background-color: #405072;
height:43px;
}
.tab2:hover {
background-color: green;
}
.tab3:hover {
background-color: green;
}
I'll try to be as specific as I can so you understand it all.
1. When I pasted your html and css in the fiddle, I forgot to add the link for bootstrap stylesheet in the html as well. Bootstrap uses a CDN as you might know and it allows you to link with their stylesheet without downloading it and actually placing it in your website folders.
This is the link I am referring to:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
I just added this above all the html in the fiddle.
To answer your original question. Bootstraps stylesheet is overwriting your stylesheet.
Your <li> is working fine and has a green background. But the <a> has a background color of its own which is coming from bootstrap.
See fiddle here https://jsfiddle.net/otuy1foo/3/. And in the css I placed the css code in comments at the bottom.
/*This is the css you need to add*/
.nav-tabs>li>a:hover, .nav>li>a:focus, .nav>li>a:hover {
border-color: transparent !important;
background-color: transparent !important;
}
I'm trying to put a checkbox form in a dropdown like this:
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Dropdown Form<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><label class="checkbox"><input type="checkbox">Two</label></li>
<li><label class="checkbox"><input type="checkbox">Two</label></li>
</ul>
</li>
</ul>
Here is a Demo in Bootply
However, as you can see in the demo, for whatever reason the actual checkbox itself appears outside of the dropdown menu. Can anyone tell me what's causing that, and how it should be implemented instead? If I take the label class out it works but it's all bunched up.
Here's what we'll build:
HTML
Essentially, we'll look to combine two different sets of Bootstrap controls & styles: Dropdowns & Checkboxes. Inside of each li, we'll use a label instead of an a element, so that we can wrap the checkbox in a label and make the entire row clickable.
<ul class="dropdown-menu checkbox-menu allow-focus">
<li >
<label>
<input type="checkbox"> Cheese
</label>
</li>
</ul>
CSS
We can steal some of the styles normally applied to .dropdown-menu li a, input and apply them to our label option instead. We'll make the label occupy the full width of the container and fix some label / checkbox alignment issues. Additionally, we'll add styles for .active and :hover.
.checkbox-menu li label {
display: block;
padding: 3px 10px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
margin:0;
transition: background-color .4s ease;
}
.checkbox-menu li input {
margin: 0px 5px;
top: 2px;
position: relative;
}
.checkbox-menu li.active label {
background-color: #cbcbff;
font-weight:bold;
}
.checkbox-menu li label:hover,
.checkbox-menu li label:focus {
background-color: #f5f5f5;
}
.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
background-color: #b8b8ff;
}
JavaScript
Some other housekeeping, we'll manually keep an .active class flag on each list item to correspond to whether or not the item is checked so we can style it appropriately.
$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
$(this).closest("li").toggleClass("active", this.checked);
});
We'll also want to allow multiple selections by allowing the menu to stay open on internal click events by stopping the event from bubbling up
$(document).on('click', '.allow-focus', function (e) {
e.stopPropagation();
});
Demo in Stack Snippets
$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
$(this).closest("li").toggleClass("active", this.checked);
});
$(document).on('click', '.allow-focus', function (e) {
e.stopPropagation();
});
body {
padding: 15px;
}
.checkbox-menu li label {
display: block;
padding: 3px 10px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
margin:0;
transition: background-color .4s ease;
}
.checkbox-menu li input {
margin: 0px 5px;
top: 2px;
position: relative;
}
.checkbox-menu li.active label {
background-color: #cbcbff;
font-weight:bold;
}
.checkbox-menu li label:hover,
.checkbox-menu li label:focus {
background-color: #f5f5f5;
}
.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
background-color: #b8b8ff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button"
id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
<i class="glyphicon glyphicon-cog"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1">
<li >
<label>
<input type="checkbox"> Cheese
</label>
</li>
<li >
<label>
<input type="checkbox"> Pepperoni
</label>
</li>
<li >
<label>
<input type="checkbox"> Peppers
</label>
</li>
</ul>
</div>
The way Bootstrap uses checkboxes in their docs is as following:
<div class="checkbox">
<label>
<input type="checkbox">Two
</label>
</div>
So yours would look like:
<ul>
<li class="dropdown">
Dropdown Form<b class="caret"></b>
<ul class="dropdown-menu">
<li>
<div class="checkbox">
<label>
<input type="checkbox">Two
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox">Two
</label>
</div>
</li>
</ul>
</li>
</ul>
The docs:
http://getbootstrap.com/css/#forms
I think a simple solution would be,
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="sampleDropdownMenu" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">
<input type="checkbox">Action
</button>
<button class="dropdown-item" type="button">
<input type="checkbox">Action
</button>
<button class="dropdown-item" type="button">
<input type="checkbox">Action
</button>
</div>
</div>
The problem here is that your checkboxes are being styled (by Bootstrap) with:
.checkbox input[type=checkbox]{
position: absolute;
margin-left: -20px;
}
This is probably done to avoid those "bunching" issues you see when you remove the .checkbox class on the <label>, but that negative margin-left is causing problems in this case.
One way to address this with minimal adjustment to your markup and CSS would just be to add some padding on the <label> to account for it:
label.checkbox{
padding-left:20px;
}
Here's an updated Bootply to show you the code in action. Hope this helps! Let me know if you have any questions.
I am at a total loss here, I have two lists floating in the masthead of my site next to the logo that display information and stats of the current user logged in.
Masthead ______________________________________________________
| Navbar_________________________________________ |
| logo | | |
| |linklist leftside linklist rightside | |
| | | |
| |_______________________________________________| |
| |
|_______________________________________________________________|
My Html and CSS are straitforward, however for some reason, the lists will not show in IE9. They show perfectly in Firefox and Chrome. I have been pulling my hair out trying to get them to show up. I can see the very top of a few of the words in my lists but they cut off afterwards. I'm not sure if it has something to do with an overflow problem or maybe my if statements are a bit off, but I don't see how there's a problem if they show up fine in other browsers.
The Html:
<div class="masthead">
<div class="inner">
<div id="site-description">
{SITE_LOGO_IMG}
<h1>{SITENAME}</h1>
</div>
<div class="navbar">
<div class="inner">
<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
<fieldset class="quick-login">
<label for="username">{L_USERNAME}:</label> <input type="text"
name="username" id="username" size="10" class="inputbox" title="
{L_USERNAME}" />
<br/>
<label for="password">{L_PASSWORD}:</label> <input type="password"
name="password" id="password" size="10" class="inputbox" title="
{L_PASSWORD}" />
<br/>
<!-- IF S_AUTOLOGIN_ENABLED -->
<label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin"
id="autologin" /></label>
<!-- ENDIF -->
<input type="submit" name="login" value="{L_LOGIN}" class="button2" />
{S_LOGIN_REDIRECT}
</fieldset>
</form>
<!-- ENDIF -->
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<ul class="linklist leftside">
<li class="logout">
<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">
{L_LOGIN_LOGOUT}</a>
</li>
<li class="ucp">
{L_PROFILE}
</li>
<li class="pm">
<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}
</a>)<!-- ENDIF -->
</li>
<li class="posts">
<!-- IF S_DISPLAY_SEARCH -->
{L_SEARCH_SELF}
<!-- ENDIF -->
</li>
<li class="permissions">
<!-- IF U_RESTORE_PERMISSIONS -->
{L_RESTORE_PERMISSIONS}
<!-- ENDIF -->
</li>
</ul>
<!-- ENDIF -->
<ul class="linklist rightside">
<li class="visit">
<!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ENDIF -->
</li>
<li class="time">
<!-- IF U_MCP -->{CURRENT_TIME} [ <a href="{U_MCP}">{L_MCP}
</a> ]<!--
ELSEIF S_USER_LOGGED_IN -->{CURRENT_TIME}<!-- ENDIF-->
</li>
<li class="faq">
{L_FAQ}
</li>
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST -->
<li class="members"><a href="{U_MEMBERLIST}" title="
{L_MEMBERLIST_EXPLAIN}">
{L_MEMBERLIST}</a></li><!-- ENDIF -->
<!-- ENDIF -->
</ul>
</div>
</div>
</div>
</div>
The CSS:
#logo {
float: left;
width: auto;
margin-top: -60px;
margin-left: 20px;
}
.masthead {
color: #FFFFFF;
margin-bottom: 0px;
margin-top: 25px;
width: 96%;
min-width: 650px;
margin-right: auto;
margin-left: auto;
height: 130px;
background-repeat: repeat-x;
background-position: 0 0;
}
.navbar {
padding-right: 10px;
padding-left: 10px;
margin-top: 0px;
margin-bottom: auto;
margin-left: 480px;
margin-right: 20px;
height: 86px;
}
.linklist.leftside {
float:left;
text-align: left;
list-style-type: none;
display: inline;
}
.linklist.rightside {
float:right;
text-align: right;
list-style-type: none;
margin-left: 20px;
display: inline;
}
I'm more focused on the CSS, I don't think the problem is with my Html although I could be dead wrong. Any suggestions would be highly appreciated, thanks!
Have you declared your doc type at the top of the page? IE needs this...
Not Sure but try this update
.navbar { float:right; padding:0px 10px; margin: 0px 20px 0 0; background:blue;
width:60%; overflow:hidden;}
/**/
}
Adjust the required width.
Try to avoid using height it might clip the extended data + avoid playing with margin, it worsen the job with browser compatibility, even with non conventional browsers
It should work...