asked on

Your idea about this page layout design

Hello;

I have design this page layout according my information from internet( i want redesign a website old based on table with div) ,please send your idea.

-And why we need <div class="wrap"> for each part( header-main content-footer)?

-class="wrap" must be same for each part and why?

Thanks

<!-- header part -->
<header>
 <div class="wrap">
  <div class="headerdiv">
 </div>
   <div class="logo-ads">
   </div>
 <div class="navigation">
  </div> 
    </div><!-- end of header wrap -->
</header>

<!-- main content-->
<div class="main">
 <div class="wrap">
  <div class="sidebar">
   <div class="content">
   </div>
  </div>
</div>
</div>

<!-- footer -->
<footer>
<div class="wrap">
 <div class="footer content">
 </div>
</div>
</footer>

Open in new window

Rob

Unless you're actually showing tabular data you should use div. Please look at including the css bootstrap library to make it ready to layout your content: http://getbootstrap.com
I use it extensively as it not only helps with layout but is responsive across devices and cross browser compatible.
Fire away with the questions :)

MOSTAGHASSI

ASKER

Thanks,of course using bootstrap or similar needs that we know the basic designing ,because we need that customize the feature that are in these kind of software.
I have download the bootstrap,it is a small zip file but i have confused for installation.

-At this time i use DW cc 2015 .

Rob

You just need to include the basic css file in your header:


<link href="css/bootstrap.min.css"

Then use the classes from http://getbootstrap.com/css/

The template here is a good place to start: http://getbootstrap.com/getting-started/

MOSTAGHASSI

ASKER

Yes, but would you please send your idea about my page layout ,it is important that i know that in first layout with DIV i'm in right way,and why we need the "wrap" div for making the structure is it a must ?

Rob

Of course :) I'll send through an example soon

Rob

Here's what you need to use as a template: https://jsbin.com/nokuha/edit?html,output

html

<!DOCTYPE html>
<html>
  <head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
 <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>
  </body>
</html>

Open in new window

some custom css:

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

Open in new window

From one of the bootstrap examples Sticky footer with fixed navbar

ASKER CERTIFIED SOLUTION

Snarf0001

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Snarf0001

Agree completely with Rob, with one other comment:
I meant the wrapper div itself was unnecessary. If you were going to keep it, adding the class name is helpful to target as he said.
I generally don't like adding the extra div tag itself.

MOSTAGHASSI

ASKER

I thought that it is clear that when i use class like class="wrap" i use CSS also ,thanks, i got my answer.

Rob

MOSTAGHASSI - can't assume anything :) Best to provide as much information as possible.

Thanks for the points.