PDA

View Full Version : CS4 image wrapping + spry menu help


SoldierJAW
12-21-2008, 06:58 PM
Hi,

I am VERY new to Dreamweaver CS4. I have attached my website in a zip folder (I do not have a website up yet).

I was wondering why my text will not wrap around the image.

In addition, why is it when the browser window is not the correct size (i.e. a smaller window) that my menu bar across the top looks all messed up (see image click (http://img408.imageshack.us/img408/7914/websitezx6.jpg) )?

If you could teach my how to do it for both questions I would appreciate it.

In addition, any comments on my index.html would be appreciated, as I am new at this (colours?).

Thanks again,
Justin

Ricky55
12-21-2008, 08:23 PM
to wrap text around an image you need to float the image to the left or to the right. See example code.

Your layout is broken because of the methods you've used, use a fixed width layout to prevent these kinds of issues.


<!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">

body {
margin: 0;
padding: 0;
}


img {
float: left;
padding-right: 2em;
}

p {
width: 600px;
font-size: .9em;
color: #666;

}


</style>

</head>

<body>
<img src="test.jpg" width="300" height="300" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a typ type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>

SoldierJAW
12-21-2008, 08:48 PM
Thank you for your reply.
You said I broke my layout. How did I do that?

Now with your code...what do I do with it? Paste it in where?
Sorry, I am learning this stuff.

Thanks

Cary
12-21-2008, 09:21 PM
Modify the the #container rule like so:

.oneColLiqCtrHdr #container {
width: 56em;
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
position: relative;
}

I changed the width to a fixed number, 56em in this case, just so you can see how to avoid the problem with menu. Change it to whatever you like, but a percentage won't work in this case. I used ems because the width of your menu is in ems.

I also made the position relative so the absolutely positioned "Your Indoor Air Quality Experts Since 1989" will stay where you put it.

The following new rule flows text around the image.

.oneColLiqCtrHdr #mainContent h2 img {
float: left; /* image floats left, text flows down the right */
margin: 0 15px 6px 0; /* sample image margins of 15px to the right and 6px on the bottom */
}

SoldierJAW
12-21-2008, 11:09 PM
WOW!

Thank you so much! I can only hope to know as much as you do some day.

So if I add another image, as long as the picture is on the left the text will align with it? Alternatively, will I have to create another rule?

In addition, when I pre-view my website locally, my drop down menu is not so drop downish, but when I am in the live view it works fine. Is that just because it is not on the web yet?

See image 1 (Click (http://img124.imageshack.us/img124/8607/image1nf6.jpg)) and image 2 (click (http://img124.imageshack.us/img124/38/image2cr4.jpg))

And when I do publish, will all my viewers have to install that active X for it to work?
See image 3 (click (http://img361.imageshack.us/img361/168/image3rn1.jpg))


Thanks again,
Justin

Cary
12-21-2008, 11:31 PM
So if I add another image, as long as the picture is on the left the text will align with it? Alternatively, will I have to create another rule?

The rule I created only works for images within an h2 header within #mainContent, so you will probably need to create a new rule as Ricky suggested.

In addition, when I pre-view my website locally, my drop down menu is not so drop downish, but when I am in the live view it works fine. Is that just because it is not on the web yet?

Maybe, I couldn't reproduce this.

And when I do publish, will all my viewers have to install that active X for it to work?

I didn't have to do that so I can't say.

SoldierJAW
12-24-2008, 09:09 PM
Hey Cary (or anyone) can you help me again please?

I decided to remove the image that was around the text, and I added a header.

I was wondering if you could help me to fit my header across the top of the whole page, not just to the edges (notice the spaces between the edges of the page).

http://img401.imageshack.us/img401/3348/websitehelptw8.jpg


In addition, at the bottom of the page, in the footer, how do I make it so my copyright information goes right to the bottom of the page (see picture where the space is)?

Also, can I create that horizontal line so it is forced to always be at a set location, so when I add a second link menu bar above it I have no problems? A menu bar link at the bottom like this site (http://www.lennox.com/)

I attached my new website folder, thanks again!

Ricky55
12-25-2008, 12:24 AM
I hate to say this mate but this file is a bit of a mess, the CSS has that many comments you can't read it properly.

Who put all those in Cary? or was it a template?

If it was a template I would suggest building from scratch, when you're just learning CSS, the best way is to build bit by bit so you understand the structure of the document otherwise you'll just end up pulling your hair out.

I wouldn't use that Spry menu either ideally it would nice to just create a simple horizontal nav yourself using just a simple unordered list. I just think trying to work with a file like this you are making it harder than it needs to be.

SoldierJAW
12-25-2008, 01:25 PM
Hey,

It was a template; Cary only helped me with the text around the images.

Is there no way to fix what I want to be done then?

In addition, I would hate to restart since that took me a while...

Cary
12-28-2008, 04:25 AM
I was wondering if you could help me to fit my header across the top of the whole page, not just to the edges (notice the spaces between the edges of the page).

I haven't gotten into working with spry, so I'm not sure how to modify it styling without breaking it. So, basically, I don't know how you can do what you're asking. Your header image is already wider than the menu, so the gaps are unavoidable.

Also, while the menu is 55em wide, or something like that, making the page wrapper div 55em wide won't necessarily work if the main page containing div and the menu use different font sizes, in which case an em for one will not be equal to an em for the other.

You can try placing the menu in a containing div which has a background color matching the color of the menu. Then that div will make it look as though the menu is 100% wide even when it isn't.

In addition, at the bottom of the page, in the footer, how do I make it so my copyright information goes right to the bottom of the page (see picture where the space is)?

Use some styling like this:

.oneColLiqCtrHdr #footer h6 {
margin: 0;
}

Also, can I create that horizontal line so it is forced to always be at a set location, so when I add a second link menu bar above it I have no problems?

Not quite sure if this what you have in mind. Remove the horizontal rule and its absolutely positioned div. Instead, you can just use a top border on the #footer.

.oneColLiqCtrHdr #footer {
background:#FFF;
margin: 0 20px; /* side margins keep top border from extending all the way to the edges */
padding: 10px 0 5px; /* add a little space between the top border and the footer text, and the bottom of the page and the footer text. */
border-top: 1px solid #000;
}

Each of your pages have the following code in the body of the page. This needs to be moved up into the head of the page, just before the closing head tag. The SpryMenuBarHorizontal.css only needs to be linked once.

Having this in the right spot will also allow DW to create somewhat more accurate renderings of the pages.

<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
/* Give the menu bar a width and set the margins to "auto"
* so that the browser does the centering.
*/

ul.MenuBarHorizontal {
width: 55em;
margin: auto;
}
-->
</style>
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
/* Center the text within all menu item links.
*/

ul.MenuBarHorizontal a {
text-align: center;
}

/* Set the the alignment back to left for any
* menu item links that are in a sub menu.
*/

ul.MenuBarHorizontal ul a {
text-align: left;
}
-->
</style>