I have this menu bar, which is replaced by Images.
All looks good on normal view, but when I swtich to mobile view
It looks so clumsy. I tried Padding, But the individual cell do not
make up space with each other.
Here is the screenshot
li.topmenu1 {
height: 20px;
}
<nav id="category" class="drawer_block pc">
<ul class="category-nav">
<li class="topmenu1">
<img src="http://azlily.bex.jp/eccube_1/html/template/default/img/menu/home.png">
</li>
<li class="topmenu2">
<img src="/eccube_1/html/template/default/img/menu/products.png">
</li>
<li class="topmenu3">
<img src="/eccube_1/html/template/default/img/menu/about.png">
</li>
<li class="topmenu4">
<img src="/eccube_1/html/template/default/img/menu/howtouse.png">
</li>
<li class="topmenu5">
<img src="/eccube_1/html/template/default/img/menu/column.png">
</li>
<li class="topmenu8">
<img src="/eccube_1/html/template/default/img/menu/FAQ.png">
</li>
</ul>
</nav>
Note - I also tried to include FULL URL of the image
but somehow its not showing up on snippets :/
check this https://jsfiddle.net/1dvy2854/4/
.category-nav li {
display: inline-block;
}
#media only screen and (max-width: 600px) {
.category-nav li {
display: block;
}
.category-nav li img {
max-width: 65px;
display: inline-block;
}}
Make sure that the elements inside category-nav have correct margins and paddings.
If you want to make sure that the individual pictures for the menu look okay, you might want to set styles for the images one by one.
So, in your case you can edit the heights for all of your topmenu1, topmenu2...
Also, you can the inspect tool on Chrome to find what is causing problems like this in your CSS code. You can change the code live and see what change is causing what.
can any body explain me the out put, which my code is genrating, as it
driving me nuts, there is no syntax error, i am following the tutorial
on you tube and i was able to genrate the right out put with this
code, but today i decided that i will understood this code fully, and
it driving me crazy
**Note: No syntax error, just looking for explanation about the out put, and please read the comment in the code
First look at the code html**
<html>
<head>
<title>TODO supply a title</title>
<link rel="stylesheet" href="menu.css"></link>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" >
<ul id="menu">
<li >Home</li>
//This section is giving me trouble, please see below i explain my problem in detail there
<li >about
<ul class="hidden">
<li >who are we</li>
<li >what we do</li>
</ul>
</li>
//This section is giving me trouble, please see below i explain my problem in detail there.
<li >portfolio
<ul class="hidden">
<li >photography</li>
<li >web & interface design</li>
<li >illustration</li>
</ul>
</li>
<li >news</li>
<li >contacts</li>
</ul>
</body>
</html>
and this is my css
/*strip styling from the list*/
ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute;
}
li{
display:inline-block;
float:left;
margin-right:1px;
}
//only this section of the code is driving me crazy, and in the explanation i type this section again and again. Please see below in there i explain my problem in detail.
li a {
display:block;
}
Problem if you look at the out put in this link
https://codepen.io/arif_suhail_123/pen/pwdYXp
i am confused about this-- look at the about section, i was expecting who we are and what we do, to appear as block element, as i gave li a {display:block} but they dont, they are appearing as inline block element or inline element, i am not sure,
but i get more confused when i see the next portion portfolio, as in there, all the li are appearing as block element, means photography, web & interface design and illustration appear on the next line, which i was accepting, after giving this style li a {display:block}
and after that i completly lost my mind when i added min-width property,
see the link https://codepen.io/arif_suhail_123/pen/ZyaZEj i changed nothing, i only added in li a {} min-width, so my style is this li a {display:block; min-width:140px;}
i still have the problem, what we do appear under the portfolio, this problem i desribed already(in the last paragraph), but after adding min-width:140px; i have new problem; if you look at the out put, web & interface design appear under the news, first of all i did not expected it to appear there, and second of all if you read the html code web & interface design is second li means why it appearing in this order first li -- photography, than third li -- illustration and second li -- web & design, under the news??
Can any body please explain me,
and last of all, what i understand about the absolute positioning is this, that it take the element out of normal flow, and put it back at the given position, i ran one example, and it confirm what i think may be i am wrong but have look https://codepen.io/arif_suhail_123/pen/LLOaXv
on this link third box did not appear, as i was expecting it, not to appear,
and about the block element, i understand that they suppose to appear on the new line.
see these two picture i think my question will become more clear.
Absolute Positioning - Take the Width of Parent
Ok so I looked through your code and I made a small example out of it. I took out some things to make the example more clear (and because of width limitations in these posts).
Ok, first, look at the background colors I put on both of the <ul> lists. Your sub-lists are in red. Your main <ul> is in yellow.
Now you are correct in saying that position: absolute; takes the element out of the "flow" of other elements in order to display them as usual. Absolute positioning takes a lot of special attention.
Run the code and look at the words "Who are we". Now this makes you think, why does "photograpy" appear next to it? What happened to "what we do"? Its behind it. The reason this occurs is because both of those lists are positioned absolutely under their parent element. Without giving anything like top or left they are just going to overlap eachother and the latter ends up displaying ontop of the previous list. Absolutely positioned elements don't care what is next to them or if they overlap something. They go where ever you tell them to and thats typically what absolute positioning is for. You tell it to break away from normal flow, and you give it a specific location to appear.
Play around with the code, delete "photography" and "illustration" and run it again. You'll see that "what we do" was there all along, just behind it.
Also see Russell's Answer.
ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute;
background-color: yellow;
}
ul ul{
display: block;
padding: 5px;
background-color: red;
}
#secondList{
background-color: pink;
}
ul li{
float:left;
margin: 5px;
width: 120px;
}
ul ul li a{
display: block;
}
<ul id="menu">
<li>Home</li>
<li>about
<ul class="hidden">
<li>who are we</li>
<li>what we do</li>
</ul>
</li>
<li >portfolio
<ul class="hidden" id="secondList">
<li>photography</li>
<li>illustration</li>
</ul>
</li>
<li>news</li>
</ul>
i am confused about this-- look at the about section, i was expecting who we are and what we do, to appear as block element, as i gave li a {display:block} but they dont, they are appearing as inline block element or inline element, i am not sure,
They do appear as block elements. I think the 'problem' is that you have li declared as inline-block elements. So you have block elements in a container set to inline block which effectively makes them display as inline-block.
but i get more confused when i see the next portion portfolio, as in there, all the li are appearing as block element, means photography, web & interface design and illustration appear on the next line, which i was accepting, after giving this style
This is being displayed the same, but the pen you entered has some kind of arbitrary width assigned to it. I'm not sure if it's because of the viewport settings or not, but try shortening some of the link names and you'll see it's actually displaying them the same as the other list. IE inline-block just like was specified.
Can any body please explain me, and last of all, what i understand about the absolute positioning is this, that it take the element out of normal flow, and put it back at the given position
Absolute positioning takes the element out of normal flow and positions it relative to it first positioned parent. The browser does not set aside space for the element either.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
I'm not 100% sure if I understood the problem but I'll give it a shot:
position: absolute;
makes the element ignore every single element. That is what makes them on top of each others. It just displays whereever you tell it to display. Wich is in the top left corner by default. And that's also why there is an
z-index: ...;
the z-index indicates wich layer the element is displayed on, for example z-index: -10; makes it on layer -10 and an element with z-index -9 would display on top I think(pretty sure, otherwise its the opposite) there are infinite layers btw
Hope this is what you were looking for
I always wondered how to get rid of the dotted border that covers active links right afer clicked.
I tried a:active { border:0;outline: none; } and it didn't work. I don't think that is a border, that's something chrome adds, also firefox and ie add it their own shape.
Any help would be truly appreciated.
my code :
<ul class="footer-links">
<li id="main" class="icon-bookmark">help</li>
<li class="icon-pencil">new topic</li>
<li class="icon-chat">contact</li>
<li class="icon-search">search</li>
<li class="icon-flag">report</li>
</ul>
My link if needed : http://dvforum.elegance-style.com
Screenshot:
Use the :focus class.
a:focus{ outline:none; }
You should however, consider adding alternative styles to this class, as purely disabling it will hinder usability.
I searched and wasn't able to find anything related to this. It's a very specific and strange difference between chrome and firefox. If anyone can find the place in the code that's causing it, I would be VERY grateful.
I can't post screenshots, but if you view the jsfiddle in both browsers you'll see what I'm referencing.
Here's my code
http://jsfiddle.net/JSDesign/aJagN/
And a small sample:
<li>
<a href="#">
<span class="ca-icon"><i class="icon-home"></i></span>
<div class="ca-content">
<h2 class="ca-text">Home</h2>
</div>
</a>
</li>
CSS is on the jsfiddle.
Also, I'm using Font Awesome if that matters.
http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css
Thanks a lot!
There was definitely a difference between Chrome/FF. This was occurring because browsers have different default properties. I reset the CSS in the example and then tweaked the CSS accordingly, changing the relative positioning and the margins.
Here is an updated example that works the same across browsers.
Updated/Modified properties:
.ca-menu li a {
margin-top:14px;
}
.ca-content {
position: relative;
top: 36%;
}
I am facing interoperability issues in IE7 and Firefox. li elements height is somewhat more in IE than Firefox.
Here is the attached image for more clarity.
http://img225.imageshack.us/i/interop.jpg/
Code for html and CSS:
<ul class="sa-progress">
<li class="sa-progress-current"><span id="intro_idx" >Select VPN Type</span></li>
<li class="sa-progress-default"><span id="local_idx" >Local</span></li>
<li class="sa-progress-default"><span id="remote_idx" >Remote</span></li>
<li class="sa-progress-default"><span id="vpn_idx" >VPN</span></li>
<li class="sa-progress-default"><span id="remote_dyn_idx" >Remote Users</span></li>
<li class="sa-progress-default"><span id="traffic_idx" >Traffic Profile</span></li>
<li class="sa-progress-default"><span id="review_idx" >Review & Commit</span></li>
</ul>
ul.sa-progress {
color: #333333;
line-height: normal;
padding: 7px 0 10px 10px;
}
ul.sa-progress {
font-size: 12px;
}
Please let me know what am missing here.
Any help would be greatly appreciated.
Thanks
ul/li is one of the more common cross browser differences that crop up as they both have different interpretations of their default rules.
You should look into using a css reset sheet to start off with such as:
http://developer.yahoo.com/yui/3/cssreset/
This will apply consistent base rules to your formatting so that all browsers have a fair chance at matching.
Because you didn't start out with this reset stylesheet and then build your design on top of it you might find that applying it will make several other elements go a bit different when they react to the new defaults. I would say its better to fix these so they look right with the reset sheet and then you will have a consistent baseline to work from.
After that you still might have problems but from the css you have posted I think there are some more parts to it such as the double line spacing you have in some menu items.
If you are going to make these into menu items then a common way that I approach this kind of styling is to make the a tags display: block; and then work my spacings out from that. Try to keep your ul li stylings as lightweight as possible and work with other items you have (such as the container div for the menu and the anchor tags for the links).