0

Hi Everyone

Umm...first time posting here. I'm barely learning about CSS and all that jazz and I'm confused as to what I did wrong.

The professor doesn't really help us out and the book and lectures just confuse me.

I put up the layout here: http://michie.suteki.nu

My Navigation bar goes all the way down each time text is added to the content part.
I'm not sure why either...

Could someone possibly assist me?

I will attach the .css and .html as text files.

Any and all help will be greatly appreciated ^-^

Attachments
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Nocturnal Sonata</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="container">

<div id="header1"></div>
<div id="header2"></div>
<div id="header3"></div>
<div id="header4"></div>
<div></div>

<div id="content">
<h1> Layout </h1>

<font size= 14> text goes here :3 yay~ </font><br> 

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <br>

<!-- END CONTENT -->
</div>

<div id="nav">
 <h2>About Me</h2>
<img src=".gif"></a>
<p>
text here
name
age
birthday
sign
sign 2
etc</P>

<h2>Affiliates</h2>
<p>
<a href="http://suteki.nu">Theo</a><br>
<a href="#">Name</a><br>
</p>

<h2>Links</h2>
<p>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a><br>
</p>

<h2>Site Design</h2>
<p>
Layout: <a href="mailto:dolce_amaryllis@yahoo.com">Mineko_Panda</a><br>
text here about the layout stuffu
dont steal
i keeeel chuuuu
umm...i worked hard
yeah...
yay</p>
<!-- END SIDE NAV -->
</div>

<div id="footer"></div>

</div>
</body>
</html>
body {
background-color: #000000;
color: #FFFFFF;
font-family: Georgia, Palatino Linotype, Times New Roman, serif;
font-size: 11px;
cursor: url(http://www.123cursors.com/freecursors/126.ani);
padding: 0px;
margin: 0px; }

a {
color: #C0C0C0;
font-weight: bold;
text-decoration: none; }

a:hover {
color: #E5B4B7;
font-weight: bold;
text-decoration: underline; }

#container {
margin: 0px auto;
width: 600px;
background: url('images/bg.jpg') repeat-y; }

#header1 {
background: url('images/01.jpg') no-repeat;
width: 600px;
height: 176px; }

#header2 {
background: url('images/02.jpg') no-repeat;
width: 600px;
height: 207px; }

#header3 {
background: url('images/03.jpg') no-repeat;
width: 600px;
height: 145px; }

#header4 {
background: url('images/04.jpg') no-repeat;
width: 600px;
height: 131px; }

#content {
	background-color: #575757;
	float: right;
	margin: -400 26px 0 158px;
	padding: 4px 5px 4px 5px;
	width: 407px;
}

#nav {
	float: none;
	padding: 4px 5px 4px 5px;
	margin: -65px 453px 10px 25px;
}

#footer {
background: url('images/footer.jpg') no-repeat;
width: 600px;
height: 195px; }

h1 {
font-size: 13px;
color: #FFFFFF;
border-bottom: 1px dotted #C0C0C0; }
2
Contributors
10
Replies
11
Views
8 Years
Discussion Span
Last Post by mineko_panda
0

I looked at the styling, and couldn't find an error without the images. The screenshot shows the nav bar in the correct position according to the live example. You might try getting rid of the "-400" in the margin attribute for something, maybe "position: relative". I've never seen a negative setting for margin.

0

So after more browsing I edited stuff in the content/nav css...i think i just made it worse

T-T

This is what I added

#nav {
float: none;
width: 110px;
padding-left: 10px;
margin-top: -20px;
}

#content {
float: right;
width: 400px;
padding-right: 10px; 
}
0

Start again with the file attached.

Attachments
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
    <title>Nocturnal Sonata</title>
    <link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">

  body {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Georgia, Palatino Linotype, Times New Roman, serif;
  font-size: 11px;
  padding: 0px;
  margin: 0px; }

  a {
  color: #C0C0C0;
  font-weight: bold;
  text-decoration: none; }

  a:hover {
  color: #E5B4B7;
  font-weight: bold;
  text-decoration: underline; }

  #container {
  margin: 0px auto;
  width: 600px;}


  #content {
	  background-color: #575757;
	  float: right;
	  width: 70%;
	  padding: 1.5em;  }

  #nav {
    width: 28%;
	  padding: 0.5em;  }

  #footer {
    clear: both;
    padding: 2em 1em; }

  h1 {
  font-size: 13px;
  color: #FFFFFF;
  border-bottom: 1px dotted #C0C0C0; }
</style>    
  </head>
  <body>
    <div id="container">
      <div id="header"> <!-- set div dimensions and make sure img fits w/in div -->
      <div id="content">
        <h1> Layout </h1>
        <font size= 14> text goes here :3 yay~ </font>
        <br> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
        <br>
      </div>
      <div id="nav">
        <h2>About Me</h2>
        <p>text here name age birthday sign sign 2 etc</P>
        <h2>Affiliates</h2>
        <p>
          <a href="http://suteki.nu">Theo</a>
          <br>
          <a href="#">Name</a>
          <br>
        </p>
        <h2>Links</h2>
        <p>
          <a href="#">Link Here</a>
          <br>
          <a href="#">Link Here</a>
          <br>
        </p>
        <h2>Site Design</h2>
        <p>
          Layout: <a href="mailto:dolce_amaryllis@yahoo.com">Mineko_Panda</a>
          <br>
          text here about the layout stuffu dont steal i keeeel chuuuu umm...i worked hard yeah... yay
        </p>
      </div>
      <div id="footer"> footer text </div>
    </div>
  </body>
</html>
0

I actually just finished fixing the layout. After starting from scratch I figured out the problem.

Now the only issue I'm having is the headings being really large and slightly too high on IE7.

0

Any ideas why?

Another little thing that irritates me is...
The large spacing between the headings...

@.@

0

The going rate is that IE sucks.

Headings.. do you mean heading-divs, or header elements?

0

Well Ive pretty much figured most of my problems out so...I guess its solved.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.