Here is the link :
www.guidegather.com
(sorry, tried posting image but cannot)
If you look at the footer section, it appears correctly in all major browser (including IE9) but in IE7, the width of the div#mainfooter follows the max-width of .center class instead of extending horizontally to fill the space.
Here is the CSS :
.center{
margin:0 auto;
padding:0 50px;
max-width:960px;
}
#mainfooter{
background-color:#000;
color:#CCC;
list-style:none;
}
Here is how the HTML roughly looks like :
<body>
<div class="center">
Something here
</div>
<div id="mainfooter">
<div class="center">
Something here
</div>
</div>
</body>
As you can see, the div#mainfooter is independent of the previous div, but the width is restricted to the max-width of the previous div (and child div). Any solution to this?
Any help is appreciated. Thanks!
Since #mainfooter's rules will take priority over any inherited rules, you could specify a width for #mainfooter (width: 100%, or barring that, max-width: 100%). That should solve the problem.
So the solution is to add display:block to #mainfooter. Hope this helps anyone facing this issue in the future and great thanks for those who tried helping me
Related
I'm using toggle checkboxes by Semantic React UI.
The background color of a checkbox is defined in their styles here :
.ui.toggle.checkbox input:checked~.box:before, .ui.toggle.checkbox input:checked~label:before {
background-color: #2185d0!important;
}
... But I would like to be able to set a prop that would change that color, like
<Checkbox toggle toggleColor="red"/>
Could I extend that component to achieve that, or is there another way to achieve this ?
Thanks !
Yes you can, but it is not pretty!
I have a solution that works with semantic-ui and is heavily tested. I assume that it also works with semantic-ui-react but did not test extensively.
First, a color feature for checkboxes is missing from semantic-ui (as far as I can see, there is no documentation about it at least). So you need to use CSS to define your colors. All your colors! So if you have a lot you might to want SASS or something. Also you might want to make a feature request with semantic-ui.
Second, my solution uses the label of the checkbox to color the checkbox. I am fully aware that this is not pretty but this is apparently the only way to do this without too much additional code or even more ugly methods.
Add this to your code (please note, stackoverflow does not render this example properly since the <link rel="stylesheet" href="../semantic_ui/dist/semantic.min.css">is obviously missing. If there is a way to add this on this side please let me know.)
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ .coloring.black:before,
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.black:before {
background: #000000 !important;
}
.ui.toggle.checkbox input:focus:checked ~ .coloring.white:before,
.ui.toggle.checkbox input:checked ~ .coloring.white:before {
background: #FFFFFF !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
<div class="ui segment">
<div class="ui attached icon form" id="info_input_form">
<div class="ui toggle checkbox">
<input type="checkbox" tabindex="0">
<label class="coloring black">Toggle</label>
</div>
</div>
</div>
here's my plunker: http://plnkr.co/edit/HSVBuzzp1IIDjFdbuf4E?p=preview
in short: I cannot find a way to put the footer at the bottom of the page.
I tried to just rely on html:
<footer></footer>
I tried using bootstrap ui's class:
<div class="modal-footer">
or
<div id="footer">
<div class="container">
...
</div>
but nothing...It just doesn't seem working...
Check this out:
http://plnkr.co/edit/caLGN05wzH3Ls2PcRoTe?p=preview
html, body {
height: 100%;
}
.modal-footer {
position: absolute;
bottom: 0;
width: 100%;
}
I have added some more css in the head of the page.
Firstly, if you inspect the page, the length of the body is only half of the page. So we have to give it height 100% so that it takes the whole page.
Secondly, to place footer at the bottom of the page, we need to position it as absolute so that it aligns itself to its first positioned parent(in this case none, as we have not specified position to any other element), and then you can specify bottom as 0 so that it sticks to the bottom.
This is the normal way in which we can put footer at the bottom. You can check if bootstrap might have something inbuilt.
Hope this helps.
How would i come across the effect from this website http://www.theqcamera.com or http://plugandplaydesign.co.uk (the video + image at top) so that the image fills the screen on any screen size. Im not sure if this is responsive height but really would like to know how to do it.
There are a few ways to do this. The easiest is to use vh (vertical height) in your CSS. A setting of 100vh will make your div be 100% of the height of the screen being used to view the page. Combine this with a background image that is set to "cover" and a 100% width on the domain and you should be good to go.
<body>
<div class="container">
<div class="div_1">
content
</div>
<div class="div_2">
other content
</div>
</div>
</body>
.div_1 {
width: 100%;
height: 100vh;
}
.div_2 {
width: 100%;
height: auto;
}
Please note: vh is not supported in IE8. If you need to support IE8 for your project, going with position:absolute; height:100%; width:100%; margin: 0; is a slightly more complicated, but more backwards compatible answer.
try using height 100% , position absolute , margin 0 auto
this is how I've made my picture 100% on my website (http://www.dotto.be)
I'm using Foundation in a mobile first project where many elements are hidden based on the browser size, and I'm running into some trouble using Foundation's visibility classes like .show-for-small-only as Foundation applies
display: inherit !important;
to any element which uses these visibility classes. (For example, see line 5808)...
.show-for-small-only {
display:inherit !important;
}
This is causing me issues. Say have an element that I want to .show-for-small-only:
<div class="someElem show-for-small-only">
<!-- Content -->
</div>
Yet I want this element, when shown, to be formatted as a display:inline-block element. Due to Foundation's use of !important, the div is forced to assume it's default display state of block.
Is there any workaround to this, short of declaring my styling as !important too? (I don't want to have to do that though)...
I agree, using !important always feels gross.
Precedence in CSS is given to the element furthest down the tree so to override the Foundation !important property, just target an element further down the tree, like so:
<div class="show-for-small-only">
<div class="someElm">
<!-- your content here -->
</div>
</div>
With the following CSS
.someElm {
display: inline-block;
}
Here's a Plunker for kicks (just remember the items wont show up unless the screen is small).
I hope this helps.
To overwrite inportant just declare it again after the first declaration
.show-for-small-only {
display:inherit !important;
}
.show-for-small-only {
display: inline-block!important;
}
<div class="someElem show-for-small-only">
Content
</div>
a overflow:hidden body element works well on desktop browsers. but mobile browsers/ touchscreens ignore this behavior.
<style>
body {overflow:hidden; height:100%; width:100%;}
.content {height:2000px; width:1000px;}
</style>
<body>
<div class="content"> long content </div>
</body>
I think the problem comes from the touch!? But I don't know how to fix this.
Not sure if it helps but the way I got around it was using another container inside the body tag that wrapped everything else and put overflow on that. i.e.
.siteContainer{
position:relative;
overflow:hidden;
}