Rrpeating graphic in a table - CSS ?

14 replies
  • WEB DESIGN
  • |
Hi folks

I am trying to put a nice box with rounded corners and a drop shadow around my video on my product page. I have decided to use a graphic image with repeating slices for the edges and whole graphics for the top and bottom and corners.

I will need to put these as a background graphic in a table surrounding the video.

Could anyone help me with the CSS code needed to complete this please??

How do I assign an i.d to the table??

I will post an image of what I am aiming to achieve something similar to. It is from John Thornhill's WSO with Alex Jeffreys.

Cheers

xxxxcarlxxxx
#css #graphic #rpeating #rrpeating #table
  • Profile picture of the author kodshi
    Hi Carl,

    You can do it with the following code:
    Code:
    /*code for rounded corners*/
     -moz-border-radius: 15px; /* Firefox */
     -webkit-border-radius: 15px; /* Safari and Chrome */
     border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet   Explorer 6+ using IE-CSS3 */
    
    /*code for shadows*/
      -moz-box-shadow: 1px 1px 20px #000; /* Firefox */
      -webkit-box-shadow: 1px 1px 20px #000; /* Safari and Chrome */
      box-shadow: 0px 0px 20px #000; /* Opera 10.5+, future browsers and IE6+  using IE-CSS3 */
    you can add an id to a table like that <table id="myId"></table>

    and in the css file you need to put code i added like that

    Code:
    #myId {
    
    /*code for rounded corners*/
     -moz-border-radius: 15px; /* Firefox */
     -webkit-border-radius: 15px; /* Safari and Chrome */
     border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet   Explorer 6+ using IE-CSS3 */
    
    /*code for shadows*/
      -moz-box-shadow: 1px 1px 20px #000; /* Firefox */
      -webkit-box-shadow: 1px 1px 20px #000; /* Safari and Chrome */
      box-shadow: 0px 0px 20px #000; /* Opera 10.5+, future browsers and IE6+  using IE-CSS3 */
    }
    you need to call the css file in the beginning of the page:

    Code:
    <link rel="stylesheet" href="myCssFile.css">
    With this code you don't need an images

    All the best
    Roy
    {{ DiscussionBoard.errors[5622537].message }}
    • Profile picture of the author carlpicot
      Thats awesome thanks Roy

      Ok I made a version with a graphic but will have a go at this now.

      so how would you designate a colour to the table (well it would be a table constructed frame around flowplayer)

      cheers mate

      xxxxcarlxxxx
      {{ DiscussionBoard.errors[5622911].message }}
      • Profile picture of the author kodshi
        Hi Carl, to change to table background color, you need to add to the tables id in the css file
        this line:

        background-color:mycolor;

        Code:
        #myId {
             background-color:blue;
        }
        you can use also use hexadecimal color codes

        like that

        Code:
        #myId {
             background-color:##007FFF;
        }

        Cheers
        Roy
        {{ DiscussionBoard.errors[5624891].message }}
        • Profile picture of the author carlpicot
          OK Roy.. so the next question would be ...

          If I wanted a repeating graphic in any part of by table, could I assign a unique id to that individual part?

          Like on the vertical table rows or maybe around the edge of the main document ?? .. or is there a css way to make that as well??


          I also found this http://www.tjkdesign.com/articles/roundbox.asp

          and this .. but it breaks on my mac using chrome http://roundedbox.andreas-kalt.de/

          How would you adapt this to make it a background for what I need?? .. to surround flow player?
          Many thanks for your help matey I really find this css stuff exciting. I started to dabble when css 1 first came out but it's really grown since then !!

          xxxxcarlxxx
          {{ DiscussionBoard.errors[5625798].message }}
          • Profile picture of the author kodshi
            Originally Posted by carlpicot View Post

            If I wanted a repeating graphic in any part of by table, could I assign a unique id to that individual part?
            Yes, you can target any html element with css by adding to it an Id, but if you have several elements with the same style, it's better to use a class

            Originally Posted by carlpicot View Post

            Like on the vertical table rows or maybe around the edge of the main document ?? .. or is there a css way to make that as well??
            You can use css to style every element in the page, you just need to target the element you want style in the css file.

            Originally Posted by carlpicot View Post

            How would you adapt this to make it a background for what I need?? .. to surround flow player?
            I would put it into a div element with the css code I added in the previous posts like this, for example if the box is 400px wide, 300px height, and it's need be in the center of the page, with shadows and rounded corners

            Code:
            #myDivId{
            	width:400px;
            	height:300px;
            	background-color:blue;
            	margin:0 auto;
            	
            	 -moz-border-radius: 15px; /* Firefox */
            	-webkit-border-radius: 15px; /* Safari and Chrome */
            	border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
            
            	-moz-box-shadow: 0px 0px 20px #000; /* Firefox */
            	-webkit-box-shadow: 0px 0px 20px #000; /* Safari and Chrome */
            	box-shadow: 0px 0px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
            
            	}
            I noticed that the rounded borders and shadows not working in IE 8, I found
            another way to make rounded corners with javaScript
            here is the link to it

            CurvyCorners - Beautiful rounded corners for your HTML boxes

            All the best
            Roy
            {{ DiscussionBoard.errors[5626283].message }}
            • Profile picture of the author carlpicot
              Hi Roy .. this is awesome stuff thanks

              I've used a graphic so far just to get this done speedily but will try updating the page when I get good enough at this.

              So could I make a div tag to put more rounded corners on the product page?

              Also .. the code is a bit of a mess as I converted it from another site. I don't suppose you would mind taking a peek at the code and seeing if you can spot what I code dont need and maybe sugest what you would do if it were your page to improve the appearance using CSS or java?? I'll attach it to the message.

              p.s. Dont worry if you've not the time for this as it's probably a big job

              p.p.s. the dodgy banner will be replaced !! lol

              Thanks for all your help on this - very kind of you

              regards

              xxxxcarlxxxx
              {{ DiscussionBoard.errors[5634132].message }}
              • Profile picture of the author kodshi
                Hi Carl,

                Originally Posted by carlpicot View Post

                So could I make a div tag to put more rounded corners on the product page?
                Yes

                I built the entire page wite just div, I didn't used table, you will need to fix a little the styles, but you have a good structure now,

                I attached all the new files ( 2 css files, one .js file and the main file )

                you will need to create a folder to css files and a folder for js file, and copy the files from the file that I attached ( you can open the file in a folder in your computer and activate index.html file to see the new optimized page, I reduced 100 lines of unnecessary code

                I am going to class now

                Good Luck
                Roy
                {{ DiscussionBoard.errors[5635568].message }}
  • Profile picture of the author carlpicot
    That looks awesome Roy!!! Look how neat that code is! What a mess I made LOL

    Just one little thing that needs fixing ... the flow player jumps to the top left when you push the play button... (see attachment)

    Also I wondered if the lines round the edges that were in the original graphic around the flow player could be reproduced in the js??

    I made them by selecting the edges and shrinking the selection by a few pixels ... and then putting a stroke on in a slightly darker colour. I think that would finish it off nicely but wouldn't have a clue where to start in Java

    It looks very nice and neat I must say ... Where did you learn to code like that Roy .. What a useful skill to have!!

    cheers

    xxxxcarlxxxx
    {{ DiscussionBoard.errors[5638216].message }}
    • Profile picture of the author carlpicot
      Hi Roy

      For some reason it does not seem to be working in Internet Explorer 8.

      The main page just comes out without shadows and the rounded corners do not show. Do you know why this is??

      Cheers mate

      xxxxcarlxxxx
      {{ DiscussionBoard.errors[5641880].message }}
    • Profile picture of the author carlpicot
      Mmm?? The corners and shadows dont show up in IE 8 Roy...

      Any clues as to why mate??

      cheers

      Carl
      {{ DiscussionBoard.errors[5642106].message }}
    • Profile picture of the author kodshi
      Hi Carl,

      Originally Posted by carlpicot View Post

      Also I wondered if the lines round the edges that were in the original graphic around the flow player could be reproduced in the js??
      I didn't find a js solution for the lines.

      Does everything working good now?

      All the best
      Roy
      {{ DiscussionBoard.errors[5659730].message }}
      • Profile picture of the author carlpicot
        Hi Roy

        It works on chrome on a mac .. but round corners or shadows would not work in IE 8 and the player still does that think where it jumps to the right hand corner??

        Any clues what can be the cause of that??

        Many thanks

        Carl
        {{ DiscussionBoard.errors[5663395].message }}
  • Profile picture of the author kodshi
    Hi carl,

    I tried to fix it, but i got cross browsing issues with it, I see that the original page is fine so go with it

    good luck
    Roy
    {{ DiscussionBoard.errors[5664985].message }}

Trending Topics