7 replies [Last post]
turco
turco's picture
Offline
Regular
Hungary
Last seen: 6 years 3 weeks ago
Hungary
Timezone: GMT+2
Joined: 2008-11-17
Posts: 28
Points: 14

Hi everyone,

I am a beginner for creating web sites. I read some sites for html and css and started to build up my site. It will be something simple, i will just use it for my forum so i need a start up page for it and than link it to forum. And i would like to use the home page as news/blog. Than when i get more into css, i will play with it around.

So here is the code below and my problem is that in the navbar, how can i align home,forum,links next to each other, searched but couldnt find this in html tags. Other than if you check the site in IE, text alignment is on top but in firefox and Chrome, its abit aligned down, how can i make one standard so every browser shows the same?

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 	<title>Student Life.Hungary</title>
	<link rel="stylesheet" href="styles.css">
</head>
 
<body>
 
<div class="page-header">
<p>Banner goes here, ignore the color
</div>
 
<div class="navbar">
  <p><a href="index.html">Home</a>
  <p><a href="musings.html">Forum</a>
  <p><a href="links.html">Links</a>
</div>
 
<div class="page-body">
<h1>Welcome to Student Life</h1>
 
<p>Welcome to my styled page!
 
<p>bla bla bla bla
 
<p>bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
 
</body>
</html>	

styles.css

body		{text-align:top left;
		font-family; Georgia,"Times New Roman",Times, serif;
		vertical-align:top;}
 
.page-header	{background-color: #FF8000;
		width: 720px; 
		height: 120px; 
		position: absolute; 
		left: 250px; 
		top: 15px;}
 
.navbar		{background-color: #40BB40;
		position:absolute;
		top:135px;
		left:250px;
		width:720px;
		height: 120px;} 
 
.page-body	{color: purple;background-color: black;
		position:absolute;
		top:255px;
		left:250px;
		width:720px;
		height:500px;}
 
.h1	{font-family: Helvetica, Geneva, Arial,SunSans-Regular, sans-serif}
 
A:link, A:visited { text-decoration: none; color: black; }
A:hover { background: white }

Thanks in advance, burak

turco
turco's picture
Offline
Regular
Hungary
Last seen: 6 years 3 weeks ago
Hungary
Timezone: GMT+2
Joined: 2008-11-17
Posts: 28
Points: 14

btw, i put different colors

btw, i put different colors to show the frameset (for myself, still newbie)

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 9 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Dude, wow

Your nav should be a list that looks like this.
XHTML

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Links</a></li>
</ul>

CSS - for you nav to appear horizontal.

ul li {display: inline;}

Also, you really should do more learning before getting this far. Your code is a mess. All tags need to be closed. you have

Welcome to my styled page!

. This should be closed like this

Welcome to my styled page!

. I suggest buying a book and learning XHTML before diving into CSS.

turco
turco's picture
Offline
Regular
Hungary
Last seen: 6 years 3 weeks ago
Hungary
Timezone: GMT+2
Joined: 2008-11-17
Posts: 28
Points: 14

Thanks, it worked. My code

Thanks, it worked.

My code is a mess because some tags arent closed or because of something else?

How can make it look same in every browser?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 50 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

turco wrote:My code is a

turco wrote:

My code is a mess because some tags arent closed or because of something else?

How can make it look same in every browser?

You have to start by learning to create valid html and valid CSS. Validators exist on line to flag the errors for you, but learning to write valid code is a necessary skill that you really must learn for yourself. The standard html validator is at http://validator.w3.org/ and their CSS validator is at http://jigsaw.w3.org/css-validator/.

Learning to write good web pages is a skill that we cannot learn for you. There is much good information in the site's "How to" forum however. It will take time and some hard thinking but it is well worth it and there are no shortcuts no matter what some folks will tell you.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

turco
turco's picture
Offline
Regular
Hungary
Last seen: 6 years 3 weeks ago
Hungary
Timezone: GMT+2
Joined: 2008-11-17
Posts: 28
Points: 14

Hi again, I read html/xhtml

Hi again,

I read html/xhtml once again and started to study css. Now i would like to ask you what is the best way to align the frames(classes) into the center? So i would like them to stay in the middle , balanced from both sides. Like msn.com, when you resize the browser, its going towards the left/right and after sometime, you have the cursor at the bottom of the browser.

And one last thing, when you view the code with IE/Firefox, they are different, what is the best way to avoid this?

Thanks again

index.html

<!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>Student Life.Hungary</title>
		<link rel="stylesheet" href="styles.css" />
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
	</head>
 
	<body>
 
		<div class="page-header">
			<p>Banner goes here, ignore the color</p>
		</div>
 
		<div class="navbar">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Forum</a></li>
				<li><a href="#">Links</a></li>
			</ul>
		</div>
 
		<div class="page-body">
			<h1>Welcome to Student Life</h1>
 
			<p>Welcome to my styled page!</p>
 
			<p>bla bla bla bla</p>
 
			<p>bla bla bla bla bla bla bla bla bla bla bla bla
			bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
			bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
			bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
		</div>
 
	</body>
</html>	

styles.css

body {
	background-color:white;
	text-align:left;
}
 
.page-header {
	background-color:#ff8000;
	width:846px;
	height:139px;
 
}
 
.navbar {
	background-color:#40bb40;
	top:200px;
	width:846px;
	height:30px;
 
}
 
.page-body {
	color:purple;
	background-color:black;
	top:231px;
	width:846px;
	height:500px;
}
 
ul li {
	display:inline;
}
 
A:link, A:visited {
	text-decoration : none;
}
 
A:hover {
	background:white;
}

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 9 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

body {text-align: center;} for your dogs bubblegum!

there a few ways to makes things center on the page.

body {text-align: center;}

or

DIV#container {margin: 0 auto;}

turco
turco's picture
Offline
Regular
Hungary
Last seen: 6 years 3 weeks ago
Hungary
Timezone: GMT+2
Joined: 2008-11-17
Posts: 28
Points: 14

Thanks man, you helped alot

Thanks man, you helped alot Smile