I'm not really good at coding html or css, so I need some help.
In short, when you hover over the triangle, it will display the dropdown menu with the list of options (user control panel, private messsages, etc). What's the best way to achieve this using html, css, etc? If you could provide the code, I'd much appreciate it.
Cheers, Spencer
I can't provide you with all the code, but here's what I think to be a good help.
<div>
Welcome back dude!
<div id="triangle">
<div id="menu">
<!-- Here goes the menu links whatever -->
</div>
</div>
</div>
Please notice that the menu div is contained in the triangle div.
Then in your CSS code, write something like this:
#menu { display:none; position:absolute; }
#triangle { position:relative; }
#triangle:hover #menu { display:block; } /* This is what makes the menu show up. When you hover triangle (or anything in it, like menu) then the menu is visible */
The position attributes will be for the #menu not to alter other elements in the page when it shows.
Then you'll have to make adjustments to the triangle menu, if needed.
Related
Until now I got a webpage with a navigation bar, which is responsible to screensize, all is fine until this point.
But now it becomes a bit strange for me, I want to add a search icon (loupe) in the bottom left hand corner. My idea was to use the "aside" element (or "aside" section?) which is supported in html5, but if I put my icon in this aside element it is not visible. I hope you can help me. here some html code:
HERE IS SOME OTHER CODE WHICH WORKS PERFECT
.
.
.
<!-- Search Icon beginn -->
<aside>
<div class="searchicon">
<img src="img/Searchicon.png" alt="Search" height="30px" width="30px">
</div>
</aside>
<!-- Search Icon end -->
</body>
My plan is that the search icon is always on the left of the webpage (kind of a sidebar), I don't want to cover up the text which is at the site later on.
Thanks to you!
Try changing the z-index in css which will basically move an HTML element forward/backward :
.searchicon {
z-index: 2;
}
/*
Set the value to negative if you want the element to move backwards.
*/
The positioning of HTML elements is controlled in your CSS. In your case this is the searchicon class. You haven't provided the CSS but it might look something like this:
.searchicon {
position: fixed;
left: 150px;
bottom: 150px;
z-index: 2;
}
As a note, the aside element may not be the "most semantic" option based on what you've described. The HTML5 aside is intended to contain content that doesn't directly relate to the pages primary content. For example a sidebar containing related articles.
Hi I have a unordered list where I have a section where theres a list as seen in this code
<li id = "project"> My Projects </li>
Where the id project corresponds too
#project
{
list-style-image:url(link.png);
position:relative;
left:20px;
top:100px;
}
Im wondering on how I can make this link.png clickable. I have found an example where you click a picture and it goes into a link, but im kind of confused what to do here since this is inside of an unordered list ( I dont know any Javascript by the way, just recently started relearning html and css)
The question is WHY would you make only a LI bullet clickable?
Think about a better use experience. Bigger clickable area = total happiness.
Set a left padding to the inner anchors,
Set an equal negative left margin to cover the custom bullet image
#menu li{
position:relative;
}
#menu li a{
display:block;
background:rgba(255,0,0, 0.1); /* demo: to make visible the clickable area */
padding-left:45px;
margin-left:-45px;
}
#li_videos {list-style-image:url(//placehold.it/30x30/af8);}
#li_project {list-style-image:url(//placehold.it/30x30/f0f);}
<ul id="menu">
<li id="li_videos">Videos</li>
<li id="li_project">Projects</li>
</ul>
If you want only your list icon clickable you could do:
<li>
<!-- move me till I overlay the icon list image -->
My Projects
</li>
than using CSS give the li a anchor a size and move it till it overlays completely your list-style-image.
I want an effect where when a user hovers over a certain book image (see below), a checkmark box will pop up to indicate that it will be selected upon clicking. Eventually, I want a person to be able to press alt (cmd on mac) to select multiple books.
Here is the HTML:
<div class="container">
<div class="wrapper">
<div class="upload_div">
<div class="upld_div1">
<ul>
<li>
<div class="book_div"></div>
<div class="book_shdw"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
Here is the current CSS:
.book_div {
background-image:url(../img/book_img.png);
background-size: 67.9px 105px;
border:1px solid #bfc1c4;
width:67.9px;
height:105px;
text-align:center;
margin: auto;
}
.book_div:hover{
cursor:pointer;
background-image: url(../img/book_img.png),
url(../img/check.png);
background-position: relative;
}
I can't for my life figure out how to get another image to go on top of the other upon hover. There are a lot of explanations on SO and other forums on how to get a HTML to combine with a CSS background-image as well as how to change one image into another, but not many explanations on how to get one on the other. Please also note that the check.png should be placed in the top right corner so that it's outside of the div. Please offer any insight! Thanks.
EDIT:
Thanks for the prompt reply Mathias, that was a little typo. I implemented multiple bg-images in the .book_div:hover css but was still unable. When I do that, the cursor changes upon hover, but the second image does not pop up at all. (I've edited the syntax now and will edit these notes in)
You should put the top image first when you declare multiple background images.
I find this article great for explaining the stacking order of background images: http://css-tricks.com/stacking-order-of-multiple-backgrounds/
Hope this helps!
DEMO
.book_div:hover{
cursor:pointer;
background-image: url(./top_image.png), url(./bottom_image.svg);
}
I am trying to put social buttons facebook and tweetmeme in our site. I liked the way it's done in yahoo sites. Please look
Yahoo Link
I looked at yahoo code, but the implementation style is very difficult to understand. It would be great if someone can help me in html/css coding.
Thanks.
Update
This is the code I have so far.. The issues I am having is Yahoo customized the css by changing the facebook and tweetmeme css behavior. Please check the attached image and compare with it. The code I am using is
<a name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a><script
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<script type="text/javascript">
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
Please let me know, can we have exactly they have. I liked the look and feel of that. :)
Thank You.
I solved this for http://www.easynda.com using tips from http://neilgoodman.net/2012/01/14/making-social-buttons-line-up-in-a-row-in-css/ and some refinements.
I started by trying to use margins or padding in CSS to adjust the position of the social buttons, but that didn't work. Each button has slightly different margins and padding, which meant my adjustments never worked right and didn't look the same across browsers.
What's needed is to be able to accommodate the variation between buttons and to get them to stay where I put them in my HTML. The solution to is using floats. Max Design has a nice tutorial on floats with examples here: //css.maxdesign.com.au/floatutorial/introduction.htm.
Following the tips from Neil's site got me to here - but with clear problems.
(I'd post an image, but don't have enough reputation points yet).
The LinkedIn button sits at the top of its DIV while the FB buttons sits in the middle of it's DIV as seen in the first image. There are a couple of issues to note:
a: the FB share button width is minimum 90px per //developers.facebook.co.... All well and good, however, the width is dynamic based on the number of shares one has.
b: there is no margin between the FB share and LI share button -
c: the LI share button needs more width, and dynamic width as it will get it's own count as time goes on.
c: 20 px height is not enough for FB - even thought the FB button is only 20px, the JS adds pixels above the visible button. Also note that the bottom of the count bubble is cut off
d: and most obvious of all, the vertical positioning with LI riding high.
I solved the problem by floating a container holding the buttons with a line-height if 1 and using some CSS to float the buttons displayed inline with a min width, min height, and left padding.
The results are what was live as of the date of this posting (again, need reputation points to post images and more than two links)
Here is my HTML and CSS:
<div class="social-button-container" style="position: relative; z-index: 999;">
<!-- Facebook -->
<div class="social-button fb-like" data-href="http://easynda.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
<!-- LinkedIn -->
<div class="social-button">
<script type="IN/Share" data-url="http://www.easynda.com" data-counter="right"></script></div>
<!-- Twitter -->
<div class="social-button">
</div>
<div style="clear: both;"></div>
</div>
.social-button-container {
/*background-color: red;*/
/**
* This is a nice CSS trick that allows you to clear an element
* without having to add extra elements to your HTML. This helps
* separate content from design, which should always be an architectural
* goal.
*/
float: left;
line-height: 1;
}
.social-button {
float: left;
min-width: 100px;
display: inline;
min-height: 22px;
padding-right: 5px;
}
They are using an unordered list at the elements to show the buttons.
A UL is mostly used to show a list of items vertically but you can use CSS to make the items appear next to each other instead.
<ul>
<li style="display:inline">One</li>
<li style="display:inline">One</li>
</ul>
I think the above would work ok.
All you need to do then is right align it.
<div style="width:400px">
<ul style="float:right">
<li style="display:inline">One</li>
<li style="display:inline">One</li>
</ul>
</div>
Don't forget to use classes instead of inline styles like I have here.
Well, you basically just have to deal with the fact that one is an inline (a) element, the other a block (iframe) element, after that it becomes quite easy, just test that:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#fb_share, iframe {
display: block;
float: left;
line-height: 2em;
margin: 0 1em 0 0;
}
</style>
</head>
<body>
<a id="fb_share" name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
<script>
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js"></script>
</body>
</html>
Put your social media buttons into parent divs and give those divs an id each.
Target the inner iframe elements, e.g:
#fblikeblock iframe, #gplusblock iframe {
vertical-align: top !important;
}
where fblikeblock and gplusblock are the parent divs.
and use this on your parent divs:
#fblikeblock, #gplusblock {
display: inline !important;
position: relative;
zoom: 1;
}
I have some drop down menus that don't seem to be aligning nicely in IE8 - they are aligning well in Firefox 3 and IE7. Specifically, the dropdowns seem to be ignoring my right:0; style. A picture says a thousand words so this is what it looks like:
Misaligned menu http://lh5.ggpht.com/_gXJgvXl6JFY/TEf9v1BmECI/AAAAAAAAAA4/iGF-Wi8CTyU/misaligned%20menu.png
As you can see, the right side of the dropdown should be aligning with the right side of the highlighted "admin" li but it appears to be in the middle.
The important dropdown css styles are:
.ajs-menu-bar .ajs-drop-down {
left:auto;
right:0;
}
The important "admin" li styles are:
.ajs-menu-bar .ajs-menu-item, .ajs-menu-bar .ajs-button {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:relative;
}
And the HTML for that bit is:
<li class="normal ajs-menu-item">
<span><span>admin</span></span>
<div class="ajs-drop-down" style="width: 111px;">
<ul class="section-user-status first" id="user-menu-link-user-status">
... bunch of <li>s
</ul>
</div>
</li>
If anyone could shed some light that would be great, just driving me a bit nuts :(.
Thanks in advance!!!!
Cheers,
Jenny
I would recommend a separate stylesheet for IE8 aimed specifically at the menu. This is the only way to make changes for IE8 and not the other browsers that display fine.
The code below probably isn't exact (with regard to singling out a browser), but it should give you an idea what to do...
<![If lt IE7]>
<link href="ie8.css" type="text/css" rel="stylesheet" />
<![End If]-->
Once you've done that, copy the css for your menu into this file (as is) and change the margins for the drop down:
.ajs-menu-bar .ajs-drop-down {
left:auto;
right:0;
margin-right: 40px !important;
}
If changing the right margin as shown here doesn't work, try setting the left margin to a negative value.
I know, the idea seems ludicrous, but in my research into Liquid Design, I've found that it's sometimes the ONLY way to get something right.
HTH