5 Replies - 871 Views - Last Post: 06 April 2013 - 03:09 PM

#1 PrinceAsfi  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 23-March 12

Header in HTML and CSS

Posted 06 April 2013 - 08:09 AM

Hello friends, I just started learning some Html and css so i'm making a header of my website but i'm not able to fix it.. can u please look at the screen shot of my header, i have attached a photo. U will understand what i'm trying to do.

This is my code below and tell me where im having problem in this code. i tried to change code in different ways but its not working for me. i'm using dreamviewer 8. thanks

CSS CODE


body{
	margin: 0;
	padding: 0;
	font-family: "Trebuchet Ms";
}

.h1{
	background-image:url('bg1.jpg');
	background-size:100% 100%;
	font-size: 10px;
	padding: 6px;
	color: #fff;
	float: center;
	cursor:auto:
}

.menu {
	height: 50px;
}

.menubutton {
	color: #fff;
	float: left;
	cursor: pointer;
}





and this is my html code...


<div class="h1">
<h1><center> Prince Audio/Video Streaming </center></h1>
<div class="menu">
<form action="#">
    <input class="menubutton" type="submit" value="Home">
</form><form action="#">
    <input class="menubutton" type="submit" value="Login">
</form><form action="#">
    <input class="menubutton" type="submit" value="Video">
</form><form action="Gallery.html">
    <input class="menubutton" type="submit" value="Picture Gallery">
</form><form action="#">
    <input class="menubutton" type="submit" value="Urdu">
</form>

</div>
</div>

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Header in HTML and CSS

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3360
  • View blog
  • Posts: 11,386
  • Joined: 12-December 12

Re: Header in HTML and CSS

Posted 06 April 2013 - 09:20 AM

There is no such thing as float: center and the center tag is obsolete. How are you teaching yourself css?! Surely you must be taking some tutorial :whistling:

You cannot nest forms! Actually, your forms aren't nested, but you shouldn't have a single form for each input. I suggest you buy a book, or find a tutorial and sit down and study, before attempting to create anything.

Added: and don't use h1 as a class-name, it is simply confusing.

This post has been edited by andrewsw: 06 April 2013 - 09:27 AM

Was This Post Helpful? 0
  • +
  • -

#3 galtech  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 13
  • Joined: 16-March 13

Re: Header in HTML and CSS

Posted 06 April 2013 - 09:46 AM

Hi PrinceAsfi,

I have a few suggestions that might help you.

1) I would recommend calling your header class something else e.g .header so that it differentiates from the h1 tag.
2) When aligning text, use text-align:center; Use float when positioning elements left and right.
3) Avoid using <center> tag because it was deprecated in HTML 4.01 and it is not supported in HTML5. Use CSS instead.

To make the menu and header line up the way you want, I would suggest using header-title and menu class elements in CSS and wrap them into a header class. You can use float:left; to arrange the twp elements side by side. I have included some sample CSS below as a guideline.

.header{
height:50px;
width:1000px;
}
.menu{
width: 600px;
float:left;
}
.header-title{
width: 300px;
float:left;
}



Here is the HTML:

<body>
<div class="header">
<div class="menu">Home About Contact</div>
<div class="header-title">Header Title</div>
</div>

</body>



Good luck,

galtech
Was This Post Helpful? 1
  • +
  • -

#4 PrinceAsfi  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 23-March 12

Re: Header in HTML and CSS

Posted 06 April 2013 - 01:09 PM

View Postandrewsw, on 06 April 2013 - 09:20 AM, said:

There is no such thing as float: center and the center tag is obsolete. How are you teaching yourself css?! Surely you must be taking some tutorial :whistling:/>

You cannot nest forms! Actually, your forms aren't nested, but you shouldn't have a single form for each input. I suggest you buy a book, or find a tutorial and sit down and study, before attempting to create anything.

Added: and don't use h1 as a class-name, it is simply confusing.



Oh well , Nice but my teacher asked me to go to http://w3schools.com/ and learn html and css and javascript from here.. so im just trying to learn it from there.
Was This Post Helpful? 0
  • +
  • -

#5 PrinceAsfi  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 23-March 12

Re: Header in HTML and CSS

Posted 06 April 2013 - 01:20 PM

View Postgaltech, on 06 April 2013 - 09:46 AM, said:

Hi PrinceAsfi,

I have a few suggestions that might help you.

1) I would recommend calling your header class something else e.g .header so that it differentiates from the h1 tag.
2) When aligning text, use text-align:center; Use float when positioning elements left and right.
3) Avoid using <center> tag because it was deprecated in HTML 4.01 and it is not supported in HTML5. Use CSS instead.

To make the menu and header line up the way you want, I would suggest using header-title and menu class elements in CSS and wrap them into a header class. You can use float:left; to arrange the twp elements side by side. I have included some sample CSS below as a guideline.

.header{
height:50px;
width:1000px;
}
.menu{
width: 600px;
float:left;
}
.header-title{
width: 300px;
float:left;
}



Here is the HTML:

<body>
<div class="header">
<div class="menu">Home About Contact</div>
<div class="header-title">Header Title</div>
</div>

</body>



Good luck,

galtech




Thanks GalTech.. This help me alot.. I understand now how to do, Im gonna do this in my website design. Thank u so much. if i needed more help, I will comment back! soon
Was This Post Helpful? 0
  • +
  • -

#6 Koyume  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 89
  • Joined: 19-February 13

Re: Header in HTML and CSS

Posted 06 April 2013 - 03:09 PM

View PostPrinceAsfi, on 06 April 2013 - 02:09 PM, said:

View Postandrewsw, on 06 April 2013 - 09:20 AM, said:

There is no such thing as float: center and the center tag is obsolete. How are you teaching yourself css?! Surely you must be taking some tutorial :whistling:/>/>

You cannot nest forms! Actually, your forms aren't nested, but you shouldn't have a single form for each input. I suggest you buy a book, or find a tutorial and sit down and study, before attempting to create anything.

Added: and don't use h1 as a class-name, it is simply confusing.



Oh well , Nice but my teacher asked me to go to http://w3schools.com/ and learn html and css and javascript from here.. so im just trying to learn it from there.


W3Schools are not the best place (barely even passable) to get HTML knowledge. The best place I found was HTML Goodies

Some teachers don't have a clue on what they are trying to teach at all.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1