I have some kind of an issue:
I have a footer, with text and a Facebook image in it.
For some reason I can't get the facebook icon directly to the right of the text.
Can someone please help me?
here is a link to jsfiddle
<div id="footerwrap">
<div id="footer">
<div class="copyright">2014 - 2015 <span class="bar">|</span>www.website.com<span class="bar">|</span>Created by website<span class="bar">|</span>
<ul>
<li><img src="http://www.commuwise.nl/wp-content/uploads/facebook.png" />
</li>
</ul>Like us on Facebook!</div>
</div>
</div>
And the css:
#footerwrap {
width: 1000px;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 30px;
background: #33FF66;
border-radius: 10px;
border: 1px solid #1feb52;
margin: 0px auto;
text-align: center;
color:#FFF;
}
#footer a {
color:#FFF;
text-decoration:none;
}
#footer a:hover {
color:#FFF;
text-decoration:underline;
}
#footer a:visited {
color:#FFF;
text-decoration:underline;
}
.bar {
font-size: 15px;
}
#footer .copyright ul {
list-style: none;
margin: 0px 0px 0px;
padding: 3px;
float:right;
margin-left:5px;
}
#footer .copyright img {
border: 0px;
}
#footer .copyright {
color: #fff;
line-height: 32px;
margin-left: 5px;
margin-top: 0px;
text-align: center;
}
Thanks!!
Best regards
Here is a js.fiddle: http://jsfiddle.net/DSrn4/1/
In your css code,
#footer .copyright ul {
list-style: none;
margin: 0px 0px 0px;
padding: 3px;
display:inline-block;
margin-left:5px;
}
removed: float:right;
added: display:inline-block;
Try this jsfiddle
<div id="footerwrap">
<div id="footer">
<div class="copyright">
2014 - 2015 <span class="bar">|</span>www.website.com<span class="bar">|</span>Created by website<span class="bar">|</span>Like us on Facebook!<img src="http://www.commuwise.nl/wp-content/uploads/facebook.png" />
</div>
</div>
</div>
Is this how you are wanting it to be? Working Fiddle
#footer .copyright ul {
list-style: none;
margin: 0px 5px;
padding:0 3px;
float:right;
}
#footer .copyright ul li a{
display:block;
margin:0;
padding:0;
}
#footer .copyright ul li a img{
display:inline-block;
vertical-align:top;
padding-top:3px;
}
Related
The menu bar itself is centered but the buttons inside the bar aren't. Any ideas on how to fix it?
I really don't know what I'm doing so any help is appreciated :D.
.main-navigation {
clear:both;
display:block;
float:left;
width:100%;
}
nav.main-nav .container {
padding:0;
text-align:right;
}
.container {
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
}
ul#primary-menu li a {
color:#404040;
font-size:14px;
font-weight:100;
letter-spacing:2px;
margin-right:35px;
text-decoration:none;
text-transform:uppercase;
}
ul#primary-menu > li > a {
line-height:40px;
}
.main-navigation a {
display:block;
text-decoration:none;
}
Try using this in your ".main-navigation", your menu bar should be centered because its width: 100% as long as it is your parent element this should work
text-align: center;
Also, try putting this in your ul
display: block;
<!-- if its horizontal -->
display: inline-block;
body, html{
margin: 0;
height: 100%;
}
.nav{
width: 100%;
height: 50px;
background-color: black;
text-align: center;
}
.nav ul{
margin: 0;
list-style-type: none;
}
.nav li{
display: inline-block;
border: 1px solid white;
width: auto;
height: 20px;
margin-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
.nav a{
text-decoration: none;
color: white;
transition: background-color 2s;
transition: color 2s;
}
<div class="nav">
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
</div>
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.
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
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 have been trying to float the social icons to the right of the page, but for some reason it won't work.
But the text at the top of the page floats perfectly.
Here is a fiddle:
check it out here
<div class="social">
<img src="img/twitter.png" width="32" height="32" alt="Twitter" />
<img src="img/google_plus.png" width="32" height="32" alt="Google" />
<img src="img/linkedin.png" width="32" height="32" alt="LinkedIn" />
<img src="img/facebook.png" width="32" height="32" alt="Facebook" />
</div>
clear:both
add the above css in social css
try this css
#wrapper {
margin: 0px auto;
width: 940px;
padding: 15px 0px 0px;
position: relative;
text-align: left;
}
#header {
width: 940px;
margin: 0px;
padding: 0px;
background: none repeat scroll 0% 0% rgb(255, 255, 255);
overflow: hidden;
}
#mast-head {
width: 940px;
float: left;
margin: 0px;
padding: 0px 0px 10px;
background: none repeat scroll 0% 0% transparent !important;
position: relative;
}
a.logo-txt {
text-decoration: none;
padding: 0px;
display: block;
float: left;
margin: 0px;
}
a.logo-txt #logo {
margin: 0px;
padding: 0px;
}
.personalisation {
margin: 0px auto;
float: right;
}
.welcome {
font-size: 12px;
font-weight: bold;
}
.social {
margin: 100px 0px auto;
float: right;
width:100%
}
.social a{
float:right;
}
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin-top: 160px;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}