Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Reply
 
Thread Tools Search this Thread
  #1  
Old 21-11-2009
Member
 
Join Date: Jul 2009
Posts: 77
Question about layout and overall structure

Starting with CSS and I want to know what method is to pass this type of layout:
image 1

At this type:
image 2

How to just create 2 "block-container"?
image 3
Reply With Quote
  #2  
Old 21-11-2009
Member
 
Join Date: May 2008
Posts: 2,008
Re: Question about layout and overall structure

I have an example for the 1st structure:

style.css
HTML Code:
body {
 background: #DDEEAA;
 margin: 0;
 padding: 0;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 text-align:center;
}
 
#container {
 background-color: #FFFFFF;
 margin: 10px auto;
 border: 1px solid;
 width: 970px; 
}
 
#top {
 height: 100px; 
 width: auto;
 display: block;
 background: #FFFF00;
 border: 1px solid; 
 margin: 2px;
 padding: 0;
}
 
#navbar{
 height: 50px; 
 width: auto;
 display: block;
 background: #FFFF00;
 border: 1px solid; 
 margin: 2px;
 padding: 0;
}
 
#main {
 width:970px;
 height: auto;
 display:block;
}
 
#left{
 width:200px;
 height: auto;
 float:left;
 background: #FFFF00;
 border: 1px solid; 
}

#center{
 width:560px;
 height: auto;
 float:left;
 background: #FFFF00;
 border: 1px solid; 
}

#right{
 width:200px;
 height: auto;
 float:right;
 background: #FFFF00;
 border: 1px solid; 
}
 
#footer{
 height: 50px; 
 width: auto;
 bottom: 0;
 background: #FFFF00;
 border: 1px solid; 
 margin: 2px;
 padding: 0;
}
index.html
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
@import url("script/style.css" );
</style>
</head>
<body>
<div id="container">

  <div id="top">  
   test top
  </div>
  
  <div id="navbar">  
   test navbar
  </div>
 
  <div id="main">

  <div id="left">  
    test left
   </div>
   
   <div id="center">  
    test center
   </div>
  
   <div id="right">  
    test right
   </div>
  
  </div>

 <div id="footer">  
   test footer
  </div>

 </div>

</body>
</html>
You could easily modify the code to test if the second structure works.
Reply With Quote
  #3  
Old 21-11-2009
Member
 
Join Date: Jul 2009
Posts: 77
Re: Question about layout and overall structure

The hit of 2 containers seems the right solution. It's simple to set up. So to use your example you need to write a code like (imagining that 2 "containers" have the same CSS properties):

In the CSS:

HTML Code:
#container1 {
background-color: # C0C0C0; 
margin: auto; 
overflow: hidden; 
width: 975px; 
}
#container2 {
background-color: # C0C0C0; 
margin: auto; 
overflow: hidden; 
width: 975px; 
}
Then in the HTML:

Replace #container2 between #main and #footer
What is:

HTML Code:
<body> 
<div id="container1"> 
<div id="top"> </div> 
<div id="navbar"> </div> 
<div id="main"> 
<div id="left"> </div> 
<div id="center"> </div> 
<div id="right"> </div> 
</div> 
<div id="container2"> 
blablabla ... 
</div> <! - end # container2 -> 
<div id="footer"> 
</div> 
</div> <! - end # container1 -> 
</body>
Reply With Quote
  #4  
Old 21-11-2009
Member
 
Join Date: May 2008
Posts: 2,008
Re: Question about layout and overall structure

The same thing contained in HTML can also be written as:

HTML Code:
<body> 
<div id=" container1"> 
<div id="top"> </ div> 
<div id="navbar"> </ div> 
<div id="main"> 
<div id="left"> </ div> 
<div id="center"> </ div> 
<div id="right"> </ div> 
</ div> 
</ div> <! - end # container1-> 
<div id=" container2"> 
blablabla ... 
</ div> <! - end # container2-> 
<div id=" footer "> 
</ div> 
</ body>
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "Question about layout and overall structure"
Thread Thread Starter Forum Replies Last Post
after installing Windows 8.1 preview, keyboard Layout automatically switches to US-layout Ebadaah Operating Systems 3 31-07-2013 11:26 AM
Question about SanDisk sansa Clip Zip playlists question VARIJ Portable Devices 8 27-01-2012 01:14 PM
C++ table structure RyanInt Software Development 3 14-11-2009 07:50 PM
Keyboard layout changes aleangelico Vista Help 6 30-01-2009 01:04 AM
Photoshop layout trickson Windows Software 5 17-10-2008 06:06 PM


All times are GMT +5.5. The time now is 11:32 PM.