The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

HTML + CSS Border Help?

View previous topic View next topic Go down

Solved HTML + CSS Border Help?

Post by JDobbsy1987 on November 22nd 2010, 11:23 am

Hi,

Sorry for the length of this post, I don't really do a lot with HTML and never do anything with CSS so i have used a generator however upon entering / saving the script it doesn't do what i want it to.I could be doing it wrong or it may not be possible?

I have used this site - http://www.roundedcornr.com/
and i am using the 3rd generator down called - RoundedCornr With Border.

my options are - these will make sense when you see the options in the generator
15
1F1E1E
969696
FFFFFF
4
15

I generate the code, i can then see what it should look like... it tells me to enter the CSS and HTML.

CSS:
Code:
.roundedcornr_box_152879 {
   background: url(roundedcornr_152879_tl.png) no-repeat top left;
}
.roundedcornr_top_152879 {
   background: url(roundedcornr_152879_tr.png) no-repeat top right;
}
.roundedcornr_bottom_152879 {
   background: url(roundedcornr_152879_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_152879 div {
   background: url(roundedcornr_152879_br.png) no-repeat bottom right;
}
.roundedcornr_content_152879 {
   background: url(roundedcornr_152879_r.png) top right repeat-y;
}

.roundedcornr_top_152879 div,.roundedcornr_top_152879,
.roundedcornr_bottom_152879 div, .roundedcornr_bottom_152879 {
   width: 100%;
   height: 15px;
   font-size: 1px;
}
.roundedcornr_content_152879, .roundedcornr_bottom_152879 {
   margin-top: -19px;
}
.roundedcornr_content_152879 { padding: 0 15px; }

HTML:
Code:
<div class="roundedcornr_box_152879">
  <div class="roundedcornr_top_152879"><div></div></div>
      <div class="roundedcornr_content_152879">
        <p>Lorem ipsum dolor sit amet, consectetur
        adipisicing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa
        qui officia deserunt mollit anim id est laborum.</p>
      </div>
  <div class="roundedcornr_bottom_152879"><div></div></div>
</div>

The problem is when i put the html in a post, the writing appears to stay within a border but you can't see the border and the background within what should be the border doesn't change?

Can anyone help?

Regards,
JDobbsy1987

JDobbsy1987
Forumember

Male Posts : 147
Reputation : 0
Language : England (UK)
Location : Cheshire

http://www.JDobbsyFreeAds.darkbb.com

Back to top Go down

Solved Re: HTML + CSS Border Help?

Post by Guest on November 22nd 2010, 3:40 pm

where is the images?

Code:
roundedcornr_152879_tl.png

Guest
Guest


Back to top Go down

Solved Re: HTML + CSS Border Help?

Post by JDobbsy1987 on November 22nd 2010, 8:45 pm

Ah, didnt know i had to download the images too... silly me - where were the images going to come from lol

I have now downloaded/uploaded the files so my CSS now looks like this:
Code:
.roundedcornr_box_264669 {
   background: url(http://i69.servimg.com/u/f69/15/89/29/05/rounde12.png) no-repeat top left;
}
.roundedcornr_top_264669 {
   background: url(http://i69.servimg.com/u/f69/15/89/29/05/rounde13.png) no-repeat top right;
}
.roundedcornr_bottom_264669 {
   background: url(http://i69.servimg.com/u/f69/15/89/29/05/rounde10.png) no-repeat bottom left;
}
.roundedcornr_bottom_264669 div {
   background: url(http://i69.servimg.com/u/f69/15/89/29/05/rounde11.png) no-repeat bottom right;
}
.roundedcornr_content_264669 {
   background: url(roundedcornr_264669_r.png) top right repeat-y;
}

.roundedcornr_top_264669 div,.roundedcornr_top_264669,
.roundedcornr_bottom_264669 div, .roundedcornr_bottom_264669 {
   width: 100%;
   height: 15px;
   font-size: 1px;
}
.roundedcornr_content_264669, .roundedcornr_bottom_264669 {
   margin-top: -19px;
}
.roundedcornr_content_264669 { padding: 0 15px; }

My post looks like this:


and should look like this:


Any suggestions?


Last edited by JDobbsy1987 on November 23rd 2010, 1:21 am; edited 1 time in total

JDobbsy1987
Forumember

Male Posts : 147
Reputation : 0
Language : England (UK)
Location : Cheshire

http://www.JDobbsyFreeAds.darkbb.com

Back to top Go down

Solved Re: HTML + CSS Border Help?

Post by Guest on November 22nd 2010, 8:51 pm

Why you make borders with images?
Its easy and simple with only CSS Wink
Code:

<style type="text/css">
.box {background-color: grey; color: #000; border: 3px #fff solid;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
</style>

<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur
        adipisicing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa
        qui officia deserunt mollit anim id est laborum.</p>
</div>

try this code:
not tested it Very Happy don't know how it will look.. just made it here Very Happy

Guest
Guest


Back to top Go down

Solved Re: HTML + CSS Border Help?

Post by JDobbsy1987 on November 22nd 2010, 10:31 pm

Where do i try that code... i put it in a post with HTML enabled and didnt get a border?

Sorry, i dont do a lot with HTML or CSS

Cheers,
JDobbsy1987

p.s.
Why when entering HTML in a post and click preview i can see it fine but when i click send i just get the HTML string?

e.g.
if i enter the below and click preview i get a border:
Code:
<div style="border: 2px ridge #F4E673; padding: 5px;">{option}<hr>{param}</div>

but when i click send i just get the following text:

<div style="border: 2px ridge #F4E673; padding: 5px;">{option}<hr>{param}</div>

Any ideas as this happened for the code you posted for me above?

JDobbsy1987
Forumember

Male Posts : 147
Reputation : 0
Language : England (UK)
Location : Cheshire

http://www.JDobbsyFreeAds.darkbb.com

Back to top Go down

Solved Re: HTML + CSS Border Help?

Post by JDobbsy1987 on November 25th 2010, 12:33 am

Any idea's on getting either my code or Gansters code to work? Smile

JDobbsy1987
Forumember

Male Posts : 147
Reputation : 0
Language : England (UK)
Location : Cheshire

http://www.JDobbsyFreeAds.darkbb.com

Back to top Go down

Solved Re: HTML + CSS Border Help?

Post by Guest on November 25th 2010, 2:55 pm

You can't post CSS in posts (:

but you can make a html page, paste the code above it and add this code in your post:
Code:

<iframe src="HTML PAGE LINK" width="THE WIDTH" height="THE HEIGHT" frameborder="0" scrolling="no"></iframe>

Guest
Guest


Back to top Go down

Solved Re: HTML + CSS Border Help?

Post by Saxaca on November 25th 2010, 4:23 pm

Gangstar, CSS could be used in post - inside an element. We will be using the bbCode table, which i grew up with Razz

Just create a table and add a styling tag and a border code!
The code would be.. something like this:
Code:
[table style="background-color: grey; color: #000; border: 5px #fff solid;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;"]
[tr]
[td]You could even set height and width and background! Or perhaps IMAGES? Border radius? Whatever. Lorem ipsu.. Week wuuk! Latin! Lorem ipsum dolor.. Global freakout... Box shadow? CSS3.. tasty![/td]
[/tr]
[/table]

Saxaca
Forumember

Male Posts : 539
Reputation : 26
Language : Markup.

Back to top Go down

Solved Re: HTML + CSS Border Help?

Post by Guest on November 25th 2010, 5:02 pm

What da hell xD haha I'm using it and forgot it! OMG XD lol

Guest
Guest


Back to top Go down

Solved Re: HTML + CSS Border Help?

Post by JDobbsy1987 on November 25th 2010, 5:25 pm

Thank you to both Gangstar15 and Saxaca for your help!!!!

The following code worked perfectly....
Code:
[table style="background-color: grey; color: #000; border: 5px #fff solid;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;"]
[tr]
[td]You could even set height and width and background! Or perhaps IMAGES? Border radius? Whatever. Lorem ipsu.. Week wuuk! Latin! Lorem ipsum dolor.. Global freakout... Box shadow? CSS3.. tasty![/td]
[/tr]
[/table]

JDobbsy1987
Forumember

Male Posts : 147
Reputation : 0
Language : England (UK)
Location : Cheshire

http://www.JDobbsyFreeAds.darkbb.com

Back to top Go down

Solved Re: HTML + CSS Border Help?

Post by Guest on November 25th 2010, 5:28 pm

Glad Saxaca was there lol ;D

Solved + Locked

PS: Welcome

Guest
Guest


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum