Help - Search - Members - Calendar
Full Version: Help with homepage formatting
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
luke0707
The homepage for my website is having a simple problem, but I'm not sure how to fix it. The intro banner on the page will not adjust when you make the web browser smaller (horizontally). Every other part of the homepage will do so.

Here is a link to the website: www.thegofund.com

I will include the html just for the banner section below. Any help is appreciated.

HTML:

<body>
<div align="center" id="container" style="width:1274px">
<div id="menu" style="background-color:#E24725;height:450px;width:300px;margin-left:300px;float:left;">
<br><br><br><br>
<p style="font-size:25px;letter-spacing:1px;font-family:trebuchet ms;margin-left:30px;margin-right:50px;text-align:left;color:#ffffff">Donate and send missionaries by eliminating student loan debt</p>
<p style="font-size:16px;letter-spacing:1px;font-family:trebuchet ms;margin-left:30px;margin-right:50px;text-align:left;color:#ffffff">For $20 a month you can send families like the Rimestads for one week of every year</p>
<br><br>
<a href="http://www.thegofund.com/donate">
<img src="http://thegofund.com/wp-content/uploads/2014/02/button4.png"
onmouseover="this.src='http://thegofund.com/wp-content/uploads/2014/02/button5.png'"
onmouseout="this.src='http://thegofund.com/wp-content/uploads/2014/02/button4.png'"; alt="Donate" vspace="40px" hspace="50px" align="middle" margin-left="100px"></a></div>
<div id="content" style="background-color:clear;height:450px;width:674px;float:left;">
<a href="http://www.thegofund.com/profile/rimestads"><img src="http://thegofund.com/wp-content/uploads/2014/02/rimestads2.jpg" alt="Rimestad Family" width="674" height="450"></a></div>
<div style="clear:both"></div>
</div>
</body>

Frederiek
Get rid of the margin-left: 300px; set inline on the DIV with id="main".

Change the current width: 1274px; also set inline on the DIV with id="container" to the real width of 974px of its content. And add margin: 0 auto; to the style.
luke0707
QUOTE(Frederiek @ Feb 16 2014, 05:09 AM) *

Get rid of the margin-left: 300px; set inline on the DIV with id="main".

Change the current width: 1274px; also set inline on the DIV with id="container" to the real width of 974px of its content. And add margin: 0 auto; to the style.

Thank you Frederiek! The content adjust to the middle perfectly like you said, but there is one more thing. All other page content will shrink horizontally as the page gets smaller, but this portion just aligns with the left margin and remains the same size. Is there a way to fix this?

I included the current, fixed html with changes highlighted per your advice.

NEW HTML:

<body>
<div id="container" align="center" style="width:974px;margin:0 auto;">
<div id="main" style="background-color:#E24725;height:450px;width:300px;float:left;">
<br><br>
<p style="font-size:31px;letter-spacing:1px;font-family:trebuchet ms;margin-left:30px;margin-right:30px;text-align:left;color:#ffffff">Donate and support missionaries by erasing student loan debt</p>
<br><br>
<p style="font-size:17px;font-family:trebuchet ms;margin-left:30px;margin-right:30px;text-align:left;color:#ffffff">For $20 a month you can erase one week of student loans for families like the Rimestads</p>
<br>
<p><a href="http://www.thegofund.com/donate">
<img src="http://thegofund.com/wp-content/uploads/2014/02/button4.png"
onmouseover="this.src='http://thegofund.com/wp-content/uploads/2014/02/button9.png'"
onmouseout="this.src='http://thegofund.com/wp-content/uploads/2014/02/button4.png'"; alt="Donate" vspace="40px" hspace="50px" align="middle" margin-left="100px"></a></p></div>
<div id="main" style="background-color:clear;height:450px;width:674px;float:left;">
<a href="http://www.thegofund.com/profile/rimestads"><img src="http://thegofund.com/wp-content/uploads/2014/02/rimestads2.jpg" alt="Rimestad Family" width="674" height="450"></a></div>
<div style="clear:both"></div>
</div>
</body>
Frederiek
You're already using media queries in different css files. So, you could add the appropriate sizes for these DIVs for each media size.

