I'm designing a tv show page for my web design class I'm taking.
I added tabs to my web page to be used as top menu following a tutorial, but now I'm not sure how to center the tabs even using the center tag.
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: right;
border: 1px solid #bbb;
border-bottom-width: 0;
margin: 0;
padding: 0;
}
#header a {
text-decoration: none;
display: block;
background: #eee;
padding: 0.24em 1em;
color: #00c;
width: 8em;
text-align: center;
}
#header a:hover {
background: #ddf;
}
#header #selected {
border-color: black;
}
#header #selected a {
position: relative;
top: 1px;
background: white;
color: black;
font-weight: bold;
}
#content {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
<div id="header">
<center>
<ul>
<li style="font-family: DFKai-SB;">Home
</li>
<li style="font-family: DFKai-SB;">Shows
</li>
<li style="font-family: DFKai-SB;">Classic
</li>
<li style="font-family: DFKai-SB;">More
</li>
</ul>
</center>
</div>
<div id="content">
</div>
add this div with class .centeer to your tabs instead of <center> :
.centeer {
display: table;
margin: 0px auto 0px auto;
}
Live Demo
The float has more priority so that's why your content floats to one side instead of align. In your css at li elements use some inline variant to avoid stacking.
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
display: inline-flex;
border: 1px solid #bbb;
border-bottom-width: 0;
margin: 0;
padding: 0;
}
#header a {
text-decoration: none;
background: #eee;
padding: 0.24em 1em;
color: #00c;
width: 8em;
text-align: center;
}
#header a:hover {
background: #ddf;
}
#header #selected {
border-color: black;
}
#header #selected a {
position: relative;
top: 1px;
background: white;
color: black;
font-weight: bold;
}
#content {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
<div id="header">
<center>
<ul>
<li style="font-family: DFKai-SB;">Home
</li>
<li style="font-family: DFKai-SB;">Shows
</li>
<li style="font-family: DFKai-SB;">Classic
</li>
<li style="font-family: DFKai-SB;">More
</li>
</ul>
</center>
</div>
<div id="content">
</div>
Related
I can't get the submenu to be displayed.
Here's my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title><?php echo $title; ?></title>
<style type="text/css">
body
{
font-family: lucida grande ,tahoma,verdana,arial,sans-serif;
background-color: #e9e9e9;
}
body p
{
font-size: 0.8em;
line-height: 1.28;
}
#wrapper
{
width: 1080px;
background-color: white;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner
{
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area
{
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar
{
float: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer
{
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#navigation
{
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#nav
{
list-style: none;
}
#nav ul
{
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li
{
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav a:link, nav a:active, nav a:visited
{
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover
{
color: lightblue;
}
#subnav
{
list-style:none;
}
#subnav ul
{
margin: 0;
padding: 0;
width: auto;
display:none;
}
#subnav li
{
font-size: 24px;
float:inside;
position: relative;
width: 180px;
height: 50px;
}
#subnav a:link, nav a:active, nav a:visited
{
display: block;
color: #fff;
text-decoration: none;
}
#subnav a:hover
{
color: lightblue;
}
.imgLeft
{
float: left;
width: 240px;
height: 150px;
margin: 0px 10px 10px 0;
padding: 10px;
}
.imgRight
{
float: right;
width: 200px;
height: 250px;
margin: 0px 0 10px 10px;
padding: 10px;
}
</style>
</head>
/*Master page code */
/*the submenu 'subproducts' is not displayed when i ran my code */
<body>
<div id="wrapper">
<div id="banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Products
<ul id="subnav">
<li>SubProducts</li>
</ul>
</li>
<li>Shop</li>
<li>About</li>
</ul>
</nav>
<div id="content_area">
<?php echo $content; ?>
</div>
<div id="sidebar">
</div>
<footer>
<p>All rights reserved</p>
</footer>
</div>
</body>
</html>
I added this:
#nav li:hover ul {
display: block;
}
body {
font-family: lucida grande, tahoma, verdana, arial, sans-serif;
background-color: #e9e9e9;
}
body p {
font-size: 0.8em;
line-height: 1.28;
}
#wrapper {
width: 1080px;
background-color: white;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner {
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area {
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar {
float: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer {
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#nav {
list-style: none;
}
#nav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li:hover ul {
display: block;
}
#nav a:link,
nav a:active,
nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#subnav {
list-style: none;
}
#subnav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#subnav li {
font-size: 24px;
float: inside;
position: relative;
width: 180px;
height: 50px;
}
#subnav a:link,
nav a:active,
nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#subnav a:hover {
color: lightblue;
}
<div id="wrapper">
<div id="banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Products
<ul id="subnav">
<li>SubProducts</li>
</ul>
</li>
<li>Shop</li>
<li>About</li>
</ul>
</nav>
<div id="content_area">
<!--<?php echo $content; ?>-->
</div>
<div id="sidebar">
</div>
<footer>
<p>All rights reserved</p>
</footer>
</div>
I have been trying to figure out how to fix this drop-down menu. It seems to look okay until I hover and the menu appears horizontal instead of vertical. Is it something wrong with the css?
Thanks for your help!
JS Fiddle
HTML
<body>
<div id="wrapper">
<div id="header"></div>
<nav id="mainnav"><img src="../images/Website/banner.jpg" width="1280" height="120">
<ul style="list-style: none;">
<li>Home</li>
<li>Research</li>
<li>Susan Taylor</li>
<li>Lab Members
<ul>
<li>Current Members</li>
<li>Former Members</li>
<li>Gallery</li>
</ul>
</li>
<li>Publications</li>
<li>Links</li>
<li>Contact Us</li>
</ul>
</nav>
<br>
</br>
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner"> <!-- TemplateBeginEditable name="EditRegion3" -- >EditRegion3<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
<footer class="footer" id="footer">
<div align="center">
<p>Taylor Laboratory<br>
Leichtag Biomedical Research Building
4th Floor, Room 412
<br>
University of California, San Diego
<br>
9500 Gilman Dr. mc0654<br>
La Jolla, CA 92093
<br>
Ph: (858) 534-8190
<br>
Fax: (858) 534-8193 </p>
</div>
</footer>
</div>
</body>
CSS
li ul{
display:none;
}
li:hover ul{
display:block;
}
body {
margin: 0px;
background-color: #CCCCCC;
}
.content {
background-color: #FFFFFF;
padding-right: 6px;
padding-left: 6px;
}
.footer {
background-color: #357f7f;
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
color: #FFFFFF;
position: absolute;
}
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1280px;
min height: 100%;
position: relative;
height: auto;
min-height: 100%
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#content-spacer-top {
height: 10px;
}
#content-spacer-bottom{
height:1%;
}
#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
float: left;
text-align: center;
width: 14.28%;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
display: block;
list-style-type: none;
clear: none;
margin: 0px;
height: 2%;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #357F7F;
border-right-color: #357F7F;
border-bottom-color: #357F7F;
border-left-color: #357F7F;
}
#mainnav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
.style2 {
font-size: small;
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
.style4 {font-size: x-small}
.style5 {background-color: #357f7f; font-family: arial;}
#footer {
width:1280px;
height:120px;
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
}
Alright, so after having a look at your updated fiddle I was able to see the problem straight away. Firstly your code is really messy (sorry, but it is haha) and you have so many unnecessary css declarations.
It was so badly written I have just written a brand new fiddle and included a working navigation bar. Find the relevant code below.
HTML:
<nav>
<ul>
<li>Home</li>
<li>Research</li>
<li>Susan Taylor</li>
<li>Lab Members
<ul>
<li>Current Members</li>
<li>Former Members</li>
<li>Gallery</li>
</ul>
</li>
<li>Publications</li>
<li>Links</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
nav {
display: table;
border-top: 1px solid #357F7F;
border-bottom: 1px solid #357F7F;
}
nav ul {
display: table-row;
position: relative;
margin: 0;
padding: 0;
z-index: 1;
}
nav ul a {
display: block;
color: black;
text-decoration: none;
padding: 10px 15px;
font-family: Arial, Helvetica, sans-serif;
}
nav ul li {
position: relative;
display: inline-block;
display: table-cell;
width: 1%;
list-style-type: none;
text-align: center;
}
nav ul li:hover {
background-color: #357F7F;
}
nav ul li:hover a {
color: white;
}
nav ul ul{
display: none;
position: absolute;
background: rgba(0,0,0,0.4);
width: 100%;
}
nav ul ul li {
width: 100%;
display: inline-block;
}
nav ul li:hover > ul {
display: block;
}
JSFiddle
Hope this helps! :)
I want to add a border to my tab content. There should be no border at the bottom of the selected tab. I found this questions: how to give a border to bootstrap tab contents, but the answers didn't work for me?
HTML:
<ul class="nav nav-tabs pull-right">
<li><a data-toggle="tab" href="#sub_cats_8">תתי קטגוריות</a></li>
<li class="active"><a data-toggle="tab" href="#category_8">קטגוריה</a></li>
</ul>
<div class="clearfix"></div>
<div class="tab-content" style="height: 100%;">
<div id="category_8" class="tab-pane fade in active category" style="background-image: url('example.jpg');">
<h1> קוסמטיקה </h1>
</div>
<div id="sub_cats_8" class="tab-pane fade">
<ul class="sub_categories">
<li>איפור</li>
</ul>
</div>
</div>
CSS:
body, html {
direction: rtl;
height: 100%;
font-family: Tahoma;
}
.nav-tabs {
direction: ltr;
}
#logo {
background-color: #005CB8;
width: 100%;
color: white;
padding: 4% 10%;
-webkit-box-shadow: 20px 10px 20px #003972;
-moz-box-shadow: 20px 10px 20px #003972;
box-shadow: 20px 10px 20px #003972;
border-bottom-left-radius: 50px;
}
#logo h1, #logo h4 {
display: inline;
font-family: head;
}
#logo h1 {
font-size: 550%;
}
#logo h4 {
font-size: 220%;
}
.navbar-inverse {
background-color: #477199;
font-weight: bold;
}
.nav.navbar-nav.navbar-right li a {
color: white;
}
.nav.navbar-nav li a {
color: white;
}
.navbar-inverse .navbar-nav > .active {
background-color: #003972;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
color: white;
background: #003972;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
background-color: #324F6B;
color: white;
}
.category {
text-align: center;
margin-top: 1px;
background-size: 100% 100%;
padding: 15% 0;
}
.category h1 {
color: white;
font-family: head;
font-size: 500%;
text-shadow: 2px -2px black;
}
.category_start {
margin: 0 auto;
width: 85%;
}
.sub_categories {
-webkit-columns: auto 3;
/* Chrome, Safari, Opera */
-moz-columns: auto 3;
/* Firefox */
columns: auto 3;
list-style-type: disc;
margin-top: 5px;
}
.category_start .container {
margin-top: 10px;
}
.product_image {
height: 80px;
width: 80px;
}
.products_sub_list {
margin: 10px auto 0;
text-align: center;
max-width: 80%;
border-radius: 7px;
}
.products_sub_list td {
width: 15%;
max-width: 15%;
padding: 0 5px;
border: 3px solid #46617A;
}
.product {
width: 80%;
border: 3px solid #46617A;
margin: 0 auto;
text-align: center;
border-radius: 10px;
}
.product_table td {
border: 2px solid #46617A;
padding: 13px;
}
.product_table {
display: inline-table;
margin-left: 15px;
margin-bottom: 8px;
}
.product_table td:first-child {
font-weight: bold;
}
.page {
width: 85%;
margin: 0 auto;
padding: 15px 25px;
border: 2px solid #46617A;
border-radius: 10px;
background-color: #C8D0D7;
}
.register {
margin: 0 auto;
width: 80%;
text-align: center;
}
.register td {
padding: 5px;
text-align: right;
}
.register table {
margin-right: 240px;
}
#register {
width: 80%;
position: absolute;
z-index: 2;
display: none;
left: 0;
right: 0;
top: 100px;
margin: 0 auto;
border: 3px solid #0066FF;
background-color: #CCE0FF;
text-align:center;
border-radius: 10px;
}
#bbg {
display: none;
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.8;
filter: alpha(opacity=80);
}
.tab-content {
border: 1px solid #ddd;
padding: 1px;
}
JSFiddle: http://jsfiddle.net/ep2drocb/7/
Notice there is border in the open tab, also the closed tabs have a double border.
The main problem is the pull-right on the ul element.
Remove pull-right class from the ul
Remove the clear-fix element as it's not needed anymore
Remove top border from your tab-content class
Float the lis right
Correct the margins on the tab anchors
Relevant HTML:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#category_8">תתי קטגוריות</a></li>
<li><a data-toggle="tab" href="#sub_cats_8">קטגוריה</a></li>
</ul>
<div class="tab-content">
<div id="category_8" class="tab-pane fade in active category">
<h1> קוסמטיקה </h1>
</div>
<div id="sub_cats_8" class="tab-pane fade">
<ul class="sub_categories">
<li>איפור</li>
</ul>
</div>
</div>
Relevant CSS:
.tab-content {
border: 1px solid #ddd;
border-width: 0 1px 1px; /* Removes the top border */
padding: 1px;
}
.nav-tabs > li {
float: right;
}
.nav-tabs > li > a {
margin-right: 0;
margin-left: 2px;
}
JSFiddle: http://jsfiddle.net/ep2drocb/9/
That should get you on the right track.
I've only been practicing HTML and CSS for a little over a year. I obviously have a lot to learn. When I started the re-design of my site, I used an available template. I've changed nearly everything except the sidebar. It has the sidebar on the left, and I want it on the right, because I figure it'll look nicer. I've changed the float from left to right for the sidebar. I've changed the float from right to left for the content. This just causes a lot of problems that I can't explain, and I don't know how to fix it. I've toyed with a lot of the css. Please help me understand what I'm doing wrong, and what I'm not thinking of changing that needs to be changed. I've played with this on a fiddle, and here it is with my changes (as you can see, I didn't get anywhere): The Fiddle
Here's my original:
HTML
<body>
<div id="wrapper">
<div id="header">
<!-- end div#logo -->
<div id="menu">
<ul style="
overflow: hidden;
width: 892px;
/* text-align: center; */
margin: 0 auto;
">
<li id="logo"></li>
<li>Home</li>
<li>Games</li>
</ul>
</div>
<!-- end div#menu -->
</div>
<!-- end div#header -->
<div id="page">
<div id="page-bgtop">
<div id="content">
<!-- InstanceBeginEditable name="Page Content" --><div class="post">
<h2 class="title">New Site Update!</h2>
<p class="byline">Posted by Nicholas Maguire</p>
<div class="entry">
<p> This is the editable area.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div><!-- InstanceEndEditable -->
</div>
<!-- end div#content -->
<div id="sidebar">
<ul>
<li id="search">
<h2>Search</h2>
<form method="get" action="">
<fieldset>
<input type="text" id="seach-text" name="s" value="" />
<input type="submit" id="search-submit" value="Search" />
</fieldset>
</form>
</li>
<li>
<h2>Newest Games</h2>
<ul>
<li>ATV Destoyer</li>
<li>Army Driver</li>
<li>Arkanoid</li>
<li>Amazing Football</li>
<li>Alien Vs Predator</li>
<li>Airport Madness</li>
<li>Age of War</li>
</ul>
</li>
<li>
<h2>Contact Me</h2>
<ul>
<li>Contact Form</li>
<li>Requests</li>
</ul>
</li>
</ul>
</div>
<!-- end div#sidebar -->
<div style="clear: both; height: 1px"></div>
</div>
</div>
<!-- end div#page -->
</div>
<!-- end div#wrapper -->
<div id="footer">
<p id="legal">Copyright © 2014 Crazy Block. All Rights Reserved. </p>
<p id="links">Privacy Policy | Terms of Use</p>
</div>
<!-- end div#footer -->
</body>
CSS
{
margin: 0;
padding: 0;
}
body {
background: #E9E9E9;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #757E82;
margin: 0;
}
h1, h2, h3 {
color: #AA2808;
}
h1 {
}
h2 {
}
h3 {
}
p, blockquote, ul, ol {
margin-bottom: 20px;
line-height: 2em;
}
p {
}
blockquote {
}
ul, ol, li {
margin: 0px;
padding: 0px;
list-style: none;
}
a {
text-decoration: underline;
color: #1692ef;
}
a:hover {
text-decoration: none;
color: #165bef;
}
/* Wrapper */
#wrapper {
}
/* Header */
#header{
width: 100%;
height: 91px;
margin: 0;
top: 0;
}
/* Logo */
#logo {
float: left;
width: 270px;
height: 76px;
margin: 0px;
padding: 15px 0px 0px;
margin-left: 27%;
}
#logo h1 {
margin: 0;
padding: 0;
font: normal 36px Georgia, "Times New Roman", Times, serif;
}
#logo h2 {
margin: -2px 0 0 0;
padding: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
font-weight: bold;
color: #444444;
}
#logo h2 a {
color: #9AA9B1;
}
#logo a {
text-decoration: none;
color: #165bef;
}
/* Menu */
#menu {
float: right;
width: 100%;
height: 54px;
margin-top: 0;
background: #ffffff url("/images/menu_bar.jpg") repeat-x left top;
position:fixed;
}
#menu ul {
overflow: hidden;
width: 892px;
margin: 0 auto;
padding: 0 30px;
list-style: none;
line-height: normal;
}
#menu li {
display: inline;
text-align: center;
}
#menu a {
display: block;
float: left;
height: 36px;
padding: 18px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
li#logo {
height: 52px;
width: 52px;
background: url('/images/cb_logo.png') no-repeat;
margin-top: 1px;
margin-right: 1px;
margin-left: 1px;
}
#menu a:hover, #menu .active a {
background: #1687ef;
color: #FFFFFF;
}
/* Search */
#search {
height: 45px;
padding: 0px 0px 40px 0px;
}
#search form {
margin: 0;
padding: 12px 0px 0 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search input {
float: left;
font: 12px Georgia, "Times New Roman", Times, serif;
}
#search-text {
width: 120px;
height: 18px;
padding: 3px 0 0 5px;
border: 1px solid #000000;
color: #000000;
}
#search-submit {
height: 21px;
margin-left: 10px;
padding: 0px 2px;
border: none;
background: #000000;
color: #FFFFFF;
}
/* Page */
#page {
width: 892px;
margin: 0 auto;
}
#page-bgtop {
padding: 0px 30px;
}
/* Content */
#content {
float: right;
width: 564px;
padding-top: 30px;
}
.post {
margin: 0px 0px 30px 0px;
}
.post .title {
margin: 0px;
padding: 0px 0px 5px 0px;
color: #1f201d;
}
.post .title a {
padding: 4px 35px 4px 15px;
background-color: #1535EF;
text-decoration: none;
font-weight: normal;
color: #FFFFFF;
}
.post .entry {
}
.post img {
float: left;
padding: 15px 0px;
}
.post .meta {
text-align: right;
padding-top: 20px;
border-bottom: 1px solid #E5E5E5;
font-weight: bold;
color: #202020;
}
.post .byline {
float: right;
margin-top: -30px;
font-size: 12px;
color: #5E5E5E;
}
/* Sidebar */
#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
position: fixed;
}
#sidebar ul {
margin: 0;
padding: 10px;
list-style: none;
line-height: normal;
}
#sidebar li {
margin-bottom: 1px;
}
#sidebar li ul {
margin: 0px;
padding: 0px 0px 40px 0px;
}
#sidebar li li {
margin: 0;
padding: 9px 0px;
border: none;
background: url(images/img07.jpg) repeat-x left bottom;
}
#sidebar h2 {
margin: 0px;
padding: 0px;
border-bottom: 2px solid #EBEBEB;
font-size: 160%;
font-weight: normal;
color: #454E55;
}
#sidebar h3 {
font-size: 77%;
color: #454E55;
}
#sidebar p {
margin: 0;
line-height: normal;
color: #0038ff;
}
#sidebar a {
border: none;
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Submenu */
#submenu {
}
/* News */
#news {
}
#news a {
font-size: 85%;
}
Try this,
#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
/*position: fixed;*/ //remove it
}
#content {
float: left; // change right to left
width: 564px;
padding-top: 30px;
}
Fiddle
When you used Position attribute in css float attribute won't work. So instead of float used right:0; see below code.
#sidebar {
/* float: left;*/
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
position: fixed;
right:0;
}
#content {
float: left;
width: 564px;
padding-top: 30px;
}
And provide 100% width to inside (p, h2, div) so they wrap inside the #content div.
I'm trying to get the nav_right section of the nav bar to align to the right but line up against the right hand edge of the company name: http://i.stack.imgur.com/8xXfV.png
I can set .nav ul to 24.5em to line things up but on different screen sizes this doesn't work.
Here is the CSS:
*{
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: inherit;
}
.nav{
width: auto;
padding: 2em 0 0 0.5em;
background-color:rgba(0,0,0,1);
}
.nav ul{
width: 24.5em;
font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
text-transform: uppercase;
}
.nav li{
font-weight: 100;
font-size: 3em;
color: #fff;
}
.nav b{
font-weight: 900;
}
.nav li:hover{
text-decoration: #000;
}
#nav_right{
font-size: 0.8em;
font-weight: 600;
text-align: right;
}
.triangle{
width: 0;
height: 0;
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin: auto;
opacity: 0.4;
}
img{
float: right;
width: 10%;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
.main_wrapper{
width: auto;
height: 100px;
margin-left: 1em;
margin-top: 20%;
overflow: hidden;
float: left;
background-color: #000;
border-radius: 10px;
opacity: 0.4;
box-shadow: 0 0 1em #000;
}
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<div class="nav">
<ul>
<li id="nav_right">HOME | ABOUT | CONTACT</li>
<li>company<b>name</b></li>
</ul>
</div>
</nav>
</body>
</html>
You can restructure your CSS and HTML to set a width for the nav class. Separate all your links into li and add styling that adds margin and a white line. This way, when you add more items, the style will automatically be applied to other list items.
This code will always align the menu to the right edge across all browsers. The only downside is that your list items have to be put backwards. From last to first because float:right is switching the order.
CSS:
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
nav {
background: #000;
}
.nav {
width: 24.5em;
padding: 2em 0 0 0.5em;
background-color: rgba(0,0,0,1);
font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
text-transform: uppercase;
}
.nav ul {
text-align: right;
list-style-type: none;
}
.nav a {
text-decoration: none;
color: inherit;
padding: 0;
}
.nav li {
color: #fff;
display: inline;
padding: 0 6px;
border-right: 1px solid #fff;
font-size: 0.8em;
font-weight: 600;
float: right;
}
.nav li:first-child {
padding-right: 0;
border: none;
}
.nav li:last-child {
padding-left: 0;
}
.nav #companyName {
font-size: 3em;
color: #fff;
}
.nav #companyName b {
font-weight: 900;
}
.nav li:hover {
text-decoration: underline;
}
.triangle {
width: 0;
height: 0;
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin: auto;
opacity: 0.4;
}
img {
float: right;
width: 10%;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
.main_wrapper {
width: auto;
height: 100px;
margin-left: 1em;
margin-top: 20%;
overflow: hidden;
float: left;
background-color: #000;
border-radius: 10px;
opacity: 0.4;
box-shadow: 0 0 1em #000;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<div class="nav">
<ul>
<li>CONTACT</li>
<li>ABOUT</li>
<li>HOME</li>
</ul>
<div id="companyName">
company<b>name</b>
</div>
</div>
</nav>
</body>
</html>
Does adding
nav li {
text-align: right;
}
Do what you are looking for?
Example
Edit
To achieve what you want, you can remove the width declaration and instead declare display: inline-block on the ul element. The element will then stretch only to the width of its widest content (in this case your li containing the big CompanyName) instead of the whole width of the parent element.
Your other menu will then align to the right of the element as you wish.
So basically:
nav ul {
display: inline-block;
}
nav li {
text-align: right;
}
Example
P.S.
By the way, your markup is really weird, and you probably should refactor that. Your menu items are all enclosed in one single <li> while they should each be a separate element; you could then add the purely presentational | vertical bars through CSS.
put the a tag with company name on the outside of the div called nav.
HTML
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<a href="#" class="companyname"><li>company<b>name</b>
<div class="nav">
<ul>
<li id="nav_right">HOME | ABOUT | CONTACT</li>
</li>
</ul>
</div>
</nav>
</body>
</html>
CSS
nav {
margin: 0;
padding: 0;
overflow: hidden
}
.companyname {
display: inline-block;
float: left;
margin: 0;
padding: 0;
}
.nav ul{
display: inline-block;
float: right
margin: 0;
padding: 0;
}