I have several block a elements that I want to be side-by-side to create a menu. The width of each is set to auto to accommodate the text inside. Each a element is displayed as a table cell and can work with either absolute or relative positioning.
Thanks for any help.
Mike
If you float block elements, they'll be placed in a horizontal row (with dynamic widths unless you specify a fixed one.)
ul#navigation li {
float: left;
}
Have a look at the HTML for the navigation on this page, for example (Questions, Tags, Users, ...)
display:inline-block
This is an almost similar scenario which you can consider using for creating a menu.
I would have gone with display:inline-block for generic side-by-side display but you're trying to do a horizontal nav. I wouldn't use the table cell display as it's quirky and you'll end up having to clean up other bugs.
Html:
#navigation{
width:550px;
margin:0;
padding:0;
list-style-type:none;
overflow:hidden;
}
#navigation li{
float:left;
}
#navigation li a,#navigation li a:hover{
display:block;
padding:4px 21px 4px 20px;
text-decoration:none;
}
<ul id="navigation">
<li >Some link</li>
<li >Some link 2</li>
<li >Some link three</li>
</ul>
Related
I would like to add a padding around a text placed inside a div
so that there is some place between the divs border and the text.
I have found an interesting post about that.
But somehow all the given examples expand my div so it does not fit in the entire layout anymore.
I have used that css code for the div:
.cell {
width:30%;
height:100%;
background-color:orange;
outline:10px solid black;
}
That code gives me the following result:
The orange colored area is the div I want to have the text positioned in.
All the solutions keep expanding the div with borders so the layout expands and that is what I am trying to avoid to.
So I have tried to add padding (that should be inside the div):
.cell {
width:30%;
height:100%;
background:orange;
padding: 10%;
}
Gave me the result:
Perhaps the problem is that I am using jQuery BigText to make the text fitting into the div:
jQuery:
$(function() {
$(window).on('resize', function() {
$(".area_competences_text").bigText();
});
$(window).trigger('resize');
});
Html:
<div class ="cell">
<div class="area_competences_text text_software">
<div class="referencesProductHeader">
HEADER TEXT
</div>
<ul class="listStyle">
<li>Some Text</li>
<li>Some Text</li>
<li>Some Text</li>
<li>Some Text</li>
<li>Some Text</li>
</ul>
</div>
</div>
You are probably looking for box-sizing:border-box, it makes the element include the padding in the width so it dosent expand on extra added padding.
Code:
.cell {
box-sizing:border-box;
width:30%;
height:100%;
background:orange;
padding: 10%;
}
Example
This is the expected behavior. You may want to learn about the CSS box model.
Basically, width and height are not the total width and height of the div. Padding, borders, and margin all need to be accounted for when calculating how big you want the div.
You can use box-sizing:border-box; to change this, or adjust the width and height values.
I have tried for months to find away of connecting my menu, but frustratingly I've had no luck. I don't know what else I can try so I want to ask you guys if you can help. I searched around here on Stack for an idea, this someway to describe the function I want but I'd like to utilise the data-attribute way instead of href and I want to use the on click function instead of the hover, as it's for desktop and mobile. I also want to close the submenu with the menu a on desktop version, would toggle be an option?
link: jquery dropdown with separate container
html
<div class="menu">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<div class="submenu">
<ul>
<li class="one">content1</li>
<li class="two">content2</li>
<li class="three">content3</li>
</ul>
</div>
content from submenu ul li is set to height:0 that I want to set to auto when triggered, or maybe add a class to the submenu ul li:
.submenu ul li{
display:block;
overflow:hidden;
height:0;
.submenu ul li.active{
height:auto;
}
JS Fiddle
I'm not sure if this is what you want, but try replacing
$(this).attr('data-section').slice(1)
with this
$(this).attr('data-section')
jsfiddle (based in yours)
Just remove the .slice(1). I don't know why you add this one.
when you click on the menu link, jquery will remove active class from list and it will added to a new link related to menu link by data-section.
I'am working on mobile version of an existing site and i can't resolve the issue with links in the menu.
The problem occurs only on stock android browser. On Chrome, firefox, safari and even IE the site works fine. All other links on the site are working fine. Here is the link to the site if you would like to test it --> www.antiqpalace.com.
code description:
original site had a "main menu" and "left menu" and i moved some elements from "left menu" to "main menu". Then I redesigned the main menu to specification and hide it with display:none. If you click on menu button JS changes display to block.
What I have tried:
changing parent div position to absolute. that did not work, there were major scrolling issues.
adding JQ .click events to a elements. the result was un-changed. everything still works on chrome... but links remain unclickable in stock android browser.
i add css --> a{background-color:blue} to see what happends on phone and links are positiond fine, just un-clickable.
I have googled that there was/is issue with links and -webkit-transform but i don't have that line in my CSS.
HTML:
<div> ---> whit a fix position and display none
<ul class="menu" style="height: 644px;">
<li class="first leaf menu-mlid-808">
<a href="/about-antiq-palace-hotel-ljubljana.html" >Antiq Palace Hotel
</a>
<img class="DD_right_arrow" src="[some src]">
</li>
<li class="expanded active-trail active menu-mlid-817">
<a href="javascript:show_sub_menu(2)" class="active-trail active">Rooms & Suites
</a>
<ul class="menu" style="height: auto; top: 70.84px;">
<li class="first leaf menu-mlid-823">
<a href="/double-bedroom-residential-suite-one-or-two.html" >Double Bedroom Residential Suite for One or Two
</a>
<img class="DD_right_arrow" src="[some src]">
</li>
.....
</ul>
<div onclick="show_sub_menu(2)" class="A_DD_submenu">
<img class="DD_right_arrow" src="[some src]">
</div>
</li>
.....
</ul>
CSS:
ul{
margin:0 1.5%;
padding:0;
border:none;
width:97%;
height:91%;/* js adds inline height of ful win height -51 px example(height:644px;)*/
display:block;
float:left;
overflow-y:scroll;
}
ul li,
ul li.first {
padding:0;
margin:0;
height:auto;
width:100%;
background:none;
background-color:rgba(196,154,69,1);
display:block;
float:left;
border-bottom:dotted 1px rgb(214,184,124);
position:relative;
z-index:10000;
}
ul li a{
width:70%;
display:block;
font-size:11.5px;
font-weight:bold;
padding: 23px 7%;
text-decoration:none !important;
float:left;
text-align: left;
color: white !important;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif !important;
letter-spacing:2px;
line-height: 16px;
z-index: 10000000000;
position: relative;
}
ul li ul{
width: 100%;
margin: 0;
overflow-y: hidden;
display:none;
}
ul li ul li{
background-color:rgb(126,118,104) !important;
z-index:1000;
margin-bottom: 0 !important;
}
I don't know if it's ok to respond to my own question but I have solved the issue and don't know where to post the solution.
Actual error:
Actual error was an issue with position fixed and links inside that . Andriod browser displays links but are un-clickable. Visuali everything looks ok just does not work.
Fix:
I changed the position of the element to static and added com css to rewrite old css.
Design issue:
This is not a optimal fix because the menu is inserted in the page and not on top of it. I'm not sure which browsers have issues with fixed positioning so I added code to CSS file. If you have a similar problem you can indentify the browser and add code only to that browser
Here is link to css an at the bottom I added the code that fixed this problem.
http://www.antiqpalace.com/sites/www.antiqpalace.com/themes/antiqpalace/css/antiq_mobile.css
I'm trying to make a menu that opens to the right side of the the div that's clicked to activate it. However, I don't understand how I can do the positioning correctly. I would like the bottom of the last li (where I store the submenu options) to be even with the bottom of the div that activates the popout. However, giving is a negative margin
ul.dd{
z-index:100;
position:relative;
margin-bottom:-30px;
display:none;
}
isn't working out. How can I accomplish this
http://jsfiddle.net/mBPfG/1/
Thanks!
Your container div was preventing the hidden <ul> tag from floating to the right of the other. Also added a negative margin-top to adjust positioning.
I have updated the jsfiddle.
I simply added:
.dd_container { width:600px; }
ul.dd{
z-index:100;
position:relative;
margin-top:-60px;
display:none;
}
However, I would suggest nesting your second <ul> within the first <li>.
I have modified the HTML and CSS completely to have a more symatically correct answer.
<div id="dd_container" class="dd dd_container">
<ul class="dd_deploy">
<li>more options -->
<ul class="dd">
<li>el1</li>
<li>el2</li>
<li>el3</li>
</ul>
</li>
</ul>
<div class="cb"></div>
Less markup is better
View the full jsfiddle.
<div id="menu">
<ul><li>SocialSpot</li>
<li>Profile</li>
<li>Latest</li>
<li>Settings</li>
<li>Logout</li>
</div>
</ul>
I have this in a webpage. I have css aligning them. However I want the logout button to be aligned to the right but on the same bar. How can I do this without having them all aligned to the right?
CSS:
ul { overflow:auto; }
li { float:left; }
li:last-child { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/
Btw the :last-child pseudo-class does not work in IE8 (and below). If you want it to work in those browsers, you will have to assign a class (e.g. right) to the Logout LI item, and then:
li.right { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/1/
You might want float: right on the css for the logout link.
Like this? http://jsfiddle.net/QAjkP/
You can use an id tag to specify the css properties for that one <li> item