#searchInput {
width: 50% !important;
height: 50% !important;
display: block;
position: relative;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
color: #FF7F27;
top: -300px !important;
left: 100px !important;
background: transparent;
font-size: 85%;
I'm doing this in main.css for monobook skin in mediawiki. For some reason, main.css is ignoring my !important because it's still not centering the div. What am I doing wrong to have my code keep getting ignored? How can I fix this? Im not asking how to center. Im asking why my divs code is bein ignored even when its proper.
Technically, this div is already centered because the width is 100%...
We need to see the bigger picture here as presumably this div is inside something else which is prompting you to try to override said div's css using !important?
This is the kind of thing you should be doing:
body {width: 100%}
#searchInput {width:50%; margin: 0 auto; display: block;}
which would end up with a centered #searchInput div on the page...
http://jsfiddle.net/ndmdpd69/
Related
I know it's probably the dumbest question on StackOverflow, but I have a problem with my menu. I want it to be 100% of the page's height, but it's only 100% of the window.
Here is my uncompiled Sass (Compile it yourself if you don't like Sass):
.nav
position: relative
z-index: 0
width: 20vw
height: 100vh
background-color: #EEEEEE
If you need more information (HTML code, etc...) see this link http://codepen.io/arguiot/pen/RGQkmg
It's due to your fixed header. Add its height (15vh) as a margin-top to the .navbar, and subtract that value from the all items margin-top inside the navbar to compensate that moving down.
.nav
position: relative
z-index: 0
width: 20vw
height: 100vh
margin-top: 15vh
background-color: #EEEEEE
.nav-title
position: relative
text-align: center
font-size: 1.5em
top: 5vh
.nav-content
position: relative
margin-top: 10vh
text-align: center
font-size: 1.5em
Here's an edited codepen: http://codepen.io/anon/pen/ORQKQm
I'm trying to get the white background behind the title to remain at the width of the text, not run all the way to the right of the screen, as it's doing now:
http://www.jmakhotels.com/post-ranch-inn-california-big-sur-new/
It should look like this: http://www.jmakhotels.com/images/title-tag.jpg ... but I can't figure out how to set the width so that it's dynamic for the different title lengths. This should be simple, but it's driving me insane! That .header-title element should simply be the width of the text + 10x padding on the left and right.
Here's the CSS for the blue div (which will be an image bgd), and the title element:
.main-header {
background-color: #009cff;
width: 100%;
height: 300px;
}
.header-title {
margin: -58px 0 0 18px;
padding:10px;
background-color: rgba(255,255,255,.8);
width:auto;
}
Thanks so much to anyone who can help me figure this out.
Setting display:table on the .header-title rule will fix the issue (without messing the margins).
Your .header-title (h2) is a block element, it should be a inline-block element to grab the width of the element itself.
However, your header-title can be placed inside the main-header instead of below the element.
A quick fix would be to move the .header-title element from below the .main-header div to the inside:
<div class="main-header">
<h2 class="header-title">This will be the title</div>
</div>
You want the header title to stick to the bottom of the main header, you can do this by giving it an absolute position. First we need to give the main header a relative position:
.main-header {
position: relative;
}
Now we can position header-title to the bottom of the main-header element:
h2.header-title {
position: absolute;
bottom: 0; <- stick to the bottom of main-header
left: 1em;
}
You can remove the margin from the header-title class in your CSS, because you're already telling header-title to stick to the bottom of main-header.
Change .header-title to display:inline-block then add margin-bottom: -36px; to .main-header
So:
.main-header {
background-color: #009cff;
height: 300px;
margin-bottom: -36px;
width: 100%;
}
.header-title {
background-color: rgba(255, 255, 255, 0.8);
display: inline-block;
margin: -58px 0 0 18px;
padding: 10px;
}
Also don't need width:auto
Try adding the style display: inline-block;
I am assuming .header-title is being used on a div that surrounds the title. You also shouldn't need width: auto;
The site in question is 1000freewebsites.com. The specific pages I'm struggling with are:
1000freewebsites.com/signup.php
1000freewebsites.com/login.php
This site uses the skeleton framework and Ryan Fait's sticky footer. On these pages I have a div with the ID of #bluestripe that should fill the vertical space between the header and the footer.
There are three parent elements; #html, #body and .wrapper. All are set to height:100%; in the stylesheet. #bluestripe is also set to height:100% and min-height:100%. As I understand it, this should achieve the effect I desire. Do I have my theory wrong?
Using Chrome Inspector I find that the height attribute is crossed out for .wrapper. If my theory is correct, this explains why #bluestripe is not expanding to fill the vertical space.
I cannot find any element that over rides .wrapper's height setting. Can you see what I am missing?
Your CSS rule for .wrapper has 2 height declarations. Get rid of the one setting height to auto.
.wrapper {
min-height: 100%;
height: auto !important; /* <- Get rid of this one */
margin: 0 auto -40px;
height: 100%;
}
this is your css:
.wrapper {
min-height: 100%;
height: auto !important; //height here
margin: 0 auto -40px;
height: 100% ;//height again here
}
you are defining two times the height and as the first one got !important its overriding the second one
this cause another error, because the paddings and the other elements are pushing the .container div down, so if you change a few properties you can get rid of this behavior:
#bluestripe {
background: #0099cc;
width: 100%;
padding: 40px 0px 40px 0px;
border-top: 10px solid #666666;
/*height: 100%; drop this line*/
}
.wrapper {
background: #0099cc; /*add this line*/
min-height: 100%;
margin: 0 auto -40px;
height: auto; /*acording to ryanfaits's css this is what mades the footer stick to the botom*/
}
this will made the .bluestripe shrink again but as the .wrapper still has the same background color, it doesn´t matters
I'm back with more questions!
It's likely something very simple, but it has confused the hell out of me. I have a layout set-up so that the H2 text on pages and posts (Wordpress) has a background image next to it on both sides, accomplished by use of span:before and span:after.
Here is how it is working correctly and what I would like the overall CSS to achieve:
http://www.weburton.co.uk/content/demo/?page_id=121
This is currently achieved by min and max-widths in the CSS. And I've had the width part set to auto, where it is under a parent element with the width of the page. I don't understand how the lines aren't automatically resizing based on the H2's width. See, the problem here:
http://www.weburton.co.uk/content/demo/?p=36
Here is the CSS that is used:
#pagewrapper{
width: 960px;
margin: 0 auto;
position: relative;
padding-top: 140px;
text-transform: uppercase;
}
h2 span:before{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll left center transparent;content:" ";height:1px;margin-right:15px; left: 0%; position:absolute; margin-top: 15px; min-width: 25%; max-width: 50%; width: auto; }
h2 span:after{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll right center transparent;content:" ";height:1px; margin-left:15px; right: 0%; position:absolute; min-width: 25%; max-width: 50%; width: auto; margin-top: 15px; }
Basically, I've exhausted all options that I can think of. Is there something I'm missing here or is there another way to go about achieving this styling using something else but span that is easier?
Oh and I know I have some redundant styling calls, I'm in the process of cleaning it up. :)
Thanks in advance! :)
May be that is what you want
Remove min-width and max-width from h2 span:before and h2 span:after
h2 span {
position:relative;
}
h2 span:before {
left: -25%;
width: 20%;
}
h2 span:after {
right: -25%;
width: 20%;
}
without a fiddle it's hard to give you a definite answer, but I think that if you try changing the display property to display: inline-block it should do the trick.
This will cause the element to act as a block element while still being displayed inline (thus preserving your current layout - block elements typically take up the full available width and are followed by linebreaks).
I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%, the problem is that it shows scrollbars and I can't use overflow-x: hidden; because it will make some of the content hidden, so how I can fix this?
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px;
margin-left: 10px;
padding: 0;
-webkit-user-select: text;
}
Because you're using position: absolute, instead of using:
width: 100%; margin-right: 10px; margin-left: 10px
you should use:
left: 10px; right: 10px
That will make your element take the full width available, with 10px space on the left and right.
You have to remove the margins on the #news item
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px; /*REMOVE THIS*/
margin-left: 10px; /*REMOVE THIS*/
padding: 0;
-webkit-user-select: text;
}
If this doesn't work, you might have margin and padding set on the element itself. Your div - if that is what you are using - might have styles applied to it, either in your stylesheet or base browser styles. To remove those, set the margins specifically to 0 and add !important as well.
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin: 0 !important;
padding: 0 !important;
-webkit-user-select: text;
}
It seems that you have set the width to 100%, but there are also margins that force the width to expand beyond that.
Try googling for "css flexible ( two/three-collumn) layouts".
Here's an example,
<div id="cont">
<div id="menu"></div>
<div id="main"></div>
<div class="clear"></div>
</div>
and the css
#menu{
float:left;
height:100%;
width:200px;
}
#main{
padding-left:200px;
}
.clear{clear:both;}
The #menu div, will be aligned to the left and have a static width of 200px.
The #main div, will "begin" below #main, but because of it's 200px padding (can also be margin) its content and child elements will start - where #menu ends.
We must not set #main to a percent width, (for example 100%) because the 200 pixels of left padding will be added to that, and break the layout by adding scrollbars to the X axis.
I had a similar issue with a absolute positioned element, and I wanted to use width 100%. This is the approach I used and it solved my problem:
box-sizing=border-box
Otherwise I always had a little content and padding pushing past the scroll bar.
The answer is that you have margins set that will make the div wider than the 100%; hence the scrollbars.
If you can rid yourself of margins do it! However, often you'll want the margins. In this case, wrap the whole thing in a container div and set margins to 0 with width at 100%.