I am designing a very basic webpage, with basic HTML and CSS.
So, I have designated a subpage for my "blog":jx-s-potato.glitch.me
On the page,by writing the following code:
<body>
<h1 id="title1"><u>The Blog</u></h1>
</body>
I expected "The Blog" to show up with an underline.However, only "The Blo" got underlined. I thought that this was a problem with my browser so I used Safari to view it.The problem remained.
Is there something wrong about my code? Please help!
A workaround would be to use some styling and mimic the underline.
I used Pseudo-element after here, but you can do whatever you like.
u{
position:relative;
text-decoration:none;
}
u:after{
content: '';
width: 100%;
height:2px;
background-color: black;
position:absolute;
left:0;
bottom:4px;
}
<h1 id="title1"><u>The Blog</u></h1>
Related
I am trying to convert an existing element in my HTML page to a link, the element has additional css functions to scale it when you hover your mouse over it.
<!DOCTYPE html>
<html>
<head>
<style>
.lefthotbarbtn{
float:left;
padding:12px;
font-family:Verdana,sans-serif;
transition:0.3s;
}
.lefthotbarbtn:hover{
float:left;
padding:12px 32px;
font-family:Verdana,sans-serif;
background-color:#d3d3d3;
border-radius:69px;
color:#0f0f0f;
font-family:Verdana,sans-serif;
}
.contactusbtn{
float:right;
padding:12px;
background-color:white;
border-radius:69px;
color:black;
font-family:Verdana,sans-serif;
transition:0.3s;
}
.contactusbtn:hover{
float:right;
border-radius:0px;
padding:12px 24px;
background-color:#d3d3d3;
border-radius:69px;
color:#0f0f0f;
font-family:Verdana,sans-serif;
}
</style>
</head>
<body>
<div class="lefthotbarbtn">Home</div>
<div class="lefthotbarbtn">Who Are We?</div>
<div class="lefthotbarbtn">Products</div>
<div class="lefthotbarbtn">Help!</div>
<div class="contactusbtn">contact us</div>
</div>
</body>
</html>
I have tried various ways of converting each individual into a link without deleting existing information but whenever I did, the text would either disappear or move. What I want to be able to do is simply have the text as a link without changing the appearance of it and I can't figure out how.
Please mention the things you have tried in future.
I'll say a few things:
If all you want is to make them into link simply use the a link tag.
To me it seems like your building a header. Use nav with ul li with a. Keeps things clean and generally good practice.
If you want to go down this route you can can convert div to a and then use css to design the a however you like.
But If there is a problem with that try you can also do this (Not a good idea in general, why?):
<div class="lefthotbarbtn">Who Are We?</div>
First of all I'm using Django, and I've my CSS inside of my HTML file.
Here's what my situation looks like as of right now: I've finished setting a sidebar for the dashboard, aka the members area, and I want to offer users the option to show or hide the latter, just like most popular website nowadays do, including Youtube.
I've the following code in the body:
<div class="toggle-btn">
<span></span>
<span></span>
<span></span>
</div>
And the following one in the head
<style type="text/css">
.toggle-btn {
position:absolute;
left:230px;
top:20px;
}
.toggle-btn span {
display:block;
width:30px;
height:5px;
background:#151719;
margin: 5px 0px;
}
</style>
It is indeed supposed to look just like this , but nothing shows up next to the sidebar. If someone could point out what I might have done wrong, or missed doing, I would super appreciate it.
I thought of using strike through in Rs symbol
Rs
But it is not perfectly replicating the symbol as it has the strike through it a little higher.
So what is the best option here if I want to use the symbol in my ionic app and similarly in html page as well?
I have spent a lot of time searching for html entity for it but it is not available I guess.
Try the misc symbols in HTML with the <s>, <del> or <strike>, tag whichever works for you.
<html>
<body>
<p>₹</p>
<strike>₹</strike><br>
<s>₹</s><br>
<del>₹</del><br>
<p>₨</p>
<strike>₨</strike><br>
<s>₨</s><br>
<del>₨</del>
</body>
</html>
I could not find a simple way as Gowtham Shiva suggested but Here is an example css I used to make it:
.currency {
overflow:hidden;
position : relative;
}
.currency span:after {
background-color: #000000;
content: "";
height: 1px;
width: 10px;
position:absolute;
top: 6px;
left:1px;
}
<p class="currency"><span>Rs</span></p>
Here is the code pen of the code
I am wondering if any of you have any tricks to make this happen, or if I'm completely overthinking this.
I have MANY images being used and the most efficient (and easiest) way to make these images show up is to use the CSS background:url("link"); property where link is the proper link to my image file. This prevents cluttering of my html files as well.
The issue is that the above code is found in over 50 different ids, each pointing to a different image and I need to resize the images, however I would REALLY like to not have to put the following code under each and every id.
background-size:180px 239px;
background-repeat:no-repeat;
To put this simply:
I have CSS that looks something like this...
My "ID"s
#image1
{
background:url("../Images/image1.png");
}
#image2
{
background:url("../Images/image2.png");
}
#image3
{
background:url("../Images/image3.png");
}
My class
.myClass
{
width:180px;
height:239px;
background-size:180px 239px;
background-repeat:no-repeat;
}
Note that by entering this code all will seem normal, however if you change the values in background-size (say to 100px 239px you will notice the issue that I am experiencing)
And a typical use of this in html would be as the following:
<div id="image1" class="myClass"></div>
A jsfiddle of this issue can be found here: jsfiddle
The anticipated result is shown under the text in the fiddle.
How would I go about coding this so that it remains clean?
I would like to note that I am trying to keep my CSS and JS separate. I am looking for a purely CSS way for coding this. I need control of all the id's background-properties from one single location.
Any help with this is greatly appreciated, thank you.
Change background to background-image and it will work :)
#image1
{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Bolognese_Image.jpg/180px-Bolognese_Image.jpg");
}
#image2
{
background-image:url("http://www.phy.duke.edu/~kolena/Recommended.gif");
}
.myClass
{
width:180px;
height:239px;
background-size:100px 239px;
background-repeat:no-repeat;
border:2px solid red;
}
/*------------------------------------*/
#thisIsWhatIWantItToLookLike
{
background-image:url("http://www.senoja.nl/images/mainecoons/galleryxamina/xamina1.jpg");
background-size:100px 239px;
background-repeat:no-repeat;
}
.mySadClass
{
width:180px;
height:239px;
border:2px solid blue;
}
<div id="image1" class="myClass"></div>
<div id="image2" class="myClass"></div>
<p>This above images should show up like the one below does, squished</p>
<div id="thisIsWhatIWantItToLookLike" class="mySadClass"></div>
background-size: 100px 239px !important;
background-repeat: no-repeat !Important;
Add these two properties to your class
DEMO
I'm attempting to style a button with CSS. Here is the HTML code for the button:
<button class='custombtn' name="doLogin" type="submit" id="doLogin3" value="Login">Login</button>
Here is the CSS code.
.custombtn {
width:163px;
height:43px;
background-image:url('images/normal.png');
background-color:#d3d3d3;
}
.custombtn:hover {
background-image:url('images/hover.png');
}
.custombtn:active {
background-image:url('images/click.png');
}
I thought everything was fine & dandy, until I viewed the results.
Instead of something like this with text on it:
It looks like this:
I've been reading fixes for these online for around an hour and a half, however none of them have worked. I know it's possible to style it to look like this, I just need to find a way.
normal.png
hover.png
click.png
You need to explicitly set border:none; background-color:transparent; on .custombtn.
You need to set the border to none. That should definitely solve the problem and make sure there is no white space in the image itself.
I think the button's background and borders are the cause of your headache.
Try something like this:
.custombtn {
margin: 10px;
width:163px;
height:43px;
background-image:url('images/normal.png');
background-color: transparent;
border: none;
}
.custombtn:hover {
background-image:url('images/hover.png');
}
.custombtn:active {
background-image:url('images/click.png');
}