I was initially going for an image with a black border, along with rounded corners. However, rather than having both a rounded image and a rounded border, on Webkit I ended up with a rectangular image and a rounded border. The rectangular image seemed to overlap parts of the border at the corners, making for a slightly weird looking result. On firefox and opera I've come up with the result I had wanted but I was wondering how I would achieve the same effect on webkit. Here's some code you can run to see what I'm talking about. Thanks in advance for the help!
<!doctype html>
<html>
<head>
<title> Testing Website </title>
<style type="text/css">
img {
height: 500px;
border: 5px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
}
</style>
</head>
<body>
<img src = "http://www.public-domain-image.com/studio/slides/sunflower-on-white-background.jpg">
</body>
</html>
Use box-shadow: http://jsfiddle.net/UQ2kt/
You could try a jQuery plugin. Gives a lot of options. http://jquery.malsup.com/corner/
Try;
img{
height: 500px;
width: 500px;
border: 5px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
display:block;
}
Related
i am fairly new in coding and need some help. Currently i am trying to form a border around my texts and photo. But somehow I can't do it. It should roughly look like this http://imgur.com/a/fkUba. On the top parts photos and on the bottom ones text.
And my code looks like this
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style>
img {
border: 5px solid black;
}
</style>
</head>
<body>
<img src="https://pbs.twimg.com/profile_images/770467680012890112/kSz1jtnn.jpg" alt="Coca Cola"
Coca Cola
</body>
</html>
Like this, i can only put a border around the logo.
I know how to text, link (<p> <a href>) but I don't know how to but a proper border around these. This is like 'here is my homework for you' but i really need help!
I would recommend making a class to store your border to cut down on code.
.borders {
border: 1px solid black;
}
Then assign that class to everything that you want to have a border:
<img class="borders" src="https://pbs.twimg.com/profile_images/7704676800128901/kSz1jtnn.jpg"
As for the text you can add some padding to the top and bottom to increase the white space:
h2 {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
I think you need to set border for your logo like this:
in the css typing code like this.
img{
border: 1px solid black;
}
good luck
Just like you have border around image using this style:
img {
border: 5px solid black;
}
you can have border around almost any element like similar styles like:
p {
border: 5px solid black;
}
a {
border: 5px solid black;
}
I'm been searching the web for a while looking for a way to put a icon in a white border circle with transparent background,
Anyone got some input this? it's doable?
think something like
<Code for circle> <i class="glyphicon glyphicon-plus"></i> </circle end>
Btw, it need to work in a mobile browser. thx for everyone's time!
You can do this using border and border-radius CSS properties:
CSS:
.rounded-icon {
border: 3px solid #fff;
display: inline-block;
border-radius: 26px;
width: 26px;
height: 26px;
text-align: center;
}
HTML:
<div class="rounded-icon"><i class="glyphicon glyphicon-plus"></i> </div>
jsFiddle demo
Suppose your circle icon is in a div with class "icon". I would suggest using an extremely large border radius in CSS to emulate a circle, and simply add a white border, say 2px wide:
.icon {
-moz-border-radius: 999px;
-webkit-border-radius: 999px;
-khtml-border-radius: 999px;
border-radius: 999px;
border: 2px solid #fff
}
If you also want this to work in IE8, you may also want to refer to using PIE, here: http://css3pie.com/
I am trying to make a page with css with the little bit of skill I have been learning. I have the title at the top of the page and it looks good but when you resize the window the title over laps the image border I have. I just found out, that it doesn't display well in firefox. How could I fix this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTM HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>This is my website</title>
</head>
<style type="text/css">
body{
background-image:url('bg-body.jpg');
background-repeat: repeat;
width:967px;
}
h1 {
font-size: 40px;
position:absolute;
top: 47px;
left: 27%;
color:red;
}
.venus {
position:absolute;
top: 160px;
left: 44%;
}
#menu {
position:absolute;
top: 400px;
left: 130px;
color:blue;
height:500px;
width:290px;
background-color:#DCE1CA;
border-top: 12px outset silver;
border-left: 12px outset silver;
border-right: 5px outset silver;
border-bottom: 5px outset silver;
}
li {
line-height:200%;
font-size: large;
list-style-type:none;
list-style-image:none;
}
#textarea {
position:absolute;
top: 400px;
left: 425px;
color:blue;
text-align:left;
height:500px;
width:1149px;
background-color:#DCE1CA;
border-top: 12px outset silver;
border-left: 12px outset silver;
border-right: 5px outset silver;
border-bottom: 5px outset silver;
}
</style>
<body>
<img src="sidebar.png" width="100%" height="2000px" class="sidebar" />
<h1>Welcome to my HTML/CSS/JavaScript Page</h1>
<img src="venus.jpg" width="200px" height="200px" class="venus" />
<div id="menu">
<ul>
<li>Mix of CSS & JS</li>
<li>Your Full Name</li>
<li>How Many Apples</li>
<li>Many Questions</li>
<li>Background Color</li>
<li>My Family Event</li>
<li>Images, Images</li>
</ul>
</div>
<div id="textarea">
Here is my story: I have been learning JavaScript and on the side I have been learning some CSS/HTML.
</div>
</body>
</html>
I would advice you to set your 'sidebar.png' as a background image, rather then an actual <img> in the html. <img>in the html should only be used if it's actual content, like your venus.jpg. The background is considered styling and not content.
That beeing said i would try to do something like this:
Fiddle
I've put most of the explanation in the css code trying to make things clear. Perhaps it's a bit avanced, but since you say you are learning css... ;-)
The advantage of working with this kind of 'liquid' design is that the corner images will not be distorted, as they are currently. Also will your problem of the title running over the image never occurs again, wich was the goal ulmtimatly.
Try setting the width to 100% instead of a fixed width, then set the background-position to fixed. See if that helps.
If your worried about what your page will look like when you re-size it you should be setting your heights, widths, and positions by percentage, not pixels. Setting those attributes by percentage scales them when the page re-sizes.
Ex: background-size: 100%;
Im trying to demo CSS3PIE and it wont work in IE at all.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link href="test.css" type="text/css" rel="stylesheet">
<title>Test</title>
</head>
<body>
<div id="title"></div>
<div id="sub_title"></div>
<div id="main_area">
<div id="date_area"></div>
</div>
</body>
</html>
css:
body{
margin: 0 auto;
}
#title{
margin: 0 auto;
width: 100%;
height: 40px;
background-color: white;
}
#sub_title{
margin: 0 auto;
width: 100%;
height: 25px;
background-color: green;
}
#date_area{
width: 310px;
height: 250px;
border: 1px solid #4A4949;
padding: 60px 0;
text-align: center;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: #707070 2px 2px 4px;
-moz-box-shadow: #707070 2px 2px 4px;
box-shadow: #707070 2px 2px 4px;
background: #EBEBEB;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EDEBEB), to(#C9C7C8));
background: -moz-linear-gradient(#EDEBEB, #C9C7C8);
background: linear-gradient(#EDEBEB, #C9C7C8);
-pie-background: linear-gradient(#EDEBEB, #C9C7C8);
behavior: url(/PIE.htc);
}
The result is just a block with a border, no gradient/shadow etc
Any help/solution would be much appreciated.
The behavior location should be relative to your HTML file, not your CSS like any other declaration using url(). So assuming your index.html and PIE.htc is in root and your CSS is inside a 'css' folder, you should go like this:
background-image: url(../images/example.jpg);
behavior: url(PIE.htc);
Also, try adding a .htaccess file with the following content in the same location as the PIE.htc file:
AddType text/x-component .htc
Hope this helps.
Try adding
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
This question is similar to the one posted here: CSS3 PIE - Giving IE border-radius support not working?
CSS3 PIE - Giving IE border-radius support not working?
The PIE.htc requests should respond with the mime type "text/x-component" - or IE won't touch the behaviour.
adding: AddType text/x-component .htc - to the .htaccess file worked like a charm for me.
The shorthand CSS property let's you control what corners to round or not.
border-radius: 0 15px 15px 0;/*(top-left, top-right, bottom-right, bottom-left). */
Try to clear cache in your browser. Especialy when you switch between compatibility modes. It really helps
Make sure you have the latest beta release. If the HTC file still causes issues, try the JS implementation.
can anyone provide insight or a sample of how to create a css based bubble container for html to go inside it?
im looking to make a rounded table. that is to say i want the result to look like a table but with rounded edges. and it would be great to have a slight gradient inside as well.
i found one sample on this site: http://www.seekdotnet.com/
see on the right where they have the "We Are Here to Help!" section.
It is generally called rounded corners. You can do that using css only. Here is a great list of techniques. Also if you want to use javascript or jQuery in specific, there is a plugin for that called rounded corners (note: javascript is not a mandatory for doing what you want, but it is definitely a easy way).
The boxes can be given curvy or round corners using the border-radius attribute in CSS.
Example:
#myBtn {
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
box-shadow: 3px 3px 3px black;
}
#myBtn:hover {
background-color: orange;
}
#myBtn2 {
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
box-shadow: 3px 3px 3px black;
}
#myBtn2:hover {
background-color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title> Test </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="myBtn">
Button
</div>
The above is a button with curved corners.
<div id ="myBtn2">
Button
</div>
The above is a button with pointed corners.
</body>
</html>
The more the number of pixels in border-radius, the rounder the corners get.
To know more about border-radius, please visit https://www.w3schools.com/css/css3_borders.asp
Hope this helps...
Depends. if you need it to fully compatible with browsers that don't support CSS3, then try Here
if you want css3 rounded corners then try here for:
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
I may have misread the question and, if so, please accept my apologies.
As far as I can tell, the rounded corners in the example you give are, like I previously said in a comment, done by images. You should look into #Teja's answer as he points you in the right direction but, just for you reference, here goes the HTML and CSS used to recreate the layout you mention:
<div id="chat-panel"><h3>We Are Here to Help!</h3>
<p>We are extremely proud of our support and are available to help you at anytime.</p>
<span class="panel-bottom">
<a href="javascript: var e = window.open('http://livechatserver.seekdotnet.com/SightMaxAgentInterface/PreChatSurvey.aspx?accountID=1&siteID=1&queueID=2','chatWindow','width=490,height=404,resizable=0,scrollbars=no,menubar=no,status=no');">
<img alt="Click Here to chat with us" src="/images/button/btn_chat_new.gif">
</a>
</span>
</div>
#chat-panel {
background:url("http://www.seekdotnet.com/images/sidepanel_repeat.png") repeat-y scroll 0 0 transparent;
margin-bottom:1em;
text-align:center;
}
#chat-panel {
background:url("http://www.seekdotnet.com/images/sidepanel_repeat.png") repeat-y scroll 0 0 transparent;
margin-bottom:1em;
text-align:center;
}
#chat-panel p {
padding:0 10px;
}
#chat-panel .panel-bottom, #special-offer .panel-bottom {
background:url("http://www.seekdotnet.com/images/sidepanel_bottom.png") no-repeat scroll left bottom transparent;
display:block;
padding-bottom:10px;
}
after looking over all the notes here and searchign the web high and low i came to the conclusion that this is the best way to get rounded corners...
http://blog.benogle.com/2009/04/29/css-round-corners/
using lines of variable length to create the top and bottom curves.
feedback?
For browsers that support rounded corners, it's dead easy with a simple CSS function:
border-radius:10px;
To support older versions of Firexfox, you will need -moz-border-radius as well.
Internet Explorer doesn't support rounded corners in CSS, but you can use CSS3Pie as a hack to allow it to support them. See the CSS3Pie website for more info on exactly how to use it.
However note that rounded corners on a table element are likely to be problematic. You'll want to wrap your table with a <div> and put the rounded corners on that instead.
A CSS3 rounded corner example to get you started:
<div class="mysexaybox">
<p>Cos boxes were made to be sexay!</p>
</div>
.mysexaybox {
background: #ccc;
background: -moz-linear-gradient(top, #ddd, #bbb);
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb));
border: 1px solid #bbb;
color: #000;
padding: 4px 8px;
text-shadow:0 -1px 0 rgba(255, 255, 255, 0.4);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}
DD_roundies is a decent solution if you absolutely must support IE6-8 (IE9 will support the rounded corners above)
This is the best example and explanation I have seen of box with rounded corners.
The All-Expandable Box
There are many ways to do it, use this as some inspiration.