CSS style works (as far as I can see) for all elements except the container div.
I can't get it to work, I have tried everything. It should have width and height and a black background color. This is the code that doesn't apply :
#container {
width: 588px;
height: 617px;
background-color:#000;
margin: auto;
}
The code seems right. Both CSS and HTML have passed the w3c validators.
Please help, I'm clueless. Thank you.
right now, looking at the html of your page, you have set the container tag as a class. You need to set it either as a div id, or change it to a class in the css.
so in the code above, simply change the # to a . (period) in front of container
.container { /* replaced # with a period */
width: 588px;
height: 617px;
background-color:#000;
margin: auto;
}
you container is a class instead of an id
Related
I have a paragraph in HTML using the p tag. Now i want to change the height and width of this paragraph so it only shows the begining (head) of the paragraph and then when i hover over it, it displays the full paragraph. How do I do this using CSS?
NOTE** I CANNOT CHANGE THE HTML CODE SO I MUST ONLY PLAY AROUND WITH CSS..
The following base code will work for you, you can modify it to enable CSS animations etc. as necessary.
p {
// Put whatever height you want here, we're using max-height here so that
// paragraphs that are smaller than this don't get extra blank spacing.
max-height: 20px;
// Hide the extra content
overflow: hidden;
}
p:hover {
max-height: none;
}
It's better if you use JavaScript for such stuff, but if you insist on CSS, here you go.
p{
border: solid;
height: 10px;
overflow:hidden;
}
p:hover{
height: 100%;
}
A small Example here
I have a portfolio page with a image display with zoom.
I have this code: http://codepen.io/Mpleandro/pen/LvrqJ
The div that shows the image has a class of .display, on line 13 of the HTML and the css formating for this div isline 90.
The image width will be flexible, so I what I want is to make the containing div inherit the width of image.
I tried the css property auto, inherit and min-with, but nothing works!
Could someone help me?
P.S.: I need a responsive solution.
Thanks
since 1 year has passed you may not be interested in the solution, but hope that helps someone else.
I also had a situation like that where I needed a div to be of the same width as the image and this had to be responsive.
In my case, I set a fixed width for the div
.some-div{
width: 250px;
}
I also had responsive image:
img{
display: block;
max-width: 100%;
height; auto;
}
and then I added a media query with threshold when the fixed width of the div started to affect the responsive nature and simply addedd this:
#media screen and (max-width: 917px){
.some-div{
width: 100%;
}
}
For my project the threshold was 917px when the fixed width started to affect.
I guess it is a solution that will fit everyone since width: 100% after the certain threshold will always be the width of the image if the image is responsive.
I don't know how to give you a perfect answer, but I can hopefully send you in the right direction. First, you can forget about inherit or min-width because they are not what you want.
auto is the default value, and I think that the default behaviour is very close to what you want: the width of the div adapt to its content. If this is not the current behaviour, this is because of many other reasons including the positioning of that div. The thing is, you won't have a proper centering and sizing of the <div class="display"> with only CSS, because it would need a specific explicit width declaration.
Since you already use Javascript to display/hide the good images, you could use Javascript to set the width everytime you change the image that is in the box.
My best advice would be to use existing solutions which are tested, approved and look really good. A 2 seconds Google search pointed me to Fesco which you could try.
I'm not sure if this is what you mean, but if it is, I hope it will help!
If you want your image to fill the div, but to scale with the browser, try setting the width of your div. Next, apply max-width="100%"; height: auto; to your image.
The simplest solution would be to just set .display to display: inline-block;, which would adjust its size to the contained image. If you want to be responsive as well, you need to define an upper limit via max-height: 80%, for example.
Put together, it would look like this: http://codepen.io/anon/pen/IluBt
JS line 17:
$(".display").css("display","inline-block");
CSS for .display
.display {
position: relative;;
background: rgba(255,255,255,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
max-height:80%; /* <-- limit the height */
top:10%;
left:0;
margin:auto;
}
And to align everything nicely:
.loader {
color: red;
position: fixed;
width: 100%; height: 100%;
background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
text-align: center;
}
As an example I'm trying to create a thumbnail, but my automatic img css as listed below is applied
img, img a {
border: none;
margin-top:10px;
margin-bottom:10px;
}
I can't make sense of it in my mind for some reason. I know the syntax is probably simple, but I can't seem to remember it.
Thanks
Chris
The reason you can not add margin to your images is because img elements are, by default, inline. It means you can not give them dimensions, or add margin from the bottom or top (and some other stuff you should probably read about).
This means that in order to give img element margin from top or bottom, you need to declare it as a block, or rather inline-block. This is achieved using
img { display: inline-block; }
Then you can add away your margins, and viola:
img {
display: inline-block;
margin: 10px 0; }
Are you trying to style all images a certain way, then exclude images within a certain container div? If your container div is called #wrapper, then do something like this:
#wrapper img,
#wrapper a img /* assuming that's what you meant rather than img a */
{
/* undo what you did above for images inside #wrapper */
margin-top: 0; margin-bottom: 0;
}
Such loose selectors for img can be troublesome because images are used all the time in different contexts. I prefer to style only images that are inside a #content div, or similar.
I want to wrap an image into an html DIV and, since I want this to be fully scalable with the size of the window, I want to set the width of the DIV in percentage as follows:
html
<div id="wrapper">
<img src="http://openclipart.org/people/netalloy/rally-car.svg" />
</div>
css
#wrapper {
position: absolute;
width: 50%;
}
#wrapper img {
width: 100%;
}
The image should determine the height of its container. This is because the image width is set to 100% and the image height is calculated accordingly maintaining the correct aspect ratio.
The result is visible on jsfiddle: http://jsfiddle.net/lorenzopolidori/5BN4g/15/
My questions are:
Why do all modern browsers render the wrapper DIV 5px taller than the inner image?
How can I get rid of this 5px gap, while still setting all the sizes in percentage and without using javascript?
Surprisingly, this happens in Chrome (21.0.1180.89), Firefox (15.0.1) and IE8, while IE7 renders it correctly, matching the height of the DIV with the height of the image.
Check this out :
http://jsfiddle.net/5BN4g/29/
It's a line-height issue :-)
You need :
#wrapper {
width: 60%;
background-color: #aaa;
margin: 50px auto;
line-height:0;
}
#wrapper img {
width:100%;
border: 1px dashed red;
box-sizing:border-box;
}
I used box-sizing to make sure the width of the image doesn't overflow the container
................
Hi now add vertical-align:top in your img tag throw css
as like this
#wrapper img {
width: 100%;
border: 1px dashed red;
vertical-align:top; // add this line
}
live demo
OK, fiddling about, I found a good possible solution:
#wrapper img {
display: block;
width: 100%;
border: 1px dashed red;
}
Changing from the default inline display to a block display eliminates the line-height problem straight away.
This approach is also semantically correct because in this case what we really want is a single image wrapped in a DIV without any other elements in it, so the concept of line-height needs to be completely wiped off by displaying the image as a block.
It works on all major browsers: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/
I think you shuold set align property to force browser show correctly img tag.
<div id="wrapper">
<img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
</div>
DEMO
I think is because it doesn't see as a Table
i added the display:table in your code
And it looks fine now, check the link
Example Display Table
Your issue is that an image -- the <img> tag, to be exact -- is an inline element. All you need to do is set display: block on the image and the extra padding goes away. Demo.
What is DIV style for HTML center tag?
The HTML:
<div id="something">
Content goes here.
</div>
And the CSS:
#something
{
width: 850px;
margin-left: auto;
margin-right: auto;
}
There is no direct equivalent. The <center> tag not only centers its containing text, but any block element too. You can mimic each of those separately, but not simultaneously.
For centering any inline/inline-block content (text, images, videos etc) you would use apply the following to a div or other block element:
.center {
text-align: center;
}
For centering a block element itself, use this:
.blockcenter {
width: 200px;
margin: 0 auto;
}
Obviously replace 200px with the desired width of the block, and 0 with whatever value you prefer for the top/bottom margins. Also note you should generally use class names that describe the element, not its presentation.
You just need to use margin: auto; to center a div. It doesn't technically matter whether it's internal/embedded, or external.
As the comment below points out, however, this will not work in inline elements.
As mentioned above, text-align: center; would be used to center text within an element.
margin: 0 auto; will only center something in CSS if you also add a width specifier. Without width it won't work - it will be placed on the left. But this means it is not equivalent to the <center> tag, for which you did not need to specify any widths. And IF you know the width of something, and have to bother to specify it in a CSS sheet, one line for each of your objects on the page (that have different widths), then you may as well just give the left margin. (software: HTML5, linux, Firefox 31)
CSS is hopeless in not centering. (Presentation language? Rubbish!)
To center a div tag on your page you would use this code. If you want the text centered within the content div you then add text-align:center; to the #content ID style
#wrapper{
background:#444;
}
#content{
width:960px;
margin:0 auto;
background:whitesmoke;
}
<div id="wrapper">
<div id="content">test</div>
</div>
If you have:
{
position:absolute;
}
you will need to delete it before the margin styles take effect.