here is the site with the issue
I want the opaque bar which is its own div to appear behind the div with the text. Both of those obviously in front of the image.
My issues are:
1) I can't get the div titled "fp-banner" to shrink to a height of 70px while containing the text inside.
2) The white border keeps extending all the way to the bottom and I have no idea why.
I'm trying to post all of the code here but when I copy and paste it the html actually appears so I guess I won't post it.
Thank you.
Let me address issue #2 first - the white border extends below the featured post image because you have the border applied to the container element (#featured-post) instead of the image itself (#featured-post img)
So change the CSS for #featured-post to:
#featured-post {
float: left;
width: 370px;
margin-left: 10px;
padding:0;
}
and the CSS for #featured-post img to:
#featured-post img {
border: solid 3px #fff;
z-index: -1;
margin:0;
padding: 0;
}
For issue #1, add this to #fp-banner:
height:70px !important ;
and add this to your CSS:
#fp-banner p { line-height:14px ; margin-bottom:8px }
You may need to adjust the margin-bottom value for the #fp-banner p styling to fit in the 70px height.
NOTE: Don't forget to make a backup of your style.css before you make these changes, just in case :)
Hope this helps!
Best,
Cynthia
Related
I have a clickable div :
#next {
cursor:cell;
z-index:100;
}
That is activated by this JavaScript :
$('#next').click(function() {
$('.current').removeClass('current').hide()
}
And the divs:
#zob {
width: 100% ; height: 20px;
}
#zobbig {
position:absolute;
width: 100% ;
height: 250px;
}
and when i hover on #zob then #zobbig appears.
#zob:hover ~#zobbig {
cursor:alias;
opacity:0.8;
margin-left: auto;
margin-right: auto ;
}
My problem is that when it appears it make my #next div unlickable even when i'm not hovering on #zob. A zone of 250px (height of #zobbig) is disabling the click function of the #next div.
I just want my #next div to be clickable as it is supposed to be.
Thanks for your help
Dan
(you can see it directly on http://blog.dansayag.com)
or on http://jsfiddle.net/CEtfh/108/
to make it easier: if you go on the fiddle there is a picture of bob dylan.
If you point with the cursor on the eye, the cursor becomes a cross. If you point on the hat, the cursor is normal.
I just want the cursor to be a cross on the entire bob dylan image...
IF you go on fiddle you will also understand what is ZOB and what is ZOBBIG
Here is a link to fiddle, where I made it a little bit clearer for everyone to see.
Your problem comes from the fact that you don't set display: none; to your elements, but you simply make them invisible. Therefore they still exist on the HTML page and must align according to each other and the clickable div with the image inside gets pushed down from the #zob div. I suggest you change your way of hiding elements in the biginning with
disply: none;
and later display them again with
display: block;
EDIT: Resize the window in fiddle so the picture is a little bit larger, otherwise there will be no clickable div at all
So here is the website: a link
When you make your screen smaller and scroll horizontally... you will see my issue where everything within the "wrapper" gets cut off and then there is a whole bunch of extra blank space on the right... I'm pretty sure it's in the wrapper, but I'm not sure how to get this wrapper to stay still and not get cut off when the screen is minimized.
ANy help on this issue would be greatly appreciated... Thanks!
You should try to place your wave background image inside the footer class instead in an ul tag. Your footer id is already set to be 100% witdh so it should fill out the complete bottom of the page.
#footer {
height:275px;
width:100%;
margin: 0 auto;
margin-bottom:0;
background: #000 url(http://dropbuckets.com/wp-content/themes/Freshman%20101/images/waves.png) repeat-x 0 top;
}
Make sure the white in your wave png is not transparent.
You need to set a min-width on your body to that of the largest element on your page. In this case #access was 940px:
body {
background: none repeat scroll 0 0 #F1F1F1;
min-width: 940px; /* add this */
}
On this page, you'll see a blog post that has a thumbnail, tag set and other information in a sidepanel on the left: http://www.elegantthemes.com/preview/TheStyle/2010/10/morbi-rutrum-interdum-justo/.
What I am trying to do is to create a black rectangle on this white div, a black rectangle that extends from the top left of the white div to the bottom, just left of the post text.
At first I tried simply creating a two-color image that was one pixel wide and using repeat-y in order to extend the "faux two column" layout from top to bottom. However, this div resizes dynamically, so in many cases the black text from the post ends up running over into this sidebar.
I then tried using the same image in the same way, but giving the white div a "position: absolute" trait. This caused the sidebars on the right to spill over onto the post content.
I want to create this black rectangle to take up any whitespace to the left of the post content.
I have inherited a lot of CSS that I'm not sure how to change. Any advice would be greatly appreciated. `
I will add the style.CSS file here if I can find some way to do so. This is my first time on the site.
Looking into the CSS, it says that everything you said is within its own div:
<div class="info-panel">
With that said, you just make your CSS changes to that class. You'd do something like:
.info-panel {
background-color: #000;
}
But keep in mind that, for it to look good, you should play with the padding and margins for the info-panel and post-content classes as well.
I just made it look better and keep the same overall width by including the following:
.post-content {
background: url("images/entry-bottom-bg.png") repeat-x scroll left bottom transparent;
padding: 0 4% 30px 1%;
}
.info-panel {
background: none repeat scroll 0 0 #000000;
float: left;
margin-right: 1%;
padding: 2% 0 2% 2%;
width: 29%;
}
The last two code snippets from the CSS are just some advice on what I would do if my solution worked for you. Doesn't mean you have to, so please don't treat it as such. It just keeps the area from looking awful.
It's hard to decipher what exactly you're trying to do, but see if this helps:
.post-content.info-panel {
background-color: black;
padding: 4px;
width: 28%;
}
This is a really odd one. I cannot seem to affect this one image via css at all. Tried adding a class specifically for the image and also writing css to affect just the image, but zip. It won't budge. The only thing that made it move was setting the neg. margin on the actual image, and there it only moved up about 40px and wouldn't go any further (taken that off since then). The image in question is the "imagine" tab (wp-image-39) on this page:http://circore.com/haute/. The bits of css I've left are:
img.wp-image-39
{
margin-top:-120px;
background:#ff0000;
}
.toptab
{
margin-top:-120px;
background:#ff0000;
}
I've also tried affecting all images in the content area and a bunch of other things. The red background is just so I can see if something worked. Argh! Thanks so much!
Instead of trying to put styles on the image, why not put styles on the containing div?
.toptab { margin-top: -50px; }
Would that suit your needs?
I would set position: absolute for the image. Then you will be able to move it freely with margins relative to its inline position.
The last 3 classes of your CSS
#text-4
{
font-size:11px;
line-height: 15px;
color: #000000;
text-align: center;
}
img.wp-image-39
{
margin-top:-120px;
background:#ff0000;
}
.toptab
{
margin-top:-120px;
background:#ff0000;
}
are inside #media print { which is actually not closed.
Put a closing bracket before #text-4 or wherever you need.
<div style="margin-top:-120px;">
Inline CSS would work also on the div that wraps around the . Hope this helps.
I have tried using firebug to locate the problem, but cannot find the solution to the following at this url :
How to get rid of the space between the image and the text? For example, the gap between the image of lego-like bags and the text "AboveHere Concept"
How to align these two social buttons in one line? I have set the twitternews class width to 90px and the facebooknews iframe to a width of 90px, but this does not work. I also have these two buttons in a block with a width set to 200px, but this does not seem to work either.
your
<p>
tags in the post-body divs have a top and bottom margin of 1em. that's why there's a lot of space in there. take those out
.post-body p {
margin: 0;
}
you need to set .facebooknews div to have a smaller width, not the iframe
div.grid-item .facebooknews {
clear: none;
float: left;
padding-right: 5px;
width: 100px;
}
1) Add the style margin-top: 0px to the P tag that the "AboveHere Concept" text is in. Also remove the <br> thats right before the text. It will move everything up.
2) facebooknews add a width: 100px; and it will fit.