ansaurus

Question

Answer 1

+1 A:

You have the CSS:

   #content .secondary-heading{
   font-size:18px;
font-weight:normal;
color:#333;
font-style:normal;
font-family:Georgia;
text-align:left;
margin-bottom:150px;
    }

Which specifies:

margin-bottom:150px;

But in your HTML you have inline code for the second

<h2 class="secondary heading"> which states:

style="font-size: 18px;font-weight: normal;color: #333; font-style: normal;font-family: Georgia;text-align: left;margin-bottom: 15px;".

Take this inline style out and it should behave as expected.

EDIT

In the CSS: change margin-bottom:150px; to margin-bottom:15px;after deleting the inline style.

Hope that helps!

Kyle Sevenoaks 2010-08-26 09:13:42

tintincute 2010-08-26 09:15:17

@Kyle: I actually hide that code, and I just wrote like this: <h2 class="secondary-heading">Future Event</h2><p2 class=".secondary-paragraph">Sed ut persp iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque.</p2>

tintincute 2010-08-26 09:18:19

..but it is still the same,

tintincute 2010-08-26 09:19:08

pls check this site for the image: http://www.freeuploadimages.org/images/nc1xjrptgddvk1yxvnad.png

tintincute 2010-08-26 09:21:24

http://jsfiddle.net/b5fMe/1/ check that out, just delete the inline style in your h2 tag. Works here on Chrome.

Kyle Sevenoaks 2010-08-26 09:22:08

thanks, when you say inline style, is it in the CSS or the HTML? because in the html, i actually commented it.:This is what I have now:<h2 class="secondary-heading">Future Event</h2> <p2 class=".secondary-paragraph">Sed ut persp iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque.</p2>

tintincute 2010-08-26 09:27:00

In the HTML, weird if you commented it out, it should work. Try just flat out deleting it.

Kyle Sevenoaks 2010-08-26 09:28:47

@Kyle: I already took this one but it is still the same

tintincute 2010-08-26 09:28:52

it is still the same although i deleted it. and I'm using Firefox 3.6.8

tintincute 2010-08-26 09:30:12

do I need to put this one: <p2 class=".secondary-paragraph"> i mean with a dot?

tintincute 2010-08-26 09:31:36

No, dots are only for inside the CSS file. All you wanted to do was to have more space between the "Future Events" header and the text underneath right?

Kyle Sevenoaks 2010-08-26 09:34:31

shall i write it with "p2 class"?

tintincute 2010-08-26 09:35:27

no i want to have a little space between the "Future Event" and the "Text". I mean, the space should be normal because as you can see in the png the space is very big. And I don't want it.

tintincute 2010-08-26 09:36:35

I see, edited my answer, basically just change 150px to 15.

Kyle Sevenoaks 2010-08-26 09:56:33

@Kyle: thanks for this, i already tried this but the "Future Event" is quite far from above. How can I have it a little bit at the top

tintincute 2010-08-26 12:49:01

Add a code like: `margin-top: -20px;` change the pixel value so as it suits you :)

Kyle Sevenoaks 2010-08-26 12:56:40

shall i add it still at .secondary-heading?

tintincute 2010-08-26 12:57:51

ok i did change it, and i think it works now ;-) i just need to add the 3 blocks underneath so that I have 6 all in all ;-)

tintincute 2010-08-26 12:59:26

Glad to help, don't forget to accept the answer that serves you best :)

Kyle Sevenoaks 2010-08-26 13:11:56

@Kyle:please see this updated code: http://jsfiddle.net/b5fMe/1/ i would like to have like a separator in between of my new 3 blocks but <hr/> doesn't work

tintincute 2010-08-26 13:18:23

That's not an updated version, it's my version I showed you before, when you click update, copy the URL from the address bar and paste it here :)

Kyle Sevenoaks 2010-08-26 13:28:09

oopss sorry ok here it is:http://jsfiddle.net/b5fMe/4/

tintincute 2010-08-26 13:28:54

Instead of just having the `<hr />` wrap it in another row `<tr> <td colspan="3"> <hr/> </td>`http://jsfiddle.net/b5fMe/7/

Kyle Sevenoaks 2010-08-26 13:45:27

ok this will be under the 1st block then right?

tintincute 2010-08-26 13:47:20

do u think i can change the color of the hr/

tintincute 2010-08-26 13:50:53

Yes, you'll have to select in in the CSS: `hr {background-color: #f00;}`.

Kyle Sevenoaks 2010-08-26 14:01:14

hey thanks so much this is what i have now:http://jsfiddle.net/b5fMe/9/ i use the hr in IE but it can't be seen quite strange

tintincute 2010-08-26 14:14:14

this is what I have now: http://jsfiddle.net/b5fMe/10/but if i change the color of the gray line, it didn't change

tintincute 2010-08-26 14:18:48

Hi, you have to add height for it to work in Webkit browsers and use color for IE http://jsfiddle.net/b5fMe/11/

Kyle Sevenoaks 2010-08-27 07:24:37

Answer 2

+1 A:

to duplicate the three blocks, in fact you must copy the row, the tr tag which include them. I copy/paste you the code:

<tr>
        <td class="content threecol first" style="font-size: 11px; line-height: 1.4em; color: rgb(68, 68, 68); width: 25%; padding-right: 20px; padding-left: 0pt; padding-top: 20px; border-right: 1px solid rgb(204, 204, 204);"><!--<h2 class="secondary-heading" 
      style="font-size: 18px;font-weight: normal;color: #333;font-style: 
      normal;font-family: Georgia;text-align: 
     left;margin-bottom: 15px;">Future Event</h2>-->

          <h2 class="secondary-heading">Future Event</h2>
          <p2 class=".secondary-paragraph"> Sed ut persp iciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium, totam rem aperiam, eaque.</p2></td>
        <td class="content threecol" style="font-size: 11px; line-height: 1.4em; color: rgb(68, 68, 68); width: 28%; padding-right: 20px; padding-left: 20px; padding-top: 20px; border-right: 1px solid rgb(204, 204, 204);"><h2 class="secondary-heading" style="font-size: 18px; font-weight: normal; color: rgb(51, 51, 51); font-style: normal; font-family: Georgia; text-align: left; margin-bottom: 15px;">Future Event</h2>
          <p>Sed ut persp iciatis unde omnis iste 
            natus error sit voluptatem accusantium doloremque laudantium, totam rem 
            aperiam, eaque.</p></td>
        <td class="content threecol last" style="font-size: 11px; line-height: 1.4em; color: rgb(68, 68, 68); width: 28%; padding-right: 15px; padding-left: 20px; padding-top: 20px; margin-right: 15px; border: 0pt none;"><p class="btn" style="text-align: center; background: none repeat scroll 0% 0% rgb(45, 45, 45); border: 3px solid rgb(235, 235, 235);">&nbsp; </p>
          <p class="btn" style="background: none repeat scroll 0% 0% rgb(45, 45, 45); border: 3px solid rgb(235, 235, 235);"> <a href="#" style="color: rgb(255, 255, 255); text-decoration: none; font-weight: normal; font-size: 26px; font-family: Georgia; text-transform: uppercase; text-align: center; display: block; padding: 20px 0pt;"> <img height="50" border="0" width="119" alt="" src="http://gallery.mailchimp.com/86b4d752e397a2dbd09e3dd60/images/logowikima4.gif" style="text-align: center; display: block;"></a> </p>
          <p class="btn" style="text-align: center; background: none repeat scroll 0% 0% rgb(45, 45, 45); border: 3px solid rgb(235, 235, 235);">&nbsp; </p>
          <p> Let us know if you are coming and if you have guests.</p>
      </td></tr>

In your code you will find the above code, just paste the same below it.

About spacing, you can modify it, giving line-height for secondary-heading class.

for example .secondary-heading {line-height:1.4;} , just modify it according to your needs.

Sotiris 2010-08-26 09:36:25

@Sotiris:i added the line-height under .secondary-heading and also in the .secondary-paragraph. but it is still the same. the space is still very big.

tintincute 2010-08-26 09:41:47

space of what? in the first block there is a big space because you have add `secondary-heading` on h2. if you delete it, is same with the second block. If you talk for another space, just inform me.

Sotiris 2010-08-26 09:46:31

i want it to be normal space between the "Future Event" and the start of the "Text". That's right, there is a big space, that is what I wanted to solve here i don't want that big space, i want to have a small space between the title "Future Event" and the "Text" so you mean I have to delete the secondary-heading or the secondary-paragraph?

tintincute 2010-08-26 09:50:15

well, I look at it, in fact there is no reason to delete `secondary-heading`. In your css you will find the following `#content .secondary-heading{font-size:18px; font-weight:normal; color:#333; font-style:normal; font-family:Georgia; text-align:left; margin-bottom:150px;}`just delete the `margin-bottom:150px;` and you are done :)

Sotiris 2010-08-26 09:56:22

@Sotiris, yes it is thanks and I forgot to put the dot for the secondary-heading. So it should be ".secondary-heading"the thing is it's quite far below. Can I move it a little bit at the top?

tintincute 2010-08-26 12:51:43

in your code you will find a `td` which represent a block with `style="font-size: 11px; line-height: 1.4em; color: rgb(68, 68, 68); width: 25%; padding-right: 20px; padding-left: 0pt; padding-top: 20px; border-right: 1px solid rgb(204, 204, 204);"`. You just need add `vertical-align: top;` in the inline style. This will move the content on the top of the div. Add this line in each td. - here and a modification of your live example http://jsfiddle.net/b5fMe/3/

Sotiris 2010-08-26 13:14:59

@Sotiris:thanks I already did, and i think it works fine. Now I add the 3 blocks and I would like to add a separator between them and <hr/> doesn't work.try this one: http://jsfiddle.net/b5fMe/1/

tintincute 2010-08-26 13:26:07

in the inline style of every block,other words td, add `border-bottom: 1px solid rgb(204, 204, 204);`

Sotiris 2010-08-26 13:33:03

do i need to add this to the new block only?

tintincute 2010-08-26 13:38:21

for every block you wish to have a line in the bottom.

Sotiris 2010-08-26 13:40:24

this is now the updated code:http://jsfiddle.net/b5fMe/5/

tintincute 2010-08-26 13:42:22

ok i got it, but is there also like border-right-length?

tintincute 2010-08-26 13:45:49

I would like to adjust the border length

tintincute 2010-08-26 13:46:13

@Sotiris can you please explain to me what is this 204,204,204

tintincute 2010-08-26 14:29:19

are the values of red,green,blue to give color for the border line. Please accept an answer (or upvote). If you have additional questions open new questions. Stackoverflow works in this way. Thanks

Sotiris 2010-08-26 14:44:59

ok thanks so much ;-)

tintincute 2010-08-26 14:47:37

ansaurus

tags:

views:

answers:

how to have spacing html/css

related questions