I have seen this question a lot in your forums but, all the answers and even the issues are far more advanced that my knowledge.
I have just started learning html and css, so I came across this page:
HTML CSS - Responsive buttons (grid)
I liked the design so I decided to use it.
Here is the problem: I am running Wamp64. Running a localhost server and database.
However, I want the localhost/index.html page to give me the choice of going to different pages in the localhost using the buttons mentioned above. For example. I click "test 01" and it would take me to "http://localhost/test01", which in turn is connected to a different database. I clik on Test 2, and it would go to the test02 directory in localhost, connected to database test02, and so on.
Using the code above I changed the href to my address (see below), but when I click them, nothing happens:
html:
<link rel="stylesheet" type="text/css" href="css/styles.css" >
<div class="middle">
<center>
<button type="button3" class="button3">
Test 1
</button>
<button type="button3" class="button3">
Test 2
</button>
<button type="button3" class="button3">
309
</button>
<button type="button3" class="button3">
304
</button>
<button type="button3" class="button3">
307
</button>
<button type="button3" class="button3">
310
</button>
<button type="button3" class="button3">
311
</button>
<button type="button3" class="button3">
312
</button>
</center>
</div>
And this is the CSS:
.button {
height: 40px;
width: 130px;
margin-bottom: 3%;
background-color: #7C8082;
font-size: 100%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
border-color: #ffffff;
}
.button:hover {
background-color: #474240;
font-family: 'Muli', sans-serif;
}
.button1 {
height: 40px;
width: 70px;
background-color: #7C8082;
font-size: 100%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
margin-top:5px;
}
.button1:hover {
background-color: #474240;
}
.button3 {
height: 80px;
width: 30%;
background-color: #7C8082;
font-size: 200%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
margin-top:10px;
}
.button3:hover {
background-color: #474240;
}
I have tried renaming the links, change the href to action OnClick, even the straight html of 'form method="link" action="http://localhost/test01/index.php> , but the only thing that happens is that, the button reacts to my click but doesn't redirect me.
What am I doing wrong?
try it,
link rel="stylesheet" type="text/css" href="css/styles.css" >
<div class="middle">
<center>
<a href="304.html" class ="button3" >304</a>
<a href="309.html" class ="button3" > 309</a>
</center>
</div>
did it works ?
When you're doing 307 only the "309" is the clickable link to the webpages and the buttons are basically doing nothing at all.
you can apply a button like style to these links by putting the class name in your links
You can try this below but you may need to update the css to your liking =\
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<header id="header">
<div class="middle">
<center>
Test 1
Test 2
309
304
307
310
311
312
</center>
</div>
</html>
You dont have to place an a-tag between a button-tag. Its either a button or a link.
Check HTML button Tag on w3schools for more info.
<button type="button">Click Me!</button>
Check HTML a Tag on w3schools for more info.
Visit W3Schools.com!
Related
I am trying to finish a project but I am stuck on the final step.
All I want to do is put some text on the side of an interactive google map. However so far no matter what I have tried the text stays underneath. Here is the HTML code:
<!--Reach out section begins-->
<section id="reach-out" class="contact">
<h2 class="section-title secondary-border">
<p>Reach Out</h2></p>
<div class="contact/info">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12182.
30520634488!2d-74.0652613!3d40.2407219!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!5e0!3m2!1sen!2sus!4v1561060983193!5m2!1sen!2sus"
>
</iframe>
</div>
<div>
<h3>Pump Buddy</h3>
<p>
Any questions or concerns before signing up? <br />
Let us know, and we will be happy to talk to you.
</p>
<address><!-- <address>: Defines the contact information
for the author or owner of the document or parent element.-->
55 Main Street<br />
Some Town, CA<br />
12345<br />
P: 555.PUMP.BUDZ (555.786.2839)<br />
E: info#pumpbuddy.io
<!-- Using the mailto: prefix in the anchor tag's href attribute
instructs the browser to open the default mail client application
upon clicking the link and then populates the address field with
the email address listed in the href value. -->
</address>
</div>
</section>
</body>
and this is the corresponding CSS:
/* REACH OUT STYLES START */
.contact {
text-align: center;
background: #024e76;
}
.contact h2 {
color: #fce138;
}
.contact-info iframe {
width: 400px;
height: 400px;
}
/* This is a potentially
dangerous choice due to possible side effects
(unless a global rule is needed). By using the
class (contact-info) as the CSS selector, also called a class
selector, we can safely target the <iframe> that
is a descendant or child of the element with this class.*/
.contact-info div {
width: 410px;
display: inline-block;
vertical-align: top;
text-align: left;
margin: 30px 0 0 60px;
color: white;
}
.contact-info h3 {
color: #fce138;
font-size: 32px;
}
.contact-info p, .contact-info address {
margin: 20px 0;
line-height: 1.5;
font-size: 20px;
font-style: normal;
}
.contact-info a {
color: #fce138;
}
/* REACH OUT STYLES END */
Any kind of help would be greatly appreciated!
Try this:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<h2 class="text-center mb-5">Reach Out</h2>
<div class="row">
<div class="col">
<div class="text-right">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12182.
30520634488!2d-74.0652613!3d40.2407219!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!5e0!3m2!1sen!2sus!4v1561060983193!5m2!1sen!2sus"
></iframe>
</div>
</div>
<div class="col">
<div class="">
<h3>Pump Buddy</h3>
<p>Any questions or concerns before signing up? <br> Let us know, and we will be happy to talk to you.</p>
<address>
55 Main Street<br>
Some Town, CA<br>
12345<br>
P: 555.PUMP.BUDZ (555.786.2839)<br>
E: info#pumpbuddy.io
</address>
</div>
</div>
</div>
</div>
</body>
</html>
Use z-index and set position property to absolute or fixed for the text you want to display over the map.
I am using Thunderbird as my primary work mail client. I have just created a new HTML signature, which shows correctly in the Thunderbird, in Opera and in an online HTML Viewer but not on GMail. I would be very grateful if anyone could point me in the direction of what the problem is about. I have attached the .html signature file.
EDIT: I realized that I didn't specify the problem: when I inspect the elements in Opera on the GMail web inbox I see that the whole text is formated to Arial, 12.8 px while losing the different color on the first line (class = .name).
My CSS is very rusty so I suspect the error is on my side...
EDIT 2: code below as corrected by Tim Gerhard (thanks a lot!)
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
.normal{font-family:"Arial"; font-size:9pt; line-height:1.25; color:#606060; font-weight:400}
.name{font-size:10.5pt; color:rgb(119,187,65); font-weight:700;}
.link{color:rgb(17,85,204)}
</style>
</head>
<body>
<div class="normal">
<span class="name">Rostislav Janda</span></br>
Obchodní zástupce</br></br>
<a style="link"; href="tel:+420%20721%20604%20707" value="+420721604707" target="_blank">+420 721 604 707</br>
<a style="link"; href="http://www.iqbudovy.cz"> www.iqbudovy.cz</a>
</br></br>
IQ Budovy s.r.o.</br>
<a style="link"; href="[map link]">Mečířova 5, 612 00 Brno</a></br></br>
<img alt="IQ_Logo" src="[image address]">
<br><br><br>
</div>
</body>
</html>
Edit:
You can use inline stylings to style your E-Mail as classnames aren't fully supported (as far as I', concerned). Use style="color:red" instead of classes. Inline should work with every Mail program.
Your html was full of errors which probably caused the issue.
I took the time to fix it and this is the (now correct) markup:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
.normal {
font-family: "Arial";
font-size: 9pt;
line-height: 1.25;
color: #606060;
font-weight: 400;
}
.name {
font-size: 10.5pt;
color: rgb(119, 187, 65);
font-weight: 700;
}
.link {
color: rgb(17, 85, 204);
}
</style>
</head>
<body>
<div class="normal">
<span class="name">Rostislav Janda</span><br/>
Obchodní zástupce<br/>
<br/>
<a class="link" href="tel:+420%20721%20604%20707" value="+420721604707" target="_blank">+420 721 604 707</a><br/>
<a class="link" href="http://www.iqbudovy.cz"> www.iqbudovy.cz</a>
<br/>
<br/>
IQ Budovy s.r.o.<br/>
<a class="link" href="[map link]">Mečířova 5, 612 00 Brno</a><br/>
<br/>
<img alt="IQ_Logo" src="[image address]"/>
<br><br><br>
</div>
</body>
</html>
What was wrong?:
You use the <br> tag wrong. It's <br/> and not </br>
One of your image tags was not closed properly
One of your hyperlinks (<a>) was not closed
You use style="" instead of class=""
As i said, when i add target="_blank" in my code, it still opens in the save window that it was clicked in. I have tried placing the target="_blank in the front and in the back of the code, but i doesnt seem to get it to work. Can you help me? Here is the HTML that i am using: `
<!doctype html>
<html>
<head>
<title>TacoMannen</title>
<link rel="stylesheet" type="text/css" href="\TacoSite CSS.css">
</head>
<body>
<br>
<button target="_blank" class="button Kalender disabled" onclick="location.href='/kalender'" >Kalender</button>
<button target="_blank" class="button blogg" onclick="location.href='/blogg'" >Blogg</button>
<button target="_blank" class="button kontakt" onclick="location.href='/kontakt-meg'" >Kontakt Meg</button>
<button target="_blank" onclick="location.href='https://www.youtube.com/channel/UC1T-CxkwZ8fLDzlmIOM2Rxw?view_as=subscriber'" type="button" >Min Kanal</button>
<br>
</body>
</html>
And here is the CSS that i am using:
.button {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button:hover {
background-color: #4CAF50;
color: white;
}
And a snippet if you need it:
.button {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button:hover {
background-color: #4CAF50;
color: white;
}
<!doctype html>
<html>
<head>
<title>TacoMannen</title>
<link rel="stylesheet" type="text/css" href="\TacoSite CSS.css">
</head>
<body>
<br>
<button target="_blank" class="button Kalender disabled" onclick="location.href='/kalender'">Kalender</button>
<button target="_blank" class="button blogg" onclick="location.href='/blogg'">Blogg</button>
<button target="_blank" class="button kontakt" onclick="location.href='/kontakt-meg'">Kontakt Meg</button>
<button target="_blank" onclick="location.href='https://www.youtube.com/channel/UC1T-CxkwZ8fLDzlmIOM2Rxw?view_as=subscriber'" type="button">Min Kanal</button>
<br>
</body>
</html>
And if people could point out other errors that i am not aware of, that would be great :-)
You have to use <a> tag and not <button> tag, as they don't have target attribute or href. You are instructing the page to open using JavaScript and not the normal href. You have two options:
Change it to <a href="">.
<a target="_blank" class="button Kalender disabled" href="/kalender">Kalender</a>
Use window.open for the <button>.
<button class="button Kalender disabled" onclick="window.open('/kalender');" >Kalender</button>
I saw this post Navigation Menu CSS loads slowly, causes it to align vertically for a few seconds?
Tried it but it didn't help.
Using it in asp.net project.
Site.Master code:
<head>
<style>
.body {
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
.navbar {
margin-bottom: 0;
background-color: black;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 2px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: black !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #fff !important;
background-color: #fbb534 !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
</style>
</head>
<body data-target=".navbar">
<header>
<nav class="navbar navbar-default" style="margin-bottom: 0px; clear: none; background-color: white; border-color: white;">
<div class="container" style="margin-left: 0px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="../../Images/Logo.png" width="130" height="40" style="margin-right: 40px;" />
</div>
<div class="collapse navbar-collapse" id="myNavbar" >
<ul class="nav navbar-nav navbar-left">
<li style="padding-left: inherit"><a id="A1" runat="server" href="~/Admin" title="Admin">ADMIN</a></li>
<li style="padding-left: inherit"><a id="A2" runat="server" href="~/Configuration" title="Configuration">CONFIGURATION</a></li>
<li style="padding-left: inherit"><a id="A3" runat="server" href="~/Reports" title="Reports">REPORTS</a></li>
<li style="padding-left: inherit"><a id="A4" runat="server" href="~/Upload" title="Upload">UPLOAD</a></li>
<li style="padding-left: inherit"><a id="A5" runat="server" href="~/Billing" title="Billing">BILLING</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
after 1-2 seconds:
----------------------EDIT STARTS HERE-----------------------
Note: Bootstrap css were not used, extremely sorry for that.
Plain css and html in site.master page are used.
Ok, So I finally, kind of, found the issue myself.
Trials: Tried all the suggestions provided in the answers, Thank you all for that but they didn't help.
Issue: I created an empty aspx page with no content in it and loaded it with master page. What I see is below:
On the other hand when the page with some content loads it sets the navbar correctly like this, looks like when the Admin page loads it is empty for 1-2 seconds and when it renders it sets the correct style:
So what I did is I put below code to make it less ugly :(
li{
display: inline;
}
which now will show up like :
Any other suggestions guys ?
Your code is missing the part where you include Bootstrap, and that is the main point. Your navbar is styled by Bootstrap, so it won't be styled until the Bootstrap's CSS file is loaded.
Put the Bootstrap CSS in the <head> part of your page in a <link> element.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
This is your code without bootstrap: https://jsfiddle.net/xa2ychxn/ and this is your code with the Bootstrap's CSS file in the <head> section: https://jsfiddle.net/edaovwjt/
You are using class names from Bootstrap (navbar navbar-default). As you don't have any CSS code to make the navbar inline, when you finally get the expected result that means that something else gets loaded: that's Bootstrap.
I think you are loading something in the page using Ajax, and the content that is loaded contains bootstrap's CSS. That's why you don't know that you are using it, and why it is loaded some time after the page rendering.
Have you tried putting the styles in a CSS file or in a style tag in the head?
<html>
<head>
<style type="text/css">
.navbar {
margin-bottom: 0px;
clear: none;
background-color: white;
border-color: white;
}
.container {
margin-left: 0px;
}
.navbar-header img {
margin-right: 40px;
width: 130px;
height: 40px;
}
.navbar-left li {
padding-left: inherit;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="../../Images/Logo.png" />
</div>
<div class="collapse navbar-collapse" id="myNavbar" >
<ul class="nav navbar-nav navbar-left">
<li><a id="A1" runat="server" href="~/Admin" title="Admin">ADMIN</a></li>
<li><a id="A2" runat="server" href="~/Configuration" title="Configuration">CONFIGURATION</a></li>
<li><a id="A3" runat="server" href="~/Reports" title="Reports">REPORTS</a></li>
<li><a id="A4" runat="server" href="~/Upload" title="Upload">UPLOAD</a></li>
<li><a id="A5" runat="server" href="~/Billing" title="Billing">BILLING</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
Alternatively, if you do have a linked CSS sheet, check the styles applied to the classes in your header. Some of the elements are probably rendered according to the CSS styles first, then the inline styles are overriding them as elements are rendered.
I know this might be a longshot but can you try using Minified versions of the bootstrap and jquery.Just give it a try and let me know
Try using these :
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The problem seems to come from external style sheets.
During the brief period where the LI elements are displayed vertically, i guess you're still busy loading CSS from external files.
Does it still happen if you add the following CSS to the style element in the head of your page?
.navbar ul
{
list-style:none;
}
.navbar ul li
{
display:inline-block;
}
.navbar ul li a
{
/* i have no idea if this is right. it is just an approximation. */
/* you will have to fiddle with it until it is right. */
padding:10px 20px;
}
(or see this codepen)
I just got into html and css recently and am kinda stuck on this one. Im working on a login box and I cannot get the login box and the submit button to be perfectly aligned with each other.
The only way that kind of worked was if I wrote them both on one line like this, then they would be (horizontally) perfectly aligned but I wasnt able to change the space between them:
First attempt (code without the Dot after <):
<.input type="text" id="username">submit
Then I worked it out in some other way. It consists of an input type text and an input type submit in my html file.
In my CSS file im first calling the the Class in which all my login Inputs are nisted (.logsec for login section) and then the id of my input type text and input type submit.
The Class is called logsec (for Login section) and my input type submit is called id=Button and my input type text is called id=subinput.
HTML CODE:
<html lang="en">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/font.css">
<head>
<meta charset="utf-8">
<title>Main</title>
</head>
<body>
<div class="container">
<div class="brandname">
<h1 <id="title" class=""><span id="logo">Test</h1>
</div>
<div class="logsec">
<div class="box-header">
<p> login</p>
</div>
<input type="submit" id="button" value="submit" style="float:right"/>
<input type="text" id="subinput" style="width:100%;"/>
<p class="recover">Recover Password</p>
<h3> <p class="signup">signup </h3>
<footer> <p Class="footer">LOGIN</p></footer>
</div>
</body>
</html>
CSS CODE:
body {
background-color: grey;
font-size: 30px;
text-align: center;
}
.brandname {
margin-top: 300px;
}
.recover {
font-size: 15px;
text-align: center;
}
.signup {
font-size: 15px;
text-align: center;
}
/*///////////////////// LOGIN BUTTON ///////////////////////////////////////*/
.logsec [id=button] {
vertical-align: top;
Would really love if someone could help me out here.
Im terrible at it but i would Hope someone can help me.
Thanks Guys.
There were some errors in your code, one of which ".logsec [id=button]" was stopping the button lining up. I removed the float and used inline-block instead. Google it, I'm sure the W3C has some tutorials. Anyway, here's the working code:
CSS
body {
background-color: grey;
font-size: 30px;
text-align: center;
}
.brandname {
margin-top: 300px;
}
.recover {
font-size: 15px;
text-align: center;
}
.signup {
font-size: 15px;
text-align: center;
}
#subinput {
display: inline-block;
}
HTML
<div class="container">
<div class="brandname">
<h1 id="title"><span id="logo">Test</span></h1>
</div>
<div class="logsec">
<div class="box-header">
<p> login</p>
</div>
<input type="text" id="subinput"/>
<input type="submit" id="button" value="submit"/>
<p class="recover">Recover Password</p>
<h3> <p class="signup">signup </h3>
<footer> <p Class="footer">LOGIN</p></footer>
</div>
Here it is working in a fiddle (I hope, not sure how long the code saves for)
FIDDLE