PDA

View Full Version : DW Template: fixed column & AP Div for content - sizing issues


Dorhal
11-14-2009, 06:56 PM
HI all,
Dorothy here in Hawaii. I'm on my second website, using DW CS4 on Mac, and using their HTML templates to give me a spring board and to learn more about CSS.

Question:
Can one put text over an inserted .jpg image in a column and NOT have to use an AP Div over it to contain the content? (not sure this question makes sense)

I'm currently working on a site using the fixed three column, header/footer template. I have broken out the parts of a .jpg into the nav bars, center area, etc. and inserted into the columns, header and footer.

Now I want to place the content/text in the center area, which I was able to do using AP Div containers. Only thing...when I view in a browser, the main columns are fluid (I think or are they fixed), but the AP Div content is not (it moves to stay centered). I can not figure out how to remedy this (I'm a beginner!).

I tried a version where I just used a color for the background instead of the .jpg but when I enter text, it goes flush with the left margin of the center column it is in, and no attempt to add padding will create some space between the text and the column left edge.

Here is the website with the .jpg as the center column background. Go to one of the text pages like Bio or Statement to see what I'm talking about. If you resize your browser view you'll see what I mean. http://www.bruceczopekfineart.com

I also notice some issues in IE but right now I want to get this part sorted out.

Thank you sooo much in advance for your help! :-D

DWcourse
11-14-2009, 07:01 PM
You could have used the complete image as the CSS background-image for your container div. Any content you place inside a div with a background-image will appear on top of the image.

domedia
11-14-2009, 08:22 PM
Question:
Can one put text over an inserted .jpg image in a fixed column and NOT have to use an AP Div over it to contain the content? (not sure this question makes sense)
Nom, that makes perfect sense :)
In this case you want to use the image as a background, so instead of adding is with the <img> tag, you want to add the image as a background in CSS.
A general rule of thumb is that if the image is part ofd the content you use the <img> tag, but if it's a background you add it with CSS.

Now I want to place the content/text in the center column, which I was able to do using AP Div container. Only thing...when I view in a browser, the main columns are fluid (I think or are they fixed), but the AP Div content is not (it moves to stay centered). I can not figure out how to remedy this (I'm a beginner!).
Absolute positioning should not be used for creating a site layout. In general you want o use an approach where you add DIV's and float them. Maybe opening up one of the premade layouts in DW will get you on the right track?

domedia
11-14-2009, 08:24 PM
Merged threads, please don't cross post.

Dorhal
11-14-2009, 09:01 PM
Thanks for your responses!

Trying domedia's suggestions first round:
I have added the center column image in the CSS area as background-image. Finally got it to show up by adding width parameters to the container in CSS. But, it is all wonky. (dark line down the center of the container, background image appears to go beyond the sides of the container, and pushes the footer down with a white gap there now.

I suspect something is off in margins and padding altogether but running out of options to get it to work.

Again, thank you with your help on this.

Oh, I'm already using a DW template for this...is that what you mean by try using their page layouts?

---> Sorry! Posted on the Newbie thread and then over excitedly posted on the regular thread thinking no one would see my question on that thread. I promise I will not do that again! :oops:

DWcourse
11-15-2009, 03:47 AM
Rather than use a background-image for the center "column" (#mainContent) use a background-image (with repeat set to no-repeat) for #container which looks something like the (reduced size) attachment. Remember only as much of the background-image as necessary (determined by the amount of content) will be shown and if you page is longer you'll have some extra space below the background image so you'd probably want to set your background-color to black:

.thrColFixHdr #container {
background: #000 url(link-to-image.jpg) no-repeat;
width: 1050px;
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. */
}

And you should read all those comments in the style sheet. Adobe put them there for a reason!

Dorhal
11-15-2009, 07:37 AM
Thanks DWCourse...

I should have been more clear...I'm only needing to work this out on the pages with actual text content as apposed to the home page you sited, or the gallery pages, which all work fine:
bio
statement
contact
links

I need to be able to show the text in the center area with a grey 'textured' background -- the current jpg.

My remaining issue seems to be a white gap at the top of the #mainContent, even though I have the correct color of grey set as a background; and the text will not show padding on the left or the right within the column.

<I'm working on this on a test page and not what you see currently live on the site>

Can't seem to find any padding or margin adjustments that will do away with either of these remaining issues.

I have been reading the notes within the code from Adobe...it has helped greatly, but it does not all make sense yet.