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.
Related
Picture
if you click on this link you will see at left corner of the navigation bar i want to create an folat image like it
so i started to get some codes to preform it
so i found this
<html>
<head></head>
<body>
<div class="menu">
<li>
<img style="float: left;margin-left: -50%;" src="../images/logo.png" alt="Tera Host inc." height="60" width="200">
</li>
</div>
</body>
</html>
but its appearing at the top of the page i want something on the top left corner so an friend told me to do something
You have to make 2 divs following each other
And on each one you do style="float:left;"
And when yuu re done with the floating left
Make a big div that contain those divs
and on the ending do
so if anyone could help me pls reply the whole code
Thanks in advance
I am not very clear with your question! But i just gave a try in an assumption and I think you need to make the menu & logo float separately.
You can check this fiddle,
https://jsfiddle.net/8brvykvn/1/
<div class="header">
<a href="#" class="logo">
<img src="../images/logo.png" alt="Tera Host inc." height="60" width="200"></a>
<ul class="menu">
<li>Dashboard</li>
<li>Game Monitor</li>
<li>TS3 Admin</li>
</ul>
css:
.header a{
float: left;
margin-right:10px;
}
.header .menu{
float : left;
margin : 0;
padding: 0;
}
.header:after{
content:'';
display:block;
clear: both
}
.header .menu li{
list-style:none;
display:inline-block;
}
.header .menu li > a{
margin-right:10px;
}
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 relatively new to HTML/CSS and am having an impossible time making two pics line up with an ASP MVC website. The bookend pic we are using for the menu bar cannot line up with the rest of the background pics. Below is a screenshot of the problem, the HTML and the CSS. The bookend pic that is not adjusted correctly is NAV-Left-Corner, and it's id in the CSS is "#menuLeft." The rest of the nav bar uses a small blue pic repeated horizontally. That portion of the CSS can be found in the "ul#Menu" section. (I'm having the same problem with the right bookend, just wanted to simplify things for the sake of this post)
HTML
<body>
#using Monet.Common
<div class="page">
<header>
<div style="margin: 20px;">
#* Monet *#
<span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
<span style="color: white; font-size: 18px; "> </span>
</div>
#* </a>*#
#* <div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>*#
<nav>
<ul id="menu">
<img src="../../Content/images/NAV-Left-Corner.gif" id="menuLeft" alt="mLeft"/>
<li id="mTop">#Html.MenuLink("Agents", "Index", "Agent")</li>
<li class="mProducts">#Html.MenuLink("Products", "Index", "Product")</li>
<li class="mPt">#Html.MenuLink("Product Training", "Index", "Course")</li>
<li class="mCe">#Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
<li id="mBottom">#Html.MenuLink("Help", "About", "Home")</li>
<img src="../../Content/images/NAV-Right-Corner.gif" id="menuRight" alt="mRight"/>
</ul>
</nav>
</header>
<img src="../../Content/images/TEST2body_top.png" id="topPic" alt="tag"/>
<section id="main">
#RenderBody()
</section>
<footer>
<span style="color: Gray;"> Copyright © 2012 For Internal Use Only. </span>
</footer>
</div>
</body>
CSS
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
#menuLeft
{
vertical-align:middle;
}
#menuRight
{
vertical-align:middle;
}
I agree with Nile in comment ("dont do it this way").
Anyway - you can just move anything up or down by adding some padding or margin. You can also use negative padding-top, to move image up, even outside its container.
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
/* HERE */
padding: -5 0 2px;
position: relative;
margin: 0;
text-align: right;
}
Im not sure that is recipe for you, but it may be good tip about positioning items.
Edit/added later:
Maybe you should not experiment with CSS in serious app like this. App "for internal use only" dont need fancy effects.
Read good tutorial about CSS and make some exercises (positioning, gradients, browser support) before you use it in work :)
The New Boston is very good website with most professional free courses and tutorials i ever saw.
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>
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/