layouts for daniweb front page

Question

jemz -1 Master Poster

13 Years Ago

Hello To All,:)

can you help me please how can i make the front page in the daniweb?.is it possible in HTML only because i have not yet tried using CSS,also the Buttons on top like Hardware & Software,Software Development,Web Development and etc..there is submenu will come out when i put the cursor on it.can you help me please how can i do this.Thank you in advance hoping for your positive response.

web-design

5 Contributors
10 Replies
145 Views
3 Months Discussion Span
Latest Post 12 Years Ago Latest Post by jemz

All 10 Replies

Classme 0 Newbie Poster

13 Years Ago

Well, you need to use CSS to make a website like DaniWeb...You can use HTML only...but it still needs a small knowlege about CSS...

You need to learn Style feature

Example :

<body style="padding-left:30px">

You notice "padding-left:30px" this what you type in CSS...but it will get a bit longer if you embed it into HTML using CSS...Rather when you can easily use Class function.

Edited 13 Years Ago by Classme because: n/a

Classme 0 Newbie Poster

13 Years Ago

First of all...I'm just 15 year old...I never liked to called "Sir"...

So as for your request....
As I already told you need to use CSS... It's just easy follow what I say it's all enough....

1. Open a Notepad and copy all this...

.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	}

.menu ul{
	background:#333333;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}

.menu li{
	float:left;
	padding:0px;
        }

.menu li a{
	background:#333333 url("images/seperator.gif") bottom right no-repeat;
	color:#cccccc;
	display:block;
	font-weight:normal;
	line-height:35px;
	margin:0px;
	padding:0px 25px;
	text-align:center;
	text-decoration:none;
        }

.menu li a:hover, .menu ul li:hover a{
			background: #2580a2 url("images/hover.gif") bottom center no-repeat;
			color:#FFFFFF;
			text-decoration:none;
                        }

.menu li ul{
	background:#333333;
	display:none;
	height:auto;
	padding:0px;
	margin:0px;
	border:0px;
	position:absolute;
	width:225px;
	z-index:200;
	}

.menu li:hover ul{
		display:block;

		}

.menu li li {
	background:url('images/sub_sep.gif') bottom left no-repeat;
	display:block;
	float:none;
	margin:0px;
	padding:0px;
	width:225px;
	}

.menu li:hover li a{
	background:none;

	}

.menu li ul a{
	display:block;
	height:35px;
	font-size:12px;
	font-style:normal;
	margin:0px;
	padding:0px 10px 0px 15px;
	text-align:left;
	}

.menu li ul a:hover, .menu li ul li:hover a{
	background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
	border:0px;
	color:#ffffff;
	text-decoration:none;
	}

2. Save this file as " menu.css " and make sure that it is saved in the same folder as your website is saved in.

3. Open your website in notepad. Within the <head> tags...You add this code (IMPORTANT). This allows the website to connect with the .CSS file.

<head>
 <link rel="stylesheet" href="menu.css" type="text/css" />
</head>

4. Adding certain images...
If I'am right you must have your website in a specific folder. Within the same folder you made another folder which holds all the images.
Hence your folder must be somewhat like this "Images(Folder) - website.html - menu.css"

Now...download images from here... http://min.us/mvbFiFG/gallery.zip

5. Adding the script into the website...

Now add the code below to the place where you want the menu in your website...So open your website in a notepad(or dreamweaver)

<body>

      <div class="menu">
		<ul>
			<li><a href="#" >Home</a></li>
			<li><a href="#" id="current">Products</a>
				<ul>
					<li><a href="#">Drop Down CSS Menus</a></li>
					<li><a href="#">Horizontal CSS Menus</a></li>
					<li><a href="#">Vertical CSS Menus</a></li>
					<li><a href="#">Dreamweaver Menus</a></li>
			   </ul>
		  </li>
			<li><a href="/faq.html">FAQ</a>
                <ul>
                <li><a href="#">Drop Down CSS Menus</a></li>
                <li><a href="#">Horizontal CSS Menus</a></li>
                <li><a href="#">Vertical CSS Menus</a></li>
                <li><a href="#">Dreamweaver Menus</a></li>
                </ul>
          </li>
			<li><a href="/contact/contact.php">Contact</a></li>
		</ul>
	</div>
</body>

Edited 13 Years Ago by Classme because: n/a

iahnalcantara 0 Newbie Poster

13 Years Ago

To Classme - Are you really a 15-year old kid? Can we exchange minds? For once? :D
I can hardly make a website.. Shame!

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jemz -1 Master Poster · Answer 1 · 2011-04-21T04:28:28+00:00

Well, you need to use CSS to make a website like DaniWeb...You can use HTML only...but it still needs a small knowlege about CSS...
You need to learn Style feature
Example :
<body style="padding-left:30px">
You notice "padding-left:30px" this what you type in CSS...but it will get a bit longer if you embed it into HTML using CSS...Rather when you can easily use Class function.

hello sir, thanks for the reply, what about the buttons on top how to code like that i have no idea.please help me sir thank you in advance hoping for your positive response...

jemz -1 Master Poster · Answer 2 · 2011-04-24T14:40:35+00:00

First of all...I'm just 15 year old...I never liked to called "Sir"...

So as for your request....
As I already told you need to use CSS... It's just easy follow what I say it's all enough....

1. Open a Notepad and copy all this...

.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	}

