This question already has answers here:
How to position the legend inside a fieldset with a border? [duplicate]
(10 answers)
Closed 9 years ago.
In a classical form, we have the legend tag on the same line of the top border like showed below.
The code is:
...
<fieldset>
<legend>Connexion</legend>
...
</fieldset>
Is it possible to move this legend lower in the formular like showed below?
Any idea what is the CSS ?
Thanks.
UPDATE
Below is the result after applying the following CSS:
fieldset {
position:relative;
}
legend {
top:20px;
position:absolute;
font-size:20px;
font-weight:bold
}
How to add more space after the legend 'Connexion' ?
You sure can do this with CSS. Without using absolute positioning you end up with a big gap in the fieldset border.
fieldset {
position:relative;
}
legend {
top:50px;
position:absolute;
font-size:20px;
font-weight:bold
}
Related
This question already has answers here:
Does :before not work on img elements?
(16 answers)
Closed 3 years ago.
I have tried to get after pseudo for image but nothing appears ,Is this a wrong way or we can't have :after :beforfe for inline elements.
img:after{
position:absolute;
width:100%;
height:100%;
background:red;
right:-100%;
}
img{
position:relative;
}
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSkokrxxIX-EDiBFHl7z-gDrIscZSa2KDgl5Xm1-31053Zb1yvb"/>
There are a few basics you need to know like, use of content:'' and figure.
figure:after{
content:''; /*if you are using :after or :before you have to use content*/
position:absolute;
width:100%;
height:100%;
background:red;
right:-100%;
}
figure{
position:relative;
width: 400px; /*just for test*/
}
<figure> <!-- HTML5 :) -->
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSkokrxxIX-EDiBFHl7z-gDrIscZSa2KDgl5Xm1-31053Zb1yvb"
>
</figure>
I respect all answers but it doesn't work with img tag, you have to use a parent to make it work with img tag. Although it works with other inline tage like a,span etc. Hope it will help you.
One thing please do add content:""; whenever you do css for before and after
Thanks
yes this is wrong way to use ::after & ::before you can add a parent div of img than you can use ::before and ::after
This question already has answers here:
CSS margin-top of <h1> affects parent's margin
(5 answers)
Closed 5 years ago.
I have an issue with regards to border property in CSS. When I put border-top inside the banner id it will move or stick to the upper block element (header) but if I remove it it will have an annoying gap between header and section. I don't know what is the issue. Please help. :(
HTML
<header>
</header>
<section id="banner">
<h1>Test</h1>
</section>
CSS
body {
font-family:Arial, Verdana, sans-serif;
padding:0;
margin:0;
background-color:#f4f4f4;
}
header {
background:#333333;
color:#ffffff;
height:80px;
border-bottom:red 5px solid;
}
header nav {
float:right;
}
/*issue is here*/
#banner {
height:500px;
text-align:center;
color:#ffffff;
border-top:red 5px solid;/*remove this line and see*/
border-bottom:red 5px solid;
background-color:green;
}
#banner h1 {
font-size:50px;
}
You need to remove the margin-top for your h1 element inside the #banner.
Example on jsfiddle.
For some reasons, the block level element, will take the margin-top for the first block element which is inside, and by setting a border it is removed. Read more here.
The 'gap' is there because your h1 got a default 50px margin-top (well, on a fiddle it's like that).
Just remove it.
Cheers.
You can also use CSS Reset https://meyerweb.com/eric/tools/css/reset/ first to fix multi-browser compatibility.
html, body, div, span, applet, object, iframe etc.
Example On: jsfiddle https://jsfiddle.net/wtqfp1vw/
This question already has answers here:
Text Padding in Select Boxes
(7 answers)
Closed 6 years ago.
I have a few input fields in a form. I gave them all a padding of 5px but the select boxes seemingly have an additional space inside. It's not caused by padding, margin or text-indent. Text alignment is left. Is there a way to get rid of this?
Here follows my code. At the bottom is a link to the fiddle.
CSS
input[type=text],
select {
padding:5px;
}
select {
border:solid 1px #555;
padding:5px;
}
HTML
<div>
<select>
<option>Test1</option>
<option>Test2</option>
<option>Test3</option>
<option>Test4</option>
</select>
</div>
<div>
<input type="text" value="Test" />
</div>
https://jsfiddle.net/64ppa5f5/
PS:
I also shecked the zoom and it's 100%.
It has something todo with the browser rendering itself. See this answer on same question for more informations: Text Padding in Select Boxes
In summary, you should not do this or not common.
The padding you are seeing is coming from the browser specific stylesheet. To remove space in select box, add the following style.
input[type=text],
select {
padding:5px;
}
select {
-webkit-appearance: none;
-moz-appearance : none;
border:solid 1px #555;
border-radius:3px;
padding:5px;
}
Refer this link
This question already has answers here:
Same padding at start and end of each line
(2 answers)
Add padding at the beginning and end of each line of text
(8 answers)
Closed 8 years ago.
I have a div which width is 46%. There is a h1 tag. The text of h1 tag is broken when text is longer. but i want to use same left padding for the second line.
I attached an image and css for better understanding. Is there any solution.
Here is Html
<div class="header-tite">
<h1>An Epidemic 37 Years in the Making</h1>
</div>
Here is the CSS
.header-tite{
width:45%;
float:left;
position:absolute;
left:95px;
bottom:42px;
z-index:1;
}
.header-tite h1{
font-family: 'gotham_bookregular';
font-size:55px;
font-weight:normal;
color:#191919;
line-height:68px;
padding:0px 10px 0px 10px;
background:#FFFFFF;
display:inline;
opacity:0.85;
}
Here is output
I want same gap before Y.
Do not use display: inline on block elements if you need to archive this. If you really have to, you might need to use a span tag inside your h1 tag to style the extra text separately. I wouldn't suggest you mind the gap, especially if you plan this text to be dynamic, but if this text is in your full control then you can use the span tag for additional styling, have a look here http://jsfiddle.net/Wandile/5wy9o5zs/2/ hope this helps.
This question already has answers here:
CSS :after not adding content to certain elements
(5 answers)
Closed 8 years ago.
I am styling the <hr> element with an pseudo element but Internet Explorer 11 doesn't support it.
This is how it should look like:
http://oi57.tinypic.com/23rsio2.jpg
hr {
height:1px;
background-color:#D1D1D1;
border:0; margin:30px 90px;
}
hr:after {
background:url('../images/hr.png') no-repeat top center;
content:"";
display:block;
height:30px;
position:relative;
top:-15px;
}
I hope someone can help me.
Thanks in advance!
Psuedo-elements are handled as children of the element they are attached do.
<hr>
<psuedo-element-after> image here </psuedo-element-after>
</hr>
This is not valid, because <hr /> doesn't allow children. Therefore, it won't work.
Consider applying the background image to the <hr /> itself, or use something like a class to do it, like this: <div class="divider"></div>