Menu
Community /Pin to ProfileBookmark
@NogDogJul 25.2007 — #
[upl-file uuid=88ded4e0-7e25-4cf0-a277-19b61f362af2 size=9kB]top.png[/upl-file]
[upl-file uuid=ba05eaf5-b813-46ea-a90e-7ad129568779 size=431B]bottom.png[/upl-file]
[upl-file uuid=bbd9a37f-f5b8-44f5-8323-2f3e1d10ee62 size=186B]sides.png[/upl-file] @NogDogJul 25.2007 — #Here's my attempt using a percentage width (zip file contains test.html plus 8 .png graphic files):
[upl-file uuid=365b25fb-f89a-46e1-9711-31df3b67efa9 size=12kB]test.zip[/upl-file] @NogDogJul 26.2007 — #
Because it seems to be some sort of heading ("Registration"), and it gives more semantic meaning to the document to use a tag with a relevant meaning as opposed to a more generic tag such as DIV.@NogDogJul 26.2007 — #If you make it a DIV, then you'll need to either give it an ID and reference that ID in the CSS, or give it a class and reference that class as a descendant of the containing DIV's ID.
Ultimately, you can use whatever tag you want, as long as it's some sort of block-level element. What you want to keep in mind are two things: how will it display in non-graphical browsers, and how will search engines interpret and weight the various elements?
If you use Firefox with the web developer extension, you can get an idea how it will appear in a non-graphic browser and what the logical and semantic flow of the document is. Simply open the page then select "CSS -> Disable Styles -> All Styles" and "Images -> Disable Images -> All Images". If the page still makes logical sense, then your HTML markup probably is reasonable.
How would you code this with divs?
I know how to do this with tables, but I’m trying to convert my old ways and start using divs. The attached image is a menu box of sorts where the height and width is variable and all the colors are images. The top bottom left and right all have a repeating background. I’m not quite sure how you would do this with divs. Would it be 3 divs? 5?
With tables I would have 3 columns and 3 rows.
Thanks!
[upl-file uuid=aae6a139-75ca-43e1-9a06-aa860e9baf8c size=41kB]menu_example.jpg
Sign in
to post a comment11 Comments(s) ↴
0
@NogDogJul 25.2007 — #<i>
</i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Test</title>
<style type="text/css">
<!--
body {
background-color: white;
color: black;
font: 90% arial, sans-serif;
margin: 0;
padding: 10px;
}
#test {
background: white url(sides.png) repeat-y 0 0;
width: 476px;
margin: 0 auto;
padding: 0 35px 0 45px;
}
#test h2 {
padding: 0;
margin: 0 -35px 0 -45px;
}
#bottom {
margin: 0 -35px 0 -45px;
width: 556px;
padding: 0;
height: 21px;
background: white url(bottom.png) no-repeat 0 0;
}
-->
</style>
</head>
<body>
<div id="test">
<h2><img src='top.png' alt='Registration'></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</p>
<div id="bottom"></div>
</div>
</body>
</html>
0
@NogDogJul 25.2007 — #Here's my attempt using a percentage width (zip file contains test.html plus 8 .png graphic files):0
@NogDogJul 26.2007 — #Thanks again Nog! I guess within a div I can align images differently unlike tables. Nifty.
One thing though, why do you use the H2 tag around the top images?[/QUOTE]
Because it seems to be some sort of heading ("Registration"), and it gives more semantic meaning to the document to use a tag with a relevant meaning as opposed to a more generic tag such as DIV.
0
@NogDogJul 26.2007 — #Ultimately, you can use whatever tag you want, as long as it's some sort of block-level element. What you want to keep in mind are two things: how will it display in non-graphical browsers, and how will search engines interpret and weight the various elements?
If you use Firefox with the web developer extension, you can get an idea how it will appear in a non-graphic browser and what the logical and semantic flow of the document is. Simply open the page then select "CSS -> Disable Styles -> All Styles" and "Images -> Disable Images -> All Images". If the page still makes logical sense, then your HTML markup probably is reasonable.