Omnimaga
General Discussion => Technology and Development => Web Programming and Design => Topic started by: Munchor on September 20, 2011, 01:51:51 pm
-
My CSS knowledge is very poor, and so I need help with something.
I need a website to be white on the middle background and fade to gray on the edges. I got an image which is gray fading to white, and made it repeat itself on the left:
background-repeat: repeat-y;
However, I need to achieve the same result (with an inversed image) on the other edge. How can I do it?
Thanks, here's how it should look like (Ascii Art :P)
GgggwwwwwwwgggG
G = Gray, W = white
-
Modify the background so it has both sides. That's the only cross-browser solution.
-
Modify the background so it has both sides. That's the only cross-browser solution.
Thanks, I'll try that. I have another question though... How to achieve a top bar like Facebook.com? I mean, I managed to make a bar, but it's not fully on top and to the right and to the left, it looks like this:
(http://img.removedfromgame.com/imgs/facebookbar.png)
Here's the header (where the text is) HTML and CSS code:
<header>
<img src="titulo.jpg" />
</header>
header {
background-color: #3B5999;
width: 100%;
margin-bottom: 20px;
}
The "titulo.jpg" image is the part that says "projeto G". I'd also like a way of controlling how tall the top bar is.
I have "width: 100%", so it's supposed to work alright, but it doesn't really work.
-
Try this:
CSS:
header {
background-color: #3B5999;
width: 100%;
margin-bottom: 20px;
padding-left: 0px; //overrides most browser's default left padding
}
header img {
height: 50px; //or whatever you want the height to be
}
P.S. Do you use opera, or is that chrome? cuz thats what the chrome emulator i've got looks like.
-
body
{
margin: 0;
}Removes the 8-pixel border around everything.
-
@flyingfisch, the height is now changeable, thanks!
@Deep, that didn't really work (I even used "0px")
I have this:
header {
background-color: #3B5999;
width: 100%;
margin: 0px;
margin-bottom: 20px;
padding: 0px;
}
header img {
margin: 0px;
padding: 0px;
/* height: 50px */
}
-
First of all, <header> isn't an HTML tag. You can't just make up your own and assume it'll work, unless you're using XML with style rules.
And I said to put margin: 0 in the body tag, not your header tag.
-
First of all, <header> isn't an HTML tag. You can't just make up your own and assume it'll work, unless you're using XML with style rules.
And I said to put margin: 0 in the body tag, not your header tag.
<header> is an HTML 5 tag I am very sure. Also "margin: 0;" on "body" worked, thanks!
-
First of all, <header> isn't an HTML tag. You can't just make up your own and assume it'll work, unless you're using XML with style rules.
And I said to put margin: 0 in the body tag, not your header tag.
HTML 5 is not the standard yet, so for best cross-browser support, stay away from too much HTML 5 stuff.
<header> is an HTML 5 tag I am very sure. Also "margin: 0;" on "body" worked, thanks!