duplicate div id's

thiefwriter · 09-15-2011, 08:45 PM

I should know this, but I'm so new at html and css. My eBook looks great in ePub and Mobi tests, but ePubCheck and ThreePress gave me lots of errors. Biggest seems to be duplicate div id's.

I guess that was my big mistake. I used one css div id for all images+caption, and another css div id for all sections I call "sidebar" so they have a certain look and rules at top and bottom.

There are many images and "sidebars" in each book chapter. How should I have handled the divs? I'm sure it's basic css…

I'll post the other error-type in a separate thread.

Thanks so much to anyone who can guide me…

JSWolf · 09-15-2011, 08:49 PM

Are you sure you didn't mean to put these in class and not ID? All you have to do if your class is correct is add say an incrementing number to each div.

charleski · 09-15-2011, 09:10 PM

Yes, while css styling can be directed to apply to a specific id, it's really designed to be used with class selectors. Ids have to be unique within each particular file and are best used as targets for anchor references. I suspect you could solve your problem simply by changing all id="sidebar" to class="sidebar" (and change #sidebar in the css to .sidebar).

thiefwriter · 09-15-2011, 10:02 PM

Ugh, just lost my complicated reply with code. But I think maybe charleski's advice will help. I'll work on that and report back. Thanks so much!

thiefwriter · 09-15-2011, 10:14 PM

Is it okay then to have multiple instances of "div class="sidebar" in one ebook chapter?

And shall I change the div.pic's to the same code, i.e. "div class="pic"?

A sample of my html:

Code:

<div id="sidebar">
			<p class="sidebarmark">Aside&hellip;</p>
			<p class="subhead">X-Ray Glasses</p>
blah, blah, blah…
</div>

Which should now become, if I understand correctly:

Code:

<div class="sidebar">
			<p class="sidebarmark">Aside&hellip;</p>
			<p class="subhead">X-Ray Glasses</p>
blah, blah, blah…
</div>

and

Code:

<div id="pic">

				<p class="center"><img src="b.luciano.jpg" alt="luciano" /><br />
						Luciano, a pickpocket who works on trams and buses.
					</p>
				</div>

…which should now become "div class="pic" ?

Just shows how badly a newby can screw it up. I needed to format an ebook, but I didn't know much about html and css. I'm learning, I hope…

Jellby · 09-16-2011, 05:19 AM

And you should change your CSS file from div#sidebar to div.sidebar (# is for ids, . is for classes)

thiefwriter · 09-17-2011, 12:00 PM

Thanks for the help everyone. That fixed me right up. I've got an error-free epub now!

09-15-2011, 08:45 PM	#1
thiefwriter Member Posts: 11 Karma: 10 Join Date: Sep 2011 Device: formatting for all	duplicate div id's I should know this, but I'm so new at html and css. My eBook looks great in ePub and Mobi tests, but ePubCheck and ThreePress gave me lots of errors. Biggest seems to be duplicate div id's. I guess that was my big mistake. I used one css div id for all images+caption, and another css div id for all sections I call "sidebar" so they have a certain look and rules at top and bottom. There are many images and "sidebars" in each book chapter. How should I have handled the divs? I'm sure it's basic css… I'll post the other error-type in a separate thread. Thanks so much to anyone who can guide me…

09-15-2011, 10:02 PM	#4
thiefwriter Member Posts: 11 Karma: 10 Join Date: Sep 2011 Device: formatting for all	I'll try this before bothering you… Ugh, just lost my complicated reply with code. But I think maybe charleski's advice will help. I'll work on that and report back. Thanks so much!

09-15-2011, 10:14 PM	#5
thiefwriter Member Posts: 11 Karma: 10 Join Date: Sep 2011 Device: formatting for all	Need to ask anyway: Is it okay then to have multiple instances of "div class="sidebar" in one ebook chapter? And shall I change the div.pic's to the same code, i.e. "div class="pic"? A sample of my html: Code: <div id="sidebar"> <p class="sidebarmark">Aside…</p> <p class="subhead">X-Ray Glasses</p> blah, blah, blah… </div> Which should now become, if I understand correctly: Code: <div class="sidebar"> <p class="sidebarmark">Aside…</p> <p class="subhead">X-Ray Glasses</p> blah, blah, blah… </div> and Code: <div id="pic"> <p class="center"><img src="b.luciano.jpg" alt="luciano" /><br /> Luciano, a pickpocket who works on trams and buses. </p> </div> …which should now become "div class="pic" ? Just shows how badly a newby can screw it up. I needed to format an ebook, but I didn't know much about html and css. I'm learning, I hope…

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Creating a new column showing Id's	curiosity	Library Management	5	06-10-2011 04:54 AM
Center a div	marcelo2605	ePub	4	05-13-2011 08:39 AM
ADE - Gerätebeschränkung bei Adobe ID's	Esperanza	Software	8	08-16-2010 05:16 AM
Two Adobe ID's, and I forgot which one I authorized my Reader with!	curtw	Sony Reader	2	07-08-2009 10:19 PM
Adding Books duplicates ID's	Talung	Calibre	4	02-10-2009 08:14 PM

09-15-2011, 08:49 PM	#2
JSWolf Resident Curmudgeon Posts: 80,782 Karma: 150249619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Are you sure you didn't mean to put these in class and not ID? All you have to do if your class is correct is add say an incrementing number to each div.

09-15-2011, 09:10 PM	#3
charleski Wizard Posts: 1,196 Karma: 1281258 Join Date: Sep 2009 Device: PRS-505	Yes, while css styling can be directed to apply to a specific id, it's really designed to be used with class selectors. Ids have to be unique within each particular file and are best used as targets for anchor references. I suspect you could solve your problem simply by changing all id="sidebar" to class="sidebar" (and change #sidebar in the css to .sidebar).

09-16-2011, 05:19 AM	#6
Jellby frumious Bandersnatch Posts: 7,570 Karma: 20150435 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	And you should change your CSS file from div#sidebar to div.sidebar (# is for ids, . is for classes)

09-17-2011, 12:00 PM	#7
thiefwriter Member Posts: 11 Karma: 10 Join Date: Sep 2011 Device: formatting for all	Thanks for the help everyone. That fixed me right up. I've got an error-free epub now!

Advert

Advert