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
Related
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;
}
This is similar to Google Chrome tabs style taken from Soda Theme (Sublime Text 2):
You see how it has 3 parts to it: rising edge, 2-3px flat middle, falling edge.
Q: How would I, in CSS, "repeat" the middle part and stretch the tab to fit the size of the string?
Image Dimensions: 42 x 28.
If it helps here is the snippet from the .sublime-theme file:
// Tab element
{
"class": "tab_control",
"content_margin": [12, 3, 12, 3],
"max_margin_trim": 0,
"hit_test_level": 0.0,
"layer0.texture": "Theme - Soda/Soda Dark/tab-inactive.png",
"layer0.inner_margin": [5, 5],
"layer0.opacity": 1.0
},
There are more than a few different ways to accomplish this affect, and it really depends on your preference. As you properly postulated, you need to think of this as 3 different parts. As such, the easiest way would be to split it up into 3 different images.
The solution also depends on what your HTML markup looks like. For example, if you only have:
<a class="tab" href="#">My Tab</a>
Then you have only one element you can style to make this works (which makes it much harder).
However, if you have a wrapping element around the tab:
<li class="tab">My Tab</li>
You can then use the LI element to help achieve the desired result.
Single Element
In my first example, you only had the single "anchor" element to work with. Examining your image you want to use for the tab, I can see that it has some beveling, and isn't a simple flat color, or a flat color with a simple border. That means we can't achieve that effect with straight CSS, so we will need CSS to tile the image.
You have two options.
Option 1
Split the image into two images, a left and right side, by dividing it right down the middle. Next, in your image editing application, extend your canvas out to the right by, let's say, 200 pixels (or whatever you think the max width of a tab will ever be). Finally, select the farthest right edge (this should be the middle of the tab) and stretch it horizontally all the way to the right border.
What you should end up with is the sloped left side, then an ~200pixel "middle area".
Now you have two images we will call tab-left-side.png and tab-right-side.png. With these two images, you can achieve the tab affect with the following CSS:
.tab {
background: url(tab-left-side.png) no-repeat 0 0;
overflow: hidden;
padding-left: 10px; /* width of the left edge of the tab, before the middle section begins. If you want more horizontal tabbing, add it to this value */
}
.tab:after {
content: ' ';
overflow: hidden;
width: 10px; /* width of the right edge of the tab */
background: url(tab-right-side.png) no-repeat 0 0;
}
Option 2
This option requires splitting your image into three images. You will have tab-left-side.png, tab-middle.png, and tab-right-side.png. As you can guess, you should split the image up into these appropriately.
Now, you can use the CSS:
.tab {
background: url(../images/tab-middle.png) repeat-x 0 0;
overflow: hidden;
color: white;
float: left;
margin: 0 10px; /* must be same as side widths */
}
.tab:after {
content: '.';
overflow: hidden;
text-indent: -999px;
float: right;
width: 17px; /* width of the right edge of the tab */
background: url(../images/tab-right-side.png) no-repeat 0 0;
}
.tab:before {
content: '.';
text-indent: -999px;
overflow: hidden;
float: left;
background: url(../images/tab-left-side.png) no-repeat 0 0;
width: 17px; /* width of the left edge of the tab */
}
Double Element
The double element is accomplished exactly the same way as Option 1 of the Single Element example, except that you don't have to use the pseudo-class selectors. If you are writing code that has to support older browsers that don't support pseudo-class selectors (or at least :before and :after) then this is your only option.
Again, you split the two images up into tab-left-side.png and tab-right-side.png.
Then, your CSS:
LI.tab {
background: url(tab-left-side.png) no-repeat 0 0;
overflow: hidden;
padding-left: 10px; /* width of the left edge of the tab, before the middle section begins. If you want more horizontal tabbing, add it to this value */
}
LI.tab A {
content: ' ';
overflow: hidden;
width: 10px; /* width of the right edge of the tab */
background: url(tab-right-side.png) no-repeat 0 0;
}
It's virtually the same CSS as was in the Option 1 example, except we changed the selectors.
Another way to achieve a similar result is to use multiple backgrounds and background sizing:
li.tab a {
/* using inline-block for simplicity you could easily switch to
display block and floats. */
display: inline-block;
overflow: hidden;
color: #fff;
padding: 0px 20px;
/* I'm using 75% sizing on my middle image which means my min and
max calculations work out as follows. This can change depening
on the images you use. */
min-width: 80px;
max-width: 160px;
/* height is obviously dependent on many things, I'm using line-height
to center my text but there are other ways. */
height: 26px;
line-height: 30px;
text-align: center;
/* depending on how your images are designed you may wish to have
the left and right images layered on top of the middle. To do this
just reverse the order of the background images. */
background:
url(middle.png) center bottom / 75% 26px no-repeat,
url(left.png) left bottom no-repeat,
url(right.png) right bottom no-repeat
;
}
This does have some prerequisites however:
This relies on relatively new css abilities, and as such wont work on older browsers.
You have to define a minimum and maximum width that your tabs can be.
You have to use two or three images, this wont work with a spritesheet.
You need a middle image which has to be rectangluar.
I'm using a responsive wordpress theme that is based on twitter bootstrap. For some reason the side bar images aren't resizing correctly. (You can see what I mean by checking out the [site][1] and trying to resize.) I was approaching this by declaring a fixed size to the widget, and then positioning the form inside it using absolutely relative positioning. The image / contact form looks fine when you are on a desk top but as you compress the layout (for instance on an iphone) the contact form and image do not resize correctly. I'm not sure where to go from here and sort of stuck.
Here's the css I'm using now (which may not be correct.) Thanks!
.widget .signupForm {
/* Box always has colour, pic always on right */
background-color: #06d0d2;
background-image: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg);
background-position: right bottom;
background-repeat: no-repeat;
/* height ensures full pic is shown */
height: 300px;
/* allow us to position contents */
position: relative;
}
/* Absolutely position the form within the widget */
.widget .signupForm form {
position: absolute;
right: 160px;
bottom: 0px;
}
.widget .signupForm form input {
display: block;
}
#media screen and (min-width: 768px) {
/* now just resize the widget box and move the form */
.widget .signupForm {
width: 300px;
height: 240px;
background-size: 100%;
}
.widget .signupForm form {
right: 120px;
bottom: 0px;
}
I can detect 3 problems at a width of 800px:
.widget .signupForm has a width of 300px. It should be auto or 100%. Then form elements are to be sized accordingly, if needed (btw the submit button has same text and background than the text input. It seems we have 2 informations to type when in fact it's the action button. It doesn't need to be white on blue, maybe a darker grey would be sufficient. I'm not a designer, though ;) )
Facebook widget has a fixed width. Does it exist a mobile version of this widget?
same problem with the Instagram one: images have an HTML width attribute of 300 (pixels).
The Following css applies to your page when it gets resized. Not sure which file is applying it.Find this class in your css files and add a width to it, say width:300px if you want it to be a perfect square or any other value.
.widget .signupForm {
background-color: #06D0D2;
background-image: url("http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg");
background-position: right bottom;
background-repeat: no-repeat;
height: 300px;
width:300px; /* code added here */
position: relative;
}
Hope it helps,if i havnt understood ur problem or this is not the solution you were looking for - do comment..
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.
I am using HTML and CSS to create a webpage. I want to create buttons that are of a .gif file that I already have. I am using div to place items in the page itself. How do I use the image, and also use the rollover features so that the image changes to a different image I have that is a different color.
Thanks.
Changing the image url works, but can be a nuisance if the images are not preloaded or the user's cache is disabled.
Check out sprites FTW.
http://css-tricks.com/css-sprites/
A quick definition of a sprite is a large image, containing several smaller images. So a 10x20 image, with the normal state being the upper 10x10, and the hover state being the lower 10x10. The user only sees the upper 10x10 due to the CSS:
.button
{
display: block;
width: 10px;
height: 10px;
background-image: url(to-image.gif);
background-repeat: no-repeat;
background-position: top left;
}
then on hover, it shifts to the bottom part of the image
.button:hover
{
background-position: bottom left;
}
Make the button element a fixed size, and set the .gif file as the element background in CSS. Then you can use a :hover class on the element to change the image. Here I'm using an "A" tag so it works on IE6.
<a class="button"></a>
.button {
display: block;
background-image: url(default.gif);
width: 100px;
height: 20px;
}
.button:hover {
background-image: url(hover.gif);
}