PDA

View Full Version : Positioning of my site.


inhausdesigns
01-14-2010, 09:36 AM
Right I am a total novice with dreamweaver but have managed to somehow create a website. Althougth it looks fine on my widescreen monitor it doent not on my gf as she has a smaller screen. How do I keep alter the css so that it changes scale in relation to the viewers monitor size.

Also I am not sure if I am over writing my css files, it is possible to place all my different font styles into my css, bearing in mine some of my container has more than one fot size within it. Ihave attached my index page and css if anyone can help !!!!

Corrosive
01-14-2010, 03:53 PM
Could you post your code rather than offering files. No one here is too keen on downloading stuff...even .txt files!

inhausdesigns
01-14-2010, 05:11 PM
<!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>
<title>Inhaus Designs | Architectural Services and 3D Modelling </title>
<meta name="keywords" content="inhaus designs Cornwall architectural services archicad autocad planning permission planning applications building regulations shane harman 3d design 2d design sketch designs project design building drawings property development">
<meta name="description" content="Inhaus Design is a small cornish-based firm who specialises in planning applications, planning permission and building regulation packages to local companies and individuls in need of architectural services or full project design. We offer complete drawing packages from sketch designs to property development, ranging from bespoke designs to larger housing estates">

<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Stroll.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: centre; /*keep this intact*/
visibility: hidden; /*keep this intat*/
border: 1px solid white;
width: 750px;
height: 450px;
margin-left: 25px;
margin-right: 25px;
}

#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: centre;
padding: 2px 5px;
}

</script>
<style type="text/css">
<!--
.style1 {
color: #FFFFFF;
font-size: 30px;
font-family: "myriad Pro cond";
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: none;
}
a:active {
color: #FF0000;
text-decoration: none;
}
.style2 {color: #FFFFFF; font-size: 36px; font-family: "myriad Pro cond"; }
.style3 {
color: #FFFFFF;
font-size: 30px;
font-family: "myriad Pro cond";
}
.style4 {font-size: 30px}
.style5 {color: #FFFFFF; font-size: 9px; font-family: "myriad Pro cond"; }
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>

<body class="thrColElsHdr">

<div id="container">
<div id="header"> <a href="index.html"></a>
</div>
<div id="sidebar1">
<p class="">&nbsp;</p>
<p class="">&nbsp;</p>
<p class="">&nbsp;</p>
<div class="style1">
<h2 align="left" class="style1"><span class="style3"><a href="index.html" class="style3"> home</a></span></h2>
</div>
<div class="style1">
<h2 align="left" class="style1"><span class="style3"><a href="aboutus.html" class="style1"> about us</a></span></h2>
</div>
<div class="style1">
<h2 align="left" class="style1"><span class="style3"><a href="projects.html"> projects</a></span></h2>
</div>
<div class="style1">
<h2 align="left" class="style1"><span class="style3"><a href="services.html"> services</a></span></h2>
</div>
<div class="style1">
<h2 align="left" class="style1"><span class="style3"><a href="links.html"> links</a></span></h2>
</div>
<div class="style1">
<h2 align="left" class="style1"><span class="style3"><a href="contactus.html"> contact us</a></span></h2>
</div>
</div> <div id="sidebar2">
<h3 class="style1">&nbsp;</h3>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
<p class="style1">&nbsp;</p>
</div>
<div id="mainContent">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<h2 align="center" class="style2">&nbsp;</h2>
<h2 align="center" class="style2">this site is currently under construction</h2>
<p></p>
<h2 align="center" class="style2">some functions may not work</h2>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<span class="style1">
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<br class="clearfloat" />
</span>
<div id="footer"><!-- end #footer -->
</div>
<!-- end #container --></div>
<script type="text/javascript">
//-->
</script>
</body>
</html>

inhausdesigns
01-14-2010, 05:12 PM
and here is the css file

@charset "utf-8";
body {
margin: 0;
text-align: left;
color: #FFFFFF;
font-family: Myriad Pro Cond, Abadi MT Condensed;
font-style: normal;
font-size: 100%;
width: 1050px;
margin: 0 auto;
margin-top: 50px;
background-position: center;
background-color: #000000;
max-width: 1050px;
min-width: 900px;
}

/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
.thrColElsHdr #container {
width: 1050px;
background: #000000;
border: 1px solid #000000;
font-style: normal;
font-family: Myriad Pro Cond, Abadi MT Condensed;
margin-top: 100px;
margin: 0 auto;
}
.thrColElsHdr #header {
width: 1050px;
height: 138px;
background-image: url(images/header.jpg);
padding: 0px 0;
border: 50px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
.thrColElsHdr #header h1 {
margin: 0;
padding: 0px 0;
font-family: "Myriad Pro Cond", "Abadi MT Condensed", Corbel, "comic Sans MS";
}
.thrColElsHdr #sidebar1 {
float: left;
width: 115px;
font-size: 30px;
padding-left: 1px;
text-align: left;
margin: 0;
}
.thrColElsHdr #sidebar2 {
float: right;
width: 120px;
padding-right: 1px;
margin: 0;
}
.thrColElsHdr #sidebar1 h3, .thrColElsHdr #sidebar1 p, .thrColElsHdr #sidebar2 p, .thrColElsHdr #sidebar2 h3 {
margin-left: 0px;
margin-right: 0px;
}
.thrColElsHdr #mainContent {
font-size: 24px;
padding: 0px 0;
margin-top: 0px;
margin-right: 148px;
margin-bottom: 0px;
margin-left: 148px;
}
.thrColElsHdr #footer {
width: 1050px;
height: 60px;
background-image: url(images/footer.jpg);
}
.clearfloat {
clear:both;
height:0;
font-size: 0px;
line-height: 0px;
}

edbr
01-15-2010, 03:08 AM
you have set your width at 1050px so if you want smaller you will have to adjust that. also remove the width for the body