How to align lists to top right ? How can i align a list to the top right of the div that contains it ? Will float work ?
Html
<div id="wall">
<ul>
<li>Login</li>
<li>Signup</li>
</ul>
</div>
CSS
#wall{
position:relative;
}
#wall ul li {
list-style:none;
margin-right:50px;
position:absolute;
top:0;
right:0;
}
apply position:relative to the parent div. After apply the following styles for the list.
.list{
position:absolute;
top:0;
right:0;
}
EDIT
Thanks to Manwal for adding the jsfiddle.
DEMO
Change the order of li then use float:right; - DEMO
HTML
<div id="wall">
<ul>
<li>Signup</li>
<li>Login</li>
</ul>
</div>
CSS
#wall{
position:relative;
}
#wall ul li {
list-style:none;
margin-right:50px;
position:relative;
float:right;
}
Yes, using float: right will work.
http://jsfiddle.net/k0r1dj10/1/ or http://jsfiddle.net/k0r1dj10/6/ with more than one drop down.
Additionally what might be better is to set the outer div to position: relative as well as the inner div to position: absolute and top: 0 as well as right: 0.
http://jsfiddle.net/k0r1dj10/3/
To use more than one div in the relative way, you have to use another parent div. This requires you know the width, tho. http://jsfiddle.net/k0r1dj10/5/
Try this:
DEMO
CSS:
#wall{
position:absolute;
top:0;
right:0;
}
HTML:
<div id="wall">
<ul>
<li>Login</li>
<li>Signup</li>
</ul>
</div>
.left_box1 {
width: 50px;
height: 50px;
padding-top: 10px;
text-align: right;
}
Related
This is what my page currently looks like: Here
I want the social icons to position in line with the rest of the navigation content. At the moment they are beneath the content. I thought float right would fix things. Is it because of my browser size? How can I fix this then? Here is my code:
HTML:
<div id="Nav">
<div id="NavContent">
<ul>
<li id="Title">PavSidhu.com</li>
<li>Home</li>
<li>Web Design</li>
<li>Graphic Design</li>
<li>How it Works</li>
<li>Pay</li>
<li>Contact</li>
</ul>
<img src="Images/Twitter.png" class="Social"/>
<img src="Images/Pinterest.png" class="Social"/>
</div>
</div>
CSS:
#Nav {
position:fixed;
width:100%;
background-color:#f26522;
}
#NavContent {
margin:0 auto;
width:90%;
}
ul {
margin:0;
padding:0;
}
li {
font-family: Bebas;
color:#FFF;
list-style-type:none;
margin:0;
padding:0 1%;
display:inline;
vertical-align:middle;
font-size:20px;
}
#Title {
font-size: 35px;
}
.Social {
height:35px;
float:right;
}
Thanks guys :)
The <ul> is a block element, so it wants to be 100% width by default. If you make it an inline element with display: inline; instead, there will be space for the icons to sit next to the rest of the nav bar.
ul {
margin:0;
padding:0;
display: inline;
}
You mean you want the social-media-icons higher? Next to the menu-items instead?
Try using
display: inline-block;
for your ul.
set ul to display: inline-block
As explained earlier, ul is a block element that will take 100% of the width of the parent element, so the floated elements will start on the next line.
To fix this, you can use:
ul {
margin:0;
padding:0;
border: 1px solid blue; /*for demo only */
display: inline-block;
width: inherit;
}
See demo at: http://jsfiddle.net/audetwebdesign/tAjW8/
You need to set width: inherit or else the computed width will be narrower than you might expect.
I've tried numerous of things to fix this. I cannot seem to get the nested div inside the parent div without having to use margin. I'm trying to get it in the regular way which is position:relative on parent and position:absolute on nested. It's not working though, anybody know why?
HTML
<div class="header">
<div class="logo">
<img src="/images/logo.png" width="96" height="82">
</div>
<div id="nav">
Portfolio
About
Contact
</div>
<div id="headerPro">
</div>
</div>
CSS
.header {
position:relative;
background-color: #2C2E31;
border-bottom: #242426 2px solid;
height: 182px;
}
.logo {
text-align: center;
padding-top: 35px;
}
#nav {
position:absolute;
bottom: 0;
width: 100%;
text-align:center;
text-decoration:none;
font-size:20px;
font-family:raleway-regular;
}
#nav a {
border-bottom:#FFFFFF 2px solid;
color:#FFFFFF;
text-decoration:none;
margin-left: 8px;
margin-right:8px;
}
#headerPro {
position:absolute;
float:right;
width:100px;
height:100px;
background-color:red;
}
It's hard to tell what exactly you want it to look like, but maybe I got you right:
I revised your HTML code to use ul for the nav which is best practice:
<div class="header">
<div class="logo">
<img src="/images/logo.png" alt="logo"/>
</div>
<ul id="nav">
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="headerPro">
</div>
</div>
With that your css code could look like that:
.logo > img {
display: inline-block;
width: 96px;
height: 82px;
}
#nav {
position:absolute;
list-style-type: none;
bottom: 0;
width: 100%;
text-align:center;
text-decoration:none;
font-size:20px;
font-family:raleway-regular;
}
#nav > li {
display: inline;
}
#headerPro {
position:absolute;
top: 35px; /* assuming you want this to line up with the logo */
right: 0;
width:100px;
height:100px;
background-color:red;
}
Here is a demo.
See this fiddle
Example
I have made two changes added a float:left to the logo css:
.logo {
float:left;
}
and removed the position:absolute from the header pro css
Your div is flowing outside the header block because of the logo div, if you make that float left (as I have done in the fiddle) the Red Div will move up.
It would help if you could explain exactly where you want the #HeaderPro div..
Apparently the browser positions your div#headerPro just below the previous(sibling) div. If you want it to be part of the parent div, add top:2% to position the red div in the top right corner of the black div.
#headerPro {
position:absolute;
float:right;
width:100px;
height:100px;
background-color:red;
top: 1%;
}
I want to place a stable menu in my site. In the site, even if we move down the page, I would like to always display the menu on the top.
Example: iplex.co.in... Please visit this site for demo.
Using position:fixed you can set the position of the element relative to the browser window.
HTML:
<div id="main">
<div id="menu">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
</div>
CSS:
#main
{
height:1200px;
width:auto;
border:1px solid Red;
}
#menu
{
height:50px;
width:auto;
background-color:#DDD;
position:fixed;
top:20px;
left:60px;
}
#menu ul li
{
display:inline;
float:left;
margin:5px 10px;
}
See working sample
You can do it by placing the <div> with positions : fixed for sample
#navigationMenu {
position: fixed;
margin-left: 1086px;
z-index: 10000;
}
You should use position: fixed in order to make some element fixed in the page.
HTML:
<ul id=menu>
<li>Section 1
<li>Section 2
<li>Section 3
</ul>
CSS:
#menu {
position: fixed;
right: 0;
top: 50%;
width: 8em;
margin-top: -2.5em;
}
For your specific usage, check this page: http://www.w3.org/Style/Examples/007/menus.en.html
use a position:fixed; property to your menu id.
Endles trying to create a css layout
<div id="act"><img src="img/home01.jpg"></div>
<div id="buttons></div>
img "home01" should fit the screen. No scrolls, no whitespaces, no overflows, whatever is the monitor size and whatever is the img original size.
div buttons should be available for clicking, i.e. in front of the img "home01" (higher z-index) and centered hor&ver on the screen.
Please help.
First you have to set style to your div id="act" to cover whole screen
like
#act{
position:absolute;
left:0; top:0; right:0; bottom:0;
height:100%; width:100%;
}
Now, there is image inside your div, so set style to that image like
img { min-width:100%;min-height:100%; }
<div id="act">
<div id="buttons">
<button>test1</button>
<button>test2</button>
<button>test3</button>
</div>
<div id="content"></div>
</div>
#act {
position: absolute;
width: 100%;
height: 100%;
background-image: url( "http://hdwallpaperpics.com/wallpaper/picture/image/Opera-Background-Blue-Swirls.jpg" );
}
#buttons {
position: absolute;
}
have you tried width:100%? If the img is a background image (tileable) use background: url('img/home01.jpg') repeat-x
The buttons should be over the image? then you should change your html a little bit. Put them inside the first div. CLOSE the img tag, if you really need it.
fiddle
Here is the working fiddle: http://jsfiddle.net/surendraVsingh/ZpvsC/
HTML
<div id="act"><img src="http://images.travelpod.com/tripwow/photos/ta-00ad-668e-a3e6/night-gondeliers-venice-italy%2B1152_12878015263-tpfil02aw-3646.jpg"></div>
<div id="buttons">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</div>
CSS
#act img{width:100%; overflow:hidden; position:relative;}
#buttons{position:absolute; z-index:999; top:20px; right:5%; color:#fff; display:block;}
#buttons li{display:inline-block; margin:0 5px 0 0;}
I'd like to make a menubar, which is fixed on the top of the page while scrolling. Something like the top menu in Facebook.
Also, I want a div holding the logo float at the left of menubar, and a nav float at the right of the menubar.
This should get you started
<div class="menuBar">
<img class="logo" src="logo.jpg"/>
<div class="nav">
<ul>
<li>Menu1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</div>
body{
margin-top:50px;}
.menuBar{
width:100%;
height:50px;
display:block;
position:absolute;
top:0;
left:0;
}
.logo{
float:left;
}
.nav{
float:right;
margin-right:10px;}
.nav ul li{
list-style:none;
float:left;
}
#header {
top:0;
width:100%;
position:fixed;
background-color:#FFF;
}
#content {
position:static;
margin-top:100px;
}
to set a div at position fixed you can use
position:fixed
top:0;
left:0;
width:100%;
height:50px; /* change me */
The postition:absolute; tag positions the element relative to it's immediate parent.
I noticed that even in the examples, there isn't room for scrolling, and when i tried it out, it didn't work.
Therefore, to pull off the facebook floating menu, the position:fixed; tag should be used instead. It displaces/keeps the element at the given/specified location, and the rest of the page can scroll smoothly - even with the responsive ones.
Please see CSS postion attribute documentation when you can :)