Web Designing (Doing this at college) - Need a bit of help.

ashleyuk

Dedicated Member
Dedicated Member
Loyal Member
Nov 18, 2008
2,000
23
145
Basicly the Template won't allow anything inside it.

I'm trying to put Text/Images into the template I have chosen.

The Text/Images At the moment sit's at the bottom of the template.

Any idea on how to put inside the template?

Code:
<html>


<body>
<img alt="full screen background image" src="MW3T.jpg" id="full-screen-background-image" Width=100% Height=120% />
<div id="wrapper">


<center>
<table Width=50% Height=25% border=1>
<tr>
<td><img src="MW3.jpg" width=100% height=100% /></p></a></td>
</tr>
</table></center>


<br>


<center><h2><font color="White">Welcome To Our Site</font></h2></Center>


<Center>
<table Width=100 Height=40 border=1>
<td><h2><Center><a href="Home.html">Home</a></td>
</center>


<Center>
<table Width=100 Height=40 border=1>
<td><h2><Center><a href="Forum.html">Forum</a></td>
</center>


<br>


<Center>
<table Width=175 Height=40 border=1>
<td><h2><Center><a href="List.html">Weapon List</a></td>
</center>


<br>


</body>

</div>


</html>

Doing this through "NotePad" It pretty hard..

So if you could post a fix I'd be grateful and in future I shouldn't make mistakes like this again :D

-Ash

PS: Is this in the right section? Says Off-Topic and this is O.T So thought I'd just post here.
PPS: I did have a correct code which allow'd the image/text inside the template but the template din't fit in the sides.
PPPS: I'm a Beginner to all this so no hassle please.
 

ashleyuk

Dedicated Member
Dedicated Member
Loyal Member
Nov 18, 2008
2,000
23
145
Doing all that in notepad :p

No Special Programme..

And i want text/images in the "MW3T" - Template

I'm just creating this to show to my teacher/tutor @College once completed. (Also it gets me into web designing more)

-Ash
 

ashleyuk

Dedicated Member
Dedicated Member
Loyal Member
Nov 18, 2008
2,000
23
145
My teacher @ College din't like the stuff i "Copy/Past" From other sites (Nothing i learn'd)

Think he profers me doing them inclass but this will help me on my template.

Thanks

-Ash

Edit: I think i've all ready try'd that.. (I din't show the whole template onto one page) That's why i putted the Height/Width 100% To fit the screen so it goes in each corner.
 
Last edited:

Ardbeg

Legend
Legendary
Aug 8, 2004
3,211
1
144
260
Southern England
If you're being taught this at college then, frankly, you need to examine the content of the course.
You need to drop all deprecated stuff like tables and positioning with tags such as center.
Hazuki is spot on with his recommendation of W3Schools. It's the place to go to learn the core of just about any type of web coding.
You should be focusing on HTML5 and CSS3 as a minimum.

As for using notepad, there's nothing wrong with that. Atleast you won't get any spurious code or layout thrown in by a program.

---------- Post Merged on 22-09-2012 at 01:09 AM ---------- Previous Post was on 21-09-2012 at 10:21 PM ----------

This is my interpretation of what you were trying to do.
I admit my design it's pretty cack and clearly the white text on the bright background image is unreadable but a basic structure is there.
I've used styles all within the same page rather than link to a seperate stylesheet.
page elements are all held within divs and its these divs that receive the styling for the divs themselves and their content.
They are positioned relatively to the wrapper div with just a top property. Their central position is achieved using the margin-left and margin-right auto setting.

I've cut corners a bit just to get something up for you to look at. I've also hosted it via the link below so you can see it "live".

http://x717.com/Untitled-1.html

Code:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Legend of Mir 2 Server</title>
 
<style type="text/css">
 body {
  margin:0px;
 background-color:#993300;
 }
 
 h2 {
  color:#FFFFFF;
 font-size:20pt;
 text-align:center;
 }
h2 a:link {color:#FFFFFF; text-decoration: none}     /* unvisited link */
h2 a:visited {color:#FFFFFF; text-decoration: none}  /* visited link */
h2 a:hover {color:#121212; font-weight:bold; text-decoration: none}  /* mouse over link */
h2 a:active {color:#FFFFFF; text-decoration: none}   /* selected link */ 
 
 
 #wrapper {
  background-image:url(images/01615.jpg); /* main background mir pic */
 height: 768px;
 width: 1024px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 20px;
 margin-bottom: 20px;
 border: 1px solid #C0C0C0;
 position:relative;
 }
 #titlebox {
 width:488px;
 height:52px;
 top:180px;
 margin-right: auto;
 margin-left: auto;
 position:relative;
 }
 
 #welcome {
  width:400px;
 height:auto;
 top: 190px;
   margin-right: auto;
 margin-left: auto;
 position:relative;
 color:#FFFFFF;
 font-size:18px;
 }
 
 #box1 {
  width:200px;
 height:auto;
 top: 240px;
  margin-right: auto;
 margin-left: auto;
 position:relative;
 }
 #box2 {
  width:200px;
 height:auto;
 top: 250px;
  margin-right: auto;
 margin-left: auto;
 position:relative;
 }
 #box3 {
  width:200px;
 height:auto;
 top:260px;
  margin-right: auto;
 margin-left: auto;
 position:relative;
 }
   
 </style>
 
 
