Linking a background image with CSS is giving me so me issues. They seem pretty simple but I can't quite get around them:
I have list items for my main menu:
<div id="menuContainer">
<ul id="menu">
<li id="home" title="Home" alt="Home">Home</li>
<li id="current" title="Current Students" alt="Current Students">Current Students</li>
<li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li>
<li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li>
<li id="visitors" title="Visitors" alt="Visitors">Visitors</li>
</ul>
my css sets the li to inline-block and gives defines the id's with a size and background image accordingly. I had to use zoom: 1; and *display: inline; for IE to work and everything shows up fine in IE for that now.
When I use text-indent: -9999px; to remove the text and leave the image, Chrome and Firefox works fine with this. However, in IE the whole li shifts the number of pixels listed.
Finally, In Chrome the entire image is the link, in IE and Firefox only the text is the link so with no text the menu has no function.
Any ideas?
You are using syntactically incorrect HTML. You can't wrap an <a> around a <li>. While fixing this may not necessarily make your problem go away, it will probably ensure that every browser behaves the same way.
You're not very clear about what you want to achieve, and what your menu looks like. If you want the whole area of the <li> to become clickable, you're probably best off giving the <a> a display: inline-block and fixed dimensions.
If you need more detailed answers, you may want to give us an online example.
First well form the html, then try your css again.
<ul id="menu">
<li id="home" title="Home" alt="Home">Home</li>
<li id="current" title="Current Students" alt="Current Students"> Current Students</li>
<li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li>
<li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li>
<li id="visitors" title="Visitors" alt="Visitors"> Visitors</li>
</ul>
it's better to use line-height instead of text-indent. you need to use image replacement technique. like this
<ul id="menu">
<li><span>Home</span></li>
</ul>
and CSS
ul#menu li a { width: 100px; height: 20px; background: url(../images/myimage.gif) no-repeat 0 0; }
ul#menu li span { line-height: 200px; display: block; }
Related
I would like to build a sample "webshop" project where I would like to list books as on the picture. How can I align text and pictures given this HTML code with CSS similarly as:
HTML code of one book (note this code is replicated the same way with different texts:
<li class="book">
<ul>
<li class="bookcover">
<a href="https://rads.stackoverflow.com/amzn/click/com/1118008189" rel="nofollow noreferrer">
<img src="https://books.google.com/books/content?id=aGjaBTbT0o0C&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"
alt="Book Cover for HTML and CSS: Design and Build Websites"/>
</a>
</li>
<li class="author">Jon Duckett</li>
<li class="title">
HTML and CSS: Design and Build Websites
</li>
<li class="publisher">John Wiley & Sons</li>
<li class="date">November 2011</li>
<li class="isbn">ISBN: 1118008189</li>
</ul>
</li>
Is there a universal way with CSS to format this?
There are many ways to achieve this. I do want to mention before proceeding that #Tom Faltesek raises a good point. If you have any control over the HTML code, it would be best to approach this with more semantically accurate markup. If, for example, you had the freedom to arrange it this way...
<article class="book">
<div class="book__info">(...)</div>
<div class="book__thumbnail">(...)</div>
</article>
...then your CSS could be done in this way:
.book {
font-size: 0;
}
.book__info,
.book__thumbnail {
display: inline-block;
font-size: 1rem;
}
.book__info {
width: 75%;
}
.book__thumbnail {
width: 25%;
}
Explanation: Inline-block elements naturally follow each other because they are like block elements that display inline with the text. That in mind, setting font-size: 0; on the parent avoids the natural text space that would normally appear between the elements, so that 25% + 75% only spans 100% of the width without extra text spaces between. Remember to reset your font-size on the inner elements with this trick, though.
However, in the way that you are asking this question, I assume you may not have control over this HTML structure. #Gildas.Tambo 's answer will work, visually, but there are challenges that come with floats. The main issue is that float removes an element from the document's flow, so it does not contribute to the height of it's parent. That means the parent has the potential to be 0 pixels high even if its contents are 500+ pixels high. This can cause all sorts of weird buggy layout issues when you get into more involved css.
This seems like a good use case for CSS Grid. At this point, pretty much all the major browsers support it, and it's a hell of a good weapon to have in your arsenal.
Have a look at the code below. Use grid-template-areas to quite literally mock up your layout in the form of words to correspond with elements (in this case, each of your <li>s) and you can span across multiple rows with one element by assigning it to the entire grid area. In the example below, I provided 5 rows and marked the left column as "info" and the right column as "thumbnail", and then to take up all the available space for thumbnail, I just assign .bookcover to it with grid-area: thumbnail;. Don't worry too much about the fancy stuff I did with grid-template-rows, but know that you can use that property to distribute the height of each row.
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
.book ul {
display: grid;
grid-template-areas:
"info thumbnail"
"info thumbnail"
"info thumbnail"
"info thumbnail"
"info thumbnail";
grid-template-rows: repeat(4, auto) 1fr;
}
.bookcover {
grid-area: thumbnail;
}
<li class="book">
<ul>
<li class="bookcover">
<a href="https://rads.stackoverflow.com/amzn/click/com/1118008189" rel="nofollow noreferrer">
<img src="https://books.google.com/books/content?id=aGjaBTbT0o0C&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"
alt="Book Cover for HTML and CSS: Design and Build Websites"/>
</a>
</li>
<li class="author">Jon Duckett</li>
<li class="title">
HTML and CSS: Design and Build Websites
</li>
<li class="publisher">John Wiley & Sons</li>
<li class="date">November 2011</li>
<li class="isbn">ISBN: 1118008189</li>
</ul>
</li>
You can use float - CSS:left and display : block
.book li{
display: block
}
.bookcover{float:right}
<li class="book">
<ul>
<li class="bookcover">
<a href="https://rads.stackoverflow.com/amzn/click/com/1118008189" rel="nofollow noreferrer">
<img src="https://books.google.com/books/content?id=aGjaBTbT0o0C&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"
alt="Book Cover for HTML and CSS: Design and Build Websites"/>
</a>
</li>
<li class="author">Jon Duckett</li>
<li class="title">
HTML and CSS: Design and Build Websites
</li>
<li class="publisher">John Wiley & Sons</li>
<li class="date">November 2011</li>
<li class="isbn">ISBN: 1118008189</li>
</ul>
</li>
Situation, such a menu:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
When I hover "LANGUAGES" I need to show up the other :
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
Necessary to make it work on CSS, JQuery or without JavaScript. Here's a version does not work:
.hover_top_right_menu {
display: none;
}
It's a wrong line
.top_right_submenu: hover, hover_top_right_menu {
display: visible;
}
You have some typos in your css
by default the element .hover_top_right_menu should have display: none. When you hover the submenu then you change its display (with display: block).
.hover_top_right_menu {
display: none;
}
.top_right_submenu:hover .hover_top_right_menu {
display: block;
}
Anyway this css is based on the assumption that the language list is nested into .hover_top_right_menu element, e.g.:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
As a side notes:
Unless you need to have an action on click event, the link around "LANGUAGES" is not necessary for the example
you're using empty markup, probably for styling purpose only. If you need to have an icon just place it as a background of that list-item (or as content property of its :before pseudoelement)
I have a links navigation that drops down on hover (which works fine) then slides right on hover of the li ul li element.
HTML:
<div id="main-links">
<div id="main-links-content">
<ul class="topnav">
<li><a class="link active" href="index.php">Aberdeen Taxis</a></li>
<li><a class="link" href="#!">About Us</a>
<ul class="dropdown">
<li>Who are we?
<ul>
<li>Meet the team</li>
</ul>
</li>
<li>Why use us?
<ul>
<li>Health & Safety Policy</li>
</ul>
</li>
<li>Our commitment to the environment
<ul>
<li>Environmental Policy</li>
</ul>
</li>
</ul>
</li>
<li><a class="link" href="#!">Our Services</a></li>
<li><a class="link" href="#!">Our Tours</a></li>
<li><a class="link" href="#!">Our Fares</a></li>
<li>Online Booking
<ul class="dropdown">
<li>Cash Booking</li>
<li>Account Booking</li>
<li>Credit Card Booking
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li><a class="link" href="#!">Contact Details</a></li>
</ul>
</div>
</div>
The JSFiddle link: http://jsfiddle.net/mrnaysilva/3Ucd4/
I believe the problem is here (but I may be wrong):-
#main-links-content ul ul ul {
left: 100%;
position: absolute;
top: 80px;
width: 180px;
max-width: 200px;
}
Basically I have set a width and top position. What I want to happen is that the width is set to auto, but when I set this to auto it doesn't set a width according to the paragraph text that's inside it. Also, because I have set a top position, it is always displaying the side menu on the bottom li, where as I want this to display to the right of the li element that is hovered.
i.e. If I hover over About Us and then hover over Who are we?.. Meet the team should display to the right of Who are we?.
I'm just unsure how I can achieve this.
The problem
The main problem that isn't working is the position: relative; of the sub <li> elements.
This is because you use display: table-row;
As stated in the specs:
The effect of 'position:relative' on table-row-group,
table-header-group, table-footer-group, table-row, table-column-group,
table-column, table-cell, and table-caption elements is undefined.
source: http://www.w3.org/TR/CSS2/visuren.html#propdef-position
How to solve this?
Well you can just use an element inside the table-row that will have the position: relative; property:
<li>
<div class="dropdownWrap">
Our commitment to the environment
<ul>
<li>
Environmental Policy
</li>
</ul>
</div>
</li>
Where the css of the .dopdownWrap is:
.dropdownWrap
{
width: 100%;
height: 100%;
position: relative;
}
jsFiddle
Note that i only did this with the "About us" tab.
Some notes about the javascript
You can just find the direct child element with the > selector. This way you don't have to exclude elements with the .not() function. More info here
Instead of defining .slideUp() and .slideDown() seperately, you can define them in one line ( this is because your speed of the animation is the same) with slideToggle.
Some notes about the css + html
If you're assigning classes and IDs to your elements you might as well use them in your css. For example: you never call the class .dropdown in your css. There are more of these IDs and classes that are never used.
Hope this helped you!
Edit
The jQuery UI function slide will function as this, because it will only play the mouseout function when the mousein function has completed. Normally you could cancel the previous animation with .stop(). But seems that jQuery UI slide doesn't support this. So i suggest you to just use plain jQuery for this:
$("#main-links-content li ul li").hover(function () {
$(this).find(' > div > ul').stop(true).animate({left: "100%"}, 300)
}, function () {
$(this).find(' > div > ul').stop(true).animate({left: ""}, 300);
});
Here a great article for this: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
I also added the .stop() function to the dropdown menu to fix any delay bugs.
jsFiddle
You may want to look at css transition, as it basically acts the same as you did now.
Here an css transition example: jsFiddle
The first slideToggle is not done in css as it easier and 'better' in jQuery(With css there wouldn't be a dynamic height, which would result in delay in animation).
I am trying to define two menu's in my header using the bootmetro framework. The first is my main menu and the second is my user menu.
For some reason the menu is visualized wrong the second time, the line space of the menu items are too large.
The code used to create a menu looks something like this
<div class="dropdown">
<a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
Actions
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li class="divider"></li>
<li>item4</li>
</ul>
</div>
The problem I run in to is shown in the screenshots below. In my second menu the menu item does not take the full with of the menu.
UPDATE:
The problem seems to be in the bootmetro CSS stylesheet and firebug narrows the search a bit (thanks Thanh Trung!). In inspect mode I can clearly see that the a href does not fill the menu item (li) in my second menu, while it does take the max width in my first menu.
The part in the bootmetro CSS looks like this:
.dropdown-menu li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}
Additional question: What does this '>' cause? I have never seen that before.
In both menus the CSS class "dropdown-menu" is used, BUT, when I remove the body of this CSS class only the first menu changes accordingly.
Main question: So why is this class not properly inherited by me second menu item?
For completeness again the HTML code for the second menu (the menu that shows the artifact):
<div class="dropdown pull-left">
<a class="header-dropdown dropdown-toggle pull-right" data-toggle="dropdown" href="#">
<b class="icon-settings"></b>
</a>
<ul class="dropdown-menu pull-right">
<li>Settings</li>
<li>Settings</li>
<li>Settings</li>
<li class="divider"></li>
<li>Log out</li>
</ul>
</div>
Correctly visualized menu
Wrongly visualized menu
Inspection: the "a" is not taking the full width
Inspection: the list item is taking the full width
Because the code is identical, but there are difference when displaying, it means that the css is affecting it. Without given us the css, it's impossible to tell what is the problem.
Here are css properties that could affect the total height of an element: height, line-height, padding, margin.
You can use Firebug or Chrome inspector to inspect an element to see its styles
UPDATE
bootmetro.css line 2018 is affecting (overriding) it
#top-info a {
display: inline-block;
height: 46px; /**** should be removed or override *****/
color: #5A5A5A;
}
Also I suggest you to use Firebug (an addon of firefox) to inspect elements, dont use the inspector of Firefox
I'd like to have a logo (say it's square for simplicity) with 4 links that pop up when it is moused over. These would be positioned Above, Below and to the sides of the menu/logo.
Is this achievable with only CSS? Any suggestions for how one might go about doing it?
Semantically I'd like to order them with in the page something like:
<ul><li>Logo
<ul><li class="north">North</li>
<li class="west">West</li>
<li class="east">East</li>
<li class="south">South</li>
</ul>
</li>
</ul>
But have them show up on the page like:
North
West Logo East
South
Yes.
HTML
<ul><li>Logo
<ul id="map"><li class="north">North</li>
<li class="west">West</li>
<li class="east">East</li>
<li class="south">South</li>
</ul>
</li>
</ul>
CSS
#map li a {
display: none;
}
#map li:hover a {
display: block;
}
Note that IE6 won't fire the :hover pseudo class on anything but links (you might want to change your markup).
Also simply use absolute positioning to position the popups.
See the general idea here.