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/
Related
I have an unordered list, listaAuto, which is filled with <li> items, which contain an img for each.
The problem is that if I use the <li> property display: inline;, they won't expand to contain the images. Instead, if I display them horizontally, they are no mistakes.
I already tried using overflow: auto, height: auto, clear: both: and other solutions, but I still can't find the way.
HTML:
<body>
<div>
<ul id="listaAuto">
<li><img src="example.png" width="121.33" height="75.92"/></li>
<li><img src="example.png" width="121.33" height="75.92"/></li>
</ul>
</div>
</body>
CSS:
#listaAuto, li{
list-style: none;
padding: 5px;
}
li{
clear: both;
display: inline;
border: 1px solid black;
}
Current output:
Use inline-block for the li items:
https://jsfiddle.net/y86263mq/
Based on another Stackoverflow answer:
Inline elements:
respect left & right margins and padding, but not top & bottom
cannot have a width and height set
allow other elements to sit to their left and right.
see very important side notes on this [here][1].
Block elements:
respect all of those
force a line break after the block element
Inline-block elements:
allow other elements to sit to their left and right
respect top & bottom margins and padding
respect height and width
Simple explaination
inline-block elements can have the heights defined. In this case, you're not explicitly setting the heights but the contents are.
Add display:inline-block for li and remove the unnecessary clear:both.
Refer this fiddle https://jsfiddle.net/wsmzhn1h/
Adding float: left; and removing clear:both; on the li should do the trick. https://jsfiddle.net/y8sxhv1z/2/
You may try this.
li{
display: inline-block;
}
li img{
max-width: 100%;
}
#listaAuto, li{
list-style: none;
padding: 5px;
}
li{
width: auto;
float: left;
display: block;
border: 1px solid black;
}
<body>
<div>
<ul id="listaAuto">
<li><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="121.33" height="75.92"/></li>
<li><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="121.33" height="75.92"/></li>
</ul>
</div>
</body>
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'm trying to make a navigation bar at the top of my site. But the items wont align horizontally properly. I used display: inline. That should make things align side by side right? Well... Once I set display to inline, the width of the item seems to be set to 100%, so the items are not allowed to go side by side. When I set the display to inline-block, the height seems to triple, but is the items are set side by side. Though, I don't want it to be higher than it is because then the appearance isn't what I want.
How can I make the items align properly!? Please help and thank you if you do.
html code
<div id="Bars">
<ul>
<li><p style="width: 50px">Home</p></li>
<li><p style="width: 73px">Software</p></li>
<li><p style="width: 62px">Gallery</p></li>
</ul>
</div>
css code
#Bars{
height: 30px;
width: 100%;
background-color: #000099;
border-radius: 10px;
}
#Bars ul li p{
color: black;
font-size: 20px;
}
#Bars ul li{
list-style: none;
display: inline;
}
Add below css to your style sheet and set inline-block to li, in your case predefined margin and padding are applying
* {
margin:0;
padding:0;
}
#Bars ul li{
list-style: none;
display: inline-block;
}
Use Fiddle
HTML:
<div id="nav">
<ul>
<li class="current_page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
</ul>
</div>
CSS:
#nav ul {
list-style: none;
height:16px;
background: #ccc
}
#nav ul li {
position: relative;
display: inline-block;
}
#nav {
position: relative;
text-align: center;
}
use can use display: inline-block; and need to adjust the margin.
js fiddle link :
`https://jsfiddle.net/2pr2pq78/`
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;
}
I want to make a nav bar using images but still have text under each image, yet I also want the text to be centered.
I have the following HTML
<div class="whatwedo-wrapper" id="whatwedo">
<div class="whatwedo">
<ul>
<li>
<img class="services" src="images/Brand-Online-Circle-Blue.png" width="200px"
onmouseover="this.src='images/Brand-Online-Circle-Grey.png'"
onmouseout="this.src='images/Brand-Online-Circle-Blue.png'">
<br>
Brand Online
</li>
<li>
<img class="services" src="images/Brand-Marketing-Circle-Blue.png" width="200px"
onmouseover="this.src='images/Brand-Marketing-Circle-Grey.png'"
onmouseout="this.src='images/Brand-Marketing-Circle-Blue.png'">
<br>
Brand Management
</li>
</ul>
</div>
</div>
and I have made what I have a jsfiddle here - http://jsfiddle.net/B7sdp/
The overall outcome I am looking for is for the images to be centered and the text to be underneath its image, also centred.
Thanks in advance!
You should add text-align:center property to your li and replace float:left with display:inline-block
.whatwedo li {
width: 200px;
display:inline-block;
list-style: none;
text-align:center;
}
See example here : http://jsfiddle.net/B7sdp/1/
You need to add text-align: center; to .whatwedo li
.whatwedo li {
width: 200px;
margin: 0 auto;
float: left;
text-align: center;
list-style: none;
}
JSFiddle