Solved

Box Model and Styling

Posted on 2016-11-17
12
19 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:hbash
  • 7
  • 5
12 Comments
 
LVL 6

Expert Comment

by:Mikkel Sandberg
Comment Utility
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:hbash
Comment Utility
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
Comment Utility
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
 
LVL 6

Expert Comment

by:Mikkel Sandberg
Comment Utility
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:hbash
Comment Utility
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
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 1

Author Comment

by:hbash
Comment Utility
[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
Comment Utility
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:hbash
Comment Utility
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
Comment Utility
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:hbash
Comment Utility
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 500 total points
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now