I've been trying to build this CSS layout for a while now. I am trying to make this:
http://tinypic.com/r/29xx9ps/6
And I can not even get the first step done of putting the blue bar at the top of the screen. But any help would be much appreciated.
I also found this:
What is the hexadecimal code of the "blue" background color of Facebook?
give me the color codes but please any help would be appriated I'm watching tutorials like crazy but I have a wired dead line for this
I am oblvious when it comes to css
You may need to learn it then. I recommend you start with http://www.w3.org/TR/CSS21/selector.html and http://www.w3.org/TR/CSS21/propidx.html
And I can not even get the first step done of putting the blue bar at the top of the screen
Your "Title WHITE" text and "Sign Up" button are inside something: in your HTML, let that "something" be a <div> element.
For example if you do "View Source" on my web page at http://www.modeltext.com you'll see that I have a <div id="HEADER"> element.
My CSS at http://www.modeltext.com/images/styles.css specifies:
#HEADER
{
background-image: url(bg_main.gif);
background-repeat: repeat-x;
background-position: bottom; }
That's because I'm using an image as the background, to get those lines on the background. If instead you want a simple solid background color, then you could simply use the background-color property instead.
Related
What I want to achieve:
I am doing the very familiar CSS zen garden however I can't seem to get the image to float like this. I want it at the top of the page and to stay at the top like a toolbar like stackoverflow has mounted to the top of the page.
Unfortunately, any time I try to display my image it is not only behind the text but also far too large. I only see about 1/3rd of my image. If I try to scale it in any way then it disappears completely. I have seen that other people do this with the added <divs> but I am told that I should use ::before to do this ....either way I can't get either to even display my image ...the only thing that does barely work is ...
body{
background: url("../CSSMidterm/Header.png") center;
}
but as I said that displays 1/3rd of the image....any idea how I can rectify this situation?
To make it clear, I am asking how to mount an image to the top of a webpage using ONLY CSS no touching HTML at all. I want it to be fairly similar to the toolbar at the top of Stack Overflow own page.
You can try this
body {
background : transparent url("../CSSMidterm/Header.png") no-repeat center center/cover;
}
Link to the documentation for background css
On this page : https://nutreviva.com/peak-health-essentials/ I am trying to fully change the background of the page from white to ivory.
When I try to do this it is only changes to the top half middle sections between the boxes and at the bottom of the page. The sides of the page are still white and this is driving me up the wall.
I have scoured the Inspect in Chrome but nothing seems to be working. When i do, it changes the background for the rest of the pages too zzz
In your custom.css file I'd add the following:
body.page-id-3811 {
background-color: ivory;
}
It seems to work fine, I'm only able to see the colour white background colour in the header and the panels.
In this particular pages HTML try making it say this:
<body style="background-color: ivory;" and see if that is what you are after
OK, sorry...this is kind of a basic CSS question but it's driving me crazy. I'm self-taught so I'm sure I am just missing something simple.
Site: http://notes.benadelt.com
The logo image sprite is just a home link...I'm trying to remove that background color that you can see is ruining the transparency of the image:
<a class="ben-logo" href="/"></a>
You can see that CSS gives any links in that section a light background-color, which is being applied to the image sprite as well. I'm trying to remove that background color from my image, but not from the body links, and cannot figure it out. Using dev tools I can only impact the style using:
header .words a { background: none; }
But that obviously removes the background from ALL links, so it also removes my image background in the sprite.
Figured there would be something I could add after the background URL to do this, such as:
background: url(http://www.benadelt.com/notes/wp-content/uploads/2013/04/Ben-Logo-Sprite.svg) none;
When you hover, it looks like I want it to look normally without that darn background-color.
Any help would be appreciated!
Ben
header .words a.ben-logo { background-color: transparent; }
The above code will target only the logo link. By setting the background colour to transparent, you leave the image itself (and all the other background properties!) intact.
Edit: One thing - I believe you already have transparent set on that background image by virtue of not specifying a colour (transparent is the default). What is probably happening in your case is that the a.ben-logo declaration comes before the .words a declaration in your stylesheet, so it's being overridden. The reason the above code should fix it is because the extra class names add more specificity. Here is Andy Clarke's specificity cheat sheet for you to peruse: http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
How can I do to have an image as the background for all links? I want to have a nice box representing buttons, but I cannot figure this out.
I have tried:
a {
font-size: 40px;
background: url('images/shooting-stars/shooting-star-link.png') no-repeat left top;
}
But this is not working, image is not displaying.
"I want to have a nice box representing buttons, but I cannot figure this out." - I don't understand this part.
Anyway, your css looks fine from here, are you sure the image exists? This is a working example with the exact same code, just an image that I'm sure exists:
http://jsfiddle.net/3k9nm/
If you want to always show the image, even if the text is shorter, you should set a minimum width for the links. This does mean they'll have to be inline-blocks, you can't set width on a regular link (which is an inline element).
a {
display: inline-block;
min-width: 25px;
}
(25px was randomly chosen, fill in the width of your background image..)
Two things to try, is there any text in the actual <a> links? And if you use Firebug, you can check you've definitely got the right file path to the image...
HTML
<div id="example-link">
Link to journal article
</div>
CSS
#example-link a {
background: url('images/shooting-stars/shooting-star-link.png');
}
I'm using Aristo's CSS3 buttons seen here. One thing I like about Facebook's buttons are the little sliver of grey between the border and background of blue button elements. To see this go to "Messages" then "New Message" .. the Send button has just a bit of grey to make it pop out. It looks like this is achieved with this bit of code:
background-position: 0px -17px;
I've put up my attempts on jsfiddle here. My goal is to avoid creating a nested element if possible. I guess I could also create an image and set that as the background, but I was hoping this would possible just with CSS. Thanks!
Perhaps you could use the outline property for the border, and then you get to use the border property for the highlight.