<body>
<div id="wrapper">
<div id="titlebox">
<img src="images/title.png" width=488px height=52px />
</div><!--end titlebox-->
 
<div id="welcome">
<h2>Welcome To Our Site</h2>
Welcome to our new Legend of Mir II server site.<br />
Please follow the links below for further information.
</div><!--end welcome-->
 
<div id="box1">
<h2><a href="Home.html">Home</a></h2>
</div><!-- end box1-->
 
<div id="box2">
<h2><a href="Forum.html">Forum</a></h2>
</div><!-- end box2-->
 
<div id="box3">
<h2><a href="List.html">Weapon List</a></h2>
</div><!--end box3-->
 

</div><!-- end wrapper-->
</body>
</html>
 
Last edited:

Cba2KillU

LOMCN Veteran
Veteran
Apr 7, 2010
692
1
105
Yes my teacher did give us that webpage but i was on about all i did was copy/paste (Reason he wasn't impressed)

We are doing the basic stuff but i'm trying to go a bit further.

I Don't think he is going through all the tags since there are "Loads" lol.

But he has told us the basics.. i.e <h1>, <br>, <Img src="LOMCN">, <Body BGColor="Red">, <Font Color="Red"> (The basic stuff).

There the ones from top of my head.

This is my 1st ever attempt on web designing. *Only been 3-5 Sessions* so far.

-Ash
 

Ardbeg

Legend
Legendary
Aug 8, 2004
3,211
1
144
260
Southern England
If you change aspects of what you've pasted, you can notice the difference in results and this can help you learn.
Whatever way you progress with this page, don't use tables as a means to position items.
The only real use for tables nowadays is as a method to store data from a query etc., even then, the table could be nested inside another element and styled with CSS.
Line breaks, <br> can be still be used. The correct format is <br /> (note the space after br) and its one of the few tags that don't need closing. They are best used within text inside a div element and not for forcing page elements lower down a page.

There isn't one reference to a table on my page. The only reference to center is in the styling for h2.

You can't really use an image as a background and give it 100% as a width to fill an area. The image has dimensions and these are your limits. You can set a background to repeat horizontally or vertically into a larger area but this usually looks bad unless the image is designed for repeating.
 
Last edited:

Cba2KillU

LOMCN Veteran
Veteran
Apr 7, 2010
692
1
105
In our BTEC Level 1 Web Designing we are using a program known as "Dreamweaver" Which i recon is bollocks..

If i wanna become a good web designer isn't it best doing it by the code? (Dreamweaver seems like the best way but also the lazy way) :p

Today we created Hyper Links for Buttons.. It wasn't rocket science and i loved every minute to be honest!

-Ash

PS: Think i'm gonna keep this topic about web-designing so if you wanna discuss it please feel free to post :)
 

Far

tsniffer
Staff member
Developer
May 19, 2003
20,172
30
2,767
540
Can't stand dreamweaver.

i grew up making sites in notepad. It was only until a few months back when i got a new job and started coding everything in visual studio, with a plugin called 'resharper'. It costs a little, but i've got it on both my machines and would never go back.
 

Samuel

Mir Chronicles Dev
VIP
Feb 8, 2011
2,614
117
280
www.w3schools.co.uk (or .com) look at html and CSS... html5 and CSS3 if you want to do some kl flashy stuff on your page...

to set an image place on a web page do something like:

Code:
<style>
image.one
{
margin-left:50px; <!-- places 50 blank pixels to the left of your image, which makes it appear as if its moved to the right -->
margin-top:50px; <!-- same as above but at the top of your image -->
}
</style>

<html>
<div>
<image class="one">http:\\imagehere.jpg</image> <!-- class="one" is our reference to our above style -->
</div>
</html>

The above is just of the top of my head, but w3schools is a good source of information :)

Sam