HTML + CSS Border Help?
2 posters
Page 1 of 1
HTML + CSS Border Help?
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:
HTML:
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
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
Re: HTML + CSS Border Help?
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:
My post looks like this:
and should look like this:
Any suggestions?
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
Re: HTML + CSS Border Help?
Why you make borders with images?
Its easy and simple with only CSS
try this code:
not tested it don't know how it will look.. just made it here
Its easy and simple with only CSS
- 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 don't know how it will look.. just made it here
Guest- Guest
Re: HTML + CSS Border Help?
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:
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?
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?
Re: HTML + CSS Border Help?
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:
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
Re: HTML + CSS Border Help?
Gangstar, CSS could be used in post - inside an element. We will be using the bbCode table, which i grew up with
Just create a table and add a styling tag and a border code!
The code would be.. something like this:
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
- Posts : 539
Reputation : 26
Language : Markup.
Re: HTML + CSS Border Help?
Thank you to both Gangstar15 and Saxaca for your help!!!!
The following code worked perfectly....
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]
Similar topics
» HTML Border Issue
» How to add "Border color" and remove "border" for css in forumotion?
» added HTML page ... help with HTML 'version' please
» i Dont Want To Creat HTML Page But Edit Forums HTML
» HTML Page will not save in HTML Pages Management
» How to add "Border color" and remove "border" for css in forumotion?
» added HTML page ... help with HTML 'version' please
» i Dont Want To Creat HTML Page But Edit Forums HTML
» HTML Page will not save in HTML Pages Management
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum