PDA

View Full Version : New and need Help with coding!!!!



hbvitor
Jan 12th, 2011, 01:08 AM
I have been trying to correct this error on my website for months. So if ANYONE can help I'd appreciate it so much! I am using a Prestashop Template for my website. The template that I chose has a backround image and then whenever you scroll up or down the backround image stays in place while the text scrolls up and down (backround image does not move with the text). But I like that feature and I want to keep it. However, here is my issue. Whenever I look at the website on a different screen resolution the backround image is in a different place. It usually keeps moving to the (viewer's) left as the screen size gets bigger. I want it to be centered on each screen size. On my screen size it is centered but on others its too far left and sometimes too high too. The other issue is that there is a black border on both sides of the webpage and the larger the screen gets the larger the borders get. How can I get the webpage to stretch to any screen resolution? So once again...

1) How do I lock the Backround image (my logo) in place so that it doesn't scroll up or down with the text (how it currently is)...

2) ...while keeping the logo in one position, in the center, no matter what the screen size or resolution is (so that it doesn't float to the left or right or up or down)?

3) How do I get the webpage to stretch to any screen size without the black borders? The borders are very large currently (a few inches each) on some screen resolutions.

PLEASE HELP!!! I'm totally new to coding and I've wasted months trying to correct this. THANK YOU!!!!!

Here's a look at it....



/* 覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧 general page styles 覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧 */
body{background: #000;font覧 */:normal 12px "Times New Roman";color:#fff;}

#left_column, #center_column, #right_column {float:left;}

#left_column {clear:left;width:182px;}

#center_column {width:100%;overflow:hidden;background:#0b0b0b;}





/* 覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧 header styles 覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧 */
div#header {height:260px;position:relative;}

h1#logo {height:164px;background:url(../img/logo.png) 0 0 no-repeat;border-bottom:1px solid #383838;overflow:visible !important;}

h1#logo a {width:425px;height:0;display:block;overflow:hidden;}
div#page
{position: relative;

z-index: 99;

background: #000 url(../img/bg_main.jpg) no-repeat fixed;

width:990px;



margin: 0 auto;

}

NoeG
Jan 12th, 2011, 01:16 AM
try adding this to your body

body
{
background-image:url(../img/bg_main.jpg)
background-repeat:no-repeat;
background-position:center;
}
and take it out of div id page

TerryS
Jan 12th, 2011, 04:36 AM
3) How do I get the webpage to stretch to any screen size without the black borders? The borders are very large currently (a few inches each) on some screen resolutions.

/* —————————————————————————————— general page styles —————————————————————————————— */
body {background: #000;font——— */:normal 12px "Times New Roman";color:#fff;}

/* —————————————————————————————— header styles —————————————————————————————— */
div#header {height:260px;position:relative;}

h1#logo a {width:425px;height:0;display:block;overflow:hidden;}

div#page {position: relative; z-index: 99; background: #000 url(../img/bg_main.jpg) no-repeat fixed; width:990px; margin: 0 auto;}

Hello,

That is not a border, that is "background" (color) on the "body" tag. The higher the resolution (or wider the display), the more of the page background you can see.

If you truly want just a black border, change this:

body {background: #000; ...etc...

to this:

body {border:10px solid #000; ....etc.
(Adjust the width in pixels accordingly.)

However, I don't know what the rest of your page looks like. Maybe you should set the fixed background image to the whole page.

Whether you still want the main (outer) sections of the page to resize in various browsers is another issue, too. If you want to set them to a fixed width, specify their width and make their left and right margins "auto". Example assumes you want to set the top and bottom margins (of some div) to 20px and left and right to auto:

div#page {width:480px; margin:20px auto;}
Or to set top and bottom seperately (you are allowed to set all, opposing pairs, or each one):

div#page {width:480px; margin:20px auto 40px auto;}

Or if you want them to resize automatically, but still have a specific (or percentage) margin in the body:

body { margin:20px 5%; }
div#page {width:auto;}

Hope that helps! Make a copy of your original under a different file name, remove the black background, add a black border, and try one approach at a time (besides the body, only work with one container -- the outer-most, if possible). CSS can be confusing to someone who's not only a newbie to CSS, but to HTML as well. Get one major thing right, then go on to the next...work outside-in.

hbvitor
Jan 12th, 2011, 06:50 AM
Hello,

That is not a border, that is "background" (color) on the "body" tag. The higher the resolution (or wider the display), the more of the page background you can see.

If you truly want just a black border, change this:

body {background: #000; ...etc...

to this:

body {border:10px solid #000; ....etc.
(Adjust the width in pixels accordingly.)

However, I don't know what the rest of your page looks like. Maybe you should set the fixed background image to the whole page.

Whether you still want the main (outer) sections of the page to resize in various browsers is another issue, too. If you want to set them to a fixed width, specify their width and make their left and right margins "auto". Example assumes you want to set the top and bottom margins (of some div) to 20px and left and right to auto:

div#page {width:480px; margin:20px auto;}
Or to set top and bottom seperately (you are allowed to set all, opposing pairs, or each one):

div#page {width:480px; margin:20px auto 40px auto;}

Or if you want them to resize automatically, but still have a specific (or percentage) margin in the body:

body { margin:20px 5%; }
div#page {width:auto;}

Hope that helps! Make a copy of your original under a different file name, remove the black background, add a black border, and try one approach at a time (besides the body, only work with one container -- the outer-most, if possible). CSS can be confusing to someone who's not only a newbie to CSS, but to HTML as well. Get one major thing right, then go on to the next...work outside-in.
Thanks for your help. I was looking at a website (viewlikeus.com) to see how my website looked on different screen resolutions. I noticed that my backround image may not be moving. I think when the screen resolution increases it makes it apear as if the backround image has moved, but really the website's text has moved to the right making it appear that the backround image moved to the left. I'm not sure if this is the problem with the backround image or not.
I did not want any "border" around the website. What I need to do is to make my website stretch to fit any screen resolution size. Right now when the screen gets bigger, the right and left side get a big black area (from the backround) and the text stays the same size in the center of the screen. So the larger the resolution the more black there is on the left and right side. So...how can I make the website stretch to fit any resolution size? Thanks!!!!!!




/* —————————————————————————————— general page styles —————————————————————————————— */
body{background: #000;font——— */:normal 12px "Times New Roman";color:#fff;}

#left_column, #center_column, #right_column {float:left;}

#left_column {clear:left;width:182px;}

#center_column {width:100%;overflow:hidden;background:#0b0b0b;}





/* —————————————————————————————— header styles —————————————————————————————— */
div#header {height:260px;position:relative;}

h1#logo {height:164px;background:url(../img/logo.png) 0 0 no-repeat;border-bottom:1px solid #383838;overflow:visible !important;}

h1#logo a {width:425px;height:0;display:block;overflow:hidden;}
div#page
{position: relative;

z-index: 99;

background: #000 url(../img/bg_main.jpg) no-repeat fixed;

width:990px;



margin: 0 auto;

}

TerryS
Jan 17th, 2011, 07:59 AM
See below first.

TerryS
Jan 17th, 2011, 08:36 AM
Argh! I should have noticed this before:

font覧 */:normal 12px "Times New Roman";

Should be:

font:normal 12px "Times New Roman";

I'm not entirely sure whether that "font---------*/" would mess up the browser, but fix that first. (Also, just remove the "background:#000;" if you want to get rid of the black background.)

Also, who knows if the online tool is completely reliable in mimicing the browsers? (Especially mimicing possible bugs, too!) What OS are you using? (You can probably install Firefox, Opera on pretty much anything...just to test in multiple browsers.)

TerryS
Jan 17th, 2011, 08:48 AM
Try an actual browser and the fix above first...

...But if that doesn't help, we actually need to see some HTML, not just the CSS.

See, the standard (HTML 4.0, HTML 4.01, XHTML 1.0 Strict, XHTML 1.0 Transitional) the page is coded too...and what (if anything) is declared at the top of the HTML file...is going to affect how the browser renders the page. Some browsers are worse than others, especially if there is no standard declared, or if you declare one standard and don't follow it. (I previously mentioned IE because it is notorious for its' horrible "quirks mode", especially in IE 6, where it tries to guess what you want and fails miserably.)

Do you have full access to the templates? Can you edit the HTML, also, not just the CSS?

We can't guess just from the CSS if some "div" elements are nested inside others, or what order they appear in the source code, or whatever.

Personally, I follow XHTML 1.0 Strict, and I'm willing to play with a few things on my own. But first, try testing in an actual browser instead of that website. Maybe its good, I don't know, but that (and fixing the typo) are the first things to try...

TerryS
Jan 17th, 2011, 09:57 AM
FYI, there is no way to center a background image (directly).

One workaround would be to set the image as a background to a "div" (such as the center column) that is the same width as the image. Then center that div...set the width to the same number of pixels as the image, and set the side margins to "auto."

Then to center the page in general...set the side margins of the body to a percentage. This was what I said in my first post ("body { margin:0 4%; width:auto; }", for example). FYI, I find it helpful to set a 1-pixel border on every major div (a different color for each), so I can see what is happening. When my page is finished, I remove the colored borders.


Obviously you are trying to solve 2 major issues here...whichever "div" is going to have the (so-called) centered image needs a fixed width...the body needs to stretch.

The fact that this template "floats" several elements can make things tricky. Changing the width of a div could force some of the divs to be below the others. This makes it hard for us to help you, because we're "blind" without seeing the HTML.

TerryS
Jan 17th, 2011, 11:10 AM
I started from scratch, since I don't know your HTML, and how CSS is very dependent on how elements are ordered in the HTML (and also how the CSS is ordered), especially when using floats. So I'll explain how the CSS is getting applied in my example.

CSS file "hbvitor.css"


/* —————————————————————————————— general page styles —————————————————————————————— */
body { background:#000; font:normal normal normal 12px "Times New Roman"; color:#fff; border:1px solid #fff; }


/* —————————————————————————————— header styles —————————————————————————————— */
div#header { height:260px; position:relative; border:2px solid green; }
h1#logo { height:164px; background:url("p1000540.jpg") no-repeat fixed; border-bottom:1px solid #383838; overflow:visible !important; }
h1#logo a { width:425px; height:0; display:block; overflow:hidden; }
div#page { position:relative; background:url("p1000565.jpg") no-repeat fixed; width:1000px; margin:0 auto; border:2px solid white; overflow:auto; }


/* —————————————————————————————— column styles —————————————————————————————— */
div#left_column { float:left; width:200px; border:1px solid red; }
div#right_column { float:right; width:200px; border:1px solid blue; }
div#center_column { width:auto; margin:0 220px; border:1px solid yellow; }

By default, the "position" of all block-level elements in HTML is "relative." What this means is that each block-level element gets displayed below the previous one. The browser takes the height and starting position of the previous element into consideration to set the starting position of the next one. Thus, you expect that you should place your HTML elements in the order they should be visibly seen in the page, right? By default, yes...but not when using floats (or other types of positioning).

When you "float" an element, it is taken out of the normal flow, in the sense that the next element's position will not take the height of the previous one into consideration (as long as the next element can fit).

Therefore, the next elements wrap around it (if they are block elments, this is only assuming they are not too wide). So if you followed the floated element with a bunch of random text, it would literally wrap around the float. (This is the same thing that happens if you place an image in the middle of a paragraph, for example.) If you followed it with a block-level element, you need to set the margin so it won't get pushed below the floated element. It won't truly wrap, but it will move to the left or the right as long as it has room!

So, to position the "center_column" div between the two other columns, we must do this:
First, float "left_column" to the left.
Next, float "right_column" to the right.
Finally, set adequate margins on "center_column" so it will "wrap" (appear) between the two other columns.

This ultimately means elements must appear in the order left_column, right_column,center_column, both in the HTML and in the CSS.

I also notice the original CSS (floating both "left_column" and "right_column" to the left) didn't work for me. Maybe if you set a left-margin on "right_column" it will work. For now, I just floated it to the right and let the "page" div end up between them.

Important change to CSS
I also set "overflow:auto" on the "page" div. If you don't, the floated columns can stretch below the actual div in which they are supposed to be contained...therefore, the background image may not go down far enough, especially if the text in the center column is short! (Remember, this is because when items are floated, they are not longer "relative" for position purposes -- their height is no longer considered, because they are not part of the normal page flow.)

As I stated before, to "center" a background image (you can't do it directly), you need to center the container on which it is the background, make sure that container is the same width as the image, and make sure the container's side margins are set to "auto." The image I tested with on my computer was 1000 pixels wide; therefore, I set this on the "page" div: { width:1000px; margin:0 auto; }.

HTML page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<title>PAGE OR WEBSITE TITLE HERE</title>
<link rel="stylesheet" type="text/css" media="all" href="hbvitor.css" />
</head>



<body>
<div id="header"><h1 id="logo">This is a test.</h1></div>


<div id="page">
<div id="left_column">
<p>Fusce vestibulum porta quam a tempus. Aliquam erat volutpat. Aenean vel metus urna, vel varius quam. Curabitur et congue odio. Nunc tempus mi a ligula euismod at fermentum massa suscipit. In a arcu a nisl pulvinar ornare. Sed tristique aliquet nunc ullamcorper molestie. Proin at scelerisque lorem. Aenean at felis magna. In turpis orci, pharetra quis bibendum a, suscipit vitae nisl. Fusce a laoreet erat. Integer nec leo risus, ac bibendum dolor. Sed eu lectus vel dui eleifend pharetra. Phasellus vitae mattis turpis.</p>
</div>

<div id="right_column">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Fusce luctus elit in diam sagittis viverra.</li>
<li>Etiam dignissim metus ac ligula accumsan bibendum.</li>
<li>Sed et elit eget eros tempor sollicitudin.</li>
<li>Mauris ornare arcu pharetra arcu pharetra et lobortis velit tempor.</li>
<li>Suspendisse et justo dui, sit amet aliquam sapien.</li>
</ul>
</div>

<div id="center_column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh sapien, eleifend eget condimentum eu, gravida sodales elit. Phasellus aliquam, arcu vel varius pellentesque, justo libero varius dolor, eu sagittis ligula justo vitae leo. Nunc eu nisl tortor, non viverra massa. Pellentesque non sem sit amet nulla laoreet varius eu et ante. Sed sagittis volutpat dui, sed tristique nisi rutrum sed. Mauris tortor erat, lobortis nec convallis sed, mollis sit amet neque. Pellentesque lobortis cursus est nec tempus. Sed bibendum metus nec diam auctor tempus. Sed in massa a sem rhoncus tempor. Nam vulputate leo et est sodales vitae auctor magna commodo. In rhoncus adipiscing justo quis hendrerit. Sed sit amet tortor vitae lectus molestie congue. Vivamus nisl nulla, vestibulum quis venenatis in, rhoncus in purus. Nam ac justo sapien. Cras auctor est eu odio consectetur sit amet semper odio lacinia. Nunc aliquet mollis elit, a congue mi vulputate in. Nullam pulvinar placerat convallis.</p>
</div>
</div>

</body>
</html>

Again, notice that in both the HTML and the CSS, those 3 columns are in the order left_column, right_column,center_column.

FYI, I added colored borders to every div so you can see what's going on. I always do this. Then, when the page is the way I want, I remove them.

TerryS
Jan 17th, 2011, 11:40 AM
Sorry, I was a little rushed before. Actually, I was able to float both of the skinny columns to the left. All it took was a little change to the CSS, so you can just paste this entire section over the same section in the CSS I previously gave to you:

/* 覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧 column styles 覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧 */
div#left_column { float:left; width:200px; border:1px solid red; }
div#right_column { margin-left:10px; float:left; width:200px; border:1px solid blue; }
div#center_column { width:auto; margin-left:430px; border:1px solid yellow; }

Important explanations: Float both "left_column" and "right_column" to the left.
The "margin-left" on the "right_column" only needs to be as wide as the actual, visible margin that you want (because it's floated)!
The "margin-left" on the "center_column" (the content, which is actually not going to display in the center, per the template you are using) will be calculated from the left margin of the "page" div itself, so you must make it big enough to accomodate the 2 other columns, since they are floated and thus not part of the normal flow. So I have "margin-left:430px;" on the "center_column" div.