Forums

ravi_n

Hi to every body. I am very new to the html and css any one help me.i have a problem in html and the css.

krysak4ever

write it here ... http://www.codepen.io/

ravi_n

sorry yar what ever u said url it is in a problem for opening

Paulie_D

You'll have to tell us what the problem is.

Either show us a link to your page or, alternatively, as krysak4ever said, create it in CodePen

Meta_Ing

If codepen isn't working, you could also try http://jsfiddle.net.

ravi_n

hi to every body!!!!!!!!!!!!
I am developing a web application.the web application can be divided into three parts. The first part is regarding to head and the second part is regarding to the vertical tabs.Other part is regarding display information about the vertical tags. My problem is when i click on vertical tag. The information regarding to vertical tag display in new window could u please help me. I write the fallowing code (the code must be in html)

Html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>RaviProject</title>
		<link href="style.css" rel="stylesheet" type="text/css"/>
		<link rel="shotcut icon" href="images/images.jpg" />
	</head>
	<body>
		<div id="main">
			<div class="container">
				<div id="header">
 
					<ul id="menu">
						<li><a href="https://mail.google.com/mail/u/0/?shva=1#inbox">ravi</a></li&gt;
						<li><a href="https://www.google.co.in/search?q=google&hl=en&client=firefox-a&hs=iTv&rls=org.mozilla:en-US:official&channel=fflb&prmd=imvnsuz&source=lnms&tbm=isch&sa=X&ei=5Vb9T7GYDcLRrQeqq_HQBg&ved=0CFgQ_AUoAQ&biw=1920&bih=977">images</a></li&gt;
						<li><a href="https://maps.google.co.in/maps?q=google&hl=en&client=firefox-a&channel=fflb&ie=UTF-8">maps</a></li&gt;
						<li><a href="https://play.google.com/store?hl=en&tab=l8">play</a></li&gt;
						<li><a href="http://www.youtube.com/?tab=81">youtube</a></li&gt;
						<li><a href="http://news.google.com/nwshp?hl=en&tab=8n">news</a></li&gt;
					</ul>
				</div>				
			</div>
		</div>
		<div id="box">
			<ul id="menu1">
				<li><a href="inbox">inbox</a></li>
				<li><a href="shared">shared</a></li>
				<li><a href="importent">importent</a></li>
				<li><a href="sentmails">sentmails</a></li>
				<li><a href="drafts">drafts</a></li>				
			</ul>
			<ul id="boxes">
				<li id="inbox" class="box">
 					<a href="https://mail.google.com/mail/u/0/?shva=1#inbox">inbox</a&gt;
 
 				</li>
 				<li id="shared" class="box">
 					<a href="https://mail.google.com/mail/u/0/?shva=1#starred">shared</a&gt;
 
 				</li>
 				<li id="importent" class="box">
 
 					<a href="https://mail.google.com/mail/u/0/?shva=1#imp">importent</a&gt;
 
 				</li>
 				<li id="sentmails" class="box">
 
 					<a href="https://mail.google.com/mail/u/0/?shva=1#sent">sentmails</a&gt;
 
 				</li>
 				<li id="drafts" class="box">
 
 					<a href="https://mail.google.com/mail/u/0/?shva=1#drafts">drafts</a&gt;
 
 				</li>
 		</ul> 
		</div>

Css

/*back ground styles*/
BODY
{
margin: 0px;
padding: 0px;
background-color: #BBAEAE;
font-family: Arial, Helvetica, sans-serif;
color: #4F4938;
}
#main
{
background: #FDFCFC url(images/background.jpg) repeat-x;
}
#main .container
{
background-image: url(images/background.jpg.jpg);
background-repeat: no-repeat;
min-height: 50px;
}
/*
Header-Styles
*/
#header
{
padding-top: 0px;
padding-bottom: 0px;
}
UL#menu
{
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
}
UL#menu LI
{
display: inline;
margin-right: 12px;
}
UL#menu LI A
{
text-decoration: none;
color: #716D6A;
font-family: "Trebuchet MS";
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
width: 80px;
float: left;
margin: 10px;
text-align: center;
background-color: #E8EAEC;
}
UL#menu LI A:hover
{
background-color: #758FAF;
}
UL#menu LI A.active, UL#menu LI A:hover
{
color: #000000;
}
#box
{
padding-top: 0px;
padding-bottom: 0px;
}
UL#menu1
{
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
}
UL#menu1 LI
{
display: inherit;
margin: 12px;
}
UL#menu1 LI A
{
text-decoration: none;
color: #716D6A;
font-family: cursive;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
width: 100px;
float: left;
margin: 10px 0px;
text-align: left;
background-color: #B0948A;
}
UL#menu1 LI A:hover
{
background-color: inherit;
}
UL#menu1 LI A.active, UL#menu1 LI A:hover
{
color: #000000;
}

could u please help me

ravi_n

That means here the vertical tag information must display in third part of the web application.(The code must in html)

Meta_Ing

Are you saying that the "vertical tags" are opening in new windows/tabs and that you don't want them to? If not, could you please explain a bit more what the issue is and/or you're trying to do?

Side note: you should wrap blocks of code in <pre><code> ... </code></pre> tags, otherwise the html will be parsed like it was above.

Example:

<body>
	<h1>Something</h1>
	<h2>Blah</h2>
	<p>This is an example. Notice how the HTML doesn't get parsed in this box.</p>
</body>

ravi_n

ya what i am saying that the vertical tabs are opening in a new window i want to open in the third part of the web application

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>RaviProject</title>
		<link href="style.css" rel="stylesheet" type="text/css"/>
		<link rel="shotcut icon" href="images/images.jpg" />
	</head>
	<body>
		<div id="main">
			<div class="container">
				<div id="header">
 
					<ul id="menu">
						<li><a href="https://mail.google.com/mail/u/0/?shva=1#inbox">ravi</a></li&gt;
						<li><a href="https://www.google.co.in/search?q=google&hl=en&client=firefox-a&hs=iTv&rls=org.mozilla:en-US:official&channel=fflb&prmd=imvnsuz&source=lnms&tbm=isch&sa=X&ei=5Vb9T7GYDcLRrQeqq_HQBg&ved=0CFgQ_AUoAQ&biw=1920&bih=977">images</a></li&gt;
						<li><a href="https://maps.google.co.in/maps?q=google&hl=en&client=firefox-a&channel=fflb&ie=UTF-8">maps</a></li&gt;
						<li><a href="https://play.google.com/store?hl=en&tab=l8">play</a></li&gt;
						<li><a href="http://www.youtube.com/?tab=81">youtube</a></li&gt;
						<li><a href="http://news.google.com/nwshp?hl=en&tab=8n">news</a></li&gt;
					</ul>
				</div>				
			</div>
		</div>
		<div id="box">
			<ul id="menu1">
				<li><a href="inbox">inbox</a></li>
				<li><a href="shared">shared</a></li>
				<li><a href="importent">importent</a></li>
				<li><a href="sentmails">sentmails</a></li>
				<li><a href="drafts">drafts</a></li>				
			</ul>
			<ul id="boxes">
				<li id="inbox" class="box">
 					<a href="https://mail.google.com/mail/u/0/?shva=1#inbox">inbox</a&gt;
 
 				</li>
 				<li id="shared" class="box">
 					<a href="https://mail.google.com/mail/u/0/?shva=1#starred">shared</a&gt;
 
 				</li>
 				<li id="importent" class="box">
 
 					<a href="https://mail.google.com/mail/u/0/?shva=1#imp">importent</a&gt;
 
 				</li>
 				<li id="sentmails" class="box">
 
 					<a href="https://mail.google.com/mail/u/0/?shva=1#sent">sentmails</a&gt;
 
 				</li>
 				<li id="drafts" class="box">
 
 					<a href="https://mail.google.com/mail/u/0/?shva=1#drafts">drafts</a&gt;
 
 				</li>
 		</ul> 
 
		</div>

Meta_Ing

If you are using iframes, you can specify the target attribute in the (opening) <a> tags and set the value to the id* of the iframe. For example, the following link: <a href="/somepage.html/" target="blah">Some Page</a> would open "somepage.html" in an iframe with an id of "blah", such as <iframe src="about:blank" id="blah"></iframe>

*Or name, but id is recommended.

ravi_n

Thank u very much

namechange

iframes are great but you will not rank high with them on a webpage

ravi_n

what is the solution could u please explain...................

death180

English would be a good start, it's impossible to understand what you are saying.

treehouse : what would you like to learn today?

Forums

web developing

Html

Css