Skip navigation

Dreamweaver

KaylaMW92 Calculating status...

Currently Being Moderated

Issues with the width of my page!

Apr 27, 2012 7:36 AM

Hi guys, first off I apologize if this wasn't posted in the correct forums.

Well, I am designing my first mobile website. I am trying to make the width adjust to the individual screen size 100%. My main background is just fine obviously, however both my header and content DIV's will not stretch out, according to the Feature Phone preview (in the dropdown of Multiscreen preview) and in Device Central. However, the strange thing is that if I view it in Multiscreen Preview or in Firefox, it's just fine. I also don't see a problem within my code, where I have set the width of both to 100%. I am not sure what is going on with this.

	#header {
	background:#CCC;
	text-align:center;
	width:100%;
		}

		#content {
	background-image:url(images/bg.jpg);
	background-repeat:repeat-x;
	background-color:#6392C0;
	width:100%;
	text-align:center;
		}

This it my HTML code for these DIV's.

Here is the image viewed in the Feature Phone. It also looks the same in Device Central.

And here it is in Multiscreen Preview. The width is fixed just fine in both this preview and in Firefox.

Any ideas? Thanks in advance!

671 Views 12 Replies Latest reply: KaylaMW92, Apr 27, 2012 10:10 AM

Replies

Currently Being Moderated

1. Rik Ramsay,

Apr 27, 2012 8:27 AM in reply to KaylaMW92

Report

Any ideas?

Not really.

You would need to upload the page and give us the link (preferred) or post the entire code of the page for us to be of much assistance.

|
Mark as:
Currently Being Moderated

2. KaylaMW92,

Apr 27, 2012 9:08 AM in reply to Rik Ramsay

Report

How do I post the full HTML on here? It doesn't work right.

|
Mark as:
Currently Being Moderated

3. Rik Ramsay,

Apr 27, 2012 9:12 AM in reply to KaylaMW92

Report

Go to "Code View" in Dreamweaver, select all from that window, copy and then paste in your post. If your CSS is on a separate file, you will also need to copy and paste the full CSS code.

|
Mark as:
Currently Being Moderated

4. KaylaMW92,

Apr 27, 2012 9:20 AM in reply to Rik Ramsay

Report

When I copy it into the post, it does something weird. I will see if it will work this time!

Header



|
Mark as:
Currently Being Moderated

5. KaylaMW92,

Apr 27, 2012 9:20 AM in reply to KaylaMW92

Report

That's what it keeps doing. O.o. Sorry, I am kind of new to this.

|
Mark as:
Currently Being Moderated

6. Rik Ramsay,

Apr 27, 2012 9:25 AM in reply to KaylaMW92

Report

You need to post it in the forum, not by email.

You can also try posting it using the Syntax highlight feature under Advanced editor in the forum. (top right corner on reply box)
Then, use the double arrow > Syntax highlighting > Plain.

|
Mark as:

Currently Being Moderated

7. KaylaMW92,

Apr 27, 2012 9:33 AM in reply to Rik Ramsay

Report

<!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" />
<meta name="viewport" content="width=device-width" />
<title>Temperature</title>
<!-- Mobile -->
<link href="css/mtemp.css" rel="stylesheet" type="text/css" media="only screen and (max-width:480px)" />
</head>


<style type="text/css">

    * {
    margin:0;
    padding:0;
    font-family: Helvetica, sans-serif;
    -webkit-text-size-adjust:none;
    }

        #header {
    background:#CCC;
    text-align:center;
    width:100%;
        }

        #content {
    background-image:url(images/bg.jpg);
    background-repeat:repeat-x;
    background-color:#6392C0;
    width:100%;
    text-align:center;
        }

        #content img {
            margin:30px;
        }

</style>

<body bgcolor="#6591C2">

<div id="header">
    <h2>Header</h2>
</div>

<div id="content">
    <p><img src="images/box.png" width="206" height="208" /></p>
</div>


</div>

</body>
</html>

|

Mark as:

Currently Being Moderated

8. KaylaMW92,

Apr 27, 2012 9:34 AM in reply to KaylaMW92

Report

There we go! The syntax thing. Thanks!

|
Mark as:
Currently Being Moderated

9. osgood_,

Apr 27, 2012 9:41 AM in reply to KaylaMW92

Report

You don't require the extra closing </div> below....other than that I can't see anything else wrong with the code.

</div> </body> </html>

Unless there is something else in this file which you are not showing us?

css/mtemp.css

|
Mark as:
Currently Being Moderated

10. Rik Ramsay,

Apr 27, 2012 9:50 AM in reply to KaylaMW92

Report

The problem is your image margin. Your total margin width plus image width exceeds the view width. Change your CSS to the below:
#content img {           margin:30px;
          margin:30px auto;/* 30px margin top/bottom, auto margin left/right*/
          display:block;         }

And also remove the additional closing </div> as OS has mentioned.

|
Mark as:
Currently Being Moderated

11. osgood_,

Apr 27, 2012 10:01 AM in reply to Rik Ramsay

Report

Good spot 266px as opposed to 240px.

I guess to preserve the 30px either side of the image IF its critical set the:

#content img {
max-width: 100%;
margin: 30px;
}

and delete the width and height. That will give you a scalable image, which may look better on mobile.

<p><img src="images/box.png"/></p>

|
Mark as:
Currently Being Moderated

12. KaylaMW92,

Apr 27, 2012 10:10 AM in reply to osgood_

Report

Oh, I see, it was the my margin. All I did was switch it to top, and it was just fine! I don't plan on having anything to the sides so I think that will do it. I also removed the extra </div>.

Thanks guys!

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points