Website HTML Coding Help Required

[AlfieD]

Lovely people of the forum,

If you take a look at http://www.lexilikes.com, you will see that the pictures in the main column (the post column) are quite small and what I'm trying to do is make the column wider so that I can fit larger, HD quality photos (if I put them in now they just get cut off). This was my first dilemma and I managed to complete this goal by adjusting the 485px of the #main-wrap1 to make the area wider. However, there was collateral damage that needs to be treated. And I would be extremely thankful if some of you guys could help me.

The main chunk of collateral damage (which will henceforth be referred to as C. D.) is that the social media contact information bar, the one to the right of the post bar, has decided that there is not enough space for it anymore and has moved to the bottom if the webpage (retaining its x-position but changing in its y-position). So, if it could be moved back up so that it sits like it used to that would be great.

The final piece of C. D. to be fixed (as of yet, however more can, and probably will, arise) is that although the column is wider (the post column), the pictures and text are not aligned in the center, and I am unsure exactly what to change in order to revert their align back to the center of the column.

If some people can collectively, or possibly even somebody individually, can do this, I would be extremely thankful and will give all possible recognition to the party responsible, and will send a mention to some authority on this forum. Also, would be great to add a Physics Forum banner of some sort of advertisement, but this is however not essential.

Thanks a lot in advance,
AlfieD

 

[nvn]

AlfieD: (1) Make a backup copy of your original web page .html file. Also, make a new, temporary copy of your .html file. In the new copy of your .html file, copy the "Page Structure" section in my attached file, and paste it over your current Page Structure section. Then open your new web page in your browser, and see if you like the margin changes.

You can compare back and forth between your old and new files, to see which characters were changed in the Page Structure section. All I did is, I changed most of the widths to blank, except I changed a few widths from px values to percent values. The reason I did this is, you can never outguess all users' screen nor window size; therefore, it is usually a bad design practice to use absolute width sizes. It is usually better to use percentages of the current window size, so the web page can automatically adjust to each user's current screen.

Anyway, see how you like it. And adjust it as you see fit. I think the social media bar now might be back to the right-hand side of the post bar, but check to see if it is there on your screen, and see if it is how you like it.

(2) Go to the first occurrence of ".post-body", and change "padding-left:29px;" to "padding-left:17px;". Then see if the centering of your pictures and text in the post bar is now acceptable to you.

(3) Go to the first occurrence of #footer-wrap1, and change the first occurrence of "margin:0 0 10px;" to "margin:0 0 22px;".

(4) Change <div id='header-inner'> to <div id='header-inner' align='center'>.

(5) Under "#header .description", change "padding:5px 30px 10px;" to perhaps "padding:5px 20% 10px;".

You do not need to give us any credit.

 

[AlfieD]

Thanks very much. :)

 

[nvn]

AlfieD: Remember to always keep the backup copy of your original .html file, mentioned in the first sentence of post 2, so you would always be able to compare lines to the original .html file, throughout the future. This will allow you to always be able to roll back any line change, if something goes wrong. You could even keep two backup copies of the original .html file, just in case you accidentally change one of them during comparisons.

Notice, if a user's browser window is too narrow, then your web page now still begins to cut off the post bar content. If you do not want it to do this, then you could change the first occurrence of

overflow: hidden;​

to

/*
overflow: hidden;
*/​

This will comment out this line. Notice now, with this change, as you make the browser window narrower, the side bar (social media bar) now floats over the post bar, instead of cutting off the post bar content. Give this a try, and see if you like it better.

Notice, the post bar will get narrower until it reaches the width of the widest fixed-width picture in your post bar (plus fixed-width left/right margins and padding). When the post bar reaches this width, it will stop shrinking.

If you want to reinstate the original line, you can change the above to

/*
*/
overflow: hidden;
​

To prevent the side bar from floating over (or cutting off) the post bar (if you make the browser window too narrow to accommodate the widest picture in the post bar), there are perhaps two things you could try, as follows.

(1) Change the first occurrence of "float:left;" to "float:none;". Try it now and see if you like it better or worse, when you make your browser window narrow. Notice, this change makes the side bar drop to the bottom of the web page, if you make the browser window narrow. If you do not like this, change this line back to "float:left;"; and then try item 2, below.

(2) Change the second occurrence of "float:left;" to "float:none;". Try it now and see if you like it better or worse, when you make your browser window narrow. Notice, this change keeps the side bar at the top, but allows very narrow text in the post bar, if you make your browser window narrow. If you do not like this, change this line back to "float:left;".​

By the way, instead of actually changing the original lines, you can instead just add a new line, as shown below, if you wish. The second, new line will override the first line.

float:left;
float:none; /* AlfieD, 2014-01-04. */
​

If you later want to reinstate the original line, then just switch the order of the lines, like this.

float:none; /* AlfieD, 2014-01-04. */
float:left;
​

Or you can comment out the original line, and add your new line. Either way, this helps keep a record of the original line, so you can easily reinstate it, if you ever need to roll back any line change.

 

[nvn]

AlfieD: I forgot to say, you can make some or all of the above changes in a plain text editor, such as Microsoft Notepad, as follows.

Select Start > Programs > Accessories > Notepad. Or right-click on the new copy of your .html file, and select Open With > Notepad. If all of the lines are run together the first time you open the file in Notepad, then exit Notepad, right-click on your .html file again, select Open With > Wordpad, select File > Save As, save a new copy of your .html file, then exit Wordpad. Now open the new .html file in Notepad, and the lines will not be run together.

In Notepad, you can now make any of the changes described in posts 2 or 4.

You can use any plain text editor you prefer, if you have something better than Notepad. You could also perhaps use Wordpad.

 

[AlfieD]

Sorry for the late reply. Thanks very much, with regard to the plain text editor, I currently use Notepad ++ which I think is really good. Thanks for the help, everything's fixed now. :)

 

[AllenHe]

Just want to say, really like the background picture of the website.