I only have about three requirements for the body of most web content. If I have a photo I want it centered and a caption centered below it. Then if I am quoting someone I want that slightly indented to the left and right. How best can I achieve the following.
This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.<br /><br />
<img src=“p1.jpg”><br /><br />
Photo caption here centered and max width 250px<br /><br />
This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.<br /><br />
This paragraph is a quote and should be slightly indented.This paragraph is a quote and should be slightly indented.This paragraph is a quote and should be slightly indented.This paragraph is a quote and should be slightly indented.This paragraph is a quote and should be slightly indented.<br /><br />
This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.This paragraph should be normal.<br /><br />
PS I like to keep everything in one paragraph. I use <br /> instead. Here is roughly the type of content below. How do I create a style which centers all images I tried the following example which didn’t work
.articletext img{
align:center;
}
I also tried
.caption {
text-align:center;
width:250px;
}
This seemed to work. But I cannot seem to pull it together
It seems that you like to write bad code but you don’t quite know enough to do it without help. You are not asking to do anything that is difficult, but you’re asking to do it poorly. Since you have to ask, why don’t you just learn good techniques? It will last longer and you’ll be smarter for it. Besides, I have no interest in teaching anyone how to write crummy code.
Well to clarify matters. I have a couple of websites where I have over 500 articles which are all stored in text files with very basic html. I use <br><br> in all of these instead of the <p></p>. I then use a php program which uses a master template to generate the final html versions of these pages. Its not so much that I like using the <br>. I just have hundreds of articles which are all formatted according to that
I think I have got a version of code which achieves what I want it too. If anyone can improve on that then feel free to post. I am not sure of the styles work according to the rules of responsive design
<!DOCTYPE html>
<html>
<head>
<style>
.main {width:1000px;text-align:left;left-margin:20px;width:1000px;padding:30px;padding:24px;padding-top:0px;}
.quotes {padding-left:60px;padding-right:60px;font-weight:600;}
.caption {width:350px;display: block;margin-left: auto;margin-right: auto;text-align:center;}
IMG.centire {display: block;margin-left: auto;margin-right: auto;text-align:center; }
.pc {display: block;margin-left: auto;margin-right: auto;text-align:center; }
</style>
</head>
<body>
<div class="main">
<div class="pc">
<img class="centire" src="mexicanamber.jpg" >
<br>
<div class="caption"><b>PHOTO BELOW:</b> Mayan head by Pedro MolinaMayan head by Pedro MolinaMayan head by Pedro MolinaMayan head by Pedro Molina</div>
</div>
<br><br>
Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.
Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here. Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.
Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here. <br><br>
<div class="quotes">Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here. Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.</div>
<br><br>
Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here. <br><br>
</div>
</body>
</html>
Actually I would not consider the use of the <br> as crummie code. As far as I know the <br> is not deprecated. w3s says that you should not use this instead of a paragraph but I am not sure why this is the case. If it works it works.
Breaks are not meant to make space as such but to break lines in sentences such as in a poem, song or address or perhaps to delineate form elements. If you are writing words then they should be in a paragraph to be semantically correct.
Browsers are allowed to ignore more than one break because a break is a line-break and not a means of making space and therefore has no meaning if there are successive breaks without content in-between. Some older browsers used to ignore more than one break altogether.
The other problem with using breaks is that you have no precise control over the height of the break. How tall is a break, what is its margin? What is it’s line-height etc. All browsers will differ and all that was really needed was a margin on the p element instead which you can control precisely from the stylesheet (unlike a series of breaks in the html).
It just makes everything so much harder if you don’t have a proper structure to work with.
Your code can be simplified to something more semantic like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.main {
max-width:1000px;
text-align:left;
padding:0 24px 24px;
margin:auto;
}
.main p { margin:0 0 2em }
.quotes {
padding:0 60px;
font-weight:bold
}
.caption {
width:350px;
display: block;
margin:1em auto 2em;
text-align:center;
}
.caption img {
display:block;
margin:0 auto 5px;
}
</style>
</head>
<body>
<div class="main">
<div class="caption"><img alt="Mayan Head" src="http://placehold.it/150x150" ><strong>Photo below:</strong> Mayan head by Pedro MolinaMayan head by Pedro MolinaMayan head by Pedro MolinaMayan head by Pedro Molina</div>
<p>Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here. Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here. Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.</p>
<p>Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.</p>
<blockquote class="quotes">
<p>Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here. Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.</p>
</blockquote>
<p>Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.Normal text here.</p>
</div>
</body>
</html>
Now you have absolute control. Just add a class here and there if you need special cases and keep the styling in the stylesheet and not in the html. There really is no excuse not to do it correctly from the start with the result that everything is easier in the end
I notice that you got rid of one of the classes I used (centire) and achieved the image centering and caption in one class. Thanks for that
I still have the problem that I have hundreds and hundreds of articles (in fact thousands )already made with the use of the <br>. I will have to find some way of correcting these. But for the time being, I fear that they will have to stay as they are.
I do understand the need to get things right and will make efforts to make changes.
Yes, that is a legacy problem you have so it seems like you are stuck with it unless you can parse and sanitise the data into a more usable format. Usually you would handle these issues at the start when you collect the data and put them into the correct format you need.
Working with legacy code can be awkward so is something to bear in mind for the future.
