Jump to content

Issue: editting HTML coding in Umbraco CMS to center align color_boxes in a Table.


litreb0308

Recommended Posts

I didn't know where to add my new topic, but because my problem involves coding in HTML. I thought this might be the right place.

 

So.. I'm new to web design/coding and i'm coming to you guys for help because the company i work for has now got a new website which uses Umbraco CMS to add and edit content. What they neglected to tell us was that we'd need to know HTML to edit certain data.

 

I have added the HTML coding below for the Table of specs for one of the products we sell at my work, but my problem is getting the color_boxes to align centrally with all the rest of the data. (see image attached of 'The Table as viewed on the webpage').

 

HTML:

 

<table border="0" class="comm_table" align="center"><tbody><tr><th colspan="2" width="129">Size/ref/code</th><th class="table_th1" style="text-align: center;">W½</th><th class="table_th1" style="text-align: center;">W1</th><th class="table_th1" style="text-align: center;">W2</th><th class="table_th1" style="text-align: center;">W3</th></tr><tr><th colspan="2" width="129">Colour</th><th><div class="color_box"><span class="color" style="background: none repeat scroll 0% 0% #ffffff;">color</span></div></th><th><div class="color_box" style="text-align: center;"><span class="color" style="background: none repeat scroll 0% 0% #99CC00;">color</span></div></th><th><div class="color_box"><span class="color" style="background: none repeat scroll 0% 0% #D00000; align: center;"> color</span></div></th><th><div class="color_box"><span class="color" align="center" style="background: none repeat scroll 0% 0% #333399;">color</span></div></th></tr><tr><th class="table_th1" rowspan="2" style="text-align: center;">Height of Walker (cm)</th><th class="table_th1" style="text-align: center;">STD Wheels</th><td>37-46</td><td>41-55</td><td>48-64</td><td>59-78</td></tr><tr><th class="table_th1" style="text-align: center;">Activity Wheels</th><td>41.50</td><td>45-60</td><td>52-68</td><td>63-82</td></tr><tr><th class="table_th1" colspan="2" style="text-align: center;">Hand-grip width (cm) </th><td>34</td><td>34</td><td>34</td><td>38</td></tr><tr><th class="table_th1" colspan="2" style="text-align: center;">Frame width (cm) </th><td>58-60</td><td>58-60</td><td>60-62</td><td>62-64</td></tr><tr><th class="table_th1" colspan="2" style="text-align: center;">Frame Length (cm) </th><td>52-59</td><td>56-62</td><td>69-83</td><td>77-89</td></tr><tr><th class="table_th1" colspan="2" style="text-align: center;">User Height (cm) </th><td>up to 95</td><td>91-122</td><td>107-137</td><td>129-152</td></tr><tr><th class="table_th1" colspan="2" style="text-align: center;">Max User Weight (kg </th><td>27</td><td>27</td><td>39</td><td>60</td></tr><tr><th class="table_th1" colspan="2" style="text-align: center;">Frame Weight (kg) </th><td>3</td><td>3.3</td><td>3.85</td><td>4.85</td></tr></tbody></table><p> </p><p style="text-align: left;">*All dimensions are based on four wheeled walkers. Frame weight is calculated based on the frame with wheels but excludes accessories. Activty wheels will affect the adjustment range of each walker. Colours shown are standard for each size. Special colours are available at an additional cost.</p><p style="text-align: justify;"><span class="Apple-style-span">Measuring correctly:</span> Whilst the user is standing with their arms by their side and with a few degrees of flexion at the elbow, measure from the crease in the palm of the hand to the floor. Always remember to adjust the walker as the user grows to maintain good posture and efficient walking.</p><p style="text-align: left;"><span>For further information about the Kaye Walker and the accessories available please request our brochure via our online enquiry.</span></p>

 

 

Looking at the coding in red, which is relative to my problem. This will need tidying up a lot, after i have tried so many times to edit the coding to do what i want it to. But i had no success..

 

I have also attached a screen grab of the HTML coding we are looking at (as edited in Umbraco CMS):

 

htmlfortable_umbraco.jpg

 

 

I have also included two more screen grabs of the Table as viewed in Umbraco CMS & the Table as viewed on the webpage if this is of any help.

 

The Table as viewed in Umbraco CMS:

specsheetoverview_umbraco.jpg

 

The Table as viewed on the webpage:

Table_webpage.jpg

 

As you can see above the colour boxes are not aligned central to the rest of the data input in the table.

 

i would appreciate someone to help me understand the correct way of coding. As i am an ultra newbie and have taken it upon myself to learn HTML, anyone who might offer any course in HTML coding, please get in touch via PM.

 

Thanks,

 

Reb

Link to comment
Share on other sites

This is really a CSS question rather than an HTML question. What about just using the div instead of a span inside a div though:

 

<div class="color_box color" style="background: none repeat scroll 0% 0% #ffffff;">color</div>

 

Oh i am sorry, i realise now that it is a CSS question. Thank you for replying to me.

 

Okay so I copy and pasted this code for all my color box coding in the Table HTML and it still has not centrally aligned the color boxes and It is now displaying the text 'color' (in black) overlapping the box. (see the picture attached titled 'Result of new coding'

 

Result of new coding:

Resultofnewcoding.jpg

 

Is there anything you can do about this? Because I do not want the text 'color' to appear overlapping the boxes and the boxes also are not square anymore or with a border around them like in the previous preview of the Table on the webpage (see old attachment in first message titled 'The Table as viewed on the webpage').

 

Thanks.

 

Reb

Link to comment
Share on other sites

This is really a CSS question rather than an HTML question. What about just using the div instead of a span inside a div though:

 

<div class="color_box color" style="background: none repeat scroll 0% 0% #ffffff;">color</div>

Also here is how the HTML for the Table looks now:

 

<table border="0" class="comm_table" align="center"><tbody><tr><th colspan="2" width="129">Size/ref/code</th><th class="table_th1" style="text-align: center;">W½</th><th class="table_th1" style="text-align: center;">W1</th><th class="table_th1" style="text-align: center;">W2</th><th class="table_th1" style="text-align: center;">W3</th></tr><tr><th colspan="2" width="129">Colour</th><th><div class="color_box color" style="background: none repeat scroll 0% 0% #ffffff;">color</div></th><th><div class="color_box color" style="background: none repeat scroll 0% 0% #99CC00;">color</div></th><th><div class="color_box color" style="background: none repeat scroll 0% 0% #D00000;">color</div></th><th><div class="color_box color" style="background: none repeat scroll 0% 0% #333399;">color</div></th></tr><tr><th class="table_th1" rowspan="2" style="text-align: center;">Height of Walker (cm)</th><th class="table_th1" style="text-align: center;">STD Wheels</th><td>37-46</td><td>41-55</td><td>48-64</td><td>59-78</td></tr><tr><th class="table_th1" style="text-align: center;">Activity Wheels</th><td>41.50</td><td>45-60</td><td>52-68</td><td>63-82</td></tr><tr><th class="table_th1" colspan="2" style="text-align: center;">Hand-grip width (cm) </th><td>34</td><td>34</td><td>34</td><td>38</td></tr><tr><th class="table_th1" colspan="2" style="text-align: center;">Frame width (cm) </th><td>58-60</td><td>58-60</td><td>60-62</td><td>62-64</td></tr><tr><th class="table_th1" colspan="2" style="text-align: center;">Frame Length (cm) </th><td>52-59</td><td>56-62</td><td>69-83</td><td>77-89</td></tr><tr><th class="table_th1" colspan="2" style="text-align: center;">User Height (cm) </th><td>up to 95</td><td>91-122</td><td>107-137</td><td>129-152</td></tr><tr><th class="table_th1" colspan="2" style="text-align: center;">Max User Weight (kg </th><td>27</td><td>27</td><td>39</td><td>60</td></tr><tr><th class="table_th1" colspan="2" style="text-align: center;">Frame Weight (kg) </th><td>3</td><td>3.3</td><td>3.85</td><td>4.85</td></tr></tbody></table><p> </p><p style="text-align: left;">*All dimensions are based on four wheeled walkers. Frame weight is calculated based on the frame with wheels but excludes accessories. Activty wheels will affect the adjustment range of each walker. Colours shown are standard for each size. Special colours are available at an additional cost.</p><p style="text-align: justify;"><span class="Apple-style-span">Measuring correctly:</span> Whilst the user is standing with their arms by their side and with a few degrees of flexion at the elbow, measure from the crease in the palm of the hand to the floor. Always remember to adjust the walker as the user grows to maintain good posture and efficient walking.</p><p style="text-align: left;"><span>For further information about the Kaye Walker and the accessories available please request our brochure via our online enquiry.</span></p>

Link to comment
Share on other sites

You can remove the word "color" from those divs. What are the CSS rules for the color_box and color classes? It sounds like they are being set to inline or floated, they should just be default block elements.

I have attached an image preview of the table properties and under 'General' it has a drop down menu called CLASS: with 'comm_table' selected. Is this the 'default'? ..and in order to customise the color classes i need to select a different Class? Don't know if this helps?.. Unfortunately this is the only way to edit the table in umbraco, without attempting to amend it in HTML in the tool bar.

 

Table Properties in Umbraco:

Tableproperties_umbraco.jpg

 

Also thought this might help. - This is the template we were given to start inputting content:

 

<table border="0" class="comm_table"><tbody><tr><th rowspan="2" width="129">Size/Color</th><th class="table_th2" colspan="2">Height of Walker</th><th rowspan="2" width="56">Hand-grip<br /> width</th><th rowspan="2" width="63">Frame<br /> width</th><th rowspan="2" width="34">Frame<br /> Length</th><th rowspan="2" width="42">User<br /> Height</th><th rowspan="2" width="61">Max User<br /> Weight</th><th rowspan="2" width="91">Frame<br /> Weight</th></tr><tr><th class="table_th3" width="105" height="65">STD<br /> Wheels</th><th class="table_th3" width="67">Activity<br /> Wheels</th></tr><tr><th class="table_th1"><strong>W4L</strong><div class="color_box"><span class="color" style="background: #c93636;">color</span> <span class="color" style="background: #dfdee1;">color</span></div></th><td>80</td><td>80</td><td>80</td><td>80</td><td>80</td><td>80</td><td>80</td><td>80</td></tr><tr><th class="table_th1"><strong>W4L</strong><div class="color_box"><span class="color" style="background: #0e0e0e;">color</span> <span class="color" style="background: #dfdee1;">color</span></div></th><td>90</td><td>90</td><td>90</td><td>90</td><td>90</td><td>90</td><td>90</td><td>90</td></tr><tr><th class="table_th1"><strong>W5</strong><div class="color_box"><span class="color" style="background: #eadbc0;">color</span> <span class="color" style="background: #0e0e0e;">color</span></div></th><td>100</td><td>100</td><td>100</td><td>100</td><td>100</td><td>100</td><td>100</td><td>100</td></tr></tbody></table>

 

Template Table on webpage: (Just to show you i haven't much changed the table template/html. See below for preview of 'The Table as viewed on the webpage right now')

Tabletemplate_webpage.jpg

The Table as viewed on the webpage right now:

Table_webpage.jpg

 

I had to swap around the product codes and measurement titles for some products, in particular this product because the Table does not extend far and if we have too many columns, it all squashes into that space before the end of the width of the product image, but the rows of the table can extend as far as you want. We have discovered quite a few problems with the website design so far.

 

Really hoped this might be an easy fix in HTML but everything i have tried isn't working or it just causes even more issues. :fool:

 

Thanks for your reply,

 

Reb.

Edited by litreb0308
Link to comment
Share on other sites

When I was talking about the class I was talking about this:

 

<div class="color_box color" style="background: none repeat scroll 0% 0% #ffffff;">color</div>

 

That div has 2 classes that affect it, the color_box and color classes. There is a CSS stylesheet attached to your page somewhere that is applying styles to those divs. I'm curious what those styles are. I don't know how you would find that in your editor, I would just pull up the rendered webpage in a browser and use the browser's developer tools to figure out which CSS rules are being applied to those divs. It sounds like they are inline elements, but they should be block elements which is the default type for a div.

Link to comment
Share on other sites

When I was talking about the class I was talking about this:

 

<div class="color_box color" style="background: none repeat scroll 0% 0% #ffffff;">color</div>

 

That div has 2 classes that affect it, the color_box and color classes. There is a CSS stylesheet attached to your page somewhere that is applying styles to those divs. I'm curious what those styles are. I don't know how you would find that in your editor, I would just pull up the rendered webpage in a browser and use the browser's developer tools to figure out which CSS rules are being applied to those divs. It sounds like they are inline elements, but they should be block elements which is the default type for a div.

 

Hi i am new to all of this, you'll understand,

 

After reading your reply, I found the 'browser developer tools' (in firefox), it opened up a black bar at the bottom of the page, then i clicked the spanner button and script is showing :good: and Rules has revealed that these elements are indeed 'inline'.

 

How can i change them to 'block elements'?

 

Here is the screen grab:

 

cssrules_webpage.jpg

 

 

I also went digging and found this:

 

.color_box{ float:right; height:27px; margin-right:4px; padding-top:2px;}.color_box span{ float:left; width:20px; height:20px; overflow:hidden; text-indent:-9999px; border:2px #fff solid; margin-right:2px;-moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; border: 1px solid #c5c3c3;}

 

I have attached a screen grab showing where i found this coding:

 

style-editor_webpage.jpg

 

 

Thank you for being patient with me,

 

Reb.

Edited by litreb0308
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...