SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How Do I keep spacing at one

    Have this as a cell of my table, and want to know how to keep the text from having a space in-between. I realize the <p> code adds that space, but the text is a caption for a photo and it has to be minimized or "squashed" if you
    will to fit under that photo in the table. Not sure I am explaining myself correctly, and if not, I apologize.

    <td>

    <p><center>First Meeting of the World Council</center></p>
    <p><center>Longleat Castle, Bath, England</center></p>
    </td>

  2. #2
    SitePoint Enthusiast burNMind's Avatar
    Join Date
    Jan 2009
    Location
    UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    add this in your CSS file:

    Code:
    p
    {
      padding: 0;
      margin: 0;
    }
    blogging @ burnmind.com

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you...worked like a charm. Sorry I am not that knowledgeable yet. Appreciate it very much.

  4. #4
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Barnum View Post
    Have this as a cell of my table, and want to know how to keep the text from having a space in-between. I realize the <p> code adds that space, but the text is a caption for a photo and it has to be minimized or "squashed" if you
    will to fit under that photo in the table. Not sure I am explaining myself correctly, and if not, I apologize.

    <td>

    <p><center>First Meeting of the World Council</center></p>
    <p><center>Longleat Castle, Bath, England</center></p>
    </td>
    There is no need for the usage of <center>.
    CSS offers a declaration that replicates the presentational effect:
    text-align: center;

  5. #5
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Cooper, tried the CSS idea, but it did not work. Suspect I did something crazy...

    Here is how I did it:

    <style type="text/css">

    img {border: 4px solid black;
    float: center;
    padding: 20px;
    margin: 30px; font-family: "GC Times": color: white;

    body{font-family: Verdana; impress;}

    h1 {font-size: 25;}
    h2 {font-size: 35;}
    h3 {font-size: 30;}

    text {font-weight: bold;}


    p
    {
    padding: 0;
    margin: 0;
    }
    {
    text-align: center;
    }





    }
    </style>

  6. #6
    SitePoint Enthusiast burNMind's Avatar
    Join Date
    Jan 2009
    Location
    UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have 2 brackets in a wrong place, so remove them so it looks like this:

    Code:
    p
    {
    padding: 0;
    margin: 0;
    text-align: center;
    }
    EDIT: I looked at your code again and you have a lot of mistakes regarding the brackets. All your declarations should be surrounded by brackets.

    Example:

    whatever { whatever; }
    blogging @ burnmind.com

  7. #7
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thank you all.... I learn more from this forum than any book. Appreciate you all very much.

  8. #8
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Barnum View Post
    Cooper, tried the CSS idea, but it did not work. Suspect I did something crazy...

    Here is how I did it:

    <style type="text/css">

    img {border: 4px solid black;
    float: center;
    padding: 20px;
    margin: 30px; font-family: "GC Times": color: white;

    body{font-family: Verdana; impress;}

    h1 {font-size: 25;}
    h2 {font-size: 35;}
    h3 {font-size: 30;}

    text {font-weight: bold;}


    p
    {
    padding: 0;
    margin: 0;
    }
    {
    text-align: center;
    }





    }
    </style>
    The value 'center' is not valid regarding float. Also, font-size values need to be a unit of measurement.

    For clarity, I'd recommend running your css against a validator:
    http://jigsaw.w3.org/css-validator/

    As well, sitepoint offers a nice reference guide that will be of some use, i'd imagine:
    http://reference.sitepoint.com/css

  9. #9
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi have a look

  10. #10
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,824
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Barnum View Post
    Cooper, tried the CSS idea, but it did not work. Suspect I did something crazy...

    Here is how I did it:

    <style type="text/css">

    img {border: 4px solid black;
    float: center;
    padding: 20px;
    margin: 30px; font-family: "GC Times": color: white;

    body{font-family: Verdana; impress;}

    h1 {font-size: 25;}
    h2 {font-size: 35;}
    h3 {font-size: 30;}

    text {font-weight: bold;}


    p
    {
    padding: 0;
    margin: 0;
    }
    {
    text-align: center;
    }

    }
    </style>
    As Cooper has said, you can't have float:center; - you can only float elements left or right.

    What you might find works well is to have
    td {text-align:center;}
    That will centre both the image and the paragraph text in the cell, and won't mess up any paragraphs you have elsewhere on the page.

    Some other tips:
    * I'm not sure why you're specifying a font and colour for your img, they aren't needed at all.
    * In the body, your font declaration is a bit messed up. The semi-colon after Verdana signals the end of the font declaration, so "impress" will be treated as a separate item altogether, and so is invalid. If "impress" is supposed to be an alternative font, then (a) you need to separate the fonts by commas, not semicolons, (b) you should aim to make the fonts as similar as possible, at least with the same flavour to them, to ensure your site looks consistent, and (c) Verdana is one of the most ubiquitous fonts out there, so the only thing you might want to specify after it is sans-serif as a general catch-all - there is no point in specifying a different Windows font after Verdana, because it will never get used.
    * As Cooper has said, font sizes need units - or you can specify them as % of the normal font size.
    * There is no element text. You either need to include the font-weight:bold; in the declaration for another element or, if you are using class="text", add a full stop to make it .text

  11. #11
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay, your suggestions have helped tremendously. The only remaining problem is how the site looks in Firefox. For some reason every other page has the photo caption lined up underneath and centered. Also the spacing is
    not single but doubled. The every other centered thing really has me baffled.

  12. #12
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Also, everything looks great in IE, but not in Firefox. The centered caption thing again has me baffled. I have checked the style code, and it's identical.

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Also, everything looks great in IE, but not in Firefox. The centered caption thing again has me baffled. I have checked the style code, and it's identical.
    Show us what you have now code-wise. Also not entirely sure what single and double means here. Can you also post mini screenshots?

  14. #14
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    <html>
    <head>
    <title>TableData</title>
    <style type="text/css">

    img {border: 4px solid black;
    float: center;
    padding: 20px;
    margin: 30px; font-family: "GC Times": color: white;

    body{font-family: Verdana; impress;}

    h1 {font-size: 25;}
    h2 {font-size: 35;}
    h3 {font-size: 30;}
    text {font-weight: bold;}


    p
    {
    padding: 0;
    margin: 0;
    text-align: center;
    }









    }
    </style>
    </head>





    <body>






    <body bgcolor="#FFA07A">



    <hr color="black">
    <h1 align="center"><font color="black" font size="45">"A Few Photos"</h1>

    <p><h3 align="center"><font color="red">Click image to view full size</h3></p></a>
    <hr color="black">


    <table align="center">
    <tr>

    <td><a href="thumbs/Rosaliethumb.jpg"><img src="images/Rosalie.jpg" width="250" height="185" alt="Rosalie Ray, treasurer, Harry Bodofsky, VP, myself and Jerry Lenk, secretary"></a>
    </td>
    <td>
    <a href="thumbs/GarrettSeminarthumb.jpg"><img src="images/GarrettSeminar.jpg" width="250" height="185" alt="Charles Garrett Seminar in Atlantic City"></a>

    <td></a><a href="thumbs/FMDAChunt.jpg"><img src="images/FMDAChunt.jpg" width="250" height="185" alt="Jack Lowry, Alan Holcombe, yours truly and the late Gary Bischke"></a>
    </td>
    <td><a href="thumbs/Foundthumb.jpg"><img src="images/Found.jpg" width="250" height="185" alt="Showing off at club hunt in the eary 80's"></a></td>
    </tr>
    <tr>
    <td>
    <p>Rosalie Ray, Harry Bodofsky, yours truly</p>
    <p>Jerry Lenk,...first FMDAC officers</p>

    </td>

    <td>
    <p>Charles Garrett Seminar at</p>
    <p>Treasure Weekend, AC, 1986</p>
    </td>
    <td>
    <p>Jack Lowry, Alan Holcombe,</p>
    <p>Dick Stout and the late Gary Bischke</p>
    </td>
    <td>
    <p>Displaying finds, club hunt, 1982</p>
    </td>
    </tr>
    <tr>
    <td>
    <a href="thumbs/LongleatArrivalthumb.jpg"><img src="images/LongleatArrival.jpg" width="250" height="185" alt="Dennis and Jean Buchanon, Gerald Costellos, and Fay and I arriving for World Council Meeting"></a>
    </td>
    <td>
    <a href="thumbs/Jack&Myrnathumb.jpg"><img src="images/Jack&Myrna.jpg" width="250" height="185" alt="With Jack & Myrna Gifford/Tesoro Electronics, 1988"></a>
    </td>
    <td>
    <a href="thumbs/Newburythumb.jpg"><img src="images/Newbury.jpg" width="250" height="185" alt="Introducing the Grandmaster II to the UK/Newbury Rally"></a>
    </td>
    <td>
    <a href="thumbs/KarlBWthumb.jpg"><img src="images/KarlBW.jpg" width="250" height="185" alt="Karl Von Muller and I at the Lost Treasure Classic, Tulsa, Oklahoma"></a>
    </td>


    <tr>
    <td>
    <p>Dennis & Jean Buchanon, Gerald Costello,</p>
    <p>Dick & Fay Stout arriving at Longleat Castle</p>

    </td>
    <td>
    <p>With Jack & Myrna Gifford</p>
    <p>Tesoro Metal Detectors</p>
    </td>
    <td>
    <p>Introduction of Grandmaster II at</p>
    <p>Newbury Rally, UK.</p>
    </td>
    <td>
    <p>Karl Von Muller and I,</p>
    <p>Tulsa, Oklahoma, 1988</p>
    </td>



    </tr>




    </table>







    <h1 Align="center"><a href="Photos4.html"><font color="blue">Back</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="Photos6.html"><font color="red"><i> More Photos</i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="test3.html"><font color="blue">Home</a></h1></p>


    </body>
    </html>

  15. #15
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,824
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Barnum View Post
    body{font-family: Verdana; impress;}
    h1 {font-size: 25;}
    h2 {font-size: 35;}
    h3 {font-size: 30;}
    text {font-weight: bold;}
    If you're not going to fix the errors that we've told you about, it's going to be difficult to solve any problems...

  16. #16
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay, reworked it, and now have the following code. It looks fine in IE8, but in Firefox the photo captions are aligned to the left underneath each photo?
    Any suggestions are appreciated...

    ........................................................................................................

    <html>
    <head>
    <title>TableData</title>
    <style type="text/css">

    img {border: 4px solid black;

    margin: 10px;

    body{font-family: Verdana; sans-serif;}

    h1 {font-size: 25;}
    h2 {font-size: 35;}
    h3 {font-size: 30;}
    text {font-weight: bold;}


    p
    {
    padding: 0;
    margin: 0;
    text-align: center;
    }









    }
    </style>
    </head>





    <body>






    <body bgcolor="#FFA07A">




    <h1 align="center"><font color="black" font size="45">"A Few Photos"</h1>

    <p><h3 align="center"><font color="red">Click image to view full size</h3></p></a>



    <table align="center">
    <tr>

    <td><a href="thumbs/Rosaliethumb.jpg"><img src="images/Rosalie.jpg" width="250" height="185" alt="Rosalie Ray, treasurer, Harry Bodofsky, VP, myself and Jerry Lenk, secretary"></a>
    </td>
    <td>
    <a href="thumbs/GarrettSeminarthumb.jpg"><img src="images/GarrettSeminar.jpg" width="250" height="185" alt="Charles Garrett Seminar in Atlantic City"></a>

    <td></a><a href="thumbs/FMDAChunt.jpg"><img src="images/FMDAChunt.jpg" width="250" height="185" alt="Jack Lowry, Alan Holcombe, yours truly and the late Gary Bischke"></a>
    </td>
    <td><a href="thumbs/Foundthumb.jpg"><img src="images/Found.jpg" width="250" height="185" alt="Showing off at club hunt in the eary 80's"></a></td>
    </tr>
    <tr>
    <td>
    <p>Rosalie Ray, Harry Bodofsky, yours truly</p>
    <p>Jerry Lenk,...first FMDAC officers</p>

    </td>

    <td>
    <p>Charles Garrett Seminar at</p>
    <p>Treasure Weekend, AC, 1986</p>
    </td>
    <td>
    <p>Jack Lowry, Alan Holcombe,</p>
    <p>Dick Stout and the late Gary Bischke</p>
    </td>
    <td>
    <p>Displaying finds, club hunt, 1982</p>
    </td>
    </tr>
    <tr>
    <td>
    <a href="thumbs/LongleatArrivalthumb.jpg"><img src="images/LongleatArrival.jpg" width="250" height="185" alt="Dennis and Jean Buchanon, Gerald Costellos, and Fay and I arriving for World Council Meeting"></a>
    </td>
    <td>
    <a href="thumbs/Jack&Myrnathumb.jpg"><img src="images/Jack&Myrna.jpg" width="250" height="185" alt="With Jack & Myrna Gifford/Tesoro Electronics, 1988"></a>
    </td>
    <td>
    <a href="thumbs/Newburythumb.jpg"><img src="images/Newbury.jpg" width="250" height="185" alt="Introducing the Grandmaster II to the UK/Newbury Rally"></a>
    </td>
    <td>
    <a href="thumbs/KarlBWthumb.jpg"><img src="images/KarlBW.jpg" width="250" height="185" alt="Karl Von Muller and I at the Lost Treasure Classic, Tulsa, Oklahoma"></a>
    </td>


    <tr>
    <td>
    <p>Dennis & Jean Buchanon, Gerald Costello,</p>
    <p>Dick & Fay Stout arriving at Longleat Castle</p>

    </td>
    <td>
    <p>With Jack & Myrna Gifford</p>
    <p>Tesoro Metal Detectors</p>
    </td>
    <td>
    <p>Introduction of Grandmaster II at</p>
    <p>Newbury Rally, UK.</p>
    </td>
    <td>
    <p>Karl Von Muller and I,</p>
    <p>Tulsa, Oklahoma, 1988</p>
    </td>



    </tr>




    </table>







    <h1 Align="center"><a href="Photos4.html"><font color="blue">Back</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="Photos6.html"><font color="red"><i> More Photos</i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="test3.html"><font color="blue">Home</a></h1></p>


    </body>
    </html>

  17. #17
    SitePoint Enthusiast burNMind's Avatar
    Join Date
    Jan 2009
    Location
    UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Barnum View Post
    <style type="text/css">

    img {border: 4px solid black;

    margin: 10px;

    body{font-family: Verdana; sans-serif;}

    h1 {font-size: 25;}
    h2 {font-size: 35;}
    h3 {font-size: 30;}
    text {font-weight: bold;}


    p
    {
    padding: 0;
    margin: 0;
    text-align: center;
    }
    }
    </style>
    </head>
    You're missing a } at the end of the img declaration (after the margin property). Also, you have a } which is not needed at the end of your CSS code. Finally, as Stevie D said:

    Quote Originally Posted by Stevie D View Post
    * There is no element text. You either need to include the font-weight:bold; in the declaration for another element or, if you are using class="text", add a full stop to make it .text
    blogging @ burnmind.com

  18. #18
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you again. Sorry to be so slow with this.....

  19. #19
    SitePoint Enthusiast burNMind's Avatar
    Join Date
    Jan 2009
    Location
    UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Barnum View Post
    Thank you again. Sorry to be so slow with this.....
    You're Welcome.

    No problem at all, but you should really invest some time to read some tutorials and/or books to learn at least the basics. It will save you precious time!
    blogging @ burnmind.com

  20. #20
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Barnum:
    If you add a proper Doctype to the beginning of your HTML pages, you can get the HTML Validator to catch both fat-finger typos AND actual mistakes you make (your HTML doesn't even have to be online either!). You might not always understand why something's an error but if it's a typo you can fix that right away. You can also validate CSS but generally that's most useful for actual syntax errors (missing ; etc) than the warning which I always ignore nowadays. It would tell you "text" didn't exist and that you were missing a }.

    Best rule to keep in mind using those things is, errors compound. So start with the first one, and often fixing one error fixes a bunch of others.

    You'll get there. We managed to, didn't we? : )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •