I'm trying to put a live chat button on the right side of a menu without moving the menu at all.. if i put it inside of the menu then the menu will try and use it as an item and if i put it above it will move the menu down, if i put it below it will not align it correctly even if i use padding.
Can anyone tell me how to move around an element on a page freely without affecting other elements around it (i.e moving them)
CSS
/*===== header =====*/
#header .row-1 { height:110px; background:#0d0d0d; }
#header .row-1 .logo { position:relative; margin-right: 55px; padding:0px 0 0 0; float:left; }
#header .nav { float:right; }
#header .nav li { }
#header .nav li a { color:#727171; text-decoration:none; }
#header .nav li a:hover,
#header .nav li a.current { color:#fff; }
By Using position:absolute on specific element you can achieve it.
Example:
.chat{
position:absolute;
right: 0px;
z-index: 9999;
width: xyz;
height: xyz;
}
Hey now you can used to position as like this
your main menu div id give to position relative
and give to chat id position absolute as like this
css
.nav{
position:relative;
}
.chat{
position:absolute;
right:-20px;
z-index:999;
width:xxx;
height:xxx;
}
HTML
<div class="nav">
<div class="chat">
// your chat code here
</div>
</div>
Without knowing the exact code i think somebody like that would work:
Set the outer container to a relative position. Now you can insert a item with a absolute Button in it wich is over all other items without moving them.
You can increase the z-index of that element and that way it will be above the other layers in your page and it will be able to move freely over the other elements.
You could try putting it above the menu, and then using a negative margin on the menu.
Related
My webpage I'm building has a right aligned unordered list nav menu, and I want the bullets to align with one another to the left of the menu. I was able to accomplish this in Chrome and IE by putting the list inside its own DIV; the bullets are displayed outside the div,so I can control their distance from the list by changing the DIV width. In Firefox, however, the bullets are displayed inside the DIV, and I do not appear to have a way to control them.
See the difference here:
http://s106.photobucket.com/user/El_Ornitorrinco/media/fftrouble.png.html
What's with the discrepancy? Is there a simple solution, or do I need a completely different approach? Thanks for your time.
Ricky
Used to this Code
Define you a tag display:block; and text-align:right; as like this
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
Css
ul li, ul{
list-style:square;
}
ul{
width:400px;
}
li a{display:block;text-align:right;}
Live Demo
Is this what you are looking for?
<ul>
<li>Milk></li>
<li>Eggs></li>
<li>Cheese></li>
<li>Vegetables></li>
<li>Fruit></li>
</ul>
CSS goes here
ul
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: right;
}
li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
}
If not then please create fiddle for it.
I have a problem with aligment of two li elements inside a div because in the next example
HTML
<div id="menu-container">
<div class="menu-left">
<ul id="menu-principal" class="menu">
<li>Hola</li>
<li>Hola2</li>
</ul>
</div>
<!-- More code -->
</div>
The CSS code is in the next link and I use that html structure because that is what is generated by placing a menu in wordpress.
http://jsfiddle.net/Soldier/KhLhR/1/
I have a simple code with two li elements and I want to align horizontally with 50% of width for each but doesn't work.
Edit
Well.. All responses involve float: left, but did not want to use float: left because this causes overflow to ul and I have to use overflow: hidden .. I thought there was another factor that was failing but they all give +1 and accept the answer that answered first.
Thanks
Add:
float: Left;
to the css class of the li elements of the menu (in this rule):
".menu-left ul li {"
After the "width: 50%"
The float property specifies whether or not a box (an element) should float.
See http://www.w3schools.com/cssref/pr_class_float.asp
This is purely to do with the fact that your width specification is more than you've allowed for the child element in relation to it's parent elements:
.menu-left ul li {
display:inline-block;
vertical-align: top;
width: 50%; // should be less than 50%
}
Updated fiddle: http://jsfiddle.net/KhLhR/3/
http://jsfiddle.net/Soldier/KhLhR/1/
.menu-left ul li {
display:inline-block;
float:left;
vertical-align: top;
width: 50%;
}
Add a left float to your li elements:
.menu-left ul li {
display:inline-block;
vertical-align: top;
width: 50%;
float: left;
}
So I have two things in a header, namely an image in a h1 and a nav. Here's a simplified version of the HTML:
<header>
<h1><img src="../img/logo.png"></a></h1>
<nav>
<ul>
<li>blahblah</li>
</ul>
</nav>
</header>
I want to make the h1 element go to the left and the nav go to the right. I simply gave the header a width and absolutely positioned both h1 and nav like so:
header {height: 120px;}
h1 {position:absolute; left: 0;top:0;}
nav {position:absolute; right:0; top:0;}
It works, but I find it somewhat inelegant. Is there any other nicer way to do it?
Yes, you should be able to just float them left and right without the positioning.
header {
height: 120px;
}
h1 {
float: left;
}
nav {
float: right;
}
usually you just float the elements in their respective corners, such as
header { overflow:auto; }
header h1 { float: left; }
header nav { float: right; }
overflow is used in order for header to retains a height around the elements, but it can be removed in some cases.
Float property of CSS allows you to float the element to right or left but if you are looking to indent the element then you may need to use
text-indent: 10px;
you may add this in a class and add this class to elements wherever you need the Indentation
I have a sign in button as shown below and when I try to click that the menu opens in which I am having an ASP.Net login control which is shown below my slider and not above it.So I would like to position it on top of my slider.And between my slider and sign in button I have menu bar.
So how do I do that?
I have followed this question on SO but did not succeed
This is my CSS:
#container {
width:780px;
margin:0 auto;
position: relative;
}
#topnavsignin {
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:right;
margin-top:-60px;
margin-left:120px;
}
#topnavsignin a.signin {
background:#88bbd4;
padding:4px 6px 6px;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url('../images/signin-nav-bg-ie.png') no-repeat 0 0;
*padding:4px 12px 6px;
margin-left:420px;
}
#signin_menu {
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
display:none;
background-color:#ddeef6;
position:absolute;
width:350px;
z-index:100;
border:1px transparent;
text-align:left;
top: 24.5px;
right: 171px;
margin-top:-55px;
margin-right: 0px;
*margin-right: -1px;
color:#789;
font-size:11px;
padding: 5px;
}
This is how I'm showing it:
<div id="container">
<fieldset id="signin_menu">
//Asp.Net Login Control
</fieldset>
</div>
//Here goes my Navigation menu
This is my slider part
<div id="slider_wrap">
<div id="wowslider-container1">
</div>
</div>
To position one Div over the other you use the z-index on the css, together with position: absolute or relative or fixed
Some examples:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
http://www.w3schools.com/css/css_positioning.asp
On the container that you like to be front set a bigger z-index than the containers that you like to be on back.
Note that: the z-index works only for position: absolute, relative, or fixed, and the divs that you like to control have this attributes. The example that you mention try to fix order of divs with out having one of this attributes (or with out using the z-index), so in example can not use z-index and its a tricky how to place one in front of other with out the z-index enabled.
As I see you do not have set index in one of them.
On the container that you like to be front set a bigger z-index than the containers that you like to be on back.
Note that: the z-index works only with position: absolute/relative/fixed; on the same element. The example that you mention try to fix order of divs without having one of this properties (or without using z-index); it is not possible to place one element in front of other without defining z-index together with position.
It is probably easy to implement, but hard to name it. I am struggling to display this layout:
<ul class='menu'>
<li>
<a>item1</a>
<ul class='submenu'> ... </ul>
<li>
<li><a>item2</a></li>
</ul>
in 2 horizontal lines: first line is ul.menu and second line is ul.submenu
Css:
ul.menu
{
position: relative;
height: 20px;
}
ul.menu li {
display: inline;
}
ul.submenu {
top: 20px;
left: 0px;
position: absolute;
}
Is there a way to do it without position:absolute, so that menu container is in the flow of the document (there is no gap is submenu isn't present)?
I've set up a jsFiddle for this.
If I understand the problem correctly, you want a two-line menu, the submenu of which is still in the document flow, so the page will adjust when there is no submenu.
The catch is this: Without position: absolute, the parent <li> elements will expand to contain the submenu <ul> elements. This will leave your top-level menu items will odd spacing, depending on the width of your submenu elements.
If this isn't a problem, then the above jsFiddle should solve the issue. If it is a problem, then there is a little more work to do (and I don't have a solution quite yet).
Check my answer here, I think it's similar to what you want.
EDIT: sorry, missed the css only idea, here's what I would do:
.submenu{ display:none;}
li:hover .submenu{ display: block;}
Use the following updated CSS. It will work perfectly.
ul.menu {
height: 20px;
}
ul.menu li {
display: inline;
float:left;
}
ul.submenu {
display:block;
margin:0px;
padding:0px;
}