Member Avatar for mineko_panda

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 ^-^

<!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
  • 104 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by mineko_panda
Member Avatar for tefflox

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.

Member Avatar for mineko_panda

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; 
}
Member Avatar for tefflox

Start again with the file attached.

<!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>
Member Avatar for mineko_panda

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.

Member Avatar for tefflox

I get that too.

Member Avatar for mineko_panda

Any ideas why?

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

@.@

Member Avatar for tefflox

The going rate is that IE sucks.

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

Member Avatar for mineko_panda

the elements like h1 h2 etc

Member Avatar for mineko_panda

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

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.