PDA

View Full Version : Div Formating Pushes Layout Line Break Plus


BrackAttack
06-01-2009, 07:40 AM
I am just starting out. I have a simple dreamweaver webpage imported from photoshop slices that all lives in one centered table.

Below my header I have several sliced images making up the body of the page. The center slice is an image that I want to keep. The surrounding slices are blank image files that I want to delete and replace each with a div. So, I delete each image slice and create a div that is the exact same size in its place, creating a css style sheet for each new div box. When I preview the page it looks exactly as it should. But! As soon as I apply any formatting or type any text into my new Div boxes (even one word of text, padding, ect) - then when I preview again, all the page layout formatting is pushed all over the place. There appears to be a line break around the div. The new text content will push the div's right side out breaking the box size perimeters that I set.

I should note that I am not creating one large rectangular div as the main body of my page, rather it is several different divs puzzled edge to edge together to make up the main body of my page (some spots are images, some are div boxes). Is this an incorrect strategy?

I've searched help forums...people who seem to have similar problems fix it with margin-left , margin auto and margin:0 and other such css coding...but I've tried all these fixes with no effect.

Am I missing a simple step? Am I wrong to think I can format with div? because I can't get my divs to hold any format.

HELP! Thank you.

edbr
06-01-2009, 07:47 AM
code or url would help
suspect the problem begins here
I should note that I am not creating one large rectangular div as the main body of my page, but we will need to look at it

BrackAttack
06-01-2009, 10:58 PM
Thank you. Here is a link to my page right now. As you will notice, the bottom image is pushed apart because it is split between different div boxes. Also, for some reason, when I preview from dreamweaver the other div boxes have a white background color, but loaded on my server they are gray...and the font is gray also. Very strange.

link removed

Thank you.

(p.s.: From above, you imply that it should be one large div box for the main content. ...if so, then should I create div boxes within that main box? hmmm, I'm still struggling to get my mind around how to approach layout design with css. I'll wait to hear any responses. Thank you!)

BrackAttack
06-02-2009, 12:36 AM
Here is the correct link. sorry.

Link Removed

coloeagle
06-02-2009, 01:10 AM
First item to correct. You have your css sheets written as html pages.

As is now the only css style rules you have are those that are embedded.

edbr
06-02-2009, 01:21 AM
ok , quite a lot really.
no doctype for 1.
2
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> not reaaly correct.
you are using styles on the page and 3 style sheets. although using a linked or imported style sheey is best it sometimes pays to keep all your styles on page untill you get your layout right , then move them to a style sheet. Just personal preference but it helps .
i ll have a look at this laterand see how i can best help

BrackAttack
06-02-2009, 02:07 AM
First item to correct. You have your css sheets written as html pages.

As is now the only css style rules you have are those that are embedded.

Yes, I did not realize that my css style sheets were not in the correct place on the server, thank you. I updated them. (...that solves the missing background issue; now I can focus back on the formatting div placement.)

Thank you!

coloeagle
06-02-2009, 02:52 AM
Give this a try. Your page done properly without tables. You may need to change the path to the images in the css.

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Destroy Before Posting</title>
<style type="text/css">
/*<![CDATA[*/
* {margin:0; padding:0;}
body {
background:#494E48;
}
p {
margin:10px;
}
#wrapper {
background:#fff;
width:945px;
margin:0 auto;
border-right:5px solid;
}
#head {
width:100%;
height:475px;
background:#fff url("NormallyThisWeird_02.jpg") no-repeat;
}
#coming-soon {
float:right;
width:398px;
height:387px;
background:#494e48 url("NormallyThisWeird_05.gif") no-repeat;
}
#leftpost {
height:162px;
width:398px;
margin-top:225px;
margin-right:2px;
background:#fff url("NormallyThisWeird_06.gif") no-repeat;
}
#leftpost p {
margin-left:80px;
}
#content {
margin:0 400px 10px 10px;
}
#footer {
clear:both;
width:945px;
height:74px;
background:#494e48 url("NormallyThisWeird_09.gif") no-repeat;
}
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div id="head">
</div>
<div id="coming-soon">
<div id="leftpost">
<p>News and upcoming events can go in this text box.</p>
<p>In non dui at mi pretium dictum. In placerat, elit eu convallis fermentum, libero justo elementum metus, sit amet facilisis risus ipsum et turpis. Mauris blandit neque at nisl pellentesque pellentesque volutpat nibh volutpat. Nunc nec erat ut lorem tristique adipiscing sed venenatis lacus. Nulla blandit, ligula sit amet dapibus placerat, leo mi consectetur diam, vitae sollicitudin leo erat quis sapien. Vestibulum eu posuere nulla. Suspendisse lectus ligula, pulvinar quis adipiscing et, bibendum eu sem. Nam tincidunt facilisis nibh nec condimentum. Donec at sapien neque, sit amet lobortis enim. In hac habitasse platea dictumst.</p>
</div>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eros tortor, tempus vel porta id, sollicitudin sit amet arcu. In hendrerit felis sed mi vulputate pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vehicula felis vel nunc iaculis at viverra dolor interdum. Donec dictum dolor quis est rutrum eu aliquam tellus porta. Donec id mauris lacus, eget tempus nulla. Sed malesuada posuere est non tristique. Sed urna diam, varius ac adipiscing iaculis, molestie eget lacus. Fusce cursus sagittis pretium. Cras non lectus a eros rutrum imperdiet. Ut dictum erat at nulla viverra vitae mattis nisi vulputate.
</p>
<p>Vestibulum nec tempus tellus. Ut nec tincidunt magna. Nullam aliquet viverra justo sit amet luctus. Vestibulum erat elit, ullamcorper lobortis venenatis ut, elementum et magna. Nam vehicula tristique tincidunt. Quisque in ligula nec nisl porttitor consectetur ac vel lorem. Integer varius libero sed sapien malesuada elementum. Sed quis metus ut turpis tempus placerat id imperdiet augue. Integer in porttitor tellus. Donec interdum, ligula in ornare ultrices, diam nisi pulvinar massa, vitae sodales ipsum eros id dui. Praesent dapibus venenatis lectus, quis rhoncus mauris luctus non. Sed id nisi dolor. Vestibulum ante est, dapibus quis dapibus sit amet, molestie in felis. Nunc euismod hendrerit dapibus. Sed vel arcu neque, eu faucibus urna. Vestibulum pellentesque vehicula tellus eu tempus. Morbi justo arcu, consequat sed egestas nec, sollicitudin ut eros. Suspendisse congue nibh et ligula aliquam a sodales urna iaculis.</p>
<p>In et metus magna, tempus varius erat. Proin imperdiet adipiscing enim, vel tristique tellus egestas ut. Vestibulum facilisis, nulla vel rhoncus feugiat, nisi est vestibulum lorem, congue scelerisque dolor nulla at mauris. Duis pulvinar, metus eu molestie pellentesque, ipsum purus consectetur sem, rutrum aliquam elit mi feugiat enim. In aliquam justo in felis rutrum porttitor a ut sapien. Etiam sed nunc est. Curabitur tempus leo eu neque porta ac aliquet turpis pellentesque. Sed cursus, tellus nec suscipit ornare, mi purus dignissim nisl, in vehicula nunc lorem vitae augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

BrackAttack
06-02-2009, 03:46 AM
Okay cool, I'll have to study this further, but I like what I am seeing here. What if I did this instead...

Link Removed

and added a floating image above the text. But why does it float over to the far right out of the layout? In dreamweaver I am able to drag it to the page area I want it. Also, i messed up the first sentence some how and not sure why?

(it looks like firefox is not representing the correct location of the floating image, safari has it perfect. Is this not a good method to use then?)

thank you.

coloeagle
06-02-2009, 05:37 AM
You've got too many styles this way. You don't need to have the locator id. or add the image in the html. Change the background image of the coming-soon id to the new image. You can then remove the leftpost id and add the p rules to the coming-soon id.

BrackAttack
06-02-2009, 05:56 AM
Link Removed

