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>
Related
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 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>
i tried to make a custom navbar since the standart navbar isnt really what i desire. It looks too casual so i try instead of using for the navbar, images.
I cant get them 4 images to line up in a row.
I saw there are 2 types of making it, once is defining a class through CSS and the other one is directly in the index.html. Are there any difrences in those 2 methodes?
Help would be super appericated. I tried like 30 websites with parts of the code but it seems like nothing is working im wondering what i do wrong.
greeting Queen
.navbar {
max-width:960px;
text-align:center;
}
.home {
position:relative;
display: inline-block;
float:left;
padding:10px;
}
.search {
position:relative;
display: inline-block;
pading:10px;
}
.logo {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}
.partner {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
<body>
<div class="navbar">
<div class="navbar-special">
<ul class="nav">
<li class="home"><img src="http://i.imgur.com/GryNQfZ.png" /></li>
<li class="search"><img src="http://i.imgur.com/NfURGQL.png" /></li>
<li class="logo"><img src="http://i.imgur.com/sIwbaop.png" /></li>
<li class="partner"><img src="http://i.imgur.com/Ry9hIzC.png" /></li>
</div> <!-- div closing navbar -->
</div><!-- div closing navbar -->
</body>
http://jsfiddle.net/n32koz7q/1/
As it applys to styling, there are a few caveats which make putting styles in an index.html or an external stylesheet different.
Putting styles in an external stylesheet will (everything else held constant)...
—create a new HTTP request, and the external style sheet will be loaded after the index.html page (given that this page requests the stylesheet).
—change the order at which styles are applied. For example, if you have.
index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
hello world!
</body>
</html>
<style>
.body {color:black;}
</style>
and mystyle.css:
body {
color: white;
}
the body would have a css property of color:black, since that style was loaded last. You can read about this here.
There are a few other differences, but these are probably the ones that are particular to your current use case.
As for your original question: here is an updated fiddle:
http://jsfiddle.net/n32koz7q/2/
You had a lot of unnecessary styling. I would start here, and then build up. Basically, the most basic CSS that your are going to use to get elements to sit inline, in this case, will look like so:
.navbar {
max-width:960px;
text-align:center;
}
li {
display:inline-block;
padding: 10px;
}
Essentially you just want those li elements to sit inline.
Good luck!
Just add the following code:
.navbar-default {
background-color:red;
}
This should get you going.
So, I had a difficult time trying to figure out why a couple of my links were not clickable. I finally figured out that they just needed a 'higher' z-index. I don't really understand why they needed that in order to work though. I'm figuring out (through google-research) that some elements can be 'covered' by other elements. I don't understand how that happened in my code, in particular, and kind of still confused about that whole concept of some elements 'covering' others. Can anyone explain? Here's the relevant HTML and CSS, respectively: (I had trouble with the elements within )
HTML:
<section id="nav_images">
<img id="skull" class="reflectBelow" src="ScumSkull.jpg" alt="Click for scoop" height="94" width="94"/>
<img id="staff" class="reflectBelow" src="ScumStaff.jpg" alt="Click for staff" height="94" width="94">
<img id="bulbs" class="reflectBelow" src="ScumBulbs.jpg" alt="Click for sermons" height="94" width="94">
</section>
<aside id="don8">
<p id="don_P">Make a Donation to Scum</p>
<img id="donate" src="donate.gif" alt="Donate button" height="47" width="147">
</aside>
<aside id="slogans">
<h3>Top Five Rejected Scum of the Earth Slogans</h3>
<p id="slogan_5" class="slogan">5. Emerging from the emergent church</p>
<p class="slogan">4. Our congregation can kick your congregation's ass</p>
<p class="slogan">3. Same old evangelical crap, different package</p>
<p class="slogan">2. Come to see the crazy bathrooms, stay for a sermon</p>
<p class="slogan">1. And you thought mega-churches sucked</p>
</aside>
CSS:
body
{
background-color:#000000;
margin:0;
padding:0;
font-size:100%;
width:100%;
}
main
{
display:block;
max-width:700px;
margin:40px auto 300px auto;
height:650px;
}
img
{
padding:0;
margin:0;
border:none;
float:left; /* Gets rid of space between images */
}
#don8
{
clear:left;
float:right;
position:relative;
top:50px;
width:250px;
height:140px;
border-left:13px solid red;
}
#don_P
{
width: 60px;
position:relative;
top:-10px;
left:60px;
text-align:center;
z-index:2;
}
#don_P a:link, a:hover, a:focus
{
text-decoration:none;
color:white;
}
#donate
{
position:relative;
top:-10px;
left:20px;
z-index:2;
}
#slogans
{
clear:left;
position:relative;
top:50px;
left:35px;
/* border-right: 5px solid red; */
}
.slogan
{
margin-top:0;
margin-bottom:0;
line-height:160%;
}
#slogan_5
{
margin-top:10px;
}
Unless I'm missing some CSS, your links are not covered. Their color turn white on :hover.
#don_P a:link, a:hover, a:focus { color: white; }
The following link shows a nice picture of what it looks like when the 'layer' is visible and overlapping another layer. This 'overlapping' will happen primarily when you force how the browser should render an item by specifying the coordinates where the item should be placed on the page.
http://www.w3.org/wiki/CSS/Properties/z-index
A convenient way to observe how the browser has layered your HTML, you can use Google Chrome developer tools. Open the page in Google Chrome browser, then Right click on the element in question and select "Inspect Element". This will give you a view of the boundaries of that element.
Pretty much all modern browsers have this 'element inspector' feature somewhere. Firefox also has this feature in their dev tools, but also has a fancy tool that can also do this, but in 3D:
https://developer.mozilla.org/en-US/docs/Tools/3D_View
I looked over your code and I see the overlap.
Your problem is that this:
<aside id="slogans">
<h3>Top Five Rejected Scum of the Earth Slogans</h3>
<p id="slogan_5" class="slogan">5. Emerging from the emergent church</p>
<p class="slogan">4. Our congregation can kick your congregation's ass</p>
<p class="slogan">3. Same old evangelical crap, different package</p>
<p class="slogan">2. Come to see the crazy bathrooms, stay for a sermon</p>
<p class="slogan">1. And you thought mega-churches sucked</p>
</aside>
is appearing on top of
<aside id="don8">
<p id="don_P">Make a Donation to Scum</p>
<img id="donate" src="donate.gif" alt="Donate button" height="47" width="147">
</aside>
Here is an analogy. Imagine if you have two sheets of paper stacked on top of each other. When you bring your pen down on them, it only touches the top one.
This is the same for your mouse pointer. When you click on the page, you click on the top element. In your case, the top element isn't the link so you can't click on it.
There are two solutions to this problem.
Limit the width the the overlapping object so it no longer overlaps.
Give your elements z-indexes and position the link on top.
If you are unclear how z-indexes work here is a good link:
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
To put it simply, elements with a higher z-index are positioned above elements with lower one. If there is no z-index, the browser just decides.
This is a login form that I am creating and it already has an image (some logo). I would like to add some background image for the same page to make it beautiful. Unfortunately my CSS does not help me to do it. What should I do to add a background image to my web page when there is already an image
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Login
</title>
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body >
<header >
<h1>Loan Management System </h1>
</header>
<!--This is the image -->
<img src="Images/logo_large.jpg" height="200px" width="200px" title="Logo" class="logo">
<form>
<label>Username</label>
<input type="text" name="username"/>
<label>Password</label>
<input type="password" name="password"/>
<button type="submit" name="login">Login</button>
</form>
</body>
</html>
CSS
header
{
position:absolute;
font-size:13px;
color:#000040;
text-shadow:5px 5px 5px #CCCCD9;
margin-top:80px;
margin-left:280px;
}
body
{
position:relative;
font-family:Georgia,serif;
background-color:#A52A2A;
background-image:url(Images/login2.jpg);
}
.logo
{
position:absolute;
display:block;
padding:5px;
}
form
{
position:absolute;
width:300px;
height:300px;
border:5px solid #194775;
border-radius:20px;
margin-top:161px;
margin-left:362px;
box-shadow:2px 2px 2px #194775;
}
label,input
{
display:block;
margin-top:25px;
margin-left:55px;
}
label
{
font-weight:700;
}
input
{
width:200px;
height:2em;
border:2px solid #036;
border-radius:10px;
}
input:hover
{
border-radius:10px;
border-color:#FF8A00;
}
input:focus
{
background-color:#DBDBFF;
}
button
{
display:block;
margin-top:25px;
margin-left:55px;
width:90px;
height:40px;
color:#FFF;
border:2px solid #000;
border-radius:10px;
background-color:#243D91;
}
button:hover
{
background-color:#0FCCF0;
border-color:#003D91;
}
I'm posting this as an "answer" because it's simply too long for a comment. As I mentioned in my comments, css paths to urls are parsed relative to the directory where the css is stored rather than the directory of the page that includes it. As an example:
You have a website with a root and 2 subfolders, CSS and Images. Your directory structure might look like:
mypage.html
myotherpage.html
CSS\styles.css
CSS\layout.css
Images\login.jpg
Images\login2.jpg
If mypage.html has a reference link to styles.css, then any url images that are included from styles.css will need to be referenced from the CSS directory.
background-image: url(Images/login2.jpg);
/* This fails because there is no CSS\Images directory */
background-image: url(../Images/login2.jpg);
/* This works because that is the natural path to the Images directory from CSS */
To avoid this confusion, I prefer to use absolute paths in my css whenever possible, but this becomes understandably difficult when you have a potential to cross domain or protocol boundaries. If you have multiple domains pointing to the same site folder, then you'll have a style reference from myfirstsite.com to mysecondsite.com and this may be inappropriate (particularly if branding is an issue). You may also have an https part of the site that would then have a reference to a non-https version of the site which would create ssl errors/alerts.
Well, the obvious suspect would be that you check the path to the image.. If thats alright then you might want to have a look at the z-index property of CSS. It deals with the way images are ordered in vertical space..You can read about it here ..In your case the body background would be at the back(z-index:0) and then the logo at the front(z-index:1) .
I think as mentioned on the comments. You should check your path to see if it renders.
Check out my Fiddle
body{
position:relative;
font-family:Georgia,serif;
/* I have used background-color property and it gets applied, but I really do not want it*/
background-color:brown;
/* Here is my background image.But it is not applied in the page */
background-image:url("https://mozorg.cdn.mozilla.net/media/img/firefox/os/bg/1400/birthday.jpg");
}