Solved

Box Model and Styling

Posted on 2016-11-17
12
46 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
  • 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
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 500 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

786 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