I am having trouble with my navigation menu, I have some li that are floated left of each other, and each li has a back ground image set to the right to give a seperation effect, within the li I have a a that is text aligned center.
On hover I have a bottom-border but I need said board to span the full width of the li not the a is this possible?
Here is a fiddle of my current attempt,
Fiddle
The following CSS should do the trick:
header nav a { width:100%; }
Related
Hi I am having trouble getting my submenus to line up nicely below my menu items. I've tried researching it but almost everything gives ideas for floating menus, instead of a display:table one like I've done.
Here's a snippet: http://codepen.io/ruchiccio/pen/ZGGQvR
You can line the submenu up to the left side of the parent menu items by removing padding on the nested ul elements.
#navigation1 nav ul li ul{
position:absolute;
display:none;
padding: 0;
}
http://codepen.io/anon/pen/rVVxJZ
I'm attempting to learn some things about css and html, and I'm currently playing with webpage menus.
I've been using this website: (http://www.cssportal.com/css3-menu-generator/) to play with stuff visually and infer the syntax by how the code elements are changing however, this generator is missing a feature I want to understand: Aligning the list horizontally.
how could the output of this generator be edited so that the buttons are aligned with the center of the menu bar instead of the left?
Instead of floating the lis, you can set them to display: inline-block:
.menu {text-align: center;}
.menu > li {display: inline-block;}
For the code, please visit http://coloradohypnosis.com.s51572.gridserver.com/
In the nav bar, I cannot get the text to be center aligned for the nav items such as "Home", "What Others are Saying", "What to Expect", etc.
The current alignment skews the design slightly. I've played around with Chrome's Developer tools to change the CSS in the browser, but nothing I did changed the text's alignment.
Thank you.
I'd recommend to change the left and right padding to be of the same value, this way it will add the same padding on the left and right section to center align the text in your anchor element. For example:
#nav ul li a { padding: 34px 0.5em 18px 0.5em }
I'd recommend setting the a tags to be text-align:center and display: block then add equal left and right padding to the a tags. Maybe set the li tags to be text-align:center too just to be sure :p
change your anchor padding in your style.css (line 41):
#nav ul li a
On the site: ukrainiansecret.com
I would like to get rid of that green right margin of the banner, and to have it exactly as the left side. Have tried to stretch the banner width but it didn't work out.
Thanks
The quick and dirty way I did it was add a width:100%; to the div.banner_main, ul#portfolio, ul#portfolio li and ul#portfolio li img - that will make the image stretch all the way across the screen.
Example:
div.banner_main,
ul#portfolio,
ul#portfolio li,
ul#portfolio li img {
width:100%;
}
I am building a portfolio site and am looking to add html text titles under my home page images. The images are formatted in an inline list, floated left. I'm somewhat new to this, so bear with me if it's ultra simple. I'd like the text to align left under each image and be hidden upon rollover.
Page:
http://www.lauradimeo.com/TEST/index2.html
Forgot to add -- I'd like this to look great on a tablet device. I know the rollovers won't work but otherwise it should be ipad, etc friendly.
thank you!
I think I have what you're looking for using a CSS-only (no Javascript) approach: demo page
Inside your first list item I inserted a div:
div.caption {
width:200px; /* Because your images are 200px wide, this must match */
clear:both; /* This places the div after the floated image */
position:relative; /* Required to set positioning on the line below */
top:-100px; /* The div would normally appear at the bottom of the image. Move it up a little. */
margin-bottom:-500px; /* A hack because the div causes the li to have a larger bottom margin. Not sure how to get around this */
z-index:2 /* Will explain this later */
}
<li> ... <div class="caption">The quick brown fox jumped over the lazy dog</div></li>
And I added z-index attributes to your li/a/img elements:
#work ul li, #work ul li a, #work ul li a img {
position: relative; /* z-index only works on positioned elements */
z-index: 1; /* Default z-index 1 */
display: block;
float: left;
}
#work ul li a:hover, #work ul li a:active {
position: relative; /* Hover/active z-index 3 */
z-index: 3;
}
Take a look at how to use z-index if you're not familiar with it. On the test page the caption div has a higher z-index than the regular image but a lower z-index than the mouse-overed image.
This is a little hacky, but there's room for improvement. Also FYI, your page doesn't look right in IE 7- all the images appear in a single column. My code might not need the hacks if and after you fix your markup. =)
Try wrapping the images in a container like a <div>-tag (you can also use a <table>). Insert the image into a div tag and put the text in too. Upon mouse-hover, use javascript to hide the text and make the image larger.
Another possible solution would be to absolutely position the images in your li's, and use margins / padding to position your text under the images as to be visible until the image is moused over. While this approach would likely allow you to retain your no-JavaScript hover effects, it may not be the easiest to implement as your markup stands currently.
you can also try using the dl, dt, dd tags. It would get you the same result and you can use javascript to show and hide the text. You can specify the width of the DIV and DL. Then you can have the DL float: left inside that DIV. Please let me know if this is helpful.
Link to the DL tag
http://www.w3schools.com/tags/tag_dl.asp
<div id="main-holder">
<dl id="box1" class="my-images">
<dt>Image</dt>
<dd>HTML Text</dd>
</dl>
<dl id="box2" class="my-images">
<dt>Image</dt>
<dd>HTML Text</dd>
</dl>
</div>