Hi Forum, new starter here.

I've jumped in at the deep end, with no training or reading of resources, just winging it!

 

I've knocked up a site:

http://www.wavespeech.co.uk/

To test some ideas.

 

It's only in very very early draft so most of it doesn't 'work'

I'm hoping to knock up separate HTML pages, that I can insert into this site with minimal editing.

The white bars will be my entries.

 

1st question, of which there'll be many no doubt.

 

Any idea where my 'test object' entry is getting it's scaling from?

 

The entry page http://www.wavespeech.co.uk/entry0001.html

 

This is how I'm inserting my entries:

 

<section>

<div class="actog">1991 Raleigh Cameo</div>

<div class="accon">

<object type="text/html" data="entry0001.html"></object>

</div>

</section>

<section>

<div class="actog">1991 Raleigh Courier</div>

<div class="accon">

<object width="952px" type="text/html" data="entry0002.html"></object>

</div>

</section>

<section>

<div class="actog">1997 GT Zaskar</div>

<div class="accon" id="entry_001" style="display: block;">

<img src="images/1997_GT_Zaskar_LE.JPG" width="952"></div>

</section>

 

Thanks in advance.

 

 

 

Well for a start, your test object has its own site definitions on its own, so thats bad. None of your other entries have that, so I'd just say that for speed, delete your "test entry",copy an entry that works, and modify it that way.

 

You've got some advanced functionality like a fading top segment on scroll yet you're using a jpeg image for your footer? Thats poor practise for SEO and generally not that helpful for displaying your site on different screen sizes. I take it you're designing this site on a large monitor? Because your header takes up a huge amount of space.

 

If you're using google chrome, you can download a free plugin called "Window Resizer" which will automatically set your window size to the max size of other computer monitors. It's incredibly useful for testing mobile layouts, tablets, and smaller/larger screen sizes.

 

I know you've mentioned that you've not got any training and that it's just a draft version, but if you don't act on some of these changes, you're going to be shooting yourself in the foot a little bit

 

ALSO, your CSS has some duplicate properties of "max-width" on some items. And if you're looking to find out certain things about your code when its in a browser, use google chromes "inspect element" ability. Just right click an item in google chrome and "Inspect Element". It'll bring up the code and CSS for that segment and you can do your own bug-squashing.

Thanks very much Chris for the detailed response.

 

I'll address those details and have another 'play'.

You're correct in what you are saying, I don't wish to start off on the wrong foot.

 

Its so easy to try different layouts and effects and miss the basics, dive in!

 

My vision is to create separate HTML pages, that then are the 'entries' on each of those drop down bars. With the top bar expanded, being the most recent and the first the reader will see. I want to minimise my editing of the main page.

 

The buttons in the header will expand the 'entries' based on the readers preference, artwork, I.T. work, graphics etc. The entries will be tagged with the category of the content and all expand when that button is pressed.

 

My separate 'entries' would also be available to link to as an item on their own, and be PDF exportable. eg. Check out my item on bicycle restoration, 'link'/'pdf'

 

Did I say dive in? At the deep end!!

 

 

And I haven't even started on my many, "millionaires Rodders millionaires", app/site ideas!

Ideas-a-plenty, knowledge and time to learn is not, must be an age thing!

 

 

Thanks again.

Stew.

http://www.wavespeech.co.uk

 

I've started using iframe instead of object to insert the 'entries'.

I can keep my entries in separate HTML files and just insert a new section into the index.

 

A bit of formatting with CSS boxes, confusing!

 

I'm not fussed about SEO as this is a 'play' site for me, and I'll just point people to articles to show off.

I will edit the header and footer when I finalise.

 

My next task will be to get the 'entries' to slide up to near the top on activation and show a smaller header once done so.

I will also get the latest entry to show expanded under the header when landing at the homepage.

 

I'm going to place icons on the entry bars to show/hide any entries in a certain category, that's what the icons in the header will be for. Tech and I.T./Web design/Trad. art/Photography/Digital Art.

 

 

Love the Chrome, Inspect Element, editor, nice tip to use that.

You may be better off using a CMS system for what you're trying to do. Manually updating the way you are seems like it will be very time consuming. And if you say that this is a play/test site, then what better time to learn!

Lol funny really I had almost the same idea my first year of uni http://sws.canterbury.ac.uk/ga87/ did not work there either lol

As @@WilliamsGraphics says, you can download that plugin, but Google Chrome actually has a device emulation engine built into the Developer Tools.

 

Right click on your page

Go to Inspect Element

In that window, there should be a dialog at the bottom with 4 tabs (Console, Search, Emulation, Rendering) -- if not, press Esc

Switch to Emulation

Select the device you want to emulate and click Emulate

Go to your webpage and refresh to view the changes.

 

From there, you can then still use Developer Tools to manipulate the web page.

 

I know it's not the answer to your question, I just thought I'd elaborate upon what WilliamsGraphics said.