Help With Html

dtuhy

Feb 24 2007, 02:08 AM

Ok so i just started learn html about a couple of weeks ago and i make a background image using this code:

CODE

and i am having trouble putting my text on the top in the center becasue my links are on the left every time i try and move the text up it moves the links down and separates them and i don't know what to do.

added code tags. please use appropriate bbcodes as needed.

Comment/Reply (w/o sign-up)

KuBi

Feb 24 2007, 02:13 AM

Have you tryed just adding text to the image with photoshop or paint?

Can you try this?

CODE

Comment/Reply (w/o sign-up)

jlhaslip

Feb 24 2007, 02:25 AM

Usually, the text is inside of a "container" like a div, a paragraph or a span, etc.

CODE

<body>
<div><p> Some Text Here </p></div>

The way to get that "container" into the centre would be to set the left and right margins to 'auto', like this:
[code]
div { margin-left: auto; margin-right: auto; }

That is the code you need, but IE doesn't get it right. IE understands

CODE

div { text-align:center; }

So to get in right in most browsers, simply combine the two rules into a single rule as follows :

CODE

div { margin-left: auto; margin-right: auto; text-align:center; }

That should do it for centring horizontally. Centring vertically is a little different. Set some margin-top to the div is the easy way, for now. start with a number and change it to suit. I'll start with 300px.

CODE

div { margin-left: auto; margin-right: auto; text-align:center; margin-top: 300px; }

Comment/Reply (w/o sign-up)

dtuhy

Feb 24 2007, 02:40 AM

Well i have the image up there and it work the problem was that when i put my links and stuff on the left and them i try putting other text in the middle when i do that the links move down a separate, and i used paint to make this if that makes a difference(idk)

Comment/Reply (w/o sign-up)

jlhaslip

Feb 24 2007, 06:09 AM

Can you post your code or give a link to the code, please. it makes it easier to review the entire code for suggestions. Thanks.

Comment/Reply (w/o sign-up)

dtuhy

Feb 24 2007, 04:58 PM

CODE

<html>
 
<head>
<style type="text/css">
body { background-image:url("http://img.photobucket.com/albums/w59/tuhyd/backgrounds.jpg"); background-repeat: no-repeat; background-color:#000000;}
#links{				
width: 92px;
height:100%;
position: absolute; 
left: 1px;
background-color:#000000;
margin-left:0px;
align: left;
top:35px;
}   
#main{				
width: 100%px;
height:100%;
position: absolute; 
left: 99px;
background-color:#000000;
margin-left:0px;
align: left;
top:35px;
}
#header{				
position: absolute; 
left: 512px;
background-color:#000000;
margin-left:0px;
align: left;
top:10px;
}   
   

</style>
</head>
 
<body>


<div id="header"><font color="green"><font size=4><b>Tuhy's Space</b></font></font></div>
<div id="links"><font color="white"><b><u>Links</u></b></font>
<br>
<a href="aboutme.html">About Me</a>

<br>                                                                                                                                                                                                                                     
<a href="soccer.html">Soccer</a>
<br>
<a href="games.html">Games</a>
<br>
<a href="vidoes.html">Vidoes</a>
<br>
<a href="homework.html">Homework</a>
<br>
<a href="chat.html">Chat</a></div>

<div id="main"><font color=white><center>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;About my website: This website was recently made for my Website Design Class.<br>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The links on the Left are things that i enjoy to do and the games,videos are for your enjoyment, if you would <br>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;like me to add a video or a game send me an email at dtuhy17@yahoo.com or if you would like <br>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to give me some tips on other things to put in here.This site is not yet finsihed an probably<br>

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;will never be finished becasue i will be adding thingsas i go along. Thank you for Visiting <br>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;My Website</center></text></div>


ok so thats the whole code i got the the thing that i wanted to get working but let me know if you have any suggestions

</div>


</body>

</html>

to enclose longer codes, use codebox tags. please use appropriate bbcodes as needed.

Comment/Reply (w/o sign-up)

matak

Feb 24 2007, 07:08 PM

You need to enclose your div tags between div wrapper like so:

