I'm struggling to set an img's height inside a div to be taler than the other img's on the rest of my site, can anyone advise, thanks
Here is the HTML
<div class="project">
<img src="../../../Images/Nu Space/Nu Space LH.jpg" alt="Nu Space LH" class="image" height="auto" width="580">
<img src="../../../Images/Nu Space/Nu Space BC.jpg" alt="Nu Space BC" class="image" height="auto" width="580">
<div class="clear"></div>
</div>
Here is the CSS
img {
float: right;
margin-top: 0px;
height: auto;
}
img li {
margin-top: 75px;
height: 100%;
width: 100%;
}
.project {
width: 700px;
min-height: 100%;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 30px;
left: auto;
background-color: #FFF;
}
Any help would be appreciated
try this one,
.project
{
width: 700px;
min-height: 100%;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 30px;
left: auto;
background-color: #FFF;
}
.project .image1
{
width:200px;
height: 200px;
}
http://jsfiddle.net/tT8JH/2/
div > img {
width: (desired width in %);
height: (desired height in %):
}
Edit: Sorry I was not exact in my explanations, but this will change only the images inside a div, which was what the author wanted. I believe he has other images on the webpage, which should have different size.
Related
Total newbie here, tried to google my issue, even get on the second page of results... I'm stuck on resizing image and I have no idea why it is not working, hoping someone can help. By using Inspect on Chrome I can see that element for img is not being connected to the img and I have no idea why.
Block below is within <main>
<article>
<section class="article-content">
<img src="./assets/images/page_screenshot.png" alt=""/>
</section>
</article>
Here is CSS that I have for the whole part.
main {
display: inline-block;
background-color: var(--main-bgc);
padding-top: 5%;
}
article {
display: flex;
margin-bottom: 3%;
width: 100%;
}
.article-title {
display: inline-block;
width: 9%;
margin-right: 1%;
color: var(--font-colot-slate);
border-right: 1px solid var(--font-color-white);
}
.article-title h2 {
float: right;
margin-right: 10px;
}
.article-content {
display: inline-block;
width: 90%;
float: right;
color: var(--font-color-white);
}
.article-content img {
width: 100px;
height: 100px;
}
I tried adding height and width in tag and works fine, but not very happy with that solution.
The code you've given us works fine, as you can see in this snippet (run it to see the result). So if your image is not being properly resized, it must be because of some other part of your code, which you haven't included.
If you want the image to retain its original aspect ratio, you can add object-fit: cover; which will crop the image rather than squash it.
article {
display: flex;
margin-bottom: 3%;
width: 100%;
}
.article-content {
display: inline-block;
width: 90%;
float: right;
color: var(--font-color-white);
}
.article-content img {
width: 100px;
height: 100px;
object-fit: cover;
}
<article>
<section class="article-content">
<img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg">
</section>
</article>
I am currently developing my own website. The first div container integrates a image to html. The second div with the classname "face" should show up directly beneath the image. It contains a text with predefined width and height.
Now the problem: It does not show up on the right of the image div. How can I show it on the right side?
.face {
text-align: center;
background-image: linear-gradient(rgb(0, 21, 166), #115FD8);
border-radius: 5px;
width: 240px;
height: 80px;
margin-right: 0 !important;
}
.start {
margin-right: 10px;
}
.postpreview {
position: relative;
width: auto;
}
.one-half {
float: left;
width: 48.717948717948715%;
margin-left: 2.564102564102564%;
}
<div class="one-half start postpreview">
<a href="#">
<img src="http://vocaloid.de/wp-content/uploads/2015/02/KAITO-6th-anniversary-2015-Project-DIVA-Arcade-Diamond-Dust-750x256.jpg" class="attachment-Beitragsbild wp-post-image">
</a>
</div>
<div class="face">Facebook
</div>
This should help. http://jsfiddle.net/13m3vbu1/3/
Insert into your css:
.face {
text-align: center;
background-image: linear-gradient(rgb(0, 21, 166), #115FD8);
border-radius: 5px;
width: 240px;
height: 80px;
float: left;
margin-right: 0 !important;
}
.one-half {
float: left;
width: 48.717948717948715%;
margin-left: 2.564102564102564%;
margin-right: 10px;
}
.one-half > a {
display: block;
width: 100%;
overflow: hidden;
}
I removed the redundant CSS that isn't needed as well.
If you just want the div with a class face to show on the right side of div one-half use float: left and instead of using pixels in .face use percent it's more flexible
CSS
.one-half {
float:left;
width: 45%; //adjust in what % you want
display: inline;
}
.face {
float: left;
width: 45%; //adjust in what % you want
display: inline;
}
Hey I was just trying to put two divs beside each other, like I've done hundreds of times by using "float: left" but it's simply not happening. The second div just sits below the first.
Here's the code:
<div id=wrapper" style="overflow: hidden; width: 1000;">
<div id="box1" class="greybox">
Right
</div>
<div id="box2" class="greybox">
Left
</div>
</div>
and the css:
#box1 {
margin-top: 70;
margin-left: 85;
width: 440px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px
float: left;
overflow: hidden;
}
#box2 {
margin-top: 70;
margin-left: 30;
width: 20px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
overflow: hidden;
float: left;
}
Any help would be much appreciated.
You're missing a double-quote around your "wrapper" id.
I discovered this by attempting to make a fiddle out of your code, which highlighted the error. (Hint: make a fiddle for us next time)
You also had some errors in your CSS, and your widths were all weird.
Fixed:
<div id="wrapper" style="overflow: hidden; width: 1000;">
<div id="box2" class="greybox">Left</div>
<div id="box1" class="greybox">Right</div>
</div>
#box1 {
margin-top: 70;
margin-left: 85;
width: 200px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px;
float: left;
overflow: hidden;
}
#box2 {
margin-top: 70;
margin-left: 30;
width: 40px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
overflow: hidden;
float: left;
}
You can either float both boxes left to have them side by side, or float one right.
Why something will happen? item's auto float is left.
Maybe you mean to
float: right;
try this one ^^
Usually this is a problem when the width of the second element will not fit horizontally within the parent. Does the greybox class add any padding?
Also, in your paste the wrapper id is missing a quote. This would give the parent no width if it was styled via a stylesheet include rather than inline and yield the problem I describe.
Also, the box1 styles have a syntax error in padding. All styles below wouldn't take effect. This should be your fix.
You have lots of typos in your code. Missing double quotes and semicolons. Additionally you forgot many times to give your values also an unit (like px).
If you'll fix all these errors all work as expected - see jsFiddle
why u put overflow:hidden to #box1 and #box2 ? do u know the use of {overflow:hidden;}
u already put overflow:hidden to main wrapper
see this
<div id="wrapper" style="overflow: hidden; width: 1000px;">
<div id="box1" class="greybox">
left
</div>
<div id="box2" class="greybox">
Right
</div>
</div>
and the css
#box1 {
margin-top: 70px;
margin-left: 85px;
width: 440px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px;
float: left;
background:orange;
}
#box2 {
margin-top: 70px;
margin-left: 30px;
width: 20px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
background:green;
float: left;
}
see the jsfiddle
You should clean that code up mate. Lots of errors, missing (px's), semicolons, quotes, etc...
<div id="wrapper" style="overflow: hidden; width: 1000;">
<div id="box1" class="greybox">Left</div>
<div id="box2" class="greybox">Right</div>
</div>
#box1 {
width: 440px;
height: 450px;
padding: 1px 20px 0 40px; /* Order = Top, Right, Bottom, Left */
margin: 70px 0 0 85px; /* Cleans up your code by eliminating margin-top, margin-right, margin-bottom, margin-left and same applies with padding */
float: left;
overflow: hidden;
}
#box2 {
width: 20px;
height: 300px;
padding: 1px 0 0 0;
margin: 70px 0 0 30px;
overflow: hidden;
float: left;
}
Demo : http://jsfiddle.net/ZFTzY/5/
everyone I try the css style as below:
.image{
position: absolute;
width: 100px;
height:100px;
padding: 5px;
margin: 0;
background-color:green;
}
<div class="image">
<img src="http://www.wallpapersgo.com/wp-content/uploads/2010/02/Dodge-Charger-Car.jpg"/>
</div>
The problem is, the showing image is same size as it is, but not in a expected size as 100px * 100px.
fresh in css style, need help , thx!
Use:
.image{
position: absolute;
width: 100px;
height:100px;
padding: 5px;
margin: 0;
background-color:green;
}
.image img {
width: inherit;
height:inherit;
}
Just add
.image img{
height: 100%;
width: 100%;
}
http://jsfiddle.net/p67dh/
This is because your image don't use automatically the size of the parent element.
![enter image description here][1]I want to make a horizontal line after my text.
Instead of hiding the content that goes out of the div (#line), it doesn't display it at all.
The #line div has to be bigger than the #textline div because I don't know the size of the text div.
Edit: Here is the Jfiddle http://jsfiddle.net/wakary/8tTzz/2/
Put #line {width: 100;} to see what I want to accomplish.
Edit: (what I want to acheve, the title changes):
Hi I have made some small changes to your code
#textline{
position: relative;
width: 400px;
height: 36px;
margin-left: 20px;
overflow: hidden;
}
#text{
position: absolute;
color: green;
height: 36px;
background:white;
padding-right:10px;
}
#line{
position: absolute;
height: 10px;
width: 80%;
border-bottom: 1px solid green;
}
And the HTML like this
<div id="textline">
<div id="line"></div>
<div id="text">Text</div>
</div>
So in this case you will have one div over the other, the line will cover all it´s container, and the text will hide some part of this line.
Removing the width of the container element works.
Demo
HTML
<div id="textline">
<div id="text">Text</div>
<div id="line">
<div id="upspace"></div>
<div id="ll"></div>
</div>
</div>
CSS
#textline
{
height: 36px;
margin-left: 20px;
}
#text
{
float: left;
color: green;
height: 36px;
}
#line
{
float: left;
height: 36px;
width: 400px;
}
#upspace
{
height: 10px;
}
#ll
{
height: 1px;
background-color: green;
}