8 replies [Last post]
tamower
tamower's picture
Offline
newbie
Last seen: 5 years 31 weeks ago
Timezone: GMT-5
Joined: 2014-07-01
Posts: 5
Points: 6

I have been a small school webmaster for six years. I originally designed a fine site with tables and got paid very well to do it. Everything was smashing and then things changed and CSS was required. I am smart enough and spent an entire summer studying CSS before trying to completely re-design my site. Despite my months of work, I continue to perceive CSS as illogical. It does not come natural and makes no sense at all to me, still yet. Luckily, some poor sod took pity on me around four years ago and provided me with a CSS template for my site.

I have carefully managed that template ever since. I can add text anywhere on the page, float a picture left or right (but I have to add tons of space to avoid messing up the next article - can't seem to get the hang of adding another "div"). I have come to a point where I can manage my template very well. The fellow who gave it to me said I would learn by trial and error and so I have - a bit. But I keep a backup copy of every change I make because I can't fix the template if I break it.

Now the site has to be updated. I began to study up on responsive sites since about 40% of my readers use mobile devices to access the site. A couple of weeks ago, I downloaded a VERY SIMPLE responsive template because I cannot write a template of my own. It looked easy enough. But then I noticed that none of the responsive templates have a graphic header. So I re-designed my banner, making it smaller and smaller. Every time I add the banner to the header container, the site justifies left only in Internet Explorer and Chrome. It looks fine and proper in Firefox. I have no idea what is wrong. Can banner headers not be used on responsive sites?

And if that isn't bad enough...my site requires several links. All the templates have only a few very large 'NAV' elements that don't meet my needs at all. A dropdown won't do. Advice is welcomed...

Here is the site that I have been managing for the past four years that needs to be updated:

http://www.alex.k12.ok.us/

Here is my first attempt at updating:

http://www.alex.k12.ok.us/initializr/indextest.html

As previously mentioned, this test displays perfectly in Firefox but won't display correctly in either IE or Chrome.

Can you help or should I quit my job?

Thanks...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 47 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

It's tough to be a newbie

I'm going to guess you tend to visualize the page as you want it to look before marking up content and applying styles. That is absolutely backwards and it is no wonder css seems illogical to you. The correct order of business is to create a well ordered/structured document with typical content or a reasonable emulation (e.g. ipsum lorem, as you've done), then apply semantic html markup.

The span and div elements are non-semantic and structural only, for the purpose of providing hooks for javascript and css. The div is an aggregating element, and the span is a segregating element.

You've now had years of maintaining an awful example of html markup. I think your refactoring shows a lot of improvement over the existing work, but still lacks good structure. HTML5 is not yet the current recommendation, and there are many support issues, including issues with accessibility. See the W3C validation results. Note the section at the bottom regarding the document outline. To my knowledge, no assistive technology, nor even the W3C support the conditional headings of html5. Proper headings are especially important to UAs' assistive technology page navigation.

Regarding the navigation, for visitor usability, limit the main nav list to the seven items that are most used/important to your visitors. It doesn't matter what you or your bosses think are important; the customer comes first. Your job is to make it easy for him to find or do what he came to the site for. The additional menu items can go in a side column. Speaking of side columns, the 'aside' element has a specific role which no one seems to be able to clearly state, but is not likely to be whatever you or I might think it is. In this case, I can't offer an opinion since I don't know what you include there.

Æsthetically, not exactly my strong point, the University of Texas Alex Longhorns' burnt orange is a little strong/distracting to use as a solid block. It would be better, I believe, to use it as a trim component or embellishment, e.g. as a border or drop shadow.

I may have some time this afternoon to show you what I mean.

As an oddity, my dad was born up the road from you at Chickasha, and grew up on Ave G in Fort Worth. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

tamower
tamower's picture
Offline
newbie
Last seen: 5 years 31 weeks ago
Timezone: GMT-5
Joined: 2014-07-01
Posts: 5
Points: 6

Cheers!

Thanks for replying. It's a small world, huh? Smile

I'm going to guess you tend to visualize the page as you want it to look before marking up content and applying styles. That is absolutely backwards and it is no wonder css seems illogical to you. The correct order of business is to create a well ordered/structured document with typical content or a reasonable emulation (e.g. ipsum lorem, as you've done), then apply semantic html markup.

I suppose you have hit on my biggest deficit. A professional writer and investigator by trade, I simply cannot imagine not visualizing the big picture before getting started. Of course I visualize what I want the site to look like. Otherwise, there's no use in doing it. However, I understand that I KNOW the language I write documents in (classical English or French or Latin) and therefore do not have to bother with plotting out the verbs and nouns beforehand. Although I have learned some HTML code over the years, it's Russian to me.

I KNOW what information goes in the school site. I have to be all about what I want it to look like: much as it does now but with less dramatic colors and only two columns. I want the whole page centered and I have given up on it being responsive even though 40% of my readers view with a mobile device.

I want a graphic header, a small white gap and then two columns. The one to the right should be for main articles and photos that are generally floated left. I want the ability to float them right, too, for variety. I like the effect that setting the main column at 60% gives.

The sidebar to the left should be 35% or so. I will put my main menu there since I HAVE to put all the links in. I want extra DIVS in the sidebar separated by white space.

Then I want a footer to put a web counter in and the other stuff about design and things.

How do I say this in Russian? Cause every time I add my graphic to the site now, it justifies the whole thing to the left.

I use Dreamweaver to edit.

And for what it's worth, I designed this page from a basic template:
http://www.alexoklahoma.net/alexhistory/index.html#sthash.2SyjVJPt.dpbs

