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.
Related
I have a context specific class that I want to certain headings on the site and I'm using the following code to apply a 2px full width line under a heading:-
.headingCustom2 {
color:black;
text-align: center;
padding-top: 50px;
border-bottom: 2px solid #000;
padding-bottom: 3px;
}
I want to add 20px padding beneath the underline so there's space between it and the div below. It needs to be independent of padding:bottom. My searching has only returned results on padding-bottom which alters the distance between the heading and the underline. Wanted to keep it to a distinct class as there's a lot of headings across the site it will need to be applied to. The heading font, Heading 5 is also used in other non-underlined contexts. Anyway, I hope this question isn't too tiresome.
You can try to use ::after
.headingCustom2::after {
content: '';
display: block;
height: 20px;
}
I have a QTabWidget with six tabs, and all the tabs have an icon -
but the icons are not in the center of the tab:
What I've done so far :
tabWidget->setStyleSheet("QTabBar::tab {width: 40px; height: 40px;}"
"QTabBar::tab:selected {background: lightblue;}");
tabWidget->setIconSize(QSize(40, 40));
tabWidget->addTab("widget", QIcon("iconPath"), ""); //<--for all six tabs
And:
tabWidget->setTabIcon(index, QIcon("iconPath"));
Any ideas why this is happening, and how I can fix it?
I too have been struggling with this issue. Here is how I resolve it.
Background:
I was attempting to get a left side tab menu going, which used icons as its indicators (what the users would see), however I had a problem:
My icons, which were set using the currentTabIcon in the Property Editor, were aligning to the bottom (which is expected since I am using the West orientation. Normally, the North orientation would be selected and the icons would be on the left).
I had this as my stylesheet:
QTabBar::tab:hover {
background-color: #212121;
}
QTabBar::tab:selected{
background-color: #313131;
}
QTabBar::tab {
background-color: #111111;
height:70px;
width: 70px;
border: none;
}
Now, attempting the suggested solution found in this post whereby I set the margins did not have the desired effect, infact it had no effect at all.
Solution:
After playing around with some of the CSS properties, I discovered that setting the padding-top and padding-bottom gave me the desired result.
adding the lines:
padding-top: -15px;
padding-bottom: 15px
Resolved the problem for me, however this needs to be changed according to your needs.
My final stylesheet resembles:
QTabBar::tab:hover {
background-color: #212121;
}
QTabBar::tab:selected{
background-color: #313131;
}
QTabBar::tab {
background-color: #111111;
height:70px;
width: 70px;
border: none;
margin: 0px;
padding-top: -15px;
padding-bottom: 15px
}
If somebody has the same problem like me with the icons in the tabs, I found a solution after days and days search for this, and its so simple :D
Just add this to the stylesheet for the TabWidget:
tabWidget->setStyleSheet("::tab {margin: 0px;}");
************
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>
I'm webmaster of a directory site with basic CSS skills, using SobiPro on a Joomla base. Directory entries display 2 images at top - an exterior and interior photo. At times, only 1 or the other (sometimes neither) is available; so, I have a line entry that asks anyone who can supply the missing pic(s) to email it/them to me. Until our latest upgrade, this was not a problem, but now it is. Cannot get the two divs aligned. You can see an example here!
This is what the CSS template currently looks like:
div.field_photos
{
border-style: none;
font-weight: bold;
font-size: 12px;
color: #000000;
padding-left: 5px;
margin-top: 360px;
margin-left: 5px;
}
div.field_addy1
{
border-style: none;
font-color: #000000;
font-weight: bold;
font-size: 12px;
margin-top: 0px; /* position it horizontally */
margin-left: 5px;
margin-right: 5px;
}
where field_photos is the intro line (select list choosing either 'interior' or 'exterior' text) and field_addy1 is the bot-protected email addy. I tried floats, but the text tried to wrap on the pics. Tried making it into a single div, using the intro text and 'Directory Webmaster' combo into a single hyperlink, but that didn't fly.
Field widths are 150px and 200px respectively with the Title length and URL length set at 200px max. Any suggestions would be much appreciated.
Your positioning here with margins is a bit crazy. I'm not fully sure what's going on with that. To fix this issue a quick way:
Firstly, remove the margin-top from your .field_photos divider and remove the float:left properties from your main image:
<img class="spFieldsData field_sobi2_icon" src="..." alt="">
.field_sobi2_icon {
float:none;
}
Then change the display of the two fields you want aligned alongside eachother:
<div class="field_photos">...</div>
<div class="spField newClass2">...</div>
.field_photos, newClass2 {
display: inline;
}
I'm working on a project to upgrade a system to use the button tag rather than regular submit buttons. For the formatting of the buttons, I have the following CSS classes:
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button {
background: transparent url('images/greenrightbutton.png') no-repeat scroll top right;
color: #FFFFFF;
display: block;
font: normal 12px arial, sans-serif;
height: 25px;
padding-right: 8px; /* sliding doors padding */
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
text-decoration: none;
border: 0px;
overflow: visible;
}
#loginbox button {
float: right;
}
button span {
background: transparent url('images/greenleftbutton.png') no-repeat top left;
display: block;
line-height: 18px;
padding: 4px 5px 5px 12px;
margin: 0px;
border: 0px;
}
They work absolutely perfectly in every browser except IE8.
In IE8, the buttons work in most places, but then I find a page where the two background images don't quite line up and no amount of tweaking padding, line spacing etc fixes it.
Does anyone know why this might be the case?
Demo page: http://test6.placement.co.uk/demo/test.asp
---Update---
After some fairly extensive testing and trying things, I've now got a pretty fair idea of what's causing the problem in page 1, but no idea how to fix it, while another page with the same issue has a completely different cause (which I haven't found) but where I HAVE stumbled on a fix...
The problem on the first page appears to relate to a ul entered further up the page. Take that out and everything behaves - unfortunately, that's not an option as the ul is part of user-entered content, so I'm scratching my head about that. Particularly given...
Page 2 has no uls to cause an issue, but randomly sticking two break tags in just before my button code resolves the problem.
Naturally, THAT fix doesn't work on page 1.
I'm just about ready to give in and find some alternative way of rendering these buttons, because whatever the actual problem is, it's clearly so deep in either my CSS or my basic HTML that I'm probably never going to find it.
I don't see any difference between IE8 and other browser. Could you pleas mention bit more clear what you want to do?