Threaded Mode | Linear Mode

Joey · 03-24-2014, 10:11 AM

i have everything set up but the only thing is how do i set up a navigation box to the left of my paragraph heres my html and its html 5 that this is in.

<!DOCTYPE html>
<html lang=en>
<head>
<style>
h1 {
text-align: center;
font-family: Roman;
}

p {
text-align: center;
font-family: Cursive;
font-size: 20px;
width: 500px;
display: inline-block;
margin-left: 200px;
}

body {
text-align: center;
background-color: black;
color: white;
background-image: url(rampctronics3/images/Backgroung%20webpage.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}

nav {

width: 700px;
height: 30px;
display: inline-block;
list-style-type: none;
padding: 15px;
}

a:link {
text-decoration: none;
color: #FFFFFF;
padding-right: 25px;
}

a:visited {
text-decoration: none;
text-color: white;
}

a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}

</style>
</head>
<title>
RamPCtronics
</title>
<meta carset=utf-8 />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<header>
<a href="http://rampctronics.com"><img src="rampctronics3/Header for website 2.jpg" height="125" width="700"></a>
<nav>
<strong> <a href="index.html"> Home </a>
<a href="prices.html"> Prices </a>
<a href="contactus.html"> Contact Us </a>
<a href="http://facebook.com/pages/RamPCtronics/159972974040321"> Facebook </a></strong>
</nav>
</header>
<body>
<p>Thank you for taking your time to stop by at RamPCtonics! Here at RamPCtronics I repair any electronic that needs fixed! I can fix Apple's to Microsoft to PSP's and many more! Just about any electronic, I also work on household appliances that are in need of electronic repair. For example- electric stoves, microwaves or electric can openers. Please stop by or email me if you need anything fixed. Laptops and other computers are checked and fixed at $50 or lower depending on what the problem is. Feel free to browse around the website, it is still under construction and I apologize for the delay. Currently the Facebook link is working, so feel free to browse on over to my facebook page, which is one way to contact me. Again, I apologize for the delay, the TechyBlog will be up hopefully soon, what that is going to be is you can go on my blog page and I will post something every day on there of how to do something that involves electronics, also you will be able to ask questions if you need any help on anything. Thank you for stopping by and hopefully this site will have more content on it the next time you visit!</p>
<p>
---this needs to be the side nav box---
link
link
link
link
photo
photo
link
</p>

</body>
</html>
erase the
<p>
---this needs to be the side nav box---
link
link
link
link
photo
photo
link
</p>

and the paragraph will move back over to the right

Karthik Devaraj · 03-24-2014, 10:13 AM

Joey,

Try this code:

<!DOCTYPE html>
<html lang=en>
<meta carset=utf-8 />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>RamPCtronics</title>
<head>
<style type="text/css">
h1 {
text-align: center;
font-family: Roman;
}

p {
text-align: center;
font-family: Cursive;
font-size: 20px;
width: 500px;
display: inline-block;
}

body {
text-align: center;
background-color: black;
color: white;
background-image: url(rampctronics3/images/Backgroung%20we...);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
width:900px;
margin:0 auto;
}

nav {
height: 30px;
display: inline-block;
list-style-type: none;
padding: 15px;
float:left;
}

a:link {
text-decoration: none;
color: #FFFFFF;
padding-right: 25px;
}

a:visited {
text-decoration: none;
text-color: white;
}

a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}

</style>
</head>
<header>
<a href="http://rampctronics.com"><img src="rampctronics3/Header for website 2.jpg" height="125" width="700"></a>
</header>
<body>
<nav>
<strong> <a href="index.html"> Home </a>
<a href="prices.html"> Prices </a>
<a href="contactus.html"> Contact Us </a>
<a href="http://facebook.com/pages/RamPCtro... Facebook"></a></strong>
</nav>

<p>Thank you for taking your time to stop by at RamPCtonics! Here at RamPCtronics I repair any electronic that needs fixed! I can fix Apple's to Microsoft to PSP's and many more! Just about any electronic, I also work on household appliances that are in need of electronic repair. For example- electric stoves, microwaves or electric can openers. Please stop by or email me if you need anything fixed. Laptops and other computers are checked and fixed at $50 or lower depending on what the problem is. Feel free to browse around the website, it is still under construction and I apologize for the delay. Currently the Facebook link is working, so feel free to browse on over to my facebook page, which is one way to contact me. Again, I apologize for the delay, the TechyBlog will be up hopefully soon, what that is going to be is you can go on my blog page and I will post something every day on there of how to do something that involves electronics, also you will be able to ask questions if you need any help on anything. Thank you for stopping by and hopefully this site will have more content on it the next time you visit!</p>

</body>
</html>

Let me know your feedback with what exactly you want to achieve (with screenshots)

Web · 03-24-2014, 10:15 AM

video demo for navigation block

http://w3-video.com/Web_Technologies/HTM...av_tag.php