Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Belgium
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Problems at changing the size of the header

    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.

    Code:
    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;
    }
    Last edited by WA; 01-23-2012 at 10:13 PM.

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    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.
    Last edited by WA; 01-23-2012 at 10:13 PM.

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Belgium
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

    Code:
    <!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>

  • #4
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    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?

    Code:
    #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.

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Belgium
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 , 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.


    Code:
    /** 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;


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •