...

View Full Version : Top Bar Re sizing Problem



SumanSriparna
08-10-2012, 07:02 AM
I have been developing a web application in dotnet with c#,
and I am a newbie in html and css
the html and css are designed in Dreamweaver (where everything worked fine), when I copied everything from dreamweaver to visual studio,
the bar at the top starts having a gap in it, where it should start touching the top of the browser.
Here is the image:
http://www.codingforums.com/attachment.php?attachmentid=11446&stc=1&d=1344574723
http://postimage.org/image/irqym3x8p/

I request for your help :)

My html code:



<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="AESc.Site1" %>

<!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 id="Head1" runat="server"><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="timothy/jquery.js"></script><link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"><link href="css/print.css" rel="stylesheet" type="text/css" media="print"><link rel="stylesheet" type="text/css" href="css/demo.css" /><link rel="stylesheet" type="text/css" href="css/style3.css" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Type" content="cache" /><meta name="robots" content="INDEX/FOLLOW" /><meta name="keywords" content="Enter Keywords" /><meta name="description" content="Description Here" /><title>Associated Enginnering and Services </title>
</head>


<body>
<form id="form1" runat="server">


<div id="outer">
<div id="wrapper">
<div id="top">
<h1>Associated Enginerring Services</h1>
</div>

<div id="logo">
<a href="#"><img src="" alt="Insert Logo Here" width="232" height="90" id="Insert_logo" style="background-color: #C6D580; display:block; " /></a>
</div>

<div id="social-media-icons">
<ul>
<li> <a href="http://www.apple.com"><img src="images/apple.png" /></a></li>
<li> <a href="#"><img src="images/blogger.png"/></a></li>
<li> <a href="http://www.facebook.com"><img src="images/facebook.png"/></a></li>
<li> <a href="http://www.youtube.com"><img src="images/youtube.png"/></a></li>

</ul>
</div>

<div id="login">
<ul>
<li><a href="login.aspx">Login</a></li>
<li><a href="login.aspx">Register</a></li>
</ul>
</div>

<div id="topnav">
<ul>

<li><a href="home.aspx">Home</a></li>
<li><a href="database.aspx">Databases</a></li>
<li><a href="services.aspx">Services</a></li>
<li><a href="about.aspx">About</a></li>
<li><a href="contact.aspx">Contact</a></li>
<div id="search">

<li><label for="Name"></label>
<input type="text" name="Name" id="Name" /></li>
<li><a href="search.aspx">Search</a></li>

</div>
</ul>
</div>


<!-- <div id="banner"><img src="images/banner.jpg"></div>-->
<div id="banner">
<section class="cr-container">

<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1</label>

<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2">2</label>

<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3">3</label>

<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4">4</label>

<div class="clr"></div>
<div class="cr-bgimg">
<div>
<span>Slice 1 - Image 1</span>
<span>Slice 1 - Image 2</span>
<span>Slice 1 - Image 3</span>
<span>Slice 1 - Image 4</span>
</div>
<div>
<span>Slice 2 - Image 1</span>
<span>Slice 2 - Image 2</span>
<span>Slice 2 - Image 3</span>
<span>Slice 2 - Image 4</span>
</div>
<div>
<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
<span>Slice 3 - Image 3</span>
<span>Slice 3 - Image 4</span>
</div>
<div>
<span>Slice 4 - Image 1</span>
<span>Slice 4 - Image 2</span>
<span>Slice 4 - Image 3</span>
<span>Slice 4 - Image 4</span>
</div>
</div>
<div class="cr-titles">
<h3><span>Serendipity</span><span>What you've been dreaming of</span></h3>
<h3><span>Adventure</span><span>Where the fun begins</span></h3>
<h3><span>Nature</span><span>Unforgettable eperiences</span></h3>
<h3><span>Serenity</span><span>When silence touches nature</span></h3>
</div>
</section>
</div>

<!--Content-->
<div id="content"><h1>
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
Welcome to AES
</asp:ContentPlaceHolder>
</h1>
<p>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
nkcnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnncmscmm
</asp:ContentPlaceHolder>
</p>
<p>cnoacmasckasmcknmkimoodcmod9odcaojdojudjdiojdcjcidjidcjaodcidc9 hdqcdqmdqdq qdjqcdqdqwod cqodchqodqud9qojdq dcqjdoqdcqwqcdoqjodcqjcioqjwc qwdqceqoceqiowcejqje qwcequomqjceq cqhceqooeqo</p>
&nbsp;<asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
<p>
<img src="images/small5.jpg" class="image-frame" id="Image2" onMouseOver="MM_swapImage('Image2','','images/small7.jpg',1)" onMouseOut="MM_swapImgRestore()"/><img src="images/small6.jpg" class="image-frame" id="Image1" onMouseOver="MM_swapImage('Image1','','images/small8.jpg',1)" onMouseOut="MM_swapImgRestore()"/></p>
<p>
cnoacmasckasmcknmkimoodcmod9odcaojdojudjdiojdcjcidjidcjaodcidc9 hdqcdqmdqdq qdjqcdqdqwod cqodchqodqud9qojdq dcqjdoqdcqwqcdoqjodcqjcioqjwc qwdqceqoceqirverververververvr
rve
rverervrerererereververvretrrwtwcagvhrtheherv
ertv3rvtrteteteertvetetvevtetvreoteuovemcroecimveirtoctipititteritmpimp</p>
</asp:ContentPlaceHolder>
&nbsp;<p>&nbsp;</p>
</div>

<!--Rightside-->
<div id="rightside">
<h2>Updates</h2>
<p class="date">7th July,2012</p>
<p>ncnacaocnakncl m jocmkoakjd</p>
<p></p>
<h4>Another</h4>
<p class="date">5th june, 2012</p>
<p>cbsknscsknckankn</p>
<p>
</p>
<h4>Another one</h4>
<p>bckdjcnkcdjcjcndcndkcnd
cnklscksnckndklcnkds
cdscnlmldsmckmdslmcsdkj</p>
<telerik:RadTreeView ID="RadTreeView1" Runat="server" DataFieldID="Title"
DataFieldParentID="Title" DataNavigateUrlField="Title"
DataSourceID="SiteMapDataSource1" DataTextField="Title" DataValueField="Title"
Skin="Hay">
</telerik:RadTreeView>
<p>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</p>

</div>

<div id="footer">
<p class="footer-text">Copyrightę |Suman Baul|</p>
</div>



</div>

</div>


<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</div>




</form>
</body>


</html>


My css files are attached below..
Please Help..

SumanSriparna
08-15-2012, 06:52 PM
Someone please Reply..

AndrewGSW
08-15-2012, 07:01 PM
You mean the heading "Associated Engineering Services"?


<body>
<form id="form1" runat="server">

<div id="outer">
<div id="wrapper">
<div id="top">
<h1>Associated Enginerring Services</h1>

All of body > form > outer > wrapper > top > h1 need to have padding-top and margin-top as 0. Added: Except that the final h1 might have some padding.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum