I am doing a project where we are learning how to design the google homepage. My code is here: http://jsfiddle.net/HgpQW/ . I realize that my work is far from complete, but I am hoping somebody can just help me with one thing: why can't I expand the "SIGN IN" element? I have tried to do so with setting width and height in the css, but it has no effect.
<header>
<ul id="headerlist">
<li>+You</li>
<li>Gmail</li>
<li id="grid">
<li id="sign_in">
<div id="sign_in">
<span>SIGN IN</span>
</div>
</li>
</ul>
</header>
__
body {
font-family:sans-serif;
font-size: 12px;
letter-spacing: .5px;
}
header {
position: absolute;
right: 0;
top: 0;
margin-top: 11px;
}
ul {
list-style-type: none;
}
li, li div {
display:inline
}
#headerlist li {
padding-right: 6px;
}
#sign_in {
display:block;
background-color: #DA4531;
color: white;
height: 35px;
width: 80px;
}
EDIT: the solution was inline-block on the #sign_in li
<div> elements normally have display:block; applied but you must have somehow changed this to display:inline;
If you didn't do this yourself, it might have been a boilerplate CSS that you used that caused this.
To be able to adjust the width, change the display to:
display:block;
or this will also work and may be preferable if you previously found a need to remove the default block display:
display:inline-block;
Another possibility could be that your div is contained within another div and that parents divs overflow is set to hidden.
Without a link to a specific fiddle, it's hard to answer your question specifically. Just from your description, I'm guessing it might need this css:
display: block;
Related
I am trying to clone google's home page.I Started from the footer of the page and got stuck at the alignment of the links in the footer.
my html code:
<div class="footer">
<hr >
<footer >
Advertising
Business
About
Privacy
Terms
Settings
</footer>
</div>
my css code :
.footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
footer{
background-color: #F4F6F7;
height: 45px;
}
hr{
border-color: #CCD1D1;
margin-bottom: 0px;
}
.advertising, .business, .about, .privacy, .terms, .settings{
color: #909497;
font-size: 1.2em;
margin-top: 11px; //THIS LINE.
}
.advertising, .business, .about{
margin-left: 40px;
}
.privacy, .terms, .settings{
margin-right: 40px;
float: right;
}
can anyone tell me, why the line "margin-top : 11px" is not applied to the first 3 links in the footer(advertising,business,about). Screenshot of footer:
Although the above answer will work, a better solution is this:
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
footer {
background-color: #F4F6F7;
height: 45px;
}
hr {
border-color: #CCD1D1;
margin-bottom: 0px;
}
.align-left {
float: left;
}
.align-right {
float: right;
}
.footer-links {
list-style-type: none;
}
.footer-links li {
display: inline;
}
.footer-links li a {
color: #909497;
font-size: 1.2em;
margin: 11px 20px 0px;
}
<div class="footer">
<hr/>
<footer>
<ul class="footer-links align-left">
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
<ul class="footer-links align-right">
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
</ul>
</footer>
</div>
By putting the links into separate menus, it allows you to very quickly add and remove links in the future without messing around with CSS classes.
This fixes any margin errors you are having as well, as we're declaring that every anchor tag has a margin-top of 11px. You'll also notice instead of having 40px margin-left and margin-right, I've set each side to 20px which will give the same effect.
You can also use the .align-left and .align-right classes elsewhere in your HTML instead of declaring it in CSS for every class.
There's no need to give each link it's own class when they all have the same style. But if you wanted to highlight a particular link you'd naturally just add a .highlight class onto one of the anchor tags and specify the styling in CSS.
This method also gives full browser support. Flexbox is a little temperamental on IE as I write this.
Hope this helps!
You need to add float:left to your first three links, as you have applied float:right on the last three.
.advertising, .business, .about{
margin-left: 40px;
float:left;
}
I ran it through codepen,it worked when I applied the margin 11px to all elements using the footer as a selector
I also would recommend using flexbox, its alot easier to use, here is an example
`http://codepen.io/HTMLanto/pen/gmNedQ`
Cheers !
I'm trying to make a drop down menu but the hover is not producing the desired display effect. I just want the drop down menu to display when the mouse hovers over the list element. I'm new to HTML and CSS, so I can't pinpoint my error.
The relevant HTML:
#strip{
width: 950px;
height: 28px;
background-color: #2c276d;
font-size: 10pt;
}
.strip{
margin:0;
padding: 0;
}
.strip li{
list-style-type: none;
float: left;
}
.strip li a {
color: white;
text-decoration: none;
display: block;
text-align: center;
width:140px;
height:23px;
padding-top:5px;
border-right: 1px solid #FFFFFF;
}
.strip li.shrt a{
width: 145px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropcmpy {
display: none;
position: absolute;
background-color: #2c276d;
font-size: 10pt;
width: 145px;
}
.dropcmpy a {
color: white;
display: block;
text-decoration: none;
padding: 5px;
border-top: 1px solid #FFFFFF;
}
.strip li a:hover{
background-color: #28A2D5;
}
li.shrt:hover .dropcmpy {
display: block;
}
<div id="main">
<div id="strip">
<ul class="strip">
<li class="shrt">Com</li>
</ul>
</div>
<div class="dropcmpy">
Key
Ad
Fac
Car
FAQ
</div>
</div>
No matter how I format that last piece of CSS, it doesn't produce a drop down menu, unless I do
#main:hover .dropcmpy {
display: block;
}
or give the first div a class, and then use that. Otherwise the dropdown menu will not appear. This presents the issue that the entire strip will then produce the menu, while I want only the shrt to.
As john stated, selector .class1 .class2 is targeting an element with class="class2" that is a child of an element with class="class1".
which means you need to put the dropdown menu INSIDE the element, thats supposed to show the dropdown when hovered.
Usuall way is using another list inside the button, for example
<div id="main">
<div id="strip">
<ul class="strip">
<li class="shrt">
Com
<ul class="dropcmpy">
<li>Key</li>
<li>Ad</li>
<li>Fac</li>
<li>Car</li>
<li>FAQ</li>
</ul>
</li>
</ul>
</div>
</div>
and css
.dropcmpy {display: none;}
.shrt:hover .dropcmpy {display: block;}
That should do it, hope it was helpful :).
In order to show an object on hover with css, that object must be the sibling or child of the thing being hovered (As there are no parent selectors). This is not the case in your code.
So you have a few options:
Make div.dropcmpy a child of li.shrt. (As in Teuta Koraqi's answer)
Hack. Use an empty pseudo element (.dropcmpy::before) and absolutely position it over li.shrt, then use that as the hover element.
Use javascript
I don't know what the structure of your page is so can't say which of these would be best for you. The first is certainly the cleanest if you can manage it.
The problem is with inheritance. The last block that you are trying to use is looking for a .dropcmpy element that is a child of .shrt (which obviously doesn't exist). The reason the alternative works is because .dropcmpy is a child of #main.
I don't see any issue with using #main as the hover listener, since everything related to the dropdown is contained in it anyways.
After a reminder from #JohnCH, I realized you could do a sibling selector like this to get the functionality I think you want.
#strip:hover+.dropcmpy {
display: block;
}
I cannot work out why the browser is not allowing me to set a margin-top or padding-top on a DIV to allow me to center the text.
HTML -
<div id="header">
<div id="Nav">
<div id="navright">
Home
About Us
Contact Us
Find Us
</div>
</div>
</div>
CSS -
#nav {
width: auto;
position: relative;
}
#nav a {
margin-left: 5px;
margin-right: 5px;
text-decoration: none;
font-family: "Arial";
font-size: 14pt;
color: #ffffff;
position: relative;
margin-top: 10px;
}
Result -
Any ideas where I am going wrong? Thanks
You are writing Nav nog nav
Html code should be:
<div id="nav"> not <div id="Nav">
Thats why your css doesn't work on the div
And use line-height for your a
#nav a {
line-height: (pixel height of the li or nav);
}
Working JsFiddle here
try to add display:inline-block; in you links
#nav a {
...
display:inline-block;
}
and rename <div id="Nav"> to <div id="nav">
add display: inline-block; to your a tag
demo
and obviously correct your typo Nav to nav.
#nav a {
text-decoration: none;
font-family: "Arial";
font-size: 14pt;
color: #ffffff;
position: relative;
height:25px;
line-height:25px;
margin:5px;
display:inline-block;
}
If you want the margin-top to appear you'll have to declare display: inline-block for the <a> elements, as someone already pointed out. If you want the text to be vertically centered, though, you could also work with something like line-height: 50px;.
Here's a fiddle to play with.
And you should of course correct the misspelling of your CSS selector or the HTML id attribute as mentioned by several users.
Add
display:inline-block
in #nav a
just add line-height as same as the height of your nav <div>
And do correct the typo error.
eg:
#nav {height:20px; float:left;}
#nav a {line-height:20px;}
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Navigation hyperlinks only work when mouse is on the text
Can you set a link to the whole width of an < li > instead of just where the text is?
This is what I mean, I want the user to be able to click on anywhere on the button and go to the link and not just the text: http://jsfiddle.net/b7S4L/
One of the problems is that I cannot use display: block; because I have a number after the < a > link for example (1)
Don't style the LI at all, (other than float:left and clearing padding, marging and list-style-type) if needed. Put all styling on the A (and use display:block).
I don't want the number on the right to be on a seperate line that's
the problem, it should be on the right of the Text
I think I understand what you're trying to do here. Though, I'm not sure because your question has been quite confusing..
First, do set display: block on the a. That is the right thing to do here.
Then, move the number inside the a, and add a span inside:
<li class="cat-item cat-item-147">
<a href="http://test.vps.graenseguiden.dk/newscat/food/" title="Vis alle indlæg i kategorien Food">
<span>Food</span> (4)
</a>
</li>
Then, some extra CSS is needed. You should merge the new CSS with what you already have - for the demo, I've added it within the HTML pane for simplicity (marked with <!--new css right here-->):
http://jsfiddle.net/thirtydot/b7S4L/3/
div.gg_newscats li a {
display: block;
padding: 16px 0;
color: #333
}
div.gg_newscats ul li {
padding-top: 0;
padding-bottom: 0
}
div.gg_newscats li a span {
color: #cc0014
}
div.gg_newscats li a:hover {
text-decoration: none
}
div.gg_newscats li a:hover span {
text-decoration: underline
}
The messing around with span and :hover is to keep the colour and underline exactly as you had it.
Anchor tags by default are inline boxes, which means that they don't fill their parent entirely (they don't take all the space) and they shrink only to fit their content. Thus you should use this CSS to make'em fill the space of li element:
li a
{
display: block;
height: 100%;
}
Also keep in mind that you should remove any padding from the li elements and remove margins of a elements. This way, border of anchor tags meet borders of li tags. For an example, look at links of Thought Results.
One solution I tend to use is to make the <a /> element within a <li /> element blocklevel with
display: block;
After that removing any padding you specified on the <li /> element and add it on the <a /> element instead and you should get the same visual output, but with the entire <li /> as a link
While you can manage this with jQuery, you can also use simple CSS for most browsers:
<style>
ul { width: 200px; background: #ccc; }
li { line-height: 3em; }
a { display: block; width: 100%; height: 100%; padding: 5px; }
</style>
<ul>
<li>This is a link</li>
</ul>
Add display:block; to the style and you're all set!
EDIT
Eh, didn't see the jsFiddle example. If you remove the top/bottom padding from the LIs and put it on the As, plus put the count in a SPAN within the As, these rules will achieve the desired result:
div.gg_newscats a {
display: block;
height: 100%;
padding: 10px;
}
div.gg_newscats a span {
color: black;
}
div.gg_newscats ul li {
float: left;
font-size: 13px;
margin-left: 2%;
margin-top: 2px;
text-align: center;
width: 30%;
padding: 2px;
}
Sample HTML:
<li class="cat-item cat-item-148">
<a title="Vis alle indlæg i kategorien Electrical" href="http://test.vps.graenseguiden.dk/newscat/electrical/">
Electrical
<br>
<span>(1)</span>
</a>
</li>
Edit 2
new code... a lot simpler... only thing that didn't go the way I liked was that the text-decoration of the link had to go.
.cat-item
{
padding: 0px;
}
.cat-item a
{
padding: 13px 0px 13px 0px;
}
.cat-item span
{
margin-left: 5px;
color: black;
}
.cat-item a:hover
{
text-decoration:none;
}
I had to change the markup just a little (put the numbers in a span) but other than that it wasn't too much
demo here: http://jsfiddle.net/ZW6uV/1
had to tack on !important because of a conflicting imported style sheet.
Edit
Readers Digest version: Don't put your padding on the <li> ... ever. Put padding on the <a> within the <li> and then it will fill the empty space and have the same effect but be able to handle the click also. -snip-
Yes just remove any padding from the LI element and push out the padding as needed on the anchor tag
<li class="link-wrapper">
<a href="http://this.com" >Go Here</a>
</li>
CSS
.link-wrapper{
margin: 0;
padding: 0;
}
.link-wrapper a{
display: block;
padding: 3px 5px;
}
Since you are using jQuery, you can do it this way:
$("li.cat-item").click(function () {
$("a", this).click();
return false;
});
I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?
#nav {
background-color: #181818;
margin: 0px;
overflow: hidden;
}
#nav img {
float: left;
padding: 5px 10px;
margin-top: auto;
margin-bottom: auto;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0px;
background-color: #181818;
float: left;
}
#nav li {
display: block;
float: left;
padding: 25px 10px;
}
#nav li:hover {
background-color: #785442;
}
#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
<div id="nav">
<img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
<ul>
<li>One1</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<div>
<h2>Heading</h2>
</div>
Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.
Define your anchor tag css property as:
{display:block}
Then the anchor will occupy the entire list area, so your click will work in the empty space next to your list.
Make the anchor tag contain the padding rather than the li. This way, it will take up all the area.
Super, super late to this party, but anyway: you can also style the anchor as a flex item. This is particularly useful for dynamically sized/arranged list items.
a {
/* This flexbox code stretches the link's clickable
* area to fit its parent block. */
display: flex;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
}
(Caveat: flexboxes are obvs still not well supported. Autoprefixer to the rescue!)
Use following:
a {
display: list-item;
list-style-type: none;
}
Or you could use jQuery:
$("li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
You should use this CSS property and value into your li:
pointer-events:all;
So, you can handle the link with jQuery or JavaScript, or use an a tag, but all other tag elements inside the li should have the CSS property:
pointer-events:none;
Just simply apply the below css :
<style>
#nav ul li {
display: inline;
}
#nav ul li a {
background: #fff;// custom background
padding: 5px 10px;
}
</style>
here is how I did it
Make the <a> inline-block and remove the padding from your <li>
Then you can play with the width and the height of the <a> in the <li>
Put the width to 100% as a start and see how it works
PS:- Get the help of Chrome Developer Tools when changing the height and width
If you have some constraint where you need to keep <li> structure as is and would like your a tag to take up the full area within the li element you can do the following:
a {
display: flex !important;
width: -webkit-fill-available;
height: -webkit-fill-available;
justify-content: center;
align-items: center;
}
Put the list item within the hyperlink instead of the other way round.
For example with your code:
<li>One</li>