I have an odd redline next to my logo, and I can't for the life of me work out why.
Take a look:
http://www.pdf-explode.com.au/index.php
Here's the red line I'm talking about:
http://www.bounceapp.com/66618
I've tried looking at all the borders, there's no red.
searched through backgrounds, no red.
inspector can't inspect it.
it's not in the image
Let me know if you can find it.
The background is repeated (the red line is a part of the letter D), so add: no-repeat to your css
It's the repeat of the background image on #menu a.logo (so it is the D of Document showing up again to the right). Remove the repeat.
your css:
#menu a.logo {
background: url("../images/logo1.png") repeat scroll 0 0 transparent;
height: 45px;
left: 0;
position: absolute;
text-indent: -10000px !important;
top: 5px;
width: 265px;
z-index: 10;
}
the correct css:
#menu a.logo {
background: url("../images/logo1.png") no-repeat scroll 0 0 transparent; //edited
height: 45px;
left: 0;
position: absolute;
text-indent: -10000px !important;
top: 5px;
width: 263px; //edited
z-index: 10;
}
your logo's width is 263px;
This is because your logo starts repeating itself. The line is coming from the red "D". add background-repeat: no-repeat; or shorten the logo width for about 2 pixels.
Related
I've given my navbar a fixed position and a z-index of 1. It stays at the top when I scroll which is good, but then my logo doesn't go behind it as it scrolls up, it can still be seen in the nav area which I really don't want. Below is the css for my Logo. I'm still learning web design. Thanks.
#logo {
background-color: #292421;
color: white;
margin-top: 70px;
padding: 40px 0 25px;
}
#nav_bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
background: url(..images/header-fade.gif) repeat-x;
border-bottom: 1px solid #ccc;
}
Your #nav_bar has no background. The URL you provided is incorrect. You probably wanted it to be
background: url(../images/header-fade.gif) repeat-x;
Notice that you missed slash character / after the dots ..
Fiddle
I am trying to make the div #top opacity: 50%, so when you scroll, it will show a faded portion of the webpage below it. When I run this, however, it does not show opacity. It still shows solid.
CSS:
#top {
width: 100%;
height: 40px;
background: #96f226;
text-align: center;
font-size: 30px;
color: #252525;
position: relative;
position: fixed;
opacity: 50%;
}
HTML:
<div id='top'>Cuisine List</div>
opacity takes a decimal between 0 and 1, like so:
opacity: 0.5;
See MDN for more information.
Also,
you seem to have two positions - you should remove the first one
for position: fixed to work, you must specify at least one location, such as:
top: 0px;
which will anchor it to the top.
fixed fiddle
trying to get this:
http://webdev.edulence.com/getchell/products-services/commercial-insurance/
to look like this:
http://getchellcompanies.com/products/commercial.html
for some reason, the shadow div at the bottom is showing up behind the wrapper, with a white background, despite the shadow appearing after the wrapper in the HTML
#shadow is different in your CSS than the working page.
#shadow {
margin: -50px 0pt 0pt -65px;
top: 44px;
}
added the following to footer.
#footer{ margin-top: 60px;}
and used the below styles for the shadow.
#shadow{
background-image: url("images/dropShadow.png");
height: 103px;
position: absolute;width: 1121px;
z-index: 1;
clear: both;background-position: -15px 5px;
background-color: transparent;
background-repeat: no-repeat;margin-left: -40px;
margin-top: -35px;
}
I have this page which has this this CSS
body {
background-image: url("images/BACKGROUND5.jpg");
background-repeat: no-repeat;
}
and two divs
#borderleft {
background: none repeat-y scroll 0 0 #93A87D;
clear: left;
float: left;
margin-left: -10px;
margin-top: 610px;
visibility: visible;
width: 70px;
z-index: 2;
}
#borderright {
background: none repeat-y scroll 0 0 #93A87D;
clear: right;
float: right;
margin-left: -10px;
margin-top: 610px;
position: relative;
visibility: visible;
width: 70px;
z-index: 2;
}
here is the HTML
<body>
<div id="borderleft"></div>
<div id="borderright"></div>
any ideas on how to make image in the center and the green background: none repeat-y scroll 0 0 #93A87D; on the outsides
One good way to do this kind of layout, when the width of both border columns is fixed, is this.
The elements are:
A container <div> with position: relative
The border <div>s with position: absolute, fixed widths, and left: 0/right:0 respectively
A "content" <div> with margin-left and margin-right equal to the width of the border <div>s.
In the example I linked above there's no container div (the <body> element plays that role), but you will need one if you want to be able to move this arrangement around on the page as a whole.
Part of solution is to have your body style like this:
body {
background-image: url("images/BACKGROUND5.jpg");
background-repeat: no-repeat;
background-position: center;
}
And, instead of having
margin-top: 610px;
in left and right divs, try replace that with
height: 610px;
Using the image as you posted, I'd suggest something like this.
I need to align the image 'Special offers' on the site http://sherridon.bluefrogclients.com/.
I need to move it up a bit.
Let me know what exactly to change.
Below is the code from css file:
#call_to_action {
background: #e6e6e6 url("images/outset_breadcrumbs.gif") repeat-x scroll center bottom;
min-height: 170px;
}
body.inset #call_to_action {
background-image: url("images/inset_breadcrumbs.gif");
}
#call_to_action #blurb {
padding: 15px 230px 20px 0;
}
#call_to_action_button {
background: url("images/started.jpg") no-repeat scroll 0 0 transparent;
height: 80px;
padding-bottom: 0;
position: absolute;
right: 0;
top: 0;
width: 300px;
}
#call_to_action_button a {
display: block;
height: 100%;
width: 100%;
}
Regards,
Shyam.
In blue.css:
#call_to_action_button {
margin-top: -30px;
height: 90px;
}
Increase it as you much as you like(or decrease)
I noticed your image wasn't showing well. so I added the height and compensated with the margin top
#corroded's answer looks correct also (gave +1), but mine makes better use of your existing code:
Your image is exactly 89px high.
You already have a top attribute which you can make use of, you don't need margin-top.
#call_to_action_button {
height: 89px;
top: -29px
}
(in blue.css)