...

View Full Version : Problems at changing the size of the header



MariaCdH
01-23-2012, 04:32 PM
Hello, I have downloaded a web template to create a new website, I am working on the template with dreamweaver and when I try to change the size of the header, the elements of the whole page get out of place, could anyone tell why is this happening? I detail bellow the default css of the page, streamly grateful if someone can give me a hand with this.


html, body {
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}

body {
margin: 0px;
padding: 0px;
background: #53565E url(images/bg01.jpg) repeat left top;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #5B5E67;
}

h1, h2, h3 {
margin-top: 0px;
}

p, ol, ul {
margin-top: 0px;
}

p {
line-height: 190%;
font-family: Arial, Helvetica, sans-serif;
}

strong {
color: #42454D;
text-transform: uppercase;
}

a {
color: #CE1D24;
}

a:hover {
text-decoration: none;
}

a img {
border: none;
}

img.border {
}

img.alignleft {
float: left;
padding-right: 25px;
}

img.alignright {
float: right;
}

img.aligncenter {
margin: 0px auto;
}

hr {
display: none;
}

/** WRAPPER */

#wrapper {
overflow: hidden;
background: url(images/bg02.jpg) repeat-x left top;
}

.container {
width: 980px;
margin: 0px auto;
}

.clearfix {
clear: both;
}

/** HEADER */

#header {
width: 900px;
height: 180px;
margin: 0px auto;
padding: 0px 50px;
background: url(images/bg03.jpg) no-repeat left top;
}

/** LOGO */

#logo {
float: left;
width: 430px;
height: 180px;
}

#logo h1, #logo p {
margin: 0px;
line-height: normal;
text-indent: -9999em;
}

#logo h1 a {
display: block;
top: 0px;
left: 0px;
width: 430px;
height: 180px;
background: url(images/homepage01.jpg) no-repeat left top;
color: #111355;
}

/** MENU */

#menu {
float: right;
width: 470px;
height: 40px;
margin: 0px;
padding: 140px 0px 0px 0px;
}

#menu ul {
margin: 0px;
padding: 0px 30px 0px 14px;
list-style: none;
line-height: normal;
text-align: center;
}

#menu li {
display: inline;
float: left;
padding: 0px 20px 0px 20px;
background: url(images/homepage02.jpg) no-repeat left 0px;
}

#menu a {
margin: 0px;
letter-spacing: -1px;
text-decoration: none;
text-transform: lowercase;
font-family: Tahoma, Geneva, sans-serif, Impact;
font-size: 16px;
color: #FFFFFF;
}

#menu a:hover {
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
}

#menu .first {
background: none;
}

/** PAGE */

#page {
width: 1000px;
margin: 0px auto;
background: url(images/bg06.jpg) repeat-y left top;
}

#page-bgtop {
background: url(images/bg04.jpg) no-repeat left top;
}

#page-bgbtm {
overflow: hidden;
padding: 40px 40px 0px 40px;
background-image: url(images/bg01.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}

.subpage #page-bgbtm {
width: 840px;
padding: 40px 80px 30px 80px;
}

.single #page-bgbtm {
width: 840px;
padding: 40px 80px 40px 80px;
}

/** SPLASH PAGE */

#splash {
width: 800px;
height: 161px;
margin: 0px auto;
padding: 96px 0px 30px 40px;
background: url(images/homepage03.jpg) no-repeat left top;
}

#splash h2, #splash p {
margin: 0px;
padding: 0px;
line-height: normal;
text-transform: lowercase;
font-family: Tahoma, Geneva, sans-serif, Impact;
font-weight: normal;
}

#splash h2 {
margin-top: -10px;
letter-spacing: -3px;
font-size: 44px;
color: #23252A;
}

#splash p {
letter-spacing: -1px;
font-size: 22px;
color: #575A63;
}

/** CONTENT */

#content {
float: right;
width: 550px;
}

.single #content {
width: 840px;
}

/** SIDEBAR */

