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>
Related
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>
I'm trying to right-align the nav without using float. I read somewhere online that I could set the parent element to text-align: right, but that didn't work when I tried it. I appreciate any help for what I know is an easy problem but one that has confounded me most of the day.
header {
background-color: #AEB7CC;
padding: 0 10px;
}
nav {
display: inline-block;
}
nav li {
display: inline;
}
<header>
hi
<nav>
<ul>
<li>Home
</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</header>
https://jsfiddle.net/a6a367vp/
The solution is that you have to add text-align: right; to the parent element which is the header.
header {
text-align: right;
...
}
Then add display: inline-block; to the children (nav) and the children will be aligned right.
Another solution would be to set a width to nav and a:
header nav {
with: 80%;
}
header a {
width: 20%;
}
header nav ul {
text-align: right;
}
header nav ul li {
display: inline-block;
}
if you want the nav to move to the right, simple method is float:right but since you don't want to use this then text-align:right would place it on right if nav has 100% width for that row.
Therefore, you can do either of these two things.
right now using CSS you can make
nav{width:98%; text-align:right};
or for better results, use JS
var anchorTopWidth = $("a").width() / $('a').parent().width() * 100;
requiredWidth = 100-anchorTopWidth;
$('nav').css({'width': requiredWidth+'%', 'text-align':'right'});
Fiddle: https://jsfiddle.net/a6a367vp/3/
One possible and recommended solution is as follows:
Put the <nav> in a <div> element and then use the text-align property for the specified div. like this:
Html:
<div class="nav_menu">
<nav>
<ul>
<li>Home</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</div>
CSS:
.nav_menu{
text-align: right;
}
Update:
Put the <a> tag in another div and then specify the width for the selected divs. Your final code should be like this:
HTML:
<header>
<div class="atag_div">
hi
</div>
<div class="nav_menu">
<nav>
<ul>
<li>Home</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background-color: #AEB7CC;
padding: 0 10px;
}
nav li {
display: inline;
}
.atag_div{
width: 20%;
display: inline-block;
}
.nav_menu{
width: 78%;
display: inline-block;
text-align: right;
}
jsfiddle:
https://jsfiddle.net/pokies/7Lnfq7es/
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/`
This is my code: http://jsfiddle.net/2h6p3vvd/
I'm trying to align my list to the right of the logo, however it seems to sit on the line below, but still to the right.
HTML
<header>
<nav class="container">
<img src="#">
<ul>
<li>Add</li>
</ul>
</nav>
</header>
CSS
header {
padding-top: 65px;
padding-bottom: 65px;
}
.container {
width: 960px;
margin: 0 auto;
}
header nav {
height: 50px;
line-height: 50px;
}
header ul {
float: right;
}
ol, ul {
list-style: none;
}
Is this an issue with the float, and should I be using some sort of overflow rule to correct it?
The problem is that your li has inherited the line-height from nav parent... Reset it, and it will be inline:
Updated Fiddle
header ul li {
line-height: 0px;
}
EDIT
Also, keep in mind that float makes an element float over the element that comes after it. So, your ul must be put before the logo, so that it can float accordingly.
The ul is applying a top margin, which pushes the list down.
To avoid this, add the following to your header ul style:
margin: 0 auto;
Write your html structure following way
<header>
<nav class="container">
<div class="logo">
<img src="" alt="" />
</div>
<div class="menu">
<ul>
<li>Add</li>
</ul>
</div>
</nav>
</header>
and write css like
.container {
width: 960px;
margin: 0 auto;
}
.logo{width: 300px;float:left;}
.menu{float:left;}
Change line height to zero and add float left http://jsfiddle.net/2h6p3vvd/4/
try this
header {
padding-top: 65px;
padding-bottom: 65px;
}
.container {
width: 960px;
margin: 0 auto;
}
.container img{
position:absolute;
}
header nav {
height: 50px;
line-height: 0px;
}
header ul {
margin-left:0px;
float:left;
}
ol, ul {
list-style: none;
}
Better put them in table columns with border="0px" and width=100% with one extra column in the middle
eg:
<header>
<nav class="container">
<table width=100% border=0px>
<tr>
<td><img src="#"></td>
<td width=100%><!--This column is only needed only when you want to push image and list to extreme left and right respectively--></td>
<td><ul>
<li>Add</li>
</ul></td>
</tr>
</table>
</nav>
</header>
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/