I have a footer that contains 2 rows of 3 links - when the browser window is resized and goes too small, the links get cut off. Is there any way to keep the footer full size while the rest of the window gets resized?
.footer { position: fixed; top: 90%; left: 0; right: 0; bottom: 0;
background: #ffffff; border: solid black; border-width: 2px 0 0 0; }
set a "min-width" for your div
.footer {
position: fixed;
top: 90%;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-top: 2px solid #000;
min-width: 200px;
}
Add a min-height to the footer, as shown in this fiddle:
.footer {
position: fixed;
height: 10%;
min-height: 40px;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-top: 2px solid black;
}
is fixing the footer to the bottom of the page an option? just delete the top: 90%; and the footer will retain it's height even when the window is half-sized
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-top: 2px solid #000;
}
PS I forked your fiddle: http://jsfiddle.net/6s5eN/
Related
I have border around whole website and it works great,now how can I make it have rounded corners,I've tried :
border-radius: 25px
but it doesnt work,and heres the normal border code that works but I need it rounded :
.ct, .cb, .cr, .cl {
border-radius: 25px
background-color: #ffffff;
position: fixed;
z-index: 99999;
}
.ct {
border-radius: 25px
top: 0;
right: 0;
left: 0;
height: 20px;
}
.cr {
border-radius: 25px
top: 0;
right: 0;
bottom: 0;
width: 20px;
}
.cb {
border-radius: 25px
bottom: 0;
right: 0;
left: 0;
height: 20px;
}
.cl {
border-radius: 25px
top: 0;
left: 0;
bottom: 0;
width: 20px;
}
Thanks in advance
Instead of using div's as borders just use border: size type color;
https://jsfiddle.net/dcLbza26/
html {
height: 100vh;
border: 20px solid red;
border-radius: 25px;
}
Check this link. I want to position the blue and black div exactly at the right and bottom of the red div respectively. I want the right vertex of the blue div to align with the right vertex of the red one and the bottom vertex of the black div to align with the bottom vertex of the red one. What is the best way to do that?
Thank You in advance.
The HTML
<div id="diamond">
<div id="diamond_right"></div>
<div id="diamond_bottom"></div>
</div>
The CSS
#diamond {
width: 0;
height: 0;
border: 300px solid transparent;
border-bottom-color: red;
position: relative;
top: -300px;
z-index:0;
}
#diamond:after {
content: '';
position: absolute;
left: -300px;
top: 300px;
width: 0;
height: 0;
border: 300px solid transparent;
border-top-color: red;
}
#diamond_right {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: blue;
position: relative;
top: -50px;
z-index:1;
}
#diamond_right:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: blue;
}
#diamond_bottom {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: black;
position: relative;
top: -50px;
z-index:2;
}
#diamond_bottom:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: black;
}
Much easier to do this with a single normal div and a couple of pseudo elements using standard techniques and then rotate the whole lot together.
#diamond {
width: 300px;
height: 300px;
background: red;
position: relative;
margin: 75px;
transform: rotate(-45deg);
}
#diamond::before,
#diamond::after {
content: '';
width: 50px;
height: 50px;
bottom: 0;
position: absolute;
}
#diamond::before {
background: blue;
right: 0;
}
#diamond::after {
background: black;
left: 0;
}
<div id="diamond"></div>
I did this with the blue one in your fiddle and it aligned with the right vertex, if you plug this in is this what you were looking to achieve?
#diamond_right {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: blue;
position: absolute;
top: 200px;
right: -300px;
z-index:1;
}
#diamond_right:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: blue;
}
I am working on a CSS only lightbox solution for my project. I've googled it but so far found only partial solutions.
I am looking for these features:
display content of any width and any height (no fixed height/width)
center verticaly and horizontaly
display scrollbars if content width and/or height overflows lightbox boundary due to viewport dimensions.
So far I have this:
.lb-overlay {
text-align: center;
background: #c0c0c0;
background: rgba(0,0,0,0.5);
border: #a0a0a0 solid 1px;
position: fixed;
left: 0;
top: 0; right: 0; bottom: 0;
z-index: 10000;
}
.lb-overlay:after {
content: '';
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
background-color: #f00;
}
.lb-wrap {
display: inline-block;
vertical-align: middle;
position: relative;
background: #ffffff;
max-height: 90%;
max-width: 90%;
z-index: 10001;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.lb-content {
position: relative;
overflow: auto;
margin: 2em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lb-close {
position: absolute; right: 0; top: 0;
background-color: #d00000;
margin: 0;
color: #fff;
padding: 4px;
line-height: 1em;
width: 2em;
height: 2em;
border: 0;
outline: 0;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lb-close:hover { background-color: #f00000; }
http://jsfiddle.net/TomasReichmann/F4D5u/1/
problems:
vertical scrollbar doesn't appear
horizontal scrollbar works only in chrome
Ideally, I am looking for compatibility with modern browsers and IE8+, but I can live with IE9+
Can you guys help?
Get rid of the unnecessary sizing models
Full-size the overlay as width: 100%; height: 100%;
Use margin: auto and position: absolute; top: 0; left: 0; bottom: 0; right: 0; to center align the wrap within the overlay both vertically and horizontally
Use width and height instead of max-width and max-height
Use padding on wrap to control the border around the content
Use overflow: auto; width: 100%; height: 100%; in content
Summed up: http://jsfiddle.net/F4D5u/8/
Complete style code:
.lb-overlay {
background: #c0c0c0;
background: rgba(0,0,0,0.5);
position: fixed;
left: 0; top: 0; right: 0; bottom: 0;
z-index: 10000;
margin: 0;
width: 100%; height: 100%;
}
.lb-wrap {
margin: auto;
position: absolute; top: 0; left: 0; bottom: 0; right: 0;
background: #ffffff;
width: 70%; height: 70%;
padding : 2em;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.lb-content {
overflow: auto;
width: 100%; height: 100%;
}
.lb-close {
position: absolute; right: 0px; top: 0px;
background-color: #d00000;
margin: 0;
color: #fff;
padding: 4px;
line-height: 1em;
width: 2em;
height: 2em;
border: 0;
outline: 0;
cursor: pointer;
}
.lb-close:hover { background-color: #f00000; }
I have a div that I'm using as a topbar with the code below:
#topbar {
height: 40px;
width: 100%;
background-color: #336680;
box-shadow: 0.1em 0.1em 0.1em;
position: absolute;
top: 0;
padding: 0;
}
I'm trying to make it go across the whole screen but for some reason it's off center and doesnt cover the left portion of the screen. How do I fix this?
Just add left:0. So...
#topbar {
height: 40px;
width: 100%;
background-color: #336680;
box-shadow: 0.1em 0.1em 0.1em;
position: absolute;
top: 0;
padding: 0;
left:0;
}
I cannot figure out why my css is creating this funky bottom margin or border I took a little video so you can see it: http://img.zobgib.com/2011-04-25_1317.swf The margin/border doesn't show except when the page is resized to pretty small. My css is pretty standard, and I have not inline styling or JS styling that would cause it. What would cause this weird margin?
Here is my CSS
html {
}
body {
}
#content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#drawn {
background: #fff !important;
}
#content > * {
}
#toolcontainer {
left: 0;
right: 0;
height: 50px;
min-width: 940px;
}
#toolcontainer > * {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-left: 10px;
}
#slidescontainer {
position: absolute;
left: 0;
bottom: 0;
top: 52px;
width: 130px;
min-height: 658px;
}
#newslide {
background: url(/static/img/new_slide.png) !important;
border: 1px solid #FFFFFF;
}
#slidescontainer canvas {
position: relative;
}
#slidescontainer > * {
height: 80px;
width: 106px;
margin: 10px;
background: #ffffff;
border: 1px solid #000;
}
#container {
position: absolute;
min-height:608px;
min-width: 810px;
/* height: 608px;
width: 810px;*/
background-color: #fff;
background-image: none;
top: 52px;
bottom: 0;
right: 0px;
left: 132px;
background: #d5d5d5;
border: 10px solid #000;
}
#container canvas {
/* left: 50%;
margin-left: -405px;
top: 50%;
margin-top: -304px;*/
}
#debug {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
overflow: auto;
border: 1px solid black;
background: black;
color: #34e338;
z-index: 50;
}
canvas {
position: absolute;
}
#colorSelector {
position: relative;
width: 46px;
height: 46px;
}
#colorSelector div {
position: absolute;
border: 1px solid #FFFFFF;
background: #000000;
width: 46px;
height: 46px;
}
You are using a lot of browser-specific CSS, and it looks like you were accessing it in an unsupported browser (Firefox doesn't support Microsoft markup, for obvious reasons). I'd recommend trying CSS3 selectors and rules instead of the browser-specific rules.
Try adding style = "overflow:hidden" to your html tag like this:
<html xmlns="http://www.w3.org/1999/xhtml" style = "overflow:hidden">
If it is an issue with page height, that may clear it up
I fixed it by changing the min-height in #container to 638px.