backgrounds - Page 5 - Post ID 220964

User 2622002 Photo


Registered User
25 posts

Inger-I think I'll skip the php. I don't feel comfortable with it. I can make change on my main page manually.
I'm very happy the way the site is looking now. Looks good on my small screen LG android cell. (portrait view)
http://www.upholster.com/skeleton.html
I can easily expand the main content and read the left side or expand the sidebar and see all the products without scrolling horizontally. However if you think allowing the sidebar to drop to the bottom for under 600pix screens go ahead.
User 122279 Photo


Senior Advisor
14,465 posts

PHP is not at all scary :) . All the pages where you want to have the sidebar, nav and footer included, need to be php, but if you have pages that don't have those includes, they can stay html.

I found that if you have an image and some text, you should use the 'displaybox' instead of one of the textboxes. The css of the displaybox and also for images in it, has been written so that the box spreads out to the whole width available, and the image will be floated left;, unless of course, if you change it to float: right; in inline style. The image size is set to 30% width, which can also be overridden by inline styling.

The facebook Like icon didn't work for me, I wonder if it is locked to your server or something. I found another one that I put in, but you can try inserting your own.

A new version has been uploaded, in stuff1 for the time being. Folder right at the bottom.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2622002 Photo


Registered User
25 posts

Can I adjust the image size in the display box?
User 122279 Photo


Senior Advisor
14,465 posts

Yes, you can. If you do it here in the css, it will be adjusted for all images inside a displaybox, change both the max-width and the width (the latter is for Internet explorer):
.displaybox img
{
max-width: 30%;
display: block;
border: 0;
margin-right: 7px;
float: left;
-ms-interpolation-mode: bicubic;
image-rendering: optimizeQuality;
width: 30%;
}


But if you just want to change it for one particular image, then place the coding inline in the html document, like this:
<div class="displaybox"><p><img style="max-width: 40%; width: 40%;" src="images/sewing.gif" alt="Industrial Sewing Machine" title="Industrial Sewing Machine"><br>HOT TIP FOR RUNNING YOUR OWN SHOP: <br>Never deliver a job to a customer that is going to get you complaints. Our trade is a "word of mouth" business. Fix problems before they leave your shop and you will succeed.</p></div>

In this example I changed it to 40%, but it can be anything you like.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2622002 Photo


Registered User
25 posts

I centered my h1 with this in head
<style>
h1 {text-align:center}

</style>
Correct? Wouldn't fit my screen on one line.
What code to center nav?

How can I change this banner to css I have several if these and think I could do the rest myself.
<center><table BORDER=0 CELLSPACING=0 WIDTH="100%" BGCOLOR="fffff" >
<tr>
<td>
<center><a href="http://www.sewman.com" rel="nofollow"><IMG height=112 src="sewman-consew.jpg" ALT="Consew" width=175 border=0></a><br> Consew 206RB5 upholstery machine</center></TD>
<td><center><a href="http://www.sewman.com" rel="nofollow"><IMG height=91 src="sewman-servo.jpg" ALT="Servo motor" width=120 border=0></a><BR>Servo motor with wired switch $115</center>

</td>
<td><center><a href="http://www.sewman.com" rel="nofollow"><IMG height=65 src="sewman-logo.gif" ALT="American sewing machine" width=226 border=0>
<center><b><font size=3 color=>Parts and Needles<BR> New and Used Industrial Sewing Machines-Best Prices<BR>866-473-9626 * Online Catalog</a></font></b></center>
</td>
<td><center><a href="http://www.sewman.com" rel="nofollow"><IMG height=91 src="sewman-motor.gif" ALT="Sewman" width=120 border=0></a><BR>Clutch motor</center>

</td>
<td><center><a href="http://www.sewman.com" rel="nofollow"><IMG height=91 src="sewman-rex.gif" ALT="Rex sewing machine" width=120 border=0></a><BR>
REX-607
Portable Walking Foot
Industrial Sewing Machine
with Reverse
$289</center>

</td>
</TR>
</table>
Thanks Inger
User 122279 Photo


Senior Advisor
14,465 posts

I centered my h1 with this in head
<style>
h1 {text-align:center}
</style>
Correct? Wouldn't fit my screen on one line.

It is better to write
<style type="text/css">
</style>

Some browsers need the type included in the tag. The heading fits nicely on one line for me, and it probably will for you too if you remove the <br> that is lurking inside it. ;)
What code to center nav?

Hehe! this is exactly why I left those border tags in there. If you 'un-comment' the purple one for the nav in the css file, you will see why it does not budge. It is spreading out to the whole available width. The best way to center the menu is adding a line to the nav css:
text-align: center;

AND remove another <br>, unless you specifically want those br's in there.
I'm working on the table for you, not quite done yet. Will upload later.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,465 posts

New upload to stuff1. I have the index page, and also one called table.html. The css for it is in style2.css along with the rest. I hope I have understood correctly what you wanted.
Have fun! Holler if something is not clear.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2622002 Photo


Registered User
25 posts

Thanks Inger
I'll get to work.
Do you have any special tools you use to test responsiveness? Google Webmaster tool perhaps?
k.
User 122279 Photo


Senior Advisor
14,465 posts

I don't use any particular tools, but those borders I mentioned are quite useful, both for responsiveness and the layout as such. If I get 'lost' in the code, and that happens, I uncomment the borders to see where I am. I have of course also acquired some knowledge about these things, partly from experience, but also from reading relevant articles. Then I rely on CC HTML Editor, which produces the code I want, no more, no less, no clutter.
When I work on a site, I test it a lot in between, both locally by narrowing the viewport, and also after upload to some test site to check it on a tablet and a smartphone.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,465 posts

Oh, BTW, in my latest upload I corrected a mistake I made on the index page in the upload before that. You may have noticed that when the site is narrowed and the sidebar drops below the main, there is a green dividing line appearing below main and before the sidebar. I had that line go right across one of the images, but that has been corrected now. Make sure you have the lower part of main in the right sequence.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.