BTW, an ID has to be unique on a page, so you can't have id="main" twice.
And there is no clear value for background-color. By default the value is "transparent" (see http://www.w3.org/TR/CSS21/colors.html#background-properties ).
luke0707
QUOTE(Frederiek @ Feb 17 2014, 02:49 AM) *

You're already using media queries in different css files. So, you could add the appropriate sizes for these DIVs for each media size.

BTW, an ID has to be unique on a page, so you can't have id="main" twice.
And there is no clear value for background-color. By default the value is "transparent" (see http://www.w3.org/TR/CSS21/colors.html#background-properties ).



Thanks Frederiek, your help has been awesome so far. I adjusted the IDs and deleted the background-color. As you can tell I'm a bit of a novice when it comes to html. I don't mean to press my luck, but if you could point out exaclty how to "add the appropriate sizes" for each of these DIVs that would be helpful. I included the CSS stylesheet below. I promise to leave you alone after this biggrin.gif

CSS STYLESHEET:

/*
Theme Name: Bhinneka
Description: Style for visual editor.
*/

html .mceContentBody { max-width: 584px; }
* { color: inherit; font: 16px "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; font-style: inherit; font-weight: inherit; line-height: 1.231; }
body { color: #444; font-weight: 300; }

/* Headings */
h1, h2, h3, h4, h5, h6 { clear: both; }
h1, h2 { color: #000; font-size: 15px; font-weight: bold; margin: 0 0 .8125em; }
h3 { font-size: 10px; letter-spacing: 0.1em; line-height: 2.6em; text-transform: uppercase; }
h4, h5, h6 { font-size: 14px; margin: 0; }
hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.625em; }

/* Text elements */
p, ul, ol, dl { font-weight: 300; }
p { margin-bottom: 1.625em; }
ul, ol { margin: 0 0 1.625em 2.5em; padding: 0; }
ul { list-style: square; }
ol { list-style-type: decimal; }
ol ol { list-style: upper-alpha; }
ol ol ol { list-style: lower-roman; }
ol ol ol ol { list-style: lower-alpha; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
dl { margin: 0 1.625em; }
dt { font-size: 15px; font-weight: bold; }
dd { margin: 0 0 1.625em; }
strong { font-weight: bold; }
cite, em, i { font-style: italic; }
cite { border: none; }
big { font-size: 131.25%; }
.mceContentBody blockquote, .mceContentBody blockquote p { font-family: Georgia, "Bitstream Charter", serif !important; font-style: italic !important; font-weight: normal; margin: 0 3em; }
.mceContentBody blockquote em, .mceContentBody blockquote i, .mceContentBody blockquote cite { font-style: normal; }
.mceContentBody blockquote cite { color: #666; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: 0.05em; text-transform: uppercase; }
pre { background: #f4f4f4; font: 13px "Courier 10 Pitch", Courier, monospace; line-height: 1.5; margin-bottom: 1.625em; padding: 0.75em 1.625em; }
code, kbd, code var { font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; }
abbr, acronym, dfn { border-bottom: 1px dotted #666; cursor: help; }
address { display: block; margin: 0 0 1.625em; }
del { color: #333; }
ins { background: #fff9c0; border: none; color: #333; text-decoration: none; }
sup, sub { font-size: 10px; height: 0; line-height: 1; position: relative; vertical-align: baseline; }
sup { bottom: 1ex; }
sub { top: .5ex; }
input[type=text], textarea { background: #fafafa; -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); border: 1px solid #ddd; color: #888; }
input[type=text]:focus, textarea:focus { color: #333; }
textarea { padding-left: 3px; width: 98%; }
input[type=text] { padding: 3px; }

/* Links */
a, a em, a strong { color: #1b8be0; text-decoration: none; }
a:focus, a:active, a:hover { text-decoration: underline; }

/* Alignment */
.alignleft { display: inline; float: left; margin-right: 1.625em; }
.alignright { display: inline; float: right; margin-left: 1.625em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }

/* Tables */
table { border: none !important; border-bottom: 1px solid #ddd !important; border-collapse: collapse; border-spacing: 0; text-align: left; margin: 0 0 1.625em; width: 100%; }
tr th { border: none !important; color: #666; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; line-height: 2.6em; text-transform: uppercase; }
td { border: none !important; border-top: 1px solid #ddd !important; padding: 6px 10px 6px 0; }
Frederiek
Like I said, you have multiple @media queries in different CSS files. Your best bet seems to be to add the selectors and their sizes in style-clean.css, as there are 6 @media queries in it (on line 108, 111, 114, 179, 182 and 190). You'll need to fiddle with the sizes and add them at each of these @media queries.

You'll find interesting articles on @media queries at http://www.d.umn.edu/itss/training/online/...ign/css.html#mq .
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.