6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

i fu ed up

by learnalot
5 replies
hello
i have searched this code over and over read numerious tutorials but cant figure out where i messed up this code. how do i get rid of the space between the header image (epic) and the nav bar yellow. here is my site Epic millions

here is my code

<!DOCTYPE html>
<html>
<head>

<link href="style2.css" rel="stylesheet" type="text/css">

<meta charset="UTF-8">
<title>Epic millions </title>

</head>
<body>
<div id="header"><div><div>
<img src="images/1.jpg" alt="example">
</div></div></div>

<div id="nav"><div><div>
<img src="images/2.jpg" alt="example">
</div></div></div>

<div id="header"><div><div>
<img src="images/1.jpg" alt="example">
</div></div></div>
<div id="nav"><div><div>
<img src="images/2.jpg" alt="example">
</div></div></div>
<div id="nav"><div><div>
<img src="images/2.jpg" alt="example">
</div></div></div>

<div id="nav">nav<div>nav bar<div>
<img src="images/2.jpg" alt="example">
</div></div></div>
<div id="middle"><div><div>

<div id="bottom">Footer</div>
</body>
</html>

and css

body{ margin:0px }
div#header{ min-width:800px; }
div#header > div{ float:left; width:100%; }
div#header > div > div{ border:#000 0px solid; padding: 0px; }
div#header > div > div > img{ width:100%; }

div#nav{ min-width:800px; }
div#nav > div{ float:left; width:100%; margin:0px }
div#nav > div > div{ border:#000 0px solid; padding: 0px; }
div#nav > div > div > img{ width:100%; }

div#middle{ min-width:800px; }
div#middle > div{ float:left; width:100%; }
div#middle > div > div{ border:#000 0px solid; padding: 1px; }
div#middle > div > div > img{ width:100%; }

div#bottom{ clear:left; background:#CCCCB2; height:300px; }
#dynamic coding
  • Profile picture of the author Janet Sawyer
    You have far too many < div's> and </div's > going on.

    HTML div tag

    Signature
    {{ DiscussionBoard.errors[8360664].message }}
    • Profile picture of the author Joel Young
      Yes, it's <div> chaos. I had a lengthier response posted at first, but deleted it because the more I looked, the more I had no idea what's supposed to be happening.
      {{ DiscussionBoard.errors[8360996].message }}
      • Profile picture of the author ninjawarrior
        <div> chaos. ROFL

        Originally Posted by Joel Young View Post

        Yes, it's <div> chaos. I had a lengthier response posted at first, but deleted it because the more I looked, the more I had no idea what's supposed to be happening.
        {{ DiscussionBoard.errors[8401427].message }}
  • Profile picture of the author Radium
    The code is very messy imo. It's hard to understand.

    I'd use a container <div> with min/max width instead of setting each individual <div> separately. Take a look at this simple example I wrote:

    HTML Code:
    <div id="container">

  <!-- Start header -->
  <div id="header">
    <h1>Header content</h1>
  </div>

  <!-- Start navigation -->
  <div id="nav">
    <ul>
    <li>Nav link 1</li>
    <li>Nav link 2</li>
    </ul>
  </div>

  <!-- Start content -->
  <div id="content">
    <p>Page content text here</p>
  </div>

  <!-- Start footer -->
  <div id="footer">
    <p>Copyright & stuff</p>
  </div>

</div>
    For the CSS, just define the ID's accordingly:

    Code:
    #container { width:100%; min-width: 800px; }

#header { width:100%; height: 120px; }
    And so on..

    You do not need to float anything left, unless you have a div that you want to float to the right side.
    Signature
    Web Design & Digital Marketing || I am not afraid of failure. I fail every day. My goal is simply to have more wins than failures. Failure is often one of the first parts of success.
    {{ DiscussionBoard.errors[8361042].message }}
  • Profile picture of the author otfromtot
    This is all I did and it looks a lot better on top. This is also with the screen maximized. When I resize the screen it changes again. You may want to cut the header image width to just the text and set a bg color so it doesn't have to resize
    Code:
    div#header > div > div {
border: #000 0px solid;
padding: 0px;
max-height: 81px;
}

    this one looks like a cleaner solution to me, but when you size for mobile it still has a small gap.
    Code:
    div#nav > div > div > img {
width: 100%;
margin: -5px 0;
}
    {{ DiscussionBoard.errors[8392965].message }}

Trending Topics