I am trying to give the #page div an inner border that is in line with the grey border around the top part: http://www.designated.net.au/testbed/testpage/
I realise I could just add another div, but that is not the solution I'm looking for as there will be other content within #page. Is this possible?
This follows on from this question: Border-box CSS not working properly
If you don't mind it not working in older browsers you could just use a .box-shadow. This can be done without having to add extra markup. You could also use :before or :after pseudo css classes as well but box-shadow is cleaner IMO.
-webkit-box-shadow(inset 0 0 1px #000);
-moz-box-shadow(inset 0 0 1px #000);
-o-box-shadow(inset 0 0 1px #000);
box-shadow(inset 0 0 1px #000);
You can leverage the relative positioning you are already using to align your images with the border.
Example: http://jsfiddle.net/zbrcb/
Merge these definitions with your existing definitions.
#page {
border: 10px solid #333;
}
#spotlight-main-top-left { z-index:3; position:relative; float:left; width:40px; height:40px; left: -10px; top: -10px; }
#spotlight-main-top-top { z-index:2; position:relative; width:100%; height:10px; background-color:#333333; top: -10px; }
#spotlight-main-top-right { z-index:3; position:relative; float:right; width:40px; height:40px; right: -10px; top: -10px; }
#spotlight-main-top-title { z-index:3; position:relative; margin:0 auto; width:200px; height:30px; top: -10px; }
#spotlight-main-top-title-left { position:relative; float:left; width:30px; height:30px; }
#spotlight-main-top-title-right { position:relative; float:right; width:30px; height:30px; }
#spotlight-main-top-title-middle { position:relative; margin:0 30px 10px; width:140px; height:20px; background-color:#333333; }
#spotlight-main-top-title-text { position:relative; width:140px; height:18px; text-align:center; }
​Works in Chrome, FF, Safari, IE 8/9 (7 could probably be made to work as well; your header is misaligned in IE7 even without this change).
Personally, I would try to reduce the number of elements you are using to create the top of the site, but to be fair it works fine.
Related
I want to be able to write a style in less, where I can apply it to 4 span tags. I want each span to have all the same properties, but I want to have be 30px; of space between each one. An finally, I want the 2nd span to have a different distance from the right than all the others.
Is there a way to do this, or do you need to write a separate style for span 2?
So here is my style for each span, which works fine. But there must be a better way with less...??
.right-lines {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
right:-80px;
margin:40px;
top:140px;
}
.right-lines2 {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
right:-50px;
margin:40px;
top:180px;
}
.right-lines3 {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
right:-80px;
margin:40px;
top:220px;
}
.right-lines4 {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
right:-80px;
margin:40px;
top:260px;
}
If you want the lines to be 30px from one another, use 30px of margin. There is no need for so much absolute positioning. This also allows for fewer specific styles.
body {
background: black;
}
.right-lines {
position: absolute;
top: 140px;
right: 0;
z-index: 100;
font-size: 0;
text-align: right;
}
.right-lines span {
display: block;
width: 80px;
height: 2px;
background-color: #fff;
margin: 0 80px 30px auto;
}
.right-lines span:nth-of-type(2) {
margin-right: 50px;
}
.right-lines span:last-child {
margin-bottom: 0;
}
<div class="right-lines">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Try making a common class or use the span tag itself to style the common features. You can, of course get even more efficient with other class stylings. And a sample span tag might look like <span class="span_class right-lines">...</span>
/* common styles */
.span_class {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
margin:40px;
}
/* And now make the special ones */
.right-lines {
right:-50px;
top:180px;
}
.right-lines2 {
right:-50px;
top:180px;
}
.right-lines3 {
right:-80px;
top:220px;
}
.right-lines4 {
right:-80px;
top:260px;
}
The query in question is the max-width of 400px at the bottom of the coding.
/*MAIN ELEMENTS*/
body{
width:100%;
height:100%;
/*width:1266px; height:612px;*/
background-color:#161616;
background-image:url(http://www.optiqvision.x10host.com/Pics/Background.png);
/*background-position:top 40px center;*/
background-position:50% 11px;
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
margin:auto;
position:relative;
display:block;
/*top:40px;*/
z-index:1;
}
header{
width:100%;
height:auto;
position:fixed;
top:0;
margin:auto;
z-index:4;
}
footer{
width:100%;
height:auto;
margin:auto;
z-index:4;
}
/*DECORATIVE ELEMENTS*/
#header_border{
width:100%;
height:40px;
margin:auto;
background-image:url(http://www.optiqvision.x10host.com/Pics/header.png);
background-repeat:repeat-x;
background-color:#960;
/*background-size:100%;*/
}
#footer_border{
width:100%;
height:40px;
margin:auto;
background-image:url(http://www.optiqvision.x10host.com/Pics/footer.png);
background-repeat:repeat-x;
background-color:#960;
/*background-size:100%;*/
}
.page{
width:88%;
height:auto;
overflow:hidden;
background-color:rgba(255, 255, 255, .44);
border-radius:22px;
margin:88px auto;
}
#row{
width:77%;
overflow:hidden;
margin:11px auto;
display:block;
clear:both;
}
#row li{
width:20%;
height:120px;
float:left;
text-align:center;
display:block;
font-family:'Roboto', sans-serif;
font-size:16pt;
border-radius:6.5px;
margin:0 2% 0 2%;
list-style:none;
position:relative;
}
.sect_container{
width:88%;
height:auto;
background-color:rgba(204, 204, 204, .55);
border:solid 2px #666;
border-radius:22px;
margin:11px auto;
overflow:hidden;
display:block;
}
.sect_title{
font-family:'Roboto', sans-serif;
font-size:22pt;
margin:6px 0 0 6px;
float:left;
clear:both;
}
.link{
width:100%;
overflow:hidden;
display:block;
/*background-color:#F00;*/
position:absolute;
top:33%;
}
/*MEDIA QUERIES*/
#media(max-width:400px){
#header_border{background-image:url(Pics/Header_400w.png); height:12px;}
#footer_border{background-image:url(Pics/Footer_400w.png); height:12px;}
.sect_title{font-size:14pt; margin:auto; float:none;}
#row{width:100%}
#row li{font-size:10pt; height:30px; width:88%; margin:4% auto; clear:both; float:none;}
}
#media(max-width:700px){
#header_border{background-image:url(Pics/Header_400w.png); height:12px;}
#footer_border{background-image:url(Pics/Footer_400w.png); height:12px;}
.sect_title{font-size:16pt;}
#row li{font-size:10pt; height:44px; width:44%; margin:4% 0 4% 4%;}
}
#media(max-width:900px){
#header_border{background-image:url(Pics/Header_900w.png);height:29px;}
#footer_border{background-image:url(Pics/Footer_900w.png);height:29px;}
.sect_title{font-size:18pt;}
#row li{font-size:14pt; height:60px;}
.link{top:11%;}
}
When I reduce the screen size the #row li doesn't display at 88% as I have it set to and the .sect_title doesn't margin to the middle. The funny thing about it is when I comment out the second media query of 700px wide the #row li go to 88% wide, but they float all the way to the right.
Here's a fiddle of it in action https://jsfiddle.net/Optiq/5be35wdm/2/
can someone please help shed some light on this?
The media query 900px has more priority so it overrides media query 700px and 400px so you have to change the order of your media queries. For centering #row, you should set margin and padding to 0.
Jsfiddle
The issue has to do with the fact that the last rule in the stylesheet will override the ones preceding it. Thus, you want to place the more specific rules last:
/* MEDIA QUERIES*/
#media(max-width:900px) {
//...
}
#media(max-width:700px) {
//...
}
#media(max-width:400px) {
//...
}
Check it out here, although it kind of looks better the way it was before...
I believe you are trying to position text to the middle of the div when width is 400px;
CSS:
text-align: center; // in #media 400px
Regarding the li add !important behind the 88% !important;
Good luck
Fiddle
HTML:
<blockquote class="rectangle-speech-border">
<p>This is a blockquote that is styled to look like a speech bubble</p>
</blockquote>
CSS:
.rectangle-speech-border {
position:relative;
padding:50px 15px;
margin:1em 0 3em;
border:10px solid #5a8f00;
text-align:center;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
/* creates larger curve */
.rectangle-speech-border:before {
content:"";
position:absolute;
z-index:10;
bottom:-40px;
left:50px;
width:50px;
height:30px;
border-style:solid;
border-width:0 10px 10px 0;
border-color:#5a8f00;
background:transparent;
/* css3 */
-webkit-border-bottom-right-radius:80px 50px;
-moz-border-radius-bottomright:80px 50px;
border-bottom-right-radius:80px 50px;
/* reduce the damage in FF3.0 */
display:block;
}
/* creates smaller curve */
.rectangle-speech-border:after {
content:"";
position:absolute;
z-index:10;
bottom:-40px;
left:50px;
width:20px;
height:30px;
border-style:solid;
border-width:0 10px 10px 0;
border-color:#5a8f00;
background:transparent;
/* css3 */
-webkit-border-bottom-right-radius:40px 50px;
-moz-border-radius-bottomright:40px 50px;
border-bottom-right-radius:40px 50px;
/* reduce the damage in FF3.0 */
display:block;
}
/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border > :first-child:before {
content:"";
position:absolute;
bottom:-40px;
left:45px;
width:10px;
height:10px;
background:#5a8f00;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border > :first-child:after {
content:"";
position:absolute;
bottom:-10px;
left:76px;
width:24px;
height:15px;
background:#fff;
}
Example taken from: Nicolas Gallagher
Basically this text bubble is curving to the left and on the bottom-left. I'd like to duplicate it exactly except have it on bottom-right and curving to the right. Just flip it.
I've tried changing the rights into lefts but it's not happening. Can anyone tell me what needs to change to flip this bubble?
Do you mean this?
If you want to change geometry, you should to play with border-width and border-radius. Also I changed pseudo-class from :after to :before, and vice versa in elements and border-radius from right to left.
.rectangle-speech-border {
position:relative;
padding:50px 15px;
margin:1em 0 3em;
border:10px solid #5a8f00;
text-align:center;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
/* creates larger curve */
.rectangle-speech-border:after {
content:"";
position:absolute;
z-index:10;
bottom:-40px;
left:400px;
width:20px;
height:30px;
border-style:solid;
border-width:0 0 10px 10px;
border-color:#5a8f00;
background:transparent;
/* css3 */
-webkit-border-bottom-left-radius:40px 50px;
-moz-border-bottom-left-radius:40px 50px;
border-bottom-left-radius:40px 50px;
/* reduce the damage in FF3.0 */
display:block;
}
/* creates smaller curve */
.rectangle-speech-border:before {
content:"";
position:absolute;
z-index:10;
left:370px;
width:50px;
height:30px;
bottom: -40px;
border-style:solid;
border-width:0 0 10px 10px;
border-color:#5a8f00;
background:transparent;
/* css3 */
-webkit-border-bottom-left-radius:40px 50px;
-moz-border-bottom-left-radius:40px 50px;
border-bottom-left-radius:40px 50px;
/* reduce the damage in FF3.0 */
display:block;
}
/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border > :first-child:before {
content:"";
position:absolute;
bottom:-40px;
left:425px;
width:10px;
height:10px;
background:#5a8f00;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border > :first-child:after {
content:"";
position:absolute;
bottom:-10px;
left:376px;
width:24px;
height:15px;
background:#fff;
}
<blockquote class="rectangle-speech-border">
<p>This is a blockquote that is styled to look like a speech bubble</p>
</blockquote>
I have a problem with center positioning a button in a row in a table.I used width and margin but it don't work.Can you help me? Here's the code for that button(in css):
.subm {
position:relative;
width:130px;
margin-left:auto;
margin-right:auto;
background-image:url('background.bmp');
border:none;
color:white;
opacity:1;
height:25px;
outline:0 none;
box-shadow:1px 1px 2px black
}
.subm:hover {
background-image:none;
background-color:darkgray;
box-shadow:10px 10px 10px black
}
.subm:active {
color:black ;
font-weight:bold;
width:128px;
height:24px;
background-image:none;
background-color:dimgray;
}
simply try this
button{
height:20px;
width:100px;
position:relative;
top:50%;
left:50%;
}
for just horizontal alignment use either
button{
margin: 0 auto;
}
DEMO
To achieve this, I would use following code:
.subm {
position:absolute;
width:130px;
height:25px;
top: calc(50% - 13px); // 50% - 0.5 * height.
left: calc(50% - 65px); // 50% - 0.5 * width.
}
And for the parent:
position: relative;
You can see a working JSFiddle here
If you used width and margin: auto's and it's still not centering you may just need to add display: block to your .sumb class like so:
.subm {
display:block;
position:relative;
width:130px;
margin-left:auto;
margin-right:auto;
background-image:url('background.bmp');
border:none;
color:white;
opacity:1;
height:25px;
outline:0 none;
box-shadow:1px 1px 2px black
}
Demo: http://jsfiddle.net/re079odr/
I have a div I'm adding appearance: button style to it. This works but it causes a shift in Firefox, I suspect it is because of the border but using box-sizing:border-box doesn't stop it. I also tried adding width and height but it still shifts.
http://jsfiddle.net/2CEuu/2/
<div id="add-new-complaint">
<div class="plus 3"></div>
Add new Complaint
</div>
[id|=add-new]{
display: inline-block;
padding:4px;
cursor:pointer;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
[id|=add-new]:hover{
-webkit-appearance:button;
-moz-appearance:button;
appearance:button;
}
div.plus{
width:15px;
height:15px;
position:relative;
display: inline-block;
}
div.plus::before{
width:100%;
height:33.333%;
top:33.333%;
left:0;
position:absolute;
content:'';
background-color:#789dc3;
}
div.plus::after{
width:33.333%;
height:100%;
top:0;
left:33.333%;
position:absolute;
content:'';
background-color:#789dc3;
}
You can target only Firefox to fix the problem:
#-moz-document url-prefix() {
[id|=add-new]:hover{
padding: 1px;
}
}
Would it work for you?
The way I see it there are 2 solutions,
Either add/reduce padding/margin accordingly on hover to fake the shift back to its position,
like so:
a { margin: 10px 5px; padding: 10px; }
a:hover { padding: 9px 10px 10px 9px; }
Or, better, add a default transparent border:
a { border: 1px solid rgba(0,0,0,0); }
This will keep the box at the correct size until it is hovered.