I am trying to align the ul to the center of the div, it's not working here is my HTML code is:
<div id="container">
<div id="footer">
<ul id="footer_links">
<li>About</li>
<li>Faq</li>
<li>How Rang De Works</li>
<li>Contact</li>
<li>Support</li>
</ul>
</div>
<div>
My CSS is:
#container {width:975px;margin:0 auto;}
#footer {text-align:center;}
ul#footer_links {margin:0px;text-align:center;}
ul#footer_links li {float:left; list-style:none; padding:10px 0px 0px 20px;}
Link to HTML code
Remove float: left from ul#footer_links li and use display: inline instead
JSFiddle: http://jsfiddle.net/Efbjv/1/
text-align:center; is just to align pure text inside an element. If you want to center a block elements, you should use margin-left: auto;margin-right: auto; in the element that will be centered.
#footer{
text-align:center;
}
ul#footer_links{
margin:0px auto;
width:90%;
}
#container{width:975px;margin:0 auto; border:1 px solid #000;}
#footer{text-align:center;}
ul#footer_links{margin:0 auto; text-align:center;}
ul#footer_links li{ list-style:none; display:inline; padding:10px 0px 0px 20px;}
Should solve the problem, changed ul#footer-links to be centered instead and the li element is now inline so it doesn't make a linebreak after each li.
The CSS property text-align only affects inline elements, not block elements. So you have to make your ul and li elements inline, like:
#container{ width:975px; margin:0 auto; }
#footer{ text-align:center; }
ul#footer_links{ margin:0px;text-align:center; display:inline; }
ul#footer_links li{ display:inline; list-style:none; padding:10px 0px 0px 20px; }
Related
My header (#M_header UL) is wider than its containing block(#M_header) even though it is set at 100% width. I just recently started using % for the width over PX, so I am new to it.
code:
<html>
<body>
<div id="container">
<header id = "M_head">
<h2><ul>Title</ul></h2>
</header>
<nav id="M_nav">
<ul>
<li>MUSIC</li>
<li>NEWS</li>
<li>STORE</li>
<li>BLOG</li>
<li>CONTACTS</li>
<li>ABOUT</li>
</ul>
</nav>
<section id="M_section">
<div id="M_stuff"></div>
</section>
<footer id="M_footer">
</footer>
</div>
</body>
</html>
css:
html, body {
max-width:100%;
margin:0px;
font-size:1em;
display:block;
}
#container {
text-align:center;
box-sizing:border-box;
margin: 0px auto;
border:2px solid black;
width:75%;
}
#M_head {
color:black;
border:2px solid blue;
width:100%;
}
#M_head ul {
text-align:left;
border:2px solid blue;
}
js.fiddle : http://jsfiddle.net/65taytw6/
added padding value as 0.check the below site.
#M_head ul {
text-align:left;
border:2px solid blue;
width:100%;
padding:0;
}
http://jsfiddle.net/65taytw6/2/
Fiddle
#M_head ul {
text-align:left;
border:2px solid blue;
width:inherit;
}
make width to inherit
If you want to UL to take the same width as container.
No need to specify the width of UL.
Just make the following change in your css file. Remove width property.
#M_head ul {
border: 2px solid blue;
text-align: left;
/* width: 100%; */
}
For better solution use *{margin:0; padding:0;}
Wherever you want just apply margin or padding as per your requirement, it will reset all HTML tags margin and padding.
I am trying to align the button and links in floated UL list. However it seems they are not getting properly aligned. [Note: we have one link and other is form button].
Following is code and link to codepen:
<div>
<ul>
<li>
<button>Hello</button>
</li>
<li>
Delete
</li>
</ul>
</div>
div{
background:yellow;
overflow:hidden;
}
ul li{
float:right;
list-style:none;
}
a, button{
padding: 4px;
border:1px solid green;
margin-left:5px;
font-size:12px;
text-align:center;
}
The reason your li elements aren't getting aligned properly is because of what's inside them.
You have one button and one a-tag. Buttons are by default displayed as a block-element while a-tags are displayed as an inline-element.
This results in your button and your link having different padding because top/bottom padding doesn't show on inline elements.
You can easily solve this by adding display: block; or display: inline-block; to your css rule.
div{
background:yellow;
overflow:hidden;
}
ul:after{content: '.'; visibility:hidden; height:0; display:block; clear:both;}
ul li{
float:right;
list-style:none;
}
a, button{
padding: 4px;
border:1px solid green;
margin-left:5px;
font-size:12px;
display: inline-block;
}
<div>
<ul>
<li>
<button>Hello</button>
</li>
<li>
Delete
</li>
</ul>
</div>
use display:inline-block instead of float
the issue was because of float:right by using display:inline-block element adjusts to the width of its children and you can align it by adding text-align
div {
background: yellow;
overflow: hidden;
text-align:right;
}
ul li {
display: inline-block;
list-style: none;
}
a,
button {
padding: 4px;
border: 1px solid green;
margin-left: 5px;
font-size: 12px;
}
<div>
<ul>
<li>
<button>Hello</button>
</li>
<li>
Delete
</li>
</ul>
</div>
pls give display:block for a(anchor) tag.if you use padding or margin(etc..) in anchor tag.we need to use display.
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 tightly wrap some divs with an outer div, such that the outer div resizes with the addition of more inner divs. Right now, the parent div just fills 100% width, which isn't quite right.
Here's some code and a Fiddle:
<div id="toolbar">
<ul>
<li><i class="icon-facebook-sign"></i></li>
<li><i class="icon-twitter-sign"></i></li>
<li><i class="icon-envelope-alt"></i></li>
<li><i class="icon-cloud-upload"></i></li>
<li><i class="icon-cog"></i></li>
</ul>
</div>
#toolbar {
overflow:hidden;
padding:5px;
background:#FFF;
border-radius:5px;
border:1px solid #AAA;
margin-bottom:15px;
}
#toolbar ul {
overflow:auto;
list-style:none;
margin:0;
padding:0;
}
#toolbar li {
display:inline;
padding:5px;
background:#606c88;
color:#FFF;
font-size:24px;
border-radius:5px;
}
Set the display-attribute of the outer div #toolbar and the list #toolbar ul to inline-block:
#toolbar {
overflow:hidden;
padding:5px;
background:#FFF;
border-radius:5px;
border:1px solid #AAA;
margin-bottom:15px;
display:inline-block;
}
#toolbar ul {
overflow:auto;
list-style:none;
margin:0;
padding:0;
display:inline-block;
}
I hope it helps...
EDIT: You said "tightly wrap". You have a padding in the toolbar-div. So if you really want to have it with no space towards the outer div, remove the line padding:5px.
#toolbar {
float: left;
}
This will "shrink wrap" the .toolbar around its contents. You'll need another element after it to clear: both; so that you don't get elements to align to the right of the .toolbar if you don't want that.