Please Help Me to Expand the Margins on my Blog

[enwriter]

I'm a member of a social network and I would like to expand the margins in the template I have.

There is a HTML reader to help design your page.

Please tell me the code for expanding the margins within a template. The template has a 4 inch white space on the left side of the page, that is driving me crazy. I would like the text and layout to expand wider. I only know the basics of HTML.

Here is my web page:

http://www.blackplanet .com/Curiosity336/

Thank you in advance

[JamieHowarth0]

Hi there,

Firstly, welcome to Bytes.com. Please be sure to take a read through the Posting Guidelines and FAQs.

This forum is predominantly for helping individuals with either architectural design guidance for software development or for assisting with debugging individual lines of code that you have already written.
As you don't appear to have made any attempt at altering the layout yourself, I suggest you take a look at the following resources here at W3Schools as they have some wonderful tutorials for beginners to this technology.

Once you understand what you're trying to achieve and you've given it a good shot, then we'll be more than happy to help out with any code you've written. But we won't write your code for you.

codegecko
Moderator

[eWish]

You will need to find a way to determine what CSS to edit that is being used. Without seeing any code it is hard to say.

--Kevin

[David Laakso]

You will need to find a way to determine what CSS to edit that is being used. Without seeing any code it is hard to say.

--Kevin

Open his CSS files in the Firefox Web Developer extension. Or download the HTML, CSS, and images in Opera. Or view the CSS using the absolute paths to them in the head of the source document.

All of which, imho, is a lot easier than trying to debug CSS/(X)HTMLposted to the forum by pasting between code tags-- particularly when done by folks who either don't know what they are doing, or guessing at where they think the problem lies.

[David Laakso]

I'm a member of a social network and I would like to expand the margins in the template I have.

http://www.blackplanet.com/Curiosity336/

That may be easier said than done. It is a complex CMS (Content Management System), with complex CSS, and an even more confusing and complex array of inline styles.

All I can suggest follows:

The block "Members Dock" that is a against the right rail is an "iframe." Its positioning is controlled by an inline style. Find the page(s) having the member dock and...

1/ Insert this to enclose the page and the dock. Put it immediately above the inline style for the iframe. And modify the CSS positioning of the iframe as shown.

<div style="width: 1050px; border: 1px solid red;margin: 0 auto" id="stuff">

<div style="width: 1050px; border: 1px solid red;margin: 0 auto" id="stuff">


<iframe style="border-width: 0pt; position: absolute; visibility: visible; width: 10em; height: 10em; top: -110px; left: -110px;" id="_yuiResizeMonitor" src="data:text/html;charset=utf-8,%3Chtml%3E%3Chead%3E%3Cscript%20type%3D%22text%2Fjavascript%22%3Ewindow.onresize%3Dfunction%28%29%7Bwindow.parent.YAHOO.widget.Module.textResizeEvent.fire%28%29%3B%7D%3Bwindow.parent.YAHOO.widget.Module.textResizeEvent.fire%28%29
%3B%3C%2Fscript%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E">

</iframe><div style="visibility: visible; z-index: 4; top: 205px; /* delete this----> left: 1309px*/  /* add this---->*/right:250px;" id="memberDock_c" class="yui-panel-container shadow show-scrollbars dock">

Then close the div that was added, by adding </div> immediately before the very last

<script src"...">

tag at the very bottom of the page.

Good luck and best wishes for success...

[enwriter]

Thank you everyone for your help, I do see I'm in above my head, lol.

I didn't realize you give advice mainly for advance HTML coding. It does inspire me though, because I don't understand the terminology being used, and I think it's something I should learn.

Than you

[David Laakso]

I didn't realize you give advice mainly for advance HTML coding.

Who said that? Or where does it say that?

If you are interested in learning (X)HTML and CSS, this is one of many online resources you might consider:
HTML and CSS Tutorials

[enwriter]

Who said that? Or where does it say that?

If you are interested in learning (X)HTML and CSS, this is one of many online resources you might consider:
HTML and CSS Tutorials

Thank you,

I found another great site Tizag.com I'm actually up to the "font chapter".

I'm still going to come on here and see if I can learn, I would feel like a computer genius if I can read this. lol

[David Laakso]

Thank you,

I found another great site Tizag.com I'm actually up to the "font chapter".

I'm still going to come on here and see if I can learn, I would feel like a computer genius if I can read this. lol

Good. You may find this css reference and this layout tutorial helpful.

[JamieHowarth0]

Hi again,

One thing to bear in mind is that the system that this site uses will throw code in there which you cannot necessarily control, change, or do anything whatsoever about. So if you are determined to pimp your profile, you have to learn to work around this limitation.

The two things you have to do are:

1. Find the HTML elements that you want to move (make sure you find the beginning and end tags correctly). I suggest downloading Firefox and getting the DOM Inspector extension, which gives you a way of clicking parts of the page and it showing up in a tree-like navigation form so you can see where it fits in the page and code.
2. Learn CSS and how it gets applied to HTML (again, the DOM Inspector can help here). I would suggest saving your page as a copy on your hard disk, so then you can change the styles and learn how the page is designed and built up using CSS style rules.

At that point you should have a fairly good understanding of HTML and CSS, and what you want to do and how to go about it. If you get stuck with any of the concepts/techniques of CSS then you can always ask us here, we're a friendly bunch :-)

codegecko

[David Flouee]

Interesting blog you got here. It would be great to read more concerning that theme. The only thing this blog misses is a few pictures of some gadgets.

David Flouee

edit: link removed

[Death Slaught]

The width is pretty easy to adjust depending in what the site allows you to edit.

If you have direct access to the CSS then you need to adjust the width of two rules. A rule is basically used to tell the browser what it is you want to change, and how you want to change it.


The first, #pagebox

#pagebox {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC; 
    margin: 0 auto;
    position: relative;
    width: 786px;
}

Change the width to whatever you would like - I suggest 986px. Make sure to include the px (pixels).



The second, .pagebody

.pagebody {
    clear: both;
    width: 786px;
}

Once again change the width except this needs to match the width you gave #pagebox - as before I suggest 986px.



If you don't have access to the CSS but do for the HTML, then you just need to add two small bits of code. I know this is a lot of code to scroll through but just take your time. Also, most browser will allow you to press ctrl + f and search for things on the page.


First look for pagebox,

<div id="pagebox" class="layout_B">

and add the style attribute. An attribute is used to tell the browser more about the element or tag, in this case, div. For example, the id attribute tells the browser that this div (division) has an id of pagebox.

<div id="pagebox" class="layout_B" style="width: 986px;">

Then we do the same thing with pagebody,

<div class="pagebody tmpl_flexed_1" id="pagebody">

<div class="pagebody tmpl_flexed_1" id="pagebody" style="width: 986px;">

I hope this helps, Regards, Death

[Death Slaught]

Can we not bring back 2+ year old threads? The person has abandoned the project and hasn't been back here in 2 years.

Note to self: Read the post dates.