need help for html block

grosloulou · September 28, 2013

hallo,
it is the first time i use html in new smugmug and i have some difficulties because nver know if i need to add doctype,... or <div>...

on :
http://www.labrophotography.com/Boutique

i have several problems :
- strong tag doesn't work and b tag seems to work
- i'd like to center text like :
http://www.galorbe.com/Prestations
- i never know if i need to insert img tag into the <p> or outside
- i need to add lot of br to push hr below image to have 100% hr instead of hr below text only. how can i avoid these br ? in dreamweaver i think it is a questio of clear:both...

i have added html and css i types in html and css tabs, nothing else (no div,...). Can you change these ?

HTML :

<img class="image_right" src="http://www.labrophotography.com/Galleries/Nature/Nature-and-landscapes/i-4XjfXvd/2/S/D30_8337_nx2_640-S.jpg" alt="californie" />
<p style="text-align: center;">
  </p><h3>Buy Prints</h3> <br />  
  <strong>Most of the images are available in print and download.</strong> <br />
   You can choose the size and if you want a white border or not. <br />

  <b>M. Labro - Labro Photography </b> <br />
  Rue Limoges (70) Belgique <br />
  <strong>Mail : </strong> <a href="mailto:marc.labro@skynet.be?subject=sitoueb">marc.labro(AT)skynet.be</a> <br />
Tel : +32 471 45 68 25
<br />
<i><a href="http://www.labrophotography.com/Conditions-generales-de-vente"> Conditions Générales de Vente</a></i>
  
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<hr />

<br />
<br />

<img class="image_left" src="http://www.labrophotography.com/Galleries/Nature/Nature-and-landscapes/i-4XjfXvd/2/S/D30_8337_nx2_640-S.jpg" alt="californie" />
<p style="text-align: center;">
  </p><h3>Buy Prints</h3> <br />  
  <strong>Most of the images are available in print and download.</strong> <br />
   You can choose the size and if you want a white border or not. <br />

  <b>M. Labro - Labro Photography </b> <br />
  Rue Limoges (70) Belgique <br />
  <strong>Mail : </strong> <a href="mailto:marc.labro@skynet.be?subject=sitoueb">marc.labro(AT)skynet.be</a> <br />
Tel : +32 471 45 68 25
<br />
<i><a href="http://www.labrophotography.com/Conditions-generales-de-vente"> Conditions Générales de Vente</a></i>
  
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<hr />

<p>hallo</p>



CSS :

a:link {
  color: #aaaaaa;
  text-decoration: none;
}

a:hover, a:focus {
  color: #cccccc;
  text-decoration: underline;
}

p, ul {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1em;
  margin-left: 0;
}

ul li {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 2em;
  list-style-type: square;
}

.image_right {
  padding: 5px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 20px;
  float: right;
}

.image_left {
  padding: 5px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 20px;
  float: left;
}

thenickdude · September 28, 2013

The <strong> tag doesn't work because the default SmugMug CSS sets the font-weight for that tag to "normal". Actually with my site, I found that they did not even bother to load the bold version of the font on the page, since it wasn't used anywhere in SmugMug's default layout. You can add this CSS to re-enable the <strong> tag, although it might not look good (or even look bold) depending on your font:

b, strong {
  font-weight: bold;
}

You can put <img> tags inside <p> if you want.

You can use clear:both just like you did in Dreamweaver. Just add this to your CSS, and remove the <br> tags:

hr {
  clear:both;
}

grosloulou · September 28, 2013

many thanks

if i want a little space above and below hr, how do i do that ? just add a margin-top of 10px in

css properties ? so text and images will go down,... ?

any idea for center alignment of text in his area ? as we could do with a table with one row and two columns in the left or right column ?

best regards
marc

grosloulou · September 28, 2013

strange, i just noticed that a has moved before buy print title (smugmug create a at same time than

)
whe i try to move it before

smugmug displays it in red and doesn't accept

however it is a same paragraph !!!???

any idea what the </p does there ?

best regards
marc

thenickdude · September 29, 2013

I would change your HTML to use <div> tags to enclose each section:

<div class="image_line">
  <img class="image_right" src="http://www.labrophotography.com/Galleries/Nature/Nature-and-landscapes/i-4XjfXvd/2/S/D30_8337_nx2_640-S.jpg" alt="californie" />
  <p style="text-align: center;">
  </p>
  <h3>
    Buy Prints
  </h3>
  
  <br />
  
  <strong>
    Most of the images are available in print and download.
  </strong>
  
  <br />
  You can choose the size and if you want a white border or not. 
  <br />
  
  <b>
    M. Labro - Labro Photography 
  </b>
  
  <br />
  Rue Limoges (70) Belgique 
  <br />
  <strong>
    Mail : 
  </strong>
  
  <a href="mailto:marc.labro@skynet.be?subject=sitoueb">
    marc.labro(AT)skynet.be
  </a>
  
  <br />
  Tel : +32 471 45 68 25
  <br />
  <i>
    <a href="http://www.labrophotography.com/Conditions-generales-de-vente">
      Conditions Générales de Vente
    </a>
  </i>
</div>

<hr />

<div class="image_line">
  <img class="image_left" src="http://www.labrophotography.com/Galleries/Nature/Nature-and-landscapes/i-4XjfXvd/2/S/D30_8337_nx2_640-S.jpg" alt="californie" />
  <p style="text-align: center;">
  </p>
  <h3>
    Buy Prints
  </h3>
  
  <br />
  
  <strong>
    Most of the images are available in print and download.
  </strong>
  
  <br />
  You can choose the size and if you want a white border or not. 
  <br />
  
  <b>
    M. Labro - Labro Photography 
  </b>
  
  <br />
  Rue Limoges (70) Belgique 
  <br />
  <strong>
    Mail : 
  </strong>
  
  <a href="mailto:marc.labro@skynet.be?subject=sitoueb">
    marc.labro(AT)skynet.be
  </a>
  
  <br />
  Tel : +32 471 45 68 25
  <br />
  <i>
    <a href="http://www.labrophotography.com/Conditions-generales-de-vente">
      Conditions Générales de Vente
    </a>
  </i>
</div>


<hr />

<p>
  hallo
</p>

Now you can adjust the spacing with CSS like this:

b, strong {
  font-weight: bold;
}

a:link {
  color: #aaaaaa;
  text-decoration: none;
}

a:hover, a:focus {
  color: #cccccc;
  text-decoration: underline;
}

p, ul {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1em;
  margin-left: 0;
}

ul li {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 2em;
  list-style-type: square;
}

.image_right {
  padding: 5px;
  border: 1px solid #ccc;
  margin-left: 10px;
  margin-right: 20px;
  float: right;
}

.image_left {
  padding: 5px;
  border: 1px solid #ccc;
  margin-left: 10px;
  margin-right: 20px;
  float: left;
}

hr {
  clear:both;
}

.image_line {
  overflow:hidden;
  margin:20px 0;
}

(I removed the top and bottom margins of the image and moved those to the .image_line div)

grosloulou · September 29, 2013

many thanks for help,
it works super fine !

see :
http://www.labrophotography.com/Buy-images

I can now reproduce the old smugmug alternate page i liked and much more with power of html and css !

i think i have found my bug with </p>. probably it has no sense to use a <h3> inside a <p>

so i have used firebug to know the font-family, color, size,... of the smugmug h3 title and used span and style

i also had problems of colors with "a", "a:hover",... i have fixed

If it can help somebody, i have attached the latest version of my code (before i continue my page :-) )

HTML :

<div class="image_line">

  <p style="text-align: center;font-family: Karla,Roboto,Helvetica,Arial,sans-serif;font-style: normal;color:#87878C;font-size: 16px;font-weight: 400;">
  

    <img class="image_right" src="http://www.labrophotography.com/Galleries/Nature/Nature-and-landscapes/i-4XjfXvd/2/S/D30_8337_nx2_640-S.jpg" alt="californie" />
  
    <span style="font-size:20px;color:#EDEDF0;">Prints </span>
    <br /> <br />
  
    Most of the images are available in print. <br />
  You can choose between different sizes and by default have a white frame around them. <br /> <br />

  M. Labro - Labro Photography <br />
  Rue Limoges (70) Belgique <br />
  Mail : <a href="mailto:marc.labro@skynet.be?subject=site smugmug">marc.labro(AT)skynet.be</a> <br />
Tel : +32 471 45 68 25
  <br /> <br />
<i>
  <a href="http://www.labrophotography.com/Conditions-generales-de-vente"> General Conditions</a>
</i>

</p>

</div>


<hr />

<div class="image_line">

  <p style="text-align: center;font-family: Karla,Roboto,Helvetica,Arial,sans-serif;font-style: normal;color:#87878C;font-size: 16px;font-weight: 400;">
  

    <img class="image_left" src="http://www.labrophotography.com/Galleries/Nature/Nature-and-landscapes/i-4XjfXvd/2/S/D30_8337_nx2_640-S.jpg" alt="californie" />
  
    <span style="font-size:20px;color:#EDEDF0;">Prints </span>
    <br /> <br />
  
    Most of the images are available in print. <br />
  You can choose between different sizes and by default have a white frame around them. <br /> <br />

  M. Labro - Labro Photography <br />
  Rue Limoges (70) Belgique <br />
  Mail : <a href="mailto:marc.labro@skynet.be?subject=site smugmug">marc.labro(AT)skynet.be</a> <br />
Tel : +32 471 45 68 25
  <br /> <br />
<i>
  <a href="http://www.labrophotography.com/Conditions-generales-de-vente"> General Conditions</a>
</i>

</p>

</div>

<hr />

<p>3rd section...</p>

CSS :

a {
  color: #87878C;
  text-decoration: none;
}

a:link {
  color: #87878C;
  text-decoration: none;
}

a:hover, a:focus {
  color: #cccccc;
  text-decoration: underline;
}

p, ul {
  margin-top: 0px;
  margin-right: 0;
  margin-bottom: 1em;
  margin-left: 0;
}

ul li {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 2em;
  list-style-type: square;
}

.image_right {
  padding: 5px;
  border: 1px solid #ccc;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 20px;
  float: right;
}

.image_left {
  padding: 5px;
  border: 1px solid #ccc;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 20px;
  float: left;
}

b, strong {
  font-weight: bold;
}

hr {
  clear: both;
}

.image_line {
  overflow: hidden;
  margin: 20px 0;
}

ChancyRat · September 29, 2013

<br>?
I'm following along with interest as to how your code is finalized. A question from a newbie with HTML: I heard that the
code is antiquated and not supported. I have used it extensively on my site (which has a lot of broken code that I am now going to fix,
being only part of the problem). An instructor who helped me a bit in an HTML class, is the person who told me to replace
with

.

Is use of
not recommended any longer? I ask because I thought Smugmug's new format would not tolerate broken code, so the question of
comes up in that context as well.

I never did hear the solution as to how one achieves single-spaced line breaks without using
, however.

Thanks.

denisegoldberg · September 29, 2013

ChancyRat wrote: »

A question from a newbie with HTML: I heard that the <br> code is antiquated and not supported.

I just looked at the HTML br tag page from W3 schools (at http://www.w3schools.com/tags/tag_br.asp) and it doesn't say anything about the tag not being supported.

--- Denise

ChancyRat · September 29, 2013

denisegoldberg wrote: »

I just looked at the HTML br tag page from W3 schools (at http://www.w3schools.com/tags/tag_br.asp) and it doesn't say anything about the tag not being supported.

--- Denise

Boy Denise did you miss a human being going BOINK BOINK cross-eyed.
In that class the instructor found the W3 page that said it was retired (or killed, or whatever happens to dead code). I made her find it so I could see it before I would believe it, since I have about 10,000 of them on my site.

So the link you sent made no sense to me until I let it percolate, and - I think the problem was that I used <br> without it being inside other tags such as <p>. Stretching here to recall why my usage has been wrong.

thenickdude · September 29, 2013

There's nothing wrong with using <br>. The objection with <br> is that HTML is 'supposed' to be used to mark up the semantics (meaning) of the document, and CSS to mark up the presentation of the document. From that perspective, <br> is usually used in a non-semantic way (to create paragraph breaks) when the semantic way of marking that up would be to enclose paragraphs of text in <p> tags instead, and adjusting the spacing between adjacent paragraphs using CSS.

If you use HTML in a more semantic way, it makes it easier and tidier to adjust the way it is presented later using CSS. For example, you're not tying yourself to the spacing between paragraphs being the same height as one line of text.

If you're just using a single <br> tag on its own, this often means that you're really producing a list, and the semantic markup for it would be to use something like <ul><li>item 1</li><li>item 2</li></ul>. But sometimes you just want a simple linebreak and <br> is the best option.

It's certainly not going away, <br> will continue to work in the future. It's already in the next-generation HTML 5 standard.

ChancyRat · September 30, 2013

I had to find what I saw, and this is the best I can come up with:
http://www.w3.org/TR/xhtml2/mod-text.html#sec_9.2.

Br, deprecated as an element. I think this is what you're saying as well, with:

HTML is 'supposed' to be used to mark up the semantics (meaning) of the document, and CSS to mark up the presentation of the document

If I'm reading the original code posted on this thread, br is used as an element in several places? But, if it still works...

grosloulou · September 30, 2013

hallo everybody,
when i want to force text at next line i always use
in wordpress, joomla, smugmug,... without surprise up to now. i don't know another tag to do the same.

i have played with the code from Lamah and in some cases when i have too much text, it comes below the image and becomes 100% width.
How, when needed, in a section between two hr, could we force the image always being for instance 40% width and text 60% width ?
i would think about a div float left (or right) for the image with a specified size and remaining for the text float right (left) but i am not css expert

this new code can be very useful for creating about or link pages with a small image on right (just to make beautiful look) and a long list of equipment on left only,...

best regards
marc

thenickdude · September 30, 2013

ChancyRat wrote: »

I had to find what I saw, and this is the best I can come up with:
http://www.w3.org/TR/xhtml2/mod-text.html#sec_9.2.

That's XHTML. HTML5 is what's in use on SmugMug, and <br> isn't deprecated in HTML5.

ChancyRat · September 30, 2013

Lamah wrote: »

That's XHTML. HTML5 is what's in use on SmugMug, and <br> isn't deprecated in HTML5.

As you can tell I didn't see they would be so different, but this is great to know. Thanks.

rht · September 30, 2013

grosloulou wrote: »

many thanks for help,
it works super fine !

see :
http://www.labrophotography.com/Buy-images

I can now reproduce the old smugmug alternate page i liked and much more with power of html and css !

i think i have found my bug with </p>. probably it has no sense to use a <h3> inside a <p>

so i have used firebug to know the font-family, color, size,... of the smugmug h3 title and used span and style

i also had problems of colors with "a", "a:hover",... i have fixed

If it can help somebody, i have attached the latest version of my code (before i continue my page :-) )

HTML :

<div class="image_line">

  <p style="text-align: center;font-family: Karla,Roboto,Helvetica,Arial,sans-serif;font-style: normal;color:#87878C;font-size: 16px;font-weight: 400;">
  

    <img class="image_right" src="http://www.labrophotography.com/Galleries/Nature/Nature-and-landscapes/i-4XjfXvd/2/S/D30_8337_nx2_640-S.jpg" alt="californie" />
  
    <span style="font-size:20px;color:#EDEDF0;">Prints </span>
    <br /> <br />
  
    Most of the images are available in print. <br />
  You can choose between different sizes and by default have a white frame around them. <br /> <br />

  M. Labro - Labro Photography <br />
  Rue Limoges (70) Belgique <br />
  Mail : <a href="mailto:marc.labro@skynet.be?subject=site smugmug">marc.labro(AT)skynet.be</a> <br />
Tel : +32 471 45 68 25
  <br /> <br />
<i>
  <a href="http://www.labrophotography.com/Conditions-generales-de-vente"> General Conditions</a>
</i>

</p>

</div>


<hr />

<div class="image_line">

  <p style="text-align: center;font-family: Karla,Roboto,Helvetica,Arial,sans-serif;font-style: normal;color:#87878C;font-size: 16px;font-weight: 400;">
  

    <img class="image_left" src="http://www.labrophotography.com/Galleries/Nature/Nature-and-landscapes/i-4XjfXvd/2/S/D30_8337_nx2_640-S.jpg" alt="californie" />
  
    <span style="font-size:20px;color:#EDEDF0;">Prints </span>
    <br /> <br />
  
    Most of the images are available in print. <br />
  You can choose between different sizes and by default have a white frame around them. <br /> <br />

  M. Labro - Labro Photography <br />
  Rue Limoges (70) Belgique <br />
  Mail : <a href="mailto:marc.labro@skynet.be?subject=site smugmug">marc.labro(AT)skynet.be</a> <br />
Tel : +32 471 45 68 25
  <br /> <br />
<i>
  <a href="http://www.labrophotography.com/Conditions-generales-de-vente"> General Conditions</a>
</i>

</p>

</div>

<hr />

<p>3rd section...</p>

CSS :

a {
  color: #87878C;
  text-decoration: none;
}

a:link {
  color: #87878C;
  text-decoration: none;
}

a:hover, a:focus {
  color: #cccccc;
  text-decoration: underline;
}

p, ul {
  margin-top: 0px;
  margin-right: 0;
  margin-bottom: 1em;
  margin-left: 0;
}

ul li {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 2em;
  list-style-type: square;
}

.image_right {
  padding: 5px;
  border: 1px solid #ccc;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 20px;
  float: right;
}

.image_left {
  padding: 5px;
  border: 1px solid #ccc;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 20px;
  float: left;
}

b, strong {
  font-weight: bold;
}

hr {
  clear: both;
}

.image_line {
  overflow: hidden;
  margin: 20px 0;
}

Something you might do in your code and CSS is to use the cascading features of style sheets.

Class your enclosing DIV as something, and then in your CSS, set the styles so that anything inside the div inherits the styles without having to class those elements directly.

[HTML]
.myPageStyle{
whatever my style declarations are
}

.myPageStyle p{
whatever my style declarations are
}

.myPageStyle h3{
whatever my style declarations are
}

.myPageStyle img{
whatever my style declarations are
}

.myPageStyle ul{
whatever my style declarations are
}

.myPageStyle li{
whatever my style declarations are
}
[/HTML]Now in the HTML code you can do this:

[HTML]
<div class="myPageStyle">
<h3>My H3 title for the paragraph</h3>
<p>This is my first paragraph</p>
<img src="image.jpg" with="200" height="300" alt="whatever the image is" />
</div>
[/HTML]So because the div has the class, the elements inside it will inherit the appropriate styles without you needing to do inline styles on the HTML.

grosloulou · October 1, 2013

rht wrote: »

Something you might do in your code and CSS is to use the cascading features of style sheets.

Class your enclosing DIV as something, and then in your CSS, set the styles so that anything inside the div inherits the styles without having to class those elements directly.

[HTML]
.myPageStyle{
whatever my style declarations are
}

.myPageStyle p{
whatever my style declarations are
}

.myPageStyle h3{
whatever my style declarations are
}

.myPageStyle img{
whatever my style declarations are
}

.myPageStyle ul{
whatever my style declarations are
}

.myPageStyle li{
whatever my style declarations are
}
[/HTML]Now in the HTML code you can do this:

[HTML]
<div class="myPageStyle">
<h3>My H3 title for the paragraph</h3>
<p>This is my first paragraph</p>
<img src="image.jpg" with="200" height="300" alt="whatever the image is" />
</div>
[/HTML]So because the div has the class, the elements inside it will inherit the appropriate styles without you needing to do inline styles on the HTML.

thanks for these explanations
it is very useful to understand how to do beautiful code and span,... is tedious all the time

in fact html/css basic courses would be a nice thing in smugmug support section like "how to do a link page with ul, li", "how to add a table",....
no discussion, just simple examples of custom pages.
for people having questions, they can copy this code in dgrin and ask more questions
I am aware it is not the primary goal of smugmug but we see that people have more problems of creating extra pages than adding images in albums.

there are lot of useful infos on dgrin site but they are lost in lot of pages of discussions, sometimes 120 pages of post on a topic (ie: drop down menus) and finally what is the conclusion or final code,... ?

best regards

rht · October 1, 2013

I can help a little with some of those questions.

.reheat-pages ul {
  margin-bottom: 15px;
  margin-left: 15px;
  list-style-type: square;
  list-style-position: outside;
}

.reheat-pages ol {
  margin-bottom: 15px;
  margin-left: 20px;
  list-style-type: decimal;
  list-style-position: outside;
}

.reheat-pages li {
  margin-bottom: 5px;
}

That's what I'm applying on my pages for CSS to get lists.

And then in the code you just use your normal HTML, in my case:

<div class="reheat-pages">
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>

You can put a href tags in there too if you wish. It's pretty easy. You want to keep as much as possible everything in the main site-wide CSS customisation, and not in individual HTML/CSS blocks if you can avoid it. The reason behind that is that the more you have CSS all over the place, the less easy it is to administer it.

Before I signed up here I did a heck of a lot of reading of many topics on this forum, probably a good 10 or so hours of it seeing what could be done and just finding my way around the new Smugmug. Finally it is something we can really use.

grosloulou · October 1, 2013

thanks rht :-)

marc

ChancyRat · December 11, 2013

Kennethkbryant wrote: »

I just considered the HTML br tag web page from W3 educational institutions and it doesn't say anything about the tag not being reinforced.

Lamah clarified this in one of his messages: "That's XHTML. HTML5 is what's in use on SmugMug, and <br> isn't deprecated in HTML5."

By the way I think we are supposed to type it as <br />
Not <br>
But I don't know why.

need help for html block

Comments