-
1. Re: Horizontal Spry Menu Width Browser Problem
Preran Apr 9, 2013 10:42 PM (in response to ZenDao)Hi ZenDao,
Could you post your CSS code here for the experts to help you better?
Thanks,
Preran
-
2. Re: Horizontal Spry Menu Width Browser Problem
Sudarshan Thiagarajan Apr 9, 2013 10:55 PM (in response to ZenDao)Margin & Padding can kill you sometimes!
Put your files on a webserver and give us a link so we can troubleshoot.
On a sidenote, Spry has been deprecated and will no longer be officially supported or developed by Adobe: http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
-
3. Re: Horizontal Spry Menu Width Browser Problem
ZenDao Apr 10, 2013 1:37 PM (in response to Sudarshan Thiagarajan)I'll try to post the code in a few... I don't have access to the company's site that I am redesigning the Web site for. I seem to recall there is a way to post a website (for testing) on line. I thought it was a free(?) feature through Adobe. Maybe the via Adobe Cloud? I remember seeing a link either on Adobe's Web site or Dreamweaver. I can't find it. Does this sound familiar to anyone?
-
4. Re: Horizontal Spry Menu Width Browser Problem
Nancy O. Apr 10, 2013 3:01 PM (in response to ZenDao)Are you a Cloud member? Cloud comes with Business Catalyst hosting.
http://forums.adobe.com/docs/DOC-2152
Nancy O.
-
5. Re: Horizontal Spry Menu Width Browser Problem
Ben Pleysier Apr 10, 2013 10:43 PM (in response to ZenDao)Try adding
ul.MenuBarHorizontal li {width: 16.66666%;}
This is 16.66666 x 6 = 100%
-
6. Re: Horizontal Spry Menu Width Browser Problem
ZenDao Apr 25, 2013 9:47 AM (in response to Preran)I am pasting the html code and css style sheet one after the other in this thread. Hopefully it will not be confusing. I don't have access to my client's web server, otherwise I would have done that instead. Since I am starting out creating web sites, what do web designers normally do (especially on a budget) when trying to post a web site on line for testing and the client to review?
As for the test page I am trying to build, I am attaching screen shot of how it looks in Safari and Firefox. Hopefully my attempts at coding and css isn't too bad. I have been so use to be able to easily position and mold things in InDesign and Photoshop but it's been very frustrating trying to do this in Dreamwaver/CSS. I am still having problems with the right side of the menu bar. It's fine in Safari but sticks out a little in Firefox. Plus, I am trying to add div to the footer bar at the bottom for mini contact/copyright line next to the Facebook icon. But it is appearing under and outside the footer box instead of inside. Thanks for you help in advance.
Safari Screen Shot__________________________________________________________
Firefox Screen Shot__________________________________________________________
HTML__________________________________________________________
<!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>Sulam of Brookline</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
position:absolute;
left:239px;
top:856px;
width:761px;
height:56px;
z-index:1;
font-size: 1em;
color: #FFFFFF;
}
#apDiv2 {
position:absolute;
left:224px;
top:851px;
width:693px;
height:53px;
z-index:1;
font-size: 1em;
color: #FFFFFF;
}
</style>
</head>
<body bgcolor="#FF0033" link="#FF0033" vlink="#990033" alink="#CC0066">
<div id="apDiv2">
<h6>copyright and contact information line goes here.</h6>
</div>
<div class="container">
<div class="header"><img src="images/temp_Logo.png" width="189" height="65" alt="sulam logo" />
<div class="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a> </li>
<li><a href="#">About Us</a></li>
<li><a href="#">Curriculum</a> </li>
<li><a href="#">Admissions</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="main_img"><img src="images/fpo.jpg" width="600" height="250" alt="image1" /></div>
<h1>Headline</h1>
<p>Sulam is an innovative new option for Jewish education in the Boston area. It is an after-school program for children that begins in kindergarten and continues through fifth grade, designed to prepare students with the skills, knowledge and intuition to successfully transfer into 6th grade at any of the Boston area Jewish day schools. By meeting four afternoons per week, the program aims to deliver a rigorous Jewish elementary education and a nourishing social environment for children. Sulam is committed to pluralistic Jewish education and aims to recruit families from diverse backgrounds and affiliations. </p>
</div>
<div class="footer"><img src="images/f_logo.jpg" width="40" height="40" alt="facebook" /></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
CSS__________________________________________________________
@charset "UTF-8";
/* CSS Document */
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #657504;
}
body {
background-color: #FFF5E4;
background-image: url(images/vectorstock_38606g.gif);
margin: 0;
padding: 0
}
p {
color:#657504;
line-height:1.8;
font-size: 1em;
}
h1 {
font-size: 1.6em;
color: #657504;
margin-top: 0;
margin-bottom: 0em;
}
h2 {
font-size: 1.6em;
color: #657504;
font-weight: normal;
margin-top: 1.2em;
margin-bottom: 1em;
}
h3 {
font-size: 1.3em;
color: #657504;
font-weight: normal;
margin: 1.25em 0 .5em;
}
.container {
width: 900px;
padding: 0px;
margin: 0px;
background: #ffffff;
height: auto;
margin: 0px auto;
}
</style>
.content {
overflow:hidden;
}
.footer {
padding: 10px 20px;
background: #670206;
float: none;
margin: 80px 0px 0px;
}
.nav {
height: 20px;
padding: 0px;
margin: 0px;
float: none;
background: #FFFFFF;
}
.footer img {
padding: 10px;
}
.content {
width: 600px;
left: 0px;
margin: 0px 150px;
padding: 0px;
top: 0px;
clear: both;
clip: rect(auto,auto,auto,auto);
}
.footer img2 {
padding: 10px 10px 10px 0px;
}
.header {
text-align: center;
background: #670206;
}
.main_img {
padding-bottom: 0px;
margin-bottom: 20px;
margin-top: 20px;
padding-top: 30px;
}
.contact_line {
color: #FFFFFF;
visibility: visible;
top: 0px;
clip: rect(0px,auto,auto,auto);
font-size: 1em;
}
-
7. Re: Horizontal Spry Menu Width Browser Problem
Nancy O. Apr 25, 2013 10:49 AM (in response to ZenDao)Building web page layouts has about as much in common with print design (InDesign and Photoshop) as Elephants have to tea leaves. Nothing close because print is static & unchanging. Web pages must be flexible to accommodate various devices/browser settings and display/text sizes which the end user controls.
DW requires you to understand basic web design theory & coding fundamentals. If you don't, you won't have good cross browser results.
Position:absolute, no. You don't need positioning. It's better if you don't use it because it removes content from the normal document flow. Your copyright info belongs inside your <footer> div; not at the top of your page.
clip: rect(0px,auto,auto,auto); This rule serves no purpose. I don't know why you included it.
Re-work your layout without positioning. Put information in a logical sequence from page top <header> to bottom <footer>. I highly recommend you use Split View with Live View instead of Design View. Design View is not 100% reliable.
Nancy O.






