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.

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

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; }

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)

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.

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.

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...

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.

dtuhy

Feb 24 2007, 08:29 PM

thanks alot for the help jlhaslip

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

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.

Similar Topics

Keywords : html

where did you learn html from? - (84)
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?...

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

Html Cool Codes? - (6)

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 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 HT...

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 ed...

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...

Html Editor - non WYSIWYG (19)

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....

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...

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 <html> <head>
</head> <BODY BGCOLOR="black" TEXT="white" LINK=#XXXXXX
VLINK=#XXXXXX> <body> <center><h1> Pearl
Harbor</h1></center> <hr> <p> <a
href="http://photobucket.com" target="_blank"><img
src="http://i173.photobucket.com/albums/w59/tuhyd/pearlharbor.jpg" border="0"
align=right alt="USS Arizona "></a></right> <a ...

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 <STYLE
type="text/css"> 
</STYLE> Insert Date Place this code between , tags CODE <script
language=Javascript> <!-- v...

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

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...

Html Query - HTML Query (2)

OK, so I want to know if it's possible to have my links as a seperate file and simply reference
that file in the rest of my site's pages so that if I change the links, I don't have to go
and edit every single page of my site. Does anyone know how to do this?...

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

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
fau...

Have You Used This Html Code? - very useful (9)

how do you do if you want to put a video or audio file on you page...maybe you will use CODE
<object><param name=url value="url"></object>/*simple format*/
CODE <div><embed src="url"></embed></div> /*simple
format*/ there is a very familiar code for carring out the video show : CODE <img
dynsrc="http://kenvi9999.googlepages.com/ff7.wmv" border=1>/*an example:FF7*/
have you used this html code...I just knew a tag can achieve video play that is really co...

Error In Css (or Html) - (5)

Well i am currently working on a project, and for this i need to fix this little error: Code is:
CODE $this->frm .= "<style type=\"text/css\">
                                                 </style>{$this->top}
                        <from action=\"$PHP_SELF\"
method=\"post\" name=\"\">
                        <table width=\"800�...

Html And Xhtml - serving the right kind (11)

Right now I have a site, which I've made XHTML 1.0 Strict. I am sending it as
application/xhtml+xml to browsers that say they can handle it, and as text/html to all other
browsers. Anyway, I started thinking that I'd much rather send proper HTML 4.01 to browsers that
don't understand XHTML instead of XHTML pretending to be HTML 4.01. It's not really a
problem with IE, because it is made to handle badly written sites, but who knows, some browser that
can handle HTML, but not XHTML, may be (correctly) parsing CODE <p> Hello <br />
World...

Url Redirection = Javascript+html - Redirect using scripts! (4)

In javascript Browser redirection can be done in 3 ways: 1) Alert Redirect: CODE
<html> <script>     alert("This page has been moved to a new location...
click OK to be redirected.");     location = "http://www.your-website.com";
</script> </html> 2) Confirm and Redirect: CODE <html>
<script>     if(confirm("This page has been moved to a new location... would you
like to be redirected"))     {   location = "http://www.your-website.com";
    }...

Centering Page Of Html At Various Display Widths - Viewing Screen Shots No Matter Resolution (14)

I am running into a HUGE problem creating a website. When viewing the site on 800x600 it views in
the center of the page. When viewing the site on 1024x768 it views on the left side of the page. How
do I make the page always appear in the middle? I have seen many sites set up that will adjust
accordingly, but I cannot figure it out. If you want to view my source you can do so by going to the
website: www.faithcity.org/test.html. Moving to the html Topic ...

Problem With 'target' In Html - (2)

Hi, I have this menu on my site which is build in a table. when pointing over a cel with mouse, the
background of the cell changes in white and produce a special code: CODE <td
align="center" bgcolor="#D6C2B4" class="bodystyle" style="font: 9px
Verdana" onClick="location.href='about.htm'"
onMouseOver="this.style.background ='#FFFFFF'"
onMouseOut="this.style.background='#D6C2B4'">ABOUT</td>
The normal linkcode is replaced by , onClick="location.href...

A Question About Html Iframes - Need help in <iframe> (7)

We have an upcoming project in our class...I've a cool idea of lay out but i hav a problem.
I'm using a lot of images. I need to embed my contents in those images (texts and graphics)
using table cells... My friend told that there is a so called tag to solve it but he doesn't
know how.... Can you please send me some hot info about parameter and hows' of iframes? Samples
would be great. Tnx... Use a more descriptive title next time. ...

Title Attribute - and HTML entities for special characters (5)

Hi, I've had this trouble for a time now, I use dreamweaver to develop the sites I work with,
and dw always writes the code for me (not that I don't know anything about xhtml, in fact i
consider myself and advanced user of xhtml, but I know that its faster to use dreamweaver to code
than write it down from scratch, and I can still fix the little issues that dw generates into the
code). But the fact is that I work with websites that need the content in spanish, so I use html
entities to declare special characters such á é í ó ú or ñ, all of which always behave we...

Looking for html

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE