Solved

Your idea about this page layout design

Posted on 2016-07-17
11
107 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
  • 2
11 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 41716138
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
ID: 41716375
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 43

Expert Comment

by:Rob
ID: 41716381
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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

Author Comment

by:MOSTAGHASSI
ID: 41717004
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 43

Expert Comment

by:Rob
ID: 41717015
Of course :) I'll send through an example soon
0
 
LVL 43

Expert Comment

by:Rob
ID: 41717022
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 23

Accepted Solution

by:
Snarf0001 earned 250 total points
ID: 41717124
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 43

Assisted Solution

by:Rob
Rob earned 250 total points
ID: 41717137
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 23

Expert Comment

by:Snarf0001
ID: 41717180
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
ID: 41717266
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 43

Expert Comment

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

Thanks for the points.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
toggle content 12 39
boostsrap 1 32
What kind of script/language created this graph? 6 63
My tooltip is not displaying correct 11 15
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

732 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