So I am asking an question, regarding to this bootstrap template:
https://startbootstrap.com/previews/landing-page/
As you can see, there are 3 sections saying "Fully Responsive, Bootstrap4 Ready and Easy to use"
My question is just, how do I insert an image into these sections?
I probably have to insert the image into this line of code:
<div class="features-icons-icon d-flex">
I already tried it by simply replacing the svg class with
style="background-image: url('img/hello.jpg');"></div>
However, the image wont appear.
Just try use <img> instead of styling
Wherever you want to insert an image, use the image tag.
<img src="img/hello.jpg">
The three 'images', a computer screen, stack, and a checkmark, aren't actually images, they are icons, represented by the i tag.
To style in the similar way as the icons (height, width) you will have to adjust the css to the way you see fit.
<img src="img/hello.jpg" style="height: 100px; width: 100px">
There's nothing wrong with your code, apparently, but your question is quite generic. So here are a few steps to consider:
1. Make sure you are using the right path to your image.
As stupid this tip may sound, there are some things to observe regarding paths in HTML.
Check your browser dev tools with inspect element in order to see if that image has been correctly loaded.
For better reference, check: https://www.w3schools.com/html/html_filepaths.asp
2. Set a height and width for your div.
Divs are block elements. That means that usually they will assume the size of elements inside it. If there is nothing inside that Div element, the block element width and height will be 0. So long you don't intend to insert anything inside, you should add the properties of width and height to your div as well, in order to ensure the element itself
doesn't depend on other elements to have height or width.
Inside your css file, make sure to have something like:
.features-icons-icon{
background-image: url('img/hello.jpg');
height: 50px;
width: 100px;
}
For better reference at block elements, please check: https://www.w3schools.com/html/html_blocks.asp
3. Make sure that, if you are using responsive width and height, the element that nests the div has width and height.
As the div element is nested inside another element, the element that nests that empty div, which uses relative css units, should have length and width on its own.
For better reference at relative units, please check:
enter link description here
I might have missed something, but those tips should suffice. My personal hunch is that you should check step 2, that you might have overlooked.
Related
I ran into this issue while implementing a sticky footer solution. I have the footer working well, but my body element which encompasses everything within the tag just will not auto-extend beyond a random point further down that can only be reached by scrolling down (it's a lengthy page). My intention is for the body container (does that sound morbid or what?) to auto extend past all the div elements it contains. Isn't that what it's supposed to be doing? Right now there are still div elements sitting further down from where it ends, and the footer is sitting in the middle of my page right below it. If I can't achieve this behavior, I'll have to set the body to a fixed position in css, which I don't want to do.
Using the following CSS styling doesn't work, probably because my content extends beyond a page.
html, body {min-height: 100%; height: 100%;}
Can someone articulate what the most likely issues could be? Also, feel free to make any constructive comments on my code. This is my first web project.
Here's a link to my HTML code on CodePaste: HTML Code
And here's a link to my CSS code: CSS Code
Lastly, a link to a screenshot of my webpage showing the issue. Screenshot
The green bar is the footer, and the red border is the body element styled in css so it can be viewed. You'll see it ends right after the picture.
I'm pretty sure your main problem is setting the height of the body tag. Try not giving it a height (no max-height or height tags) or giving it height: auto to make it expand as its contents.
It could also be that you are setting child elements to positon: absolute which means that the parent will collapse to the size of whatever non-absolute elements are inside it.
Also, why the <p1> tags? They should be just <p>.
Code criticism:
It was extremely difficult to figure out what the problem was and I'm not sure that I gave the correct solution because of the way you showed your code. In future, try to give your code as a JSFiddle or a Codepen.
Also, consider using a CSS framework which will reduce the amount of CSS code you write a lot. I would suggest Bootstrap or Materialize but Bootstrap is more widely used.
Don't forget to follow CSS guidelines which will make your code more readable.
You could stretch the element to the full height of the window using vh.
.container{
height: 100vh;
}
You could then position your footer to the bottom using absolute position.
footer{
position: absolute;
bottom: 0;
}
I've used this in the past for full page landing pages that aren't meant to scroll.
I don't exactly know what the question is asking, but I experimented a bit and figured that if you remove the 1 from the <p1> so you would have a normal <p> tag, it moves the text up completely. I have a very rough JS Fiddle.
Thanks to all who contributed. Based on suggestions from Sankarsh and Ori, I was able to solve the problem. Once I changed my div to just as they suggested, I noticed it began functioning as I intended and forcing the parent element down beneath it. Unfortunately, that only solved the problem for that element alone. That led to me discovering the element had a default "static" position, while most of my other elements were set to "absolute". After changing the positions of the bulk of my content to "relative" or "static", everything is working as intended!
TLDR: If you want a child element to stay within the boundaries of its parent element, you need to set the child's position to "static" or "relative". You cannot use "absolute". This way, instead of overflowing beyond the border of the parent, the child will automatically extend the parent's border to its intended position.
When I switch off the blog part and sidebars in the terrifico theme in Wordpress I don't seem to be able to place a full width slider anywhere.
The theme looks like this in the form that I'm talking about: http://vpthemes.com/preview/Terrifico/page-full-width/
As you can see all the text is 'bounded' by a box (the black line). Is there any way in which I can make the metaslider go OUTSIDE of this box (i.e. to span the FULL width of the page)? I don't necessarily want to get rid of the box all toghether, the text can stay within it.
I have seen on the Metaslider website that some solutions for certain themes are given (here - but I am not sure how to adapt this to the theme that I'm using.
Thanks in advance!
Disclaimer
Before I suggest a solution, I'd like to point out that what you're asking is to break the Box flow model. I wouldn't recommend that because you're likely to run into inconsistent results across browsers.
That said, what you're trying to accomplish is possible. You could use javascript to do this and it may in fact be easier in some respects but here's a CSS solution.
1. Break out of the box model
float: left;
width: 200%;
margin-left: -50%;
text-align: center;
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
The width of the container is still relative to its parent so if you use % units to scale it up you would need to compensate for the responsiveness of the parent. Here, I'm just overcompensating.
To ensure that our element remains centered, we use a negative margin that is half of the overflow. That is, we want our box to be 100% wide, we have 100% overflow to ensure that so half the overflow is 50% (comment below if that doesn't make sense).
We use text-align to put the element we add in step 3 in the center of the viewport.
2. Allow Overflows
This is where you may well break themes. The parent elements will hide elements that float outside of them if they have the overflow: hidden property (note overflow can also be used to show scrollbars).
You will need to ensure that the parent elements have:
#post-body, .content-posts-wrap {
overflow: visible;
}
As far as I can see that affects #post-body and .content-posts-wrap
3. Add an element that will be the right size
Now we have an oversized container for our slider but we need it to be the width of the page. Inside the div or whatever it is you want to put your slider into you will need to nest another element that will be the correct width. That element will need the following css:
display: inline-block;
width: 100vw;
text-align: left;
You need display because we are back to the box model now and we want our block to obey the width rule we give to it.
We set our width using vw (viewport width) units to make this a bit easier (but they may not be supported on your target browser). There may be some ingenius way to do this without vw units but I would probably just use javascript if it's not an option for you.
Finally, since we set our text-align above, we need to reset it here.
4. Add a Clearing Div
Because you've broken out of the flow, elements aren't too sure what to do. You probably want to add another element after your parent slider that
specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. source
It can be as simple as a <div> element with:
clear: both
write your code something like this...
html like that...
<div id="parent_for_slider">
<div id="slider">
//place your slider code
</div>
</div>
Css for that
#parent_for_slider{
position:relative;
}
#slider{
position:absolute;
width:100% !important;
height:auto;
}
i am recommending to use ResponsiveSlides.js for full width slider with responsiveness
I have an html element that I want to be height 400px. I set that via style tag and css. The contents of this element only extend to 350px. I want the remainder 50px to be the margin-bottom of this element.
Now it is the classified as the actual element rather than margin. Is there an elegant css solution to this?
I know this can be done with javascript, but I'd prefer not to as the element has varying height and I would have to add more to the on-load and on-resize functions, making it more laggy to resize.
Thanks
First of all, it would be a good idea to post a live demo of your needs, either on CodePen or JSFiddle. This allows us to understand your problem, so that we can solve it.
On to your question, the remaining space should act as a margin without any additional code. Here's a demo: http://codepen.io/awesomeaniruddh/pen/bVwZdM
This is the HTML code in the codepen:
<section class="foo">
Foo
</section>
Bar
There is one line of text in the HTML element, whose height is set to 400px. There is another line of text after the element. The margin is automatically applied.
Hope I helped. If I misunderstood your question, please let me know!
See My Fiddle:
http://jsfiddle.net/5BEsZ/
I've discovered something very strange that I haven't seen documented anywhere else... Was wondering if you all had a solution.
You'll notice the negative margin hits a limit at around -212% for image elements. Is there a reason for this? Can you think of a work around?
Why I Need This (what I've tried):
I'm making a fluid layout and I want to display a rating system. I have a sprite sheet of stars (similar to the one in the fiddle) that I want to reuse at various sizes.
Because the size changes I can't use a background image. So I decided to use an image inside a container with a variable width and overflow:hidden. The sprite sheet adjusts to the width of the container and the container's viewable content is determined by a padding-top:20%. This is so it can be fluid with its width (since every star is a box, the total height is 20% the width).
Then I try and position the star image inside the container with margin-top. I tried using position:relative and a top:-X%, but because the container technically has no height this was causing issue on mobile phones (-100% of 0 is 0, etc).
So I assumed negative margin would work, but then discovered this strange issue!
NOTE: Because it affects only the last row I can make it work in my situation by using a padding-bottom instead of top (thereby bumping every star row up 1), but this isn't an adequate solution for me because it just ignores the problem. What if I wanted quarter stars?
I've updated your fiddle. img tags are "inline" elements by default, which impacts the way margin is calculated relative to the containing element. By forcing the image element to be rendered like a block (display: block), you're able to achieve the results you were expecting. A div element is a block by default.
As a side note, you'll want to avoid using inline styles (a different sort of "inline"!) wherever possible. Typically your styles would be included in a stylesheet instead of in a style attribute directly on the element. I included the fix (display: block) in the attribute to match the code style of your html.
I don't know why, but if you float the image the problem goes away.
<img src="http://www.whitepages.com/common/images/sprite_stars.gif?1343868502" id="stars" style="width:100%; float: left;" />
So, the answer to fix your problem: http://jsfiddle.net/5BEsZ/2/
If anyone could explain why this happens?
I am trying to get the image caption which is a dd-element to break so it is as wide as it's dt-element. I don't want to use a width and using display: inline and float: left do not work. I have code and example here: http://jsfiddle.net/PnyHs/11/. I'm using Firefox 9 to test.
The only solution I can come up with right now is to use javascript to measure the dt-element and set that width to the dd-element.
Thanks in advance for any help and suggestions.
If you want to keep the structure of your HTML and not use max-width, I dare to say this is impossible, and here is why:
You are expecting the img object to constrain the dd element. However both elements are siblings and can only be constrained in terms of width by their parent (alternatively an element can be stretched out by its children). Hence, the dd will expand as much as it wants because the parent element is not limiting it.
Of course this could be solved by setting the width of the parent element, however you've mentioned that you don't want to do that since the pictures will have different sizes.
So unfortunately unless you change your HTML structure this won't be possible without JavaScript (unless I'm missing something obvious here).
Using dl markup for an image and a caption is artificial and doesn’t make styling any easier. The only approach to the problem (making the caption as wide as the image) that does not need scripting or setting image width explicitly seems to be to use a single-cell table with a caption element, see fiddle and my page on image captions. Example:
<table class="photo">
<caption align="bottom">Image Caption with a very very very very very long
text</caption>
<tr><td>
<img title="" alt="" src="http://dummyimage.com/120x100/82d91f/fff">
</td></tr>
</table>
Can you add a width to your dl element? The same width as your image like this http://jsfiddle.net/PnyHs/12/