Web Design Forum  
 
Go Back   Web Design Forum > Web and Graphic Design > Web Design

Reply
 
LinkBack Thread Tools Display Modes
Old 08-25-2008, 08:42 PM   #1 (permalink)
New Member
 
Join Date: Aug 2008
Posts: 1
Default Help with fixed width DIV layout

Hi all I'm new here...

I need help with some general DIV issues. I'm using Drupal, and I'm tweaking the theme to get a fixed width DIV layout, but the header and wrapper tags are not aligned at small resolutions! Any ideas?

Thanks in advance!

http://klucid.com

HTML Code:
/*
**    Copyright 2008  Klucid

/*
** HTML elements
*/

body {
  cursor: crosshair;
  font: 12px Arial;
  color: #333;
  margin:0 auto;
  background-color: #959595;
 }
tr.odd td, tr.even td {
  padding: 0.3em;
}
h1, h2, h3, h4 {
  color: #cccccc; 
  font-size: 28px;
  font-family: verdana,Tahoma,sans-serif;
  margin-bottom:20px;
  font-weight:normal;
  letter-spacing: -1pt;
}
h1 {
  font-size: 200%; 
}
h2 {
  font-size: 150%;
}
h3, h3 a {
  font-size: 150%;
  line-height:1.2;
  color: #3B4A25;
  letter-spacing: 0px;
  text-decoration: none;
}
h4 {
  font-size: 120%;
  line-height:1.25; 
  font-weight:bold;
}
h5 {
  font-size: 1em;
  font-weight:bold;
}
h6 {
  font-size: 1em;
}
p {
  margin: 10px 0 15px;
}
a {
  text-decoration: none;
  color: #576780;
}
a:hover {
  text-decoration: none;
}
blockquote {
	text-transform:uppercase;
	font-size: 8pt;
	line-height: 14pt;
	text-align:justify;
	width: 300px;
  margin: 1.5em 1.5em 1.5em 1.5em;
  color: #ababab;
  border: 1px #b0b0b0;
  background-color: #ffffff;
  padding: 0 10px 0 50px;
}
hr {
  background: #B2CCFF; 
  color: #B2CCFF;
  clear: both; 
  float: none; 
  width: 100%; 
  height: 0.1em;
  margin: 0 0 1.4em 0;
  border: none; 
}
* html hr { margin: 0 0 1.2em 0; } /* IE6 fix */
pre {
  margin-bottom: 1.3em;
  background: #eee;
  border:0.1em solid #ddd;
  padding:1.5em;
}
input {
  border: 1px solid #cccccc;
}
ul {
  list-style-type: none;
}

li a.active{
  color: #000;
}
ol {
  margin-left: 35px;
}
/*
** Page layout blocks / IDs
*/

#header {
  width: 800px;
  margin: 0 auto; 
  padding: 0 112px;
  height: 169px;
  border-bottom: 0px;
  background-image: url('images/header.gif');
  background-repeat: no-repeat;
  background-position:top center;
  background-attachment:scroll;

}

#wrapper {
 width:800px;
 margin:0 auto;
 background-image: url('images/bg.gif');
 background-repeat: repeat-y;
 background-position: top center;
 background-attachment:fixed;
 padding: 0 112px;
}

.content{
	margin-bottom: 50px;
	border-bottom: 1px #cccccc dotted;
	padding-left: 20px;
	}

#main p {
	color: #ababab;
	line-height: 18pt;
}

#main {
 text-align: justify;
 width: 480px;
 margin: -30px;
 float:left;	
 border: 0px solid #e7f9fb;
 padding: 8px;
 background:transparent;
 padding-top: -40px;
}
#sidebar-left, #sidebar-right {
 vertical-align: top;
  z-index:2;
}
	
.block h2 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 2pt;
  background:#ffffff url('') repeat-x;
  margin: 0;
  font-size: 8pt;
  padding: 0px 0 20px 20px;
  color: #cccccc;
  border: 1px dotted #cccccc;
  border-width: 0px 0px;
}
#sidebar-left {
 width: 0px;
 float:left;
 position:relative;	
}
#sidebar-right {
 background-color: transparent;	
 text-align: justify;
 margin-top: 45px;
 width: 225px;
 float:right;
 margin-left: -100px;
 position:relative;
 z-index:2;
 color: #b0b0b0;
 border-width: 1px;
 padding-right:20px;
}

#h2 {
 height:185px;
 margin:0 auto;
}
#header img {
  float:left;
  margin-top:0px;
}
#header h1{
 
}

.site-name {
	display:none !important;
	visibility:hidden;
	}
	
.site-name a {
  color: #26647b;
  font-family: Helvetica,Arial,"Lucida Grande",Verdana,sans-serif;
  text-decoration: none !important;
  margin-top:9px;
  display:none;
  float:left;
  font-size:70px;
  font-weight:lighter;
  position:relative;
  left:-4px;
}
.site-slogan {
  color: #333;
  width:100%;
  display:block;
  font-weight:bold;
}
.search-box {
  float:right;
  margin:10px 20px 0 0;
}
.search-box .form-text {
 background: url('images/search.png');
 font-size: 1em;
 color: #000;
 padding: 2px;
}
.form-text {
  display:block;
}
#primary{
position: relative;
top: 20px;
  margin-top: 0;
  margin-left: 15px;
  display:block;
  height:20x;
  background-color: transparent;
  width:100%
  z-index: 5;

}

#header-region {
}

