enter image description here
Please how can I resize to normal checkmark icon for a webpage on css, I'm a newbie I have no idea on how I could get the icon to look smaller
enter image description here
I don't have any idea how to resize the icon, I just know how to place the image in my list items
Maybe something like this will work
li {
list-style: none;
padding-left: 30px;
background-image:url("https://www.svgrepo.com/show/35641/dot.svg");
background-repeat: no-repeat;
background-size: 20px;
}
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
Related
The first situation I have with my website is the border bottom of my navigation bar. I have tried changing the box-sizing to border-box but it still doesn't work. I want the border to be 100% width of the browser.
Second, I'm trying to create a responsive menu for both tablet and mobile changing my list items into a hamburger slider. Right now, it is awkward since my header image is floated left, and when i put in the hamburger menu, it does not jump below the logo even after i put clear both. Also, the border of the li is messed up, I want it to fill the width of the screen..
I have yet to put the javascript for the menu icon yet, I don't want to continue until I find a fix to these problems please help :(
html:
<header>
<img src="images/brand.png" alt="George Designs Logo" class="brand">
<img src="images/menu.png" alt="menu" class="menu-trigger">
<nav class="nav-menu">
<ul class="clearfix">
<li>Home</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
The css is in the js fiddle
Here is the full project:
http://jsfiddle.net/ntnzz1fj/2/
You have set some margins which are unwanted on mobile or tablet deives.
You need to remove them for mobile devices in order to have a full width menu.
#media screen and (max-width: 768px) {
.nav-menu {
margin: 0;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
margin-right: 0;
}
}
JSFiddle DEMO
Also remove the browser default margin.
body {
margin: 0;
}
As for making elements fit the whole width of the screen, this combination will ensure it's a block element.
.myElement {
margin: 0;
padding: 0;
display: block;
}
Make to include margin: 0; on the body as well. I would recommend using Normalize.css before your main stylesheet. This normally prevents a lot of common kinks in styling.
http://necolas.github.io/normalize.css/
Preface: Experienced coder, VERY new to CSS.
I've designed a website that uses a wrapper and has a horizontal banner that I want to fill with links on the top (Like retail sites that have their categories listed along the top).
I've placed all the links in a toplink class, and I have set position:relative;. My goal was to position them using top: and left:, and then space them out by setting all of their padding-left's to a certain degree. It seems when I do that, however, the last 2 links always jumps off the wrapper and moves to the left of the whole wrapper.
Any better ideas on how to implement this? I don't need solutions necessarily, just some ideas on how to move in a better path.
Assuming some simple markup like this:
<ul id="nav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
</ul>
1) To space out links use text-align:justify with a pseudo element after it with 100% width
FIDDLE
(Resize browser window and also see what happens when you add/remove a list item from the markup)
CSS
#nav {
text-align: justify;
min-width: 500px;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
}
2) If you're looking for the links to expand/contract - you should use css tables for this
FIDDLE
(Resize browser window and also see what happens when you add/remove a list item from the markup)
CSS
#nav {
display:table;
table-layout: fixed;
width: 100%;
}
#nav li {
display: table-cell;
height: 25px;
background: beige;
border: 1px solid brown;
text-align: center;
}
Try getting rid of the position:relative and the top:0; left:0; stuff and use float:left on the anchors instead.
You don't position: relative or float: left to align them horizontally.
Anchors are inline elements so they'll align horizontally anyway. However, you could add some padding to visually separate them.
My webpage I'm building has a right aligned unordered list nav menu, and I want the bullets to align with one another to the left of the menu. I was able to accomplish this in Chrome and IE by putting the list inside its own DIV; the bullets are displayed outside the div,so I can control their distance from the list by changing the DIV width. In Firefox, however, the bullets are displayed inside the DIV, and I do not appear to have a way to control them.
See the difference here:
http://s106.photobucket.com/user/El_Ornitorrinco/media/fftrouble.png.html
What's with the discrepancy? Is there a simple solution, or do I need a completely different approach? Thanks for your time.
Ricky
Used to this Code
Define you a tag display:block; and text-align:right; as like this
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
Css
ul li, ul{
list-style:square;
}
ul{
width:400px;
}
li a{display:block;text-align:right;}
Live Demo
Is this what you are looking for?
<ul>
<li>Milk></li>
<li>Eggs></li>
<li>Cheese></li>
<li>Vegetables></li>
<li>Fruit></li>
</ul>
CSS goes here
ul
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: right;
}
li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
}
If not then please create fiddle for it.
I have the unorder list like so...
<div class="social">
<ul>
<li>Find Me <img src="images/facebookGrey.png" width="50" border="0" style="vertical-align:middle;" class="facebook" /></li>
</ul>
</div>
and what I am trying to do is setup a hover so when the user hovers over that list item the image changes.
here is the css I have tried..
.social ul img.facebook a:hover{
background-image:url(images/facebook.png);
width:50px;
}
any ideas?
It should be:
.social ul a:hover img.facebook
since the image is inside the anchor.
However, it may be better to remove the img tag all together and just use the anchor and set it's background-image property.
The image is inside the link, not the other way around. Also, you can't change the source of the image via CSS. Setting the background will work, but the source will be on top of it. From the looks of your image names, you won't see any effect.
Try something like this:
<div class="social">
<ul>
<li>Find Me</li>
</ul>
</div>
.social ul a {
background-image: url(images/facebookGrey.png);
background-position: center right;
background-repeat: no-repeat;
padding-right: 60px;
}
.social ul a:hover {
background-image: url(images/facebook.png);
}
You are confusing background images with actual images.
Set the background image of the <a> to images/facebookGrey.png, and then change the background image on hover.
well i am not good with CSS menus.... i need TO MAKE THIS but was unable to align text to the bottom of listli
so it tried to do this with tables.. i was thinking Display Block is gonna solve my problems but turned out it didn't... you see in the jsFiddle example that i posted, when mouse is on the top areas of cell the link doesnot work which is true because there is no link there... can somebody please tell me how to convert it to CSS Menu
I would suggest making the menu with an unordered list instead of tables. Something like this:
HTML:
<ul id="my_menu">
<li>Name of Page 1</li>
<li>Name of Page 2</li>
<li>Name of Page 3</li>
<li>Name of Page 4</li>
</ul>
CSS:
ul#my_menu, ul#my_menu li {list-style: none;}
ul#my_menu li {display: block; float: left; width: 100px; height: 100px;}
ul#my_menu li a {display: block; text-decoration: none; color: #ccc; background: url('url_of_gradient') repeat-x; padding: 70px 10px 10px 10px; width: 80px; height: 20px;}
ul#my_menu li a:hover {background: url('url_of_hover_gradient') repeat-x;}
Try something like this, setting a gradient image (you'll have to make this) as the background on the links. Then create another image for the hover state. You'll also have to tweak the heights and widths to your liking.
This shouldn't require any javascript.
Here's a CSS menu generator that can get you started, I used it a while ago and it did fine for my project :)
Suckerfish dropwdown generator.
More:
My CSS Menu
Wonder Webware
Pure CSS Menu
The list goes on...
Hope it helps :)