I have a menu on a web page and I want to add some emphais onto the element that my mouse is hovering over.
Before I hover my mouse the menu looks good and the alignment looks good. To add emphsis, I added a small arrow (or '>' sign). The problem is that now the text jumps to the right by 2 characters.
I want to add the '>' character without my menu text jumping the right. The correct behavior is that the text remains in p
lace and the arrow appears 2 spaces to the left of the hovered menu item.
Note I tried to change my alignment and the whole thing looks like crap. Only text-align: left gives it the correct alignment.
#leftMenu {
position: absolute;
top:28%;
left:24%;
height: 20%;
width: 20%;
font-weight:400
font-size:0.5em;
}
#leftMenu a:hover:before {
content: "> ";
}
How can I add the arrow without the text jumping to the right?
Just have the ">" already exist, just not visible. This way it will take up the real estate on the menu, so nothing will move when it appears. Here is a small example:
CSS:
#leftMenu {
position: absolute;
top:28%;
left:24%;
height: 20%;
width: 20%;
font-weight:400;
font-size:0.5em;
}
.marker{
visibility:hidden;
}
#leftMenu li:hover .marker{
visibility:visible;
}
#leftMenu ul{
list-style:none;
}
HTML:
<div id="leftMenu">
<ul>
<li><span class="marker">></span>Link 1</li>
<li><span class="marker">></span>Link 2</li>
<li><span class="marker">></span>Link 3</li>
</ul>
</div>
I'm not really sure of the exact layout of your menu, but I think the above gets across the general idea.
You could add a padding-left for normal entries that takes exactly the width the arrow would have later and remove it when hovered in favor of the arrow.
However this could be quite a mess since the arrow may not have the same width in every browser (even with same font and font-size).
An other possibility is to use positioning properties to move the arrow to the right location. If you for example use position: absolute; on it, it will no longer move other things around. Be aware that it then will be positioned absolutely inside the next parent that does not have standard position (static).
Related
I think the best way to describe my problem is to show you.
http://yourinternship.hailstormcommerce.com/?page_id=21
On the sidebar on the left there is a widget that uses ul, a the moment I have a bottom-border applied to the first li and then the border turned off for any child li after that.
My issue is , the border for "Your Internship" at the very top of the widget doesnt appear until its submenu is finished, ie above "Accomodation". But I want it straight underneath "Your Internship" , like the rest of the menu pages. So basically its bordering the entire li. I understand why this is happening, and the only way I was able to get around it was by putting a border underneath ul li a but the problem is this ends up being very messy, for controlling the width of the border etc. (using padding etc).
Has anyone any suggestions on how I could apply a border to the first link?
Also, on the same note , is it possible to remove the last border under "Contact Us"?
Im asking the second question here as well as I guess my overall problem has to do with styling particular parts of a widget from wordpress.
Thanks in advance for any help. Any questions let me know, because I may have made that sound confusing.
Cheers
It's possible. I made a simplified example that you can learn from:
<ul class="widget">
<li class="active">Your Internship
<ul>
<li>Benefit of our program</li>
<li>Students</li>
<li>University</li>
<li>Why Choose Us</li>
<li>Your Internship Process</li>
<li>Your Language Course</li>
</ul>
</li>
<li>Your Accomodation</li>
<li>Your Employers</li>
<li>Information for Interns</li>
<li>Apply Now</li>
<li>Contact Us</li>
</ul>
To get rid of the border on the active and last item use this pseudo selectors:
.widget > li:last-child, .active {
border: none;
}
To re-add a border on the "active" class, I used a pseudo element:
.active:before {
content: "";
width: 100%;
position: absolute;
top: 25px;
border-bottom: 2px solid salmon;
}
Demo
It might be a bit messier than you want to, but here is a suggestion.
To get the line directly underneath "Your Internship" (but still keeping it above "Your Accomdation") you can do the following:
#menu-your-internship-sidebar .current_page_parent > a {
display: block
border-bottom: solid 1px #DDD;
}
For removing the last border under "Contact Us" you just set the li:last-child bottom border to 0, like this:
#menu-your-internship-sidebar li:last-child {
border: none
}
EDIT:
If you want to remove the border above "Your Accomdation":
#menu-your-internship-sidebar > li.current-page-parent {
border: none;
}
I am using jquery tools scrollable plugin with Navigator plugin for navigation buttons.
everything is working great it just a matter of positioning.
right now i have to us absolute positioning for the navigation buttons:
.navi {
width: auto;
height:13px;
position: absolute;
right: 35px;
top: 10px;
}
.navi a {
width:8px;
height:8px;
float:right;
margin:3px;
background: url(../img/navigator.png) 0 0 no-repeat;
display:block;
font-size:1px;
cursor: pointer;
}
I need to have the anchors floating right because they will grow dynamically and in the design the are aligned on the right edge and grow out to the left side.
The problem with that, the plugin will make the anchor to the far right the first one. I need the first anchor on the left side to be the first one and iterate to the right.
currently the html looks like this
<div class="navi">
<a></a>
<a></a>
<a class="active"></a>
</div>
with them floating right.
I need them to float right but render like this:
<div class="navi">
<a class="active"></a>
<a></a>
<a></a>
</div>
I'm using this plugin Jquery Tools Navigator
The default functionality of float:right; is to display the first element far right and the following elements will line up from right to left. If you want them to be displayed from left to right you would have to use float: left;. If floating left is not working for you you would have to rearrange the order of the images.
This is just a CSS issue - nothing to do with jquery, and certainly not the C# 'float' tag!
I presume this image 'navigator.png' is 20x20px, so you will have to use a block element on the .navi a liks to be able to set the size. In that case, you will have to use float: left on .navi a, and then change .navi width: auto to a specified size (3 a tags = 3 x (8+6) = 42 - that's the width+margin). This then lets you enter some text in the tags which you can hide using .navi a text-indent:-9999px.
The alternative is to just hack it a bit using some padding. Personally, I'd use the first solution. Let me know if you need clarification with the CSS code.
I have text which has to be right aligned, and when this text takes up more than one line and wraps around, that new line has to be distinguishable from the line after, so I'm trying to get it to indent on the right side, but I can't find a solution which works.
I've tried what was suggested on [the htmlhelp forums thread #8327] and [codingforums thread #58451] as well as a combination of the two to no avail (Can't post links. Sorry.). Is there any other way of accomplishing this?
My attempts:
div.poem li:after
{
content: " ";
display: inline-block;
width: 10px;
}
Does something, but I don't want it to indent if the text only takes up one line.
div.poem li::first-line::after
{
content: "asdf";
}
Does nothing
div.poem li:first-line
{
color: red;
margin-right: 200px;
padding-right: 200px;
}
Text on the first line turns red (so that I know what's going on) but the margin and padding doesn't do anything.
HTML:
<div class='poem'>
<ul class='poem'>
<li>Here's one line of the poem</li>
<li>This is the second line of the same stanza, which is long and will wrap around</li>
<li>Part of the line above is now on line 3, and looks like it's supposed to be a line of its own.</li>
</ul>
</div>
Here you go:
p {direction:rtl;padding-right:100px;text-indent:-100px;}
This sets the css direction to be from right to left.
Then add right padding to indent the whole thing from the right
Then use a negative indent that causes the first line to be "outdented"
Your content and text-flow is still left to right (i.e. breaks on the right), it just interprets the css (e.g. paragraph text-indent) on the other side.
Here's my code:
http://jsbin.com/ukese5/7
I found an examples here, where it is explained how to create a left indented list of links. It only seems to work on left aligned text though since the method includes using text-indent. In your case (left-aligned) it would look like this:
div.poem li { padding-left: 2em; text-indent: -1em; }
div.poem { text-align: right; }
I tried right aligning it but that didn't work. Is the text being read from Right-To-Left? In that case this should work:
div.poem li { padding-left: 2em; text-indent: -1em; }
div.poem { direction: rtl; }
I assumed his HTML markup:
<div class="poem">
<ul>
<li>This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.</li>
</ul>
</div>
Updated answer based on the your <li> structure:
div.poem li:nth-child(3) { padding-right: 2em; }
div.poem { text-align: right; }
Please note that these are CSS3 selectors and that much older browsers don't support :nth-child(). Since the reading of the english text still works you can use that solution also. To learn more you visit the specification page.
Another thought: If you create these <li> using code, you can add a class on the <li> that you want indented. And then use more browser friendly CSS to indent it.
The only thing left is to sort out if you want the bullet points or not. Those can be taken away with:
div.poem ul { list-style: none; }
I have searched through the forums and good old google and have found many answers but non seem to work on my page.
Anyway here is the question,
I have 2 divs that are positioned side by side, and I wish to get rid of the whitespace
www.blisshair.com.au/test.html :(http://www.blisshair.com.au/test.html)
I want to the black from the "link 1" to join to the main content in the center,
Any help would be greatly appreciated,
Thank you.
EDIT: Tried opening in Internet explorer 8 and it seems top exactly how I want it, besides the 2 bottom divs not lining up,
Is it possible to do this with an UL and SPAN tags ? I am aiming for a tabbed look, for example, when you click on link 2, the background around link 2 goes black and the black color "flows" into the main content page, sorry if this doesnt make sense, early AM here :D
Thanks again
For starters: don't use tables in a non-semantic manner, and don't use inline styles when you can avoid it.
You've got a list of links, so put your links in a list:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
...
</ul>
The problem you're having is that you only put the class that produces the background color (menu1) on the first item in your table.
You should give your parent item a class or id instead:
<ul id="nav">...
And then give the entire nav a background color (You'll also have to remember to get rid of the default padding and margin on the nav):
#nav
{
background-color: #000000;
margin: 0;
padding: 0;
}
You might check into css resets like here: http://meyerweb.com/eric/tools/css/reset/
Basically, browsers will default to have margins or padding between div elements or elements that have their own 'block' (h1, h2, and several others).
You'll need to set margin and padding levels to zero, as a starter.
Zounds!
Is this a solution? Certainly seems so!
Quick and dirty:
Float the menu left and give it 100px width;
Use a left margin for the content, do not float it;
Use background color on a container of both the menu and the content;
Realize how much trouble you're going to have if this was a problem already;
Persevere, that is to say DO NOT GIVE UP, no one was born knowing it! :)
The harder it is, the more you'll learn. Expect a lot of learning. :)
The HTML:
<h1 id="header"><img src="FancyHairLogo.png" alt="ZOMG PURTY HAIR" /></h1>
<div id="textContainer">
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<div id="content">
<h2>WELCOME TO BLISS HAIR EXTENSIONS!</h2>
<p>
this is the homepage of bliss hair extebnsions, please check back soon as we are contionously updating the content on this page!
</p>
<p> etc ... </p>
</div>
</div>
And the CSS:
body {
background-color: #666;
}
#header {
text-align: center;
margin-bottom: 20px;
}
#header a img {
border: dashed 1px gray;
}
#textContainer, #header * {
background-color: black;
color: white;
}
#menu {
float: left;
width: 100px;
}
#content {
margin-left: 100px;
}
Issues
"The title's top will not line with the menu's top!"
Yes, because adjoining borders collapse and the bigger applies.
Use a css rule like content>h2:first-child { margin-top: 0px; } to quickly hack it away, but make sure to understand what is happening, it will save you braincells and time in the future.
I have several NAV Bars. Each NAV Bar is of the pattern;
a | a
such that where the literal "|" occurs, it's always has a sibling a on the left.
where a is an html anchor element and "|" is a literal separator of interest.
What css can I use to capture that literal "|"? The idea is that I want to set it display:None for print media.
Thanks for any help.
My recommendation would be to use an unordered list
<ul class="myNav">
<li><a>My Nav</a>
<li class="last"><a>Another nav</a>
</ul>
And then float the list items left, and then put a border on one side of each list item. Now the CSS below isn't exact, but it gives the general idea
.myNav li {float:left;border-right:1px solid black;}
.myNav li.last {border-right:0}
That should look similar, and be 100% css for seperators.
CSS selects html elements. | is not an html element, it's a text node, you can't access it. However, you can probably use background images on the anchors instead, and make them the divider. That or wrap spans around the divider and target them.
<span class="divider">|</span>
or
#nav a { background:url(/images/divider.gif) no-repeat top left; }
#nav li.last a { background-image:none; }
I didn't mention borders because they would rely on the height of the element being applied to and assumed you wanted more control, more customized but you could of course use those.
You need hooks to select anything with CSS. If the "|" characters aren't marked up in some way, you can't select them. Put them in span elements, or, better yet, replace them with background images, and define your navigation as a real list.
Yeah, you'd have to surround them, with say a span element. Then give those spans a class of "pipe" or something. Then use the CSS class "pipe" to set the display to none for printing.
You could position the parent element outside but the a elements inside the viewport. Something like this:
div {
position: relative;
top: -10em;
}
div a {
position: relative;
top: 10em;
}
But you should better use a list for your navigation and format that:
<ul id="nav">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
#nav, #nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
float: left;
}
If you just need a simple text divider, using the content property is a fast, semantic way to achieve this.
<div id="nav">
Nav1
Nav2
</div>
#nav a + a:before { content: '|'; }
Note that content and adjacent sibling selectors (the + in the selector above) don't work in older browsers like IE6, but since this is just a divider, it shouldn't be a huge concern.
Edit: Note that this will make the | appear inside the link, so you should use a list instead (that is also the correct way to mark this up anyway).