I want the header to look alike coreLogic. But there is some alignment issues with mine. Here is the link http://dragonfly.zymichost.com/internetbrands.html. How to solve this issue??
Change your i-brands.css file:
#header .utility
{
background: url("../images/utility-nav.png") no-repeat scroll 0 0 transparent
}
Taking out the -200px put the image up and took out the line. I tested it.
Also, get firebug if possible. You could have figured this out for yourself in two seconds. Keep on truckin sir.
It's not an alignment issue. CoreLogic is using a CSS sprite to display the background image. That's why they have used -200px and other as position values.
Note: I wanted this to be a comment but I don't see an option to add comment to OP's post.
Related
I'm trying to make a flat black background below the navbar but that seems to be an issue. This is particular concern because I wanted to add some JQuery functionality to the buttons on the right to cause the background color to change when they're pressed. But if something as simple as this, though fundamental, doesn't work...
Currently another issue is this thick, white strip. I honestly don't know what's causing it. I assumed that just having a white AlarmTime would mean floating white text on the page surrounded by a black background, but that's clearly not the case. It's left as the default black now simply because it's effectively invisible otherwise. For the record, it's not the flexbox nor the div causing the border because it still shows up with both of them deleted.
https://jsfiddle.net/xjrqm1k3/
body
{
background-color:black;
}
What did I do wrong?
Edit: I thought you had to have a period before the name of the selected item to select a class. I guess I might've been missing something in my code? The fiddle I posted doesn't seem to have a period Fiddle, and it's what I Copy-Pasted from my work. Do indents cause Visual Studio to count the item as a class?
Edit: Regardless, thanks for the help and information; it works.
You were doing
.body
meaning class with name body
change to body
Also you have to add !important since you're loading bootstrap after this CSS file.
See fiddle
It's probably being overriden by something else. Try this:
body
{
background-color: black!important;
}
Simply put, what's the best way to simply add a store-wide background image in the RDW theme ?
I'm using the default RwD theme in Magento 1.9.2, and I can't seem to figure out how to just add an image, not insert it in CMS, not a block, just a static background image on the whole page instead of the default white colour.
I've been trying to add it, like you usually would, in styles.css
body {
margin: 0;
text-align:center;
font-family:futura;
background-image:url(../images/Fond-Portail.jpg);
background-size: 100% 100%;
background-position: center top;
background-attachment: fixed;
}
The URL should be correct, this is usually a very simple task but I think RWD makes it harder. The only solutions I've seen to this problem, while searching, were to use a community module, is it really that complicated or am I missing something ?
You can use the background size property like this. background-size:cover; and you can also try background-size:contain; if it works for you.
Forgot about this question! Here's how I fixed it :
First of all don't forget (like I did) to remove lines like background: #FFFFFF;, otherwise the color will be overlayed on top of your image.
Turns out you have to change this at multiple lines for RWD's styles.css,
I added the background image in BASE body{},
removed the colored background in RESET body{},
and changed the background color and size of GLOBAL .wrapper{} (depending on the way it's configured for you, I changed the width and made it partially transparent).
I have a problem. Im fairly new to web design. I'm making a site with little images of doors that appear opened when I mouse hover on them. They will later contain links.
the code is
<table><tr><td background="usa-inchisa2.png" height="232px" width="181px" id="usa"></td> </tr>
and I have an external css :
#usa {
background-image: url('usa-inchisa2.png');
height:223px;
width :181px;
}
#usa:hover {
background-image: url('usa-deschisa2.png');
When I hover on I get this:
There is sort of residual line at the bottom of the image. I don't know where it comes from. At one point I managed to remove it but I can't remember what I did. Does it have anything to do with the table border?
Can you help me please? Thank you
Although I agree with #ajp15243 , I would solve your problem by trying this:
#usa {
background-image: url('usa-inchisa2.png');
background-repeat:no-repeat;
height:223px;
width :181px;
}
#usa:hover {
background-image: url('usa-deschisa2.png');
As you probably notice, I put "background-repeat" to "no-repeat". This is because it looks like you have more than one image at that screenshot. And the image you're having problems with is a couple of pixels smaller than the rest of the images. Since the height of a table row by default is the same for all cells in that row, the background image is repeated in the Y axis.
Please Use this CSS
#usa {
background-image: url('usa-inchisa2.png');
background-repeat:no-repeat;
height:223px;
width :179px;
}
As you can see from the example below, the Facebook like button is supposed to appear in that blank space between the date and the start of the article, but instead it's shifted downwards for an unknown reason that I can't figure out. I'm sure it's some obscure weird CSS stuff, but any help is appreciated. Thanks! :-)
And here's the actual page: http://readabout.me/achievements/Reinhardt-University-s-Morgan-Sparks-Selected-for-Who-s-Who-Among-Students-in-American-Universities-and-Colleges/3638644
I fount the issue
Please remove margin #news-story iframe.fb_ltr
http://readabout.me/stylesheets/news.css line 30 - and set padding top on "#fbLikeButton" problem will be solve
I could fixed the issue on firebugg , this is print screen;
Delete line 30 in your news.css file:
#news-story iframe.fb_ltr {margin:25px 0 10px 0;}
You are explicitly giving the like button iframe a top margin of 25px.
I think this will solve your problem :)
<div id="fbLikeButton" style="height: 50px; ">
Edit: I think the #cpilko has spotted the exact reason, though I believe the news.css is not yours but facebook's, in that case you can try adding the following code to your css.
#news-story iframe.fb_ltr {
margin: 0 !important;
}
Just add a height property in the like button - #fbLikeButton{height:60px;}
This worked. Thanks everyone!
-#news-story iframe.fb_ltr {margin:25px 0 10px 0;}
+
+div#fbLikeButton {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
Basically, I removed the internal styling and styled the surrounding div. I didn't realize we had code that actually styled inside the Facebook like button iFrame.
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 3 years ago.
In this test page, the element has a strange extra amount of space on the top:
http://dl.dropbox.com/u/3085200/canvasTest/index.html
I tried putting margin, padding, top all to 0 for body, and padding to 0 for html, but none of it helped.
html
{
padding:0px;
}
body
{
margin:0px;
padding:0px;
top:0px;
}
Try this in css:
h1 {
margin-top: 0;
}
This is a common scenario (logo image wrapped in h1 tag):
I believe this is actually caused by the margin on your h1 element.
You <h1> has default margin-top added to it, so it's pushing the <body> down from the top of the window.
body > h1:first-child { margin-top: 0; }
My console is showing a 0.67em top margin on the <h1> surrounding your top element.
Try this...
h1 {
margin: 0;
}
Well, I'm sure the experts will laugh at this. I started using Expression Web 4 and tried to place the header info for my pages into a file header.txt to include on every page. I changed the file type from html to shtml and used this line:
All okay, except for a pesky extra space at the top of the file.
The solution was this:
Tools>Page Editor Options>Authoring
Uncheck .txt under "Add a Byte Order Mark when creating or renaming UTF-8 documents with these file extensions."
I hope this helps someone else as naive as I.
You can try to put a display flex on your body, it worked in my case
Hope it will help someone :)
I recognize that space at the top. This often happens to me too. In my case there is a hidden break (<br/>) somewhere between the <head> and <body>. When you find this break and remove it, the top space will be fixed!
html > h1:first-child { margin-top: 0; }
I know this post is old, but I wanted to share a different solution that worked for me, for anyone that might come across this same post, looking for help, as I have.
Every solution I found seemed to be the result of an error, but I didn't have any errors, that could see. After over an hour of problem solving and piecing apart one of my past designs, I found this solution:
In the CSS for the DIV that you want attached to the top of the browser, add this one simple line:
#ContentContainer{
border: 1px solid transparent;
};
I'm not quite sure why it works or why it's needed, but it made the gap disappear.