backgrounds - Page 2 - Post ID 221353

User 2622002 Photo


Registered User
25 posts

Thanks!
here is the skeleton page
http://www.upholster.com/skeleton.html
I'll fill the side bar with product images and descriptions . How do I wordwrap? and minimize space between lines? I need to get sidebar below banner or should I shorten banner?
css page
http://www.upholster.com/style2.css
Do I have h1 in right place?
horizontal nav below banner?
Ken
User 122279 Photo


Senior Advisor
14,454 posts

Hi again,
I have made another suggestion by changing around some of your page elements. I have no time right now to explain anything, I'll do that in the morning.

You may not like what I have made, and that is fair enough. But I thought that the text above the banner lookes better if it was only one line, be it above or below the banner.
More tomorrow morning... :)
Attachments:
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've made some new additions here
http://www.upholster.com/skeleton.html

Yes I would like the H1 heading on top of banner and nav buttons below.
The nav buttons will be repeated in the content area with descriptions.
I tried to start another html page but http://www.upholster.com/style3.css info didn't show up.
Thanks Inger
Ke
User 122279 Photo


Senior Advisor
14,454 posts

Yes, the h1 text can of course also be above the banner..
I promised some explanations. Look at this bit of code that I had added to your css last night:

body
{ background:url('http://www.upholster.com/images/stone.gif');
font-family: verdana, sans-serif;
font-size: .90em;
font-weight:bold;
color: #8C8652;
line-height: 1.2em;
height: 100%;
}


How do I wordwrap?

If you mean 'line wrap' when you narrow the viewport of the monitor, that will happen automatically. Just use % or em as the units for font size, not px. As you see I used em. Actually 'word wrap' makes no sense in this connection.

and minimize space between lines?

In the code above you see line-height. You need, of course to have it a bit larger than the font size, but you can adjust it so that you get what you want.

I need to get sidebar below banner or should I shorten banner?

You can have the banner across the whole width if you want. We need to change some css for that.
When I made the first suggestion, I assumed that you wanted to use the whole viewport, and that the various columns (sidebar and main) were supposed to shrink to fit a smaller viewport. If you want a fixed width, then we can do that, with the banner across all of it, or just as it is now. I have to say, though, that keeping the width flexible would be better for scaling down to smaller screens.
Have to do some other work too ;), so I'll get back to the rest of your questions a bit 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 2622002 Photo


Registered User
25 posts

Yes I want to do everything necessary to show up correctly on all devices.
I guess I mean text alignment rather than word wrap. On both my content and sidebar text is only at bottom of images rather than side and below image.
Also you can see here http://www.upholster.com/skeleton.html sidebar is lapping over banner.

Isn't the idea that the css is a template for other pages? And I can just change the content area?
Ken
User 122279 Photo


Senior Advisor
14,454 posts

Hi,

I know about the overlapping issue, I hadn't got around to that yet. I'll write some code for you to fix it, just hang on... ;)

You asked about the h1 tag. Since you have some h1 text, I would not include the banner in the h1. It's not forbidden, though. And if you check the 'style2' that I attached here yesterday, you will see that I have added css rules for the h1 tag. That way you get all the heading on one line.

You also asked about shortening the banner. If I were you, I would not do that. For being positioned as I have suggested, it is short enough. If you want the banner across the whole width, I'm afraid the small text on it, Vista ... etc, will look fuzzy. If you have the original banner file, from Photoshop or whatever programme you have used, I think I would fix that on the original file, so that it looks ok when stretched to fill the entire width.

If you link the css file to all your pages, and if everytning apart from the main content is to be the same, yes, you only change the main content area.
You navigation can of course be positioned below the banner. Since you want to have it shrinkable to fit all monitor sizes, I see one problem with your buttons. The single buttons down in the content are are ok, but in the nav bar the buttons need to be shrinkable too. You should check out the CC menu builder and create your navbar with that, using the checked pattern as the background for the buttons. With that programme you can create a responsive menu.

So, I'll write some code now... ;)
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,454 posts

I have changed the css around a bit, and now your banner will not overlap. I made the banner a wee bit larger, so if you want to go for this solution, you could download the index file, the css file and the banner. Here it is: http://inger.cybeer.no/stuff1/

We need to write some code for the images in the displayboxes, but that depends on the image sizes, so I'll get back to that.

Try narrowing the width of your monitor.
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

Your link gives me index but not css or banner
You might want to reload this page to see what I added last night
http://www.upholster.com/skeleton.html
Thanks for your patience
Ken
User 122279 Photo


Senior Advisor
14,454 posts

It is possible to pick it all from the temp. site. But I'll post it here for you. :)

I've seen your updates. If you want to use my suggestion, you have to re-enter the contents, then the zip-file would exceed the limit of 100KB if I included it all.
I hope you don't feel that I'm pushing you in a direction that is not right for you. I don't mean to do that. You can discard my suggestions if you want something else.
Attachments:
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'm not that attached to the nav buttons and think we should drop them and use plain text for nav
Afterall I made them in prehistoric times 1997
But will use them in content area with text.
I can redo the banner sometime to eliminate fuzzy text.
If I can get the text alignment code for images and sidebar I could work on that.
I like your suggestions
Ken

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.