HTML

<div id="wrapper">
<div id="links">Links Code</div>
<div id="main">Main Code</div>
</div>

Now you add css something like this

HTML

div wrapper {
width: 100%;
}

div wrapper links {
width: 10%;
}

div wrapper main {
width: 90%;
text-align: center;
}

I think that should work right...

Comment/Reply (w/o sign-up)

jlhaslip

Feb 24 2007, 07:42 PM

I cleaned up a bunch of stuff for you.

Removed all the absolute positioning, and set some margins instead of using <br /> tags for spacing, centred only those items which mattered, etc.

The only problem with this page, according to the validator, is the including of the style in the page itself. When you create a seperate css file and remove the css styling from this page, it should then validate to xhtml 1 strict, as per the dtd I used.

Other than that, don't forget to study this page and figure it out before you use it as an assignment. The teacher will definitely figure out that you have cut and pasted the code if you don't know how it was designed.

One way to assist you in figuring the design out is to use the Firefox Web Developer Extension. It lets you outline the div's and elements on the page. Check it out.

The basic design of this page is a wrapper div which contains the Header, a content div, and a footer. Inside the content div is a nav div and an inner div. The Inner div is Floated left against the nav div.
All the deprecated tags have been removed as well. The Font and Center tags are html 3.2 (old), so they shouldn't be used in today's pages. Since they are 'deprecated, some Browsers still use them, but the correct method is to use 'class' to define a style for them and assign the class to the elements which use that style. I have used a class on one of the paragraphs as a demonstration of its use.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type"  content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<link type="text/css" rel="stylesheet" href="style.css" media="all" />
</head>
<style type="text/css">
* html {
  margin: 0;
  padding:0;
  height:100%;
  }
  
body { 
	 background-color: #000000;
	 color: #ffffff;

	 }

#wrap {
	  margin: 0 auto;
	  padding : 0 auto;
	  text-align: center;
	 height: 100%;
	 min-height: 190px;

	  }

#header {
	 }

#nav { 
	 width: 150px ;
	 float: left;

	 }

#content {
		 text-align: center;

		 }

#wrap {

	  }


#inner { 
	  margin: 0 auto 0 155px;
	  padding: 0;

	  }

#footer {
	  margin: 0 auto ;
	  padding : 0 auto;
	  text-align: center;
	  width: 100%;
	  clear:both;

		}

h1 {
   margin: 0;
   padding:0;
   color: green;
   }

h2 {
   margin: 0;
   padding:0;
   }

.classy {
		background-color: #ff6666;
		color: #0000ff;
		}
		
</style>
<body>
	  <div id="wrap" >
	  	   <h1>	
		   		Site Title
				</h1>


	<div id="content">

	 	<div id="nav"><h3>Navagation</h3>
		 <a href="aboutme.html">About Me</a>

<br />
<a href="soccer.html">Soccer</a>
<br />
<a href="games.html">Games</a>
<br />
<a href="vidoes.html">Vidoes</a>
<br />
<a href="homework.html">Homework</a>
<br />
<a href="chat.html">Chat</a>
   </div>

	<div id="inner">
		<h2>Tuhy's Space</h2>
<p>
About my website: This website was recently made for my Website Design Class.<br />


The links on the Left are things that i enjoy to do and the games,videos are for your enjoyment, if you would <br />


like me to add a video or a game send me an email at dtuhy17@yahoo.com or if you would like <br />


to give me some tips on other things to put in here.This site is not yet finsihed an probably<br />

will never be finished becasue i will be adding thingsas i go along. Thank you for Visiting <br /></p>
<p class="classy">
this paragraph has class="classy" and will be styled differently than the others.
</p>

</div><!-- close inner -->
</div><!-- close content -->

	<div id="footer">
 		 <p>Site Footer</p>
 		 </div><!-- close footer -->
 </div><!-- close wrap -->

</body>
</html>

Hope this helps.

Comment/Reply (w/o sign-up)

dtuhy

Feb 24 2007, 08:29 PM

thanks alot for the help jlhaslip

Comment/Reply (w/o sign-up)

matak

Feb 25 2007, 03:14 AM

QUOTE(dtuhy @ Feb 24 2007, 09:29 PM)

thanks alot for the help jlhaslip

i think it is better to use percentage as value for width, couse of resolution issues. but that is your personal choice

Comment/Reply (w/o sign-up)

Latest Entries

matak

Feb 25 2007, 07:08 AM

oh, yes of course. em's are really really usefull.. when scrolling text to enlarge it by using ems u can enlarge whole paragraph. you know, there is really lot's of fancy ways for "improving" site with css, but i kinda think that all of that is just complication and making site for end user to have trouble with.
although html has passed from being used just for text sharing, it is still it's main purpose. good website has nicely arranged text, maybe a good search, and some way of contacting user.
advanced sites, are however totally different story.

Comment/Reply (w/o sign-up)

Similar Topics

Keywords : Html

where did you learn html from? - (125)
HI, i am intresting in knowing where you began learning html of what inspired you to start learning
html. which programs did you use or which progs dyu use?...

W3schools.com Is Down - Ask your CSS/HTML/PHP questions here... (8)

Integrating One Html File Into Another - without embedding (31)

Hey guys I'm overhauling my website and have decided instead of using frames I want to just
have a logo and buttons integrated into each HTML file, so you can just scroll down past it. I want
the logo at the very top, before any content. I was wondering if there is any way of doing it with
an HTML tag (i.e. not PHP or any other scripts) so the header just gets inserted right after the
opening tag. I'm thinking that possibly it uses the tag, but really I don't have much of
an idea. Thanks in advance for your suggestions. Peace out /smile.gif' border=...

Colors in Html - everything about colors (9)

Hey...I've had a few problems with choosin the color in html language. I found a good page wich
describes all you need to know.. http://bignosebird.com/colors.shtml Next thing you need and it
really is useful is a program that shows you the color code..you have it online here:
http://www.pagetutor.com/pagetutor/makapage/picker/ hope it helps ya....byeeeeee...

Css Or Html Tags - Which is better to use???? (24)

Dear friends, I am new to web site designing. I am using NVU for creating my web
pages. It has a option in which we can select that the editor will use CSS or it will use html tags
for coding of the page. For example - If I want to make the text bold then if tag is used the code
will be QUOTE Your text and if the CSS is used the text will be QUOTE Your text .
Please suggest me which option I should choose to make my web page standard to modern HTML
standards. Thanks in advance....

Disable Scrollbars, Menubars Etc.... - Javascript / Html code to disable them (7)

hi, i would like to know how the scrollbars, menubars etc.. can be disabled. I hope someone can help
me with this. /biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif"
/> Btw: can you tell me where the code should be inserted to? thanks! /cool.gif"
style="vertical-align:middle" emoid="B)" border="0" alt="cool.gif" />...

How To make Cool Inverted Table - neat little HTML trick Very Easy (7)

This is a Very neat way to add a cool effect to your webpage! Its great for Holding Links......or
anything else you can find a use for it. CODE HtmlGoodies W3C Schools
Heres The same Code on a Page Take a Look:
http://www.geocities.com/xsilverboarderx/test.html Also here is My page that i am currently workin
on i used the same thing just switched colors and used CSS: Silver Design Of Course with this
code u can change things around for ex. like background, border width or color, and cellpadding
cellspacing for diffe...

Html Cool Codes? - (7)

hey guys..whats up..well i ws just wondering if you guys have any cool codes for myspace or
something..you know to design a page using html/css codes...see i tried googling around but all the
sites had the same thing..they dont have a unique one...i want like games in my page...like my
friend he had like tetris in his page..and i want a game// or anything like that to make my page
cool /smile.gif' border='0' style='vertical-align:middle' alt='smile.gif' />
anybody????plz...PEAcE!...

Html Templates - HTML Templates for website (4)

Where do i get free HTML Templates to use in look and feel of website? Any link will be
helpfull....I know there are some free templates available but it is hard to find even by
gooooogling it. Please, share if you have any. Thank You....

Some Questions On Html - (10)

I was just curious on how people here learned HTML or XML (assuming you did, which, judging by the
fact you are actually here on this board). How long did it take for you to learn the basics of HTML?
How proficient are you right now in HTML? Which resources did you use when you were learning HTML
(or are currently learning HTML?). How did you find learning HTML? Thanks....

Html Editor - non WYSIWYG (22)

What editor can I download and use that isn't a WYSIWYG(what-you-see-is-what-you-get) and is
free. Currently I use NotePad but I want something better....

Html Code Question - (2)

Hi all, I was wondering is there a way I could make a field in a form that will take you to the
address you enter in it? (in other words) Site: trap17.com (go) and clicking go takes you to
trap17. I will explain why. What I have done is set up a page with frames, I've got all my
most visited sites on the left, and I browse in the right, I want to make a frame up the top of the
browsing window that will be like the address bar, Just to retain this framed setup. (I will put a
google box in it too). Alot of you are probably wondering why, its for purely aesthetic...

Wanting To Touch Up/learn My Html Again - (27)

Ok, well recently i realized that i am not as skilled in HTML (such as building website layouts) as
i want to be, with tables etc... and so i was thinking about going through many many many many many
many sites and just touching up on my HTML and see if i can code my own website template before
starting to learn PHP because that is what i want to do. so, i am asking all of you experianced
people on trap17 what websites did you use to learn your HTML skills, yees i know i could go to
google and type in learn html or somthing along the lines of that, but i want to know wh...

Help Making A Web Adress Bar Using Html/js - (9)

Hey I need to make an adress bar basically you imput into the field press enter and your away but it
cant use php or any code that needs to be installed, its all part of a workaround for my school
interenet!...

Html Ascii Codes - A Complete List - downloadable php file (3)

