I manage a WordPress site, and I'm having some trouble applying a custom background behind the main content div. Here's a link to the site: AccelePedia. You'll see that the main content div is set to 85% width, and on each side is white space. I've tried everything, but I can't apply a background to that white space. I've included the code below pertaining to the div we're looking at. Any help here would be greatly appreciated. :)
If it helps at all, I'm running Wordpress 3.6.1 with the 2013 theme. (Which I have modified.)
Thanks!
/**
* 3.0 Basic Structure
* ----------------------------------------------------------------------------
*/
body
{
background: url(http://accelepedia.com/accimages/background02.png) repeat-x top left;
width: 100%;
}
.site {
background: url(http://accelepedia.com/accimages/background02.png) repeat-x top left;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
max-width: 1600px;
width: 100%;
}
.site-main {
position: relative;
width: 85%;
margin-left:auto;
margin-right:auto;
margin-top: 5px;
border: 5px solid gray;
background: #000;
z-index: 1000;
}
.site-main .sidebar-container {
background-image: url(http://accelepedia.com/accimages/background02.png)
height: 0;
position: absolute;
top: 40px;
width: 100%;
z-index: 1;
}
.site-main .sidebar-inner {
background-image: url(http://accelepedia.com/accimages/background02.png)
margin: 0 auto;
max-width: 1040px;
}
The background image does not exist:
http://accelepedia.com/accimages/background02.png < this file returns a 404
When I set the following it works:
body {
background-image: url(https://www.google.com/images/srpr/logo11w.png);
}
Related
I have an image gallery and want all the images to be the same size. Here is my CSS. I am following to this tutorial.
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
#media only screen and (max-width: 350px) {
.responsive {
width: 45.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 250px) {
.responsive {
width: 25%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
And here is a visual representation of the problem. I want to crop the rocket for exemple.
Take a look at ImageResizer.net. It has everything you need including code samples for SQL Server integration and croping with aspect ratio preserved:
http://imageresizing.net/
The most popular features are free and open-source:
Resizing, cropping, rotating, flipping
Borders, drop-shadows, padding, background colors
Adjustable Jpeg compression. Multi-page tiff viewing
Animated GIF frame selection. Comprehensive, real-time diagnostics
Basic GIF and PNG encoding
Gradient generation
use this for fixed size
.coverDiv {
width: 150px; /* or what you want */
height: 150px; /* or what you want */
background-size: cover;
background-repeat: no-repeat;
background-color: #eee;
background-position: center center;
}
or this for percentage
.coverDiv {
width: 25%; /* or what you want */
padding-bottom: 25%; /* or what you want */
background-size: cover;
background-repeat: no-repeat;
background-color: #eee;
background-position: center center;
}
and then with inline style add the image url as background
<div class="coverDiv" style="background-image: url(YOUIMAGEURL);></div>
You have used the following in your css.
div.gallery img {
width: 100%;
height: auto;
}
Notice that the height is 'auto'. You can try fixing it to some constant value and see if it works. This is my best guess (without seeing the html file you have).
I'm currently building a CSS audio player and I am setting the width of a div to represent the current progress of the audio using a [style] like below, and it works just great:
<div class="player-progress-current" [style.width.%]="(currentTime * 100)/duration"></div>
I also want to draw a little circle at the end of the progress div above by setting the 'left' CSS property of another class. This would be in english:
(Parent Width px) - (Progress Width px)
I've tried using the calc() function but it doesn't like it and the percentage calculated wouldn't know to use the width I think....
<div class="player-progress-handle" [style.left.px]="calc(100% - (currentTime * 100)/duration"></div>
The CSS classes are:
.player-progress-current {
width: 100%;
height: 1px;
background-color: red;
}
.player-progress-handle {
position: relative;
bottom: 1px;
border: 1px solid #f50;
border-radius: 100%;
height: 8px;
width: 8px;
background-color: #f50;
box-sizing: border-box;
margin-top: -4px;
margin-left: -4px;
}
Any ideas how the best way to do this is? I'm sure I can find a hacky way but would like the find the correct way
You might use :after for your handle and get rid of the calculations:
.player-progress-current {
position: relative;
width: 50%;
height: 1px;
margin: 20px 0;
background: red;
}
.player-progress-current:after {
content: '';
position: absolute;
right:-3px; bottom: 1px;
border: 1px solid #f50;
border-radius: 55%;
height: 8px;
width: 8px;
background-color: #f50;
box-sizing: border-box;
}
<div class="player-progress-current" [style.width.%]="(currentTime * 100)/duration"></div>
Can I achieve a custom CSS border with a button at one end which looks like this
Without url(some image link)?
Note: I want so because when I want to change color, I have to manipulate image.
I have achieved using image JS Fiddle
#stretch {
border-image: url(http://akitech.org/img/border.png) 30 30 stretch;
}
The easiest way is to use CSS pseudo-elements to create the decoration (the circle at the left) and to mask the chamfer at the right of the border (the angle at which the border-right would otherwise meet):
div {
border: 10px solid transparent;
width: 250px;
padding: 10px 20px;
position: relative;
/* this property has to be set to change the border-color: */
border-bottom-color: #f90;
}
/* common shared styles: */
div::before,
div::after {
/* to ensure the pseudo-elements are rendered: */
content: '';
/* for positioning: */
position: absolute;
/* positioning the element with its uppermost edge
against the bottom of the element, against the
upper side of the bottom-border: */
top: 100%;
/* again, set to change the color of the ends: */
background-color: #f90;
}
div::before {
/* position against the left edge: */
left: 0;
/* move the pseudo element 10px up, and
10px left: */
margin: -10px 0 0 -10px;
height: 30px;
width: 30px;
/* making the pseudo-element a circle: */
border-radius: 50%;
}
/* masking the chamfer of the border-bottom's
right-most edge: */
div::after {
left: 100%;
/* making the height/width the same width
as the border itself: */
height: 10px;
width: 10px;
}
div {
border: 10px solid transparent;
width: 250px;
padding: 10px 20px;
position: relative;
border-bottom-color: #f90;
}
div::before,
div::after {
content: '';
position: absolute;
top: 100%;
background-color: #f90;
}
div::before {
left: 0;
margin: -10px 0 0 -10px;
height: 30px;
width: 30px;
border-radius: 50%;
}
div::after {
left: 100%;
height: 10px;
width: 10px;
}
<div id="stretch">Here, the image is stretched to fill the area.</div>
In order to have these borders adapt to the length of the text, either the elements you want to have custom-bordered must themselves be able to contract to the width of the text, either using float:
div {
border: 10px solid transparent;
position: relative;
border-bottom-color: #f90;
padding-left: 20px;
/* forces the element to take up only that space required by
its (non-floated) contents: */
float: left;
/* forces the floated elements to the next line: */
clear: left;
}
div {
border: 10px solid transparent;
position: relative;
border-bottom-color: #f90;
padding-left: 20px;
float: left;
clear: left;
}
div::before,
div::after {
content: '';
position: absolute;
top: 100%;
background-color: #f90;
}
div::before {
left: 0;
margin: -10px 0 0 -10px;
height: 30px;
width: 30px;
border-radius: 50%;
}
div::after {
left: 100%;
height: 10px;
width: 10px;
}
<div>text</div>
<div>longer text</div>
<div>much longer text</div>
<div>much much much longer text</div>
Or, possibly more simply, use display: inline-block:
div {
border: 10px solid transparent;
position: relative;
border-bottom-color: #f90;
padding-left: 20px;
display: inline-block;
}
div {
border: 10px solid transparent;
position: relative;
border-bottom-color: #f90;
padding-left: 20px;
display: inline-block;
}
div::before,
div::after {
content: '';
position: absolute;
top: 100%;
background-color: #f90;
}
div::before {
left: 0;
margin: -10px 0 0 -10px;
height: 30px;
width: 30px;
border-radius: 50%;
}
div::after {
left: 100%;
height: 10px;
width: 10px;
}
<div>text</div>
<div>longer text</div>
<div>much longer text</div>
<div>much much much longer text</div>
Or display: inline (these don't automatically force new-lines between elements, obviously):
div {
border: 10px solid transparent;
position: relative;
border-bottom-color: #f90;
padding-left: 20px;
display: inline;
}
div {
border: 10px solid transparent;
position: relative;
border-bottom-color: #f90;
padding-left: 20px;
display: inline;
}
div::before,
div::after {
content: '';
position: absolute;
top: 100%;
background-color: #f90;
}
div::before {
left: 0;
margin: -10px 0 0 -10px;
height: 30px;
width: 30px;
border-radius: 50%;
}
div::after {
left: 100%;
height: 10px;
width: 10px;
}
<div>text</div>
<div>longer text</div>
<div>much longer text</div>
<div>much much much longer text</div>
summary:
for simplist way to this question, should not using svg, pure css can draw the shape author expected very well cause it's a combination of cycle(border radius)+rect(thicker line), let's refer to the David's answer should be the easiest and most clean way to draw that shape under text.
//below is my debugging history and tries (i searched out many ways to approach it);
//though not good answers
I use background css attribute (not OP wanted) Op used border-image also valid.
<div class="custom-border" >SOME TEXT HERE</div>
<style>
.custom-border{
padding-left:20px;
width:200px;
background:url(http://img1.wikia.nocookie.net/__cb20140224040010/shantae/images/b/bc/HGH_border_bottom.png) 0px 5px no-repeat;
background-size:contain;
height:150px;
}
</style>
later I realized OP might dislike using image traditional way, I re understand the
question is asking how to draw that shape in pure css and place it under the text and the responsive should be as flexible as the traditional way the svg shape will auto strech with the text placed on it.
after that, I've find some way to generate svg and place under text
see if it works for no image solution or you can get it improved based on fiddle
http://jsfiddle.net/hahatey/hsfxS/1464/
during the process, i've found this useful tool of generating svg from below reference url: http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html
But the flaw is it's still a fixed width solution, the line svg won't auto stretch.
Have found a unclean way to improve auto stretch though not in pure css responsive way.
but auto strech can be done by dynamically change below line
<rect stroke="#ff0000" id="svg_2" height="8" width="100%" y="27" x="40" stroke-width="5" fill="#FF0000"/>
where width="100%" or fixed value => width="function return value"; //
// during this try, i found a little bug, jquery seems unable to select svg or element inside svg? however svg element tag attribute can be written in backend languge so still valid.
//3.44
Another way without touching the inner "rect' element below "svg" tag, is to add a container to the whole thing, and using function to dynamically
assign width for the container;
like my attempt in this
fiddle: http://jsfiddle.net/hahatey/hsfxS/1468/
so at least the width can be dynamically calculated out by a function to calculate the text length of the upper text so the line will be able to strech if the calculation is accurate enough. There could be other ways to do svg auto strech with the text using pure css if other ppl find it.
Thanks.
5.02// since the author didn't say how complex the content is inside the container,
I've created a demo in pure css triggered effct --- auto strech the shape along with the text above it in below fiddle. but i said it sure has many limitations though looks similar.
http://jsfiddle.net/hahatey/a9z1kyx7/
my upper fiddle is only able to align correctly for singleline auto strech
I'm wondering if complex content (more than one line, there maybe a lot of block,inline mixed tag element inside which increases complexity for alignment) can also use css to do such decoration width auto adjustment without touching javascript or backend language.
I'm currently working on a splash page for my website and need help with the border which I want to run underneath the main text which will be centred on the page. At the moment when I set the border to run 800px it stays left-aligned with the text above so it isn't even. I'm new to CSS and any help is appreciated. Here is my code:
#logo
{
width: 800px;
position: relative;
top: 150px;
left: 250px;
border-bottom: 1px solid white;
}
Try this:
#logo {
display:block; /* Unless it already is */
width: 800px;
margin: 100px auto;
border-bottom: 1px solid white;
}
UPDATE: Here's a jsFiddle.
I want it to look like this:
... but it looks like this:
The #container is horizontally centered, and must stay so. Can't seem to get this right...
this happens when you float boxes side by side, one box to the left, the other to the right, both having width:50%. But padding, margins and border unintentionally increase the width of the boxes causing them to be more than 50% and forcing the right box to move under the previous box.
try setting static width to the boxes (will need calculation)
http://jsfiddle.net/fuYYv/
Bryan Downing in the comments gave me a clue.
I added
footer #container {
position: relative;
top: -XXXpx;
}
Works perfect. Big thanks to you wizards :)
This should be useful for others. jsFiddle with answer. Code below:
header, #container, section, footer, footer img#iphone { display: block; }
header {
background: url('images/header.jpg') repeat-x;
height: 160px;
border: 5px solid #aa3;
color: #aa3;
}
header img#logo {
margin: 0 auto;
}
#container {
width: 550px;
margin: 0 auto;
overflow: hidden;
border: 5px solid #33a;
color: #33a;
}
section {
float: left;
width: 310px;
height: 200px;
border: 5px solid #3a3;
color: #3a3;
}
footer {
background: url('images/footer.jpg') repeat-x;
height: 150px;
border: 5px solid #aa3;
color: #aa3;
}
footer #container {
position: relative;
top: -320px;
}
footer img#iphone {
float: right;
height: 400px;
width: 204px;
border: 5px solid #a33;
color: #a33;
}