PDA

View Full Version : Some very general questions


econnelle
01-19-2009, 12:43 AM
We're struggling a bit with some aspects of Dreamweaver. We're so close, but yet so far away :)

We have a very basic site up now that consists of a home page, a business service page, a home service page, and an about us page.

The clickable links on left and the header are static, only the text content changes.

We needed to update it so that on each page while there was already a few paragraphs explaining what we do for each service it needed to be expanded up even more.

So we used Spry tabs and filled in the information the way we wanted.

Prior to Friday I had never touched Dreamweaver or any web software before but I'm very familiar with page layout stuff although this doesn't have a whole lot to do with page layout, if it worked like page layout I'd be done :)

I've done the site at least 10 times now each time working through a bug here or there. I have a few specific questions that we'd appreciate if someone could answer.

1. How do you center everything? We created a div box, put in our graphic header, did the 10 percent margin on both sides, centered perfectly. Added a Spry menu bar, can't center no matter what we do. Put in a div box, put the spry bar inside the div box, put in the margin info, won't center...I can manually adjust it but I know thats not the right way. Should the Spry bar and Spry tabs sit by themselves or go in a div box?

2. We used the Spry Menu Bar and took out all the options to give us our 4 main buttons, any reason not to do this except its the easy way out?

3. Templates...I've read so many different things and tried quite a few different things with no real luck. I created the header, the Spry menu bar in a div box, then another div box that the body text would go in. I saved that as a template. The Index and About pages will not have tabs, they are single blocks of text. When I tried to put in the Spry Tab Bar in the Home and Business page I'm told I can't...so next time I created a blank small div box in the template and then a seperate div box for the text...no luck. How can I have 4 pages linked together but I want to make two of them have a Spry Tab bar, and 2 not? I want the other area's to be linked together as we may change some small things later on as we tweak the site..

4. Web safe colors...we have a specific set of Pantone colors...who in this day and age doesn't have at least a 16 bit color display...does it still matter? If there are 1 to 2 percent of people out there who don't see the right things, its not a big deal to us.

We've made huge strides in just a few hours. In fact we had a fully working site but ran into a template editing issue so we scrapped it to work it up again.

Pretty happy with Dreamweaver. I started off using Ventura and Pagemaker but never did any web stuff. I just need to get how the layout stuff works in relationship to what it does on paper.

Thanks

Ricky55
01-19-2009, 04:24 PM
1. You centre a Div by using margin auto for the left and right. for example

#someDiv {
margin: 0 auto;
}

2. No point in using Spry if you don't need to, just style a unordered list but would need to see to offer more.

3. See the home page of this site for a good tut on using templates.

4. No such thing as web safe colours just use what ever you want, just remember that all monitors and setups will view colours differently but thats just something you have to accept as a web designer. I suppose the more basic the colour is the more chance you've got of it looking the same but generally speaking I just use what ever I want.

Ricky55
01-19-2009, 04:26 PM
I think web safe colours go back to the very early days when like you say people had vary basic monitors. This no longer applies.

d a v e
01-19-2009, 04:44 PM
web safe colours was when most monitors (or rather their graphics cards) had no more than 256 colours. the web safe colour palette was a supposedly safe array of colours that could be displayed faithfully on most people's display without dithering (having to combine say red and yellow dots to make a sort of orange) this used to be about 216 colours, but was fewer due to cross platform differences and, er, other things i can't remember. anyway as said above it's not important anymore.

Corrosive
01-19-2009, 05:14 PM
I think web safe colours go back to the very early days when like you say people had vary basic monitors. This no longer applies.

Time to get rid of my Amstrad green screen I reckon.

Ricky55
01-19-2009, 06:25 PM
I never had one of them, I was a Specky kid.

Ricky55
01-19-2009, 06:26 PM
Before this post digresses are you OK now econnelle?

Corrosive
01-19-2009, 06:31 PM
Before this post digresses are you OK now econnelle?

Yeah, good shout Ricky...I just couldn't resist...back on thread now :oops:

econnelle
01-19-2009, 07:17 PM
I understand the code part for the centering, but where exactly does that go in the code list?

I put it in like this:


<!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>Untitled Document</title>
<style type="text/css">
<!--
#headergraphic {
position:absolute;
left:0px;
top:0px;
width:800px;
height:167px;
z-index:1;
margin: 0 auto;
}
-->
</style>
</head>

<body>
<div id="headergraphic"><img src="index_r1_c1.jpg" width="800" height="167" /></div>
</body>
</html>But it doesn't center in either IE or Firefox.

Thanks for the replies, I'm about to give it another shot and see where I get. Now at least I can get our company logo colors correct.

domedia
01-19-2009, 07:35 PM
4. Web safe colors...we have a specific set of Pantone colors...who in this day and age doesn't have at least a 16 bit color display...does it still matter? If there are 1 to 2 percent of people out there who don't see the right things, its not a big deal to us.
Pantone colors are for print. You're limited to RGB for the web.

domedia
01-19-2009, 07:37 PM
But it doesn't center in either IE or Firefox.
The parent element needs to align the content center.
See our tutorial: http://www.dreamweaverclub.com/css-center-content.php

