Newbe question here.
When I do a mouse-over on a menu item then only fixed region is highlighted. The problem is that the next item on the menu consists of 2 long words and hover doesn't cover it all, only a part of it.
Here is the code that makes it happen:
navlist {
margin-left: -3px;
padding-left: 0px;
white-space: nowrap;
position: absolute;
height: 26px;
width: 777px;
top: 225px;
background: url(images/mb2.jpg) repeat-x top left;
font-family: Arial;
text-transform: uppercase;
font-size: 12px;
line-height: 20px;
}
#navlist li {
display: inline;
list-style-type: none;
}
#navlist li a {
padding: 3px 10px;
height: 20px;
width: 91px;
display: inline;
position: absolute;
text-align: center;
color: #FFF;
text-decoration: none;
margin-top: 5px;
}
#navlist li a span {
padding: 3px 10px;
height: 20px;
width: 71px;
display: inline;
position: absolute;
text-align: center;
color: #FFF;
text-decoration: none;
margin-top: -5px;
font-weight: bolder;
}
#navlist a:hover {
background: #0687eb;
height: 10px;
cursor: pointer;
}
Is it something that can be fixed (covering both words of menu item? I tried playing with width: 91px; value - the problem is that it can increase the area of being covered but hten it becomes to long and infringes on other menu items when you cover the first one)
Thanks.
Ideally I would like to highlight text only (letters of the text) - but not sure if it;s possible at all to do that for 2-words items)
Thank you.
Is your link in two lines of text and second line can not be hovered?
If so, try to remove height from #navlist li a span. this may help, but can also break layout.
Related
I'm trying to right align text in a list with a psuedo icon appearing right before it. The icon does appear before the text, but it's at the left edge of the list item. I'd like for it to appear right before the text.
Like this:
ICON this is text
ICON this is more text
ICON this is still more text
Right now, it appears like this:
ICON this is text
ICON this is more text
ICON this is still more text
Here's my code:
ul {
counter-reset: a;
margin-left: 0;
padding-left: 0;
margin-bottom: 28px;
li {
position: relative;
margin: 0 0 12px 0.8em;
padding: 4px 8px;
list-style-type: none;
font-size: 20px;
float: right;
text-align: right;
&:before {
content: "";
position: absolute;
top: 10px;
left: -17px;
width: 16px;
height: 17px;
margin-right: 8px;
background: url('/images/checkmark.png') no-repeat left top;
}
}
}
I've tried a couple of things, like adding 'display: inline-block' to the li items, but that didn't work.
I'll continue to try to a couple of things, but I'm not having any luck.
(I did figure out a way to get the results I wanted - I just didn't use the :before property and made the icons images. However, I'd like to use the :before tag, if possible.)
Thanks.
I have implemented it with an extra p element and styled it like the way you wanr.
ul {
counter-reset: a;
margin-left: 0;
padding-left: 0;
margin-bottom: 28px;
}
li {
position: relative;
margin: 0 0 12px 0.8em;
padding: 4px 8px;
list-style-type: none;
font-size: 20px;
text-align: right;
}
li p {
display: inline-block;
position: relative;
}
li p:before {
content: "";
position: absolute;
top: 2px;
left: -17px;
width: 16px;
height: 17px;
margin-right: 8px;
background-color: red;
/*background: url('http://pluspng.com/img-png/tick-box-png-checked-checkbox-icon-png-50-px-1600.png') no-repeat left top;*/
}
<ul>
<li><p>this is text</p>
</li>
<li><p>this is more text</p>
</li>
<li><p>this is still more text</p></li>
</ul>
I'm having some trouble centering a text inside a div. The text, "Project description" is a little bit longer than the other options so it is displayed on two lines.
Here's the code responsible for this:
.left-menu {
float: left;
width: 109px;
margin-right: 33px;
}
.left-menu .button {
width: 108px;
height: 64px;
background-color: #E6E6E6;
margin-bottom: 32px;
text-align: center;
}
.left-menu .button a {
font-size: 18px;
font-weight: bold;
line-height: 64px;
color: #00359F;
text-decoration: none;
}
And here here is the fiddle.
How can I make the word "description" to be displayed right bellow the word "Project"?
Thank you!
Update these rules in your CSS file:
.left-menu .button {
width: 108px;
background-color: #E6E6E6;
margin-bottom: 32px;
text-align: center;
padding: 20px 0;
box-sizing: border-box;
}
.left-menu .button a {
font-size: 18px;
font-weight: bold;
color: #00359F;
line-height: 1.2em;
text-decoration: none;
}
I've changed the line height on the a and removed the fixed height on the button too as it's better to achieve what you're after with padding. See this link for a working version https://jsfiddle.net/sukky4r3/2/
I've updated your fiddle to match what you want.
All you'll have to do is still adjust the line-height property on the .left-menu .button a to match the exact spacing you want, I've set it to 30px to make it look 'alright' for now.
The way this works is by using tables, make the .left-menu .button display: table; and it's child .left-menu .button a display: table-cell; with vertical-align: middle; and it will center multiple lines vertically.
Your CSS will look like this
.left-menu .button {
width: 108px;
height: 64px;
background-color: #E6E6E6;
margin-bottom: 32px;
text-align: center;
display: table; // make the display table here.
}
.left-menu .button a {
font-size: 18px;
font-weight: bold;
line-height: 30px; // adjusted line-height so that multiple lines fit in one menu.
color: #00359F;
text-decoration: none;
display: table-cell; // child has to be table-cell
vertical-align: middle; // this vertically centers the text
}
fiddle here
css tricks article on the subject here
I would like to have my Header Elements stack on top of each other to the right hand side of the screen (H1 element with the H2 element right under it). I am just starting to get a hang of CSS so do bear with me. Tried searching online for solutions but was only able to find an answer for when there was a single element.
Anyways this is what the page is looking like right now on screen:
The blue "We Help People and Businesses" is an H1 Element. The white "Achieve today's Goals and tomorrow's Aspirations" is an H2 Element. Both of these Header elements are nested within a DIV
Currently the CSS code is looking like this:
.hero01_content-div {
margin-top: 400px;
}
.hero01_content-head-test-main {
position: relative;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
float: right;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
position: relative;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
float: right;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
How can I make the H2 element stack right under my H1 element with both of these elements on the right hand side? I would appreciate any help. Thank you in advance.
A codepen demonstrating the above can be found here: http://codepen.io/anon/pen/qOoVxb
You need to set float: right to the parent container and remove the floating properties from the heading element as it takes it out of the normal flow.
Codepen Demo
.hero01_content-div {
margin-top: 400px;
float: right; /* Added */
}
.hero01_content-head-test-main {
position: relative;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
position: relative;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
float: right;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
<div class="w-section hero-01">
<div class="hero01_overlay">
<div class="w-container hero01_content">
<div class="w-clearfix hero01_content-div hero01_test" data-ix="scroll-reveal">
<h1 class="hero01_content-head-test-main">We Help People and Businesses</h1>
<h2 class="hero01_content-subhead-test-main">Achieve today's Goals and tomorrow's Aspirations</h2>
</div>
</div>
</div>
</div>
OK you need to remove
.hero01_content-div {
margin-top: 400px;
float: right;
}
Then change these
.hero01_content-head-test-main {
postion: absolute;
top: 0px;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
float: right;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
float: right;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
I am trying to align the menu to center. I have tried putting in text-align: center !important; in various spots but it didn't do anything.
Anyone have any ideas?
Thanks in advance for your help!
.menu_wrapper
width: 88%;
margin: 0 auto;
#main_menu nav ul
position: relative;
padding-left: 2%;
border-top: 1px solid #fff;
border-bottom: 1px solid #FFF;
#main_menu nav ul:after
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
#main_menu nav ul#nav_menu li
cursor: pointer;
display: block;
float: left;
margin-right: 19px;
#main_menu nav ul#nav_menu li a
display: block;
padding: 20px 10px 15px;
font: 11px/1.27em "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 0.25em;
color: #fff;
z-index: 2;
#main_menu nav ul#nav_menu li.blob
border-bottom: 1px solid #F00;
bottom: -1px;
height: 1px;
padding-bottom: 0;
position: absolute;
z-index: 1;
The best way to centerize your navigation is to put a display: "table" to your main container. This way you will be sure that everything will be centerized.
.menu_wrapper {
display: table;
margin: 0 auto;
}
change this section
.menu_wrapper
{
width: 88%;
margin: 0 auto;
}
After change
.menu_wrapper
{
width: 88%;
margin: 0 auto;
max-width:88%;
}
Add this style to your CSS:
#main_menu {
margin: 0 auto;
}
Or (if you have a top- or bottom-margin to preserve):
#main_menu {
margin-right: auto;
margin-left: auto;
}
The first example is shorthand for setting vertical margins to zero and horizontal (left and right) margins to automatic. The vertical doesn't matter so much, but the auto setting for your horizontal margins will push the element equally away from the left and right sides of its containing element (or your document, depending on your HTML), thereby centering it.
Note that this horizontal-centering method works only with non-floated, block-displayed, statically or relatively positioned elements—which I'm guessing is fine for your app, but we can't know without seeing your HTML.
In html,
try this
<center><div class='menu_wrapper'> your content </div></center>
The div class circle renders on the right had page but even adding margin:0 auto; nothing works it just stays there what gives.
Here is my html/php
<?php
/*
Template Name: Home Page
*/
?>
<?php get_header(); ?>
<div id="content">
<header>
<h1><span class="tech">TECH</span><span class="basics">BASICS</span></h1>
<h2>Personal Tech Specialists</h2>
</header>
<div class="circle"></div>
</div> <!-- end #content -->
<?php get_footer(); ?>
Here is my css
html {
font-size: 16px;
}
body {
background: #BAE4FF;
font-family: "Open Sans", sans-serif;
}
nav {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
font-weight: 400;
}
nav .menu {
list-style-type: none;
padding: 0;
margin: 0;
}
nav .menu li {
padding: 3px 0 3px 0;
display: none;
}
nav .menu li a {
text-decoration: none;
color: #fff;
font-size: 2.1em;
}
nav .menu .blog {
background: #1669B5;
}
nav .menu .contact {
background: #3892E3;
}
nav #touchNav {
background: #48B4EF;
width: 100%;
display: block;
color: #fff;
font-size: 2.1em;
padding: 3px 0 3px 0;
text-decoration: none;
}
header {
margin: 50px 0 0 0;
margin-top: 50px;
text-align: center;
width: 100%;
}
header h1 {
margin: 0 auto;
width: 100%;
}
header h1 .tech {
color: #fff;
font-weight: 500;
margin-right: 3.5px;
font-size: 1.1em;
}
header h1 .basics {
color: #48B5EF;
margin-left: 3.5px;
font-size: 1.3em;
}
header h2 {
font-size: 2.1em;
font-weight: 100;
width: 100%;
margin: 0 auto;
color: #fff;
line-height: 1.2em;
}
.circle {
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 auto;
}
try to add position tag.. u can use fixed as position or relative whatever suits your needs.. to the .circle class.
Your circle class margins are funny.
Try this instead:
.circle {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/q5w3G/1/
One should think that this will work too but trust the first one more:
.circle {
margin: 0 auto;
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/q5w3G/2/
CSS means Cascading style sheets. Cascading means that if one property is defined two or more times for the same element then the property read last is applied. So if you define margin on circle, then again latter in the same style sheet, then again later in a second style sheet with its rel link after the first in the head section, then in the head section itself after the rel links in a style tag, then again inline on the element itself, then the inline value is used. In fact that is the order they are used.
it would be beeter to have an example of page when you ask about css,
but here is the real problem for you
in css margin top does not work as you expect.
its not making a space on the top of your elements unless all the elements be in the same parent z-index (or simpler i mean they all have one parent) i.e all li's within a ul.
the top margin affects space between li's not between li and ul.
for making that you should give the ul a padding-top.
Hope it helps