I am running into an issue centering my ul element within my div. I used the margin: 0 auto technique, but it isn't working in this scenario. In addition, I always had a question related to whether setting the width to a ul element within a div was necessary to use the margin: 0 auto is there a way around this?
html:
<div class="col-3-12">
<div class="sidebar-personal-information">
<div id="sidebar-social-media">
<ul id="sidebar-social-media-list">
<li><img class="sidebar-social-media-icons" src="images/linkedin.png"></li>
<li><img class="sidebar-social-media-icons" src="images/twitter.png"></li>
</ul>
</div>
</div>
</div>
css:
.sidebar-personal-information {
background-color: #00a8df;
}
#sidebar-social-media {
margin: 0 auto;
padding: 10px;
vertical-align: center;
}
ul#sidebar-social-media-list{
width: 100%;
margin: 0 auto;
}
#sidebar-social-media ul li {
display: inline;
}
Take a look at this Fiddle
By adding text-align: centerto #sidebar-social-media in your CSS the problem should be solved.
Credits go to Vitorino Fernandes, I would like to comment but I don't have enough reputation.
Related
I am currently working with a webshop, and I have some trouble centering the top menu.
The code look like this:
<div id="webshop-topmenu" class="row logoRow ProductMenu_TD">
<div align="center">
<div class="small-12 columns menus">
<nav class="top-bar productmenu" data-topbar role="navigation">
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">[[ProductMenu]]</section>
</nav>
<div class="sub-nav pagelinks TopMenu_TD hide-for-small">[[TopMenu]]</div>
</div>
</div>
</div>
No matter what code I use, the menu always aligns to the right, and I want to center it.
I have tried the <div align"center"> and <center> and a couple of other codes, but nothing seems to work.
Hope you can help me here.
What it looks like
<center> and "align"
are deprecated.
After getting a link to the page:
If you want to center the ul#ProductMenu_List, change your CSS:
.top-bar-section #ProductMenu_List {
margin: 0 auto;
//float: right;
//margin-right: -10px;
}
.top-bar-section ul li {
//float: left;
display: inline-block;
}
If you want to center your div.TopMenu_TD, do following in CSS:
.logoRow .menus .pagelinks {
//float: right;
}
If you want to center elements, "float" is in most case the opposite of helpful. Text-align: center, display: inline-block and/or margin: 0 auto are in most case the solution.
And take your to google for Html5 and CSS3. You will need it.
Update
After seeing that you only have access to the templates - add following code to "Kodefelter" - Head:
<style>
.top-bar-section #ProductMenu_List {
margin: 0 auto;
float: none;
max-width: 400px;//or another value
display: block;
}
#ProductMenu_List > li {
float: none;
display: inline-block;
}
.logoRow .menus .pagelinks {
float: none;
display: block!important;
margin: 0 auto;
max-width: 500px;
}
</style>
I am having a problem on my portfolio site where the content is not wrapping properly. It looks fine in the three column view for widths greater than 480px, but when it's under that it switches to the two column layout / mobile view and it doesn't quite wrap properly anymore.
There's that huge space and I'm trying to figure out how to correct it. The homepage is the only problem. Any help would be appreciated!
HTML Skeleton:
<div id="wrapper">
<section>
<ul id="gallery">
<li></li>
</ul>
</section>
</wrapper>
Relevant CSS:
#wrapper {
overflow: auto;
margin: 0 auto 100px auto;
max-width: 940px;
padding: 0 5%;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f2f2f2;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.5em;
color: #3b4145;
}
Add #gallery li:nth-child(odd) {clear: left;} for the mobile version and undo it for the three column.
You should also make a relevant rule for the three column layout #gallery li:nth-child(3n+1) {clear: left;}.
It currently works by luck (due to the contents of the specific items, if you change their order it would fail)
That's due to the floating of elements that don't have he same height. Try to use flexbox instead of floats:
#gallery {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
Remove the floats and add some margin-bottom from/to your li rule to preserve some vertical distance
I would recommend you to add a clearfix after each two elements for small devices.
Here's an example of what it will look like.
#media screen and (max-width: 479px) {
.clearfix-sm:after {
display: table;
clear: both;
content: " ";
}
}
<div id="wrapper">
<section>
<ul id="gallery">
<li></li>
<li></li>
<div class="clearfix-sm"></div>
<li></li>
<li></li>
<div class="clearfix-sm"></div>
<li></li>
<li></li>
<div class="clearfix-sm"></div>
</ul>
</section>
</div>
For some reason my image is centered when the browser width is less than 1015px width-wise, but when I go over that it moves completely to the left, with no padding against the side of the page. I'm doing:
HTML
<div id="nav">
<div id="logo">
<img src="../img/logo.png" alt="logo" style="height:100px; width:100px;" />
</div>
<ul>
<li>How It Works</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
</div>
<img class="center" src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
CSS
#nav {
margin-bottom: 100px;
}
#nav ul li {
display: inline-block;
}
#nav ul {
position: relative;
float: right;
right: 60px;
bottom: 30px;
}
#nav li {
padding-right: 20px;
font-size: 20px;
color: white;
}
.canvas-wrap {
min-height: 100%;
margin-bottom: -30px;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
Edit
The problem is somewhere in the markup/styling of my navigation bar. When I remove the markup for the navigation bar, it centers correctly. I've edited the question to include the HTML and CSS for the nav bar. I don't see what's wrong with it.
I don't see an issue when viewing in Firefox. Your markup and CSS however are very simplistic. I assume this is only because you don't want to post your entire solution here.
What you may want to consider is adding a clearfix just before the closing #nav in the markup. As in the following:
<div id="nav">
<div id="logo">
<img src="img/logo.png" alt="logo" style="height:100px; width:100px;" />
</div>
<ul>
<li>How It Works</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
<div class="clear"></div>
The CSS for the clear needs the absolute basics, although you can make your clearfix as complex as you wish:
.clear { clear: both; }
You can also add overflow as an option to your #nav, but this is definitely not advised for a container holding a navigation because it will hide items like subnavs. But to add the overflow: hidden, you do the following:
#nav {
margin-bottom: 100px;
overflow: hidden;
}
What I would do with your .center image is remove the inline styling, and then do the following with the CSS declaration/and HTML markup:
<img class="center" src="img/laptop.png" alt="laptop-pic" style="" />
img.center {
display: block;
margin: 0 auto;
width: 100%; /* For responsive */
max-width: 500px; /* For responsive */
height: auto; /* For responsive */
}
Your inline-block for #nav ul li will not work because you've applied float: right to #nav ul. You also have right: 60px within the same ul declaration. If your intent is inline-block for the li elements, you need to remove the aforementioned.
The final thing I'll mention in my response is your use of display: inline-block; Make sure that you remove whitespace from this. There are several methods upon how to do this - none of which are pretty. You can't really remove the whitespace with CSS, so the best approach is to fix it in the markup. Below are 2 solutions of many:
Solution 1 for inline-block:
<ul>
<li>How It Works</li
><li>Portfolio</li
><li>Team</li
><li>Contact</li
><li>Jobs</li>
</ul>
Solution 2 for inline-block:
<ul>
<li>How It Works</li><!--
--><li>Portfolio</li><!--
--><li>Team</li><!--
--><li>Contact</li><!--
--><li>Jobs</li>
</ul>
I don't know which browser you're using. When I run your code on Chrome everything works fine, but IE is no good.
I'm thinking this is related to a known problem about IE not rendering display: block and display: inline-block correctly.
I did a different approach to get it done. Just wrapped the image with a div and centered the contents. Its not the more elegant answer though.
See below:
HTML
<div class="divCenter">
<img src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
</div>
CSS
.divCenter {
width:100%;
text-align:center;
}
not sure why, but I can't get the icons centered on the page without using padding-left:130px;
Which isn't ideal of course because the icons don't center properly when you re-size the browser window. Maybe I need more coffee, but I could use some stacker help this morning!
http://towerdive.net/
HTML
<div id="center2">
<div id="social_icons">
<p>
Thanks for your interest in our blog!
You can also find us here, as well as subscribe to our newsletter:
</p>
<ul>
<li id="facebook">
<img src="img/icon_facebook.png" alt="Facebook"/>
</li>
<li id="twitter">
<img src="img/icon_twitter.png" alt="Twitter"/>
</li>
<li id="newsletter">
<img src="img/icon_newsletter.png" alt="Newsletter"/>
</li>
</ul>
</div>
</div>
CSS
#center2 {
width: 100%;
}
#social_icons {
margin: 0 auto;
width: 400px;
height: 250px;
text-align: center;
}
#social_icons p {
color: #e3cda4;
}
#social_icons ul {
margin: 0 auto;
list-style: none;
text-align: center;
}
#social_icons ul li {
float: left;
padding-right: 10px;
}
Let me know if you guys need the full HTML or CSS!
You can use display:inline-block for this. Write Like this:
#social_icons ul li {
display: inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
padding-right: 10px;
}
You currently use floats to display your navigational list horizontally. You can't align the list-items in the middle of the unordered lists because of the floats.
Another technique is instead of float: left; using display: inline-block;. The list-items will be displayed horizontally but also all extra white-space will taken into account. You'll get extra margins between the items (like 4px). Now you can use text-align: center; on the UL to center the list-items.
There are several (easy) workouts described in this article by Chris Coyier:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
<div class="pull_down">
<ul class="zvuc">
<li class="prod">
<div class="conutine">
<div class="prod_name">Asus 15.6-Inch Versati...</div>
<img src="../images/test/lotr.jpg">
<div class="timer"></div>
</div>
</li>
</ul>
</div>
CSS:
div.pull_down
{
padding: 20px 20px 20px 30px;
}
li.prod
{
background: url("../images/test/bg-horizontal.png") no-repeat;
height: 286px;
width: 170px;
text-align: center;
padding-top: 0;
display: list-item;
width: 170px;
min-height: 286px;
float: left;
}
ul
{
list-style: none outside none;
margin: 0;
padding: 0;
text-align: left;
}
When i mouse over the division with firebug, it doesn't contain anything. Why is this?
Your are floating your LI's so you most likely need a "clearfix" on the parent DIV.
A "clearfix" will force an element to self-clear it's children.
http://css-tricks.com/snippets/css/clear-fix/
Demo: http://jsfiddle.net/wdm954/Dxkpx/
You can just add the .group classes to your CSS file and add class="group" to any parent that you need to clearfix.
This is a semantic and scale-able solution. You should avoid adding empty DIVs to your markup or extra CSS to parents (such as floats). That can produce undesirable results and become confusing in the long run.
Hi you need to add <div style="clear:both"></div> after the </ul> to close the float
or to add float: left; to the class .div.pull_down