econnelle
01-19-2009, 07:38 PM
Right but all colors, regardless have a specific value.

Our Pantone Blue is 294 in a 4 color CYMK print process is 0 Red, 53 Green, and 128 Blue in RGB.

The first web person who helped us with our website mentioned web safe which never made much sense to me since the advent of 16/32 bit displays.

econnelle
01-19-2009, 07:39 PM
The parent element needs to align the content center.

Thanks I got it now, centered up all my boxes.

Huge step forward :)

econnelle
01-19-2009, 08:03 PM
Ok a new problem.

I put in a div with our header. I put in another div with a Spry Menu bar and now I want to put in an editable region in the template as a separate div.

No matter what I do, when I set the margin to 0 and auto the part goes to the top of the screen.

I've moved it in the code, I've done everything but it insists on going to the top of the screen and if I put in a top value it left justifies and does not center:

<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
#headergraphic {
width:800px;
height:167px;
margin: 0 auto;
}
#menubar {
width:802px;
height:120px;
margin: 0 auto;
}
-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
#bodytext {
position:absolute;
left:426px;
top:223px;
width:803px;
height:275px;
z-index:1;
}


}
#apDiv1 {
position:absolute;
left:427px;
top:226px;
width:799px;
height:109px;
z-index:1;
}
#mainbody {

margin:0 auto;
width:800px;
height:161px;
background-color: #FF6699;

-->
</style>
</head>

<body>

<div id="mainbody"></div>
<div id="headergraphic"><img src="../index_r1_c1.jpg" width="800" height="167" />
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home Page</a> </li>
<li><a href="#">Business Services</a></li>
<li><a href="#">Home Services</a> </li>
<li><a href="#">About Us</a></li>
</ul>
</div>

<p>&nbsp;</p>
<p>&nbsp; </p>
<p>&nbsp; </p>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

I'm getting there, once I get this in I can add the other tabbed bar, fill in our content and then start formatting it to look the way we want.

Corrosive
01-19-2009, 08:38 PM
Ok a new problem.

I put in a div with our header. I put in another div with a Spry Menu bar and now I want to put in an editable region in the template as a separate div.

No matter what I do, when I set the margin to 0 and auto the part goes to the top of the screen.

I've moved it in the code, I've done everything but it insists on going to the top of the screen and if I put in a top value it left justifies and does not center:



I'm getting there, once I get this in I can add the other tabbed bar, fill in our content and then start formatting it to look the way we want.

If your main body id is meant to be centring everything it won't because you've opened and closed it straight away. You need to move the </div> closing tag to the end of the rest of your html.

econnelle
01-19-2009, 09:37 PM
Gotcha.

Ok fixed all the rest of the problems.

Now I've put in a body area and made it part of the template. The template part is working fine.

However and I did this the other night so its maddening as to why I cannot do it now but I can't get the text to indent.

I want to pad the interior of the box and no matter what the text goes to the edges of the div box. I'm getting the text layout setup in the template the way I want so when I dump in text it autoformats.

I am so close...or at least getting closer.

Since I have a template now and that template has a body area where I can drop in text for the single pane area's and I can drop in a tabbed spry bar for the multiple pane area's I've run into another question.

The template does not have a Spry tab bar. Only 2 of the pages will have them but they will both contain a multiple of tabs and that number will grow. Most likely a 3rd page will also get a set of tabs.

So how do I do a style that reaches across all the pages for a Spry tab when not all the pages have the Spry Tab bar?

Thanks

Ricky55
01-19-2009, 10:42 PM
not sure exactly what you mean, you indent things with padding, have a look at this very simple example and see of you can work it out.


<!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>Untitled Document</title>
<style type="text/css">
#wrap {
width: 300px;
height: 300px;
margin: 0 auto;
background: silver;
}

p {
margin: 0;
padding: 30px 15px 15px 15px;
}
</style>


</head>

<body>
<div id="wrap">
<p>By default, iTunes automatically syncs all songs and videos in your iTunes library to
iPod touch. If you have more content in your library than will fit on iPod touch, iTunes
alerts you that it can’t sync your content. You’ll need to use iTunes to select some of
your songs, videos, and other content to sync. The following section tells you how. </p>
</div>
</body>
</html>

econnelle
01-20-2009, 02:14 AM
I tried that code and it worked great.

However when I put that same code into my page instead of padding the text inward, it made the box bigger by the amount of pixels in the padding.

That is what was happening when I was doing it earlier, instead of bringing the text in, it made the box bigger. I want to bring the text inward.

domedia
01-20-2009, 02:51 AM
The box model that is used on the web adds padding to the width of the box. Decrease the width accordingly.

Ricky55
01-21-2009, 07:19 PM
If you add the padding to the element inside the the Div rather than the Div its self as per my example the width of the Div doesn't need to be changed.

Preview that example in a browser and you can see that the Div remains 300px square.

If we did

#wrap {
width: 300px;
height: 300px;
margin: 0 auto;
padding: 30px 15px 15px 15px;
background: silver;
}

Then the Div would be 330px wide