i am a newbie of html and css.now i want to know other gurus how to layout the above image with html and less css. thank you.
my way:
at first,slice eight small images and one white small background image(the rounded corner image).
the html：
<div id="top" style="width=500px">
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
</div>
<div id="bottom" style="width=500px">
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
</div>
ps:what's the difference of when using those images as background image instead of in img tag . which is better? why?
Use ul with appropriate width and float its li's to the left for example (in case this is a navigation), divs inside a div or divs directly in the body.
This should make it more understandable:
style.css (CSS in the same directory, otherwise in link href should point the path):
ul { margin: 0; padding: 0; width: 500px; }
li { float: left; /* width: 100px - if your images are different size. */ }
HTML:
<!DOCTYPE ...>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en-US" />
<!-- ... -->
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="some js file"></script>
</head>
<body>
<!-- .... -->
<ul>
<li><img alt="Latest News" src="..." /></li>
<li><img alt="Latest News" src="..." /></li>
<!-- .. -->
</ul>
<!-- .... -->
</body>
</html>
Here you go:
http://jsfiddle.net/Wrd7F/
HTML:
<ul>
<li class="link1">Lipsum</li>
<li class="link2">Lipsum</li>
</ul>
CSS:
ul { width: 600px; float: left; }
ul li {
background-image: url("http://i.stack.imgur.com/l2qJt.png");
background-repeat: no-repeat;
width: 137px;
height: 46px;
float: left;
margin: 20px;
}
ul li a {
padding-left: 57px; /* Note: substract this amount from the width */
width: 80px; /* Original width 137px - Substract the amount of padding you want to use on right */
height: 46px;
line-height: 46px; /* Should be same as height if you want text to stay in the middle */
text-align: left;
float: left;
text-decoration: none;
color: #222222;
}
.link1 { background-position: -13px -19px; }
.link2 { background-position: -200px -19px; }
Note that the background positions you do have to put in manually but its not that hard. Firebug helps with this if your image positions in the image document are messy..
You should follow specific style with placing the images in one image document.
Like, all the images horizontally side by side and if you have hover images you put them under those side by side. After youve established vertical or horizontal positioning to the first item for hover and normal states you only have to change one of these values as the other one doesnt change from that point on.
Why to use css backgrounds over <img>:
In a lot of cases its more flexible ( size, padding, style )
Easier to edit ( no need to open photoshop and change the text )
:Hover state ( if you want to define :hover state ( .link1:hover {
background-position: 0px 0px; } ) you dont have to resort to JS. )
Edit: In the CSS i meant to comment: "Substract the amount of padding you want to use on the left"
Edit2: Also note that This may be sort of a bear trap in this case as Limited width and text might get tricky. With rounded borders and all, this would require some trickery to make it more flexible.
first: use these as background image instead of in img tag & it's better if you use sprites for this .
second: use list style for this & give float:left to it
<ul>
<li>wew</li>
<li>er</li>
<li>rer</li>
</ul>
css:
li{
float:left:
margin:5px;
}
Here is an example where the icons also stick out of the white boxes like in your screenshot
http://jsfiddle.net/RYAZp/
CSS
ul li {
border: 1px solid #333;
background: #FFF;
border-radius: 10px;
display: inline-block;
padding: 10px 10px 10px 45px;
overflow: visible;
font-size: 15px;
height: 1em;
position: relative;
margin-bottom: 1em;
}
ul li img {
position: absolute;
top: -0.5em;
left: 5px;
}
HTML
<ul>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
</ul>
Related
I need to use an image for my navigation buttons inside of my navigation bar. Right now, I have it set as a color, and when hovered over, it changes color.
However, instead of a color, I need an image. I have sized the button image to the exact height and width as I have set it inside of my css.
For each of the ul's: About Me, Photo Edits, Video Edits, Writing, I must have a button. I have the image and it is correct on its width and height.
Here is my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CHANGE ME!</title>
<link href="css/styles_finished.css" rel="stylesheet" type="text/css" media="all">
<link href="css/mainnav.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<!--Start Container for Whole Site-->
<div id="container">
<!--Start Header Content-->
<div id="header">
<div id="logo">
<a href="index.html"><img src="images/logo.png" width="350" height="80" alt="My
Logo" border="0" /></a></div>
</div><!--End Header Content-->
<!--Start Navigation ontainer-->
<div id="wrapper">
<div id="navMenu">
<ul>
<li>About Me
</li>
</ul>
<ul>
<li>Photo Edits
</li>
</ul>
<ul>
<li>Video Edits
</li>
</ul>
<ul>
<li>Writing
<ul>
<li>Samples</li>
<li>Recognition</li>
</ul> <!--end inner UL-->
</ul><!--End main ul-->
<br class="clearFloat" />
</div> <!--End Navigation Container-->
</div> <!--End wrapper div-->
<!--Start Media Area-->
<div id="media">
<h1>Images/Rich Media</h1>
<p>(470 x 550)</div>
<div id="text">
<h1>Main Body Text</h1>
<p>(470 x 400)</p>
</div><!--End Text Area Here-->
<!--Start Footer Here-->
<div id="footer">
<h1>Footer (50 x 1024)</h1>
<p>
Voo2Do Public Task List
Sitemap Public Image
Wireframe Public Image
</p>
</div> <!--End Footer Here-->
</div><!--End Container for whole site-->
<div id="w3"><!--Start HTML 5 Validation Button Here-->
<p>
<img src="images/valid_html5.gif" alt="Valid HTML 5" height="31" width="88" style="border:0px;" /></p></div><!--End HTML 5 Validation Button Here-->
</body>
</html>
And here is my CSS Code for the Navigation Bar:
#navMenu {
margin:0;
padding:0;
}
#navMenu ul {
margin: 0;
padding:0;
line-height: 30px;
}
#navMenu li {
margin: 0;
padding:0;
list-style:none;
float: left;
position: relative;
background-color: #C0C0C0;
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 35px;
width: 254px;
display:block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility: hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background: #09f;
}
#navMenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
#navmenu a:hover {
color:#000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
I have tried to put url(images/navbutton.jpg) inside #navMenu and that didnt work. No matter what selection I put the image under, nothing happens. And then on top of all that, I also have to have a rollover image for my buttons that is different from my background image. So i'm having two images. One image will be the button, and the second image will appear when hovered over. I'm going cross-eyed, ugh. Can someone please help me?
note I am not using JS or JQ.
Just add the images in HTML instead of CSS, and then style them.
Assuming you don't want the labels "About Me, Photo Edits, Video Edits, Writing"...Just add add this inside your <a> tags:
<img src="/images/about-me.jpg" alt="About Me">
Then in your CSS just target the image:
#navMenu ul li a img { width: 254px; height: 35px; }
You then just need to add any styles for positioning.
For the hover effect, just add another image right next to the first one, add a class to it and then in CSS apply display: none; to that image. On hover of the <a> tag, just display: none; the first image and display: block; the second image.
You will also need to add relative positioning to the containing <a> tag and absolute positioning to the images so that they can sit on top of each other for when you hover on and off of them.
If you would like more specific info please create a codepen or jsfiddle with your current state of things.
I am trying to make list of images act as a horizontal navigation bar. Unfortunately try as I might I cannot get the images to sit next to each other. I have tried eliminating padding, margin and border from each of the nested image, link, list item and unordered list.
The html code is simple
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Menu App</title>
<link type="text/css" rel="stylesheet" href="css/menu.css" />
</head>
<body>
<div id="page-1">content</div>
<div id="footer">
<ul>
<li><img src="img/zone.png" alt="toggle zones"></li>
<li><img src="img/nr.png" alt="toggle nr services"></li>
<li><img src="img/wheel.png" alt="toggle wheelchair access"></li>
<li><img src="img/cycle.png" alt="toggle cycle access"></li>
</ul>
</div>
</body>
</html>
and the css code is as follows
body {
margin: 0;
}
#footer {
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
width: 40px;
height: 40px;
display: inline-block;
overflow: hidden;
cursor: pointer;
margin: 0;
}
li a {
display: block;
}
li a img {
border-radius: 0.2em;
background: #ccc;
width: 100%;
border: none;
}
Extra Details
The natural size of the images is 40px by 40px
When checking in chrome
the size of the image is 40px by 40px
the size of the a tag is 40px by 45px ???
the size of the li tag is back to 40px by 40px
the height of the ul and div#footer are both 45??
there is white space between the grey backgrounds of the buttons
So to summarise I would like to remove the white space and reduce the height of the whole list to the height of the buttons (without forcing it to 40 px) so it still works in my fluid layout
It's because you're treating the <li> elements as inline-blocks. These essentially act and flow as text characters, and if there is white-space between them in the HTML, then white-space will appear next to them on the page as well. You can either set font-size to be 0 within the <ul>, or use display: block and float: left instead to achieve your desired effect.
Add
vertical-align: top
to your
li a img and your li
in order to get rid of that 5px bottom space
To get rid of the horizontal space, set the font-size of <ul> to 0
Using display:inline-block will cause the browser to display whitespace characters around the <li> elements. In order to remove this extra whitespace, you have to do something like this:
<ul>
<li><img src="img/zone.png" alt="toggle zones"></li
><li><img src="img/nr.png" alt="toggle nr services"></li
><li><img src="img/wheel.png" alt="toggle wheelchair access"></li
><li><img src="img/cycle.png" alt="toggle cycle access"></li>
</ul>
As you can see, I'm removing the extra space between the tags.
For more information, see: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Just set the font-size of <ul> to 0 in your CSS
JSFiddle
I'm trying to make a list of images, 2 per row.
The uneven rows (1, 3, 5, etc.) should have a small image first, and a wide one second. The even rows (2, 4, 6, 8, etc.) should have the wide image first and the smaller one second.
I'm now at row 3, and I cannot get the small image to the left for whatever reason. As you can see in the image below it floats to the right.
My code is very basic, and Dreamweaver displays it correctly in its Split function.
HTML:
<div id="portfolio-screen"></a>
<ul>
<li><img src="images/portfolio-jaar1.png" width="228"/></li>
<li><img src="images/portfolio-pr1_2.png" width="500"/></li>
<li><img src="images/portfolio-pr1_4.png" width="500"/></li>
<li><img src="images/portfolio-pvs1.png" width="228"/></li>
<li><img src="images/portfolio-jaar2.png" width="228"/></li>
<li><img src="images/portfolio-pr2_2.png" width="500"/></li>
</ul>
</div>
CSS
#portfolio-screen {margin-top: 8px; width: 768px; height: 602px; background-color:#37322d; overflow: auto;}
#portfolio-screen li {margin-top: 8px; margin-left: 8px; float: left;}
For some reason it is not allowed to post images, so I have supplied a link to one: http://oi51.tinypic.com/b63vkk.jpg
You can try something like this - the CSS height for the images could be removed for your size needs.
HTML
<div id="portfolio-screen">
<ul>
<li>
<img src="images/portfolio-jaar1.png" class="imgSmall" />
</li>
<li>
<img src="images/portfolio-pr1_2.png" class="imgLarge" />
</li>
<li>
<img src="images/portfolio-pr1_4.png" class="imgLarge" />
</li>
<li>
<img src="images/portfolio-pvs1.png" class="imgSmall" />
</li>
<li>
<img src="images/portfolio-jaar2.png" class="imgSmall" />
</li>
<li>
<img src="images/portfolio-pr2_2.png" class="imgLarge" />
</li>
</ul>
</div>
CSS:
img {
height:20px;
}
.imgSmall {
width:228px;
}
.imgLarge {
width: 500px;
}
#portfolio-screen {
margin: 0;
padding: 0;
width: 768px;
height: 602px;
background-color:#37322d;
}
#portfolio-screen ul {
margin: 0;
padding: 15px;
width: 768px;
}
#portfolio-screen li {
margin-top: 8px;
margin-left: 8px;
display: inline-block;
}
#portfolio-screen li:nth-child(odd) {
margin:0;
}
JS Fiddle: http://jsfiddle.net/5qREV/
First, you have a broken </a> in there.
Secondly, make sure your unorder list has Margin and padding of 0
Lastly, mess with JSfiddle:
http://jsfiddle.net/Riskbreaker/NT4DS/10/
Instead of floats try inline-block
I want to align menu text at the bottom of image how to i achieve it?
Expected output:
Image Image Image Image
[menutext] [menutext][menutext] [menutext]
Actual output :
Image[menutext] Image[menutext] Image[menutext] Image[menutext]
my Css Code:
#vilaniHeader
{
margin: 0;
padding: 0;
height: 80px;
background-color: Black;
}
#vilaniHeader h1
{
padding-left: 15%;
font: Arial;
font-size: 30px;
color: #ffffff;
font-weight: bold;
float: left;
}
#vilaniHeader #menu
{
color: #ffffff;
font: Arial;
font-size: 18px;
font-weight: bold;
padding-top: 30px;
padding-left: 30%;
}
#vilaniHeader #menu ul
{
list-style: none;
margin: 0;
padding: 0;
padding-right: 300px;
padding-bottom: 300px;
}
#vilaniHeader #menu li
{
display: inline;
margin: 0 15px 0 15px;
float: none;
text-align:center;
}
#vilaniHeader #menu a
{
text-decoration: none;
color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
color: red;
clear:both;
padding-top:50px;
background-image:url:("Styles/menuHome.png") ;
vertical-align:text-top;
}
and My HTML code
<div id="vilaniHeader">
<h1>
Comany name
</h1>
<div id="menu">
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li><a href="About.aspx">Car</li>
<li><a href="About.aspx">Mobile</li>
<li><a href="About.aspx">OldThings</li>
<li><a href="About.aspx">Matrimoni</li>
</ul>
</div>
</div>
I want menu text should be align at the bottom of the image plese help me to do that.
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.
I prefered to use links within a div but I imagine this will work with an ul
I use a background image that does not show if CSS is disabled
I use a span set displayed as block because a div inside an a tag does not validate
I use a class to place the image but use ids if you want different pics for each link
Change the width + heights to suit your needs
HTML
<div id="nav">
<span class="image"></span><span>About Us</span>
<span class="image"></span><span>Investors</span>
</div>
CSS
#nav a {
display:block;
float: left;
width:100px;
}
.image {
display:block;
background: url("myimage.jpg") no-repeat scroll center center transparent;
height:40px;
width:100px;
}
Make the img a block element so it takes the full width / line-breaks afterwards.
#menu li { display:block; }
That’s all.
I would suggest add some wrapper on text and make image and wrapper both display:block;
You can use span tag as an wrapper for text.
HTML
<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>
CSS
li img, li span
{
display:block;
}
If you want your text to overlay your image, but at the bottom, you should try to play around with the line-height property. That will cause your text to move down, so it will be in the center of it's line.
I have two solutions for you. style1 works for items with text smaller than the image. style2 works for items with text wider than the image. Easiest is to make sure that the images are always wider or smaller than the text, so that you need only one style.
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
#menu .style1 img, #menu .style2 span {
overflow:hidden
}
#menu .style1 span, #menu .style2 img {
display:block
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
<li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
</ul>
</div>
I'm not a span-fan but it seems like you can't do it without here.
BTW, why don't you just add a br?
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
<li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
</ul>
</div>
I guess that's the most easy and reliable solution.
You can do this way, obviously replacing the image sample I used. For the link to work, you can use a jQuery click event on LI, so it searches for the link inside the clicked LI and then opens the desired link.
http://jsfiddle.net/WcePK/
HTML
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Car</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Mobile</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">OldThings</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Matrimoni</li>
</ul>
CSS
LI {
float: left;
margin: 5px;
padding: 50px 10px 10px;
min-width: 100px;
background-repeat: no-repeat;
background-position: center 10px;
background-color: #366D93;
text-align: center;
cursor: pointer
}
<div id="navigation>
<ul class="navlist">
<li><img src="images/btn1.gif"/></li>
<li><img src="images/btn2.gif"/></li>
<li><img src="images/btn3.gif"/></li>
</ul>
</div>
How would I be able to give these "buttons" within the list rollover states without using JS? I'm totally drawing a blank...
These links must be images.
If you're supporting newer browsers (browsers that support the :hover selector on all elements, which is basically everything except IE6, see here) you can do this with CSS provided you change your HTML. You will need to remove the img tags, and instead use background images.
CSS (this is the simple example with 2 images, you'll need to set the height + width. If you have many different images, you'll need a css class for each of them):
<style type="text/css">
.navlist li { width: 32px; height: 32px; background-repeat: no-repeat; background-image: url('images/image1.gif'); }
.navlist li:hover { background-image: url('images/image2.gif'); }
</style>
HTML:
<div id="navigation">
<ul class="navlist">
<li></li>
<li></li>
<li></li>
</ul>
</div>
There's a lot of ways to do this. Basically, move one image off the screen when you hover. Or you could change the z-index of two images on top of each other when you hover, or you could do it with background images, or with the display option.
I prefer using the display option, since the CSS is quite simpple.
Since it's done with classes you can just add as many buttons as you want.
Here's the code for a page that contains the HTML and CSS together.
The DOCTYPE declaration is necessary to make it work in IE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/\xhtml1/DTD/xhtml1-strict.dtd">
<head>
<style type="text/css">
a img {
border:none;
}
ul {
list-style-type: none;
}
img.defaultSt {
display: inline;
}
img.hoverSt {
display: none;
}
li:hover img.defaultSt {
display: none;
}
li:hover img.hoverSt {
display: inline;
}
</style>
</head>
<body>
<div id="navigation">
<ul class="navlist">
<li>
<img class="defaultSt" src="http://mrg.bz/vh60HV" />
<img class="hoverSt" src="http://mrg.bz/CcDOmL" />
</li>
</ul>
</div>
</body>
</html>
You could try using a transparent image as the link primary and then use css to alter the background
<style type="text/css">
a.img1, a.img1:link { background-image: url(images/btn1.gif); }
a.img1:hover { background-image: url(images/btn1_over.gif); }
a.img2, a.img2:link { background-image: url(images/btn2.gif); }
a.img2:hover { background-image: url(images/btn2_over.gif); }
a.img3, a.img3:link { background-image: url(images/btn3.gif); }
a.img3:hover { background-image: url(images/btn3_over.gif); }
</style>
<div id="navigation>
<ul class="navlist">
<li><a class="img1" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
<li><a class="img2" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
<li><a class="img3" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
</ul>
</div>
You just have to keep in mind the size of the images in question.