navigation sidebar problem

R

Rudra Banerjee

Dear friends,
I am a html novice and use it only the second time to construct my web
page. I have a navigation bar on left and right part...in my 15"
monitor, it looks ok, but in smaller window(if i resize my screen) it
behaves differently.
the navigation(left) sticks to the side and comes over the content in
smaller screen size.
I dont know where is the problem...so I am pasting my full css and
sample html that reproduces the problem.

/**************CSS****************/
body {
<!--overflow: hidden;-->
font: 100% times, arial, helvetica, sans-serif;
color:#0066cc;
background: #069;
margin: 0;
}

..accessaid, h1 {
position: absolute;
height: 0;
overflow: hidden;
}

..accessaid2, h1 {
position: absolute;
height: 0;
overflow: hidden;
}
#header {
background: #069 url(images/banner2.png) no-repeat;
height: 60px;
<!--xpadding: 1px 1em 2em 1em;-->
padding: 0px 20px 1em 40px;
border-left: 214px solid #069;
}

#navigation {
position: absolute;
top: 60px;
left: 0%;
width: 214px;
color: #e4ecef;
font-size: 1.5em;
}

#navigation ul {
margin: 0 0 2em 0;
padding: 0;
list-style: none;
color:#e4ecef;
}

#navigation ul a {
color: white;
text-decoration: none;
display: block;
background: #17a;
padding: 0 0.5em;
margin: 0 1em 1px 1em;
color:#e4ecef;
box-shadow:0 10px 10px #000
}

#navigation a:visited {
color: #e4ecef;
}
#navigation a:hover {
background: #28b;
}
#rightnavigation {
position: absolute;
left:83%;
top: -80px;
width: 214px;
color: #000;
font-size: 1.25em;
}

#rightnavigation ul {
margin: 100% 0 1em 0;
padding: 0;
list-style: none;
color:#000;
}

#rightnavigation ul a {
color: white;
text-decoration: none;
display: block;
background: #17a;
padding: 0 0.5em;
margin: 0 1em 1px 1em;
color:#e4ecef;
box-shadow:0 10px 10px #000
}


#content {
background: #e4ecef
xpadding: 1px 1em 2em 1em;
padding: 10px 20px 1em 40px;
border-left: 214px solid #069;
border-right: 214px solid #069;
border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
width:62%;
float:right;
margin-right:17%;
margin-left:30%;
border:3px;
background:#E0E9F8;
}

h2 {
font-size: 2em;
color: #069;
text-shadow: #28a 0.1em 0.1em 0.2em
}

h3 {
font-size: 1.25em;
color: #036;
}

#content img {
width: 200;
height: 200px;
padding: 0px;
border: 0px solid #333;
float: right;
margin: 0 0 2em 2em;
}

#container {
position: relative;
width: 586px; /* width + border for IE 5.x */
w\idth: 100%; /* real width */
border: solid #036;
border-width: 0 3px;
margin: auto;
}


/*----FOOTER PANEL----*/
#footermainPan{height:10%; background:#069 0 0 repeat-x #D3F0F0;
color:#2F5958; font:13px/20px "Trebuchet MS", Arial, Helvetica,
sans-serif; position:relative; margin:0 auto; clear:both; padding:36px 0
0;}
#footerPan{width:898px; position:relative; margin:0 auto;}

#footerPan ul{width:568px; height:20px; position:relative; margin:0
auto;}
#footerPan li{float:left; }
#footerPan ul li a{padding:0 10px 0; color:#fff; background:#069;
text-decoration:none; font-size:13px;}
#footerPan ul li a:hover{text-decoration:underline;}

#footerPan p.copyright{width:250px; margin:10px 0 0 2px;
position:relative; left:40%;color:#fff;}



/**************HTML PART**************/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Rudra Banerjee</title>
<link href="style.css" rel="stylesheet" type="text/css" /><style
type="text/css" media="all">


</style>

</head>

<body>

<div id="container">

<div id="header">
<h1>Rudra Banerjee</h1>
</div>

<div id="navigation">
<ul>
<li><a href="">About Me<img src="images/here.png" width="19"
height="17" /></a></li><li><a href="work.html">My Work</a></li><li><a
href="passion.html">My Passion</a></li>
</ul>

</div>
<div id="rightnavigation">
<ul>
<li><a href="contact.html">Contact Me</a></li><li><a href="">Other Side
of Me</a></li>
</ul>
</div>
<div id="content">

<div class="shadow">
Hiiii
</div>
</div>
</div>
</div>

</div>
</body>
</html>
 
1

123Jim

Rudra said:
Dear friends,
I am a html novice and use it only the second time to construct my web
page. I have a navigation bar on left and right part...in my 15"
monitor, it looks ok, but in smaller window(if i resize my screen) it
behaves differently.
the navigation(left) sticks to the side and comes over the content in
smaller screen size.
I dont know where is the problem...so I am pasting my full css and
sample html that reproduces the problem.
Click to expand...

Probably your main problem is in using absolute positioning for some
elements when you really wanted them to be relative to each other.

