Can you make a layer clickable, going to a url?
Here's my layer, with a background picture. I want my users to click it to navigate.
CSS:
#content-2-2
{
float: left;
width: 269px;
height: 103px;
margin:0px 20px 0px 0px;
padding: 0px;
background: url('../images/Guided-tour-logo-front.png') no-repeat left top;
}
HTML:
<div id="content-2-2"></div>
Regards,
Tea
You could add an anchor:
<div id="content-2-2"></div>
#content-2-2
{
float: left;
width: 269px;
height: 103px;
margin:0px 20px 0px 0px;
padding: 0px;
background: url('../images/Guided-tour-logo-front.png') no-repeat left top;
}
#content-2-2 a
{
width: 269px;
height: 103px;
display:block;
}
You can't via css...try using something like:
<div id="content-2-2" onclick="location.href='http://www.example.com'"></div>
It's javascript :)
You can try this:
For example:
<div id="facebook" onclick="location.href='your_link.html'">
and then in your CSS:
#facebook{
cursor: pointer;
/* The rest of your styling to that div */
}
HTML5 Allows for anchors to wrap block elements. This should work if you are using HTML5:
<a href="link.html">
<div id="content-2-2">my content</div>
</a>
Related
I'm having a problem with the floating property.
My code: JSFiddle
I want it to look this way: printscreen
What can I do, I want the button to NOT float like the other two elements above the button.
My css: (You can see my HTML on JSFiddle)
#upload_photo_form > p {
margin: 3px;
}
#upload_one {
width: 150px;
height: 60px;
background-image: url('image, doesnt matter, looke the same anyways');
background-size: 100%;
float: left;
border: 1px solid grey;
border-radius: 3px;
}
#upload_two {
margin-left: 5px;
width: 150px;
height: 60px;
background-image: url('image, doesnt matter, looke the same anyways');
border: 1px solid grey;
border-radius: 3px;
background-size: 100%;
float: left;
}
You cam modify your code as follows:
<div id="upload_photo_form">
<div>
<p>Please choose a file to upload.</p>
<input id="upload_file" type="file" /><br>
</div>
<div>
<p>Which mode would you like to use?</p>
<div id="upload_one"></div>
<div id="upload_two"></div>
</div>
</div>
<div style="clear:both;"></div>
<button id="upload_button">Upload</button>
Try this:
#upload_button{
margin-top:10px;
clear: both;
}
DEMO
You can also use:
display: block;
Try this if you want to do this just with CSS:
#upload_photo_form div {overflow: hidden}
#upload_button {clear: both; margin-top: 10px;}
Continuing my last question on this thread (Play button centred with different image/video sizes), I will open this one regarding to #Marc Audet request.
Basically I had this code:
.playBT{
width: 50px;
height: 50px;
position: absolute;
z-index: 999;
top: 25%;
left: 25%;
margin-left: -25px;
margin-top: -25px;
}
However I can't use the example given by Marc on the last thread, because the play button doesn't work as expected when the video size changes...
Here is the code
You need to tweak your HTML a bit, here is one way of doing it:
<div id="video-panel">
<div id="video-container" class="video-js-box">
<div id="play" class="playBT"><img class="imgBT" src="http://2.bp.blogspot.com/-RnPjQOr3PSw/Teflrf1dTaI/AAAAAAAAAbc/zQbRMLQmUAY/s1600/player_play.png" /></div>
<video id="video1">
<source src="http://video-js.zencoder.com/oceans-clip.mp4"/>
</video>
</div>
<div id="video-controls">
<div id="footerplay"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/play.png" /></div>
<div id="footerpause"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/pause.png" /></div>
<div id="progressbar">
<div id="chart"></div>
<div id="seeker"></div>
</div>
</div>
</div>
and the CSS is as follows:
#video-panel {
border: 4px solid blue;
padding: 4px 50px;
}
.video-js-box {
width: auto;
height: auto;
outline: 1px dotted blue;
position: relative;
display: block;
}
video {
outline: 1px dotted blue;
margin: 0 auto;
display: block;
}
#play {
position:absolute;
top: 50%;
left: 50%;
outline: 1px dotted red;
}
.imgBT{
width:50px;
height:50px;
vertical-align: bottom;
margin-left: -25px;
margin-top: -25px;
}
#video-controls {
outline: 1px solid red;
overflow: auto;
}
#footerplay {
float: left;
margin-left: 27px;
}
#footerpause {
float: left;
margin-left: 27px;
}
#progressbar {
float: left;
outline: 1px dotted black;
display: inline-block;
width: 200px;
height: 27px;
margin-left: 27px;
}
#footerplay img, #footerpause img{
height:27px;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/EnDHw/
Explanation & Details
User a wrapper div to keep everything tidy, video-panel, and use a separate div for the video video-container and for the controls video-controls.
The play button and the <video> element are positioned with respect to the video-container and note the negative margin trick to position the arrow button image.
The control elements can be positioned in their own div video-controls. I simply floated them to the left with a 27px left margin.
This should help you get started. The outlines and borders are for illustration only and are optional.
Good luck!
I am currently working with css sprite images for my site. But I am running into css styling issues. I have 6 categories with each having an image beside. When applying the image sprite I get repeated images of the same object.
How can I get each category with their respective image through css & sprite? If you like to look at the live examples below are the links.(ps sorry for the horrible html structure)
Thank you
How it looks:
Sprite Images: Click Here
Individual Images: Click Here
Desired Outcome:
CSS part related
<style>
#index_categories {
background: #fff;
float: left;
width: 255px;
height: 125px;
margin: 10px 15px 10px 40px;
padding: 5px;
font-size: 97%;
vertical-align: middle;
background: url( http://webprolearner2346.zxq.net/css-test/images/categories.png) no-repeat top left;
}
.index_thumb {
padding: 5px;
}
.index_categories_list {
text-indent: 5px;
padding-left: 10px;
}
.index_cat {
list-style-type: none;
}
#listing {
background: #fff;
width: 95%;
height: 115px;
padding: 10px;
margin-bottom: 10px;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
}
.listing_pic {
float: left;
padding: 10px;
}
#whitebox {
background: #fff;
width: 95%;
min-height: 200px;
padding: 10px;
margin-bottom: 10px;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
}
.sprite-books{ background-position: 0 0; width: 87px; height: 87px; }
.sprite-tshirt{ background-position: 0 -137px; width: 87px; height: 87px; }
.sprite-stereo{ background-position: 0 -274px; width: 83px; height: 83px; }
.sprite-chair{ background-position: 0 -407px; width: 87px; height: 87px; }
.sprite-key{ background-position: 0 -544px; width: 83px; height: 83px; }
.sprite-cake{ background-position: 0 -677px; width: 87px; height: 87px; }
</style>
HTML snippet
<div class="contentPost" style="height:900px;">
<div id="index_categories" class="sprite-books">
<h3><a class="frontLinks" href="#">Category 1</a></h3>
<ul class="index_cat">
<li>Books</li>
</ul>
</div>
<div id="index_categories " class="sprite-stereo">
<h3><a class="frontLinks" href="#">Category 2</a></h3>
<ul class="index_cat">
<li>Stereo</li>
</ul>
</div>
<div id="index_categories" class="sprite-chair">
<h3><a class="frontLinks" href="#">Category 3</a></h3>
<ul class="index_cat">
<li>Chair</li>
</ul>
</div>
</div>
CSS Sprite (Google) is a big image (most probably .png) consisting out all of your required images(6 in yoyr case), in a grid-like structure. Benefit is that you will need only One HTTP request instead of NHTTP requests (where n is your number of images).
Your problem looks like the CSS Styling. But if you want to use sprites, you need one master image (sprite.png) having transparent background and having width of x*n (where X= width of your one div/category, as you shown in Desired Outcome in your question. N= number of total images, 6 here.) The height of sprite.png should be equal to the tallest of your images.
So, copy all your images stero.png, books.png into a new sprite.png as described above.
Then you could use following HTML:
<div id="wrapper">
<div class="row">
<div id="books" class="cell">
</div><!--//books-->
<div id="stereo" class="cell">
</div><!--//stereo-->
<div id="pen" class="cell">
</div><!--//pen-->
</div><!--//row-->
<div class="row">
<div id="mag" class="cell">
</div><!--//mag-->
<div id="bag" class="cell">
</div><!--//bag-->
<div id="paper" class="cell">
</div><!--//paper-->
</div><!--//row-->
</div><!--//wrapper-->
CSS:
#wrapper{
margin: 5px auto; // to center the div on page
width: 80%;
}
.row{ //stack'em in 3x2 grid
clear:both;
}
.cell{
background-color: #fefefe;
background-url: images/sprite.png; //Set common background UR
float: left; //stack each other to left
height: 15px; //desired height
width: 30px; //desired width
border: 3px solid #c3c3c3; //set border
}
//set specific background-position for each div
//(Remember we are using same image for all these divs?
#books{ background-position: -0px -0px; } //image starts at top:0, left:0px
#stereo{ background-position: -0px -30px; } //image starts at top:0, left:30px
#pen{ background-position: -0px -60px; } //image starts at top:0, left:60px
#mag{ background-position: -0px -90px; }
#bag{ background-position: -0px -120px; }
#paper{ background-position: -0px -150px; }
You could also use your existing 6 images to achieve your desired result. Just set a required height,width of the div. Set background-position:top-left;. If the image is smaller that the div's dimensions, the image will be placed in top-left corner.
EDIT:
Ok, saw your live-page's code. You already are using a sprite file.
From seeing your How It looks & Desired pages, looks like you want to add that extra white-space around the right-bottom side of image. Right?? If yes, you could add the required white-space in the categories.png and use background-position:top-left; in CSS. It will prevent the image to repeat in the horizontal side.
I have a CSS problem that I'm not able to figure out. I'm not even sure it is possible. What I want is the following:
I have three buttons/tabs like this http://sv.tinypic.com/r/21cf85t/6 and when you click one tab a different div should show for each tab like this http://sv.tinypic.com/r/21l5y85/6 or http://sv.tinypic.com/r/2dbrv5u/6.
I know how to show/hide the divs with jQuery but the problem is that the divs will increase in height http://sv.tinypic.com/r/k2xxfb/6 and then they will push the other tabs and divs down. Is there a way to create what I am trying to do?
I'm not a guru in CSS so if you have an example to look at or can post code here I would be very very thankful!
This is the HTML I'm using for my tabs:
<div class="MainContent">Content</div>
<div class="TabsHolder">
<div id="Tab1">
<div style="width:200px">
Content Tab 1
</div>
</div>
<a class="Button1" href="#Tab1"></a>
<div class="clearer"></div>
<div id="Tab2">
<div style="width:200px">
Content Tab 2
</div>
</div>
<a class="Button2" href="#Tab2"></a>
</div>
CSS:
.MainContent {
float: left;
}
.TabsHolder
{
float: left;
}
.Button1
{
float: left;
margin: 100px 0px 20px 0px;
background: url(images/Button1.png) no-repeat 0 0;
height: 79px;
width: 27px;
}
#Tab1
{
width: 200px;
margin: 80px 0px 20px 0px;
border: solid 1px #ACCD45;
position: relative;
float: left;
overflow: hidden;
padding: 20px;
}
.Button2
{
float: left;
margin: 0px 0px 20px 0px;
background: url(images/Button2.png) no-repeat 0 0;
height: 97px;
width: 27px;
}
#Tab2
{
width: 200px;
margin: 0px 0px 20px 0px;
border: solid 1px #ACCD45;
position: relative;
float: left;
overflow: hidden;
padding: 20px;
}
div.clearer
{
clear: both;
margin: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
line-height: 0px;
height: 0px;
width: 0px;
overflow: hidden;
}
Here is what I put together using pure CSS - Tested in Firefox, IE8 and Chrome (not sure about others). Try out a demo here.
Note: I wanted to make a comment about one thing in your original HTML - you can't add a background image to a link <a> tag.
CSS
.MainContent {
float: left;
width: 400px;
height: 400px;
background: #444;
}
.buttons {
float: left;
margin: 10px 0 10px 0;
width: 27px;
clear: both;
}
.Button1 {
background: #555 url(images/Button1.png) no-repeat 0 0;
height: 79px;
}
.Button2 {
background: #555 url(images/Button2.png) no-repeat 0 0;
height: 97px;
}
.Button3 {
background: #555 url(images/Button3.png) no-repeat 0 0;
height: 127px;
}
.tabsHolder {
float: left;
position: relative;
}
.tabs {
width: 200px;
height: 200px;
margin: 0 0 20px 0;
border: solid 1px #ACCD45;
background: #444;
overflow: hidden;
padding: 20px;
display: none;
position: absolute;
left: 0;
}
#tab1 { top: 0; }
#tab2 { top: 98px; }
#tab3 { top: 215px; }
a:hover .tabs {display: block;}
HTML
<div class="MainContent">Content</div>
<div class="tabsHolder">
<a href="#tab1"><div class="buttons Button1">1</div>
<div id="tab1" class="tabs">
Content tab 1
</div>
</a>
<a href="#tab2"><div class="buttons Button2">2</div>
<div id="tab2" class="tabs">
Content tab 2
</div>
</a>
<a href="#tab3"><div class="buttons Button3">3</div>
<div id="tab3" class="tabs">
Content tab 3
</div>
</a>
</div>
</div>
You will need to define the pages (divs to hide/show) and tabs in two separate divs.
These will want to be floated next to each other, so you will have something like
<div class="pages">
<div class="page" id="tab1">....</div>
<div class="page" id="tab2">....</div>
</div>
<div class="tabs">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
</div>
You can then set a min-height on pages (height for IE6, put into a conditional stylesheet), set pages and tabs to both float left, both with fixed widths.
Finally when you attach your event to $('#tab a'), make sure you iterate over all the pages hiding the non-relevant ones.
Without JavaScript, you cannot hide one of your divs, you can only have an HTML page per tab (like this or this).
If you want something more dynamic, you should use JavaScript. The tabs system is a built-in component of jQuery, for instance. (Homepage, live demo).
Hope that'll help you.
I'm trying add a tab to my web page that looks like this:
Using this example as a basis, I've gotten it partially working. My case differs because I want the text section to be a fixed with, but the tail section to dynamically resize to take up the rest of the tab's container.
It looks good in IE 6, but doesn't really take up the full width of the container.
In Firefox 3 it doesn't render well at all: (the red is a blank area between the spans).
How do I get this to render properly in both IE6 and Firefox to take up the full width specified for #Tab? #Tab4 is the area I'd like to size to take up as much room as possible.
<style type="text/css">
#Tab
{
width: 300px;
}
#Tab1
{
background: #000 url(BlueTabSprite.png) no-repeat 0 -136px;
display: inline-block;
height: 23px;
padding-left: 4px;
}
#Tab2
{
background: #000 url(BlueTabSprite.png) repeat-x 0 -242px;
display: inline-block;
overflow: hidden;
padding-top: 4px;
height: 19px;
width: 100px;
}
#Tab3
{
background: #000 url(BlueTabSprite.png) no-repeat right -30px;
display: inline-block;
height: 23px;
padding-right: 6px;
}
#Tab4
{
background: #000 url(BlueTabSprite.png) repeat-x 0 -83px;
display: inline-block;
height: 23px;
width:60%
}
#Tab5
{
background: #000 url(BlueTabSprite.png) no-repeat right -189px;
display: inline-block;
height: 23px;
padding-right:6px;
}
</style>
<div id="Tab">
<span id="Tab1">
<span id="Tab3">
<span id="Tab2">Test Tab</span>
</span>
</span>
<span id="Tab5">
<span id="Tab4"></span>
</span>
</div>
I think the Sliding Doors Technique may be what you're looking for.
This is a simplified version that works:
<div style="background: url('BlueTabSprite.png') no-repeat; width: 290px; min-width: 120px; max-width: 290px; height: 23px;">
<div style="float: right; background: url('BlueTabSprite.png') top right no-repeat; width: 10px; height: 23px;"></div>
Test
</div>
This tool may be a help.