.menu ul{
	background:#333333;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}

.menu li{
	float:left;
	padding:0px;
        }

.menu li a{
	background:#333333 url("images/seperator.gif") bottom right no-repeat;
	color:#cccccc;
	display:block;
	font-weight:normal;
	line-height:35px;
	margin:0px;
	padding:0px 25px;
	text-align:center;
	text-decoration:none;
        }

.menu li a:hover, .menu ul li:hover a{
			background: #2580a2 url("images/hover.gif") bottom center no-repeat;
			color:#FFFFFF;
			text-decoration:none;
                        }

.menu li ul{
	background:#333333;
	display:none;
	height:auto;
	padding:0px;
	margin:0px;
	border:0px;
	position:absolute;
	width:225px;
	z-index:200;
	}

.menu li:hover ul{
		display:block;

		}

.menu li li {
	background:url('images/sub_sep.gif') bottom left no-repeat;
	display:block;
	float:none;
	margin:0px;
	padding:0px;
	width:225px;
	}

.menu li:hover li a{
	background:none;

	}

.menu li ul a{
	display:block;
	height:35px;
	font-size:12px;
	font-style:normal;
	margin:0px;
	padding:0px 10px 0px 15px;
	text-align:left;
	}

.menu li ul a:hover, .menu li ul li:hover a{
	background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
	border:0px;
	color:#ffffff;
	text-decoration:none;
	}

2. Save this file as " menu.css " and make sure that it is saved in the same folder as your website is saved in.

3. Open your website in notepad. Within the <head> tags...You add this code (IMPORTANT). This allows the website to connect with the .CSS file.

<head>
 <link rel="stylesheet" href="menu.css" type="text/css" />
</head>

4. Adding certain images...
If I'am right you must have your website in a specific folder. Within the same folder you made another folder which holds all the images.
Hence your folder must be somewhat like this "Images(Folder) - website.html - menu.css"

Now...download images from here... http://min.us/mvbFiFG/gallery.zip

5. Adding the script into the website...

Now add the code below to the place where you want the menu in your website...So open your website in a notepad(or dreamweaver)

<body>

      <div class="menu">
		<ul>
			<li><a href="#" >Home</a></li>
			<li><a href="#" id="current">Products</a>
				<ul>
					<li><a href="#">Drop Down CSS Menus</a></li>
					<li><a href="#">Horizontal CSS Menus</a></li>
					<li><a href="#">Vertical CSS Menus</a></li>
					<li><a href="#">Dreamweaver Menus</a></li>
			   </ul>
		  </li>
			<li><a href="/faq.html">FAQ</a>
                <ul>
                <li><a href="#">Drop Down CSS Menus</a></li>
                <li><a href="#">Horizontal CSS Menus</a></li>
                <li><a href="#">Vertical CSS Menus</a></li>
                <li><a href="#">Dreamweaver Menus</a></li>
                </ul>
          </li>
			<li><a href="/contact/contact.php">Contact</a></li>
		</ul>
	</div>
</body>

Hi, Okay friend, i will follow this i will write again if i have doubt.more power to you...thank you again.

jemz -1 Master Poster · Answer 3 · 2011-04-28T20:47:15+00:00

First of all...I'm just 15 year old...I never liked to called "Sir"...

So as for your request....
As I already told you need to use CSS... It's just easy follow what I say it's all enough....

1. Open a Notepad and copy all this...

.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	}

