Hiya ronpat ,
Did ya have a good weekend in the cold weather ?
I would wager there is something close to a 0% chance that anyone uses “Winamp Browser”. There is also probably a low chance that anyone worthwhile is using anything less than a modern browser. I was just being a little overly eager to test the page in any different type of browser I can think of.
Now, I have made a substantial update to the test site. I added the majority of the sample content, including “test images” (colors will need to be experimented with as things progress.), h2 elements displayed as list items, floated images and their containing divs, links at the bottom, copyright in the footer, etc. Here is the HTML I added so far:
<div class="bodycontainer"> <!-- body wrap -->
<div class="trow">
<div class="contentleft tcell"></div>
<div class="contentmid tcell">
<p class="slogan">"Let Us Help You<br>Become a Freight Pro!"</p>
<div class="floatRight">
<img src="style/truck.jpg" title="Big Truck" alt="Here is an illustration of a flatbed truck with a shipping container secured to the trailer." width="290" height="250">
<h2>Who We Are</h2>
<p>We like to ship things. Trucking companies are annoying, so we make it better for you. We give you a fair freight cost. When things go awry, you complain to us, and we fix it for you. We promise we won't express our deep anguish to you when you complain too much. I'm sure I will replace this sample text before a customer reads this. I need a new job. We are freight brokers for both full truckload and less–than–load (L.T.L.) shipments. Exporting and border customs suck. Please manage your own customs and port manifests. I don't like that part of freight world.</p>
</div> <!-- end floatRight -->
<div class="floatLeft">
<img src="style/forklift.jpg" title="Forklift" alt="This is a forklift that is used to load pallets and crates into a truck." width="290" height="200">
<h2>What We Do</h2>
<p>Give you quotes. Produce bills of lading. Track your shipments. Manage the carriers. Update your receivers. Answer any questions you might have about the trucking industry. Dispute carrier bills when they make a mistake. A bunch of other stuff in this sample text. Blah Blah Blah. I'm too tired to think of compelling sales copy right now.</p>
</div> <!-- end floatLeft -->
<div class="floatRight">
<img src="style/pallet.jpg" title="Pallet" alt="A pallet is often loaded and secured with shrink wrap as shown in this illustration." width="180" height="190">
<h2>How You Benefit</h2>
<p>Lorem ipsum dolor blah blah blah sample text web design development coding graphics CSS LTL shipment PRO number freight brokerage quotes freight class dimensions residential delivery lift gate limited access delivery commercial dock forklift</p>
</div> <!-- end floatRight -->
<a href="#">Contact Us!</a><br>
<a href="#">Read Our Shipping Guide</a>
<h4>©2018, First Rate Logistics. All rights reserved.</h4>
</div> <!-- end contentmid -->
<div class="contentright tcell"></div>
</div> <!-- end table row -->
<div class="contentfooter tcell"></div>
</div> <!-- end body container -->
…and the new styles:
/* content body design */
.bodycontainer {
display:table;
overflow:hidden;
max-width:770px; /* keeps the body box slightly slimmer than the header at max widths */
margin:0 auto;
margin-top:0;
padding:0;
}
.trow {display:table-row;}
.tcell {display:table-cell;}
.contentleft {
background:url("bodyLR.png") 0 0 repeat-y;
width:59px;
}
.contentmid {
background:#FFF;
width:80%;
margin:0 auto;
}
.contentright {
background:url("bodyLR.png") 50% 0 repeat-y;
}
.contentfooter::before {
background:url("bodycorners.png") 0 0 no-repeat;
width:59px;
}
.contentfooter {
background:url("bodybotcenter.png") 0 0 repeat-x;
}
.contentfooter::after {
background:url("bodycorners.png") 100% 0 no-repeat;
width:59px;
}
/* content elements */
p.slogan {
text-align:center;
font-size:2em;
font-weight:bold;
font-style:italic;
font-family:"Comic Sans MS";
padding-top:30px;
}
h2 {
font-size:2em;
margin-left:1.5em;
display:list-item;
list-style-type:disc;
}
.floatRight img {
float:right;
border:3px inset #000;
width:auto;
max-width:55%; /* tweak as desired */
height:auto;
}
.floatLeft img {
float:left;
border:3px inset #000;
width:auto;
max-width:55%; /* tweak as desired */
height:auto;
}
a {
display:inline-block; /* this isn't enabling me to break the anchor from the block level. Can't apply left margins or move them to the center. */
text-align:center; /* won't move to the center yet */
margin-top:15px;
font-size:2.5em;
}
a:hover, a:active {
text-decoration:none;
color:#42adf4;
}
a:visited:hover, a:visited:active {color:#69198b;}
h4 {
text-align:center;
}
Obviously, I’m adding a lot in a short period of time, and I will have to address a lot of issues as I work through this.
What I want to focus on is the layout images that I have improperly implemented. Sometimes I really wonder how much I truly know… I get discouraged when I fail to do something as simple as displaying my background images properly. I’ll figure it out.
I started off by using an image with the complete design which should look like this:
When implemented similarly to the .border
element using a line like this:
border-image:url("bordergradient.png") 33.3% 33.3% repeat; /* 300x300 */
the design does appear and scales well with the browser, but it is absolutely tiny.
(I don’t understand what the 33.3% shorthand is referencing here)
I gave .bodycontainer
a max-width of 770 pixels so that the body is slightly slimmer than the header at maximum page widths. That looks really nice.
However, I think the best way of implementing this is by using a table display and the .tcell
and .trow
presets, but it just doesn’t seem to display at all with the CSS I have erroneously used.
Some more investigation I will do with Firebug or Developer Tools, and maybe I will find the answer faster than someone else does. I’m really trying my best to be self-sufficient.
Here are the current images:
bodyimages.zip (233.7 KB)
-ty