I'm designing a web page and I used HTML5 to make an entire div tag a link. Prior to adding the link, the whole div would expand when I hovered over it. Suddenly, it's only working if I hover over the words, not the box I created. The HTML looks like this (minus the actual link):
<a href="link goes here" style="text-decoration: none;">
<div class="home-tab">
home
</div>
</a>
And the CSS to make it hover looks sort of like this:
.home-tab:hover {
width: 150px;
height: 45px;
margin-top: 30px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
(Note: This is not all of the code in the stylesheet. I have some lovely color in there too.)
Is there something I'm missing in my CSS to make the whole thing work on the hover and not just the words? I'm not even sure what questions to ask to figure out what I've done here.
ETA: I have checked this across three different browsers. It has the same problem on IE, Firefox and Chrome.
ETA: CSS without the :hover attribute.
.home-tab{
width: 150px;
height: 35px;
margin-top: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
ETA: Okay, here's something very weird. It seems that any elements on the far right don't have this problem. Seriously, the forums tab and next button on the far right both have :hover elements and they work exactly as I want them to.
Get rid of the <div> entirely and set <a> to display: block.
You're not supposed to put block-level elements inside of an <a> anyway.
Seems to be working fine here: jsFiddle
The only thing I can think of is that the div is not the size you think it is. the size and width elements that you are setting in your css are only active when your mouse is on the div. You need to set them in the normal non hover settings as well if you want the div to be that size. Right now it is defaulting to just large enough to hold the text. You can see this demonstrated by the black border I added in my example.
Here is my suggestion:
.home-tab {
/*All of the sizing code goes here to create box for div*/
}
.home-tab:hover {
/*anything you want changed on hover goes here*/
}
I hope I was understanding your question correctly. If you need more clarification please let me know. Good luck!
I think you want to expand that div when you hover cursor on that div.
i wrote a code below that will solve your hover problem.
Here is a code for you customize this
.home-tab{
width:150px;
height:45px;
margin-top:30px;
color:#008080;
font-family: arial;
background-color: blue;
transition-duration: .8s;
color:white;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
.home-tab:hover{
width:200px;
height:60px;
font-size: 16pt;
transition-duration: .8s;
}
a{ text-decoration:none} /* optional*/
</style>
<a href="#"><div class="home-tab">
home
</div>
</a>
Related
My code works well in every browser, the text keeps its white opaque color on top of the semi-transparent background (background-color:rgba(0, 0, 0,.4)). However, in Safari, the background transparency value is different (much lighter) and the text is also affected by the transparency and it doesn't keep its full color. I tried changing the font color (color: #fff;) to the H2 and p only, but it didn't work. I've spent tons of hours trying to fix this, but I couldn't find a solution. Any idea how to fix it?
Please, take a look in Chrome and also in Safari.
Thank you for your help!!
This is the website I am working on: http://www.mattresszombie.com
This is my html code:
#prueba-block1 {
display: block;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
height: 150px;
background-color:rgba(0, 0, 0,.4);
margin-top: 90px;
margin-bottom: 110px;
color:#fff;
text-align: center;
position:relative;
z-index: -7;
}
#prueba-block1 h2 {
font-size: 1.2em;
font-stretch: expanded;
}
#prueba-block1 p {
font-size: 1.1em;
letter-spacing: 1px;
line-height: 0.8em;
}
<div id="prueba-block1">
<h2>We are going to make mattress shopping simple!</h2>
<p>This is an informational website to provide the facts about mattresses.</p>
<p>We have no affiliation with any manufacturer, any retailer, any website, nor any brand.</p>
<p><strong>Let's get started!</strong></p>
</div>
Tis not about color transparency, it's all about z-index
Please set
z-index:1 to #fixed
z-index:-1 to #container
and remove z-index: -7 from #prueba-block1
I have a right sidebar in my design that pulls in testimonials dynamically, if there are any.
The HTML looks like:
<h4> dynamic content</h4>
Here is my CSS:
#testimonials {
background: #eeeeee;
padding: 30px;
width: auto;
height: auto;
}
#testimonials h4{
font-size: 20px;
line-height: 30px;
font-family: "freight-big-pro";
font-style: italic;
border-bottom: 1px solid #666;
padding-bottom: 20px;
padding-top: 20px;
}
#testimonials h4 strong{
display: block;
font-family:"freight-sans-pro", sans-serif;
font-style: normal;
font-size: 12px;
}
The issue is that when there is no content in the <h4> element, the style is still being picked up and adds a background and a border as specified in the CSS. I am assuming that it's generating the h4. Is there a way to have it be empty if there is not any content?
Update:
I am trying this and it seems to work in jsfiddle, but not in the file:
<script type="text/javascript"> $(document).ready(function(){ if ($("#testimonials").text().length < 65) { $('#testimonials').hide(); } });</script>
It counts the HTML inside as text, I think.
Update
Here is another JsFiddle, but this also probably won't work for the OP as it uses jQuery.
jQuery
//onload:
checkStyle();
//checks if the h4 is empty, and hides the whole div if so.
function checkStyle ()
{
if ($('#testimonials h4').is(':empty'))
$('#testimonials').hide();
else
$('#testimonials').show();
}
This does not necessarily work for what the asker is looking for, but could be beneficial for future readers. It is for not styling the h4, not the parent div as op wants.
Assuming you are ok with CSS3, and the <h4> is literally empty, you can modify your CSS to use the :not and :empty selectors.
CSS
#testimonials h4:not(:empty) {
font-size: 20px;
line-height: 30px;
font-family:"freight-big-pro";
font-style: italic;
border-bottom: 1px solid #666;
padding-bottom: 20px;
padding-top: 20px;
}
#testimonials h4:not(:empty) strong {
display: block;
font-family:"freight-sans-pro", sans-serif;
font-style: normal;
font-size: 12px;
}
Here is a JsFiddle. You can add content to the h4 to see how it works.
Alternatively, you could even do the opposite, and have a display:none; for empty <h4>s:
#testimonials h4:empty{
display:none;
}
Give #testimonials a display: none; property in your CSS; then, just before whatever Javascript code you use to pull in testimonials finishes running, have it check whether it actually retrieved any, and set display: block; on #testimonials if so.
Somewhat related: When asking questions on Stack Overflow, it's ideal to post as much information as possible, as for example the code you're using to retrieve testimonials dynamically -- it's mentioned in the question and its behavior affects what you're asking about, which makes it well within scope. If you'll update your question with your testimonial-retrieving code, I'll update my answer to show a specific solution.
Do a display:none on your css initially when there is no content.
Use javascript or jquery to show content. Styling will be applied when the content gets displayed.
Initially when there is no content:
#testimonials {
background: #eeeeee; padding: 30px; width: auto; height: auto;
display :none;
}
When content gets generated dynamically use:
$("#testimonials").show();
This seems like alot of front side work when it isn't needed. If you are able to output content into the h4, then you are able to output and additional tag.
<section id="testimonials"></section>
Server Side pushes out:
<h4>all my content</h4>
Then your CSS will work without any work from js.
Most likely you have one for each testimonial?
Kindly see this page:
http://www.technodoze.com
See the Button in the Categories on the right side of the page.
See the word Tips and Tricks.
Problem 1:
It is expanded in whole the column .
The problem is: I want my cell to be expanded just according to the text string but it is looking awkward.
Problem 2:
See the link Web Designing half of which is lying on one line half on other, i want it to be on same line. (One <a> link, one line.)
My Code:
<style type="text/css">
.cat_link a, .cat_link a:hover, .cat_link a:focus{
padding: 0.25em;
color:#3B5998;
font-family: Verdana;
text-decoration: none;
border:1px solid #DADADA;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
background: #EDEFF4;
margin-left: 0;
margin-right: 0;
line-height:2;
margin-top: 1em;
margin-bottom: 1em;
}
.cat_link {
line-height:2;
}
</style>
HTML CODE:
<p class="cat_link">
Cell Phones
Android
Tips and Tricks
Amazing
Web Designing
Windows Tips
Physics
CSS
CSS 3
Communication
Facebook Tips
Dajjal
Bermuda Triangle
</p>
Please give me solution if you can.
add this to css classes
.cat_link{
text-align: left ; /* gets rid of wierd white space */
}
.cat_link a{
white-space: nowrap; /*stops buttons from taking up two lines */
}
You have text-align: justify set on the page body; reset it with text-align: left for those category tags and it will fix that strange spacing.
To ensure that the text doesn't wrap as you describe in Problem #2, set white-space: nowrap on each of the category tags (selector .cat_link a).
Problem 1: with a text-align:left is solved-
Problem 2: you can put a display:block; in the a element to force the new line, but if the text is larger than the container with it will break into a new line.
I'm currently working on a website design and need to make some changes to an advertisement. The CSS I apply to the main div (.ad_728x90_home) I'm targeting doesn't work. I have applied a margin-top to the div but that doesn't work, tried other CSS but it's not getting picked up.
Any help would be greatly appreciated! The advert is located below the second post.
.ad_728x90_home {
height: 130px;
}
.ad_728x90_home_text {
margin-top: 40px;
}
span.ad_728x90_home_h3text {
color: #FFFFFF;
float: left;
font-family: LeagueGothicRegular;
font-size: 23px;
line-height: 34px;
margin: 13px 0 22px 10px;
text-transform: uppercase;
width: 185px;
}
.ad_728x90_image {
float: right;
margin-right: 10px;
}
<div class="ad_728x90_home">
<div class="ad_728x90_home_text">
<span class="ad_728x90_home_h3text">Need more quality fonts? Head over to myfonts.com</span>
</div>
<div class="ad_728x90_image">
<img class="scale-with-grid" src="images/ad_728x90.jpg" alt="Blog Post" />
</div>
</div>
Be sure you have the right class names between .ad_728x90_home and .ad_728x90_home_text and double check your HTML nesting.
I checked your items with Chrome's inspect element and the <div class="ad_728x90_home_text"> seems to start above your ad, at the top of the page.
Try going to make it a position:relative as it seems like a main div element
.ad_728x90_home {
Postion:relative;
top:10px;}
I cannot say the exact pixel amount of it as the margin-top doesnt work try using it as relative.
Here's the image in question of my HTML page.
The text menu is inside a right aligned div, and has 1.2em letter spacing.
Is there a pseudo-selector for this? I would not like to have to resort to relative positioning.
I would love the text menu to end where the block ends.
I've already marked the best answer, but I was asked for the markup regardless by CodeBlock. Here it is.
<div class="sidebar">
<span class="menuheader">MENU</span>
<ul>
<li>Content</li>
<li>Attachments</li>
<li>Sub-pages</li>
<li>New sub-page</li>
</a>
</ul>
</div>
.sidebar {
color: rgb(150,93,101);
display: inline;
line-height: 1.3em;
position: absolute;
top: 138px;
width: 218px;
}
.menuheader {
letter-spacing: 1.1em;
margin: -1.2em;
text-align: right;
}
You can set your element to have a right margin of -1.2em, which would counteract the letter spacing.
e.g.
.menu-header-selector {
display:block;
letter-spacing:1.2em;
margin-right:-1.2em;
text-align:right;
}
To answer your question regarding pseudo-selector, there isn't a per character pseudo-selector as far as I'm aware. (EDIT: Scratch that, there's the :First-Letter selector, which Jonas G. Drange pointed out).
EDIT: You can find a basic sample here: http://jsfiddle.net/teUxQ/
I would call this a browser bug, actually. The spec says it's the spacing between characters, while your browser (and mine) seem to be changing the spacing after characters. You should submit a bug report.
Obviously a very old question, but CSS involved for your specific example worked at that time.
It involves to reset direction to the opposite, give a formating context to your inline element and set a negative text-indent equal to the letter spacing.
Demo below:
.sidebar {
color: rgb(150, 93, 101);
line-height: 1.3em;
width: 218px;
border:solid;
text-align:right;
}
.menuheader {
letter-spacing: 1.1em;
direction:rtl;
display:inline-block;
text-indent:-1.1em;
background:gold
}
<div class="sidebar">
<span class="menuheader">MENU</span>
<ul>
<li>Content</li>
<li>Attachments</li>
<li>Sub-pages</li>
<li>New sub-page</li>
</ul>
</div>
You can add an :after of your element and set a minus margin left equal as the letter-spacing
.menuheader {
letter-spacing: 1.1em;
}
.menuheader:after {
content:" ";
margin-left: -1.1em;
}
Tested on Chrome, Firefox and Edge
You cannot target the last character, only the first (CSS3, :first-letter). You can add a span around the last letter, but that would mean adding meaningless markup which is "worse" than adding positioning to the element.
CSS is perfect for trickery like this :)
No need for changing display to any other kind (<p> paragraph example) or actually doing anything unnecessary with my code. Text-indent set to negative letter-spacing value resolves that problem for me.
text-indent: -2em; works exactly as I want for letter-spacing: 2em; and was the only thing I had to add to my CSS.
You could try adding display: block to the text and then reduce the width by using 100% minus the letter-spacing.
.menuheader {
text-align: right;
display: block;
letter-spacing: 1.1em;
width: calc(100% - 1.1em);
}
I think i have the best answer
You can use ::after and set content as the last word of your word
div{
display:inline-block;}
#demo1{border: 2px blue dashed;
text-align: center;
letter-spacing: 3vw;
}
#demo2{border: 2px blue dashed;
text-align: center;
letter-spacing: 3vw;}
#demo2::after{
content:'g';
letter-spacing:0;}
<div id="demo1">something</div><span> ///here after last letter their is a gap</span></br> </br>
<div id="demo2">somethin</div> <span>///here the gap is removed with the help of ::after sudeo class</span>