.menu ul{
	background:#333333;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}

.menu li{
	float:left;
	padding:0px;
        }

.menu li a{
	background:#333333 url("images/seperator.gif") bottom right no-repeat;
	color:#cccccc;
	display:block;
	font-weight:normal;
	line-height:35px;
	margin:0px;
	padding:0px 25px;
	text-align:center;
	text-decoration:none;
        }

.menu li a:hover, .menu ul li:hover a{
			background: #2580a2 url("images/hover.gif") bottom center no-repeat;
			color:#FFFFFF;
			text-decoration:none;
                        }

.menu li ul{
	background:#333333;
	display:none;
	height:auto;
	padding:0px;
	margin:0px;
	border:0px;
	position:absolute;
	width:225px;
	z-index:200;
	}

.menu li:hover ul{
		display:block;

		}

.menu li li {
	background:url('images/sub_sep.gif') bottom left no-repeat;
	display:block;
	float:none;
	margin:0px;
	padding:0px;
	width:225px;
	}

.menu li:hover li a{
	background:none;

	}

.menu li ul a{
	display:block;
	height:35px;
	font-size:12px;
	font-style:normal;
	margin:0px;
	padding:0px 10px 0px 15px;
	text-align:left;
	}

.menu li ul a:hover, .menu li ul li:hover a{
	background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
	border:0px;
	color:#ffffff;
	text-decoration:none;
	}

2. Save this file as " menu.css " and make sure that it is saved in the same folder as your website is saved in.

3. Open your website in notepad. Within the <head> tags...You add this code (IMPORTANT). This allows the website to connect with the .CSS file.

<head>
 <link rel="stylesheet" href="menu.css" type="text/css" />
</head>

4. Adding certain images...
If I'am right you must have your website in a specific folder. Within the same folder you made another folder which holds all the images.
Hence your folder must be somewhat like this "Images(Folder) - website.html - menu.css"

Now...download images from here... http://min.us/mvbFiFG/gallery.zip

5. Adding the script into the website...

Now add the code below to the place where you want the menu in your website...So open your website in a notepad(or dreamweaver)

<body>

      <div class="menu">
		<ul>
			<li><a href="#" >Home</a></li>
			<li><a href="#" id="current">Products</a>
				<ul>
					<li><a href="#">Drop Down CSS Menus</a></li>
					<li><a href="#">Horizontal CSS Menus</a></li>
					<li><a href="#">Vertical CSS Menus</a></li>
					<li><a href="#">Dreamweaver Menus</a></li>
			   </ul>
		  </li>
			<li><a href="/faq.html">FAQ</a>
                <ul>
                <li><a href="#">Drop Down CSS Menus</a></li>
                <li><a href="#">Horizontal CSS Menus</a></li>
                <li><a href="#">Vertical CSS Menus</a></li>
                <li><a href="#">Dreamweaver Menus</a></li>
                </ul>
          </li>
			<li><a href="/contact/contact.php">Contact</a></li>
		</ul>
	</div>
</body>

Hello Classme,

I'm sorry for late reply because i went home for vacation.
Thank you for this.I tried it and it's working I really appreciated your help and it is very useful to me.By the way can you help me or give me some links where i could study the css like the one that shown to me.I really like to learn and to be a web developer.can you help me please.

Thank you in advance and I am hoping for your positive response.

Alish735 -3 Newbie Poster · Answer 4 · 2011-04-29T09:44:20+00:00

Alish735 -3 Newbie Poster

12 Years Ago

I think CSS is best to make it.

jemz -1 Master Poster · Answer 5 · 2011-07-17T13:40:56+00:00

First of all...I'm just 15 year old...I never liked to called "Sir"...

So as for your request....
As I already told you need to use CSS... It's just easy follow what I say it's all enough....

1. Open a Notepad and copy all this...

.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	}

