I have a navigation bar. Horizontal.
I have an image on the left. Text on the right. Show below:
I want to take the image so it is position slightly underneath the text, so basically the image needs to slide a tiny bit under the left part of the text. Shown below:
My current HTML is:
<p class="menu_text">
<img class="tgss_icon" src="http://www.thegoldservicescholarship.co.uk/images/icon.jpg" alt="TGSS Icon"/>
<a class="menu_links" href="contact_us.php">Contact Us</a>
</p>
My current CSS is:
img.tgss_icon{
height: 30px;
width: 35px;
padding-bottom: 7px;
}
a.menu_links:link { color: #58595B; text-decoration: none;}
a.menu_links:visited { color: #58595B; text-decoration: none; }
a.menu_links:active { color: #E6BD13; text-decoration: none; }
a.menu_links:hover { color: #E6BD13; text-decoration: none; }
p.menu_text{
font-size: 15pt;
/*color: #58595B;*/
}
Thanks in advance! Chris.
You can do this with a negative margin on the link.
a.menu_links { margin-left: -20px; }
Demo
Related
I am working on an old website for a client and I have run into a problem creating a button link. I considered creating a box with text in it, but I cannot produce text in the graphic that is as clear as the text generated in html. I have, therefore, created two boxes with blank space to accommodate the text. The text is superimposed over the box. The relevant code follows here.
.style1 {
font-size: 14px;
font-weight: bold;
}
.container {
position: relative;
text-align: center;
color: white;
font-weight: bold;
line-height: 100%;
}
.container:hover {
color: #000000;
}
.centered {
position: absolute;
top: 49%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
color: white;
}
.initials {
font-size: 16px;
}
.card {
width: 170px;
height: 100px;
background: url("otec_link.png") no-repeat;
display: inline-block;
}
.card:hover {
background: url("otec_link_gray.png") no-repeat;
color: black;
text-decoration: none;
}
.words {
color: #FFFFFF;
text-decoration: none;
}
.words:hover {
color: #000000;
text-decoration: none;
}
<div class="container">
<div>
<div class="centered" style="text-align:left;">
<span class="initials">O</span>nline<br><span class="initials">T</span>eacher<br><span class="initials">E</span>ducation<br><span class="initials">C</span>enter</div>
<span class="card"></span>
</div>
</div>
You can run the code to see the issues.
Here is what I am looking for:
A red box with white text.
On mouseover, a gray box with black text with anchor link available text and graphic.
Here is what I am getting:
A red box with white text.
On mousover the box, a gray box with white text, and when the pointer passes over the text it turns black and the red box returns.
There is a gap in the anchor link between the lines of text.
I have tried to create what is basically two links, one for the box and the other for the text to get around the font quality issue.
The website is comechildrensing.com. You can go there to see the issue in context. It is the top button in the vertical red menu bar on the left. If there is a tool I can use to make clean, sharp text in the graphics, it would make the whole mess go away. Otherwise, I am open to any solution that will resolve the problems.
Right now you've created three different hovers for three different elements that the user can hover over (pretty much) individually. It's better to do one hover and have it target other elements instead.
.container:hover .card {
background: url("otec_link_gray.png") no-repeat;
}
.container:hover .words {
color: black;
text-decoration: none;
}
I have a design below which I have to replicate in HTML/CSS.
The above design is basically a text with arrow button at the left.
I have replicated the text in fiddle (which is extremely simple). I am wondering how can I put the arrow left to the text ?
I tried following this tutorial from w3schools but somehow I wasn't able to replicate the same arrow.
The CSS code for the text (which I have used in the fiddle):
.share {
padding-left: 6%;
padding-top: 5%;
font-family: Roboto-Regular;
font-size: 16px;
color: #4676F2;
}
Please try the following code. The unicode arrow is not precisely the way you mocked-up but close. If you need the arrow to be precise, you can switch the .share::before rule to use a background image.
.share {
padding-left: 6%;
padding-top: 5%;
font-family: Roboto-Regular;
font-size: 16px;
color: #4676F2;
}
.share::before {
content: "\27A6";
color:#000;
padding-right:8px;
}
<div class="share">Share This Article</div>
Based on the other answer, this one lays the font entity out right.
As discussed in your comments above, the arrow is not the same exact one you are looking for. You need to cut it out and create an image to add to the image tag, or find the source of the image in text form.
.share {
padding-left: 6%;
padding-top: 5%;
font-family: Roboto-Regular;
font-size: 16px;
color: #4676F2;
}
.share p::before {
content: "\27A6";
color:#000;
padding-right:8px;
font-size: 25px;
vertical-align: middle;
}
.share p {
vertical-align: middle;
}
<div class="share">
<p>Share This Article</p>
</div>
<div class="share">
<p><img src=""/>Share This Article</p>
</div>
The ahref link under the h2 tag only appears when you hover over that place, otherwise it disappears. How do I remove the disappearing behavior ? I want to make it normal and appear all the time.
Here is the Html
<div class="doctor_name">
<h1> {{doctor.name}} </h1>
<h2 style="text-transform: uppercase;"> {{doctor.specialization.name}} </h2>
<h2> {{clinic.name}}</h2>
<h2 style="color: grey;"> {{doctor.clinic.address_normal}} </h2>
Here is the css
.doctor_name > h2 {
margin-top: -1px;
font-size: 1.20em;
margin-bottom: 3px;
margin-left: 1px;
}
.doctor_name{
width: 303px;
margin-left: 200px;
margin-top: -234px;
padding-bottom: 100px;
}
.doctor_name > h1{
margin-top: 10px;
font-size: 2.2em;
}
Problem:
Link is white on a white background.
Solution:
Give it css coloring and decoration to stand out within the associated position. Obviously once you change the color it will be visible no matter, but you are more than welcome to change/add more stylings!
h2 > a{
color: green;
text-decoration: underline;
}
Try this
h2 > a{
color:red;
text-decoration:underline;
}
If it does not work, try this
h2 > a{
color:red!important;
text-decoration: underline!important;
}
I've got an image of a house I want to display on my navbar as the 'home' link. I've entered some CSS to implement this but it doesn't seem to work. Could anyone help me display the image? See the image and CSS code below for clarification.
The light blue box is where the little white house should be. See below for CSS
html, body
{
padding: 0;
margin-right: auto;
margin-left: auto;
}
.navbar
{
height: 48px;
width: 100%;
background-color: #294052;
text-align: center;
vertical-align: middle;
margin-bottom: 10px;
}
li
{
display: inline;
position: relative;
padding: 20px;
border-right: inset 2px white;
font-size: 20px;
font-weight: normal;
font-family: sans-serif;
vertical-align: middle;
padding-top: 31px;
padding-bottom: 14px;
}
a
{
text-decoration: none;
color: white;
}
li:hover
{
text-decoration: underline;
background-color: #447294;
}
li.home
{
background-color: #447294;
background-image: url('home.png');
}
span
{
font-weight: bold;
}
I've tried using the display:block fix but it just messes up the rest of my navbar.
And the HTML code...
<div class="navbar">
<ul>
<li class="home"></li>
<li>ABOUT</li>
<li>CyMAL: MUSEUMS, ARCHIVES AND LIBRARIES</li>
<li>CONTACT</li>
</ul>
</div>
To start debugging, I'd first try to use absolute URL to make sure that the image can be loaded.
li.home
{
background-color: #447294;
background-image: url('full_path_to_image/home.png');
}
Also, please provide HTML code, ideally make a ready demo at http://jsfiddle.net/ (or any other similar service). That way you'll we can help you better.
EDIT: After you have added the HTML code, the problem seems to be indeed the path to your image.
Here is a working demo: http://jsfiddle.net/tBNSU/
Your background image is present in li.home; but li.home isn't wide enough to display anything. Background images are like background color - they won't change the shape of the content.
Try adding some content:
<li class="home">home</li>
Or change the alignment of your bg image to center center to perhaps see it more clearly.
I have a newsfeed which is obviously organized by an . When the user hovers over each of the items, the background is highlighted. I'd also like to have a small "x" in the top right hand corner of each item, only shown when hovered. This "x" would be a delete button to remove that post.
Right now I just have some basic html stating: <div class="hide-button">x</div>
I know that I don't want the "x" displayed in the html, but rather have it in the CSS. So I have the <li> css below for hovering, as well as the CSS for the hide button. I'd like to know the best method to integrate the hide button div into the <li>
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: gray;
}
.hide-button a{
text-decoration: none;
color:gray;
}
.hide-button a:hover {
text-decoration: underline;
color:gray;
}
and the list:
.newsfeedlist li {
background: white;
border-bottom: 1px solid #E4E4E4;
padding: 12px 0px 12px 0px;
overflow: hidden;
}
.newsfeedlist li:hover {
background-color: #F3F3F3;
}
Thank you so much!!!!!
Presuming your delete buttons are inside another container you could do something like
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: tray;
display: none;
}
... the other bits of CSS ...
.newsfeedlist li:hover .hide-button {
display: block;
}
Modifying the close button to be hidden by default and then when hovering on a list item you set the display back again on the close button.
Hope this makes sense
Tim
You might really be in need of this:
Demo at jsFiddle.net
I modified an example and tushed it up for multiple content areas or images.
But hide-button element in the li and do
.newsfeedlist li:hover .hide-button {
display: inline-block;
}
and add display: none; to .hide-button
Otherwise, there's always javascript.