Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
is possible to make a specific element about 5px longer that it would automatically be? because my article element has a video element which sticking out of the given space a bit, while I could just set the height manually I thought it would be better to have it set itself automatically (like it normally does) only adding about 5px. Any Help?
I'm not sure I understand the question, but have you tried giving it a padding-bottom of 5px?
Try using a dynamic width to set the width of your contained element.
Eg.
article {
width:300px;
}
contained-element{
width:95%;
}
Just give padding-bottom:5px to your <article> elements, & make height:auto for both elements, then <article> element will expand as per height with 5px at bottom.
Am not very much sure what are you asking about but if it's regarding fitting your video in a div for that you can create a wrapper class such as
.wrapper-div {
position: relative;
padding-bottom: 20%;
height: 0;
}
then have the child element inside it
.element-to-load{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I assume you want to the div to expand if the video is larger than the article.
To do this you just need to:
1) Give the Outer Div a height:auto - and a min-height:
2) Give the Inner Div a margin-bottom of 5px
Check out this Fiddle Demo
Does this answer your question?
Just set the CSS for that element be (use the actual pixel width and height):
height: 25px;
width: 50px;
and the height and the width will be forced to be that height and width.
Although if possible try to use 'em' so that it is automatically responsive.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am not asking this because it's a problem for me, actually, that's exactly how I wanted to display the divs, but I didn't know they would appear below each other. Why is that? I only gave them width and height, I didn't position them.
I thought they would appear on each other at the same position
<div class="D1">
</div>
<div class="D2">
</div>
<div class="D3">
</div>
<div class="D4">
</div>
.D1,.D2,.D3,.D4{
border:1px solid;
border-color:red;
width:500px;
height:200px;
}
/* OR
div{
border:1px solid;
border-color:red;
width:500px;
height:200px;
}
*/
Sorry for this probably dumb question, but I'm just curious :D
That's the expected behavior.
div by default are block elements which means that they always start on a new line and take up the full width available.
If you want elements to be on the same line and to only take up as much width as necessary, you must use inline elements, such as span.
Find here a complete reference
By default, the flow of the page will display your divs elements (which are blocks) one below another as you have seen.
If you want to override this behaviour you could set a
position: absolute;
property to your divs so they can be placed wherever you want regardless of the position of other elements. For example you may want to set all your divs at the top left corner by doing:
div {
position: absolute;
top: 0;
left: 0;
}
By default display property is block for div.Change it to inline to display in one line.
If you use float: left; in css, the problem will be solved. Because div element is a block level element.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have this blogspot blog: sourcewing.blogspot.com
Now if you go to drawings tab, you'll notice the electric bulb image is not aligned center of the post. What I want to say is that it is taking its original width and height. If the width would be 1200px, it would go out of the tbody (Please check the HTML of this image).
What I want is that it should shrink automatically (maintaining the proportions), according to the width of div class="post-body entry-content"... element (you'd find by inspect element). This should apply on the all images that have more width than this div.
Also, I would like to know why isn't it automatically shrinking, while the text is automatically aligned?
Remove the fixed height and width attributes from the img element.
You can then add a class eg .auto-contain or whatever with the following css:
.auto-contain {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
This will force the image to always have the same width as the container, but the height will grow in proportion.
So you are missing a few things.
height: auto;
max-width: 100%;
box-sizing: border-box;
This will achieve exactly what you are after.
Just to explain:
height: auto; - This will make sure your picture remains in proportion.
max-width: 100%; - Your image will behave responsively but wont break it's own natural sizing.
box-sizing: border-box; - Because you have padding you don't want to break the width this will keep padding but not break out of your container.
First remove the width and height attribute from your img tag.
To solve the problem :
img {
height: 90%;
width: 90%;
}
if you set height and width 100% normally your image would be as big as the parent. But in your case this does not work. 90% however looks better.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I haven't used float for the divs in CSS rather I have used position. I used relative to position all the divs but all of them gets jumbled up in other screen resolutions. What am I doing wrong please clarify since I am new to HTML. Thanks in advance.
You shouldn't really use the position property unless you want something specific out of it. Block and inline elements do most of the work when it comes to position. With that said we still need the position:property in many cases. The most used kind of positions are relative and absolute, and I can help you understand these.
position: absolute; allows you to assign a specific position example:
div {
position: absolute;
top: 50px;
left: 50px;
}
What the previous code does is place the selected div element 50 pixels away from the top border and 50 pixels away from the left border. The tricky part is that you need to specify what your borders are going to be.
For this we use position: relative;. Example:
.parent {
position: relative;
}
.child{
position: absolute;
top: 50px;
left: 50px;
}
What the previous code does is set the parent element to be the reference to it's child element. So the position: absolute;child will be positioned 50 pixels away from it's .parenttop and left border. Hope this helps.
Here's w3schools article about positioning : W3 Positioning
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I saw somewhere that it wasn't recommended to use height and use padding instead, why that? The height and the padding produces the same results - at least in my trials -... is there a reason for me be to be using padding only instead of height?
To answer your question - of course you can use height in responsive websites without a problem.
I think where you may have read about using padding in place of height is for keeping the aspect ratio of an element the same since percentage based padding is relative to the width of the element and percentage based height is relative to it's container.
A common use case for this is embedding a YouTube video in a responsive wesbite.
HTML
<div class="video-container">
<iframe src="//www.youtube.com/embed/k_d5jWvBirU?wmode=opaque&rel=0&showinfo=0&modestbranding=1&controls=2&autohide=1" frameborder="0" allowfullscreen=""></iframe>
</div>
CSS
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
background: #000;
}
.video-container iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
Fiddle here: http://jsfiddle.net/84wm08k7/
As you can see the height of the video-container is set to 0 and the padding-bottom is set to 56.25%. This restricts this element to being a 16:9 aspect ratio for video and is responsive.
well to start if you use padding then the page will stretch itself to fit the screen leaving the given amount of border (padding). If you use a specified height (in pixels per say) the page will always be the same height regardless the resolution of the screen. If you are using height as a percentage or some analogous value, than it shouldn't matter other than that the amount of space (padding) will vary depending on the screen.
It depends on what you're doing. For a lot of my work, I'll set a min-height or max-height that way the element grows or shrinks depending on the content.
Padding would work as well, if for instance you have an element with text that would be centered vertically, you can use padding to control height as well. It's all up to the site design, and what you're trying to accomplish.
this is a code example you can check w3schools.com for further information, I've chosen the example in which you can manipulate the dom
function myFunction() {
document.getElementById("myBtn").style.height = "50px";
}
<!DOCTYPE html>
<html>
<body>
<button type="button" id="myBtn" onclick="myFunction()">Change the height of this button</button>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have the folowing html-murkup structure:
<div class="wrapper">
<div class="my_line"></div>
</div>
Wrapper has width 1200 px. I want to make div.my_line to has width 100% of screen when user change scale of screen. How can I do this? I try to use background-repeat, I am new in frontend, can somebody help me?
So just guessing here but you want the my_line div to stretch 100% of the width once the screen is at 1200px?
If so you'd use this:
/* Check the screen width, in this case looking for the screen to reach 1200px or below. Then extend the my_line div to 100% */
#media (max-width: 1200px) {
.wrapper .my_line {
width: 100%;
}
}
So, if you want the my_line to be the same size as the wrapper and shrink when you resize the window use this approach :
.wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.wrapper .my_line {
width: 100%;
}
That way wrapper will have 100% of the browser but be limited and always centered. While the my_line will inherit the full width.
So, when you resize, to less than 1200px the wrapper and my_line will shrink with the window.
EDIT:
If you want the my_line to be bigger than the wrapper, why placing it inside the wrapper ? Just place it above or underneath of the wrapper.
The solution you got works anyways if you change the HTML. The problem with your solution is that if you later add position: relative to the wrapper it won't work. While if you change the HTML structure so that my_line is direct children of the body it will still work.
Thanks guys, I do this and it help:
.my_line {
position:absolute;
width: 100%;
left:0;
right:0;
height: 3px;
}