.menu ul{
	background:#333333;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}

.menu li{
	float:left;
	padding:0px;
        }

.menu li a{
	background:#333333 url("images/seperator.gif") bottom right no-repeat;
	color:#cccccc;
	display:block;
	font-weight:normal;
	line-height:35px;
	margin:0px;
	padding:0px 25px;
	text-align:center;
	text-decoration:none;
        }

.menu li a:hover, .menu ul li:hover a{
			background: #2580a2 url("images/hover.gif") bottom center no-repeat;
			color:#FFFFFF;
			text-decoration:none;
                        }

.menu li ul{
	background:#333333;
	display:none;
	height:auto;
	padding:0px;
	margin:0px;
	border:0px;
	position:absolute;
	width:225px;
	z-index:200;
	}

.menu li:hover ul{
		display:block;

		}

.menu li li {
	background:url('images/sub_sep.gif') bottom left no-repeat;
	display:block;
	float:none;
	margin:0px;
	padding:0px;
	width:225px;
	}

.menu li:hover li a{
	background:none;

	}

.menu li ul a{
	display:block;
	height:35px;
	font-size:12px;
	font-style:normal;
	margin:0px;
	padding:0px 10px 0px 15px;
	text-align:left;
	}

.menu li ul a:hover, .menu li ul li:hover a{
	background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
	border:0px;
	color:#ffffff;
	text-decoration:none;
	}

2. Save this file as " menu.css " and make sure that it is saved in the same folder as your website is saved in.

3. Open your website in notepad. Within the <head> tags...You add this code (IMPORTANT). This allows the website to connect with the .CSS file.

<head>
 <link rel="stylesheet" href="menu.css" type="text/css" />
</head>

4. Adding certain images...
If I'am right you must have your website in a specific folder. Within the same folder you made another folder which holds all the images.
Hence your folder must be somewhat like this "Images(Folder) - website.html - menu.css"

Now...download images from here... http://min.us/mvbFiFG/gallery.zip

5. Adding the script into the website...

Now add the code below to the place where you want the menu in your website...So open your website in a notepad(or dreamweaver)

<body>

      <div class="menu">
		<ul>
			<li><a href="#" >Home</a></li>
			<li><a href="#" id="current">Products</a>
				<ul>
					<li><a href="#">Drop Down CSS Menus</a></li>
					<li><a href="#">Horizontal CSS Menus</a></li>
					<li><a href="#">Vertical CSS Menus</a></li>
					<li><a href="#">Dreamweaver Menus</a></li>
			   </ul>
		  </li>
			<li><a href="/faq.html">FAQ</a>
                <ul>
                <li><a href="#">Drop Down CSS Menus</a></li>
                <li><a href="#">Horizontal CSS Menus</a></li>
                <li><a href="#">Vertical CSS Menus</a></li>
                <li><a href="#">Dreamweaver Menus</a></li>
                </ul>
          </li>
			<li><a href="/contact/contact.php">Contact</a></li>
		</ul>
	</div>
</body>

Hi friend can you please put some comments i am confuse in the .menu li li and the others .menu li ul and so on...what is the purpose of it...please help me.Than you in advance and i'm hoping for your positive response.

Arkinder 93 Posting Pro in Training · Answer 6 · 2011-07-21T12:09:29+00:00

HTML is only the structure of a web page. CSS is what styles it. It is kind of like HTML is the architect and CSS is the interior designer. To make a modern web page you will need both.

Start here.

If you need any help feel free to post here.

Regards
Arkinder

jemz -1 Master Poster · Answer 7 · 2011-07-23T02:39:51+00:00

HTML is only the structure of a web page. CSS is what styles it. It is kind of like HTML is the architect and CSS is the interior designer. To make a modern web page you will need both.
Start here.
If you need any help feel free to post here.
Regards
Arkinder

Hi sir, Thank you for the link...Okay i will try to study this sir...thank you for this...more power to you...

layouts for daniweb front page

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers