I'm trying to make a clickable button by treating a hyperlink with CSS and adding a little icon next to it. Everything but one detail works great; namely the icons which are slightly offset from the text on the button. It looks as follows:
As you may see, the white icons (12x12px) on the buttons are slightly higher than the text, touching the CSS borders of the hyperlink, while the rest of the text does not.
I have tried every solution that came to mind, including applying vertical-align to the image elements (which put the icon too close to the LOWER border instead, reversing the situation), but sadly could not get it to just line up with the text in the middle of the element nicely. What should I do?
Code in question:
HTML example of a button:
<td class="headerlinks">
<img src="{T_THEME_PATH}/images/icon_mini_login.png" alt="*" /> {L_LOGIN_LOGOUT}
</td>
CSS of the buttons:
.headerlinks {
margin: 0px 0px;
font-size: 1.1em;
line-height: 200%;
}
.headerlinks a img {
}
.headerlinks a {
white-space: nowrap;
border: 1px solid #FAE000;
padding: 1px 4px 2px 4px;
border-radius: 4px;
margin: 0px;
background-color: #000;
vertical-align: middle;
}
Are you using a CSS reset? You can try the following one.
http://meyerweb.com/eric/tools/css/reset/
Also it's better to use a background-image for the icon, and set a position on it.
This should work if you add margin-top:2px; to the icon class. This number may need to be shifted by a digit or two.
This will work if you maintain the static font-size.
Related
My website is www.rosstheexplorer.com.
I am using the Penscratch theme although have modified many aspects of it.
I recently made a number of changes including making my header and navigation bar full width.
One of the unintended consequences of these changes is now my widget-area is no longer sitting side by side with my content-area.
I used the Developer Tools on Google Chrome and started trying to alter the width, padding and margin of both elements. Nothing I tried resulted in anything close to what I wanted. I would do more experimentation but I have very little idea as to where to begin.
In style.css do I have to made a modification to
.site-content .widget-area {
margin-top: 27px;
padding-top: 24px;
border-top: 3px solid #eee;
}
or
.widget {
line-height: 2.09231em;
position: relative;
overflow: hidden;
width: 100%;
margin: 0 0 27px;
padding: 0 0 27px;
border-bottom: 1px solid #eee;
See if this code works for you:
#primary.content-area {float: left;width: 70%;}
#primary.content-area .site-main{width:100%;}
.widget-area{float:right;width:30%;}
Inspecting your site, what i understand is, it is an issue related to float.
try applying
float:left
for your ".widget-area"
My website is www.rosstheexplorer.com.
I am using the Penscratch theme although have modified many aspects of it.
I recently made a number of changes including making my header and navigation bar full width.
One of the unintended consequences of these changes is now there is a lot of space between the navigation menu and primary and secondary areas.
I used the Developer Tools on Google Chrome and started trying to alter the width, padding and margin of a variety of elements on the page.
The below code was the closest I got to solving the problem. The below only works though if the browser window is certain dimensions. If the browser window is to small then the below code forces the content-area and widget-area to overlap the navigation menu and header.
Is there a way I can modify the below code so it works regardless of the browser window size.
.widget-area {
float: right;
width: 30%;
margin-top: -350px;
}
#primary.content-area {
float: left;
width: 70%;
margin-top: -350px;
}
Or is there another completely different solution?
Change the below css
style.css:1932 #screen and (min-width: 75em)
.site {
max-width: 1153px;
margin: 400px auto; // change this to margin: 5px auto;
padding: 54px 108px;
}
:43 #screen and (min-width: 75em)
.site {
max-width: 1153px;
margin-top: -50px auto; //remove this minus is not recommended
padding: 54px 108px; // change this to padding: 0px 108px 54px 108px;
}
kindly change the above margin and padding
It's much simpler than that:
http://www.rosstheexplorer.com/?custom-css=cedea99283
Line 45: margin-top only accepts 1 property, you specified 2 (50px auto). Just remove the "auto"
I would like a DIV's background-color to change when I hover over it. I can get it to work if I don't set the background-color in the DIV's style property but I don't understand why this stops the hover colour from being applied?
<style>
.hovery {
cursor: pointer;
display: block;
float: left;
margin-bottom: 4px;
margin-right: 10px;
border: 1px solid gray;
border-radius: 6px;
}
.hovery:hover {
background-color: black;
}
</style>
When I create my DIV (in PHP) I'm using the code below and I'm setting the background-color property at the time of creation so that I can set the 'selected' one to a different colour than all the other DIVs:
echo "<div class='hovery' style='background-color: " . ($onthis==$shrow['Name'] ? $_SESSION['branding_buttonColour'] : "#EEEEFF;"). " '>\r\n";
I've discovered that if I don't set the background-color in the code above then the hover colour-change works, but why does setting the background-color prevent the hover colour from working? Aren't they two different things?
This is called specificity and you are giving the whole strength to the inline styling. Avoid it or make javascript tricks (like on hover adding a classname). You can make too this:
.hovery:hover {
background-color: black !important;
}
But I don't like it so much. If the inline styles are mandatory for your requirements, use !important. Otherwise, remove the inline styles.
You're best off adding a class to the element within PHP, then controlling the background-color of that class with CSS.
The added benefits of this is keeping your code clean, avoiding use of inline styles (which over-rides every rule) and you can easily change the class via Javascript which in turn changes the color.
Hi I've been trying to create a smart button menu set in an drupal block that remembers which button has been clicked (which site it is on). For reasons that don't matter, it is not a menu it's an in-block item. I created the following in-line:
<div>Overview</div>
<div>Instruments</div>
<div>Travel</div>
This coupled with the following css produces lovely buttons:
.button {
background-color: #61210b;
color: white;
float:left;
padding: 2px;
border: 2px solid #000000;
border-radius: 5px;
text-shadow: 1px 1px #000000;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: 'verdana';
margin-bottom: 10px;}
.button:hover {
background-color: green;
color: white;}
.button:focus {
background-color: green;
color: white;}
.button:active {
background-color: green;
color: white;}
So everything above works great. However, the green activation color does NOT stay. As soon as I go click it goes back to what it was before. I want it to 'show' the page it is on with it's color change and only the currently chosen button will have the green color. What I have not works great except for that little issue. I've read around on the site a bit and here are some things that do not work:
--> inline php, creates errors link unreadable, if I define a class as selected with a different color, this does NOT work:
Overview
What also does not work is defining an additional class in the <a href > or <div> to make it 'selected', at best if I use the css file and do
.selected a { color: green; }
#selected a { color: green: }
I can permanently change the color to green, which is not what I want at all. I saw the discussion previously of using lists <li id="selected"> to create menues but not only does this not give me very nice buttons like my div format does, it also flat out does not work. See: CSS: How to change colour of active navigation page menu
The color just changes permanently, I only want it to change color if page=page of link. Since I'm using div this means I also cannot use the other pseudo-class-selector tricks like :target or :root. I have a feeling php is the way to go but I don't know why it can't be read in-line from my drupal box item. It has no problems with html or css in-line. Any ideas?
Try this code
CSS
.button:active, .button.selected {
background-color: green;
color: white;
}
PHP
Overview
what you wrote is calling for something else...
.selected a is targeting any element with the class "selected" which is inside an anchor tag, what you mean is an anchor tag which has the class selected = a.selected
ok, so I heard back from our system administrator and Drupal safety settings do not allow for in-line php or java scripting. There is literally no way to do this with div statements. The only way is to delete everything and make a new block of type menu block. In a menu block the psuedo-class :active will stay active if you use css
li .active
otherwise you can try to get php enabled but most drupal areas do not allow that or java scripting (at least it's not allowed where I am).
I have a little problem. At the end of my R script I create an image .png as output. I wanna show this image on my website but sometimes it is drawn, sometimes it is not drawn. I don't understand how it is possible. I`ll put my code:
I insert the image in a div with this features:
#diagramm {
position: relative;
border: 2px solid #333;
border-color: #6495ED;
width: 820px;
height: 370px;
margin: 2px auto;
margin-top: 2em;
background-image: url("/home/daniele/public_html/appweb2013/venn_final/fungo_final.png");
}
Where is the mistake? Can I use a better method?
This is CSS, it only puts specific design rules for an element that has the id diagramm.
So what you've posted is not code so to speak.
In what way do you generate the output? When? what does the user do to generate it etc.
Do you have any javascript or html code you can show?