I'm having some trouble getting a specific look that I am after.
I have the basic Wordpress Twenty-Fifteen theme applied and I'm trying to get a 200px wide red bar to appear down the right hand side of the screen.
The bar is made of a 200x1px image that is repeated.
The problem is:
A.) If I set this as a "Background-image" then the repeat works, but
I cannot get the image on top.
B.) If I set the image as an IMG
inside of a DIV, then I can get the image on top, but not to repeat.
Can anyone help me combine these 2 into one result, repeated image-y and image on top?
You can see my site here: http://u64.ca/
Try this, add it to your css.
This will affect everything the comes directly inside the #main tag.
#main > * {
margin-right: 200px;
}
Or you could apply a border right to the .site-content and lose the background iamge.
.site-content {
border-right: 189px solid #db0f12;
}
I'd use a pseudo-element something like:
main {
position:relative;
}
main:after {
content: "";
width: 189px;
position: absolute;
top: 0;
right: 0;
height: 100%;
background-color: #DB0F12;
}
Related
I have a contentWrapper class which contains all of the elements on my page. For some reason, the navigation takes up what appears to be 100% of the body and then some. I cannot however get the following elements, the slider and divs below, to stretch to fill the same width. There is always extra room to scroll to the right which displays the background color. I have made it pink in the fiddle its easy to see.
body {
background-color: black;
}
.contentWrapper {
height: 100vh;
width: 100%;
background-color: black;
}
http://jsfiddle.net/o5y26tqw/
Any suggestions? I feel like it could be an easy fix, deleting sections of the page at a time did not seem to remedy the issue.
So it looks like your .cycle-overlay is 100% wide and left is set to 20px. This is pushing everything over and revealing the background. Setting the width to 300px got rid of it for me.
JSFiddle
.cycle-overlay {
position: relative;
top: -200px;
left: 20px;
z-index: 999;
width:200px;
}
On my wordpress Website Homepage I inserted a horizontal grey strip containing social network links. I want this to touch the edges of the page over-flowing out of the body, how can I achieve this?
This is the code I used;
.outer {
float: left;
width: 100%;
height: 80px;
background-color: #f8f8f8;
position: relative;
}
The .outer rule isn't the one you'll need to adjust. Looking in the 'styles.css' document find the rule that you've written for .socialstrip. (change the . to a #)
#socialstrip {
height: 80px;
background-color: #f8f8f8;
position: absolute;
left:0;
}
You won't need to do anything else because the class .outer that's applied to it already gives you a width of 100%. Be aware that when you give this element a position of 'absolute' the element below it will not recognize that the #socialstrip element is above it. It will appear to lay over top of it. To fix this just add more margin to the top of the .bottomstrip element. Like this:
.bottomstrip{
margin-top: 200px;
}
That should give you what you are looking for.
Here I have create one div box using css stlye.
Fiddle: Correct view
But if the description is small then content misaligned as below:
Misaligned box
i tried changing the position and css values, but no luck.
Can some one tell me how can I keep footer part on it's position even if the content is small.
You need to clear the floats:
.footer-working-area {
clear:both; /* this sets the element flow back to normal */
background: transparent url(...) left 5px repeat-x;
/* /\ have some padding for the img */
}
Now the footer always stays below the picture, no matter how few text content you have.
Here you have the accordingly modified example fiddle.
You can give your text a min-height...
.text { min-height: 110px; }
... or a height if you don't expect longer texts
.text { height: 110px; }
... or clear the floats as Christoph mentioned in an other answer.
Add clearfix to the .text class
.text::after {
content: "";
display: block;
clear: both;
}
EXAMPLE
I am developing a website and the problem is that when I resize the browser (horizontaly), my HOME link from the menu gets broken. It's harder to explain in words what happens, so check it out here: http://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html.
The grey background is an image, having the up-right corner cut. After I cut that area, I made the area transparent. So, it is a trapezoid on transparent background.
My question is: what to do to prevent the trapezoid transforming into a rectangle when resizing?
If you want something like that.
Where the diamond is in between the two tabs then you should give particular width to your li elements(All).not use percentages for that. Like this
.menu > li#home {
display: inline;
float: left;
background: none;
background-image: url(../img/home.png);
width: 273px; /* same as your image size */
}
and also to both of your header images
img#logo {
position: absolute;
top: 10px; /* Change it as it sets in the gap */
left: 250px; /* Change it as it sets in the gap */
width: 140px;
height: 90px;
}
Instead of using an image, create the shape you want right in the file. Try this link:
Using the Area Shape Attribute
I have 5 stars on a line, and 2 kind of pictures empty and filled. I need to crop by css filled one, under empty, so that it looks like percent of fillness. But looks like I have problems with standart crop approach. Can you suggest ideas?
I’d use two nested containers and do it somehow like this:
#outer {
background: url('empty.png') top left repeat-x #666666;
position: relative;
height: 16px; /* set this to the height of the image */
width: 80px; /* set this to a multiple of the image’s width */
}
#inner {
background: url('filled.png') top left repeat-x #999900;
position: absolute;
top: 0;
left: 0;
height: 16px; /* same as above */
}
Set the width property on the inner container via inline CSS as needed:
style='width: 32px;'
style='width: 64px;'
(It doesn’t necessarily have to be a multiple of one image’s width.)
Bonus: If your images don’t use transparency, the fallback background colors of the CSS will make up for percentage bars if the images fail to load.