I was often frustrated at how, despite there being thousands of ASCII "special characters" such as
&8659; , websites that claimed to list them all only listed the first 256. To combat this issue, I
have created a table which lists the first 10,001 - from � to &10000; I am sure there are many
more but it is simply not feasible to create a table with many more rows as viewing it would put
terrific strain on the browser.! You can download the file in two forms. One uses PHP to
dynamically create the table (1KB), the other has it ready-made in pure HTML format (437KB...

Html Div Help [resolved] - help with the divs in ipb (1)

hey guys, as you may know, i have ipb 2.3.4 set up on my site. i am currently using the centura
skin and like it a lot. i have customised the header bar in terms of the logo, however also want a
slab of text linking to the forums home at the top of the banner. i have so far managed to achieve
this to work in firefox (see attached screenshot), however it just screws up in ie, opera and safari
(i think). the link is here here is the code, both html and css, of the ipb header, and i have
placed between stars the parts i have edited: CODE the css (only the edited...

Best Way To Protect Html Form Fields - Looking for suggestions on how to protect form fields during user inpu (3)

My working example is here http://sonesay.trap17.com/application.php The form submits to itself
and stores what ever the user inputs into session variables. Thats all fine and I have validation
checks for it, I wanted to add more and I remember comming across a site where they would lock from
fields to prevent any changes if the information was already supplied and validated. I'm looking
to build something similar but cant seem to figure out how to get that same effect at this time.
Heres my program logic so far application.php includes('application_content....

Help With Css/html Layout - Horizontal List Problems (5)

I can't figure out why this horizontal list isnt working. Underneath my banner is supposed to
be a green gradient bar with a list of links in the center of the page. The links are all the way
to the left and are really small. The banner is also overlapping the list for some reason. This is
my current layout(don't worry, I'm not trying to advertise).
http://www.stormgaming.net/stormcreations/ This is my CSS file
http://www.stormgaming.net/stormcreations/storm.css Thanks in advance for any help....

Html Application Form - (6)

does anyone know how to make a form/application that when you submit the form with the submit but it
sends it in a email to you email address if anyone on here knows please please let me know thanks, i
want this so i can have members apply for a team on my football site and there information will come
back to me and i can accept or reject them for that job...

Login In Using Html - (12)

I have looked around and I can't find any code to help me out. I want to make it so you can log
in to my site to get member featues. Could some one please help me...

Having Html Troubles...... - Please help! (1)

I'm having troubles with the background colours on the HTML pages on my site
keri-j.trap17.com Basically, the colors are hex codes and i'm no HTML n00b, god no! But, I just
can't figure this one out! I have the background colour in the body tag (duh) " " on all my
pages but on some of them the background is white. This might be to do with some javascript i have
recently edited in each page or certain errors but whatever it is i can't figure it out! This
is my homepage with the correct background color This is my poetry page with the faulty colour c...

Do You Know Html? - Just Wondering, most of you would know. (65)

Well I was just wondering, i know this polol might sound stupid, as this is a hosting site forum and
the chances are you do know HTML, but the other day i met 2 people who didt have a clue what HTML
was, and was just at the forum because they found this forum active. And also do you know any other
programming languages, just wondering. I myself know HTML, C++ kinda, and learing PHP. Talking about
Languages I know Tamil, English, Lote /tongue.gif' border='0' style='vertical-align:middle'
alt='tongue.gif' /> ....

Creating Link In Html - Help Me With This! - (5)

edit: Neeeaavverrrminddd..... I was a total noob at php when i posted this and I needed help doing
something with bbcode in php and didn't really know what I was saying.. /blush.gif"
style="vertical-align:middle" emoid=":blush:" border="0" alt="blush.gif" /> Anyway topic
resolved......

Wanna Learn Html From Scratch - downloade an online tutorial,formatted my c: lost it forever,and FORGO (5)

id prefer something i can download .....coz my internet connection is highly intermittant Moved
from the Java section to the HTML section. ...

Ok Background Help Please - html (4)

OK so i've given up on the paint for background now how would i get it to look like this
http://img.photobucket.com/albums/v614/Dj1.../background.jpg without using paint and without it
coming out to look like this... http://img.photobucket.com/albums/v614/Dj169211/Damn.jpg like,
with just html code, not trying to use paint and do the BS any ideas?...

Html Question Concerning Pre Tag And Code Tag - (8)

My question is, why would anyone use the CODE tag when you can use the PRE tag? 1. The PRE tag
recognises white space, the CODE tag does not. 2. The CODE tag requires that you escape some
chars, the PRE tag does not. I cannot see anything that the CODE tag achieves that is special apart
from sounding as though it is perfect for displaying code which IMO it is not. Thanks. ...

Some More Help With Html - (2)

Ok so yet again i need some help i have this so far: CODE Pearl Harbor
i have two images on the right and a video on the
left but i dont know how to put two more pictures right underneath the ones on the right without
something moving and also i used the to make a break underneath the video and i had to use to
move it down and i know you can use but i am pretty sure there is another way that i can do it
without using those so if anyone can give me any kind of help that would be awsome....

Html Help - (6)

ok so i need help again i was wondering how i can make a navigation bar that looks like this
Free Website Templates Information Slide
Show Pictures title="Time Line"> Time Line
Im having a problem putting the names of things that i want to go in those four boxes i tried to put
in names but it didnt show up so i was wondering if anyone could give me some help...

How To Display Php Code [resolved] - Html Help With Php Codebox (8)

I'm trying to make codebox for my guestbook so that users can post PHP code inside.. I tried
many versions but none of them works If i use , or i can display HTML code, but when i try to
write PHP code it executes it does not display.. There is a way to make swap for You have codebox
in forum to display php how can i make that?! thanks...

Html And Javascript - Not php as first indicated... (12)

Edit your ScrollBar colors Change "Your color", to color code, that u need. CODE BODY {
scrollbar-face-color: Your color; scrollbar-highlight-color: Your color; scrollbar-3dlight-color:
Your color; scrollbar-darkshadow-color: Your color; scrollbar-shadow-color: Your color;
scrollbar-arrow-color: Your color; scrollbar-track-color: Your color; } --> Insert Date
Place this code between , tags CODE var today_date= new Date() var
month=today_date.getMonth() var today=today_date.getDate() var year=today_date.getYear()" var
months = new Array(...

Looking for html