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.
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.
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...
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>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.
To Classme - Are you really a 15-year old kid? Can we exchange minds? For once? :D
I can hardly make a website.. Shame!
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.
I think CSS is best to make it.
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.
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...
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.