I am using XML menu with ASP.Net to display the menu, and styling them with the custom CSS, The issue is with the menus on Mobile devices.
Consider the below screenshot,
CSS Code,
.menuxml{
display:none;
background-color: #006969;
color: #ffffff;
font-size: 95%;
font-weight: 500;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
}
.main_menu,
.main_menu:visited,
.main_menu:hover {
text-align: center;
color: #ffffff;
text-align: center;
height: 30px;
line-height: 30px;
margin-right: 8px;
padding-left: 5px;
padding-right: 5px;
}
.main_menu:hover {
background-color: #004949;
color: #ffffff;
}
.level_menu,
.level_menu:visited,
.level_menu:hover {
min-width: 100px;
border-bottom:1px solid #ccc!important;
background-color: #f1f1f1;
color: #000000;
text-align: left;
height: 30px;
line-height: 30px;
padding-left: 7px;
padding-right: 5px;
}
.level_menu:hover {
background-color: #004949;
color: #ffffff;
}
I have tried word-wrap, word-break and display:inline
Live test can be done with https://www.includehelp.com/
Since you used 'white-space: no-wrap' for dropdown options, Add new class to specific dropdown and add css(left: -120px).refer image
Related
As the title says, I'm having issues with the hover action. Not sure what's causing it.
body {
font-family: -apple-system-system-ui,BlinkMacSystemFont, "Gurmukhi MN Regular";
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header */
header{
background: #3e3e3e;
color: white;
padding-top: 15px;
min-height: 50px;
}
header a{
color: white;
text-decoration: none;
font-size: 21.73px;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 140px 0 140px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
}
header .current a{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
header li a:hover{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
I'm working on my first website for my portfolio. I've done all the markup for the first page and I've started styling it, but I'm stuck on the navigation bar. It's only the hover action that isn't working as I want it to. I'm trying to make it so that there's a rounded box behind it in a darker shade than the navigation bar, but the hover effect moves the text to the right a little bit. I read somewhere that it could be padding but I'm not entirely sure.
Appreciate any help, I'm new to all this.
Alex
The tag in the default state doesn't have the same values of padding and font-size of when it's on hover.
Try correct your code like this:
header a{
color: white;
text-decoration: none;
font-size: 21px;
padding: 8px;
height: 5px;
}
Seems you are using header a for simple action and header li a for hovering kindly try to replace your code with the following, If there is any question feel free to ask, if it solves your problem , then vote up to acknowledge our combine effort.
Thank You.
Best Wishes,
body {
font-family: -apple-system-system-ui,BlinkMacSystemFont, "Gurmukhi MN Regular";
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header */
header{
background: #3e3e3e;
color: white;
padding-top: 15px;
min-height: 50px;
}
header a{
color: white;
text-decoration: none;
font-size: 21.73px;
}
header a:hover{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 140px 0 140px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
}
header .current a{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
I have a set of DIVs like so:
<div class = 'tag'><a href='#'>gifts for him</a></div>
And the CSS looks like this:
.tag a,
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
.tag a:hover {
text-decoration: none;
background-color: #a5c5da;
color: #fff;
height: 37px;
line-height: 37px;
padding-left: 6px;
padding-right: 6px;
}
Basically I want them to look like the following (gifts for him as an example hover):
However mine look like this:
There is no gap and the hover ignores the padding (I'd like the hover to colour right up to the edges if possible).
If I add margin: 2px I get this, which is even worse:
What have I done wrong?
Thanks!!
i have make for you a fiddle.
DEMO
your css is wrong:
it should look like this:
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
margin-right:5px;
}
.tag a{
color: #666;
text-decoration: none;
}
.tag:hover {
background-color: #a5c5da;
cursor:pointer;
}
.tag:hover a{
color:#FFF;
text-decoration: none;
}
In your CSS, you need to give the .tag alone a margin, not .tag a. Try adding this line:
.tag { margin: 2px; }
Also, give your .tag a a height and width of 100% - this will fill in the entire container:
.tag a { height: 100%; width: 100%; }
In your current CSS, you're giving both the div containing the anchor tag as well as the anchor tag styling, but you only need to be giving it to the .tag div in order to space out the containers.
try this
.tag a,
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
margin:2px;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
.tag a:hover {
height: 100%;
width: 100%;
text-decoration: none;
background-color: #a5c5da;
color: #fff;
height: 37px;
line-height: 37px;
padding-left: 6px;
padding-right: 6px;
}
<div class = 'tag'><a href='#'>gifts for him</a></div>
Try with this used only single
gifts for him
Demo:http://jsfiddle.net/stanze/hkkLz0re/
Working on this mobile page:
http://mockup.comule.com/ (may contain pop-ups!)
Currently only working on the mobile aspect. When in the mobile view, the yellow menu 'Hamburger' icon is shown. I copied its CSS from elsewhere. Before it was used, the word 'Menu' was in its place. I didn't remove this word - the icon replaced/covered it.
The html markup still shows the word 'Menu' as being present:
Menu
The newly-added CSS:
.handle {
background-color: #990000;
font-size: 0;
line-height: 0;text-align:right;
padding: .75rem .5rem;
display:block;
}
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
}
What I want is the menu icon to appear on the right-hand-side of the bar and the word 'Menu' to re-appear on the left.
What needs to be changed in order for this to happen?
Thanks in advance.
"Menu" written on left and menu icon on right, for this try following:
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
float: right;
margin-top: -4px;
}
.handle {
background-color: #990000;
text-align: left;
padding: .75rem .5rem;
display: block;
line-height: 1.5em;
text-transform: uppercase;
font: 90%/1.3em Arial, Helvetica, sans-serif;
color: white;
font-size: 1em;
}
And for "Menu" on right and icon on left, try this:
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
float: left;
margin-top: -4px;
}
.handle {
background-color: #990000;
text-align: right;
padding: .75rem .5rem;
display: block;
line-height: 1.5em;
text-transform: uppercase;
font: 90%/1.3em Arial, Helvetica, sans-serif;
color: white;
font-size: 1em;
}
Also just to inform, I am not sure about the "margin-top: -4px" in ".handle:after", it would be either -4px or -18px, try it out and let me know which works.
Been messing with it for the past couple of hours. Trying to get a vertical space betweeb tags, but no luck...
Blog has a separate template file.
Live link here
http://soloveich.com/pr6/blog/
Html code
<div id="tagy">
widget code
</div>
css
#tagy {
margin-top: 20px !important;
}
#one h2 {
text-align: center;
width: 100%;
padding-top: 45px;
padding-bottom: 10px;
font-family: 'Raleway', sans-serif;
font-size: 26px !important;
color: #7e7e7e;
border-bottom-style: dotted;
border-bottom-color: #a6a6a6;
border-bottom-width: 1px;
}
.seo-tag-cloud a {
margin: 10px;
padding: 7px;
background-color: #dddddd;
color: #666666;
font-size: 14px !important;
text-align: center;
}
Add display: inline-block to your .seo-tag-cloud a styling. Anchors are inline by default, which means they don't have margin.
I am new to CSS, I found an layout online, but I have a little problem customizing it.
When the content of mainContent div is "higher" then the left menu, everything is working ok - but when the mainContent is smaller, it looks like this:
The div order is visible through Firefox WebDevelopper addon. The .css file is as follows:
body {
padding: 0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
#container {
padding-right: 20px;
padding-left: 20px;
}
#header {
}
#mainMenu {
border: 1px solid #808080;
font-size: 0.8em;
}
#pageBody {
position: relative;
}
#sidebar {
width: 250px;
padding: 5px 10px 10px 10px;
float: left;
border: 1px solid #808080;
font-size: 0.8em;
margin-top: 5px;
margin-right: 10px;
min-height: 500px;
}
.mainContent {
text-align: justify;
min-width: 400px;
min-height: 500px;
margin-left: 285px;
}
#footer {
font-size: 0.8em;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #CCCCCC;
text-align: center;
color: #CCCCCC;
background-color: #333333;
padding-top: 10px;
padding-bottom: 10px;
margin: 0;
/*clear: both;*/
}
#footer p {
margin-top: 0px;
margin-bottom: 5px;
}
#footer a {
color: #CC3300;
text-decoration: none;
}
#footer a:hover {
color: #FF9900;
}
Can I please ask for some guidance in repairing this layout? I would like to acheive something similar to:
The exact position is not important, I just want the footer to be placed below the pageBody div.
I would be grateful for any help.
I don't know what your html looks like, but it looks like you could try inserting a clearing div just before the footer... btw, why is the 'clear: both;' commented out in the footer css rule?
code to insert just before the footer div:
<div style="clear: both;"/>
Not positive whether it will help, but if I understand your problem correcty, this is my best guess!
Try changing pageBody to:
#pageBody {
float: left;
clear: both;
}