#primary a {
  cursor: crosshair;
  white-space: nowrap;
  font-family: Arial Narrow,Helvetica,sans-serif;
  color: #ffffff;
  display: block;
  float: left;
  height: 20px;
  line-height: 23px;
  text-transform: uppercase;
  background: transparent 100% 0;
  text-decoration:none;
}
#primary a span{
  cursor: crosshair;
  padding: 0px 15px;
  display: block;
  height: 53px;
  float:left;
}
#primary a:hover, #primary a:active {
  cursor: crosshair;
  text-decoration:none;
  color: #ababab;
}
#primary a.active {
background: url('images/active-menu-r') no-repeat right top;
color: #ababab;
}
#primary .active span {
background: url('images/active-menu-l') no-repeat left top transparent	;
}
#primary ul{
  margin: auto;
  width: 720px;
}
#primary ul.links li {
  padding:0;
}

.breadcrumb a{
 display: none;
 	}

#mission {
  border:1px solid #cee0e4;
  padding:5px;
}
.messages {
 background-color: #eee;
 border: 1px solid #ccc;
 padding: 0.3em;
 margin-bottom: 1em;
}
.error {
 border-color: red;
}
#footer {
  text-align: center;
  font-size: 0.9em;
  width:800px;
  margin:auto;
}

.title h2, .title a {
  width: 400px;
  color: #ababab; 
  font-size: 24px;
  font-family: arial;
  margin-bottom:10px;
  font-weight:light;
  letter-spacing: -1pt;
  margin-left: 20px;
  padding: 2px 50px 2px 0px;

}
h1.title {
  width: 400px;
  color: #ababab; 
  font-size: 24px;
  font-family: arial;
  margin-bottom:10px;
  font-weight:light;
  letter-spacing: -1pt;
  margin-left: 20px;
  padding: 2px 50px 2px 0px;

}
.block, .box {
 padding: 0 0 1.5em 0;
}
#sidebar-left .block{}
.block {
  display:block;
  border: 0px solid #e7f9fb;
  background: transparent;
  padding:8px;
}
.taxonomy, .submitted, .links-node {
  font-size: 11px;
}
.taxonomy li, .links-node li {
  border-right: 1px solid #CCC;
}
.taxonomy li.last {
  border:0;
}
ul.links li {
padding:0 0.5em 0 0;
}
.taxonomy ul.links li {
padding:0 0 0 0.5em;
}
.node .picture {
 border: 0px solid #ddd;
 float: right;
 margin: 0.5em;
}
.comment {
}
.comment .title a {
}
.comment .picture {
 border: 0px solid #abc;
 float: right;
 margin: 0.5em;
}
/*
** Module specific styles
*/
.feed-icon img {
  margin:0;
	padding: 25px;
}
#aggregator .feed-source {
 background-color: #eee;
 border: 1px solid #ccc;
 padding: 1em;
 margin: 1em 0;
}
#aggregator .news-item .categories, #aggregator .source, #aggregator .age {
 color: #999;
 font-style: italic;
 font-size: 0.9em;
}
#aggregator .title {
 margin-bottom: 0.5em;
 font-size: 1em;
}
#aggregator h3 {
 margin-top: 1em;
}
#forum table {
 width: 100%;
}
#forum td {
 padding: 0.5em;
}
#forum td.forum a{
text-decoration:none;
}
#forum td.forum, #forum td.posts {
 background-color: #e7f9fb;
}
#forum td.topics, #forum td.last-reply {
 background-color: #e7f9fb;
}
#forum td.container {
 background-color: #cee1e7;
}
#forum td.container a {
 color: #555;
 text-decoration:none;
}
#forum td.statistics, #forum td.settings, #forum td.pager {
 height: 1.5em;
 border: 1px solid #bbb;
}
#forum td .name {
 color: #96c;
}
#forum td .links {
 padding-top: 0.7em;
 font-size: 0.9em;
}
#profile .profile {
 clear: both;
 border: 1px solid #abc;
 padding: .5em;
 margin: 1em 0em;
}
#profile .profile .name {
 padding-bottom: 0.5em;
}
.block-forum h3 {
 margin-bottom: .5em;
}
div.admin-panel .description {
 color: #999;
}
div.admin-panel .body {
 background: #f4f4f4;
}
div.admin-panel h3 {
 background-color: #69c;
 color: #fff;
 padding: 5px 8px 5px;
 margin: 0;
}
.node img{
  border:0px solid #CCC;
  margin:5px;
  padding-bottom: 30px;
  padding-top: -25px;
}
.poll .bar {
 background:#E7E7E7;
 border:#9C9C9C 1px solid;
}
.poll .bar .foreground{
 background:#CECDCE;
 border-right:#9C9C9C 1px solid;
}
.block-image IMG{
 border:1px solid #CECECE; padding:3px;
}
.block-user ul li{
 list-style-type:none;
 list-style-image:none;
}
#block-user-0 ul {
  padding: 3px 2em 3px 0;
}
#block-user-1 {
  line-height: 25px;
  font-size:14px;
}
span.clear {
  display: block;
  clear: both;
  height: 1px;
  line-height: 0px;
  font-size: 0px;
  margin-bottom: -1px;
}

.more-link {
padding-top: 20px;
}

.book-block-menu {
	padding-bottom: 20px;
	}
klucid is offline   Reply With Quote
Old 08-28-2008, 12:17 AM   #2 (permalink)
Silver Member
 
adamblan's Avatar
 
Join Date: Aug 2008
Location: Lake Tahoe
Posts: 195
Default

Create a 800px div that encapsulates all content on your page, margin:auto
Your header & content wrapper can then be displayed as block, or set the width to 100%.
__________________
<ablank.us>
adamblan is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


All times are GMT. The time now is 03:43 AM.


Computer Forum - TechZine - Webpage Design

 
Powered by vBulletin® Version 3.7.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.2.0 ©2008, Crawlability, Inc.