I have a div in the size of 900x30
I have a form in this div, but when I try to put an image after the < / form > (the image is still inside the same div as the form), I see the image on a new line.
How can i prevnt it and make the image show in the same line as the form ?
im using CSS btw...
thanks
You might try white-space: nowrap;
You probably need to float the image to the left or right:
.myDiv img {
float: right;
}
If you post your markup it'll be easier for someone to give a more accurate answer :)
Have you tried setting the display attribute of both form and image to 'inline', just in case it's doing a block display?
Related
I have some clickable link and it was working fine. But if I applied css for an another section those link. Here is the CSS:
.strong-view .wpmslider-wrapper {
position: relative;
}
This css is only applicable for .strong-view class. But link of another section is not working. Here is the live link: http://www.cp3472.bmekuet.org/ Here 'Read More' button under Recent News is not working. If I just remove
.strong-view .wpmslider-wrapper {
position: relative;
}
It works fine.
It is really strange!. What problem is going on? Thanks in advance.
It's because you have floated the 3 sections in the middle and didn't clear that float, and .testimonial-container displays below it, but is actually consuming all of the space where the 3 floated sections are because those floats aren't cleared.
The easiest fix is to add
.testmonial-container {
clear: both;
}
A better fix would be to wrap the 3 floated sections in an element with a "clearfix" applied - https://css-tricks.com/snippets/css/clear-fix/
Position relative may affect the z-index of an element (yes, I know that makes no sense, but that's how it seems to me, if anyone has any documentation behind that, I'd love to read it, this is just from my own experiences). Do you have anything else on the page with a z-index? If you change this class's z-index to something higher than your other z-indexes, it will probably solve the clicking problem.
I've created a codepen for this, but the issue is basically beneath my YouTube embed there's a margin (Seperating the footer from the page) and I don't understand why, I'm still learning when it comes to web development, so I'll be grateful for any explanations.
http://codepen.io/anon/pen/yyjaVJ
Links to codepen must be accompanied by code,
but it's all on codepen, considering there's not much.
It's because an iframe element is inline by default. The reason you are seeing whitespace below the iframe is because inline elements are aligned this way so that there is reserved space below the element for letters such as p, y, q.
You could either change the display of the iframe element to block: (example)
iframe {
display: block;
}
..or you could change the value of the vertical-align property to something other than the default value of baseline. In this case, a value of top would work: (example)
iframe {
vertical-align: top;
}
You can still use what you have, if you edit your CSS and change this code:
#body_wrapper footer {
margin-top: -6px;
}
Not exactly a professional way to do things as you will see the comments i shall get for it but it does fix your problem at hand.
Sorry, probably not the best title ever. I'm having trouble with a few things in my code that I'm using to practice html/css.
h1:hover is responding whenever I hover my cursor over anything at the same height as the h1 heading.
I'm also having trouble linking it. See the code below.
<h1>Bing</h1>
I'd also like to know how to target specific things in the HTML code via CSS. For example if I import an image in HTML using IMG how would I edit just that image in CSS?
Thank you.
H1 is a block element, so it spans across total width of the page. To limit this effect, you must apply it a fixed width, or "display:inline-block;"
For the second question, the right code is:
<h1>Bing</h1>
First, h1 by default spans the entire width of the page. Try changing it to an inline-block element like so:
h1 {
display:inline-block;
}
Second, you need to put the a tag inside of your h1 tag and put the text inside of the a in order for it to function as a link.
<h1>Bing</h1>
Third, in order to target specific img elements, you can assign them a class or and id and target the desired one. For example:
HTML
<img id="myImage" src="whatever.jpg"/>
CSS
#myImage {
width: 250px;
}
Your anchor should be inside your h1, then you can apply any hover changes to the anchor:
HTML:
<h1>Bing</h1>
CSS:
h1 > a:hover {
color:#F00;
}
Let's say that I have a span and I set an image as the background of the span like this:
<span style="background:url("my_image.png") no-repeat;"></span>
As you can see above, my span is empty. If I put some content in my span like:
<span style="background:url("my_image.png") no-repeat;">Some content...</span>
I can see the background image of the span with no problem. But If I leave the span empty I don't see the background image. I figured that I could solve this issue by adding some padding to my span like:
<span style="background:url("my_image.png") no-repeat;padding:20px;"></span>
But is there another way I can do this without adding some padding to my span and keep my span empty?
Thank you
You get the same effect by using inline-block but setting width and height instead of using padding.
<span style="background:url('my_image.png') no-repeat; display: inline-block; width: 40px; height: 40px;"></span>
Also, something else that could trip you up is you are using double-quotes inside of an HTML attribute, which would confuse a parser and could lead to unexpected results. I've changed them to single quotes in the code I posted above, although no quotes would do just as well.
just don't make it empty: put a 'blank' inside. There are three ways, to do that:
simple space and add style white-space: pre; to it
Non-breaking Space or
The non plus ultra is, to let css do the trick for you:
add this style to your span:
:before {
content: "\200D";
display:inline;
}
What happens:
you add a content before (or better "in front inside") your span, that displays a ZERO WIDTH JOINER, and your span is not empty enymore
By default spans are inline page elements (rather than 'block' elements). This means they won't take up any more space in the page than that assigned to them—for example, if you place text in them (as you have found). To achieve what you want, you need a little CSS to define a height and width for the span, but you also need to make it a block element so that it is rendered consistently.
Alternatively, you could switch to something like a div, which is already a block element. Note however that defining a block element means it will take up space in your page. If you want something more dynamic consider some on-the-fly manipulation of the element with Javascript or similar.
(Either way, ignore the advice elsewhere on this page about single and double quotes in HTML attributes: that is utter nonsense).
try
<span style="background:url('my_image.png') no-repeat; display:block; height: 40px;"></span>
You have to specify a width and height to show the background. When you're typing something in it you force both with the text.
<span style="background:url("my_image.png") no-repeat; width: 50px; height: 25px"></span>
You should set a width and height.
In the following SO-Question is a tip, how to get the size of the background-image: How do I get background-image size in jQuery
for some odd reason the text area I have in my site won't accept the width I tell it to, I've tried to select it three times in the CSS just to make sure!
Here is a jsfiddle example that shows what I want, and here is the page where it doesn't want to work. I have searched through the CSS to find any conflicting textarea properties, but there are none.
Thanks for the help!
Edit: If you have Firebug, don't forget about it, and use it!
In one of your CSS files, you specified textarea { min-width: 40em; }.
You have min-width: 40em for all textarea elements.