I am not very familiar with web front-end.
The web designer gave me JPG file it is a bar full of icons.
But what i need is to use these icons one by one.
I don't know if there is a easy way to load a single part from this big picture like:
load_part_from_picture (fileName,oneIconSize=80x80, index=1)
Or i just need to cut these icons into single ones.
My programming language is ASP.Net and C#
Thanks a lot!
ul li {
background-image: url('http://i.stack.imgur.com/3fmAx.png');
background-repeat: no-repeat;
height: 60px;
width: 60px;
display: inline-block;
}
ul li:nth-child(2) {
background-position: -60px 0;
}
ul li:nth-child(3) {
background-position: -120px 0;
}
ul li:nth-child(4) {
background-position: -180px 0;
}
ul li:nth-child(5) {
background-position: -240px 0;
}
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
You can do this with CSS class. This is a optimization technique called CSS sprites. See more here and here
See working Fiddle
.first-icon {
width: 60px;
height: 60px;
background: url('http://i.stack.imgur.com/3fmAx.png') 0 0;
}
.second-icon {
width: 60px;
height: 60px;
background: url('http://i.stack.imgur.com/3fmAx.png') 65px 0;
}
.third-icon {
width: 60px;
height: 60px;
background: url('http://i.stack.imgur.com/3fmAx.png') 125px 0;
}
Use like below in your HTML:
<div class="first-icon"></div>
<div class="second-icon"></div>
<div class="third-icon"></div>
use one common class with separate class with sprite image
.icon{height:30px; float:left; margin-left:10px; width:30px; background:url("icon.jpg") no-repeat;}
.icon.home{background-position:0 0;}
.icon.services{background-position:-40px 0;}
.icon.product{background-position:-80px 0;}
.icon.about{background-position:-120px 0;}
<div class="icon home"></div>
<div class="icon services"></div>
<div class="icon product"></div>
<div class="icon about"></div>
The image given by your designer is called as image sprite.
An image sprite is a collection of images put into a single image.
Using image sprites will reduce the number of server requests and save bandwidth.
Now how you can use it:
<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 65px;
height: 60px;
background-image: url("http://i.stack.imgur.com/3fmAx.png");
background-position: 0 0;
}
#next {
width: 60px;
height: 60px;
background-image: url("http://i.stack.imgur.com/3fmAx.png");
background-position: 65px 0;
}
</style>
</head>
<body>
<img id="home" src="http://www.w3schools.com/css/img_trans.gif"><br><br>
<img id="next" src="http://www.w3schools.com/css/img_trans.gif">
</body>
</html>
NOTE : In <img> tag the image used is 1px X 1px (blank) image so you can see the
image clearly, otherwise the original image is overlap on it. This can
be done using <div> also, if you do not want to use <img>
Here is reference : http://www.w3schools.com/css/css_image_sprites.asp
Related
When I try to size down my desktop screen navigation size of 1440px(90em) to any lower width screen, my navigation bar links start dropping off the screen. I have tried using some media query combinations, but nothing to show for it.I haven't got much experience with frontend, so I am a little bit thin on this side. Any long-term fixes to this one?Any hint on this one will be highly appreciated.
HTML header code:
<!--header-->
<header>
<nav class="nav__bar">
<a href="#" class="logo">
<img src="./images/logo.svg" alt="Sunnyside logo">
</a>
<ul class="nav__links">
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="nav__item">
Project
</li>
Contact
</ul>
<img src="./images/icon-hamburger.svg" alt="toggle menu icon" class="toggle__menu">
</nav>
</header>
CSS header styles:
header {
height: 5em;
position: absolute;
left: 0;
right: 0;
}
.nav__bar {
height: 100%;
width: 90em;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 1 auto;
padding: 0 2em;
}
.nav__links {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.nav__item {
margin: 1em;
}
.nav__link {
text-decoration: none;
font-size: 1.125em;
color: hsl(0, 0%, 100%);
font-family: 'Barlow', sans-serif;
transition: all 350ms ease-in-out;
}
.nav__link:hover {
color: hsl(232, 10%, 55%);
}
.toggle__menu {
cursor: pointer;
display: none;
}
In your example code, you set the color of the link text to white... it's white on white. But that's not fully the problem... you should also remove width:90em from the .nav_bar... it's unnecessary. see this codepen https://codepen.io/aequalsb/pen/jOmyJNp
Just simply allow the <nav> to "be itself"... which is a block level element and naturally attempts to stretch out to fit available width.
padding in CSS Sizes the margin inside a button or element. Try using margin: (how many 'px' it's going off the screen); and I've had this problem before:
SOLUTION 1:
use margin-*left or top*: *px is going off screen*
<style>
#button {
width: 100px; /* the width of the button */
position: absolute;
left: 50%; /* always 50% when centering */
margin-left: -50px; /* minus half the size of the element */
}
</style>
<button id="button">Center of page</button>
SOLUTION 2
i've had this problem before, and in best situations, use position: absolute instead of relative if you are positioning the element.
<head>
<style>
.background {
position: relative;
}
.overlap {
position: absolute;
left: 30px;
}
</style>
</head>
</style>
</head>
<body>
<!-- background-element -->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Circle_Rufous_Solid.svg/1200px-Circle_Rufous_Solid.svg.png" class="background" width="10.5%" />
<!-- Overlap element -->
<img src="https://cdn.onlinewebfonts.com/svg/img_24930.png" class="overlap" width="10%" />
</body>
SOLUTION 3
if none of the above works, consider using javascript: device tester command and redirect to an error page with unsupported devices.
This example will detect a handful of mobile-devices, and if so, it'll redirect to 𝘩𝘵𝘵𝘱://𝘨𝘰𝘰𝘨𝘭𝘦.𝘤𝘰𝘮
<script>
if( /Android|webOS|iPhone|iPad|Mahc|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location.href = "http://google.com";
} else {
}
</script>
NOTE: if there is big problem you cannot solve, and none of these work, its best to do research or find some articles to find your answer. Then consider using stackoverflow.
I am trying to design a weather website. In the body I have a div for my search bar, and then a div below it for the main area with the weather information. The problem is that there is a divider between the two (below the search area and above the main area) How do I get rid of this? I have tried margins but I can't figure out what I'm missing.
As well, I am trying to get these two divs to share one background image
Thanks in advance
<div class="searchArea">
<ul>
<li><div><input type="text" id="search_term" placeholder="Other Location ..."></div></li>
<li><div><input type="submit" value="Check Weather" onclick="findNewWeather()" /></div></li>
</ul>
</div>
<div class="mainArea">
<h1>City Name</h1>
<ul>
<li>
<div>
<h1>Current</h1>
<img src="http://openweathermap.org/img/wn/10d#2x.png" alt="today icon">
<h2>12oC</h2>
<h3>Feels: 9oC</h3>
<h3>Mostly Sunny</h3>
ETC ....
.weatherMain {
margin-top: 1px;
background-image: url("./WP.jpg");
background-size: 100%;
background-repeat: no-repeat;
color: gray;
padding: 25px0px;
display: flex;
flex-direction: row;
height: 600px;
font-family: poiret one;
font-size: 35px;
color: yellow;
font-weight: bold;
}
.searchArea {
background-image: url("./banff.jpg");
background-position: 0 -75;
height: 50px;
margin-bottom: 1px;
}
Given the code you posted above, I think the problem is that your <ul> and <h1> tags have their own margins that are pushing your <div> tags apart.
This should fix the issue:
.searchArea ul {
margin-bottom: 0;
}
.weatherMain h1 { // or .mainArea h1, your example has both
margin-top: 0;
}
To give them one background, I would recommend wrapping them in a <div> and applying the background image to that.
I have the following file and directory structure:
site\
site\index.html
site\background.jpg
site\CSS\
site\CSS\main.css
site\Graphics\
site\Graphics\background.jpg
*NOTE: background.jpg is on the disk in two places.
The problem is the image does not load from the Graphics folder, only the main (site) folder.
HTML:
<body>
<div id='main'>
<div id='header'>
<div id='logoCompany'>
<img class='headerGraphics' src='Graphics\logo smaller.jpg'><img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'>
</div>
</div>
<div id='contentParent' class='floatClear'>
<div id='content' style = "text-align: center;">
<div id='leftPane'>
Left Col
</div>
<div id='rightPane'>
Right Col
</div>
</div>
</div>
<div id='footer'>
Footer
</div>
</div>
</body>
CSS:
* {
margin: 0px;
}
.floatClear {
clear: both;
}
.headerGraphics {
display: inline;
}
#header {
background: #023489;
text-align: center;
}
#logoCompany {
display: inline;
}
#contentParent {
height: 2200px;
width: 100%;
background-image: url(background.jpg);
}
#leftPane {
background: yellow;
float: left;
margin: 100px 0 0 10%;
opacity: .5;
width:40%;
}
#rightPane {
background: green;
float: right;
margin: 100px 10% 0 0;
opacity: .5;
width:40%;
}
#footer {
width:100%;
}
I've tried:
background-image: url(background.jpg) works.
background-image: url(..\Graphics\background.jpg) does NOT work.
background-image: url(Graphics\background.jpg) does NOT work.
Anyone know how to get this to work?
Try this:
background-image: url('../Graphics/background.jpg');
For further reference on relative file paths check out this w3schools page html_filepaths
In the path, just include the "\" in front of anything that is inside (or is itself) a subdirectory.
If it's a file in the same folder and you use the "\" it won't work because it has been instructed to check lower (it will look at your file like it's trying to check a subfolder). If it's supposed to be in the lower folder, just include the "\" before each of the folders (in order, of course) and before the file name.
i'm trying to write a div box with headings and links below to it, but somehow i can't get the links to display next to eachother, i've tried using display:inline, but it did no effect, i've also tried float, position etc, but just can't get what i want without messing up.
my code is here: http://jsfiddle.net/dfc8gceg/2/
<div style="background:#E1ED9D; width: 25%;height:250px; position: relative; float: left;">
<h3 style="text-align:center; margin:0;">I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
<a href="">
<h4 style="background:blue; width:50%; color:#0e8dbc; text-align:center; margin:10% 0 0 0; ">Link1</h4>
</a>
<a href="">
<h4 style="background:orange; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link2</h4>
</a>
<a href="">
<h4 style="background:purple; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link3</h4>
</a>
<a href="">
<h4 style="background:red; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link4</h4>
</a>
</div>
Sorry for the repetition of code, it's because i can't use CSS or put code into head section, only body section of html due to my task requirement,
i would appreciate alot if someone can show me the answer without too much change on my code
I got rid of the h4 tags and used divs instead
http://jsfiddle.net/dfc8gceg/8/
<div style="background:#E1ED9D; width: 50%;height:150px; position: relative; float: left;">
<h3 style="text-align:center; margin:0;">I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
<a href="">
<div id="div1">hej</div>
</a>
<a href="">
<div id="div2">hej</div>
</a>
<a href="">
<div id="div3">hej</div>
</a>
<a href="">
<div id="div4">hej</div>
</a>
</div>
I also added some css to the jsfiddle
you should look more into how to use css and html
Hope this works out for you!
I made a JSFiddle, is this what you were aiming for?
http://jsfiddle.net/dfc8gceg/7/
Here is the HTML
<div id="container">
<h3>I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
<h4>Link1</h4>
<h4>Link3</h4>
<h4>Link2</h4>
<h4>Link4</h4>
</div>
With accompanying CSS
#container {
background: #E1ED9D;
width: 25%;
height: 250px;
position: relative;
float: left;
}
h3 {
text-align: center;
margin:0;
}
a {
display: inline-block;
}
.link {
width: 50%;
color: #0e8dbc;
text-align: center;
display: inline-block;
float: left;
}
#link1 {
background: blue;
margin: 10% 0 0 0;
}
#link2 {
background: orange;
margin: 3% 0 0 0;
}
#link3 {
background: purple;
margin: 10% 0 0 0;
}
#link4 {
background: red;
margin: 3% 0 0 0;
}
I think I achieved what you were looking for.
Hope this helps! :D
PS: I'm a noob at Stack Overflow, did I format this correctly? It wanted the code in the answer so...
EDIT: I kept the H4 elements for you, but feel free to change them (I didn't want to change any of your code, I kept it all just made it neater)
A preferred method would be instead to use an unordered list (<ul><li></li></ul>), and then add css to the list, display: inline; to remove the default block level display. Alternatively, you can use display: block; float: left;, which you would need in order to give a width to the li.
Moreover, you should not be using inline CSS, but rather a stylesheet.
Like this:
CSS:
.container {
background: #E1ED9D;
width: 25%;
height: 250px;
position: relative;
float: left;
}
.container h3 {
text-align:center;
margin:0;
font-size: 14px;
font-family: arial;
font-weight: normal;
}
.list {
width: 100%;
padding: 15px 0 0 0;
margin: 0;
}
.list li {
style-type: none;
display: block;
float: left;
width: 50%;
margin: 15px 0 0 0;
padding: 10px 0;
text-align:center;
}
.list li a {
color:#0e8dbc;
}
#first-link {
background:blue;
}
#second-link {
background:orange;
}
#third-link {
background:purple;
}
#fourth-link {
background:red;
}
HTML
<div class="container">
<h3>I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
<ul class="list">
<li id="first-link">Link1</li>
<li id="second-link">Link2</li>
</ul>
<ul class="list">
<li id="third-link">Link3</li>
<li id="fourth-link">Link4</li>
</ul>
</div>
Also, as above, you don't need the H4s because that is poor coding to put into a menu (what you have is essentially a menu). H4 is better used as a header tag. By instead defining css classes to the LI elements, there is no need for a specific html tag like h4.
EDIT: I improved the CSS code from what I had before. I changed the ID elements to classes (class is used if there will be more elements using the same class), and moved the link classes into the LI. I also changed the li classes to IDs because ID is to be used when it appears only one time on the page. Given the specificity of the IDs, these will likely not be used again. If they are, you should change it back to a class.
jsfiddle: http://jsfiddle.net/Lxyjjfx2/1/
I am going nuts with a whitespace problem inside a div. Two of my divs have unexplained whitespace but a third similar one has none. When I use the compatability mode of IE8 the whitespace disappears so I am guessing it is something to do with the CSS but for the life of me I can't seem to see what.
The page causing the issue is at http://www.infinitedreamers.co.uk/blog/
I have made one of the divs background white to show what I mean.
The snippet of the page is as follows:
<div id="id_front_main">
<div id="id_front_top">
<div id="id_front_top_title">
<h2>Latest Gallery Images</h2>
</div><!--#id_front_top_title-->
<table id="id_gallery_latest"><tr><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_Fae4.jpg" height="100" width="86" alt="Contemplation"/><p class="id_title">Contemplation</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_Fae6.jpg" height="100" width="100" alt="Emo Fae"/><p class="id_title">Emo Fae</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_IOTPM.jpg" height="100" width="88" alt="Invasion of the Saucer-Plushies"/><p class="id_title">Invasion of the Saucer-Plushies</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_StarPlushies.jpg" height="100" width="84" alt="Star Plushies"/><p class="id_title">Star Plushies</p></td></tr></table>
<div id="id_front_top_meta">
</div>
</div><!--#id_front_top-->
<div id="id_front_main_holder">
<div id="id_front_left">
<div id="id_front_left_title">
<h2>3d Art Latest</h2>
</div><!--#id_front_left_title-->
<div class="id_latest_posts">
<h3>Getting Started in 3d Art for free</h3>
<span>
<p>You want to create 3d art on the PC or Mac? This is a quick guide on how to achieve this for free.</p>
</span>
</div><!--id_latest_posts-->
<div id="id_front_left_meta">
</div>
</div><!--#id_front_left-->
<div id="id_front_right">
<div id="id_front_right_title">
<h2>Software Latest</h2>
</div><!--#id_front_right_title-->
<div class="id_latest_posts">
<h3>Poser Files Database</h3>
<p>Poser Files Database is designed to aid in the cataloging of content for Poser, DazStudio, Vue, and other similar 3D tools. It can be used simply as a way to find a particular file or to provide detailed information about all products in one location.</p>
<h3>File Renamer</h3>
<p>FileRenamer is a simple batch file renaming utility.</p>
<h3>Database Documenter</h3>
<p>Database Documenter generates easy-to-read and detailed documentation for SQL Server 2000/2005 databases with a few simple clicks.</p>
</div><!--id_latest_posts-->
<div id="id_front_right_meta">
</div>
</div><!--#id_front_right-->
</div><!--#id_front_main_holder-->
</div><!--#id_front_main-->
<div class="clear"></div>
The CSS that applies is as follows:
#id_front_main
{
text-align: center;
width: 100%;
}
#id_front_top
{
width: 100%;
background: url(images/fcover.jpg);
background-repeat: repeat-y;
}
#id_front_top_title
{
width: 100%;
background: url(images/ftop.jpg);
background-repeat: no-repeat;
height: 70px;
}
#id_front_top_meta
{
background: url(images/fmeta.jpg);
height: 31px;
padding-top: 4px;
}
#id_front_main_holder
{
width: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#id_front_left
{
width: 45%;
float: left;
/*background: url(images/flcover.jpg);
background-repeat: repeat-y;*/
background: white;
margin-bottom: 5px;
margin-top: 10px;
padding: 0 0 0 0;
}
#id_front_right
{
width: 45%;
float: right;
background: url(images/flcover.jpg);
background-repeat: repeat-y;
margin-bottom: 5px;
margin-top: 10px;
padding: 0 0 0 0;
}
#id_front_left_title, #id_front_right_title
{
width: 100%;
background: url(images/fltop.jpg);
background-repeat: no-repeat;
height: 70px;
}
#id_front_left_meta, #id_front_right_meta
{
background: url(images/flmeta.jpg);
height: 31px;
padding-top: 4px;
}
#id_front_main h2, #id_front_left h2, #id_front_right h2
{
background: transparent;
font: 24px Georgia,century gothic, Arial, sans-serif;
font-weight:normal;
padding-top: 10px;
padding-bottom: 5px;
}
#id_front_left p, #id_front_right p
{
padding: 0 10px 0 10px;
text-align: left;
}
James :-)
The whitespace is caused by the top-margin of the h2 in the boxes. To solve it:
#id_front_main h2, #id_front_left h2, #id_front_right h2 {
...
margin-top: 0;
}
It is always a good idea to reset the styles you are using to avoid these kind of problems when looking at your site in different browsers. There are standard reset style-sheets that can help you with that like:
http://meyerweb.com/eric/tools/css/reset/
Even we faced the similar type of issue.
If you are showing one div at a time, then you can use the below solution:
document.getElementById('myDiv').style.display = 'none';
to the div which is larger in size than the current div shown.
This really works well with IE10 webkit, Chrome Webkit and Safari Webkit.
Cheers,
Ankit