Solved

Box Model and Styling

Posted on 2016-11-17
12
56 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

726 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