Welcome Guest ( Log In | Register)



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> Help With Html
dtuhy
post Feb 24 2007, 02:08 AM
Post #1


Member [Level 1]
****

Group: Members
Posts: 65
Joined: 9-February 07
Member No.: 38,515
Ok so i just started learn html about a couple of weeks ago and i make a background image using this code:

CODE
<style type="text/css">
body { background-image:url("http://img.photobucket.com/albums/w59/tuhyd/backgrounds.jpg"); background-repeat: no-repeat}</style>


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.

Notice from serverph:
added code tags. please use appropriate bbcodes as needed.
Reason for edit: see moderator's note

(list)

Go to the top of the page
 
+Quote Post
Kubi
post Feb 24 2007, 02:13 AM
Post #2


To Cool for Cache
Group Icon

Group: [MODERATOR]
Posts: 1,124
Joined: 16-June 05
From: Some Place.
Member No.: 8,317
T17 GFX Crew
Have you tryed just adding text to the image with photoshop or paint?

Can you try this?

CODE
<div align="center">Text</div>



(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Feb 24 2007, 02:25 AM
Post #3


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 4,076
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
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; }


(list)

Go to the top of the page
 
+Quote Post
dtuhy
post Feb 24 2007, 02:40 AM
Post #4


Member [Level 1]
****

Group: Members
Posts: 65
Joined: 9-February 07
Member No.: 38,515
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)

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Feb 24 2007, 06:09 AM
Post #5


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 4,076
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
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.

(list)

Go to the top of the page
 
+Quote Post
dtuhy
post Feb 24 2007, 04:58 PM
Post #6


Member [Level 1]
****

Group: Members
Posts: 65
Joined: 9-February 07
Member No.: 38,515
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>


Notice from serverph:
to enclose longer codes, use codebox tags. please use appropriate bbcodes as needed.
Reason for edit: see moderator's notes

(list)

Go to the top of the page
 
+Quote Post
matak
post Feb 24 2007, 07:08 PM
Post #7


Super Member
*********

Group: Members
Posts: 413
Joined: 4-October 06
From: Psychedelic Realms
Member No.: 31,079
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...

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Feb 24 2007, 07:42 PM
Post #8


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 4,076
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
I cleaned up a bunch of stuff for you. biggrin.gif

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.