It seems to look okay and no one has told me they can't see it correctly. But it doesn't have all the information that the school site has.

Thanks for talking...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 47 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

A start on semantic markup

I did not mess with responsive css, as your complaint centered on banner response which you didn't supply. A well structured document will tend to render well without extra effort, so that's your first step.

That normalize.css needs to be thrown out. It's mostly crap. If you discover you need to style an element differently from its default values, just do it. Don't rely on generic boilerplate. See Global resets considered harmful. Some help with html5 elements, but most are redundant and stupid.

cheers,

gary

AttachmentSize
alex.html_.txt 5.42 KB
main.css_.txt 5.86 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

tamower
tamower's picture
Offline
newbie
Last seen: 5 years 31 weeks ago
Timezone: GMT-5
Joined: 2014-07-01
Posts: 5
Points: 6

Thanks

Thank you. Nice to meet you!

tamower
tamower's picture
Offline
newbie
Last seen: 5 years 31 weeks ago
Timezone: GMT-5
Joined: 2014-07-01
Posts: 5
Points: 6

More advice??

This is what I came up with in the end:

http://www.alex.k12.ok.us/

I only have to do this one more year and promise I will never do it again. So bear with me.

Yes, I know I used a Spry menu bar. It worked. I also used Spry collapsible panels in other areas of the site. They work on all devices with the proper tap even though folks say they don't. I am using Dreamweaver CS6 and the school won't spring for anything else right now. I can't do this just with notepad.

I am beginning not to care about the site being responsive. However, I CAN make images somewhat responsive. I only get 13 errors and 4 warnings on HTML5 validation. I can live with that as long as the site displays correctly. There is too much space between H2 headings but I can live with that, too. Unless there is an easy way to fix it.

Regardless, I need one thing very badly: I need to know how to make the text under pictures stay under the pictures and not wrap to the right of the left justified pictures when they are made responsive. I used this code: style="max-width:100%;height:auto" for the pictures and it seems to work. But then the text shows up miles under the pictures or along side them. I suspect what I want has to do with the "clear" attribute. If I have an example, then I will just keep using it until the year is up. Can you help again?

I don't really know why I ended up with two css files but I did. I am good with leaving it that way unless you think otherwise.

I know I should probably use all those "article" divs but they make the sections display too far apart.

Teresa

AttachmentSize
alexmain.txt 7.11 KB
main.txt 493 bytes
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 47 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

/*sprymenu bar

/*sprymenu bar css*/

ul.MenuBarHorizontal {
  cursor: default;
  font-size: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}
 
ul.MenuBarHorizontal li {
  cursor: pointer;
  display: inline-block;
  font-size: 100%;
  list-style-type: none;
  margin: 1em 0;
  padding: 0;
  position: relative;
  text-align: left;
}
 
ul.MenuBarHorizontal ul li {
  display: block;
  margin: 0;
  width: 8.2em;
}

That should clean up the menu bar a bit. It really got ugly if the width of the browser is less than 1280px or so. with these changes, it's good down below 400px.

I don't see the need to float these pictures.

#wrapper .main-container .main.wrapper.clearfix article section p img {
  padding-bottom: 10px;
  padding-right: 10px;
}

The extra space between pics is due to an bunch of empty p and h2 elements.

        <h2>Softball off to solid start</h2>
          <p><img src="hssb.jpg" width="288" height="432" alt="High School Softball"><img src="jhsb.jpg" width="288" height="432" alt="Jr High Softball"></p>
          <h2>&nbsp;</h2>
          <h2>&nbsp;</h2>
          <h2>&nbsp;</h2>
          <h2>&nbsp;</h2>
          <h2>&nbsp;</h2>
          <h2>&nbsp;</h2>
          <h2>&nbsp;</h2>
          <h2>&nbsp;</h2>
          <h2>&nbsp;</h2>
          <h2>&nbsp;</h2>
          <p><br>
          Left: Senior Faith Alexander safely grabs a piece of second base during High School Fast Pitch's debut week. Right: Jr. High catcher Kylie Baxter plays the plate.</p>
          <h2>Football prepares for season opener at home against Caddo on September 5</h2>
          <p><img src="football.jpg" width="600" height="400" alt="Football"></p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <h2>&nbsp;</h2>
          <h2>Youth shine at local stock show on August 16</h2>
          <p><img src="sheep.jpg" alt="Sheep" width="475" height="318" style="max-width:100%;height:auto"></p>

Get rid of them.

That should get you a step or two along. BTW, using Dreamweaver is a good way to learn how to do everything wrong. Notepad is a much better way to go. You mentioned you're a writer. A web page is simply a document. Treat it the same as you would a treatise, report or press release. The markup is just a way to tell the computer what each item is. Don't make it scary.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

tamower
tamower's picture
Offline
newbie
Last seen: 5 years 31 weeks ago
Timezone: GMT-5
Joined: 2014-07-01
Posts: 5
Points: 6

Cool!

I have been reading your tutorials. Very nice, for Greek. LOL! Can you float just one picture left without floating them all or does that picture have to live inside a separate div to be different from the others? I can try to use nothing but horizontal images all year but that is probably not realistic.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 47 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Selectors

CSS provides a large number of ways to select an element for styling. There is no way to provide you a generic method. There are also two html elements whose purpose is to provide style and script hooks.

See Selectors Level 3.

Study the specs, there's enough there to confuse anyone, then try to apply one or another method to your case. If you have problems, bring a specific case to the forum. It's much easier to start with the special before expanding to the general.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.