I have several buttons in the head section of the html page however, they don't seem to display on chrome whereas they do on safari.
<!DOCTYPE html>
<html>
<style>
body{
background-image: url("background_index.jpg");
}
</style>
<head>
<button style='font-family:Tahoma,Geneva,sans-serif;'> Resume </button>
<button style='font-family:Tahoma,Geneva,sans-serif;'> Projects </button>
<button style='font-family:Tahoma,Geneva,sans-serif;'> Blogs </button>
<button style='font-family:Tahoma,Geneva,sans-serif;'> Contact info </button>
<h1 style='font-family:Impact, Charcoal,sans-serif;font-size:25px; text-align: center; position:relative; top:50px'> Welcome to my website. </h1>
</head>
<body>
<p1 style='position: absolute; top:200px; padding-left:100px'> Hello there </br> </p1>
<img src="self_pic.jpg" style="height:450px;width:30%; position:absolute; top:300px; padding-left:450px;"></img>
</body>
</html>
Related
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!
I'm trying to fix the top and bottom div bars on scroll with the text centred
Top bar is fixed but text align isn't working
Bottom bar isn't appearing at all
I can't see what is wrong with the css, I get no errors in the dev console in chrome
Thanks
<!DOCTYPE html>
<html>
<head>
<title>
My test
</title>
<meta charset="UTF-8">
</head>
<style>
div{ margin-left: 20%;
padding-left: 20%
}
#headbar
{display:inline;text-align:center;position:fixed;width:100%;
}
#footbar
{display:block;text-align:center;position:fixed;width:100%;
}
#width: 80%
p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};
<body>
</style>
<div id="headbar" style="background-color: #ffccff";>
<a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>
<a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a>
</div>
<?php
for ($n=0; $n<101; $n++) {
$modulo = ($n%3);
if($modulo==0){
$bg_color = '#e0ffff';
}elseif($modulo==1){
$bg_color = '#f5f5db';
}elseif($modulo==2){
$bg_color = '#ffe4e1';
}
echo '<p style="margin-left:20px; margin-right:20px; background-color:'.$bg_color.';"> Paragraph...'.$n.'</p>';
}
?>
<div id="footbar" style="background-color: #ffff66";>
<form>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />
<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" />
</div>
</form>
</body>
</html>
Something like this?
#headbar
{
display:inline-block;
text-align:center;
position:fixed;
width:100%;
}
#footbar
{
display:block;
text-align:center;
position:fixed;
width:100%;
bottom:0;
}
p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};
<div id="headbar" style="background-color: #ffccff";>
<a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>
<a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a>
</div>
<div id="footbar" style="background-color: #ffff66";>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />
<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" />
</div>
<title>
My test
</title>
<meta charset="UTF-8">
</head>
<style>
body{
margin:0;
padding:0;
}
.spacer{
height:1em;
width:100%;
}
#headbar{display:inline;text-align:center;position:fixed;width:100%;
}
#footbar
{display:block;text-align:center;position:fixed;width:100%;bottom:0;
}
#width: 80%
p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};
</style>
<body>
<div id="headbar" style="background-color: #ffccff";>
<a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>
<a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a>
</div>
<?php
for ($n=0; $n<101; $n++) {
$modulo = ($n%3);
if($modulo==0){
$bg_color = '#e0ffff';
}elseif($modulo==1){
$bg_color = '#f5f5db';
}elseif($modulo==2){
$bg_color = '#ffe4e1';
}
echo '<p style="margin-left:20px; margin-right:20px; background-color:'.$bg_color.';"> Paragraph...'.$n.'</p>';
}
?>
<div class="spacer"></div>
<div id="footbar" style="background-color: #ffff66";>
<form>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />
<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" />
</div>
</form>
</body>
</html>
I try to correct some issues. your text align is not working because of <div> padding and margin. hope this helps.
here is a screenshot how it seems on my screen
http://prntscr.com/a794gf
I recently began construction of my first website, I'm still a beginner in html. My site has three buttons on the side, "Games", "Chat", and "About". They all have custom pictures, but it seems like there is a very small hyperlinked "-" in the bottom right of the button. Like a hyperlink, it turns red when clicked. Here is a picture of my clicking the "Games" button: As you can see, there is a small "-" hyperlink on the bottom right of the button.
Here is ALL my code for the games page:
<html>
<header>
<title>CBgames.com</title>
</header>
<body bgcolor=#474747 text=#FFFFFF>
<center>
<img src="siteimages/title.gif">
</center>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/games.html">
<img src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/chat.html">
<img src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/about.html">
<img src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" >
</a>
<br>
<br>
<table Align="left" Border="1" Width="300">
<tr>
<td><center>Our Newest Games:</center></TD>
</tr>
<tr>
<td>
<center>Game</center>
<center>Game</center>
<center>Game</center>
</td>
</tr>
</table>
<style type="text/css">
body {
margin:0px;
padding-bottom:25px;
}
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
width:1920px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
bottom:0px;
}
</style>
<head>
<body>
<div id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</div>
</body>
</body>
</html>
I'm still a newbie at this, sorry for any troubles.
This is the syntax for adding a URL in HTML
link text
An example of adding "Example" website URL would be like the following
Click here to direct to Example site
You have spaces between the start tag for the anchor and the image inside of it (and between the image and the end tag).
Spaces are text.
Text in a link gets underlined.
Reformat your HTML to remove the spaces.
There is still an awful lot wrong with your markup but here is a quick attempt of moving you along in the right direction:
<!doctype html>
<html>
<head>
<title>CBgames.com</title>
<style type="text/stylesheet">
BODY {
background-color:#474747;
color:#FFF;
margin:0;
padding-bottom:25px;
}
.titleimage { text-align:center; }
.buttons {
margin-bottom: 2em;
}
.buttons A { display:block; }
.table1 { text-align:left; border:solid 1px #000; width: 300px; }
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
left:0;right:0;bottom:0;
}
</style>
</head>
<body>
<dIv class="titleimage"><img src="siteimages/title.gif"></div>
<div class="buttons">
<a href="games.html"><img
src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" /></a>
<a href="chat.html"><img
src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" /></a>
<a href="about.html"><img
src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" ></a>
<div>
<table class="table1">
<tr><td>Our Newest Games:</td></tr>
<tr>
<td>
<div>Game</div>
<div>Game</div>
<div>Game</div>
</td>
</tr>
</table>
<footer id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</footer>
</body>
</html>
I am just using float: left on an icon right now because I am struggling with positioning the text in my button such that the icon is in the "middle" (20% of the left) and the text is in the middle (80% of the right).
Like this:
**********************************
* Icon Text will be here *
* *
**********************************
Here is how I have the button set up:
<button class="button button-block">
<i class="ion-plus-round"></i><span>Add to Favorites</span>
</button>
Try CSS flexbox:
#container {
display: flex;
align-items: center;
}
#container > * {
margin-right: 5px;
}
<button>
<span id="container">
<img src="http://i.imgur.com/60PVLis.png" width="25" height="25" alt="">
<span>Add to Favorites</span>
</span>
</button>
I used a span to wrap the content because some browsers don't accept button elements as flex containers.
Browser Support
Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE 10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
How about something like this ?
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
});
.button-block {
display: inline-block;
vertical-align: middle;
}
.button-block i {
margin-right: 15px;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Pull to Refresh</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-content>
<div class="tabs" style="height:auto;">
<div class="row">
<div class="col" style="padding: 0">
<button class="button button-block button-positive">
<i class="ion-plus-round"></i><span>Add to Favorites</span>
</button>
</div>
</div>
</div>
</ion-content>
</body>
</html>
Here is an example using Font Awesome.
Add a left margin to the span to control the spacing between the two inline elements (i and span).
If you specify a width for the button, then you can set widths to the two child elements as needed.
button span {
margin-left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="button button-block">
<i class="fa fa-plus-circle"></i><span>Add to Favorites</span>
</button>
.btn-cont {Margin-left: 12px;}
<button><span class="btn-cont">Hello World</span><button>
I'm ultimately looking to rebuild an old website that complies to web standards, and thought I would try getting my feet wet in html5 and css3. I know neither of these are fully supported across browsers yet, but I'm willing to work within whatever limits for the time-being.
However, I'm already ramming my head against an early wall, and frankly feel pretty stupid right now. I can't seem to highlight text OR open links in the pages generated by my code.
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>The Hominis Inquiry: Reconstructing Psychology, Societies, and Human Ecosystems</title>
<link rel="stylesheet" href="HIcss3.css" />
<script src="HIjs.js"></script>
</head>
<body>
<div class="title">
<div id="search">
<form id="searcher" onclick="startSearch('sbox')">
<input type="text" id="sbox" size="15" value="Search This Site">
<input type="button" id="sbutt" value="Find">
</form>
</div>
</div>
<div class="navigation">
<div id="about"> About </div>
<div id="blog"> Blog </div>
<div id="research"> Research/ Academic Papers </div>
<div id="hypercourse"> Hypercourses </div>
<div id="links"> Links </div>
<div id="contact"> Contact </div>
</div>
<div class="download">
<a href="http://www.mozilla.com/firefox/" target="_blank">
Firefox is strongly recommended for viewing this page. Download the latest version free!<img src="firefox.jpg" />
</a>
</div>
<p>
Welcome to HI Updates!
</p>
</body>
</html>
css:
body {border:0; margin:0; padding:0; vertical-align:top; text-align:center; background-color:#FFDDAA; color:#440000}
h1 {font-size:3em; font-weight:700}
h2 {font-size:1.5em; font-weight:600}
h3 {font-size:1.25em; font-weight:500}
p {}
a {color:#000066; font-weight:600; text-decoration:none}
a:hover {background-color:#FFFFDD}
a:visited {color:#440066}
div.title {position:fixed; width:100%; height:10.5em; background-image:url(hominquiry_laeroprocni.jpg); }
div.download {text-align:left}
div.download img {border:0; float:left; width:3em; height:3em}
div.navigation {}
#about {}
#blog {}
This was not a problem with my last layout in html 4, and feel I must be overlooking something REALLY obvious... even worse, it went through the validator without a hitch :P
Thanks!
Your div.title is position: fixed so it is actually floating over your links, so they don't receive the hover or click events from your mouse. Remove it to try it out.
With: http://jsfiddle.net/LFTpB/
Without: http://jsfiddle.net/THyke/