#sidebar {
float: left;
width: 260px;
}

#two-columns {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #BEBFC1;
}

/** FOOTER */


#footer-content {
width: 1000px;
margin: 0px auto;
background: url(images/bg09.jpg) repeat-y left top;
}

#footer-content .bgtop {
background: url(images/bg07.jpg) no-repeat left top;
}

#footer-content .bgbtm {
width: 840px;
overflow: hidden;
padding: 30px 80px;
background: url(images/bg08.jpg) no-repeat left bottom;
}

#two-columns h2 {
letter-spacing: -1px;
text-shadow: 1px 1px 2px #3D3F47;
font-size: 18px;
font-weight: normal;
color: #FFF;
background-color: #020940;
font-family: Arial, Helvetica, sans-serif;
}

#two-columns span {
font-weight: bold;
color: #FFFFFF;
}

#two-columns strong {
color: #333333;
}

#two-columns a {
color: #F3F3F3;
}

#two-columns .separator {
margin-bottom: 20px;
background: url(images/homepage13.jpg) repeat-x left bottom;
}

#two-columns .link {
padding-left: 20px;
background: url(images/homepage14.gif) no-repeat left top;
}

#column1 {
float: left;
width: 550px;
}

#column2 {
float: right;
width: 260px;
}

#footer {
width: 1000px;
height: 177px;
margin: 0px auto;
background: url(images/bg10.jpg) no-repeat left top;
}

#footer p {
margin: 0px;
padding: 36px 0px 0px 0px;
text-align: center;
text-transform: lowercase;
font-size: 12px;
color: #6E727B;
}

#footer .legal {
}

#footer .links {
}

.box1 {
width: 260px;
}

.box1 .title {
margin: 0px;
padding: 0px;
height: 40px;
background: url(images/bg3_01.jpg) no-repeat left top;
}

.box1 span {
font-weight: bold;
text-transform: lowercase;
text-align: center;
right: 35pt;
}

.box2 span {
font-weight: bold;
text-transform: lowercase;
}

.box3 span {
font-weight: bold;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
}

.box1 .content {
background: url(images/bg3_04.jpg) repeat-y left top;
}

.box1 .content .bgtop {
background: url(images/bg3_02.jpg) no-repeat left top;
}

.box1 .content .bgbtm {
overflow: hidden;
padding: 20px 20px 15px 20px;
background: url(images/bg3_03.jpg) no-repeat left bottom;
}

.box2 {
width: 260px;
}

.box2 .title {
margin: 0px;
padding: 0px;
height: 40px;
background: url(images/bg3_05.jpg) no-repeat left top;
}

.box2 .content {
background: url(images/bg3_08.jpg) repeat-y left top;
}

.box2 .content .bgtop {
background: url(images/bg3_06.jpg) no-repeat left top;
}

.box2 .content .bgbtm {
overflow: hidden;
padding: 20px 20px 15px 20px;
background: url(images/bg3_07.jpg) no-repeat left bottom;
}

.box3 {
width: 260px;
}

.box3 .title {
margin: 0px;
padding: 0px;
background: url(images/bg3_09.jpg) no-repeat left top;
}

.box3 .content {
overflow: hidden;
background: url(images/bg3_12.gif) repeat-y left top;
}

.box3 .content .bgtop {
background: url(images/bg3_10.jpg) no-repeat left top;
}

.box3 .content .bgbtm {
overflow: hidden;
padding: 20px 20px 15px 20px;
background: url(images/bg3_11.jpg) no-repeat left bottom;
}

.box4 {
width: 550px;
}

.box4 .title {
margin: 0px;
padding: 0px;
background: url(images/subpage1_01.jpg) no-repeat left top;
}

.box4 span {
font-weight: bold;
}

.box4 .content {
overflow: hidden;
background: url(images/subpage1_04.jpg) repeat-y left top;
}

.box4 .content .bgtop {
background: url(images/subpage1_02.jpg) no-repeat left top;
}

.box4 .content .bgbtm {
overflow: hidden;
padding: 20px 20px 15px 20px;
background: url(images/subpage1_03.jpg) no-repeat left bottom;
}

.box5 {
width: 840px;
}

.box5 .title {
margin: 0px;
padding: 0px;
background: url(images/bg4_01.jpg) no-repeat left top;
}

.box5 span {
font-weight: bold;
}

.box5 .content {
overflow: hidden;
background: url(images/bg4_04.jpg) repeat-y left top;
}

.box5 .content .bgtop {
background: url(images/bg4_02.jpg) no-repeat left top;
}

.box5 .content .bgbtm {
overflow: hidden;
padding: 20px 20px 15px 20px;
background: url(images/bg4_03.jpg) no-repeat left bottom;
}


.box-style {
color: #5C5F68;
}

.box-sytle .title {
height: 30px;
padding: 10px 0px 0px 20px;
text-transform: lowercase;
text-shadow: 1px 1px 2px #710811;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #FFFFFF;
}

.box-style span {
font-weight: bold;
}

.separator {
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: normal;
}

.box1 .separator {
background: url(images/homepage07.gif) repeat-x left top;
}

.box2 .separator {
background: url(images/homepage08.gif) repeat-x left top;
}

.box3 .separator {
background: url(images/homepage09.gif) repeat-x left top;
}

.link {
margin: -10px 0px 5px 0px;
padding: 0px 0px 0px 20px;
line-height: normal;
}

.box1 .link {
background: url(images/homepage10.gif) no-repeat left 3px;
}

.box2 .link {
background: url(images/homepage11.gif) no-repeat left 3px;
}

.box3 .link {
background: url(images/homepage12.gif) no-repeat left 3px;
}

#box1 {
float: left;
width: 260px;
margin-right: 30px;
}

#box2 {
float: left;
width: 260px;
}

#box3 {
float: right;
width: 260px;
}

#box4 {
margin-bottom: 20px;
}

#three-columns {
overflow: hidden;
height: 250px;
padding: 30px 40px 0px 40px;
background: url(images/bg2_01.jpg) no-repeat center top;
}

ol.style1 {
}

ol.style1 li {
padding: 0px 0px 5px 0px;
}

SeattleMicah
01-23-2012, 05:09 PM
Hey can you provide a link, we need to look at your html and get an idea of what were working on.

Also wrap your code in CODE tags.

MariaCdH
01-24-2012, 10:49 AM
Hey, thank you so much SeattleMicah for your quick support offer, already grateful over here. Well, I am quite new in all this, so lets see if I can be at least helpful to your help. I am working locally in my PC so I do not have a web link to show you the template, from the following link http://wtrns.fr/PQTX7aLGM9EVIS you can download a print screen of the web page . Bellow I send the html code of the page


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bg8</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
@import "layout.css";
.InitialCapital {
text-transform: capitalize;
}
Rulefordatabsetexts {
color: #666;
}
a:link {
color: #000033;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">BusinessName.com</a></h1>
</div>
<div id="menu">
<ul>
<li class="first"><a href="#" accesskey="1" title="">Home</a></li>
<li><a href="#" accesskey="2" title=""> About EMC</a></li>
<li><a href="#" accesskey="3" title="">join</a></li>
<li><a href="#" accesskey="3" title="">services</a></li>
<li><a href="#" accesskey="4" title="">Contact</a></li>
</ul>
</div>
</div>
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="splash">
<p>Aliquam veroeros sed etiam</p>
<h2>Lorem ipsum<strong> EMC</strong></h2>
</div>
<div id="three-columns">
<div id="box1">
<div class="box1 box-sytle">
<h2 class="title"><span>About EMC</span></h2>
<div class="content">
<div class="bgtop">
<div class="bgbtm">
<p>sgkshfvjsdvfjkbvcjdshfcgvhfjhdGFJHDGFJHGDJFlgfljgjhffjgfgfp>
<p class="separator">&nbsp;</p>
<p class="link"><a href="#">Learn more about us ...</a></p>
</div>
</div>
</div>
</div>
</div>
<div id="box2">
<div class="box2 box-sytle">
<h2 class="title"> <span>services</span></h2>
<div class="content">
<div class="bgtop">
<div class="bgbtm">
<p><strong>Blandit tempus duis</strong> id purus laoreet massa ultrices eleifend non vitae dui. Nam elementum augue at gravida in neque nisi vulputate luctus.</p>
<p class="separator">&nbsp;</p>
<p class="link"><a href="#">Learn more ...</a></p>
</div>
</div>
</div>
</div>
</div>
<div id="box3">
<div class="box3 box-sytle">
<h2 class="title"><span>EMCQ</span></h2>
<div class="content">
<div class="bgtop">
<div class="bgbtm">
<p><strong>Blandit tempus duis</strong> id purus laoreet massa ultrices eleifend non vitae dui. Nam elementum augue at gravida in neque nisi vulputate luctus.</p>
<p class="separator">&nbsp;</p>
<p class="link"><a href="#">Learn more ...</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer-content">
<div class="bgtop">
<div class="bgbtm">
<div id="two-columns">
<div id="column1">
<h2>emcq <span>database</span></h2>
<p><strong>Consequat sed luctus</strong> <span class="databasetexts">id purus laoreet massa ultrices eleifend non vitae dui. Nam elementum augue at gravida in neque vulputate luctus. Duis ultricies eleifend dui sit tempus a consectetur. Pellentesque sit amet lectus eget mauris tincidunt <a href="#">faucibus id sit amet nunc</a>. Sed dui et risus augue quam placerat ligula, vitae rutrum nisl massa vel diam lorem ipsum dolor.</span></p>
<p class="separator">&nbsp;</p>
<p class="link"><a href="#">Lorem ipsum dolor sit amet nullam </a></p>
</div>
<div id="column2">
<h2>EMCQ certificate's holders <span></span></h2>
<p><img src="images/homepage15.jpg" alt="" width="80" height="80" class="alignleft" /><strong>Lorem et ipsum</strong> purus laoreet et massa ultrices eleifend non et vitae dui. Nam elementum.</p>
<p class="separator">&nbsp;</p>
<p class="link"><a href="#">Purus lorem ipsum volutpat</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>Copyright (c) 2010 BusinessName.com. All rights reserved.</p>
</div>
</body>
</html>

SeattleMicah
01-24-2012, 05:09 PM
Alright we need a little more info still...

So you are changing this block of code I am assuming? And what are you changing it to?


#header {
width: 900px;
height: 180px;
margin: 0px auto;
padding: 0px 50px;
background: url(images/bg03.jpg) no-repeat left top;
}

When you make those changes can you take a please screen shot so we can see how it is affecting the site.

MariaCdH
01-26-2012, 03:29 PM
Hey, I apologize for not getting back to your last post quicker, in fact I already fount what I was doing wrong, the header contents different elements, one of them the logo, and at the same the time the logo seems to be linked to some other elements, I was changing the size of the header and the logo, but I was missing to change the size of logo h1 a :o, see bellow. That seems to be the reason why all the elements in my page were getting out of place...

I will need to insert drop down menus on the web, I have read about the dreamweaver drop down menu extension, do you know it? is it easy to use?

Thank you I really appreciated all your patience helping me with all this.




/** HEADER */

#header {
width: 900px;
height: 40px;
margin: 0px auto;
padding: 0px 50px;
background: url(images/bg03.jpg) no-repeat left top;
}

/** LOGO */

#logo {
float: left;
width: 430px;
height: 40px;
}

#logo h1, #logo p {
margin: 0px;
line-height: normal;
text-indent: -9999em;
}

#logo h1 a {
display: block;
top: 0px;
left: 0px;
width: 430px;
height: 40px;
background: url(images/homepage01.jpg) no-repeat left top;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum