i'm doing a web app for iPhone, i'm having some troubles with borders.
To simplify things i have a background image for body, a box with rounded corners which have some elements inside and a title, and that's where problems begins as i want my title to be on the top border of my box without having the borderline behind it.
Here is a screenshot :
I can't see any solutions to render it properly, some of you have any guess ?
It would be much appreciated
From what I can gather, it looks like you should be using the fieldset element (as you are "grouping" form elements together), which conveniently also looks the way you want it to:
<fieldset>
<legend>Promoter</legend>
<select>
<option>Choose a promoter</option>
</select>
</fieldset>
Styling is simple. Align the legend text and style the fieldset border using CSS:
fieldset {
border: 1px solid black;
border-radius: 5px;
}
legend {
text-align: center;
}
For a live example, see this jsFiddle demo.
Not sure if there is a simple pure css based solution.
A method that somewhat achieves what you want is to have text shadow on the text floating above the border, using a color that blends with the general color of the background. You can tweak the values such that the border will (at least mostly) fade away behind the text. This will of course also fade away the background image, replacing it with the color of the shadow, but it might look fairly nice anyway. (Having a more solid background for the text will make it easier to read, too).
Related
I have a basic color presentation using input texts and boxes using CSS, I achieve it only using input text as you can see into this fiddle, I want to do same with same adjust but without using input text, what I need to do to show only as a <p> tag
I try to replace input with paragraph tag but it disadjust like this fiddle
Help is very appreciated. Regards
You had added paddings to your input tags which you missed out when you converted them to paragraphs.
So just add them to your paragraphs tags like this,
.input-color p {
padding-left: 25px;
}
See JSFiddle
If you still want them to have the text box like appearance you can just add background-color, border, and sufficient width, paddings and margins.
See JSFiddle
Assuming you want to keep the boxes, you can add this little snippet into your css
p.input{
width: 150px;
height:16px;
border: solid 1px #000;
}
You must have the paragraph have the class "input" and before your text for this to display correctly (of course someone else has something that would work). If you want the same color, use the hex: #111111 and it should be the same if not the exact color. Just to see this, here is my JSFiddle
I am trying to style a box for the alternative text in pictures. If a pictures doesn't exist I want the alternative-text to appear in a box with text in it that looks like a picture. It works on PC, but it doesn't look the way I want on Mac. A thin grey border appears and a question mark is placed in the middle.
Picture: http://postimg.org/image/tte1lw8sj/
This is my HTML for the pictures
<a href='LINK.php?id=$id'><img src='$filename' class='headerimg' alt='$alttext' width='300'></a>
And this is my CSS:
.headerimg {
color: #000;
font-size: 20px;
margin-bottom: 5px;
max-height: 120px;
border: none;
}
Does any one know why it box looks different on Mac?
The rendering of an img element in situations where the image is not displayed is very browser-dependent, and you cannot expect to style it consistently. For example, some browsers simply render the alt text as if the element were just replaced by that text (and some people think that this is really the most appropriate way).
Unless you need to support rather old browsers, consider using an object element instead. It allows the fallback content to be normal HTML, and you can put an element there and style it as desired:
<object data='$filename' width=300><span class=alt>$alttext</span></object>
I want to create a box like this with random text title: http://oi44.tinypic.com/1tu4xz.jpg
I know how to code this with static (unchanged) text, but k dont know how to do this effective with random variable-length text and border. It is important to let the background show through.
Please, do you know something? It may just be a reference to a similar solution.
You could try playing with fieldset and legend elements. They are usually used in forms, however they could certainly offer an easy solution ... to achieving what you want here.
You could try something like this:
<fieldset>
<legend>Title text</legend>
<p>Your random content ;-)</p>
</fieldset>
and in your CSS something like this:
legend {
text-align:center;
padding:0 20px;
}
fieldset {
border:2px dotted #000;
}
you can see the body background through the legend and the border.
here is a jsfiddle to play with (it uses a border image as an additional example).
Create a normal box with a frame, like:
<div style="border:1px solid black"></div>
Then insert an element OVER the box with your title, background-color: white and some paddings. Then this element will cover the part of the border.
Of course you can set some background image for the title element instead of white color- it will work too.
I have a website im making where the background images change, i want the text to mimic the background's color but not so much where they are not visibile, how can i make my text transparent in this way?
If you have a font color of white on your text and you give the text an opacity, it will start to resemble the underlying color if it is very faint. Here's one way that you could do it using inline styling (for simplicity) (see jsFiddle here).
<html>
<body style="background:skyblue">
<p style="color:#fff;opacity:0.3;filter:alpha(opacity=30);">This is some text that will be partially see-through.</p>
</body>
</html>
As a side note, your website will be really hard to read.
Use a transparent color:
p {
color: rgba(255,255,255, .5);
}
I'm running into an issue where the border of an outer div with rounded-corners is getting cut-off by an inner element with a CSS3 gradiet. Is this a bug with CSS3 - if so, I'll happily submit a bug-report.
If not, how do I fix this?
Source & Demo here:
http://jsfiddle.net/joshuamcginnis/2aJ8X/
Screenshot:
The problem isn't the gradient - give your <h2> element a solid background to see. Instead, you need to round the corners of the <h2> as well as of the wrapping <div>.
Add border-radius: 10px 10px 0 0; and the appropriate vendor-specific versions to the <h2> styling and it all works.
overflow:hidden; does not work
but this does:
h2
{
position:relative;
z-index:-1;
....
}
It's not specific to background gradients. It's just the background of the h2 element overlapping sitting on top of the rounded corners. I'm not sure it's a bug in the strictest sense, but it is fairly well known. Easiest 'fix' is rounding the corners of the element with the background. Example: just setup for chrome