PDA

View Full Version : Formatting question


pullmyfoot
03-26-2009, 02:14 PM
Hello. New to Dreamweaver (3 days) :wink: I use Dreamweaver CS4

Ok I have a site which I have used a template I modified.

Here it is, if you are interested

http://razorbytescomputers.com/index.html

Ok so my problem is, I want to get my pictures centralized but by text aligned to the left. Every time I try to align my text to the left, It aligned my whole site to the left, resulting in the pictures changing their positions. Is there a way I can get specific blocks of text or specific pictures to align to the center while others align left?

Or better yet, is there a way I can freely move my pictures around?

By the way, all the links work but there is no text in them at the moment. For example, I want this page to have all the text aligned to the left but not my logo and side bar links. However the text in the main page should be centralized, which I guess makes things all the more complicated.

http://www.razorbytescomputers.com/customrig/customrig.html

Another thing is, the green bar on the left. I would Like it so that it extends to the length of the page, which obviously will be different for every page. However, Every time I extend its length Dreamweaver makes it so that every page has the same length. How do I get around this? BTW I have set it so that the green bar on the left is an editable region in my template.

Lastly, why is it that when I save a page, it does not save the CSS file? When I exit Dreamweaver then the program asks me whether I want to save my CSS file. When I try to upload my pages without first exitting Dreamweaver to let the CSS file save itself then restarting it, some of the changes I made refuse to show themselves on my site.


Thank you :)
Sam

pullmyfoot
03-27-2009, 05:10 AM
anybody? Would pasting the code here help?

edbr
03-27-2009, 05:16 AM
use different styles (classes) for the different elements
as for the side bar extending use an image as a background in the container div, position it the same width as the side bar and use background repeat

pullmyfoot
03-27-2009, 12:16 PM
use different styles (classes) for the different elements
as for the side bar extending use an image as a background in the container div, position it the same width as the side bar and use background repeat


Hmm, thats an idea. Thanks, though IMO doesnt it sound a little crude? When someone drags their mouse over it it will turn blue.

As for the classes, what do you mean by that? I'm gonna read up some of the tutorials on this site (I read up elsewhere) and see if I can find something. Care to point me in the right direction?

edbr
03-28-2009, 04:29 AM
what will turn blue? the mouse? dont understand what you mean.
re classes have a look at the page in the different links in my signature, it uses classes to style different looking links , its the same principle

pullmyfoot
03-28-2009, 05:55 AM
what will turn blue? the mouse? dont understand what you mean.
re classes have a look at the page in the different links in my signature, it uses classes to style different looking links , its the same principle


As in. You know when you drag your mouse over a picture it highlights it and it turns blue. Will it register as a picture on my site?

Oh one more question. I made a spry menu on the left. However I cannot seem to get that funny white box to the left disappear. Anyonw know whats wrong?

http://razorbytescomputers.com/

Thank you

edbr
03-28-2009, 07:51 AM
no it is a background image and you can get rid of that blue BTW

pullmyfoot
03-28-2009, 03:36 PM
no it is a background image and you can get rid of that blue BTW


Hmm. If I make it my background image, it does not seem to follow the length I set it to. Like a made one that was 1430px tall but it only displays something like 400px. Well, basically the length of my menu bar. Why is this?

Thank you for the help.

pullmyfoot
03-28-2009, 04:34 PM
Also this does not address my problem of having a different length for every page. Is there a simple way to tie the length of the sidebar to the length of the main content?

edbr
03-30-2009, 12:28 AM
repeat the background image in the wrapper, if it sits in the same position as the sidebar as i said

edbr
03-30-2009, 12:32 AM
ill try again if your side bar is ex. 200px, place an image in the wrapper size 200px x 1px use background repeat -y , it will reach to the bottom of the wrapper, assuming the image is the same background as the side bar, it will be seamless and in effect fill the page to the bottom of the content

pullmyfoot
03-30-2009, 11:34 AM
but thats what I did. It only reaches to the end of the menu bar. What I did is manually set it to be 1300px long, however then all the pages are the same

edbr
03-31-2009, 12:30 AM
then you are not doing it as i suggested. read it again. there is no need to make anything 1300px

pullmyfoot
03-31-2009, 11:23 AM
then you are not doing it as i suggested. read it again. there is no need to make anything 1300px


thanks. Mind me asking what a wrapper is?

Corrosive
03-31-2009, 11:31 AM
thanks. Mind me asking what a wrapper is?

Try here mate...

http://www.dreamweaverclub.com/css-center-content.php

Explains it all.

pullmyfoot
04-02-2009, 04:08 AM
Try here mate...

http://www.dreamweaverclub.com/css-center-content.php

Explains it all.

Hmm. Thanks. Where do I put the wrapper quotes? The sidebar or the whole thing. Because it keeps expanding my elements horizontally instead on vertically.

pullmyfoot
04-02-2009, 04:08 AM
Try here mate...

http://www.dreamweaverclub.com/css-center-content.php

Explains it all.

Hmm. Thanks. Where do I put the wrapper quotes? The sidebar or the whole thing. Because it keeps expanding my elements horizontally instead on vertically.

Corrosive
04-02-2009, 07:29 AM
Hmm. Thanks. Where do I put the wrapper quotes? The sidebar or the whole thing. Because it keeps expanding my elements horizontally instead on vertically.

The wrapper goes around all of your visible page code. I.e. everything inside the body tags...

<body>
<div id="wrapper">Your entire site goes here</div>
</body>

Don't wrap the head tags though :wink:

pullmyfoot
04-03-2009, 04:31 PM
The wrapper goes around all of your visible page code. I.e. everything inside the body tags...

<body>
<div id="wrapper">Your entire site goes here</div>
</body>

Don't wrap the head tags though :wink:

Thank you :)

I did a few changes to my page layout.

oh one more thing. Do you have any idea why my menu bar appears as a white bar in IE? It works fine for Firefox though.

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/************************************************** *****************************

LAYOUT INFORMATION: describes box model, positioning, z-order

************************************************** *****************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
margin-right: 90px;
margin-left: 90px;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
width: 120px;
height: 20px;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
position: absolute;
left: -1000em;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 175px;
background-image: url(../images/navigation%20bar.jpg);
background-repeat: repeat-x;
height: 35px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
height: 50px;
margin-top: -5%;
margin-right: 0;
margin-bottom: 0;
margin-left: 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

/************************************************** *****************************

DESIGN INFORMATION: describes color scheme, borders, fonts

************************************************** *****************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-size: small;
border-top-color: #CCC;
border-bottom-color: #CCC;
text-align: center;
border-right-color: #CCC;
border-left-color: #CCC;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
color: #FFF;
}

/************************************************** *****************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

************************************************** *****************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

/************************************************** *****************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

************************************************** *****************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}

Corrosive
04-03-2009, 04:54 PM
No idea. There isn't anyone who comes on here with a Spry question who isn't having a ***t time with it. I also think the results I have seen where Spry is used are poor anyway.

There's nothing in your menu that you can't achieve with simple CSS. Look at show/hide layers behaviours in Dreamweaver if you are new to this. It won't turn white in IE I can assure you :wink:

pullmyfoot
04-05-2009, 02:03 PM
Hmm. Ok thanks