I am trying to align a menu to the right of a div. As it stands the menu is sitting in the div top left. I want it top right... what am I missing? I have added text-align: right.... Ive tried float: right... I just can't get it.
<div id="UserPanel">
<div id="menu">
<ul>
<li>All Apps | </li>
<li>My Account | </li>
<li>Support | </li>
<li>Register / Login</li>
</ul>
</div>
</div>
The CSS CODE is
#UserPanel
{
width: 962;
height: 98;
background-image: url('bg-topbar.png');
}
#menu
{
text-align: right;
width: 962;
}
#menu ul /* Remove The Bullets */
{
list-style: none;
padding: 0;
margin: 0;
}
#menu li /* Place list in line */
{
float: left;
margin: 0 0.15em;
}
#menu li a /* Design it */
{
font-size: 0.75em;
background: url(background.gif) bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 8em;
display: block;
/* border: 0.1em solid #dcdce9; */
color: #C0C0C0;
text-decoration: none; /* Remove Underline */
text-align: center;
}
use this
#menu {
float: right;
text-align: right;
width: auto;
}
here is the jsFiddle Link
Try this:
#UserPanel
{
width: 962;
height: 98;
background-image: url('bg-topbar.png');
float : right;
}
JSFiddle
Add float:right; to #userpanel
Try this-
#menu
{
position:absolute;
top:0;
right:0;
width: 962;
}
LIke this
DEMO
CSS
#menu
{
text-align: right;
float:right;
}
First of all you have not defined width and height attribute properly. What i mean is either defined it with px or %; e.g width:962px;
By the way here is an working example http://jsfiddle.net/hT4Bd/1/
Update #menu styles as follows.
#menu
{
text-align: right;
width: 962;
float: right;
}
None of these worked but I did find Arif Khan gave me an idea. I solved this by doing...
#menu
{
position: relative;
left: 500px;
}
Related
I'm kind of a beginner using CSS3 and I'm trying to center a li tag that contains a SVG object.
I want the SVG object to appear centered while the other li tags float to the left and right.
Also, the SVG object is bigger than the other li, I'd like to align all the li so the bottom of the SVG is at the same height as the other li.
Any tips on how to do that ?
Thanks !
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
background-color: red;
height: 200px;
}
ul {
list-style: none;
background-color: red;
position: absolute;
bottom: 0;
width: 100%;
}
ul li {
background-color: yellow;
display: inline-block;
float: right;
}
ul li:first-child {
float: left;
}
ul li.svg {
float: center;
}
<div class="container">
<ul>
<li>Title</li>
<li class="svg"><object id="svg" type="image/svg+xml" data="https://la-cascade.io/content/images/2015/06/kiwi.svg" width="20%"></object></li>
<li>Project</li>
<li>Project</li>
<li>Project</li>
</ul>
</div>
How about targeting the object #svg ?
Try a text-align: center; for the containing li tag. Works in Safari and Chrome.
I tried to take off the SVG object and it looks like I can't even get the li tag to be centered:
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
background-color: red;
height: 200px;
}
ul {
list-style: none;
background-color: red;
position: absolute;
bottom: 0;
width: 100%;
}
ul li {
background-color: yellow;
display: inline-block;
float: right;
}
ul li:first-child {
float: left;
}
ul li.svg {
float: center;
text-align: center;
}
<div class="container">
<ul>
<li>Title</li>
<li class="svg">Example</li>
<li>Project</li>
<li>Project</li>
<li>Project</li>
</ul>
</div>
for this you can simply add this code to your css
ul li.svg {
text-align: center;
}
very simple . but i seen you use incorrect value for "float"
float:center ;
in css float can be
float:right;
or
float :left;
hope this can help
Here's a try with "title" (the first item) floating on left and all generic items on right, due to a margin-left as wide as 2 columns.
Columns have similar but not equal heights by fixing line-height to 1.5 and a multiple of latter. That means you must know the number of items to set height of title with this quick solution.
Codepen: http://codepen.io/PhilippeVay/pen/ORqQoo
Note on semantics: a title should be a h1-h6 element just before this list. If you had previously on your page a h1, than it would be a h2 followed by that list.
/* (Codepen normalize and Autoprefixer are ON) */
.container {
position: relative;
background-color: red;
min-height: 200px;
}
ul {
list-style: none;
width: 100%;
padding-left: 0;
}
li {
width: 33.33%;
}
li:nth-child(n+3) {
margin-left: 66.67%;
line-height: 1.5;
background-color: yellow;
}
li:first-child {
float: left;
line-height: 4.5;
text-align: center;
background-color: tomato;
}
li.svg {
float: left;
vertical-align: top;
background-color: lightblue;
}
<div class="container">
<ul>
<li>Title</li>
<li class="svg"><object id="svg" type="image/svg+xml" data="https://la-cascade.io/content/images/2015/06/kiwi.svg" width="20%"></object></li>
<li>Project</li>
<li>Project</li>
<li>Project</li>
</ul>
</div>
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.
So, I have a navigation bar and then an <ul> which has some <li>inside. I want it to be vertically aligned with the navigation bar .navbar but it seems it's not working. Do anyone have andy idea what am I doing wrong?
Here is the fiddle and code: http://jsfiddle.net/x7EAg/2/
<style>
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
</style>
<nav class="navbar" role="navigation">
<div class="container">
<div class="logo-holder"></div>
<ul class="sections">
<li>Shop</li>
<li>Team</li>
<li>Events</li>
<li>Experience</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Thank you!
If I understand what you are trying to achieve. Then you should make the logo absolutely positioned and then aligning the ul can be done with line-height. Full css:
.navbar {
width: 100%;
height: 90px;
line-height:90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
position: absolute;
top:0;
left:0;
background-repeat: no-repeat;
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
}
And updated fiddle
i changed the display of your logo-holder to inline-block and then set vertical-align:middle
now it appears next to the logo, and vertically centered.
see here for a fiddle http://jsfiddle.net/gaurav5430/x7EAg/3/
this is the complete css:
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
display:inline-block;
vertical-align:middle;
}
.navbar .sections {
display:inline-block;
vertical-align:middle;
list-style: none;
margin:0px;
padding:0px;
background:#aaa;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
What I believe is going on is your logo is pushing your ul down. like was mentioned above. You may want to float your logo-holder class left. That would allow you to position your li as you needed. Line-height is a way to do this, you could also use margin, padding, or absolute position for your li as needed. Good luck.
I have a vertical navigation menu, with a picture next to it. So now the navigation menu and the pic are vertically aligned to the top. I want it to be bottom, like, the navigation menu to vertically finish at the same point where the image does. How do I go about doing this with using absolute positioning?
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Portfolio</li>
<li>Reviews</li>
</ul>
<img src="pic.jpg">
CSS:
ul {
float: left;
text-align: right;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 230px;
height: auto;
float: left;
}
I don't want to use absolute positions, because the image is supposed to interconnect with the navigation menu (It's supposed to be a png picture of a guy with the buttons coming from behind him) so I'm worried it might mess things up if someone had a different font sizing in their browser.
You can use display: table; to achieve this.
Create a wrapping element for the ul and img and give it display: table;. ul and img should have display: table-cell; vertical-align: bottom; then. You don't need float: left; on ul or img either if you do it this way.
Demo: http://jsfiddle.net/xq6SY/
HTML
<div class="wrapper">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Portfolio
</li>
<li>Reviews
</li>
</ul>
<img src="pic.jpg">
</div>
CSS
.wrapper {
display: table;
}
ul {
display: table-cell;
text-align: right;
vertical-align: bottom;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 300px;
height: auto;
display: table-cell;
vertical-align: bottom;
}
try this code even though I pressed it to the bottom of the screen)) DEMO
<div class="page-wrap">
</div>
<footer class="site-footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Portfolio</li>
<li>Reviews</li>
</ul>
<img src="http://placehold.it/350x300">
</footer>
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
/*height: 142px; */
}
.site-footer {
background: white;
}
ul {
/*float: left;*/
text-align: right;
display:inline-block;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 230px;
height: auto;
display:inline-block;
vertical-align:bottom;
}
You can do this:
fiddle
css
ul, img { display:inline-block; vertical-align:bottom;}
** Important: Don't forget to remove your floats, and add padding:0; margin:0; to your UL.
(look at the fiddle)
I've created a basic layout and on the page are 2 links, one register and one login button.
Take a look at my jsfiddle link to see how it looks. There's a black box which will be the logo and you will see the green and blue boxes which are my buttons.
I need them at the top of the page.
http://jsfiddle.net/4EZa5/
Not sure what I need to do to the CSS to make the links sit at the top of the very page?
HTML:
<div id="accountLinks">
<ul>
<li class="login">Log in</li>
<li class="register">Register</li>
</ul>
</div>
CSS:
#accountLinks{
float: right;
height:20px;
width: 170px;
margin: 0;
padding: 0;
}
#accountLinks ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#accountLinks li{
float: left;
text-align: center;
}
#accountLinks .login{
background: url(../images/button_login.gif) no-repeat;
width: 70px;
height: 20px;
color: #FFF;
}
#accountLinks .register{
background: url(../images/button_register.gif) no-repeat;
width: 70px;
height: 20px;
color: #FFF;
}
Thanks
Your H1 tag is a block element and is pushing the rest down. Just add float: left; to h1 css
h1{
width: 351px;
height: 49px;
background: #000;
text-indent: -9999px;
float: left;
}
To style the link only in login:
#accountLinks .login a {
color: #FFF;
}
#accountLinks .login a:hover {
color: yellow;
}
They're being pushed down by the <h1>Salesboard</h1> - is it possible to move that to just after the accountLinks div, or does that need to stay before them in the HTML?
If so, then this should fix the accountLinks:
#accountLinks{
position: absolute;
top: 0px;
right: 0px;
height:20px;
width: 170px;
}
See this fiddle: http://jsfiddle.net/NZ2T5/
I added a style next to the id="accountLinks" this will be easier to position you div which contains the login etc..
<h1>Salesboard</h1>
<div id="accountLinks" style="margin-top:-45px;">
<ul>
<li class="login">Log in</li>
<li class="register">Register</li>
</ul>
</div>
Simply place h1 at the bottom of #header.
You couldn't see your links, because they were floating left! underneath your css-styled Salesboard
Additionally your text-intend (9999) is such that no text will be shown.
Solution
Newer browsers offer, the attribute fixed which will do exactly as it says.
Add this "position: fixed;"
#accountLinks{
position: fixed;
top: 0px;
right: 0px;
height:20px;
width: 170px;
}
#Container{
width:100%;
}