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;
}
Related
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>
I'm trying to figure out why I can't fill this spot, despite trying many things I have been unable to figure out how to fix it. I tried padding the top, but to no avail. I have provided the code below as well as a picture of the space I'm talking about. In the picture there's a white space between the header 2 and the gray area that has a brief summary. I have tried padding and also increasing the height of the background color, but it doesn't seem to work. Thank you in advance for reading this and I really do thank you for taking the time to help me figure this out.
$(document).ready(function()){
$("figure img + figcaption").prev().addClass('hasCaption');
});
.body{
margin: 0px;
}
.homeButton{
width: 40px;
}
#MidPort{
background-image: url("http://www.geocities.ws/spahealthcare/pic/dark-green-home-button.png");
background-size:cover;
position:absolute;
margin-left:1565px;
bottom:10px;
}
.topnav{
font-size: 20px;
font-family: Times New Roman;
position:fixed;
top 0;
width:100%;
}
#bg2{
background-color:red;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow: hidden;
background-color: #333
}
li{
float:left;
border-right:1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.active{
background-color:#4CAF50;
}
li a:hover:not(.active)
{
background-color: #111;
}
li:last-child{
border-right:none;
}
#margintop1{
margin-top: .5cm;
font-family: Gadget;
}
.jumbotron{
height:175px;
background-color:#808080;
}
hr.style17 {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr.style17:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
img.hasCaption {
padding-bottom: 50px;
}
figcaption {
position: absolute;
left: 14px;
right: 14px;
bottom: 16px;
background-color: white;
text-align: center;
color: blue;
font-family: 'Reenie Beanie', cursive;
font-size: 30px;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
left: 0;
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
transform:rotate(-5deg);
}
img {
border-color: white;
border-width: 15px;
-moz-border-image: url(http://tobias-reinhardt.de/img/frame.png) 15 stretch;
border-image: url(http://tobias-reinhardt.de/img/frame.png) 15 stretch;
border-style: solid;
margin: auto;
}
#imgR{
margin-left:1285px;
height:400px;
}
font{
font-family:Gadget;
}
section{
background-color:#00FFFF;
margin-bottom:10cm;
font-family:Gadget;
}
}
<!-- Check to see if the navigation bar remains at the bottom if I use the nav class instead of ul. If not, revert back to ul for when the user scrolls down-->
<div>
<header>
<!--<div class="container">-->
<h2 class="topnav" id="cs2">
<ul>
<li><a class="active" href="/home">Home</a></li>
<li>About Me</li>
<li>Contact</li>
<li id="MidPort"></li>
</ul>
</h2>
</header>
</div>
<body>
<div class="intro-text">
<div class="jumbotron">
<div>
<p id="margintop1"style="margin-right:200px;">
<font color="white">Front-End Developer and Economist, with experience in project management, machine learning, and leadership roles; devoted to functional programming and analyzing mathematical models to solve emerging economic problems
</font>
</p>
<hr class="style17"/>
</div>
<figure>
<img src="http://i.maniadb.com/images/artist/116/116122.jpg" id="imgR">
</figure>
</div>
</div>
<div id="midSec">
<section>
<h2>
<center>
<font color="#2F4F4F" size="20">
Portfolio
</font>
</center>
</h2>
</section>
</div>
</body>
<!--setup a home button at the bottom-->
[![Space is in between Portfolio and the brief summary][1]][1]
You're using an h2 in your code that has a margin.
h2{margin: 0;}
This will fix it.
h2{margin-top:0}
will fix the issue
h2 by default has a margin top . Remove that.
Also, your HTML is not correct . ( that's why i post this as an answer, to explain to the op the problems from his html )
The biggest problem is that you nested ul inside h2 . This practice is not valid.
As stated in the doc
Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.
Heading tags like h1,h2 etc. are pharsing content, ul is a flow content . So you cannot put ul inside h2
You can check your HTML here > HTML validator and check docs here > documentation
Second problem is that you write <li>About Me</li>
So you first open li, then a but you close first the li and then the a. You need to close the a before closing the li. a being a child of li . Correct form :
<li>About Me</li>
Another problem is using tags that are no longer supported in HTML5 . font,center . ( also the use of size is not supported either) You either use inline styles for example <h2 style="font-size:10px;text-align:center"> or you can use CSS styles separately .
These are just the problems i see from a first look over your code
I'm trying to move to a specific location on the page after a link is clicked.
Here's my website:
http://violetoeuvre.com/
I want the page to jump to the writing section when the top writing link is clicked, and same thing for contact, similar to this:
http://jsfiddle.net/4ygcf/
But, when I sub in the appropriate ids, it's not working. Here's my html:
<div class="wrapper_nav_box">
<div id="nav_menu" id="nav_box_1">WRITING |</div>
and css:
.side_nav_contact {
display:block;
float:left;
background:rgba(100,255,255,0);
margin-top: 840px;
width:200px;
height: 50px;
}
#nav_box_l {
display: block;
float:left;
width:247px;
text-align: right;
padding-top: 169px;
margin-top: 0;
}
#nav_menu a:link{
font-family: 'Playfair Display', serif;
font-size: 30px;
font-weight: 100;
color:rgba (255,255,255,1);
text-decoration: none;
text-align: center;
letter-spacing:0.2em;
}
#nav_menu a:hover{
font-family: 'Playfair Display', sans-serif;
font-size: 30px;
font-style: italic;
font-weight: 100;
color:rgba (255,255,255,1);
text-decoration: none;
text-align: center;
letter-spacing:0.2em;
}
I suspect that this is because I'm using two ids (#nav_box_l and #nav_menu). #nav_menu is how I'm styling the links, while #nav_box_l contains "Writing." I tried combining but this doesn't work. Should I just use one? Does this technique not work if I want to jump to a class (.side_nav_content), not id?
Thanks.
"Writing" link:
home_writing is currently a class, change that to an id <div id="home_writing"> and it will work
"About" link:
You have set the link to <a href="home_text"... rather than <a href="#home_text", stick the # in and that should work too
"Contact" link:
You don't have a div called #contact, which is what you are linking to, change the <div class="home_contact"> to <div id="contact"> and that one should work too
An HTML element may only have one id and only one element may have that id. You can use a classfor the styling.
.nav_box_l {
display: block;
float:left;
width:247px;
text-align: right;
padding-top: 169px;
margin-top: 0;
}
<div id="nav_menu" class="nav_box_1">...</div>
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
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.