?
Solved

Your idea about this page layout design

Posted on 2016-07-17
11
Medium Priority
?
129 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 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

831 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