Align and Justify Text with HTML - html

I'm wanting to align the text in my blog posts with the edges of my images. Right now the body of text is slightly skewed to the left. And also, what code do I need to enter so that the text is justified and where exactly do I enter it?
The site is: http://www.studywithstyleblog.com
And below is some of the code:
.post {
margin: 0 0 $(post.margin.bottom) 0;
}
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: 0em 0 0;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
width: 700px;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: 3px;
}
.post-body .tr-caption-container {
color: $(image.text.color);
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
.post-header {
line-height: 1.6;
font-size: 90%;
}
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
float: none;
width: 700px;
color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);
line-height: 1.6;
font-size: 90%;
}
Thanks for your help!

The problem is in your code on your page.
You have <div> tags around your paragraphs instead of <p> tags.
The beginning of your faux-paragraphs are:
<div class="separator" style="clear: both; text-align: left;">
If you can change that "text-align" to justify instead of left, you'll be golden.
If you can get away from the inline CSS, you'll be better for it in the long run too.

The following line will justify your text:
text-align: justify;
I was trying to move the text slightly to the right. But it is impossible to implement in your code. You must have to change your code.There is 1 way to do it
1) Change the class of your paragraphs/text divs to "separator2" instead of "separator" and modify your CSS file like below:
.separator2
{
margin-left:20px
}
Adjust the margin-left accordingly. I have just added dummy value.

Related

Unable to get a link class to change on hover

So I have a link within a button that has a class assignment. The link class dictates color however on hover does not shift as instructed. Can someone help me find a solution to fix?
Here is the HTML...
<div class="row block well" id="section5">
<h1 style="text-align:center">Financing</h1>
<button class = "button1">Apply for a Vehicle Loan</button>
</div>
And here is the CSS...
.button1 {
display: block;
background-color: white;
font-size: 30px;
border: 4px solid #b5cfc1;
border-radius: 10px;
margin: 0 auto;
}
.button1:hover {
background-color: #3d4e3b;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.apply {
color: #3d4e3b;
}
.apply:hover span{
color: white;
}
Here you are:
.button1 {
display: block;
background-color: white;
font-size: 30px;
border: 4px solid #b5cfc1;
border-radius: 10px;
margin: 0 auto;
}
.button1:hover {
background-color: #3d4e3b;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.apply {
color: #3d4e3b;
}
.button1:hover .apply {
color: white;
}
<div class="row block well" id="section5">
<h1 style="text-align:center">Financing</h1>
<button class="button1">Apply for a Vehicle Loan
</button>
</div>
.button1 {
display: block;
background-color: white;
font-size: 30px;
border: 4px solid #b5cfc1;
border-radius: 10px;
margin: 0 auto;
color: #3d4e3b;
}
.button1:hover {
background-color: #3d4e3b;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
color: #b5cfc1;
}
<div class="row block well" id="section5">
<h1 style="text-align:center">Financing</h1>
<button class="button1">Apply for a Vehicle Loan</button>
</div>
Luke your answer worked for the coloring but the link was then broken. After working through it I found a solution that both allows for the link to follow style and still remain functional. See below...
<div class="row block well" id="section5">
<h1 style="text-align:center">Financing</h1>
<button class="button1">Apply for a Vehicle Loan</button>
</div>
.button1 {
display: block;
background-color: white;
font-size: 30px;
border: 4px solid #b5cfc1;
border-radius: 10px;
margin: 0 auto;
color: #3d4e3b;
}
.button1:hover {
background-color: #3d4e3b;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
color: #b5cfc1;
}
First, I needed to nest the button in the link rather than the other way around. This allows for the entire button to be a link. Next, because the button was now nested in the link I could create style for the inner element (button) rather than trying to stylize the parent and than style the child which was causing a conflict. Endless thanks to everyone that contributed to finding a complete solution, unfortunately some answers have been removed so I cannot attribute individually, but it was all instrumental. Cheers!

Border radius circle

I've this code :
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
}
<span>
<p>25</p>
<p>08</p>
</span>
I want to make a perfect circle on my span. I try a border-radius: 50%; but it does not work.
Thanks for the help !
You can do this by giving the span a fixed width and height:
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
<span>
<p>25</p>
<p>08</p>
</span>
You need a predefined width and height on the span to be able to make it round.
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width:40px;
height:40px;
padding-left:10px;
box-sizing: border-box;
}
<span>
<p>25</p>
<p>08</p>
</span>
add line-height and width:
span {
background-color: #F00;
display: inline-block;
border-radius: 50%;
width: 50px;
line-height: 25px;
text-align: center;
}
Use this code.
HTML:
<span>
<p>25</p>
</span>
<span>
<p>08</p>
</span>
CSS:
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
border-radius: 50% and padding
document.addEventListener('DOMContentLoaded', () => {
let el = document.querySelector('#wrapper .container');
setTimeout(() => (el.style.marginTop = '20px'), 500);
}, false);
#wrapper {
display: flex;
justify-content: center;
}
#wrapper .container {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 16px;
font-family: sans-serif;
font-size: 15px;
font-weight: 500;
border-radius: 50%;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
transition: margin-top 650ms ease-out, box-shadow 120ms, transform 120ms;
will-change: margin-top, box-shadow, transform;
user-select: none;
cursor: pointer;
}
#wrapper .container:hover:not(:active) {
box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.1),
0 2px 10px 0px rgba(0, 0, 0, 0.08),
0 0px 10px 0px rgba(0, 0, 0, 0.08);
}
#wrapper .container:active {
transform: scale(1.4) translateY(5px);
box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2),
0 18px 28px 2px rgba(0, 0,0 , 0.14),
0 7px 34px 6px rgba(0, 0, 0, 0.12);
}
<div id="wrapper">
<div class="container">
<span>10</span>
<span>3</span>
</div>
</div>
It looks like you incorrectly nested paragraph elements inside of span, which is against HTML5 spec, as span is being defined there as an element, which Content Model is described as Phrasing Content, and that:
Most elements that are categorized as Phrasing Content can only contain elements that are themselves categorized as phrasing content, not any flow content.
And because paragraph element doesn't belong to Phrasing Content list, you can use div instead of span for this purpose, only if you care to be semantically correct.
So coming back to your problem, it can be rewritten as so:
HTML:
<div>
<p>25</p>
<p>08</p>
</div>
CSS:
p {
margin: 0;
text-align:center;
}
div {
background-color: red;
display: inline-block;
border-radius: 50%;
width:50px;
height:50px;
line-height:25px;
}
Where general rule for achieving the circle by using border radius set to 50%, is that you need to make sure that content of such element has the same width and height. You can get that by fixing these values in your css.
Here is JsFiddle presenting that.

Can element ignore height values of properties before it?

I have 2 elements sharing the same class .cta. The CTA inside of .casino-box looks great, however the one inside of .header-box is accounting for the 165px of space taken up by .top-nav-bar and .nav-bar.
How can I get the top CTA to ignore the added spacing of those two nav bars, without having to split the css code for the CTAs?
Link to CodePen
.cta {
max-width: 600px;
margin: 0 auto;
text-align: center;
position: relative;
top: 50%;
margin-top: -80px;
}
.cta h1 {
color: #fff;
weight: 500;
text-shadow: 0px 0px 4px black;
}
.cta .button {
color: #fff;
border-color: #fff;
font-weight: bold;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
text-shadow: 0px 0px 4px black;
}
.cta .button:hover {
color: #90281F;
background: #fff;
text-shadow: none;
}
.cta hr {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
}
You have to set negative margin-top with the height of .top-nav-bar and .nav-bar plus your normal margin so the two div could be aligned in center. In this case it would probably be as following:
.header-box .cta {
margin-top: -205px;
}

Centering a piece of Text within a div

I'm trying to position some text in the middle of a CSS box. i tired using top:20px; but this moved the whole but rather than the text. any idea how can i do this?
here is my code: jsfiddle
div {
background: #ff9600;
background: rgba(255, 150, 0, 0.95);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-moz-box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
text-align: center;
z-index: 10;
}
<body>
<div>text</div>
</body>
Example 1
something like: this fiddle.
It uses the css of:
div {
height: 100%;
width: 100%;
background: #000;
font-size: 12px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
line-height: 80px;
}
which could be quite beneficial for you. :)
Example 2
A more versatile way would be to use span like this demo
which uses:
div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid #123456;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
Possible Alternative to (2)
A slight variation of the second example would be to treat the div like a table cell, so altering the above css to:
div {
display: table;
width: 250px;
height: 100px;
text-align: center;
border: 1px solid red;
}
span {
display: table-cell;
vertical-align: middle;
}
And so this should also work for you.
Try to this
Remove this css in
width:100%;
height:100%;
add this css
left:0;
right:0;
top:0;
bottom:0;
padding-top:20px;
Demo
You could use padding to move the text inside the box.
However, I think that you should create a tag (a box) especially for the text, and give it some css property to center this box in the center of the main div (the main box).
Try this my code:
<div>
<span class="vertical-text">
TEXT
</span>
</div>
$('.vertical-text').each(function()
{
parent_height = $(this).parent().height();
$(this).parent().css(
{
'height': parent_height + 'px',
'line-height': parent_height + 'px',
});
$(this).css(
{
'line-height': 'normal',
'display': 'inline-block',
});
});
Demo: http://jsfiddle.net/Silon/caonccjx/

How do I achieve a page-over-the-background effect with HTML/CSS?

I'm new to web design. I want to make my page look something like the one here: http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar
where there's a rounded rectangle over the grey background that holds all the content. How do I do this?
This is the basic HTML and CSS style that page is currently using. So, they're wrapping all of their content in a <div> and applying that specific style class to the div.
HTML:
<body>
<div class="wrap">
...Content...
</div>
</body>
CSS:
body {
min-width: 0;
}
body {
color: #333333;
font: 100%/1.4 Georgia,serif;
margin: 0 auto;
max-width: 100%;
min-width: 830px;
padding: 0;
width: 62em;
}
<!--wrap class css code-->
.wrap {
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
background: none repeat scroll 0 0 #FFFFF0;
margin: 16px;
padding: 10px 0 0;
position: relative;
}