Solved

Your idea about this page layout design

Posted on 2016-07-17
11
85 Views
Last Modified: 2016-07-18
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

0
Comment
Question by:MOSTAGHASSI
  • 6
  • 3
  • 2
11 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
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 :)
0
 

Author Comment

by:MOSTAGHASSI
Comment Utility
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 .
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
You just need to include the basic css file in your header:

<!-- Bootstrap -->
    <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/
0
 

Author Comment

by:MOSTAGHASSI
Comment Utility
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 ?
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
Of course :) I'll send through an example soon
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
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
1
 
LVL 22

Accepted Solution

by:
Snarf0001 earned 250 total points
Comment Utility
To throw in on the "wrapper" question:
In case you're not using bootstrap.  It's obviously a gigantic community with a lot of success, and has it's good points, I personally don't ever use it and don't care for it.

If you're not using their style of markup, and using something similar to what you gave above, the "wrapper" classes are absolutely not necessary.
A lot of the time they end up getting thrown in to make future styling requirements "easier", like if a lot of elements are supposed to be centered and equal width.

But in the end, it's just extraneous markup, and can in most cases be styled effectively without them.
0
 
LVL 42

Assisted Solution

by:Rob Jurd, EE MVE
Rob Jurd, EE MVE earned 250 total points
Comment Utility
It's always a consideration you should make on whether you should include a framework or not.  I always use bootstrap so my page will look the same across all the major browsers and will resize on the fly for mobile and tablet devices.  Personal choice but I wouldn't want to code that by hand and keep it constantly up to date.

CSS classes are predominantly used to identify (and to an extent describe) one or more sets of elements on your page for use with styling or javascript.  The wrap class gives you the ability to target those elements such that you may want a certain amount of padding or border always around anything with a wrap class.

So if all you've got is the html you've posted above and no other css to go along with it, then as Snarf0001 has said, they're just not necessary.

In other words, your code could look like the following but it would make it harder to style as there's nothing to target:
<!-- header part -->
<header>
 <div>
  <div>
 </div>
   <div>
   </div>
 <div>
  </div> 
    </div><!-- end of header wrap -->
</header>

<!-- main content-->
<div>
 <div>
  <div>
   <div>
   </div>
  </div>
</div>
</div>

<!-- footer -->
<footer>
<div>
 <div>
 </div>
</div>
</footer>

Open in new window

0
 
LVL 22

Expert Comment

by:Snarf0001
Comment Utility
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.
0
 

Author Comment

by:MOSTAGHASSI
Comment Utility
I thought that it is clear that when i use class like class="wrap" i use CSS also ,thanks, i got my answer.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
MOSTAGHASSI - can't assume anything :)  Best to provide as much information as possible.

Thanks for the points.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
HTML button disabled 11 36
Safari SVG Image Problem 1 19
responsive divs setup - what am I doing wrong 2 30
CSS Divs in Safari 3 18
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now