I want to achieve this:
I have achieved this:
Why are the margins set on #members-content-box not working correctly? The page is live at http://goo.gl/e7yiAf
<section id="members-content">
<div id="members-menu">
<ul>
<li>My Items</li>
<li>Submit Items</li>
<li>Account Settings</li>
</ul>
<div id="menu-line">
</div>
</div>
<div id="members-content-box">
hello
<br /><br /><br />
</div>
</section>
My CSS:
/* members menu*/
#members-content { width: 100%; margin: 0 auto;}
#members-menu { width: 100%; text-align: left; margin-bottom: 30px;}
#members-menu ul { list-style: none;}
#members-menu li { background-color: #FFF; width: 127px; height: 25px; text-align: center; float: left; margin-right: 7px; padding-top: 8px}
#members-menu li a { font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-weight: normal; color: #2e2e2e; text-decoration: none;}
#members-menu li a:hover { color: #ffbe00;}
#members-menu li a:active { color: #ffbe00;}
#menu-line { height: 5px; background-color: #FFF; float:left; min-width: 100%; margin-left:0 40px 0 40px;}
/* members-content-box */
#members-content-box { background-color:#FFF; padding: 35px; float: left; width:100%; border: 1px solid grey;}
Use margin instead of padding - padding will just enlarge the div from inside including its background
#members-content-box { background-color:#FFF; margin: 35px; float: left; width:100%; border: 1px solid grey;}
To Achieve the above one put the padding-bottom for members-menu ul
#members-menu{
padding-bottom:30px;
}
And change members-content-box css like this
#members-content-box {
background-color: #FFF;
padding: 35px;
float: left;
width: 90%;
border: 1px solid grey;
margin-left:30px;
}
I think this one helpful to you.
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>
For some reason I cannot get the right menu to float right this is a horizontal div menu. the image and the left links are perfect.. the right just doesn't work, the are both in a single div.
I would like it to look like
logo--- link---link--link--link-----------------------------Date & Time
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
float: left;
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#right li {
float: right;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
<div id="menu">
<img src="logo.svg">
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
<div id="right">
<ul>
<li>Date & Time</li>
</ul>
</div>
</div>
You need to float your block level elements, otherwise they will still take up 100% width. So float #left and #right.
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#right li {
padding-top: 9px;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
#left {
float: left;
}
#right {
float: right;
}
#menu li {
display: inline-block;
}
<div id="menu">
<img src="logo.svg">
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
<div id="right">
<ul>
<li>Date & Time</li>
</ul>
</div>
</div>
I would suggest you check out flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can get a real good understanding from https://css-tricks.com/all-about-floats/. Give it a read .. :D
/* align all direct child of menu, in same horizontal .... */
#menu > * {
display: inline-block;
color: #fff;
}
/* float the right component to right, and add a margin to top to bring all to same level */
#right {
margin-top: 10px;
overflow: hidden;
float: right;
}
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
margin-top: 50px;
}
#menu > * {
display: inline-block;
color: #fff;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
float: left;
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right {
margin-top: 10px;
overflow: hidden;
float: right;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
<div id="menu">
<a href="">
<img src="logo.svg">
</a>
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
<div id="right">
<ul>
<li>Date & Time</li>
</ul>
</div>
</div>
Working Fiddle
Here is a simple hack. What I have done is added your right div inside left div, and it has done the trick.
<div id="menu">
<img src="logo.svg">
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<div id="right">
<ul>
<li style="color:white">Date & Time</li>
</ul>
</div>
</ul>
</div>
</div>
CSS
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
float: left;
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#right li {
float: right;
margin-top:10px;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
How do you centre the links themselves in the navigation bar?
The border is fluid and the nav buttons rearrange themselves to different screen sizes but I just can't get them to be in the middle, instead they are always on the left.
My HTML:
<div id="centerment">
<div id="navigation">
<div id="menu4">
<ul>
<li> <span class="title"><strong>HOME</strong></span> </li>
<li> <span class="title"><strong>ABOUT</strong></span></li>
<li> <span class="title"><strong>WOOD</strong></span> </li>
<li> <span class="title"><strong>CONTACT</strong></span></li>
</ul>
</div>
My CSS:
In all 3 responsive size: (mobile, tablet and desktop).
#centerment {
position:relative;
clear: both;
float: left;
margin-left: 0px;
margin-right: 0px;
width: 100%;
display: block;
}
#menu4 ul {
list-style: none;
font-family: "corbert regular regular";
font-size: 10px;
letter-spacing: 2px;
line-height: 1.2em;
float: left;
clear: left;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
#menu4 ul li{
float: left;
}
#menu4 ul li a{
display: inherit;
text-decoration: none;
color: #000000;
text-align: center;
margin-left: 0 auto;
margin-right: 0 auto;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
width: 170px
}
#menu4 ul li a span{
display:inherit;
}
#menu4 ul li a span.title{
}
#menu4 ul li a:hover span.title{
color: #000000;
}
#menu4 ul li a span.text{
padding: 0px 5px;
font-family: "corbert regular regular";
font-size: 13px;
font-style: normal;
font-weight: 300;
letter-spacing: normal;
line-height: 1.6em;
color: #000000;
visibility: hidden;
}
#menu4 ul li a:hover span.text{
visibility:visible;
}
.gridContainer.clearfix #navigation #menu4 ul li a .title {
font-family: Corbert;
}
Many many thanks in advance!
set containing element to text-align: center; then set the li's to display: inline-block; if there are no floats on the a tags this should do it.
Get rid of borders on #menu4 ul, give it a margin of -1px auto;, add this:
#menuBox {
margin: 0 auto;
width: 53.2em;
height: 30px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
To contain the ul.
I originally posted the wrong link here is the correct one: jsFiddle
You can lose the ul and just use spans. Change your HTML to this:
<div id="centerment">
<div id="navigation">
<div id="menu4">
<div class="outer">
<span class="inner"><span class="title"><strong>HOME</strong></span> </span>
<span class="inner"><span class="title"><strong>ABOUT</strong> </span></span>
<span class="inner"><span class="title"><strong>WOOD</strong></span> </span>
<span class="inner"><span class="title"><strong>CONTACT</strong> </span></span>
<span class="finish"></span>
</div></div></div></div>
Make sure to keep the "finish" span at the bottom of your list. That spaces all the links correctly.
Then add this to your CSS:
.outer {text-align: justify; width:70%; margin:0px auto; border-top:1px solid; border-bottom:1px solid;}
.outer span.finish {display: inline-block; width: 100%}
.outer span.inner {display: inline-block; white-space: nowrap}
Then change #menu4 ul to #menu4 .inner with this CSS:
#menu4 .inner {list-style: none; font-family: "corbert regular regular"; font-size: 10px; letter-spacing: 2px; line-height: 1.2em;
}
and change the "#menu4 ul li a" to say "#menu4 a"
That should do it. You can change the width % of .outer to play with the width of the nav as a whole.
Someone asked me to improve his CSS to prevent the navigation menu from changing position when the browser gets smaller, but I can't figure out why it won't work. See the jsFiddle: http://jsfiddle.net/gtvTY/10/
The HTML:
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
This is the original menu:
ul.menu {
position:absolute;
left:18%;
right:18%;
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 64%;
z-index: 3;
}
ul.menu li {
float: left;
margin: 0;
padding: 0;
}
ul.menu a {
background: #333;
color: #ccc;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
ul.menu a:hover {
background: #666;
color: #fff;
padding-bottom: 8px;
}
I have redesigned it a bit to this. But it doesn't work at all...
#menu ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
}
#menu li
{
float: left;
margin: 0 0.15em;
}
#menu li a
{
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}
Why doesn't this menu stay centered at all times?
Maybe it is something like this you are looking for - jsFiddle in comment
You need to put the menu in a wrapping container. Give it a width and set the margin: 0 auto;
See fiddle here: http://jsfiddle.net/AndrewHenderson/gtvTY/7/
HTML:
<div class="container">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
</div>
CSS:
.container{
margin: 0 auto;
width: 800px;
}
Is that what you want? jsfiddle
Menu canter aligned in the bowoser.
Menu Items will not go in the second row.
if this is so the solution is
You have to use position:relative; instead of position:absolute;
<div class="center">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
and define a width to your menu css
.center
{
width:auto;
}
#menu
{
width:900px;
margin:0 auto;
position:relative;
}
#menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
float: left;
margin: 0 0.15em;
}
#menu li a {
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}
I am trying to get start a web site for fun but I am having issues with CSS styles and tags with aligning I have a container, horizontal nav, left Nav, right Nav, Header and footer.
They are all in the container element but I can not align them properly. The header and norz nav are fine and so are the footers. The problem I am having is that the left body and right do not align properly can any one help. below is the coding for the HTML
<body>
<div id="container">
<div id="header">
</div>
<div id="horizontalnav">
<div class="navlinks ">
<ul>
<li>Facebook</li>
<li>Gaia</li>
<li>Roblox</li>
<li>Adventure Quest</li>
<li>Anime Freak</li>
<li>Youtube</li>
</ul>
</div>
</div>
<div id="leftnav">
<p>Left Nav </p>
</div>
<div id="body">
</div>
<div id="rightnav">
<p>right Nav </p>
</div>
<div id="footer">
this is the footer
</div>
</div>
</body>
and now for the css yes i use the one off of 2createawebsite.com and try to manipulate it
#container {
width: 100%;
}
#header {
width: 89%;
height: 15%;
position: relative;
background-image: url(Header.jpg);
border-bottom: 2px solid #000000;
}
#header a {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
font-family: Verdana;
font-size: 14px;
}
#header a:visited {
color: #000000;
text-decoration: underline;
font-weight: bold;
}
#header a:hover {
color: #cc0000;
text-decoration: none;
font-weight: bold;
}
#horizontalnav {
width: 89%;
height: 30px;
position: relative;
background-color: #F2D6AF;
border-bottom: 2px solid #000000;
}
.navlinks {
position: absolute; top: 4px; left:240px;
}
.navlinks ul {
margin: auto;
}
.navlinks li {
margin: 0px 18px 0px 0px;
list-style-type: none;
display: inline;
}
.navlinks li a {
color: #000000;
padding: 5px 12px 7px;
text-decoration: none;
font-size: 16px;
font-family: Verdana;}
.navlinks li a:hover{
color: #ffffff;
background-image: url(Header.jpg);
text-decoration: underline;
}
#header p {
color: #000000;
font-family: Arial;
font-weight: bold;
}
.smalltext {
font-size: 9px;
font-family: Arial;}
#leftnav {
float: left;
width: 10%;
height: 70%;
background-color: #F8AA3C;
border-right: 1px dashed #694717;}
#rightnav {
float: right;
width: 10%;
height: 70%;
background-color: #F8AA3C;
border-left: 1px dashed #694717;}
#body {
margin-left :0px ;
width : 50% ;
padding: 0px 0px 0px 0px;
}
#body p {
word-wrap : true ;
font-family : courier new ;
}
#footer {
clear: both;
background-color: #D1C0A7;
}
If you change #header and #horizontalnav to 100% this makes everything expand to the width of the page; I assume this is what you wanted to accomplish
#header {
/* existing code */
width: 100%;
}
#horizontalnav {
/* existing code */
width: 100%;
}
As for the left column, body column and right column, these can be set to inline-block (float is not needed then) and their widths can be set to 10%, 80%, 10% respectively. In general this should fix the layout.