Announcement

Collapse
No announcement yet.

CSS/HTML Newbie Question

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS/HTML Newbie Question

    Hi, I'm new to CSS, can anyone tell me how to code this into CSS/HTML please, thanks


  • #2
    Code:
    <html>
    <head>
    <style type="text/css">
    body
    { 
    background-image: 
    url('bgdesert.jpg');
    background-repeat: repeat-x
    }
    </style>
    </head>
    <body>
    </body>
    </html>
    Last edited by 1QuickSI; Thu 25 Sep '08, 6:09am.

    Comment


    • #3
      Originally posted by 1QuickSI View Post
      Code:
      <html>
      <head>
      <style type="text/css">
      body
      { 
      background-image: 
      url('bgdesert.jpg');
      background-repeat: repeat-x
      }
      </style>
      </head>
      <body>
      </body>
      </html>
      Hi, Sorry I forgot to mention, not the image it's self, but coding it into HTML/CSS Thanks.

      Comment


      • #4
        Here's an example.

        I just made this and I tried to include as much comments as possible.

        Just load it, right click it .. all the code is there, the style (css) and the xhtml (the layout).

        http://www.vbulletin-fans.com/xhtmlcss_Example_1.html

        Comment


        • #5
          Could simplify Floris' example and cut down on the nested DIVs in the box.

          HTML Code:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
          
              <title>xhtml/css box example</title>
              <style type="text/css" media="screen">
              /* parent container sets border, basic background, font, size, and margin/padding */
                  .container {
                      background-color: white;
                      color: black;
                      border: 1px solid #c8c2b5;
                      margin: 0;
                      padding: 0;
                      font: 75% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
                      width: 200px;
                      min-height: 81px;
                  }
          
              /* top box breaks from container with its own background color and padding and height */
                  h4 {
                      background-color: #d4d0c8;
                      padding: 3px;
                      color: black;
                      min-height: 16px;
                      font-weight: bold;
                      font-size: 12px;
                      margin-top: 0px;
                      margin-bottom: 0px;
                  }
          
              </style>
          </head>
          
          <body>
          <div class="container">    <!-- this div is the parent container with the white background, and grey border -->
          
          
              <h4> <!-- this is the child that is in the top with the grey background -->
                  hello world
              </h4> <!-- end top -->
              this is an example box
          </div> <!-- end div container -->
          
          </body>
          </html>
          Pretty much the same example only, I used a level 4 heading instead of a child DIV. The actual box content just sits in the parent container. Personal preference really but I think my box is cleaner.
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API - Full / Mobile
          Vote for your favorite feature requests and the bugs you want to see fixed.

          Comment


          • #6
            I am not sure if it is preference, or if you are simply more correct. Not that I am saying I am wrong though!

            If the hello world is a title, you could even put <h1-4> inside the child div that I made, but that would be overkill. And indeed, you could just leave out the div completely.

            One could also use a span instead of div/h4 or div or h4. But I prefer to really use span only if it is a real exception, or if I want to temporary float something to the right.

            Your example however does force you to fix the padding issue with the container in which the body text is, it's sticky to the border. I'd keep that in the bottom div then. Which is why I decided to not use h but div for the top.

            Comment


            • #7
              A lot of different ways. If you did a search for Box tutorials on the web, you'd get hundreds of examples. All depends on the method you like best in the long run.
              Translations provided by Google.

              Wayne Luke
              The Rabid Badger - a vBulletin Cloud demonstration site.
              vBulletin 5 API - Full / Mobile
              Vote for your favorite feature requests and the bugs you want to see fixed.

              Comment


              • #8
                Originally posted by Floris View Post
                Here's an example.

                I just made this and I tried to include as much comments as possible.

                Just load it, right click it .. all the code is there, the style (css) and the xhtml (the layout).

                http://www.vbulletin-fans.com/xhtmlcss_Example_1.html
                Thank You very much Floris, this is fantastic , perfect.
                Edit: quick question, can I add a space between the text and boarder.
                -
                Thanks also to Wayne Luke as well .
                Last edited by Hustle; Thu 25 Sep '08, 12:58pm. Reason: Added a Question.

                Comment


                • #9
                  What kind of space? You can play with the padding value, change it from 3px to 13px to see a clear difference.

                  Comment


                  • #10
                    Originally posted by Floris View Post
                    What kind of space? You can play with the padding value, change it from 3px to 13px to see a clear difference.
                    Morning Floris, here's an example http://img101.imageshack.us/img101/5195/exampledp1.png thank you

                    Comment


                    • #11
                      Below both instances:
                      padding: 3px;

                      set:

                      padding-left: 12px;

                      Comment


                      • #12
                        Originally posted by Floris View Post
                        Below both instances:
                        padding: 3px;

                        set:

                        padding-left: 12px;
                        Perfect, thanks very much

                        Comment


                        • #13
                          You could also float that image left or right and wrap your text around it using this for example, while still keeping the padding inside the box to space text inside away from the border, and using the margin to space the text around the outside of the box itself.

                          float: left;
                          width: auto;
                          margin: 0px 10px 10px 0px;
                          padding: 5px;

                          also keep in mind when using padding and margin. there is a set order off: "top, right, bottom, left" (0px 0px 0px 0px)

                          so you padding could be like this to control all 4 sides differently on spacing

                          padding: 4px 0px 4px 10px; (top, right, bottom, left)

                          padding: 10px; (that will space all 4 sides the same)


                          You also take it further and control more things like this.

                          float: left;
                          width: auto;
                          background-color: #FFFFFF; (box background colour)
                          color: #000000; (text colour)
                          border: 2px solid #777777; (border size, type and colour)
                          text-decoration: italic; (set font style)
                          font-weight: bold; (again, make it bold)
                          margin: 0px 10px 10px 0px;
                          padding: 5px 5px 5px 5px; (achieve same thing with: "padding: 5px") (but you have more control in future if you want to change some sides)
                          Last edited by MRGTB; Sat 27 Sep '08, 6:07pm.

                          Comment


                          • #14
                            Hi Floris, can you please post an example of the White Fixed vBulletin 3 layout outline, I've been searching on Google but some strange templates arrised. Thank You

                            Comment


                            • #15
                              No, I can not provide you with any vBulletin support.

                              Comment

                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                              Working...
                              X