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>
Related
What I want to do is make it so I have one paragraph on the top of the screen and one right under it, but a bit smaller. But when I execute this there is a big gap in between the paragraphs that I dont want. How do I fix?
<!DOCTYPE html>
<html>
<body>
<style>
.p1 {
color: blue;
}
.p2 {
color: red;
}
</style>
<p class="p1" align="center"><font size="10">Welcome To Plieaxploits!</p>
<p class="p2" align="center"><font size="5" vertical-align="top">We Are The Home
Of Roblox Exploits!</p>
</body>
</html>
You can set margin:0 for both .p1 and .p2 classes.It will look like something like this :
Another thing is that you missing closing font tag in your code so with margins and closing font tag it will be:
<!DOCTYPE html>
<html>
<body>
<style>
.p1 {
color: blue;margin:0;
}
.p2 {
color: red;margin:0;
}
</style>
<p class="p1" align="center"><font size="10">Welcome To Plieaxploits!</font></p>
<p class="p2" align="center"><font size="5" vertical-align="top">We Are The Home
Of Roblox Exploits!</font></p>
</body>
</html>
Hope it helps you.
PS: If not do share what exactly you require and also read this Font tag
You can use the margin:auto property. Hope this helps!
<!DOCTYPE html>
<html>
<body>
<style>
.p1 {
color: blue;margin:auto;
}
.p2 {
color: red;margin:auto;
}
</style>
<p class="p1" align="center"><font size="10">Welcome To Plieaxploits!</p>
<p class="p2" align="center"><font size="5" vertical-align="top">We Are The Home
Of Roblox Exploits!</p>
</body>
</html>
I'm trying to stylise my text in CSS and here's what gets displayed.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<title></title>
</head>
<body class="wrapper">
<!-- header for: ALL PAGES --->
<header id="header">
</header>
<!-- end header for: ALL PAGES --->
<!-- navigation bar for: ALL PAGES --->
<nav>
</nav>
<!-- end navigation bar for: ALL PAGES --->
<!-- paragraph for: THIS PAGE ONLY --->
<section id="welcome_p">
</section>
<!-- end paragraph for: THIS PAGE ONLY --->
<!-- images for: THIS PAGE ONLY --->
<section id="plan_options">
</section>
<!-- end images for: THIS PAGE ONLY --->
<!-- footer for: ALL PAGES --->
<footer id="footer">
<div id="left_side_footer">
<p class="footer_heading">About</p>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Get to Know John</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Moon Lit Disco's</span>
</a>
</div>
<div id="middle_of_footer">
<p class="footer_heading">Terms and Policies</span>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Cookie Policy</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Terms and Conditions</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Privacy Policy</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Copyright and Trademark</span>
</a>
</div>
<div id="right_side_footer">
<p class="footer_heading">Website</p>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Feedback</span>
</a>
</div>
<div id="copyright">
<p class="legal_paragraph">Logo / site design: Trey Taylor and Charlie Wubs</p>
<p class="legal_paragraph">©2014 Moon Lit Disco's</p>
<p class="legal_paragraph">Version:2014.1.0</p>
</div>
</footer>
<!-- end footer for: ALL PAGES --->
</body>
</html>
any my CSS:
/* SECTIONS */
/* CLASSES */
.legal_paragraph{
font-family:"Helvetica", "Arial", sans-serif;
text-align:right;
font-size:10px;
color:black;
padding:1px;
}
.footer_paragraph{
font-family:"Helvetica", "Arial", sans-serif;
font-size:1em;
color:black;
display:block;
text-decoration:none;
}
.footer_link{
text-decoration: none;
}
.footer_heading{
display:inline;
font-family:"Century Gothic";
font-size:17px;
color:black;
text-decoration:underline;
background-color:white;
display:inline;
width=100%;
}
.fp{
text-decoration:none;
color:black;
font-size:1em;
display:block;
font-family:"Helvetica", "Arial", sans-serif;
}
/* STYLE */
a{
text-decoration:none;
}
#footer a.footer_link:hover span{
border-bottom:1px solid black;
border-top:1px solid black;
width:100%
}
#line_break{
}
#left_side_footer{
display:table-cell;
float:left;
padding-right:360px;
padding-bottom:30px;
}
#right_side_footer{
display:table-cell;
float:right;
}
#middle_of_footer{
display:table-cell;
float:center;
}
What I want:
The text to be not underlined, same size and font (for some reason it doesn't do that)
get it so it is all inline
get that legal stuff below it all
Any help would be must appreicated!
Without doing all the work for you something like this should work.
Will need some styling from here, suggest looking at http://www.codecademy.com/
HTML
<footer>
<ul class="left">
<li>About</li>
<li>Get to know John</li>
<li>Moon Lit Disco's</li>
</ul>
<ul class="left">
<li>About</li>
<li>Get to know John</li>
<li>Moon Lit Disco's</li>
</ul>
<ul class="left">
<li>About</li>
<li>Get to know John</li>
<li>Moon Lit Disco's</li>
</ul>
<div class="clearLeft">
<p>Logo / site design: Trey Taylor and Charlie Wubs</p>
<p>© 2014 Moon Lit Disco's</p>
<p>Version:2014.1.0</p>
</div>
</footer>
CSS
.left{
float:left;
}
.clearLeft{
clear:left;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
Should get you started :)
If you want the text not to be underlined, then you need to style the anchor.
Example:
footer a {
text-decoration:none;
}
.footer_link a {
font-size:1em;
}
Since your footer is an HTML5 element, you don't really need an ID of #footer. Semantically, anyway.
You also don't need spans. You can just use the parent class to style the font size.
You're also missing a closing paragraph tag, which might be why it's not taking the paragraph styles.
Cleaning up your code, your HTML should be more like this (head area is removed, but it's fine):
<body class="wrapper">
<!-- header for: ALL PAGES --->
<header></header>
<!-- end header for: ALL PAGES --->
<!-- navigation bar for: ALL PAGES --->
<nav></nav>
<!-- end navigation bar for: ALL PAGES --->
<!-- paragraph for: THIS PAGE ONLY --->
<section id="welcome_p"></section>
<!-- end paragraph for: THIS PAGE ONLY --->
<!-- images for: THIS PAGE ONLY --->
<section id="plan_options"></section>
<!-- end images for: THIS PAGE ONLY --->
<!-- footer for: ALL PAGES --->
<footer>
<div class="column">
<p class="footer_heading">About</p>
<ul>
<li>Get to Know John
</li>
<li>Moon Lit Disco's
</li>
</ul>
</div>
<div class="column">
<p class="footer_heading">Terms and Policies</p>
<ul>
<li>Cookie Policy
</li>
<li>Terms and Conditions
</li>
<li>Privacy Policy
</li>
<li>Copyright and Trademark
</li>
</ul>
</div>
<div class="column">
<p class="footer_heading">Website</p>
<ul>
<li> Feedback
</li>
</ul>
</div>
<div id="copyright">
<p>Logo / site design: Trey Taylor and Charlie Wubs
</p>
<p>© 2014 Moon Lit Disco's</p>
<p>Version:2014.1.0</p>
</div>
</footer>
</body>
And CSS:
.column {
font-family:"Helvetica", "Arial", sans-serif;
font-size:1em;
color:black;
display:block;
text-decoration:none;
float:left;
margin-right:13px;
width:30%;
}
.column a {
text-decoration: none;
color:black;
}
.column ul {
list-style:none;
margin-left:-40px;
}
.footer_heading {
font-family:"Century Gothic";
font-size:17px;
color:black;
text-decoration:underline;
background-color:white;
}
#copyright {
clear:both;
font-family:"Helvetica", "Arial", sans-serif;
text-align:right;
font-size:10px;
color:black;
padding:1px;
}
#copyright a {
text-decoration:none;
color:black;
}
See Fiddle: http://jsfiddle.net/v6o9wg43/
I'm pretty new to web development and I'm making a website for a club at my school. It's http://crsclub.org
I am trying to get the header text to be centered in the whole page in the top div, without it acknowledging the picture at all. I got the main text there and from what I see, I thought that everything else would go too.
Basically, the text underneath Computer Repair and Share Club should all be centered underneath it, the 'of Manchester Community College' and all of the links.
I WAS using tables for everything but the code was very messy and my friends told me to never use tables for this sort of thing.
Can anyone tell me what I'm doing wrong?
Here is my header.php (included on every page on my site with php include)
<!DOCTYPE html>
<html>
<head>
<title>CRS Club <?php echo $page; ?></title>
<script src="/resources/jquery.js"></script>
<script src="/resources/konami.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="boxed_header disable-select" style="float:center;">
<div class="absolute" style="float:left; width:20%">
<img src="http://crsclub.org/images/logo.png" height="142" width="142" />
</div>
<div class="absolute center">
<div style="width:80%">
<h1>Computer Repair and Share Club</h1>
<h4>of Manchester Community College</h4>
</div>
<div style="width:80%">
<a align=center href="http://crsclub.org">Home</a> | <a align=center href="http://crsclub.org/links.php">Links</a> | Events | Contact Us | Self-Help | Our Services
</div>
</div></div>
<xfs class="disable-select">
<br></xfs>
here is my CSS
body {background-color: #454079;}<!--#161058!-->
/*Header properties, Absolute keeps items in any position on page.*/
.absolute {
position:absolute;}
td{min-width:142px;}
.center {margin:auto;}
/*Disable header dragging mess.*/
.disable-select {-webkit-user-select: none;
-moz-user-select: none;-ms-user-select: none;
user-select: none;}
img {pointer-events: none;}
/*Fonts*/
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
/*For bottom content boxes.*/
div.content{width:60%;
min-width:420px;
border:solid 2px #1A1A1A;
border-radius:5px;
padding:10px;
margin-left:auto;
margin-right:auto;
background-color:#F1F1F1;}
.border{border:solid 1px #000000;}
/*Link formatting.*/
.lks {text-align: center;}
a:link {color:blue;text-decoration:none;}
a:visited {color:blue;text-decoration:none;}
a:hover {color:#00008A;}
/*Table formatting.*/
h1 {color:black; text-align:center; vertical-align:text-top; font-family:verdana; font-size:28; }
td {vertical-align: top;}
table {background-color: #F1F1F1}
.boxed_header {border:2px solid #a1a1a1;padding:10px 40px;
background:#F1F1F1;border-radius:14px;}
.boxed_body {border:0px solid #a1a1a1;background:#F1F1F1;width:50%;border-radius:14px;margin:auto;}
fiddle with:
http://jsfiddle.net/9FkK4/
I've honestly tried a lot and I've put in a lot of hours and I can't figure it out.
Also, this was my old header which looks just the way I want it to look on the client side but is very messy with tables.
<body>
<table>
<tr><td>
<img src="images/logo.png" height="142" width="142"/>
</td>
<td width=100% align=center>
<h1>Computer Repair and Share Club</h1>
<a align=center href="index.php">Home</a> | <a align=center href="links.php">Links</a> | Events | Contact Us | Diagnostics | Our Services
</td></tr></table>
<hr>
</body>
Change the div above your h1 to 100% and add text-align:center;
I think you should learn some more markup before you really publish this project.
Basically I am trying to create an email template using HTML and Dreamweaver. It's my first template. The fact that I cannot use <div> tag for email templates is really giving me headache. I am having difficulty aligning the social icons with the "I am social text". They both are assigned with align="center" inside the td tag. The image that is displayed below is "footer" section of my email template.
Here's the screenshot:
I am only posting the code for footer section because my content and header section is working fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TrickyPhotoshop Newsletter</title>
<style type="text/css">
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 15px;
background: #CCC;
}
h4.copyright, p.copyright {
padding-left: 50px;
color: #FFF
}
h4.social {
padding-left: 50px;
color: #fff;
}
p.footer {
color: #FFF;
}
</style>
</head>
<body>
<table width="600" align="center" bgcolor="#999999">
<tr>
<td align="center"><h4 class="social">I am also social</h4></td>
</tr>
<tr>
<td align="center"><p class="footer">
<a href="http://www.facebook.com/trickyphotoshop">
<img src=
"images/Facebook-256.gif" width="25px" height="25px"/>
</a>
<a href="http://www.tricky-photoshop.com">
<img src="images/g+.gif" width="25px" height="25px" />
</a>
<a href="http://www.twitter.com/trickyphotoshop/">
<img src="images/twitter.gif" width="25px" height="25px" />
</a>
</p></td>
</tr>
<tr>
<td height="10"><h4 class="copyright">Copyright Area</h4></td>
</tr>
<tr>
<td height="10"><p class="copyright">
© All rights reserved
</p></td>
</tr>
</table>
</body>
</html>
Basically I want two things:
I want to properly align "I am also social" text with the three icons i.e. facebook, twitter, google+
As you can see there is a huge space between "Copyright Area" and "All Rights Reserved". I want to remove this space.
I know that my code is not too much professional but it's my first HTML code.
You should change the style as follows:
h4.social {
/* remove: padding-left: 50px; */
color: #fff;
}
h4.copyright, p.copyright {
padding-left: 50px;
margin: 0px; /* add this line */
color: #FFF;
}
I recommend using this chrome extension for "playing" with CSS changes
I have a big problem with creating a HTML footer for my dad's firm. They are using OE and Outlook 10. I've working on the code for very long, but still I have some problems. Can I use external font? How should I make it working? How about positioning it with width: X% ?
I would like it to look like this:
But it doesn't...
Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>www.k#$#$#$#$#$#$#$.com</title>
<style>
#font-face {
font-family: times_Sans_Serif;
src: url('http://a#$#$#$#$#$#$#$.pl/tem/TIMESS_.ttf');
}
p, a, span {
font-family: times_Sans_Serif;
}
a {
text-decoration:none;
}
.header {
width:100%;
height:5px;
display:block;
background-color:#6d5759;
}
.section li{
float: left;
display: inline;
list-style-type: none;
margin:0% 3%;
padding:0;
position:relative;
}
.section p{
display:block;
text-align: left;
color:#6d5759;
}
.section a{
color: #6d5759;
}
#logo {
text-decoration:none;
text-align: right;
}
.footer {
clear:both;
font-size:11px;
width:100%;
height:auto;
display:block;
background-color:#6d5759;
color:#FFF;
text-align:center;
padding: 5px;
}
.footer a{
color:#FFF;
}
</style>
</head>
<body>
<div class="main">
<div class="header"></div>
<ul class="section">
<li id="osoba">
<p>
Marcjusz K#$#$#$#$#$#$#$<br>
+48 500 000 000<br>
marcjusz#k#$#$#$#$#$#$#$.com
</p>
</li>
<li id="logo">
<img src="http://#$#$#$#$#$#$#$.pl/tem/image001.png">
</li>
</ul>
<div class="footer">
<span> K#$#$#$#$#$#$#$ Ubezpieczenia Sp.J. | 31-475 Kraków ul. STREET1 | 32-700 Bochnia ul. STREET2 | 32-800 Brzesko ul. STREET 3 | www.kr#$#$#$#$#$#$#$.com</span>
</div>
</div>
</body>
</html>
Can you help me with that? I would be very helpful!
Style sheets are NOT supported by most mail clients. Some inline styles are allowed. Positioning is generally NOT supported to prevent emails from escaping their containers - imagine an email trying to spoof a Gmail menu or something like that.
In general:
use tables for layout
use inline styles
For a good guild to what is supported, see:
http://www.campaignmonitor.com/css/
emails are weird in that you almost need to use html from 10 years ago to make it work properly. A lot of clients strip out most of the things in the head (including the actual body tag). This includes gmail, yahoo, hotmail etc. They keep only certain things. Some keep the styles, but not all.
I suggest you move your styles away from the head and inline them inside the tags using the style="" property and use tables (think back to the 90s)
so you might have something like this:
<table width="100%">
<tr>
<td id="osoba" style="">..Osoba...<td>
<td id="logo" style="">..logo..</td>
</tr>
<tr>
<td id="footer" style="">...footer...</td>
</tr>
</table>
note: I put the id's there for clarification purposes but since we stripped out your id's, they are not necessary.
I've done it! It looks as I wanted. ;) It was kind of mental pain for me to make layout using tables, but it works! ;P Thanks for help!
Here is the code for anybody who has similar problems:
<html>
<head>
<meta charset="utf-8">
<title>www.#¤#¤#¤#¤#¤#¤#¤#¤#.com</title>
</head>
<body>
<table width="100%" align="center">
<tr>
<td colspan="4" style="width:100%; height:5px; background-color:#818285"></td>
</tr>
<tr style="color: #818285;" align="center">
<td width="20%"></td>
<td align="right" width="24%">
<div style="text-align:left; width:180px; right:0%; color:#818285;">
<a style="color:#818285; text-decoration:none;" href="http://k#¤#¤#¤#¤#¤#¤#¤#¤#.com/o-nas" target="_blank">Marcjusz K#¤#¤#¤#¤#¤#¤#¤#¤#</a><br>
+48 500 000 000<br>
<a style="color:#818285; text-decoration:none;" href="mailto:marcjusz#k#¤#¤#¤#¤#¤#¤#¤#¤#.com">marcjusz#k#¤#¤#¤#¤#¤#¤#¤#¤#.com</a>
</div>
</td>
<td align="center" width="4%" style="font-size:2em; color:#818285;"></td>
<td align="left" width="52%">
<a style="color:#818285; text-decoration:none;" href="http://k#¤#¤#¤#¤#¤#¤#¤#¤#.com/" target="_blank"><img src="http://#¤#¤#¤#¤#¤#¤#¤#¤#.pl/tem/logo-poziom300.jpg"></a>
</td>
</tr>
<tr><td colspan="4" style="font-size:11px; background-color:#818285; color:#FFF; text-align:center; padding: 5px; ">
<span> K#$#$#$#$#$#$#$# Ubezpieczenia Sp.J. | 31-475 Kraków ul. STREET 6a | 32-700 Bochnia ul. STREET 14 | 32-800 Brzesko ul. STREET 3 | <a style="color:#FFF; text-decoration:none;" href="http://k#$#$#$#$#$#$#$#$#.com/" target="_blank">www.k#$#$#$#$#$#$#$#.com</a></span>
</td></tr>
</table>
</body>
</html>