...

View Full Version : Transitioning to div's help



KatoPC
12-30-2009, 05:37 AM
I have a good understanding on using div's, but I have to do this to the footer to get it to work
<div id="footer">
<div id="footerl"></div>
<div id="footerr"></div>
</div>

footerl, footerr each are 50px by 50px with a gradient image to make a corner. footer has the background repeated x. Problem is when I add text to footer it breaks. I hope someone can understand what's going on.

vineet
12-30-2009, 05:52 AM
you need to post the css styles also.

or post an online link to the page where you are using.

vineet

KatoPC
12-30-2009, 06:01 AM
#footerl {
background-image:url(images/edgelb.jpg);
float:left;
height:50px;
width:50px;
position:relative;}
#footer {
height:50px;
width:900px;
position:relative;
float:left;
background-image:url(images/footer.jpg);
background-repeat:repeat-x;}
#footerr {
background-image:url(images/edgerb.jpg);
float:right;
height:50px;
width:50px;
position:relative;}

Excavator
12-30-2009, 06:25 AM
Hello KatoPC,
You have a bit of room there, could put quite a bit of text before you ran out.
Where were you putting it and how much was there?

Have a look at this, just copy/paste the whole thing into a new .html document -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
height: 400px;
width: 800px;
margin: 30px auto 0;
background: #999;
font-size: 0.8em;
}
#footer {
width: 900px;
margin: 0 auto; /*centers footer*/
overflow: auto; /*clears floats*/
background: #F00 url(images/footer.jpg) repeat-x; /*color for demo only*/
text-align: center; /*horizontally centers text*/
line-height: 50px; /*vertically centers text*/
}
#footerl {
height: 50px;
width: 50px;
float: left;
background: #000 url(images/edgelb.jpg); /*color for demo only*/
}
#footerr {
height: 50px;
width: 50px;
float: right;
background: #00f url(images/edgerb.jpg); /*color for demo only*/
}
</style>
</head>
<body>
<div id="container">
<p>Some clever content here</p>
<!--end container--></div>
<div id="footer">
<div id="footerl"></div>
<div id="footerr"></div>
<p>footer text here</p>
<!--end footer--></div>
</body>
</html>

KatoPC
12-30-2009, 05:09 PM
I'll see if I can replicate what I did

Not much text just the copyright info and design link. I have a test webspace from charter I can ftp to. Check back for a link.

Test Link (http://webpages.charter.net/katocomputers/)

KatoPC
12-31-2009, 02:07 AM
Added link to previous post

Excavator
12-31-2009, 02:19 AM
Link is dead right now...

I did get a quick look at in once though.
In your markup you have the floats coming after the body section of your footer. You did not re-arrange them like I showed you in my first reply.
Use the CSS I quoted you in my first reply also.

KatoPC
12-31-2009, 04:13 AM
I set up the footer id as you specified putting the footer after the </div> for container...correct?
I'll post the entire style sheet OLD STYLES



#container {
float:none;
height:1100px;
width:900px;
background-color:#FFFFFF;
}
#edgel {
background-image:url(images/edgel.jpg);
float:left;
height:1050px;
width:50px;
position:relative;
}
#adbanner {
float:left;
height:60px;
width:800px;
position:relative;
}

#edger {
background-image:url(images/edger.jpg);
float:right;
height:1050px;
width:50px;
position:relative;
}
#header {
height:180px;
width:800px;
background-image:url(images/Inertiaheader3.png);
position:relative;
visibility:visible;
float:left;
}
#nav {
height:35px;
width:800px;
font-family:Verdana, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
position:relative;
vertical-align:middle;
float:left;
}
#wrapper {
float:none;
height:1100px;
width:100%;
background-color:#808080;
}
#spacer {
height:20px;
width:800px;
visibility:hidden;
position:relative;
vertical-align:middle;
float:left;
}
#content2 {
float:left;
height:100px;
width:400px;
position: relative;
}
#content3 {
float:left;
height:100px;
width:400px;
position:relative;
}
#heading2 {
float:left;
height:40px;
width:400px;
position:relative;
overflow:hidden;
}
#heading3 {
float:left;
height:40px;
width:400px;
position:relative;
overflow:hidden;
}
#footerl {
background-image:url(images/edgelb.jpg);
float:left;
height:50px;
width:50px;
position:relative;
}
#content {
height:400px;
width:800px;
position:relative;
float:left;
}
#mission {
height:60px;
width:800px;
position:relative;
float:left;
}
#footer {
height:50px;
width:900px;
background-image:url(images/footer.jpg);
background-repeat:repeat-x;
overflow: auto;
margin: 0 auto;
}
#footerr {
background-image:url(images/edgerb.jpg);
float:right;
height:50px;
width:50px;
position:relative;
}

#spacer2 {
float:left;
height:25px;
width:800px;
position:relative;
}
#heading {
float:left;
height:40px;
width:800px;
position:relative;
}
#content {
float:left;
height:490px;
width:800px;
position:relative;
}
.mission_text {
font-family:Verdana, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:bold;
padding-left:100px;
padding-right:100px;
padding-top:15px;
}
.heading_text {
font-family:Verdana, Helvetica, sans-serif;
font-size:24px;
font-style:oblique;
font-weight:bold;
padding-top:5px;
}
.heading2_text {
font-family:Verdana, Helvetica, sans-serif;
font-size:18px;
font-style:oblique;
font-weight:bold;
padding-top:5px;
}
.heading3_text {
font-family:Verdana, Helvetica, sans-serif;
font-size:18px;
font-style:oblique;
font-weight:bold;
padding-top:5px;
}
.content2_text {
padding-top:8px;
}
.content3_text {
padding-top:20px;
}
.footer_text {
font-family:Verdana, Helvetica, sans-serif;
font-size:9px;
font-style:normal;
font-weight:bold;
height: 50px;
width: 200px;

abduraooft
12-31-2009, 09:22 AM
Hi there,

The floated elements should be before their non floated siblings in the markup order. Thus
<div id="footer">
<div id="footerl"></div>
<div id="footerr"></div>
<p>Some text</p>
</div> should work with your current CSS.
PS:
Transitioning to div's help That's not what you need to practice. Your current approach has got divitis (http://csscreator.com/divitis)! You need to make your document semantic (http://boagworld.com/technology/semantic-code-what-why-how)!

Excavator
12-31-2009, 09:48 AM
Outside #content, inside #content... whatever works best with your layouts images. Try it both ways.

ab has shown you how to fix the floats out of order that I was referring to.

Please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

KatoPC
12-31-2009, 06:53 PM
Thankyou

So div's don't necessarily need a class to them? Remember I have a good understanding :thumbsup:

I tried that but couldn't get the text to center or images to be links

Excavator
12-31-2009, 07:09 PM
So div's don't necessarily need a class to them? Remember I have a good understanding :thumbsup:

I tried that but couldn't get the text to center or images to be links

Is this (http://webpages.charter.net/katocomputers/) the current version you're working with? Update that and there is no need to post code here, we can get markup/CSS from the link.

KatoPC
12-31-2009, 07:54 PM
No not yet, I am in process of rewriting

How would I position the text in the div's (basically center and middle) everything always is at the top by default.

Sorry to ask, but I am trying to relearn new habits :eek:


I still currently use dw8

KatoPC
12-31-2009, 08:00 PM
I have uploaded what I have so far Link (http://webpages.charter.net/katocomputers/) should be current

Excavator
12-31-2009, 08:14 PM
KatoPC,
We keep telling you how to fix that but it hasn't made it into the current version yet. (I see you're updating now though)
Right now your code looks like this (pay particular attention to the one line highlighted in red)

<div id="content2">
<div class="content2_text"><a href="http://helifreak.com/forumdisplay.php?f=216" target="_blank">
<img src="images/hflogo.gif" border="no"></a></div>
</div>
<div id="content3">
<div class="content3_text"><a href="http://twitter.com/inertiarc" target="_blank">
<img src="images/twitterlogo.jpg" border="no"></a></div>
</div>
<div id="footer"><p>Some text</p>
<div id="footerl"></div>
<div id="footerr"></div>
</div>
</div>
</div>


Move that one line in red to this position

<div id="content2">
<div class="content2_text"><a href="http://helifreak.com/forumdisplay.php?f=216" target="_blank">
<img src="images/hflogo.gif" border="no"></a></div>
</div>
<div id="content3">
<div class="content3_text"><a href="http://twitter.com/inertiarc" target="_blank">
<img src="images/twitterlogo.jpg" border="no"></a></div>
</div>
<div id="footer">
<div id="footerl"></div>
<div id="footerr"></div>
<p>Some text</p>
</div>
</div>
</div>

KatoPC
12-31-2009, 09:07 PM
I thought I up loaded the new css too

KatoPC
12-31-2009, 09:09 PM
I did the new file is there, but I haven't got to the footer quite yet, I was trying rid the main page of clutter.

Excavator
12-31-2009, 09:10 PM
I did the new file is there, but I haven't got to the footer quite yet, I was trying rid the main page of clutter.

No hurry :)
You're getting closer and closer :thumbsup:

KatoPC
12-31-2009, 09:13 PM
It's hard not to think in tables and cells, I have to unlearn what I have learned :thumbsup:

Positioning the text?
I tried the text align and the vertical align in the corresponnding div id but that did not work

Arbitrator
01-01-2010, 01:36 AM
Positioning the text?
I tried the text align and the vertical align in the corresponnding div id but that did not workText can be centered with text-align: center;.

Block-level elements such as div (with display: block by default) can be centered with margin-left: auto; and margin-right: auto; used together. Keep in mind the block-level element needs to have a width smaller than its parent element to be centered. Since elements with display: block (e.g., div elements) auto-expand, this means you'll need to specify a width or max-width or change it from display: block to a shrink-to-fit display type. (Otherwise, you'll be trying to center a div element that's the same width as its parent, so there's no space to center it in...)

Also, FYI, vertical-align only vertical aligns block-level elements (and works as expected for table-based designers) when applied to elements with display: table-cell (e.g., td and th). Otherwise, it can only be used in inline elements to align them with respect to a line of text. (It was intended mainly to align bits of inline content when a single line contains text of different sizes or images.)

KatoPC
01-01-2010, 02:50 AM
Thankyou

KatoPC
01-01-2010, 04:01 AM
Arbitrator how does that align the text within the div. could I have some example.

Arbitrator
01-01-2010, 04:56 AM
Arbitrator how does that align the text within the div. could I have some example.
<div style="text-align: center;">Hello World!</div>


<div style="width: 1000px; background: tan;">
<div style="width: 200px; margin: 0 auto; background: lightblue;">Hi</div>
</div>

KatoPC
01-01-2010, 05:01 AM
Thankyou, sorry my question was more stated as middle. ex got a div that's 400px height you want text in the middle 200px height.

Excavator
01-01-2010, 05:16 AM
Thankyou, sorry my question was more stated as middle. ex got a div that's 400px height you want text in the middle 200px height.

There's horizontal centering and vertical centering.
Horizontal is easy and Arbitrator has shown that to you.

Here are some examples of vertical centering (http://nopeople.com/CSS/vertical%20center%20with%20CSS/).

KatoPC
01-01-2010, 05:28 AM
Sorry I must have missed something


Thank you to all for your patience

KatoPC
01-01-2010, 07:06 PM
Working on a new layout. In the #content lets say can I have multiple <p> and position each one differently or would it be easier to nest a div inside the content div. Test link (http://webpages.charter.net/katocomputers/)


.body {background-image: url(images/bg3.jpg);
background-repeat:repeat-x;
}

#container {
height: 1000px;
width: 800px;
position: absolute;
left: 50%;
top: 5%;
margin-left: -400px;
}
#topbar {
background-image: url(images/Inertiaheader3.png);
height: 180px;
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
top: 0%;
}
#navbar {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #000000;
height: 40px;
width: 800px;
position: absolute;
left: 50%;
top: 190px;
margin-left: -400px;
text-align: center;
}
#heading {
font-family: Verdana, Helvetica, sans-serif;
font-weight: bold;
height: 35px;
width: 800px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -400px;
position: absolute;
left: 50%;
top: 240px;
text-align: center;
}
#footer {
font-family: Verdana, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
height: 50px;
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
top: 970px;
text-align: center;
}

#mission {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
height: 50px;
width: 600px;
margin-left: -300px;
position: absolute;
left: 50%;
top: 300px;
text-align: center;
display: table;
}

KatoPC
01-02-2010, 02:33 AM
Ok got some new code to view check it out Test Link (http://webpages.charter.net/katocomputers/)

I had Divitis before, I don't think I can condense anymore???

Arbitrator
01-02-2010, 07:40 AM
Working on a new layout. In the #content lets say can I have multiple <p> and position each one differently or would it be easier to nest a div inside the content div.I would place your paragraph elements into a single container and position that.

Also, your structure in incorrect, it should be something like:


<div id="content">
<h2>Heading</h2>
<p>Heading applies to this paragraph.</p>
<p>Ditto for this one.</p>
<h3>Heading Nested</h3>
<p>"Heading" and "Heading Nested" apply to this paragraph.</p>
<h2>Heading 2.0</h2>
<p>Only "Heading 2.0" covers this paragraph.</p>
</div>

The structure is clearer if I throw some div elements in there, though these aren't necessary:


<div id="content">
<div>
<h2>Heading</h2>
<p>Heading applies to this paragraph.</p>
<p>Ditto for this one.</p>
<div>
<h3>Heading Nested</h3>
<p>"Heading" and "Heading Nested" apply to this paragraph.</p>
</div>
</div>
<div>
<h2>Heading 2.0</h2>
<p>Only "Heading 2.0" covers this paragraph.</p>
</div>
</div>

Also, FYI, it's considered amateurish to center text without a good reason. (I say this as a graphic designer.) I'd stick with left-aligned text unless you're trying to create some kind of visual impression.

KatoPC
01-02-2010, 04:43 PM
Just me probably, but some things look better centered:)

So each tag would have a corresponding style for positioning :o

Why would h2, h3 be considered nested because it is inside a div?

KatoPC
01-03-2010, 02:24 AM
Is there a web standard list of div id's, placement and their use ??

KatoPC
01-03-2010, 03:46 AM
Why does padding increase the div box size, resulting in different result from when you use padding in tables?

Excavator
01-03-2010, 04:44 AM
Why does padding increase the div box size, resulting in different result from when you use padding in tables?

padding/margin/border all count in figuring total width. Have a look at the box model explained here. (http://www.w3.org/TR/CSS2/box.html)

Arbitrator
01-03-2010, 06:19 AM
Just me probably, but some things look better centered:)Centering the layout is fine, but the text doesn't need to be centered. Not only is it poor design, but it's harder to read centered text since you don't have that invisible line down the left side of the text to serve as a visual guide otherwise. But it's your site, of course. :)


So each tag would have a corresponding style for positioning :oNo. In the examples I gave, you would only need to center the outer element (i.e., div#content). If you wanted to center the paragraph text, you would use a CSS rule like div#content p { text-align: center; } to center the text within the centered layout.


Why would h2, h3 be considered nested because it is inside a div?They aren't nested, but their content is semantically nested. h2 is a level two heading and h3 is a level three heading. You only use h3 headings when you need to subdivide the content already covered by an h2 heading. The same concept applies for all of the lower level headings.

Think of the headings like the headings in a table of contents in a school text book (which often have detailed TOCs). The top-level headings describe a broad topic (usually a chapter) and the subheadings describe a more specific topic under this broad topic (usually a section of a chapter). h1 is typically reserved for the Web site or document title, so the chapter titles will usually be h2 elements and the section titles h3 to h6 elements.


Why does padding increase the div box size, resulting in different result from when you use padding in tables?Because the overall width of a box under the standard CSS box model is described as (left border width) + (left padding width) + (width) + (right padding width) + (left padding width) = (total width). In that model, the CSS width property only defines the space reserved for content while CSS padding and borders consume additional space.

HTML/XHTML tables are a special case that use a different model. The CSS width property instead refers to the width of the entire (table) element. Table and cell borders, border-spacing, table and cell padding are subtracted from this overall width and the remaining width becomes the minimum available content width.

Note that tables created using the CSS display property use the standard box model, not the special-cased model.


Is there a web standard list of div id's, placement and their use ??There are no standard IDs. IDs are just meaningless identifiers you can use to quickly target an element.

KatoPC
01-03-2010, 06:27 AM
Thankyou very much for the multiple answers. That is a heckuva explaination. Yes I can see your point about having the whole page centered. I centered the content and then left aligned, yes the left align "straight" line is easier to read. :thumbsup: The text indent may also prove useful.

KatoPC
01-03-2010, 06:37 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body class="body">
<div id="container">
<div id="topbar">
</div>
<div id="navbar">
<script language="javascript" src="images/nav.js"></script>
<script language="javascript">draw_buttons("images","",-1);</script>
<noscript>To display this page, you need to have JavaScript enabled.</noscript>
</div>
<div id="content">
<h2>Innovative By Design, Affordable By Choice!</h2>
<p>We here at Inertia RC are all pilots first and we know all about the needs of performance. Which is why we strive to offer only the best quality products for the most demanding pilots, at a super competative price!</p>
<p>Ditto for this one.</p>
<h3>Heading Nested</h3>
<p>"Heading" and "Heading Nested" apply to this paragraph.</p>
<h2>Heading 2.0</h2>
<p>Only "Heading 2.0" covers this paragraph.</p>
</div>
</div>
<div id="footer">
<p>All Rights Reserved &copy; Inertia RC 2009 Design By<br /><a href="http://www.katocomputers.com" target="_blank">Kato Computers &amp; Design</a></p>
</div>
</body>
</html>

So this would be more semantic. You mentioned centering, would there be a better way to center the navbar? The text centers, but the buttons don't unless I add the unrulely center tag ;)

Arbitrator
01-03-2010, 11:44 AM
So this would be more semantic. You mentioned centering, would there be a better way to center the navbar? The text centers, but the buttons don't unless I add the unrulely center tag ;)Your current navigation menu is being generated via a script. You would style this generated code to center your menu. The generated code is:


<div id="navbar"><center><script language="javascript" src="images/nav.js"></script>

<script language="javascript">draw_buttons("images","",-1);</script><table id="mbtn_tb" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="padding-right: 12px;" id="mbtn_td0"><a onmouseover="btnMouseOver('mbtn0')" onmouseout="btnMouseOut('mbtn0')" href="index.html" target="_self"><img src="images/mbtn0_0.gif" name="mbtn0" alt="" border="0" height="25" width="90"></a></td><td style="padding-right: 12px;" id="mbtn_td1"><a onmouseover="btnMouseOver('mbtn1')" onmouseout="btnMouseOut('mbtn1')" href="products.html" target="_self"><img src="images/mbtn1_0.gif" name="mbtn1" alt="" border="0" height="25" width="90"></a></td><td style="padding-right: 12px;" id="mbtn_td2"><a onmouseover="btnMouseOver('mbtn2')" onmouseout="btnMouseOut('mbtn2')" href="reviews.html" target="_self"><img src="images/mbtn2_0.gif" name="mbtn2" alt="" border="0" height="25" width="90"></a></td><td style="padding-right: 12px;" id="mbtn_td3"><a onmouseover="btnMouseOver('mbtn3')" onmouseout="btnMouseOut('mbtn3')" href="dealers.html" target="_self"><img src="images/mbtn3_0.gif" name="mbtn3" alt="" border="0" height="25" width="90"></a></td><td style="padding-right: 12px;" id="mbtn_td4"><a onmouseover="btnMouseOver('mbtn4')" onmouseout="btnMouseOut('mbtn4')" href="downloads.html" target="_self"><img src="images/mbtn4_0.gif" name="mbtn4" alt="" border="0" height="25" width="90"></a></td><td style="padding-right: 12px;" id="mbtn_td5"><a onmouseover="btnMouseOver('mbtn5')" onmouseout="btnMouseOut('mbtn5')" href="contactus.html" target="_self"><img src="images/mbtn5_0.gif" name="mbtn5" alt="" border="0" height="25" width="90"></a></td><td style="padding-right: 12px;" id="mbtn_td6"><a onmouseover="btnMouseOver('mbtn6')" onmouseout="btnMouseOut('mbtn6')" href="warranty.html" target="_self"><img src="images/mbtn6_0.gif" name="mbtn6" alt="Button7" border="0" height="25" width="90"></a></td></tr></tbody></table></center>
<noscript>To display this page, you need to have JavaScript enabled.</noscript>
</div>

As you can see, that's quite a mess and uses a table for layout. Further, it fails to display anything meaningful when scripting or images are disabled. In such cases, your site becomes virtually unnavigable.

I've written several demos that show how you might recreate the same menu using better techniques at http://www.jsgp.us/demos/cf185541/. I'd recommend looking over the file document.XHTML1.0.html, the script, and the style sheet. It basically uses text-align: center to center the menu (which works because I've changed the li elements from block-level elements into inline elements via display: inline, so they get treated as text.)

KatoPC
01-03-2010, 04:36 PM
I actually have to be honest there. Script is from a button maker. I know I know a cardinal sin :eek: and I have no idea why they use a table, the ease of it I guess.



Thankyou for the demo, the software lets you export as pure html, but I am still pretty sure they use a table

Arbitrator
01-04-2010, 04:18 AM
I actually have to be honest there. Script is from a button maker. I know I know a cardinal sin :eek: and I have no idea why they use a table, the ease of it I guess.Yeah, so I figured.

Just FYI, you can see what your script's generated code looks like by going to "Edit" > "Select All" (Ctrl+A) then right-clicking the page and clicking "View Selection Source". (Alternatively, you can go to "View Source" > "View Generated Source" if you have the Web Developer Firefox extension.)

The above assumes that you use Firefox. I don't know if other browsers have an analogous feature.
You would have to look at that and see what you can target with a CSS selector to determine how to style the generated elements.


Thankyou for the demo, the software lets you export as pure html, but I am still pretty sure they use a tableIt's probably just the generated code exported to HTML. That would still be better though since right now you don't have a navigation menu at all if scripting is disabled. (That would be most common if the user is a search engine bot, is using the Firefox NoScript extension, or they're on a mobile device, I would guess.)

It probably won't help a user, human or bot, to be provided with "To display this page, you need to have JavaScript enabled." instead of navigation links.

KatoPC
01-04-2010, 04:24 AM
I have redone the buttons with a styles or no styles option, so when you remove styles you can still navigate the site and uploaded to test site, but that won't fix the no js...lol


Edit I can output just images and then do it long hand or use w3shcools dom to generate code

Arbitrator
01-04-2010, 05:08 AM
I have redone the buttons with a styles or no styles option, so when you remove styles you can still navigate the site and uploaded to test site, but that won't fix the no js...lolYou can reuse the code I wrote if you want. It uses the same image names and structure except that the script is in the same directory as the page instead of in the images folder like you have it. You'll also need to make sure to call script(); via the body start tag.

The hardest part would probably be redoing your style sheet although the one I wrote is fairly simple.


Edit I can output just images and then do it long hand or use w3shcools dom to generate codeYeah, learning to use the DOM would be helpful.

Speaking of images, I forgot that the other problem was that you don't have any useful fallback content when images fail to display. I believe your alt attribute text reads something like "button 1", "button 2", etc. I also had that fixed.

KatoPC
01-06-2010, 02:41 PM
Thank you arbitrator, :thumbsup:

I am used to making a image a link just by the <a href> Is there a better way to do that with a div? when the image is the bg? The only way I could get it to work was insert the image so now it's not a bg.


<div id="support"><h3>Visit Our Support Forum</h3><a href="http://helifreak.com/forumdisplay.php?f=216" target="_blank"><img src="images/hflogo.gif" width="150" height="53" border="0" /></a>
</div>
<div id="follow">
<h3>Follow Us On</h3><a href="http://twitter.com/inertiarc" target="_blank"><img src="images/twitterlogo.jpg" width="150" height="55" border="0" /></a>
</div>
</div>
<!--end container-->
<div id="footer"><p>All Rights Reserved &copy; Inertia RC 2009 Design By<br /><a href="http://www.katocomputers.com" target="_blank">Kato Computers &amp; Design</a></p></div>

Arbitrator
01-07-2010, 09:20 AM
I am used to making a image a link just by the <a href>This is the correct way to do it. Make sure you add an alt attribute to the img elements that have the text you would use if the image link was a text link.


<div id="follow">
<h3>Follow Us On</h3><a href="http://twitter.com/inertiarc" target="_blank"><img src="images/twitterlogo.jpg" width="150" height="55" border="0" /></a>
</div>

In this code, you have a partial sentence that's obviously supposed to be followed by the word "Twitter", so that would be the text of your link: Follow Us On <a><img alt="Twitter"></a>. With images disabled, that would be equivalent to and display as Follow Us On <a>Twitter</a>. If accessibility isn't a good motivator, let search engine rankings be because that's what the search engine is going to see: the text version.

By the way, I'm a bit dubious about that use of h3. That doesn't really look like a header to me. That code block would seem to make more sense as:


<div id="follow">
<p>Follow Us On <a href="http://twitter.com/inertiarc" target="_blank"><img alt="Twitter" src="images/twitterlogo.jpg" width="150" height="55" /></a></p>
</div>

That border="0" can be converted to CSS with one line: a img { border: none; } so I omitted it. IMO, target="_blank" is bad practice, but I'm not going to argue it right now.

KatoPC
01-07-2010, 05:02 PM
I see Thankyou

I started a different post in error :mad: Was a differrent topic, should I mark this resolved and continue with the other one?

KatoPC
01-08-2010, 02:48 AM
I tried the example, I must be doing something wrong :eek:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum