Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Box Model and Styling

Posted on 2016-11-17
12
Medium Priority
?
60 Views
Last Modified: 2016-11-20
I have a page with the following DIV structure:
		<div class="xmldump_{$PostID}" style="box-shadow: 5px 10px 10px 5px rgb(0,81,102);border-radius:15px;background-color:antiquewhite;margin:0 0 10px 0;padding-left:5px;width:70%">
			<xsl:attribute name="id"><xsl:value-of select="$PostID"/></xsl:attribute>
			<xsl:attribute name="PublishedDate"><xsl:value-of select="$PublishedDate"/></xsl:attribute>
			<xsl:attribute name="AuthorID"><xsl:value-of select="$AuthorID"/></xsl:attribute>
			<xsl:attribute name="Peeps"><xsl:value-of select="$vPeopleRecognized"/></xsl:attribute>
			<xsl:attribute name="PostBody"><xsl:value-of select="$PostBody"/></xsl:attribute>
			<xsl:attribute name="NumComments"><xsl:value-of select="$NumComments"/></xsl:attribute>
                 
			<br/>						
			 
			<div class="PublishedDate_{$PostID}" style="border:2px solid silver;background-color:red;width:6%;margin:0 0 5px 0">						
			<center>
				<div id="YearPublished" style="font-size:1.2em">
					<xsl:value-of select="substring($PublishedDate,1,4)"/>
				</div>
				<div id="DayMonthPublished" style="font-size:1.4em">
					<xsl:value-of select="substring($PublishedDate,6,5)"/>
				</div>						
			</center>				
			</div>

			<div id="Author_{$AuthorID}">					
				<img alt="{$AuthorEmail}" style="float:left;padding-right:10px" width="75px" height="75px">
					<xsl:attribute name="class">image author-image</xsl:attribute>
					<xsl:attribute name="rel"><xsl:value-of select="$AuthorID"/></xsl:attribute>
					<xsl:attribute name="Peeps"><xsl:value-of select="$vPeopleRecognized"/></xsl:attribute>
				</img>
				<div class="AuthorName">
					  Author: <xsl:value-of select="$AuthorAccount" />
				</div>
				<br/>

				<div class="testimonial" style="width:50%;border:2px solid silver;float:none;">
					<xsl:value-of select="$PostBody" /> <br/>
				</div>
			
			</div>
			
			<br/>
			<br/>
			
			<div class="useractions_{$PostID}" style="border:2px solid silver;background-color:lightcyan;width:50%;">
				<a href="#" onClick="AddLikeClick({$PostID})">Like</a>
				<img src="https://harpercollins.sharepoint.com/sites/Montage%20IT%20Development/HarperConnect/recognition/BlogStyleLibrary/point.png" height="25px" width="25px" />
				<a href="https://harpercollins.sharepoint.com/sites/Montage%20IT%20Development/HarperConnect/BlogBox/Lists/Posts/Post.aspx?ID={$PostID}" onClick="AddCommentClick({$PostID})">Comment</a>
				<img src="https://harpercollins.sharepoint.com/sites/Montage%20IT%20Development/HarperConnect/recognition/BlogStyleLibrary/point.png" height="25px" width="25px" />						
			</div>
			
			<br/>		
						
			
			<div class="comments_{$PostID}" style="border:2px dashed silver;background-color:palegoldenrod;width:50%;">
			  Comments for Post <xsl:value-of select="$PostID" /><br/>
			</div>
			<div class="peeps_{$PostID}" style="border:2px solid silver;background-color:lemonchiffon;width:50%;margin:0 0 10px 0;">
			  Group of Recognized People Images and Text Follows: 
			</div>
			
		</div>		

Open in new window


This is the resulting rendered page:
 
RenderedIt has several issues that I am struggling with (any tutorial URLS on this would be great)
0
Comment
Question by:Howard Bash
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
12 Comments
 
LVL 6

Expert Comment

by:Mikkel Sandberg
ID: 41892033
Hi hbash,
If you have the option to use an external stylesheet (i.e. use a <link> tag in the <head> of the document), this will make it a lot easier to modify things; in-line styles can be cumbersome and will override styles you apply from an external stylesheet, so be careful.

As for the styles, here are a couple of things you can do. For the comment section, you can make it position: absolute and have it be offset from the right and top; you will also need to apply position: relative to the immediate parent for that section. For the text that you don't want to wrap around the image, you can use float: left to have it be next to the image and use calc() on its width so that it does not break to the next line. Here's some sample styles (I grabbed the markup you provided and threw it in Codepen, so that's where I'm getting these classes from):
[class*="xmldump"] { /* this will select anything that contains "xmldump" as its class; use with caution. A better way would be to apply a re-usable class to all "xmldump" elements */
  position: relative; /* so that any children with position: absolute will be positioned absolutely inside this, rather than the <body> */
  overflow: hidden; /* a clear fix for any floated elements */
}

[id*="Author"] { /* same deal as other selector; apply a re-usable class if you can */
  overflow: hidden; /* a clear fix for any floated elements */
}

.testimonial {
  width: calc(50% - 85px); /* 85px from the avatar width + avatar padding */
  float: left; /* should place in next to the avatar */
}

[class*="comments"] { /* same deal as other selector; apply a re-usable class if you can */
  width: calc(50% - 30px); /* subtract 20px for space on left and another 10px for some space on the right; adjust as needed */
  position: absolute; /* positions absolutely within nearest relatively positioned ancestor; that's why you use position: relative on its parent */
  top: 10px; /* adjust as needed */
  right: 10px /* adjust as needed */
}

Open in new window


Here's a Codepen showing what I did: http://codepen.io/MikkelSandbag/pen/ENNQKo

As for tutorials, you may be able to find a course on the site here to help you out: https://www.experts-exchange.com/courses/

Let me know how it goes :)
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41892039
I checked what you built on CodePen.  It looks good.  I'll need to port it to my "live" page and see how it flies and will get back to you.  I have never seen CSS with the square brackets as you show above.  Is that standard stuff?
Such as this :
[class*="xmldump"] { /* this will select anything that contains "xmldump" as its class; use with caution. A better way would be to apply a re-usable class to all "xmldump" elements */
  position: relative; /* so that any children with position: absolute will be positioned absolutely inside this, rather than the <body> */
  overflow: hidden; /* a clear fix for any floated elements */
}

Also, is calc built in to HTML/CSS or is it a shorthand for telling me to do the calc and substitute the result as needed?

Thanks,
Howard
0
 
LVL 6

Expert Comment

by:Mikkel Sandberg
ID: 41892040
And you can read more on attribute selectors on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
They're pretty neat, but beware: with great power comes great responsibility :)
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 6

Expert Comment

by:Mikkel Sandberg
ID: 41892042
The square brackets are used for attribute selectors.

Calc() is native to CSS, but according to MDN it is still considered an experimental feature: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
Though Can I Use shows that it has good browser support: http://caniuse.com/#search=calc

There are edge cases, but you should be fine using calc() in this manner.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41892075
It looks much better, but still a bit of overlapping.

Rendered
The example at code pen doesn't have these two issues.
0
 
LVL 6

Expert Comment

by:Mikkel Sandberg
ID: 41892181
It looks like the comment section is missing the calc(50% - 30px), and the text that's supposed to be next to the avatar is missing the float: left and the calc(50% - 85px) styles.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41892199
[class*="xmldump"] { /* this will select anything that contains "xmldump" as its class; use with caution. A better way would be to apply a re-usable class to all "xmldump" elements */
  position: relative; /* so that any children with position: absolute will be positioned absolutely inside this, rather than the <body> */
  overflow: hidden; /* a clear fix for any floated elements */
}

[id*="Author"] { /* same deal as other selector; apply a re-usable class if you can */
  overflow: hidden; /* a clear fix for any floated elements */
}

.testimonial {
  width: calc(50% - 85px); /* 85px from the avatar width + avatar padding */
  float: left; /* should place in next to the avatar */
}

[class*="comments"] { /* same deal as other selector; apply a re-usable class if you can */
  width: calc(50% - 30px); /* subtract 20px for space on left and another 10px for some space on the right; adjust as needed */
  position: absolute; /* positions absolutely within nearest relatively positioned ancestor; that's why you use position: relative on its parent */
  top: 10px; /* adjust as needed */
  right: 10px /* adjust as needed */
}
	

Open in new window

0
 
LVL 6

Expert Comment

by:Mikkel Sandberg
ID: 41892204
Can you move all the styles to an external style sheet? If not, then you'll have to add them to each element individually and modify the styles that are already there.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41892210
It's possible to add a stylesheet reference.  The page is on a SharePoint Online site and can be done.  I was hoping to avoid it.  I can add all the styles to the page in the snippets of a Script Editor Web Part much more easily.
0
 
LVL 6

Expert Comment

by:Mikkel Sandberg
ID: 41892231
Whatever is easier for you. I'm guessing the inline styles were overriding some of the styles added from an external stylesheet.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41892255
Should I remove all the inline styling on the divs and only use a stylesheet of your CSS?
0
 
LVL 6

Accepted Solution

by:
Mikkel Sandberg earned 2000 total points
ID: 41892263
Yes, I believe that would be your best option. The styles will be more maintainable this way, and you won't have to dig through all the markup when you need to change some styles.
If the markup is more or less finalized and it would be a huge pain to move all those styles, then you could just add these new styles inline. Otherwise, I would move them.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question