I'm trying to set up my web-site with a vertical navigation menu, which I have done but what I am having a problem with is how do I get the text part of my site to line up beside the navigation bar instead of on top of it?
tinabina22 0 Newbie Poster
Recommended Answers
Jump to PostIn my opinion, you should put your div with class="shadowblockmenu-v" to the top in body and set its css to float:left;. Then a value of margin-right and bottom will made it look good.
Moreover, if you wish the content will not go below the nav bar, then you have to …
Jump to Post<?php require ("menubar.html"); ?>
For this to work, menubar.html must be in the same folder as your Just Tell page. Is this so?
All 8 Replies
JorgeM 958 Problem Solver Team Colleague Featured Poster
You'll have to either provide a link to your site online, or post the relevant code that you are having a problem with.
In addition, I have an example of a Multi-level Navigation Menu that you can take a look at and are free to use and adapt it for your needs.
tinabina22 0 Newbie Poster
I'm hoping you will be able to view my site:
http://stweb.ccv.edu/CIS-2140-VO01-V12FA/tam12220/Project/Home.php
I want to align the navigation bar next to the text in the body of my site instead of below it.
lps 71 Posting Pro in Training
In my opinion, you should put your div with class="shadowblockmenu-v" to the top in body and set its css to float:left;. Then a value of margin-right and bottom will made it look good.
Moreover, if you wish the content will not go below the nav bar, then you have to wrap the content into another div.
JorgeM 958 Problem Solver Team Colleague Featured Poster
Your html page structure needs to be cleaned up. For example, you have various head and body tags.
Your HTML page structure should follow this minimum design..
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Content -->
</body>
</html>
I took a look at your html code and made some slight changes. For example, wrapped all of the content within one div so that you can easily center it on the page. Then placing the vertical menu and content side by side can be done numerous ways. One method as lps suggested is to use floats. In this example, take a look at how the floats where used.
Some advice... place your styles in an external style sheet. there is no reason in this case to have references to external and internal styles. Also, you have quite a bit of items in your code that are deprecated. Read up on the HTML5 standard and start to move away from deprecated elements and properties.
<!DOCTYPE html>
<html>
<head>
<title>Home.html</title>
<meta name="Description" content="Your description here..." />
<meta name="Keywords" content="Your keywords here..." />
<link rel="stylesheet" href="skyblue.css" type="text/css" />
<link rel="stylesheet" href="floatright.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="nounderlines.css" />
<style>
#wrapper {
width:1000px;
margin:25px auto;
}
#content {
float:left;
width:650px;
padding:25px;
}
.shadowblockmenu-v {
font: bold 14px Germand;
width: 190px; /* width of menu */
float:left;
}
.shadowblockmenu-v ul {
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}
.shadowblockmenu-v ul li {
margin:0;
padding:0;
}
.shadowblockmenu-v ul li a {
display:block;
text-transform: uppercase;
color: #494949;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca; /*right border between menu items*/
-moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.shadowblockmenu-v ul li a:hover, .shadowblockmenu-v ul li a.selected {
color: black;
-moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); /* Add 3 inset shadows to each menu item */
-webkit-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
}
</style>
</head>
<body>
<div id="wrapper">
<div class="shadowblockmenu-v">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="JustTell.html">Just Tell</a></li>
<li><a href="DCF.html">Vermont Department of Children and Families</a></li>
<li><a href="NationalSexOffender.html">National Sex Offender Web-Site</a></li>
<li><a href="PreventChildAbuse.html">Prevent Child Abuse</a></li>
<li><a href="AHealthyPlace.html">A healthy place for Adult Survivors of Sexual Abuse</a></li>
<li><a href="SexualAbuseSurvivorsGroups.html">Sexual Abuse Survivors Groups</a></li>
<li><a href="BandingTogether.html">Banding together, Adult Survivors of Sexual Abuse</a></li>
<li><a href="http://www.malesurvivor.org/index.htm">Male Survivors of Sexual Abuse</a></li>
<li><a href="Googlebooksearch.html">Google book search on Sexual Abuse</a></li>
<li><a href="Resources.html">Resources</a></li>
</ul>
</div>
<div id="content">
<p style="text-align:center"><font size="5">Surviving Sexual Abuse</font></p>
This web site is in support of the survival of being sexually abused, rather you be a child, teenager, man or woman. It is also a place to find information in helping someone you know who has been sexually abused and what the person may be going through, what to expect of someone who has been sexually abused and how you might be able to help them. Every person is different and will react differently to their abuse, they seem fine now but in 10, 20, 30 years from now become very affected by the trauma of the abuse. Something they go through now may trigger the memory of abuse from the past, you just never know all you can do to support a person is to be there for them, support them and get all the information you can to help them when they need it.
<br /><br />
Sexual abuse is a live long struggle, it doesn't end when (or if) the abuse stops, it goes on for the rest of their lives and will affect everything they do and think well into the future. People whom have been through this trauma suffer from Post-Traumatic-Stress-Disorder and live a horror of their memories every living day, some will suffer flash backs which can happen at any moment, other's may have nightmares where they re-live the horror, some people may turn to self-medication, drug and/or alcohol abuse, they may try to hurt themselves or commit suicide and some may suffer from all of the above. People feel guilty, dirty, ashamed, worthlessness the list goes on.
<br /><br />
So when you judge someone by their actions or words stop for just a moment to think that maybe you would do the same thing should you have walked in their shoes!
Please use this site to educate yourself about the effects of sexual abuse, support to help yourself through sexual abuse or a stepping stone in helping someone you may know suffering from the past, present or future effects of sexual abuse.
<br /><br /><br />
Surviving Sexual Abuse's home is in Vermont so you will find a few of the web-sites listed at Vermont but each site you find that is directed towards Vermont, should also have a similar site for each state if you do a google search you should be able to find one you near your location.
<br /><br /><br />
<p style="text-align:center"><font size="1">Under no circumstances does the owner of the web-site Surviving Sexual Abuse claim to be professional, but a survivor themselves just out to create an area where people can locate the information they may need to help themselves or someone else through the survivor process. Consider this a ladder to finding the knowledge you might need.</font></p>
<br />
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
tinabina22 0 Newbie Poster
WOW! That worked wonders, thank you so much. I have one more question, I tried putting the navigation bar code into a separate html named menubar.html so I wouldn't have to add the whole navigation code into each one of my pages. I added this code to the Just Tell page <?php require ("menubar.html"); ?> but for some reason it's not working, any suggestions?
JorgeM 958 Problem Solver Team Colleague Featured Poster
Sorry, I'm into asp.net, you'll need some help from another community member. There are plenty here with PHP experience. You could just start a new thread in that category for that specific question.
EvolutionFallen 107 Junior Poster
<?php require ("menubar.html"); ?>
For this to work, menubar.html must be in the same folder as your Just Tell page. Is this so?
tinabina22 0 Newbie Poster
Yes it is but since I first asked the question I have figured it out, thank you very much though.
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.