in my html page I have div with css:
padding: 0px;
color: rgb(51, 51, 51);
background: none repeat scroll 0% 0% rgb(255, 255, 255);
position: relative;
overflow: visible;
in this div I have form and horizontal line:
<hr color="#424242" size="2">
How can I add this this line after form ? his example work on bigger display but when I see my page on the phone line is next to div
Unless you have a special reason to use presentational and nonstandard markup like <hr color="#424242" size="2">, omit this element and use CSS instead to draw a bottom border on the form element:
form {
border-bottom: solid #424242 2px;
}
If desired, add some padding-bottom and/or margin-bottom to this rule, to create vertical spacing before and/or after the line, respectively.
If you need to use the markup, see my comment to the question. But whatever the cause of the problem might be, the CSS approach should avoid it, since at attaches the horizontal line to the form element.
You can use the CSS:
clear: both;
To make a div clear (or go under) another element.
Is this what you mean?
hr {
border-bottom: 1px solid #424242;
clear: both;
display: block;
margin-bottom: 10px;
padding-top: 10px;
width: 100%;
}
Related
I have a problem where I need to remove/hide a line behind my transparent logo:
The white line needs to be beside the logo, but it should not be shown behind. - And no, I will not add a black background..
Code:
<div style="position: absolute;margin-top: 74px;margin-left: 4%;width: 90%;height: 2px;background-color: #FFF;"></div>
<span style="font-size:81px;margin-top: 14px;padding: 0px 0px 0px 43%;position: fixed;">LOGO</span>
Span will become a transparent image, this is just for testing..
You can check out the Line-On-Sides Headers CSS Trick.
Something like this:
body {
background-color: black;
color: white;
}
.fancy {
line-height: 0.10;
text-align: center;
font-size: 81px;
margin-top: 20px;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-top: 1px solid white;
top: 0;
width: 200px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
<div class="fancy"><span class="fancy">LOGO</span>
</div>
Source
Since you have a transparent background, I think the only way is to duplicate the line div and divide it in two, one left and one right, I don't know the dimensions you need, but you should have something like this:
<div style="position: absolute;margin-top: 74px;margin-left: 4%;width: 30%;height: 2px;background-color: #FFF;"></div>
<span style="font-size:81px;margin-top: 14px;padding: 0px 0px 0px 43%;position: fixed;">LOGO</span>
<div style="position: absolute;margin-top: 74px;margin-left: 60%;width: 30%;height: 2px;background-color: #FFF;"></div>
Hard to say the correct margins without knowing where they are contained, you should post the entire HTML if you want more help.
I would absolutely position the elements in a container and then arrange them with z-index to ensure they stack in the correct order. I have created a JSfiddle with a quick example of how to acheive this:
https://jsfiddle.net/bL0dfkvq/
The key here is the z-index on the text is:
z-index:10;
The z-index on the hr line is:
z-index:5;
Few things...
1. Your methods of positioning in the code snippet you included are, quite frankly, awful. I'd clean this up and not using things like padding: 43% to position your elements - make sure you have a sturdy foundation before you go building a house on it! I'd suggest checking out some resources in regards to positioning elements using CSS - given that you've provided just a 2-line snippet, I can't exactly go into what proper methods would be in your case.
2.
And no, I will not add a black background..
You're acknowledging the simplest working answer, yet you don't want to use it...? Why not? Do you mean you don't want to apply a background to the image? You can just add it to the span using background-color: black;
3. Again, I don't approve of position the elements in this manner, however using your snippet (and applying the 43% on the margin instead of padding), you can achieve this: https://jsfiddle.net/dgat2q34/
For additional space between the line and the text, you'd then use padding on the span.
EDIT: Kaiwen Huang brings up a good point - if you didn't want to use specifically black as I've included in my example, you can change the span's background to background-color: inherit; instead.
You might test this code:
<div id="#bg" style="border:1px solid ; position:relative; background-color:black; display: inline-block"><hr id="line" style="border: 1px solid #ffffff; position:absolute; width:98%; top:50%; z-index: 0;margin:0"><div id="#container" style="border:1px solid ;position:relative; background-color:none; display: inline-block"><div style="margin:0px 35px; font-family:Arial, Helvetica, sans-serif; color:#333333; font-size: 80px">LOGO</div></div></div>
Just set your logo to have a higher z-index: than the line.
Z-index is basically:
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
I'm having an issue where adding a button at the end of a div is causing a vertical scrollbar to appear. If I add content after the button then it doesn't. I haven't been able to figure out why this occurs. In my html I have:
<span class='cta'><a href='#' class='cta'>View More Information</a></span>
That is inside of my content div. The CSS I've got going is:
.content {
overflow: auto;
margin-left: 180px; }
span.cta {
background-color: rgba(102, 153, 204, 1);
padding: 6px;
border-radius: 5px;
margin: 10px;
display: inline; }
a.cta {
color: rgba(255, 255, 255, 1);
font-weight: bold;
text-decoration: none; }
If I use this style as the last item in my .content then I get a vertical scrollbar. If I add an empty element like a row or paragraph with after it then it doesn't create the vertical scrollbar. I've tried playing with display height margin and haven't been able to figure out what's causing the problem.
I have a dialog box where I want to have two button side by side .One button will be "Done" button and other will be "close" button.
html:
clickme
Css:
a.embeddedBrosweWindowDoneButton {
margin:10px 900px 0;
text-align:center;
display: block;
width:50px;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
/* button color */
background-color: #173553;
/* rounded corner */
border-radius: 5px;
/* drop shadow */
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
/* text shaow */
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
I already have a "done" button .I want to have another button called close buton by side of done button . How can i have two buttons in line. I tried but one button was over the other button.
a.embeddedBrosweWindowDoneButton:hover {
background-color: #6D7B8D;
}
You have display set to block. It needs to be set to inline-block.
If you set it to block, the elements will reside on their own line within their parent container. Use inline-block to let them reside on the same line.
Put each button in a div and have the float attribute set to left.
.buttondiv {
float: left;
}
This CSS-style:
display: block;
Makes the buttons set themselves on different rows. If you apply float: right; on them both, you'll be able to set them beside eachother. Note that you a) might want to add a clearfix and b) invert the order of your elements (adding done before the second button) as float: right has a tendency to shift them unexpectedly.
Clearfix:
<div style="display: block; clear: both; height: 1px;"></div>
Add the element above to the "bottom" of the element that wraps the buttons, so that they won't "break loose" from their place and float outside the box.
Since it's got a display:block;, you can specify it's width, and then float it left or right, depending on how you would like to have the layout be. Once one is floated, the other one will wrap to the other side of it.
Here's a good article about floats: http://css-tricks.com/795-all-about-floats/
Using nobr can help you solve this problem.
<td>
<nobr><input type="submit" value="Submit">
<input type="button" value="Return"></nobr>
</td>
Is it possible to add padding before line-break? As in, making from this to this .
Current CSS code:
span.highlight { background: #0058be; color: #FFF; padding: 2px 5px; }
I had to add an extra margin-left:0; to make the two lines start at the same point.
This can be done with pure CSS. Create a solid box-shadow to the left and right of the highlight in the same color (and use margin to correct the spacing). For your case:
span.highlight {
background: #0058be;
color: #FFF;
box-shadow:5px 0 0 #0058be, -5px 0 0 #0058be;
padding: 2px 0;
margin:0 5px;
}
It took some tryouts, but here it is: the single- and multi-line highlighter with additional padding.
HTML:
<h3>Welcome to guubo.com, Gajus Kuizinas</h3>
<p><span>So far you have joined: </span><em>Networks guubo.com</em><ins></ins></p>
CSS:
h3 {
padding-left: 5px;
}
p {
background: #0058be;
position: relative;
padding: 0 5px;
line-height: 23px;
text-align: justify;
z-index: 0;
}
p span {
background: #fff;
padding: 2px 0 2px 5px;
position: relative;
left: -5px;
}
p em {
background-color: #0058be;
color: #fff;
padding: 2px 5px;
}
ins {
position: absolute;
width: 100%;
line-height: 23px;
height: 23px;
right: -5px;
bottom: 0;
background: #fff;
z-index: -1;
}
The trick is to style the whole paragraph with a blue background, and only put white background on top of that at the beginning and the end. Doing so assures blue background elsewhere...;)
Two main disadvantages:
The highlighted text has to start at the first line (but does not necessarily have to flow into a second),
The paragraph has to be aligned with justification.
Tested in Opera 11, Chrome 11, IE7, IE8, IE9, FF4 and Safari 5 with all DTD's.
See edit history for the previous less successful attempts.
You can achieve this using just box shadow, with no messy padding or margins.
The trick is to use box-shadow's spread option, and the padding on wrapped inline elements behaves as you expect.
.highlight {
background: black;
color: white;
box-shadow: 0 0 0 5px black;
}
display: block will achieve part of what you want, but of course it will make the span a block element, and so you won't get the wrapping behaviour seen in your example.
Your screenshot holds the clue to what you need to try and do: you need to impose a margin to the left and right on your "normal" paragraph text, and then have the span disregard this (and include its padding), to achieve an "overhang" of your blue highlight when compared to the rest of your text. You can't do that with straight CSS on your span, because it covers two lines and obviously "left" and "right" only refer to the span, and not the individual pieces of text contained therein.
Straight CSS isn't the answer here. You might want to take a look at this question, which uses a jQuery filter to grab the first word in an entity, etc.:
jQuery first word selector
Maybe you can use this technique.
http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/
The closest thing, if it really matters that much I'd say is to add display: inline-block;
Problem
I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.
Requrements
I need to style a h3 tag to have an
underline/border after the content.
This h3 will be used multiple times
on the page, so the conent length can
vary
The solution needs to be
cross-browser (IE 6/7/8, FF 3, &
Safari)
Sample Code
<div class="a">
<div class="b"><!-- etc --></div>
<div class="c">
<h3>Sample Text To Have Line Afterwards</h3>
<ul><!-- etc --></ul>
<p class="d"><!-- etc --></p>
</div>
</div>
Sample Output
Sample Text to Have Line Afterwards ______________________________________
Another Example __________________________________________________________
And Yet Another Example __________________________________________________
Notes
I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags
I tried a background-image, but if it gave me problems if I gave it one with a large width
Using text-indent didn't see to give me the effect I was looking for
I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either
Any ideas would be much appreciated!
This will work if class 'c' is always the parent of the h3...
.c {
position: relative;
margin-top: 25px;
border-top: 1px solid #000;
padding: 0px;
}
h3 {
font-size:20px;
margin-top: 0px;
position: absolute;
top: -18px;
background: #fff;
}
It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.
try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?
.c {
background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
margin: 0;
padding: 0 0 2px 0;
float: left;
font-size: 20px;
background: #ffffff;
}
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
http://besh.dwich.cz/tmp/h3.html
H3 {
border: 1px solid red;
border-width: 0 0 1px 0;
text-indent: -60px;
}
You need to know the width of the text, but works pretty well.
The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:
h3#main-title { background: url(line.png) no-repeat bottom XYZem; }
where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.
this worked for me
div.c
{
background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
}
div.c h3
{
height:20px;background-color:white;display:inline;
}
you make the div the width of your content
then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image
Can you pad content in the UL tags? If so, this might work:
h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }
check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html
then again i have NO IDEA how to control the end of the line.
Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky
Imagine:
A long title that will wrap to two lines___________________
and leave you like this in great_llama's solution
and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.
Solution:
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))
Here's a better answer:
.c {
background: url('line.png') repeat-x 0 20px;
}
H3 {
background-color: white;
display: inline;
position: relative;
top: 1px;
}
Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.
h3:after {
content: '___________';
}