1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Substituting header for div tags

Discussion in 'CSS' started by cma6, Jul 21, 2012.

  1. #1
    For structural/SEO purposes, I wish to insert <h1> and <h2> tags in my home page at www.vintagetextile.com However, I want to retain the same (or as close as possible) styling currently used for the 2 elements that will now have header tags around them.
    At the upper left of the home page ":High Style Vintage Clothing
    & 18th Century Costume" is currently styled by

    div.flft{float:left;height:74px;width:60%;font:bold 1.15em Verdana,Tahoma,Helvetica,sans-serif;position:relative;left:3em;color:#666666;}

    As you can see from the Page Source, the code is:
    <div class="flft"><p>High Style Vintage Clothing<br>&amp; 18th Century Costume</p></div>

    After changing the code to reference the new rule, when I try

    h1.flft{float:left;height:74px;width:60%;font:bold 1.15em Verdana,Tahoma,Helvetica,sans-serif;position:relative;left:3em;color:#666666;}

    I get a totally different, unwanted look. How can I do the CSS rule to get as close as possible to the current styling but using an <h1> instead of <div> tag?

    I have the same question for the Search element down a bit on the page, where the code is:

    <div class="srch"><a class="sr" href="searchvt.htm">Search </a>Vintage Textile.</div>

    and the relevant styles:

    .srch{padding:.3em;margin:.4em 0 .6em 0;background-color:#F5EBD6;color:Black;font:bold 1.4em "Times New Roman",Times,serif;}

    a.sr:link{color:#00f;background-color:#F5EBD6;text-decoration:none;font:1.4em;}
    a.sr:visited{color:#00f;background-color:#F5EBD6;text-decoration:none;}

    Thanks in advance to you experts!
     
    cma6, Jul 21, 2012 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    What's needed there is to really just throw out the code and start over -- it's far, FAR too much markup, and there are lots of bad/outdated coding choices present for such a simple page; The nonsensical use of DIV where there should be heading tags (which is basically what you are asking about) is indeed the biggest problem -- some extra 'hooks' to help control the style wouldn't hurt either though. Cleaning up the pointless overstuffed keywords meta's redundancies, turning the description meta into an actual natural language description, getting rid of that section of text that's meaningless content and blatant keyword stuffing, etc, etc... really goes on the list as well...

    I'd make a few layout and placement changes, but if I was writing markup for that same site, it would probably go a little something like this:

    
    <!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"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	name="description"
    	content="High style vintage clothing,historic costume,haute couture,designer fashion,decorative textiles (1690-1960) &amp; shawls for the discriminating collector."
    />
    
    <meta
    	name="keywords"
    	content="vintage,clothing,dress,couture,historic,costume,shawls"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="/theme/screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Vintage Textiles - High Style Vintage Clothing and 18th Century Costume
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		Vintage Textiles
    		<span>-</span>
    		<small>High Style Vintage Clothing and 18th Century Costume</small>
    	</h1>
    
    	<div id="sampleImages">
    		<img
    			src="images/Graphics/french_couture.jpg"
    			alt="1930s French couture"
    			width="250" height="400"
    		/>
    		<img
    			src="images/Graphics/gallenga_coat.jpg"
    			alt="Gallenga stenciled coat"
    			width="280" height="400"
    		/>
    		<img
    			src="images/Graphics/fortuny_delphos.jpg"
    			alt="Fortuny Delphos teagown"
    			width="250" height="400"
    		/>
    	<!-- #sampleImages --></div>
    
    	<ul id="mainMenu">
    		<li><a href="early.html">Early</a></li>
    		<li><a href="victorian.html">Victorian</a></li>
    		<li><a href="edwardian.html">Edwardian</a></li>
    		<li><a href="1920s_to_1930s.html">1920s to 1930s</a></li>
    		<li><a href="1940s_to_designer.html">1940s to Designer</a></li>
    		<li><a href="shawlstext.html">Shawls/Textiles</a></li>
    		<li><a href="gallery.html">Gallery</a></li>
    		<li><a href="treasure_hunt.html">Treasure Hunt</a></li>
    		<li><a href="articles.html">Articles</a></li>
    		<li><a href="order.html">Order</a></li>
    		<li><a href="mailto:Linda@vintagetextile.com">Email</a></li>
    		<li><a href="links.html">Links</a></li>
    	</ul>
    
    	<p>
    		Exquisite vintage clothing 1750-1980: Early Costume; 19th-20th century Couture; wearable designer fashion for the discriminating collector. Since 1998 exclusively on the internet, Vintage Textile has offered a wide selection of the best high-style clothing in all the major categories: Early, Victorian, Edwardian, 1920s, 1930s-1950s, 20th century Designer, Shawls/Textiles. We are proud to count major collectors and museums worldwide among our valued customers.
    	</p>
    	
    	<div id="search">
    		<h2><a href="searchvt.html">Search Vintage Textile.</a></h2>
    		<p>
    			You may use our <a href="searchvt.html">Search Page</a> or choose a category on the <a href="#mainMenu">menu</a> to find the perfect vintage gown or accessory. Great design never goes out of style!
    		</p>
    	<!-- #search --></div>
    	
    	<div id="updates">
    		<h2>Update Schedule</h2>
    		
    		<h3>June 8, 2012</h3>
    		<p>
    			- For valued clients over the years, I have been happy to provide to the future bride the gown she will wear on the most important day of her life. The updated <a href="brides.html">Vintage Textile Brides</a> page shows a selection of these gowns as first presented here and then in all their glory at the wedding.
    		</p>
    		
    		<h3>June 26, 2012</h3>
    		<p>
    			- The <a href="treasure_hunt.html">Treasure Hunt</a> section has been updated.
    		</p>
    		
    		<h3>July 31, 2012</h3>
    		<p>
    			- The Edwardian, 1920s-1930s, and 1940s-Designer sections will be updated.
    		</p>
    		
    		<h3>December 14, 2009</h3>
    		<p>
    			- The Gallery of sold items has been updated. This photo archive will be an evolving category available for study and enjoyment. Enter <a href="gallery.html">The Gallery</a>.
    		</p>
    		
    		<hr /><!-- indicate headerless change of topic -->
    		
    		<p>
    			If you would like to be notified when the site is updated, please send your name and email address to <a href="mailto:update@vintagetextile.com">update@vintagetextile.com</a>
    		</p>
    	<!-- #updates --></div>
    	
    	<div id="articles">
    		<h2>Articles</h2>
    		
    		<h3>January, 2011</h3>
    		<p>
    			- Enjoy our new section on <a href="brides.html">Vintage Textile Brides</a>
    		</p>
    		
    		<h3>December, 2008</h3>
    		<p>
    			- Read our updated article on the <a href="vintage_advantage.html">Vintage Advantage </a>
    		</p>
    		
    		<h3>March, 2007</h3>
    		<p>
    			- Read our article on the <a href="little_black_dress.html">Little Black Dress</a>.
    		</p>
    		
    		<h3>December, 2006</h3>
    		<p>
    			Our article on the <a href="storage%20of%20Vintage%20clothing.html">Storage of Vintage Clothing and Textiles</a>.
    		</p>
    		
    		<hr /><!-- indicate headerless change of topic -->
    		
    		<p>
    			To gain an in-depth understanding of the field, please review our comprehensive ongoing series of original articles on all aspects of collecting and investing in vintage clothing.
    		</p>
    		
    		<a href="articles.html" class="readMore">Article Page</a>
    		
    	<!-- #articles --></div>
    	
    	<div id="inPrint">
    		<h2>Vintage Textile in print</h2>
    		
    		<div class="books">
    			<img
    				src="images/Graphics/roadshowx.jpg"
    				alt="Antiques Roadshow book"
    				width="204" height="250"
    			/>
    			<img
    				src="images/Graphics/book1x.jpg"
    				alt="Vintage Fashion Price Guide"
    				width="173" height="250"
    			/>
    			<img
    				src="images/Graphics/inspirations.jpg"
    				alt="VT tambour pictures"
    				width="200" height="250"
    			/>
    		<!-- .books --></div>
    		
    		<ul>
    			<li>
    				<em>Antiques Roadshow Collectibles—the Complete Guide (2003)</em>
    				by Carol Prisant
    			</li><li>
    				<em>Price Guide to Vintage Fashion and Fabrics</em>
    				by Pamela Smith
    			</li><li>
    				<em>Inspirations &quot;In Love with Tambour&quot;—</em>
    				Vintage Textile pictures
    			</li><li>
    				<em>Handbag Chic—200 Years of Designer Fashion</em>
    				by Desire Smith
    			</li><li>
    				<em>Virtual Vintage</em>
    				by Linda Lindroth &amp; Deborah Tornello
    			</li><li>
    				<em>Victoriana Magazine</em>
    				article on Storage of Vintage Clothing
    			</li><li>
    				<em>The Seductive Shoe</em>
    				by Jonathan Walford
    			</li><li>
    				<em>Secret Services—Your Pocket  Fashion Guide</em>
    				by Cary Whitley
    			</li>
    		</ul>
    		
    		<div class="books">
    			<img
    				src="images/Graphics/handbagchicx.jpg"
    				width="204" height="250"
    				alt="Handbag chic"
    			/>
    			<img
    				src="images/Graphics/virtualvintage.jpg"
    				alt="Virtual Vintage book"
    				width="173" height="250"
    			/>
    			<img
    				src="images/Graphics/Victoriana0507.jpg"
    				width="200" height="250"
    				alt="Victoriana Magazine"
    			/>
    			<img
    				src="images/Graphics/shoebook.jpg"
    				alt="Seductive Shoe book"
    				width="241" height="250"
    			/>
    			<img
    				src="images/Graphics/secretservices.jpg"
    				alt="secret services book"
    				width="241" height="250"
    			/>
    		<!-- .books --></div>
    		
    	<!-- #inPrint --></div>
    	
    	<div id="measurementsAndFit">
    		<h2>Measurements and Fit</h2>
    		<p>
    			<a href="new_page_145.html">
    				Click here for help with how to take your measurements.
    			</a>
    		</p>
    	<!-- #measurementsAndFit --></div>
    	
    	<div id="layaways">
    		<h2>Layaways</h2>
    		<p>
    			For information about our Layaway Policy, check the <a href="order.html">Order Page</a> for details.
    		</p>
    	<!-- #layaways --></div>
    	
    	<div id="footer">
    		&copy; Vintage Textile, all rights reserved.
    	<!-- #footer --></div>
    	
    <!-- #pageWrapper --></div>
    
    </body></html>
    
    Code (markup):
    If I have time later and remember, I'll belt out the CSS to go with that -- shouldn't take too long. Funny thing is, even with the extra comments that are in mine it's still a few bytes smaller to boot. Strictly indenting the code and tossing in closing comments can really help make things clearer and easier to maintain. Using consistent markup also means it's easier to keep all your sections looking the same (notice how all your dated news items vary) -- well, unless you use a WYSIWYG, in which case you're up **** creek.
     
    deathshadow, Jul 22, 2012 IP
  3. cma6

    cma6 Member

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    I have my spaghetti code and style sheet working well now with header tags. (I want to consult with you on a redo of the homepage when I can get to that.)
    However, the style sheet shows 3 validation errors.

    CSS validation problem:
    "1 body Value Error : font / is not a font-family value : medium / 1.2 Verdana,Tahoma,Helvetica,sans-serif

    20 #preface Value Error : font / is not a font-family value : 1.1em / 1.3 Verdana,Tahoma,Helvetica,sans-serif

    32 div.cl ul Value Error : font / is not a font-family value : 1em / 1.3 Verdana,Tahoma,Helvetica,sans-serif

    The rules are:
    body{background-color:#fff;color:#000;font:medium/1.2 Verdana,Tahoma,Helvetica,sans-serif;margin:1em 3em 0 3em;}

    #preface{padding:.3em;margin-bottom:1.2em;font:1.1em/1.3

    div.cl ul{list-style-type:none;font:1em/1.3 Verdana,Tahoma,Helvetica,sans-serif;}Verdana,Tahoma,Helvetica,sans-serif;}
     
    cma6, Jul 22, 2012 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    You can't mix named sizes in the condensed font property, your second one is incomple[te, your third one has the font-family twice, and I don't trust not stating a metric on line-height... sure, there are a bunch of {nasty string of expletives omitted} over at Sitepoint who claim there's nothing wrong with it, completely ignoring that it doesn't work for me on half my systems even with screenshots showing it not working. Admittedly I'm a large font/120 dpi user, so I tend to see a lot of broken layouts from half-assed site building methods -- many such methods advocated by alleged 'experts' in this field.

    Stuffing all the attributes and values in the CSS onto one line like that makes it VERY hard to tell where one begins and another ends, and even harder to diagnose or tell what's going on... your original lacks a reset so it's hard to make it consistent across browsers, it doesn't really scale up/down size-wise very well as many of the layout concepts (like a fixed number of images across) are the antithesis of the fluid page width or responsive design.

    Though I'm having a hard time saying if you have too little or too much CSS -- a lot of it seems redundant, and there's a lot of things I would consider to be missing...
     
    Last edited: Jul 22, 2012
    deathshadow, Jul 22, 2012 IP
  5. dmg68

    dmg68 Peon

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I saw your code. it's hard to understand ????:confused:
     
    dmg68, Jul 22, 2012 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Here's what I came up with:
    http://www.cutcodedown.com/for_others/cma6/template.html

    as with all my examples the directory:
    http://www.cutcodedown.com/for_others/cma6/

    ... is wide open for easy access to the bits and pieces -- and don't worry about it stealing link/search mojo, it's behind a nofollow/noindex robots.txt. Valid XHTML 1.0 Strict, would be valid CSS if not for some vendor specific stuff.

    Took a few stylistic liberties, like setting a max-width (it was WAY too big on my 2560x1440 desktop), a min-width (below a certain point it really fell apart), and styling the menu elements because on the original I didn't even realize that was a menu until I looked at the code. Rewrote a few sections to get more meaningful text inside the anchors too, and use text-align to make those image sections a bit prettier.

    The H1 is a wee bit different from what was posted in the original, this is so that it has decent images off/CSS on graceful degredation, though if you use the outdated/half-assed "resize text only" zoom in FF, the text will peak out from underneath the image (Oh well, the new zoom everyone ripped off from Opera works just fine).

    Though it's still not the best from an accessibility standpoint or if you want to add responsive layout to it -- I'd put serious thought to making a sidebar and moving those three tall images and perhaps some of the CTA's (like the measurements link) into it, so people can get to the meaningful content faster.

    -- edit -- I also just went through and got a bit more aggressive with the image encodings to get the filesizes under control... page is still painfully massive at 200K+, but it's better than the 3/4ths a megabyte it was consuming.
     
    Last edited: Jul 23, 2012
    deathshadow, Jul 23, 2012 IP
  7. cma6

    cma6 Member

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #7
    Hi DeathShadow:
    Thank you for the work you have done. I have to review this with Linda. Our main concern was on cleaning up code. She designed the look and will be reluctant to make changes there. We have an update on 7/31. Once past that date, I will carefully study the code you used.
    Regards, Jon
     
    cma6, Jul 23, 2012 IP