as asked many times before (but never really answered) I want to center a legend in a fieldset.
The trick was done perfectly here, which I also bought for my project: http://themeforest.net/item/aloma-liquid-mobile-template/full_screen_preview/5819068
the code from the css reads like this
fieldset {
display: block;
margin: 20px 1%;
margin-bottom: 20px;
padding: 0 auto;
padding: 15px 0;
border: 0;
border-top: 1px solid #DDD;
width: 98%;
}
legend {
display: table;
min-width: 0px;
max-width: 70%;
position: relative;
margin: auto;
padding: 5px 20px;
color: #eee8aa;
font-size: 20px;
text-align: center;
}
But when I try to redo it in another page in my project, that doesn't use the theme, I fail. Am I missing something in the code above?
The theme uses the code <legend align="center"> which fixes the Firefox issue:
http://jsfiddle.net/ncv8H/
<legend align="center">legend</legend>
In HTML 5, the legend align attribute has been depreciated so here is how I did it.
Note that Bootstrap 4 (don't know about 3) completely hides a field set border and sets the legend width to 100%. So in addition to adding the width:auto, you would also have to use css to set the fieldset border if you want it to display.
legend {
width: auto;
margin-left: auto;
margin-right: auto;
}
for
<legend>Legend</legend>
Related
I've never had this problem before, but for some reason, my 'overflow: auto' tags are not working correctly. They show scrollbars, but I can't actually scroll the scrollbars. The scrollbar appears if a section is larger than the height of the container, as it should, but the actual scrolling capability is defunct. It's as if the scrollbar is simply frozen and won't move. I've searched across the internet for why this may be happening, and couldn't find an appropriate solution. I also tried removing the 'overflow: hidden' from my parent element, thinking that it may somehow be affecting the entire code, but removing that elicited no effect whatsoever. I've also double-checked that everything has a width and height, since I know that missing those can adversely affect an overflow. I also checked the positioning of each item. (And I also know it isn't just my mouse messing up because scrolling on other sites/pages is perfectly fine)
I'm frustrated and entirely at a loss at this point, so I'm hoping extra sets of eyes may spot something that I'm missing.
Here is my project: https://codepen.io/royalstandard/pen/RwMxrLB
Main container -
.ldmainprofile {
width: 1100px;
height: 1400px;
padding: 0px;
background-image: linear-gradient(80deg, rgba(163,135,135,1.0), rgba(163,135,163,1.0));
border-radius: 15px;
position: relative;
overflow: hidden;
z-index: -10;
}
The first "frozen" container -
.basics {
height: 300px;
width: 270px;
border: 20px solid rgba(92,65,92,0.6);
background-color: #CCC;
border-radius: 10px;
position: absolute;
margin: 20px;
}
.basics ttl {
display: block;
font-family: aclonica;
font-size: 22px;
height: 22px;
width: 250px;
text-align: center;
padding: 20px 10px 10px 10px;
border-bottom: 1px dotted #888;
color: rgba(92,65,92,0.8);
}
.basicscroll {
height: 247px;
width: 240px;
background-color: #FF7777;
padding: 0px 15px;
overflow: auto;
}
.basics cat {
display: block;
font-family: poppins;
font-size: 15px;
text-align: left;
margin: 10px 0px 10px 10px;
color: rgba(92,65,92,0.6);
letter-spacing: 1px;
text-decoration: underline rgba(92,65,92,0.3) 4px;
}
The sections being affected so far are ".basicscroll" (currently coded with peach color as I do to clearly see what I'm working on) and ".info2 trig" at the bottom.
I am having an issue with IE11 and utilizing the CSS calc() function along with display: inline-block and/or display: inline-table.
Currently I have a text input and a button that should be next to each other (inline), with the button always being a fixed width and the input should take up the available space leftover (i.e. calc(100% - 92px)). Both elements are display: inline-table;. In all other browsers, doing this calc() worked fine. In IE11, it drops the button to the next line.
Included in the JSBin are a couple styles at the bottom that make the elements appear inline, although this fix will not work for an end result. What I did was added display:inline-block to both the input & button and also removed padding and border from the input. At the end of the day, the input **must have padding & border` so this will not work for my use case.
^^ box-sizing: border-box fixed that "hack", but the issue as a whole still exists in IE11.
Here is the JSBin (in order to see the issue, you must be using IE11)
The CSS, as it stands now, looks like this...
body, dd, figure, form {
margin: 0;
}
form {
margin-top: 1.6875rem;
width: 100%;
margin-right: auto;
margin-left: auto;
}
form fieldset {
margin: 0;
padding: 0;
border:0;
}
input {
border: none;
border-radius: 0;
outline: 0;
margin: 0;
padding: 0;
text-align: left;
}
input {
font-size: 12px;
line-height: 15px;
display: inline-table;
padding: 4px 12px 5px;
border: 1px solid #000;
border-radius: 0;
background-color: #fff;
color: #999;
font-style: italic;
font-weight: 300;
vertical-align: top;
margin: 6px 0 14px;
margin-top: 0;
margin-bottom: 0;
width: calc(100% - 92px);
height: 40px;
}
button {
border: 0;
height: 40px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
font-size: 13px;
display: inline-table;
position: relative;
padding: 0;
background-color: #000;
color: #fff;
width: 92px;
}
I'm assuming there is a bug with IE11 and calc() in which calc() doesn't take into account the border/padding when an element is display:inline-block or display:inline-table, although I could not find anything in my research to suggest this 100%.
Ultimately my question is, how do I get two elements to be "inline" with one being a fixed pixel value and the other a percentage width that is cross browser compliant.
EDIT: added box-sizing: border-box which made the display: inline and padding/border: 0 obsolete at the bottom of the JSBin. The issue still persists in IE11 though.
The answer to my question is as follows...
As Adam mentioned in the comments above, adding box-sizing: border-box; to, at the very least, the input & button elements fixed the issue where the border/padding was not being calculated in the calc() function.
In addition to that, changing display: inline-table to display: inline-block fixed the issue in IE11.
I'm using Wordpress theme Canvas by Woothemes. I'm trying to center the site description text underneath the logo. Here is the site: http://barkhascustomsourcing.com
Here is the current CSS I am using. It's not responsive, I know, but I need to re-write so it is.
#logo .site-description {
display: inline-block !important;
line-height: 25px;
margin-left: -330px;
padding-bottom: 20px;
padding-top: 20px;
text-align: center;
width: 1000px;
}
Any suggestions?
To make this properly responsive you will have to do a lot more than only adjust this class. Heres how you can implement it for your header section:
#logo { width: 100%; }
#logo > a {
width: 100%;
max-width: 350px;
margin: 0px auto;
display: block;
}
#logo > span.site-description {
width: 100%;
max-width: 1000px;
margin: 0px auto;
display: block !important;
}
By making the outer and inner box following the full width but constraining them with max-width will make them responsive.
Now, this is only a small part of your site. I'm not doing the entire thing for you here, but you get the general gist. It also requires you to look at almost any elements, as resizing will require you to make elements that take up a natural; height and expand as their width decreases. So actually, you cannot use any pixel based widths or heights anywhere, only max-widths and max-heights.
PS: Next time you ask a question, please include what you have tried yourself. Show us that you are not outsourcing your work to us :)
Following things you need to update.
#logo {
margin: 0px auto;
width: 100%;
text-align: center;
}
#logo .site-description {
line-height: 25px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
width: 100%;
display: block !important;
}
Vague questions but i don't know the right question to ask google either.
I have a widget that has a background img that is in columns on my page. But when I resize the page my widget will be destroyed making impossible to scroll the page sideways. The background image is also cut off.
Also: how can I prepare for my page to adapt to different screen sizes? Is there a way to make my widget stick in one place? Can anyone point me in the right direction?
Thanks
.example_wrapper
{
margin: 10px 20% 10px 20%;
border-style: solid;
border-width: 0px;
height: 315px;
border-radius: 20px;
}
.example_container
{
margin: 10px 0px 10px 3%;
align: center;
border-radius: 0px;
height: 300px;
overflow:auto;
background-image: url('img.png');
background-repeat: no-repeat;
background-position: center;
}
.example_textarea
{
position: absolute;
margin: 145px 30% 0 5%;
align: left;
overflow: hidden;
height: 130px;
}
.twitter_block
{
position: left;
margin: 6px;
height: 120px;
width: 120px;
align: left;
float: left;
}
.twitter_pic
{
position: center;
margin: 1px 20% auto 20%;
}
.scale-image
{
height:73px;
width: 73px;
}
.twitter_link
{
position: none;
margin: 0px 100px auto 30px;
}
.twitter_half
{
margin: 0px;
}
.twitter_profile_pos
{
text-align: center;
margin: 0px 10px auto 17px;
font-weight: bold;
}
.twitter_profile_pos a
{
color: #043E6B;
}
It could be some sort of clearing issue, or it could be something to with your position rules.
position:none, position:left and position:center are not valid rules. So those won't help with any positioning issues.
position:absolute might be breaking your layout if position:relative is not applied to the parent element (otherwise it positions the element relative to the whole document, rather than a specific element). This could be causing the break on resize.
If you could post your corresponding HTML, everyone should be able to recreate it. Or better yet, if you post the code on jsfiddle and put the link here, we can help solve it even faster!!
I have a similar problem to this question Why does my floated left div go to the next line in IE6 using the 960.gs?
In my design, the subcategories should be 4 per row. They look fine in FF,Safari,Chrome, but in ie6 they only show 3 per row. I tried creating a different css for ie6, but it didnt work, also i tried reducing the width and padding of each row, but still i have 3 subcategories per row.
I asked again because i bet the solution can be very specific to the css you have.
try setting width of each .subcategory at 24% or max 237px
.subcategory
{
width:24%;
}
updated
in category.css change in this way:
.subcategory {
FLOAT: left; MARGIN-BOTTOM: 15px; WIDTH: 24%; HEIGHT: 230px; TEXT-ALIGN: center
}
.category-item-image {
DISPLAY: block; BACKGROUND: #fff; MARGIN: 5px 30px; WIDTH: 170px; PADDING-TOP: 5px; HEIGHT: 170px; oveflow: hidden
}
.subcategory-image {
DISPLAY: block; BACKGROUND: #fff; MARGIN: 5px 30px; WIDTH: 170px; PADDING-TOP: 5px; HEIGHT: 170px; oveflow: hidden
}
Problems are
MARGIN: 5px 34px;
and
WIDTH: 25%;
I've tried to set them at 30px and 24% and in IE6 it works!