I've been working on a design with three links spanning the width of the device on mobile. I can't figure out why I can't get the spacing right. What looks off?
Here's the design :
And here's what the coded version is looking like :
Here's my CSS :
.b-nav-Wrapper {
width: 100%;
}
.b-nav {margin: 0 auto;}
.b-nav ul {
list-style: none;
}
.b-nav ul li{
display: inline-block;
width: 33.33%;
}
.b-nav ul li a{
text-decoration: none;
color: rgb(151,151,151);
}
.navNumber {
float: left;
width: 20%;
font-family: "korolev-condensed",sans-serif;
font-size: 2.5875em;
opacity: .50;
}
.navLink {
float: right;
width: 65%;
padding-top: 4px;
font-family: "mrs-eaves-xl-serif",sans-serif;
font-size: 1.2em;
line-height: 1em;
font-style: italic;
font-weight: 500;
}
*edit: here's my HTML :
<nav class="b-nav-Wrapper cf">
<div class="b-nav">
<ul>
<li class="active">
<a href="#">
<p class="navNumber active">01</p>
<p class="navLink active">Now Reading</p>
</a>
</li>
<li>
<a href="#">
<p class="navNumber">02</p>
<p class="navLink">Browse My Books</p>
</a>
</li>
<li>
<a href="#">
<p class="navNumber">03</p>
<p class="navLink">Notes & Quotes</p>
</a>
</li>
</ul>
</div>
</nav>
You didn't put your html, that makes us guessing about it. But if .b-nav ul li is referred to numbered parts, you should try width less than 33.33%. Because just 1px margin or padding of other elements cause it to break into two lines. If it doesn't solve, put your link or html.
Related
I have a simple ul/li with images/text inside it. In Safari the images are getting vertically stretched:
HTML Code:
<ul class="dropdown-menu">
<li>
<a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint</a></li>
<li>
<a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint</a></li>
<li>
<a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint</a></li>
</ul>
CSS:
.dropdown-menu > li > a {
border-top: 0 solid #efefef;
color: inherit;
display: flex;
padding: 10px 30px 12px;
clear: both;
font-weight: normal;
line-height: 25px;
white-space: nowrap;
}
ul.dropdown-menu li a img {
width: 25px;
margin-right: 15px;
}
Safari:
Chrome:
Live fiddle URL to test:
https://jsfiddle.net/raghav_khunger/ko0wybhx/8/
I can add hardcoded height 25px to the image to overcome this issue:
ul.dropdown-menu li a img
One more solution could be having align-items: center; rule to .dropdown-menu > li > a (https://jsfiddle.net/raghav_khunger/ko0wybhx/10/)
Is there any other solution to it?
Are the above solutions valid for making the images do not stretch?
Can you share the reason why the images are getting stretched in the Safari whereas it is working fine in Chrome?
can you try with this code, hope it will work for you.
.dropdown-menu > li > a {
border-top: 0 solid #efefef;
color: inherit;
display: flex;
padding: 10px 30px 12px;
clear: both;
font-weight: normal;
line-height: 25px;
white-space: nowrap;
}
ul.dropdown-menu li a img {
width: 25px;
margin-right: 15px;
}
<ul class="dropdown-menu">
<li>
<a>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint
</div>
</a></li>
<li>
<a>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint
</div>
</a></li>
<li>
<a>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint
</div>
</a></li>
</ul>
After adding link_to block, I now see a black line when I hover over the box -- see attached pic. Tried changing many CSS properties but couldn't resolve the issue. My view and CSS code are below. Any ideas how to remove this black line?
**View Code**
<div class="categories">
<ul>
<%= link_to nqdc_user_path do %>
<li>Sample Box</li>
<% end %>
</ul>
</div>
**CSS Code**
div.categories {
margin-top: 25px;
margin-left: 50px;
}
ul {
padding: 10px;
color: white;
list-style: none;
text-align: center;
}
li {
background-color: #4d4dff;
padding: 25px;
margin: 15px;
display: inline-block;
border-radius: 8px;
font-size: 18px;
color: white;
}
li:hover {
background: #b3b3ff;
color: black;
text-decoration: none;
}
Source Code
<div class= "categories">
<ul>
<a href="/users/1/nqdc">
<li>Sample Box</li>
</a>
</ul>
</div>
Link a element should go inside li element
<li>
<a href="">
Sample Box
</a>
</li>
codepem
I'm building a menu with two sections and a logo between.
And i would like to know how can I prevent the logo from moving whenIi change the text from both sections. I would like to fix the logo, when i change the about us for exemple, i would like to see the about us editing and moving to the left side, not to the right side.
Sorry for my english:
Jsfiddle:
http://jsfiddle.net/uL52rvwn/
HTML:
<div class="menu">
<div class="m-info">
<ul>
<li class="l-aboutus"><a>About us</a></li>
</ul>
</div>
<div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div>
<div class="m-contact">
<ul>
<li class="l-ourcontacts"><a>Contacts</a></li>
</ul>
</div>
</div>
What I did? I made the m-info float:left, and m-contact float:right, than made the #logo's margins negative to move it to the center.
Fiddle: http://jsfiddle.net/uL52rvwn/3/
<style>
.m-info {
width: 50%;
float: left;
text-align: right;
margin-left: -40px;
padding-right: 40px;
}
.m-contact {
width: 50%;
float: right;
text-align: left;
padding-left: 40px;
margin-right: -40px;
}
#logo {
float: left;
margin-left: -40px;
margin-right: -40px;
}
.menu ul {
padding: 0;
}
.menu li {
display: inline;
padding: 10px;
color: #eaeaea;
text-transform: uppercase;
z-index: 11;
position: relative;
}
.m-info ul li a, .m-contact ul li a {
text-transform: uppercase;
color: #a1a1a1;
letter-spacing: 7px;
font-size: 12px;
}
.m-info ul li a:hover, .m-contact ul li a:hover{
cursor:pointer;
color:#c8c8c8;
}
.m-contact ul{
margin-right:20px;
}
</style>
<div class="menu">
<div class="m-info">
<ul>
<li class="l-aboutus"><a>About us</a></li>
</ul>
</div>
<div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div>
<div class="m-contact">
<ul>
<li class="l-ourcontacts"><a>Contacts</a></li>
</ul>
</div>
</div>
Absolute positioning should work: http://jsfiddle.net/6L35a0up/7/
I changed the following CSS rule:
#logo img {
left:50%;
z-index: 12;
position: absolute;
}
And moved the logo div to outside of the .menu wrapper.
How to get the menu bar right below the Dial food caption and remove the underline shown in the below code:
<body>
<div id="header">
<h1 style="color: #CC6600; height: 100px; width: auto;">
Dial food</h1>
</div>
<div id="Menu" style="background-color: #330000; font-size: 20px; height: 25px; width:auto;
word-spacing: 24px; position:absolute">
About
Restaurants
Contact
Support
</div>
</body>
can you please help me in getting this alignment and link text only get aligned?
Change the <h1> height to 15px to bring the menu bar up. (or a value to your liking)
<h1 style="color: #CC6600; height: 15px; width: auto;">
And use the following CSS to remove the underline.
#Menu a {
text-decoration:none;
}
http://jsfiddle.net/6bxVr/
HTML
Dial food
<ul>
<li> About </li>
<li>Restaurants </li>
<li>Contact </li>
<li>Support </li>
</ul>
CSS
.header
{
color: #CC6600;
height:20px;
width: auto;
margin:10px;
}
ul
{
list-style:none;
}
ul li
{
float:left;
padding:10px;
background-color: #330000;
word-spacing: 24px;
font-size: 20px;
height: 25px;
width:auto;
}
li a
{
text-decoration:none;
}
Fiddle Demo Here
Update fiddle of Yours
Hope this helps
happy coding..!!
It would appear that I am suffering from a new bug in IE7, as I can't seem to find any reference to it anywhere else. It is best explained using screenshots, so here are a couple of links (and as a note, it's not a requirement for it to work in IE6, so I don't even want to know what it looks like under that!):
How it should be displayed (using Safari 4):
http://dl-client.getdropbox.com/u/45961/safari4.png
How IE7 is displaying it:
http://dl-client.getdropbox.com/u/45961/ie7.png
Here's the CSS for that menu chunk:
#mm #leftNav .navigation {
width: 100%;
margin-bottom: 0;
float: left;
}
#mm #leftNav li {
list-style: none;
display: inline;
margin: 0;
}
#mm #leftNav .navigation li ul {
display: none;
}
#mm #leftNav .navigation li a {
text-decoration: none;
color: #ffffff;
font-size: 11pt;
padding-left: 20px;
}
#mm #leftNav .navigation li {
cursor: pointer;
margin-right: 4px;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 8px;
overflow: visible;
}
.menu_item {
background: #419185;
}
.menu_item:hover {
background: #48a093;
}
.currentcat {
background-color: #4aa8a6;
}
.currentcat:hover {
background: #4aa8a6;
}
And here is the HTML:
<div id="mm">
<div id="leftNav">
<ul class="navigation">
<li class="menu_item">
<a class="icon icon-base">Base</a>
</li>
<li class="menu_item">
<a class="icon icon-devices">Devices</a>
</li>
<li class="menu_item">
<a class="icon icon-management">Management</a>
</li>
<li class="menu_item">
<a class="icon icon-iptools">IP Tools</a>
</li>
<li class="menu_item">
<a class="icon icon-config">Configuration</a>
</li>
<li class="menu_item">
<a class="icon icon-admin">Administration</a>
</li>
</ul>
<div id="subnav"></div>
</div>
</div>
Any ideas?
top and bottom padding are not supported on inline elements (some browsers will render it, others won't)
Here's a good article on the problem:
http://www.maxdesign.com.au/presentation/inline/
If you really need correct padding, you should change the menu items to "display:block" and "float:left"
Hehe, activa beat me to it.
Indeed, move your margin/padding to the A element, kinda like so:
mm #leftNav .navigation li a {
text-decoration: none;
color: #ffffff;
font-size: 11pt;
display:block;
float:left;
background: #419185;
margin-right: 4px;
padding-left: 20px;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 8px;
}
mm #leftNav .navigation li {
cursor: pointer;
}
.menu_item {
}