(shoot, should I be saving the code each time for thread followers?)

...so I did what you suggested, much nicer coding I see. However, the image still appears off the page in firefox. Safari looks good, and I can't test IE tonight. Do you have any idea why it is not placing correctly in firefox?

Also, I removed the leftpost...but I attempted to put back some text under the sign portion of the image, however my new style killed my format again. Your sample coding is helping me leaps and bounds. Can you show me an example again of text under the sign area?

coloeagle
06-02-2009, 06:01 AM
Remove the following from the coming-soon id;
position: absolute;
left: 866px;
top: 440px;
z-index:2

You have the text outside the coming-soon div and inside the content div.

coloeagle
06-02-2009, 06:10 AM
To position your text you will need to add some padding rules to the coming-soon id..
Start with this and adjust as needed.
padding:250px 0 0 75px;

EDIT
Thought I better explain the above.
this is the short hand way of setting the padding rules for the four sides of the div. Starts at the top and moves in a clockwise direction.
top - 250px
right - 0
bottom - 0
left - 75px

BrackAttack
06-02-2009, 06:19 AM
Okay...it is coming together. At first the margin tags was applying to the image also, but then I made a wrapper style around the text and formatted it where I needed it.

Thank you. I'm going to see how far I can push forward now. ...I know just enough to get into more trouble.

coloeagle
06-02-2009, 06:31 AM
Okay...it is coming together. At first the margin tags was applying to the image also, but then I made a wrapper style around the text and formatted it where I needed it.

Thank you. I'm going to see how far I can push forward now. ...I know just enough to get into more trouble.
:-D
Keep one rule in mind.
Sometimes it's not what you add to solve a problem but what you take out.

BrackAttack
06-29-2009, 04:49 PM
Hello Admin, the test links I provided in the above posts are all showing up in web searches for my site. Can they be changed or hidden or removed? Thank you.

Corrosive
06-29-2009, 05:30 PM
I'll have a look for you.

Corrosive
06-29-2009, 05:31 PM
Actually. You can edit your own posts can't you??

kremo5le
06-29-2009, 10:09 PM
I am just starting out. I have a simple dreamweaver webpage imported from photoshop slices that all lives in one centered table.

Below my header I have several sliced images making up the body of the page. The center slice is an image that I want to keep. The surrounding slices are blank image files that I want to delete and replace each with a div. So, I delete each image slice and create a div that is the exact same size in its place, creating a css style sheet for each new div box. When I preview the page it looks exactly as it should. But! As soon as I apply any formatting or type any text into my new Div boxes (even one word of text, padding, ect) - then when I preview again, all the page layout formatting is pushed all over the place. There appears to be a line break around the div. The new text content will push the div's right side out breaking the box size perimeters that I set.

I should note that I am not creating one large rectangular div as the main body of my page, rather it is several different divs puzzled edge to edge together to make up the main body of my page (some spots are images, some are div boxes). Is this an incorrect strategy?

I've searched help forums...people who seem to have similar problems fix it with margin-left , margin auto and margin:0 and other such css coding...but I've tried all these fixes with no effect.

Am I missing a simple step? Am I wrong to think I can format with div? because I can't get my divs to hold any format.

HELP! Thank you.

I would always start with a validated code. Depending on the HTML version you are working on, you should make sure the page is validated and has no errors. After that, you should be able to find how to fix almost anything really quick.

k.

BrackAttack
07-02-2009, 05:29 PM
Actually. You can edit your own posts can't you??

Hi. Thanks for your help. ...No, it does not appear I am able to edit any of the posts. ?

<edit> Yes, it allows me to edit the most recent post only. I'm not sure how I can edit my older posts to change the links to hide the url.

Corrosive
07-02-2009, 05:34 PM
Hi. Thanks for your help. ...No, it does not appear I am able to edit any of the posts. ?

<edit> Yes, it allows me to edit the most recent post only. I'm not sure how I can edit my older posts to change the links to hide the url.

OK, no problem, I'll do it.

Corrosive
07-02-2009, 05:36 PM
Watch what you post in the future :wink: