Good morning,
I have a menu with a few options. I want to display an image and next to it a string, menu hyperlink. For example:
<ul>
<li class="category" id="category-19">
<a class="dropdown-item" href="http://localhost/new.domain/test-test" data-depth="0">
::before
Test Test
</a>
</li>
</ul>
And my CSS:
#header .menu, #header .menu > ul > li {
display: inline-block;
}
ul {
list-style: none;
}
#_desktop_top_menu a {
text-transform: uppercase;
}
.top-menu a[data-depth="0"] {
font-weight: 600;
padding: .1875rem .625rem .375rem;
}
.dropdown-item {
display: block;
width: 100%;
padding: 3px 1.5rem;
clear: both;
font-weight: 400;
color: #373a3c;
text-align: inherit;
white-space: nowrap;
background: none;
border: 0;
}
I Want to have something like that:
How to get this effect ? thanks for any help.
You can use the <pre> tag before Test and close it.
The tag defines preformatted text.
You can force-wrap be giving it a fixed size and using word-wrap:
.dropdown-item {
display:block;
width:150px;
word-wrap:break-word;
}
Related
I tried to get a hamburger menu working with only css.
The problem is that my checked function doesn't work as intended and I cant figure out what I got wrong.
The hamburger menu starts at 1000px.
I used input with checkbox to switch between open and close.
#toggle:checked + .menu { display: block;}
.menu a {
font-size: 22px;
}
#toggle {
display: none;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
#toggle {
display: block;
}
#toggle:checked+.menu {
display: block;
}
<a herf="#">
<input type="checkbox" id="toggle">
<div class="menu">
Home
Resources
Monthly
Terms
Privacy
</div>
</a>
You've wrapped these some of these elements in malformed links (herf?)....and that's not permitted by HTML
See this Q&A
The browser seems to be autoclosing the link wrapper just after the input which means that the :checked + selector fails.
Remove the link or change it to something innocuous, like a div.
nav .menu a {
text-decoration: none;
color: white;
font-weight: 700;
padding: 0 1% 0 1%;
}
.menu a {
font-size: 22px;
}
#toggle {
display: none;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
nav .menu a {
display: block;
color: #2b9dff;
background-color: white;
border-bottom: 1px solid #2b9dff;
margin: 0;
}
#toggle {
display: block;
}
#toggle:checked+.menu {
display: block;
}
<input type="checkbox" id="toggle">
<div class="menu">
Home
Resources
Monthly
Terms
Privacy
</div>
I have a pretty specific question: I'm building something like a simple flat table (I don't use table itself because of rounded borders issue).
I'm using unordered list here and the problem is that I can't figure out how to align items in the second column, taking into account that the content should be dynamic (e.g. changing numbers).
Here's the markup for one row:
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
And CSS:
.ktbl_head {
padding: 15px 0 0 0;
height: 100%;
background-color: #ebe7e7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.ktbl_head ul li {
display: inline;
padding-right: 135px;
font-family: "Open Sans", sans-serif;
font-size: 14px;
font-weight: 300;
color: #888888;
}
.ktbl_mid_wht {
background-color: #ffffff;
height: 100%;
padding: 20px 0 0 0;
}
.ktbl_mid_wht ul li {
display: inline;
text-align: left;
padding-right: 90px;
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
color: #888888;
}
Thanks for your attention!
here is my implementation on aligning the table without the table tag:
HTML
<div class="container">
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
CSS
.container {
border-radius: 10px;
border: 1px solid rgb(200,200,200);
overflow: hidden;
}
section {
font-family: "Open Sans", sans-serif;
width: 100%;
}
section:nth-child(2n+1) {
background-color: #ebe7e7;
}
section ul {
padding: 0;
margin: 0;
height: 65px;
}
section ul li {
width: 45%;
line-height: 65px;
display: inline-block;
}
section ul li:first-child {
padding-left: 35px;
}
Result
Explanation
You see, in the HTML, I added a new div as a container to create the curved corner with border-radius (the overflow: hidden needs to be used so that the content is encapsulated by the container).
For the CSS, section maintains general property such as font-family. Furthermore, section:nth-child(2n+1) is used to create background-color every other element starting with 1st,3rd,5th,... element. The selectors section ul, section ul li, and section ul li:first-child are used to make the CSS selectors more semantic (it makes clean code and easy to maintain in the future). Please see the code below for the demo. Happy coding!
PLAYGROUND
Give all the li's a width in which all of the content-length will fit..
I would like to add a CSS-only drop down menu to a site. I am able to do this with just one drop, but am having trouble with adding another tier to the menu.
I am able to get the list to hide initially, but when the trigger is hovered over, the entire list becomes visible, instead of just the first tier of the drop down list.
This is part of the list:
<ul id="DealerNav">
<li>Order from your dealer
<ul>
<li>BFC Syringe (empty)
<ul>
<li>Atlanta Dental</li>
<li>Benco Dental</li>
</ul>
</li>
<li>BFC Complete
<ul>
<li>Practicon Dental</li>
</ul>
</li>
<li>Vaccu•sil Heavy Body
<ul>
<li>Atlanta Dental</li>
<li>Benco Dental</li>
<li>Burkhart Dental</li>
</ul>
</li>
</ul>
And, this is the CSS that controls it:
#DealerNav { margin: 0; padding: 0; font-weight: bold; }
#DealerNav li { list-style-type: none; font-size: 100%; position: relative; margin-left: -3em; }
#DealerNav li li { margin: 2px 0; }
#DealerNav li ul { display: none; }
#DealerNav a.first { width:100%; color: #555; background-color: #FFF; margin-left: 2.5em; }
#DealerNav a { display:block; width: 12em; padding: .5em; background-color: #CEF; color: #FFF; }
#DealerNav a:hover { color: #555; }
#DealerNav a:hover.first { color: #CEF; }
#DealerNav li:hover ul { display: block; }
#DealerNav ul ul { margin-left:10em; margin-top: -2.25em; }
Is this too complicated to ask help on?
The page in question is temporarily at:
http://www.hodentalcompany.com/pages/syringe2.html
The menu is at the bottom of the right column on the text, "Order from your dealer"
Thanks everyone for any help!
Change this:
#DealerNav li:hover ul { display: block;}
to this:
#DealerNav li:hover > ul { display: block; }
You only want the first child UL to show, not all of them.,
Like this?
http://jsfiddle.net/kboucher/nrAPu/
I am doing an horizontal dropdown menu. It looks like this :
[menu1][menu2][menu3][menu4]
But when I resize (less wide) my browser, the menu appears like :
[menu1][menu2]
[menu3][menu4]
I want it to remain in line all the time!
EDIT: my CSS file
/* General */
#cssdropdown, #cssdropdown ul {
list-style: none;
position: relative;
visibility: visible;
z-index: 1;
overflow: hidden;
}
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
/* Head links */
#cssdropdown li.headlink {
width: 11.911em;
float: left;
margin-left: -1px;
border: 1px black solid;
background-color: #e9e9e9;
text-align: center;
}
#cssdropdown li.headlink a { display: block; padding: 10px; }
/* Child lists and links */
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: center; }
#cssdropdown li.headlink:hover ul { display: block; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 17px;}
#cssdropdown li.headlink ul li a:hover { background-color: #FF9; }
/* Pretty styling */
body {
font-family: verdana, arial, sans-serif;
font-size: 0.7em;
position: static;
}
#cssdropdown a { color: black; font-weight: bold; font-size:10px } #cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: #FFF50A; }
#cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; }
/*headermenu*/
#headerMenu {
position: relative;
float: left;
color: #DDD;
z-index: 1;
height: 34px;
right: 10px;
width: auto;
}
<div align="left" class="thrColElsHdr" id="headerMenu">
<ul id="cssdropdown" name="cssdropdown">
<li class="headlink"> Ecole
<ul>
<li>Histoire</li>
<li>Philosophie</li>
<li>Méthode</li>
<li>Equipe</li>
<li>Qualité</li>
<li>Services</li>
<li>Emplois</li>
</ul>
</li>
<li class="headlink"> Cours
<ul>
<li>Individuel</li>
<li>Semi-privé</li>
<li>Mini-groupe</li>
<li>Intensif</li>
<li>Entreprises</li>
<li>A distance</li>
<li>Par téléphone</li>
<li>Coaching</li>
<li>Soutien scolaire</li>
<li>Diplômes officiels</li>
</ul>
</li>
<li class="headlink"> Inscription
<ul>
<li>Auto-évaluation</li>
<li>Conditions</li>
<li>Tarifs</li>
<li>Formulaires</li>
</ul>
</li>
<li class="headlink"> Contact
<ul>
<li>Ecole</li>
<li>Lien externe</li>
</ul>
</li>
</ul>
</div><br/>
You should set min-width on the element containing the menu.
you want to use the css
white-space:nowrap;
this should be applied to the parent of your menus
if you provide some of the actual html, I can be more specific
for example
<div class='menuContainer'>
<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
<span>menu4</span>
</div>
and css like
.menuContainer {
white-space:nowrap;
}
see http://www.w3schools.com/css/pr_text_white-space.asp
Edit in response to op question modifications
I assume #cssdropdown is the id your container around all the menus. please let me know the html for this if it's not correct.
Anyways, in this case, you should add to your css
#cssdropdown {
white-space:nowrap;
}
One other note, I see the width of your mens is set to 11.911em. When I see that I can only assume that you set it to be exactly the right width for whatever font you have. keep in mind your users may have slightly different fonts and suddenly your pixel perfect sizing is meaningless. design with a little more flexibility in mind.
Sounds like your width property isn't being set in either the HTML or the CSS.
Can you provide some sample code?
I want the following code to display only 1 line of text. How can I get rid of the break between the span and the ul?
<div id="twitter_div">
<span class="talenthouse">#twittername: </span>
<ul id="twitter_update_list">
</ul>
</div>
With the following CSS:
*{
margin: 0;
padding: 0;
}
#twitter_div{
font-family:"lucida grande",tahoma,arial,sans-serif;
color: #999999;
font-size: 71%;
background: url(images/twitter_bg.gif) top left no-repeat;
width: 965px;
height: 48px;
overflow: auto;
padding: 15px 0 0 85px;
}
.talenthouse{
font-family: "Helvetica Neue", "lucida grande",tahoma,arial,sans-serif;
color: #80c242;
font-weight: bold;
font-size: 135%;
display: inline;
}
ul#twitter_update_list{
list-style: none;
width: 780px;
height: 15px;
display: inline;
}
Try this CSS.
<style type="text/css">
ul, li, ol{display:inline}
</style>
Short answer: put this in your CSS.
ul#twitter_update_list, ul#twitter_update_list li { display: inline; }
Try to use a reset sheet to remove all paddings/margins from the elements.
Google for 'eric meyer reset sheet'.
Then put the list an the content to display:inline;
You can set the CSS to display the UL inline. This will also remove the dots.
#twitter_div li { display: inline; }
Thanks
Andi
I believe this should work:
#twitter_div span { float: left; }
#twitter_update_list { float: left; margin: 0; }
EDIT: I just added the margin: 0 which brings the list up to the same level as the span.