I'm working on a little project and I am making an admin panel. I have a tiny problem with my markup. I am trying to divide my page into 2 columns: left - admin panel, right contains navigation bar and content itself. The problem is that my content is expanding too much and becomes bigger than the html tag and that's causing my 2 columns to be uneven height. How can I fix it?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
{{ stylesheet_link ('css/admin.css')}}
</head>
<body>
<div class="container">
<div class="admin-panel">
<h4>Navigation</h4>
<ul>
<li>
Dashboard
</li>
<li>
Email
</li>
<li>
Pages
</li>
<li>
Tables
</li>
</ul>
</div>
<div class="wrapper">
<div class="admin-navbar">
<ul>
<?= Tag::form(array('admin/search','method'=>
'GET')) ;?>
<?= Tag::textField(array('search', 'maxlength'=>
'30'));?>
<?= Tag::submitButton('Search');?>
<?= Tag::endForm(); ?>
<li>
Profile
<ul>
<li>
My Profile
</li>
<li>
Account Settings
</li>
<li>
Logout
</li>
</ul>
</li>
<li>
Home
</li>
</ul>
</div>
<div class="content">
<h2 id="dashboard" class="header">Dashboard</h2>
{{ content()}}
<h2 id="email">Email</h2>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
and css:
EDITED:
html, body {
margin:0;
padding:0;
height:100%;
}
body {
background: #eee;
}
.container {
position: relative;
}
.admin-panel, .wrapper {
float:left;
height:100%;
}
.wrapper {
margin:0;
width:1100px;
height:auto;
float:left;
}
.admin-navbar {
background: #222;
height:50px;
box-sizing: border-box;
-mozilla-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom:2px solid #000;
}
.admin-navbar ul {
height:50px;
line-height: 50px;
margin:0 auto;
padding:0;
}
ul li {
display: inline-block;
margin:0;
padding:0;
}
.admin-navbar ul li {
float:right;
}
.admin-navbar>ul>li>a {
display: block;
text-align: center;
color:#fff;
padding:0 5px;
width:140px;
}
.admin-navbar ul li a:hover {
background:#282828;
}
.admin-navbar ul li ul {
display: none;
position: absolute;
top:50px;
padding:5px;
background: #333;
width:140px;
right:0;
height: auto;
}
.admin-navbar ul li ul li {
margin:0;
padding:0;
display: block;
float:left;
width:100%;
}
.admin-navbar ul li ul li a{
display: block;
width:100%;
text-align: center;
line-height: 30px;
border-radius: 2px;
}
.admin-navbar ul li ul li a:hover{
background: #228856;
}
.admin-navbar ul li:hover ul {
display: block;
}
.admin-navbar form {
display: inline-block;
}
.admin-navbar form input {
margin:0;
padding:0;
height:30px;
}
.admin-navbar form input[type="text"] {
border:none;
width:200px;
}
.admin-navbar form input[type="submit"] {
background:#fff;
border:none;
width:70px;
color:#000;
}
.admin-navbar form input[type="submit"]:hover {
background: #285;
color:#fff;
cursor: pointer;
}
.admin-panel {
background: #222;
width:219px;
padding:20px 15px;
margin:0;
height:100%;
float:left;
}
.admin-panel h4 {
padding:0;
margin:0;
color:#fff;
}
.admin-panel ul {
margin:0;
margin-top:30px;
padding:0;
}
.admin-panel ul li {
display: block;
list-style-type: none;
margin-bottom:5px;
border-radius:5px;
}
.admin-panel ul li a {
display: block;
padding-top:10px;
line-height: 15px;
padding-left:20px;
padding-bottom:10px;
background: #333;
border-radius: 5px;
height:15px;
}
.admin-panel ul li a:hover {
background: #fff;
color:#111;
}
ul li a.active-item {
background: #285;
border-radius: 5px;
}
.content {
padding:10px;
}
.clear {
clear:both;
}
.header {
background: #fff;
}
a {
color:#fff;
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
padding:0;
margin:0;
text-align: center;
}
h2 {
color:#111;
}
table {
padding:0;
border-spacing: 0;
background: #fff;
width:100%;
}
table tr {
margin:0;
padding:0;
background: #333;
}
table tr td {
color:#fff;
}
table tr a {
color:#fff;
display: inline-block;
}
table tr a:hover {
text-decoration: underline;
}
table tr td, table tr th {
border:1px solid #1d2939;
text-align: center;
}
table tr:hover {
background: #285;
}
table tr th {
background:#418bca;
}
ALL YOU NEED: for a good start
LIVE DEMO
*{margin:0; padding:0;} /* Ugly reset */
html, body {
height:100%;
background: #555; /* to fulfill page background */
}
/*admin*/
.admin-panel {
position:absolute; /* to make it height 100% */
height:100%;
width:219px;
background: #222;
}
.admin-content{ /* added in order to add inner paddings */
padding:20px 15px;
}
/*page*/
.wrapper {
margin-left:219px; /* admin width */
}
.admin-navbar, .content{
padding:20px 15px;
}
So all you need are 2 main containers, the ADMIN panel on the left and WRAPPER on the right.
Don't use floats or you'll mess it all up, set a width for ADMIN, and leave the browser decide for WRAPPER. Move WRAPPER to the ADMIN's right using margin-left.
Regarding the paddings, if you set paddings to i.e. ADMIN, you'll overflow the BODY height, so we need to use for both some inner containers to whom we'll apply the desired padding spaces.
Related
I'm trying to create the following tabs:
And have a problem figuring out how to make the active tab overlap the order on the list. Here is the HTML:
<ul>
<li class="active">LATEST</li>
<li>VOTES</li>
<ul>
Without div:
Demo: http://jsfiddle.net/GCu2D/790/
CSS:
html, body {
margin:0;
padding:0;
height:100%;
width:100%;
background-color:#f0f0f0
}
ul {
margin:0px;
padding:0;
position:relative;
}
ul:before {
left: 0;
right: 0;
bottom: 0px;
height: 0;
border-bottom: 1px solid #777;
content:"";
top: auto;
display: block;
position: absolute;
}
ul:after {
clear:both;
display:block;
content:""
}
ul li {
display:block;
float:left;
padding:5px 10px;
border:1px solid #777;
margin-right:-1px;
position:relative;
}
ul li.active {
border-bottom:1px solid #f0f0f0
}
HTML:
<ul>
<li class="active">LATEST</li>
<li>VOTES</li>
</ul>
With extra div
You can try this way: http://jsfiddle.net/GCu2D/787/
CSS:
html, body {
margin:0;
padding:0;
height:100%;
width:100%;
background-color:#f0f0f0
}
ul {
margin:0px;
padding:0;
}
ul:after {
clear:both;
display:block;
content:""
}
ul li {
display:block;
float:left;
padding:5px 10px;
border:1px solid #777;
margin-right:-1px;
position:relative;
}
div {
border:1px solid #777;
margin-top:-1px;
}
ul li.active {
border-bottom:1px solid #f0f0f0
}
HTML:
<ul>
<li class="active">LATEST</li>
<li>VOTES</li>
</ul>
<div>Content</div>
Why don't you hide the bottom border of the active link instead?
.active{
border-bottom: 0;
}
Or make it transparent:
.active{
border-bottom: 1px solid transparent;
}
The image in div element is stretching towards bottom in IE and firefox. But it is displayed well in chrome
IE
Chrome
It looks weird in IE.
can some one help me how to fix.
My HTML.
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<div id="mobile">
<div class="header">
<div class="container">
<h1><span>
Välkommen
</span></h1>
<img src="../../published_images/Mobils_logo.png" alt="" />
<div style="clear:both; height:0; overflow:hidden;"></div>
</div>
</div>
<div class="box-links">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>Community</td>
<td>Mail</td>
</tr>
</tbody>
</table>
</div>
CSS
/* Default */
body
{
background: #fff;
margin: 0px;
padding: 0px;
font-size: 100%; /* to set it to 13px*/
font-family: Verdana;
color:#000;
}
* html .clearfix
{
height: 1px;
}
h1, h2
{
color: #444;
font-weight:normal;
padding-top:0;
margin-top:0;
}
h1
{
font-size: 1em;
}
a:link, a:visited, a:active, a:hover, a:focus
{
color: #0096ff;
text-decoration: none;
font-size: 1em;
}
a:hover, a:focus
{
background-color: #0096FF;
color: #fff;
}
table
{
width:100%;
padding:0;
margin:0;
}
td
{
width:50%;
padding:0;
vertical-align:top;
}
/* Header */
div.header
{
height:52px;
padding:28px 5px 0;
}
div.header div.container
{
border-bottom: 1px solid #0096FF;
border-top: 1px solid #0096FF;
padding:5px 0 5px 0;
}
div.header img
{
float:left;
}
div.header h1
{
float:right;
margin-top: 9px;
margin-right: 10px;
}
div.header a
{
clear:both;
}
/* Box Common */
div.box-advert, div.box-links, div.box-back, div.box-footer, div.box-text
{
margin:0 5px 10px;
padding: 8px 10px 8px;
display:block;
clear:both;
}
/* Box Advert */
div.box-links
{
padding-bottom: 0;
}
div.box-links TABLE A
{
color: #626262;
}
div.box-links TABLE a:hover, div.box-links TABLE a:focus
{
background-color: #0096FF;
color: #fff;
}
div.box-links TABLE td
{
padding-bottom:3px;
}
div.box-links ul li A
{
background-image:url("../../published_images/mobil-arrow-blue.png");
background-position:0 6px;
background-repeat:no-repeat;
padding-left:14px;
}
div.box-links ul li A:hover, div.box-links ul li A:focus
{
background-image:url("../../published_images/mobil-arrow-white.png");
}
I see the issue. Its IE specific. The way to fix this is change the order of your link tag and tag. like this
<img src="../../published_images/Mobils_logo.png" alt="" />
<h1><span>Välkommen</span></h1>
Better Sol:
give class to the link, no need to change order
<h1><span>Välkommen</span></h1>
<a class="imgLink" href="index.htm"><img src="../../published_images/Mobils_logo.png" alt="" /></a>
change css from
div.header img
{
float:left;
}
to
div.header .imgLink
{
float:left;
}
I'm trying to create a horizontal menu with the width of the parent div and where the links are arranged in equal distances. Target is to create a navigation bar with a width of 900px. Maybe it is possible to realize it on another way? I'm a newbie in css and don't know how to fix my problem and hope you could help me!
#nav {
background:red;
width:900px;
}
ul#nav-bar, ul#nav-bar ul{
margin:0;
list-style:none;
padding:0;
background: white;
border: 1px solid black;
}
ul#nav-bar ul{
display:none;
position:absolute;
left:0;
}
ul#nav-bar li:hover>*{
display:block;
}
ul#nav-bar li{
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#nav-bar li:hover{
z-index:1;
}
ul#nav-bar{
font-size:0;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
padding:0;
*display:inline;
}
* html ul#nav-bar li a{
display:inline-block;
}
ul#nav-bar>li{
margin:0;
}
ul#nav-bar a:active, ul#nav-bar a:focus{
outline-style:none;
}
ul#nav-bar a{
display:block;
vertical-align:middle;
text-align:center;
text-decoration:none;
font: 12px Arial;
color:#000000;
padding:5px 10px 5px 10px;
}
ul#nav-bar ul li{
float:none;
margin:0 0 0;
}
ul#nav-bar ul a{
text-align:left;
background-color:red;
color:#000;
}
ul#nav-bar li:hover>a{
background-color:#fff;
color:#000000;
}
ul#nav-bar span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
<div id="nav">
<ul id="nav-bar">
<li>Link1</li>
<li><span>Link2</span>
<ul>
<li>lowerLink1</li>
<li>lowerLink2</li>
<li>lowerLink3</li>
</ul>
</li>
<li>Link3</li>
<li><span>longxxxxxxxxxxxxxxxxxxxxxxxxxxxlink</span>
<ul>
<li>lowerLink1</li>
<li>lowerLink2</li>
<li>lowerLink3</li>
</ul>
</li>
<li>Link5</li>
<li>Link6</li>
<li>longxxxxxxxxxxxxxlink</li>
</ul>
</div>
Thanks!
To get the #nav-bar to match the parent, simply add width:100% to your existing ul#nav-bar tag in css. This tells your child to fill up the parent, regardless of child's content.
As for spreading out the links, it has been my experience that the best way to do this is to add margins to the text once the navbar is complete. For your coded example, I would add the following to even them out:
ul#nav-bar->li{
margin:0px 20px 0px 20px;
text-align:center;
}
You can view it here and here is the css code
/*zero-height container problem fix for floated elements*/
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
#nav {
background:#999;
width:900px;
}
#nav ul{
list-style: none;
padding: 0;
margin: 0;
}
#nav li{
position: relative;
text-align: center;
padding: 10px 0px;
}
#nav a{
text-decoration: none;
display: block;
color: #f0f0f0;
}
#nav-bar > li{
float: left;
}
#nav-bar ul{
position: absolute;
left: 0;
width: 100%;
top: 100%;
background: #999;
display: none;
}
#nav-bar li:hover{
background: #666;
}
#nav-bar li:hover ul{
display: block;
}
As if you want width to be adjusted to text width in li elements so you need javascript
and here is the code i have updated the jsfiddle
$(document).ready(function(){
total_nav_width = $('#nav').width();
main_link = $('#nav-bar > li > a')
textWidths = [];
totalTextWidth = 0;
main_link.each(function(){
textWidths.push($(this).width())
})
for (var i = 0; i < textWidths.length; i++) {
totalTextWidth += textWidths[i];
}
additionValues = (total_nav_width - totalTextWidth)/main_link.length;
main_link).each(function(){
intialWidth = $(this).width()
$(this).width( intialWidth + additionValues )
})
})
I'm making a mobile website and having some difficulty with making a few changes to my menu bar. I'm not an expert on this field so your help would be greatly appreciated.
Below is the codes to the menu bar.
CSS
<style type="text/css">
* { padding: 0; margin: 3; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
ul { list-style: none; }
ul li {
float: left;
padding: 1.5px;
position: relative;
margin: auto;}
ul a { display: table-cell; vertical-align: middle; width: 75%; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
ul a:hover {background-color:#5A87B4; }
HTML
<div>
<ul>
<li>
<div align="center"><a href="../Software.html" >Software</a>
</div>
</li>
<li>
<div align="center">Products</div>
</li>
<li>
FAQ</li>
</ul>
This is a basic menu bar and i want to adjust this to the center and also have horozontal lines to break each button apart while all this is centered and fits a 100% on a mobile screen. All your help is greatly appreciated
EDIT: Its like having some space after each button but instead theres a horizontal line
EDIT: Changed the width from 75% to 80px. Note that i also changed the div ID of my code because i was having some other problems with identification. :) Hope this wont confuse you
#menubar * { padding: 0; margin: 2; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
#menubar ul{text-align:center;}
#menubar ul li { display:inline-block; padding: 2px; position: relative; }
#menubar ul a { display: table-cell; vertical-align: middle; width: 80px; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
I added below lines in your css code. I hope this is what you want.
ul{
display:inline-block;
overflow:hidden;
}
div{
text-align:center;
}
li:after{
border-right:50px solid black;
content:"";
position:relative;
left:10px;
top:-27px;
z-index:-1;
display:block;
height:1px;
}
li:last-child{
margin-right:-14px
}
Working Fiddle
Now just remove float:left in your li and add display:inline-block; and add text-align center in your ul tag
as like this
ul{
text-align:center;
}
ul li{
display:inline-block;
vertical-align:top;
float:left; // remove this line
}
Demo
from your current css remove float:left; on li's and add text-align:center; and it should work:
ul li {
text-align: center;
padding: 1.5px;
position: relative;
margin: auto;
}
here is a working JSFiddle.
Update
In that case you can change the CSS to.
ul li{
text-align:center;
display:inline-block;
}
ul li:before {
content: " - ";
}
ul li:first-child:before {
content: none;
}
Here is a working JSFiddle
Test Site Here:
http://testsitefree.nfshost.com/
IE9:Works fine
IE8:Only the first image is rendered.
IE7:Only the first image is rendered + Dropdown menu moves to the right.
IE6:Doesn't work
Firefox 3:Only first image is rendered.
Thanks for help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> test</title>
<style type ="text/css">
#test {
position:absolute;
left:710px;
top:0px;
font-family:tahoma, verdana, arial, helvetica, sans-serif;
font-size:10px;
z-index:200;
}
body { behavior:url(csshover.htc); }
#test .abab {
background:green;
}
#test p a {
color: #000;
text-decoration:underline!important;
}
#test a {
color:#fff;
text-decoration:none;
}
#test a.number {
color:#2f343a;
}
#test p a:hover {
text-decoration: none!important;
}
ul#test {
list-style: none;
padding: 0;
margin: 0;
}
ul#test li a {
display: block;
font-weight: normal;
padding: 1px;
background:#fff;
}
ul#test li a:hover{
background:#2f343a;
color:#fff;
list-style:none;
}
#test li {
float: left;
position: relative;
width: 90px;
text-align: center;
margin-right:0px;
border:0px solid #ccc;
}
ul#test li.current a {
background:#ccc;
}
ul#test li.current a:hover {
background:#ccc;
}
#test li ul {
display: none;
width:90px;
top: 18px;
left: 0;
font-weight: normal;
font-size:9px;
text-align:left;
padding-left:0;
margin-left:0;
position:absolute;
}
ul#test li ul.sub1 li, ul#test li ul.sub2 li, ul#test li ul.sub3 li {
border-width:0px 1px 1px 1px!important;
width:88px;
}
ul#test li ul.sub1 li a.number, ul#test li ul.sub2 li a.number, ul#test li ul.sub3 li a.number {
font-weight: normal!important;
counter-increment:image;
padding-left:20px;
background-image:url(small.jpg);
background-repeat:no-repeat;
}
ul#test li ul.sub1 li.img1 a{
background-position: 0px 0px;
}
ul#test li ul.sub1 li.img2 a{
background-position: 0px -13px;
}
ul#test li ul.sub1 li.img3 a{
background-position: 0px -26px;
}
ul#test li ul.sub1 li.img4 a{
background-position: 0px -39px;
}
ul#test li ul.sub1 li.img5 a{
background-position: 0px -52px;
}
#test li>ul {
top: auto;
left: auto;
}
#test li:hover ul, li.over ul {
display: block;
}
#test .sub1 li, #test .sub2 li, #test .sub3 li {
list-style:none;
text-align:left;
}
</style>
</head>
<body>
<ul id="test">
<li><a class="abab" href="content/testpopular.php" title="Menu">TEST</a>
<ul class="sub1">
<li class="img1"><a class="number" href="#" title="Number1">Number1</a></li>
<li class="img2"><a class="number" href="#" title="Number2">Number2</a></li>
<li class="img3"><a class="number" href="#" title="Number3">Number3</a></li>
<li class="img4"><a class="number" href="#" title="Number4">Number4</a></li>
<li class="img5"><a class="number" href="#" title="Number5">Number5</a></li>
</ul>
</li>
</ul>
</body>
</html>
You are using CSS3 nth-child() selector which doesn't work in old browsers. I would suggest to give individual class names to your elements like this:
ul#test li ul.sub1 li.sub2 a
{
background-position: 0px 0px;
}