I've modified your code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Rudra Banerjee</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="all">
body {
margin: 0;
background: #006699 none repeat scroll 0% 50%;
color: #0066cc;
}
..accessaid, h1 {
overflow: hidden;
position: absolute;
height: 0;
}
..accessaid2, h1 {
overflow: hidden;
position: absolute;
height: 0;
}
#header {
background-color: #006699;
height: 60px;
width: 100%;
}
#navigation {
font-size: 1.5em;
width: 214px;
position: relative;
color: #e4ecef;
float: left;
height: 500em;
}
#navigation ul {
margin: 0 0 2em;
padding: 0;
list-style-image: none;
color: #e4ecef;
list-style-type: none;
list-style-position: outside;
}
#navigation ul a {
margin: 0 1em 1px;
padding: 0 0.5em;
background: #1177aa none repeat scroll 0% 50%;
text-decoration: none;
display: block;
color: #e4ecef;
}
#navigation a:visited {
color: #e4ecef;
}
#navigation a:hover {
background: #2288bb none repeat scroll 0% 50%;
}
#rightnavigation {
position: relative;
color: #000000;
float: right;
width: 214px;
font-size: 1.25em;
}
#rightnavigation ul {
margin: 100% 0 1em;
padding: 0;
list-style-image: none;
color: #000000;
list-style-type: none;
list-style-position: outside;
}
#rightnavigation ul a {
margin: 0 1em 1px;
padding: 0 0.5em;
background: #1177aa none repeat scroll 0% 50%;
text-decoration: none;
display: block;
color: #e4ecef;
}
#content {
border: none;
padding: 10px 2px 1em 4px;
background: #e0e9f8 none repeat scroll 0% 50%;
position: relative;
float: left;
max-width: 55%;
width: 50%;
display: block;
}
h2 {
font-size: 2em;
color: #006699;
text-shadow: #2288aa 0.1em 0.1em 0.2em;
}
h3 {
font-size: 1.25em;
color: #003366;
}
#content img {
border: 0px solid #333333;
margin: 0 0 2em 2em;
padding: 0px;
height: 200px;
float: right;
}
#container {
border-style: solid;
border-color: #003366;
border-width: 0 3px;
margin: auto;
position: relative;
width: 100%;
}
#footermainPan {
margin: 0 auto;
padding: 36px 0 0;
height: 10%;
color: #2f5958;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 13px;
line-height: 20px;
font-size-adjust: none;
font-stretch: normal;
position: relative;
clear: both;
}
#footerPan {
margin: 0 auto;
width: 898px;
position: relative;
}
#footerPan ul {
margin: 0 auto;
width: 568px;
height: 20px;
position: relative;
}
#footerPan li {
float: left;
}
#footerPan ul li a {
padding: 0 10px;
background: #006699 none repeat scroll 0% 50%;
color: #ffffff;
text-decoration: none;
font-size: 13px;
}
#footerPan ul li a:hover {
text-decoration: underline;
}
#footerPan p.copyright {
margin: 10px 0 0 2px;
width: 250px;
position: relative;
left: 40%;
color: #ffffff;
}

</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Rudra Banerjee</h1>
</div>
<div id="navigation">
<ul>
<li><a href="">About Me<img src="images/here.png" alt="image here.png"
height="17" width="19" /></a></li>
<li><a href="work.html">My Work</a></li>
<li><a href="passion.html">My Passion</a></li>
</ul>
</div>
<div id="content">
<div class="shadow">Hiiii </div>
</div>
<div id="rightnavigation">
<ul>
<li><a href="contact.html">Contact Me</a></li>
<li><a href="">Other Side
of Me</a></li>
</ul>
</div>
</div>
</body>
</html>
 
1

123Jim

123Jim said:
Probably your main problem is in using absolute positioning for some
elements when you really wanted them to be relative to each other.

I've modified your code:
Click to expand...

oops I left in : height: 500em; in #navigation .. I thought I'd changed
that to px when I as playing around with the height of that element .. if it
too short then the #content div can slip below it in a small enough screen
width. You'll want to change it I'm sure.
 
D

dorayme

I am a html novice and use it only the second time to construct my web
page.
Click to expand...
...
Click to expand...

Absolute positioning is a tricky thing to handle if you are just
beginning. Consider marking up and styling without it till you
find your feet. Most web pages do not need it and are better for
its absence.
... I am pasting my full css and
sample html that reproduces the problem.
Click to expand...

You have two closing DIV tags that are loose. It is possible that
in future browsers such things might act to destroy the world.

Your <!-- overflow: hidden;--> and other similar instances in
your styles does not deactivate the style as you might be
thinking. In CSS, you comment out by other means.

Your 'font: 100% times, arial, helvetica, sans-serif;' is saying
"if it is not the serif font of Times, then use no other serif,
try the sans serif Arial, then Helvetica or any sans serif that
is available".

When classing or IDing, choose names that are more general rather
than tied to the specific style; "extranav" rather than "rightnav"

Consider, as an exercise, simplifying your markup and styling.
Instead of so many DIVS, how about classing or IDing the elements
that do the real work?

<http://dorayme.netweaver.com.au/rudra.html>

Using some of your markup and CSS.
 
J

Jonathan N. Little

rudra said:
Dorayme, is it possible for you to post the css you have used?
Click to expand...

You're using Firefox, just CTRL + U and look at the source, it is all there.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
I need help fixing my website 2
Help with my responsive home page 2
Interfering CSS 1
Index.php with bootstrap implementation and extern sites inclusion 0
Dropdown menu in a fixed navbar 2
Buttons lining up 1
Justify-content not working 1

Members online

No members online now.
Total: 52 (members: 1, guests: 51)
Robots: 481

Forum statistics

Threads
473,995
Messages
2,570,228
Members
46,818
Latest member
SapanaCarpetStudio

Latest Threads

Top