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.
Related
I am trying to make this grey shape using a css class.
I thought using a border-raduis would work. The shape is close but is still off.
I currently have this:
This is the css that i'm using:
.total--races {
text-align: right;
font-size: 32px;
background: #44ade2;
color: #fff;
width: 78px;
height: 88px;
border-radius: 50px 0px 0px 50px;
}
and this html :
<div className="total--races">
{get(meeting, 'races', '') &&
Object.keys(meeting.races).length}
</div>
Any suggestion of how to make my shape look close would help. Thanks.
use radial-gradient without the need of border-radius
.total--races {
text-align: right;
font-size: 32px;
color: #fff;
width: 78px;
height: 88px;
background:
radial-gradient(circle at right center,#44ade2 70%,transparent 72%);
}
<div class="total--races">
99<br>text
</div>
To have better control use explicit radius:
.total--races {
text-align: right;
font-size: 32px;
color: #fff;
width: 78px;
height: 88px;
background:
radial-gradient(80% 110% at right center,#44ade2 98%,transparent 100%);
}
<div class="total--races">
99<br>text
</div>
I try to use stack as a last resort to figuring out my coding problems but I can't find what is wrong with this stupid website. I am building the mobile site for a company right now and I am doing it through 2 separate style sheets so that when a user is on a device smaller than a specified resolution, it uses a different style sheet. I've done all of this no problem.
My problem is that some of the css styling in my external doc is not being applied to the respective elements in the HTML doc. More specifically, none of the ".fb a", ".tw a", and ".in a" are not being applied at all. When I apply them inline in the html document it works but I need it to be in the external style sheet. And I cannot figure out why this is happening. Since the background-image is not being applied, nothing shows up. What is weirder is that other elements of the footer display properly and when I change the styling, it is reflected on the site. Please help!!!
My HTML:
<!-- FOOTER -->
<div class="footwrap">
<div class="footer">
<!-- CONTACT -->
<div class="text">
<!-- LEGALITY -->
<div class="comm">Oblique Drive technology is patents pending. Copyright © 2014. All Rights Reserved. Oblique Drive is a trademark of Callplex, Inc.</div>
</div>
<!-- SOCIAL NETWORKING -->
<div class="sn">
<a href="http://www.facebook.com/obliquedrive">
<div class="fb">
</div>
</a>
<a href="http://www.twitter.com/obliquedrive">
<div class="tw">
</div>
</a>
<a href="http://www.linkedin.com">
<div class="in">
</div>
</a>
</div>
</div>
</div>
And my CSS:
/*Footer*/
.footwrap {
width: 100%;
height: 175px;
background-color: #444;
}
.footer {
width: 90%;
margin: auto;
height: 175px;
background-color: #444;
position: relative;
bottom: 0px;
}
.comm {
width: 420px;
margin: auto;
height: 175px;
font-size: 24px;
margin-top: 20px;
text-align: left;
float: left;
}
.sn {
width: 400px;
float: right;
margin-top: 30px;
margin-right: 50px;
display: block;
}
.fb {
width: 75px;
height: 75px;
display: inline-block;
}
.fb a {
display: block;
width: 100px;
height: 100px;
background-image: url(images/sniconsm.jpg) !important;
background-position: 0px 0px !important;
}
.tw {
width: 75px;
height: 75px;
display: inline-block;
padding-left: 30px;
}
.tw a {
display: block;
width: 75px;
height: 75px;
background-image: url(images/sniconsm.jpg);
background-position: 150px 0px;
}
.in {
width: 75px;
height: 75px;
display: inline-block;
padding-left: 30px;
}
.in a {
display: block;
width: 75px;
height: 75px;
background-image: url(images/sniconsm.jpg);
background-position: 75px 0px;
}
.footer .text {
position: relative;
display: inline-block;
margin-left: 50px;
margin-top: 15px;
float: left;
line-height: 170%;
color: #ffffff;
}
Also, here is the page live, with all of the code if it helps:
http://thewolv.es/Oblique%20Drive/mobile
Please just ignore any other problems you see lol
Look a little more closely at your styles. You have .fb a, but the HTML markup is the other way around:
<a href="http://www.facebook.com/obliquedrive">
<div class="fb"></div>
</a>
If you were trying to target the div, you should use a .fb. But really, you might not need those divs at all. Just change your A tag to something like:
Then use the CSS selector that is a.fb (no space between them).
Your A elements are not children of the divs, it's the other way around.. yet your CSS defines the A elements as children.
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>
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.