Help with Navbar and a div box placing

DeadlyByDesign · 21-07-2010 12:11pm #1

Hi All,

Doing my first freebie site for a mate to help with my portfolio as I am just starting out and am still very green. He has asked me to him him a site for his personal training. It is going well at the moment and is driven with just css and html (just started with Javascript so not to hot on that yet.

My problem is as such;

The site is set up with a left Navbar and right Navbar. Both of them stretch to about a ¼ of the page. I want to put a second box on the right side of the page under the right Navbar just to display a “book your course now call xxx xxxxxxx” on a grey box. For the lif of me I can figure ot how to place such a div/box with out running into the existing right navbar. Any help is a appreciated.

Liam Byrne · 21-07-2010 12:52pm

DeadlyByDesign wrote: »

Hi All,

Doing my first freebie site for a mate to help with my portfolio as I am just starting out and am still very green. He has asked me to him him a site for his personal training. It is going well at the moment and is driven with just css and html (just started with Javascript so not to hot on that yet.

My problem is as such;

The site is set up with a left Navbar and right Navbar. Both of them stretch to about a ¼ of the page. I want to put a second box on the right side of the page under the right Navbar just to display a “book your course now call xxx xxxxxxx” on a grey box. For the lif of me I can figure ot how to place such a div/box with out running into the existing right navbar. Any help is a appreciated.

You'll need to be clearer as to what "without running into the existing right navbar" means.

You can add the new code to whatever container is floating to the right, however you'll need to rejig what's there if you want to maintain the existing styles (for example, if you need to keep an existing border

e.g.

<div id="rightNavBar">
OLD CODE FOR NAVBAR HERE
</div>

<div id="rightNavBar">
<div id="oldNavBar">
OLD CODE FOR NAVBAR HERE
</div>
<div id="newBar">
ADDITIONAL CODE FOR NEW PART HERE
</div>
</div>

The issue with the above is that if, for example, #rightNavBar has a border, that border will now encompass the whole lot, and you would need to edit the CSS to "move" that border onto #oldNavBar

Hope the above makes sense.

DeadlyByDesign · 21-07-2010 1:01pm

Would it make more sense if I pm'd you the code? Presuming you have nothing else to do

daymobrew · 21-07-2010 1:43pm

DeadlyByDesign wrote: »

Would it make more sense if I pm'd you the code? Presuming you have nothing else to do

Could you put the code online and post a link so that others can look at it?

Webmonkey · 21-07-2010 1:50pm

I think we really need some more information on what you are trying to achieve.

It sounds very possible though. Can you post come code and a rough picture or something on what you want.

DeadlyByDesign · 21-07-2010 2:17pm

Basically as it stands I have the a header, footer, a left and right navbar. The righ navbar Is only stretching down a ¼ of the page as it stands. I want another separate box or container under the existing right navbar for widgets or phone numbers (haven’t made my mind up on that yet)

.................................

Here is the HTML

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="mycss.css" />

</head>

<body>

<div id="header">
<marquee>test</marquee>
<strong>BANNER/LOGO</strong>
</div>
<br/>
<br/>
<br/>
<br/>

<div id="columnRight">

<ul>
<li><a href="" id="current">Our service</a></li>
<li><a href="">Personal Training</a></li>
<li><a href="">Lifestyle Management</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Price</a></li>
<li><a href="">Special Offers</a></li>

</ul>
</div>

<div id="navigation">
<a href="evolution.htm">Home</a>
<br/>
<a href="aboutus.htm">About us</a>
<br/>
<a href="facilities.htm">Facilities</a>
<br/>
<a href="">Location</a>
<br/>
<a href="">Our Trainers</a>
<br/>
<a href="">Testimonies</a>
</div>

<div id="content">
<img src="gym.jpg" width="100" height="100" />
<h1>test header</h1>
<p>main content goes here</p
<h2>test header</h2>
<p> Test Test Test Test Test Test Test Test Test Test Test Test Test TestTest Test Test TestTest Test Test Test TestTest TestTest</p>
<img src="gym2.jpg" width="100" height="100" />

<h2> Test header 2</h2>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test TestTest Test Test TestTest Test Test Test Te</p>

</div>

<br/>
<br/>
<br/>
<br/>

<div id="footer">
<a href="">Contact us</a>
</div>

</body>

</html>

..............................

And the css

............................

a:link {color: #FFFFFF; text-decoration: underline; }
a:active {color: #FFFFFF; text-decoration: underline; }
a:visited {color: #FFFFFF; text-decoration: underline; }
a:hover {color: #FFFFFF; text-decoration: none; }

#header {
background: #666;
padding: 10px;
height: 10%;
text-align: center
}

#content {
height: 100%;
width:80%;
border-color:black;
border-style:solid;
border-width:1px;
float:center;
margin: 0 auto;
padding: 10px;
}

#navigation {
float: left;
width: 200px;
height: 40%;
color: #ffffff;
background-image:url('gradient6.png');
border: 1px solid #000;
padding: 5px;
}
a {
display: block;
text-decoration: none;
}

#columnRight {
float: right;
width: 200px;
height: 40%;
color: #ffffff;
background-image:url('gradient6.png');
background-repeat:repeat-x;
border: 1px solid #000;
padding: 5px;
}
a {
display: block;
text-decoration: none;
}

#footer {
clear: right;
background-image:url('gradient6.png');
padding: 5px;
}

Liam Byrne · 21-07-2010 4:32pm

The relevant code is here

<div id="columnRight">

<ul>
<li><a href="" id="current">Our service</a></li>
<li><a href="">Personal Training</a></li>
<li><a href="">Lifestyle Management</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Price</a></li>
<li><a href="">Special Offers</a></li> 

</ul>

<!-- ANY ADDITIONAL STUFF COULD GO HERE -->
</div>

The issue, like I said earlier, is that adding any content to this will mean that it's within the existing "columnRight" styles, which are:

#columnRight {
float: right;
width: 200px;
height: 40%;
color: #ffffff;
background-image:url('gradient6.png');
background-repeat:repeat-x;
border: 1px solid #000;
padding: 5px;
}

So the gradient (if big enough) will be behind the new content, and the border will continue around the new content.

If that suits, then work away with that; if not, then you'll need to add a new div around the existing UL (and reassign the background, border and padding to that) and then add a 2nd div for the new content, styling that appropriately.

Something like

#columnRight {
float: right;
width: 200px;
height: 40%;
color: #ffffff;
}

#columnRight #oldPart {
background-image:url('gradient6.png');
background-repeat:repeat-x;
border: 1px solid #000;
padding: 5px;
}


<div id="columnRight">
<div id="oldPart">
<ul>
<li><a href="" id="current">Our service</a></li>
<li><a href="">Personal Training</a></li>
<li><a href="">Lifestyle Management</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Price</a></li>
<li><a href="">Special Offers</a></li> 
</ul>
</div>
<div id="newPart">
<!-- ANY ADDITIONAL STUFF COULD GO HERE -->
</div>
</div>

Help with Navbar and a div box placing

Comments