I have a div container which contains 3 different divs. I want to place inner divs in a row.
Here is html code:
This is what it should look like.
.partners {
display: inline-block;
display: flex;
flex-direction: row;
width: 100%
}
<div class="partners">
<div>
<img src="media/handshake.png" alt="handshake" class="handshake">
<h1>10+</h1>
<p>partners investing their time and effort to support our mission</p>
</div>
<div>
<img src="media/social-care.png" alt="social care" class="social-care">
<h1>150+</h1>
<p>members working hard to be able to support our mission</p>
</div>
<div>
<img src="media/respect.png" alt="respect" class="respect">
<h1>243+</h1>
<p>donors supporting our community and making impossible possible</p>
</div>
</div>
But the last inner div goes beyond the screen and when I inspect the page it shows that "partners" div contains only first and second inner divs.
How can I solve this?
This is what it looks like when I inspect.The third one is not included in "partners" div
This often happen if you forget to close a tag in html.
Please check the rest of your code to be sure you didn't forget to close any tag. You also can use online unclosed html tags checker like this one :
https://www.aliciaramirez.com/closing-tags-checker/
Did you tried to use something like metroui or even bootstrap ?
I.E.:
With metroUI you can use the grid system to do exactly what you want, see :
https://metroui.org.ua/grid.html#_media_columns
Here is a link explaining how to include metroui in your project :
https://metroui.org.ua/intro.html#_quick_start
This will fix your problem.
.partners{
justify-content:space-around;
display: flex;
width: 100%;
}
.partners div{
width:30%;
}
ypu can set up a max width to the children divs, using like .partners div { width: 30% } and to add some space between them, you can also use .partners { justify-content: space-between; } tip: display inline-block is canceled when you put another display: flex above, try use only flex
Related
I have two h1 side by side and I want a space between the two textes.I tried it with just adding space with the spacebar, but it doesn´t work.
header div {
display: flex;
}
<header>
<div>
<h1 id="heading1">Hello my name is </h1>
<h1 id="heading2"> Paul</h1>
</div>
</header>
Try using
It's a dedicated HTML character attributed to "space".
Example:
<div>
<h1>Hello my name is</h1>
<h1>Paul</h1>
</div>
You can also put it inside of HTML tags, like the <h1>, but I personally prefer it outside of it.
I also personally prefer using in general since it's a more explicit way to symbolize "space", whereas implicit spaces (" ") sometimes get "lost in translation", so to speak..
If you use flex you need to read the docshttps://developer.mozilla.org/fr/docs/Web/CSS/flex
and understand how the layout works. In your case, the div take 100% of the width and each h1 is align left by default. You can set
justify-content: space-between; on the div by example, for more see this
trying adding a margin to one of your h1. And please don't use two h1 on a single page.
Remember h1 is a block level element. It will always be in one line. To bring them in same line, change display to inline-block like so.
h1 {
display: inline-block;
margin: 0;
}
<div>
<h1>Hello my name is</h1> 
<h1>Paul</h1>
</div>
There are multiple ways to do it. One of them is:
#header {
display: flex;
gap: 1vw;
}
<div id="header">
<h1 id="heading1">Hello my name is </h1>
<h1 id="heading2">Paul</h1>
</div>
If you want to display two h1 elements in the same line, but color them different or anything like that, just use one h1 element and a span element. Per defintion, every html-page should just have one h1 element, because it should be used as a page-title.
Also, if you dont need the id's for js or something else, just select them via css.
Here's a full example:
#heading span:nth-child(1) {
color: green;
}
#heading span:nth-child(2) {
color: red;
}
<header>
<div>
<h1 id="heading">
<span id="first_heading">Hello my name is </span>
<span id="second_heading">Paul</span>
</h1>
</div>
</header>
I am really new to HTML and CSS (SCSS in this case), and am having issues getting an Image to display properly on a localhost page I have been experimenting on. I will post my HTML lines, as well as my SCSS lines below. Maybe you guys can tell me what I am doing wrong so I can move ahead.
I have tried linking just the project folder directory path, all the way up to the WHOLE path through my computer to the image. I have quadruple checked the names on the files and the image as well. I believe it is probably just a Syntax error.
<!--HTML LINES:-->
<div id="Center.Logo">
<img src="sberube-portfolio-site-f29e4e843dc2\src\app\home\home\home.component.images\center-logo.png"
alt="Center Circle" style=" width: 250px; height: 250px;"> <!--Desired image -->
</div>
/* SCSS LINES: */
#Center.Logo {
img{
margin: auto;
align-content: center;
}
}
I expect the image to display in the CENTER of the page, instead, it simply gives me the ALT tag next to a little picture icon on the bottom left of the page.
I think your selector should be #Center.Logo in your code it's look like #center.Logo
And if you want looks like it centered try this
And if you can't getting images try working around with your project structure.
<img src="../assets/img/centered-logo.jpg"> etc not whole path or something.
The first thing I noticed is you use a dot inside the name of your id.
This is a problem, since in css the dot is part of a class selector.
The Rule #CSS.Logo {...} applies to an element that has both, an id of 'CSS' and a class of 'Logo'. Something like this:
<div id="CSS" class="Logo">
...
</div>
There is no element like that in your code, so the css rules are not applied.
Second, your original css code is not suitable to center an image within another container.
// This is your original code as you posted it:
img {
margin: auto;
align-content: center;
}
The rule align-content is only applicable in a flex box container. You could however use margins to center the image horizontally like this:
img {
display: block;
margin: 0 auto;
}
What you probably want instead is this:
<div id="center-logo">
<img src="your-image.png" alt="Center Circle">
</div>
body {
margin: 0; // making sure you have the whole page at your disposal
}
#center-logo {
height: 100vh; // using the full height of the viewport
// this is where the actual centering happens:
display: flex; // this is necessary for the following 3 rules (flex box)
flex-flow: row nowrap; // in this case this could also be column nowrap
align-items: center; // vertical center
justify-content: center; // horizontal center
img {
// set a width and height so the image does not stretch and to avoid repositioning
// the image (or other content if there is any) as soon as the image has been loaded
width: 250px;
height: 250px;
}
}
Notice I have used small letters for the id name, because it usually helps avoiding issues caused by misspelling the names afterwards.
I'm assuming it is a regular html and css.
You can compile with node.
npm init
npm install node-sass
Add this to your package.json (in scripts)
"scss": "node-sass --watch scss -o css"
Create two Folders.
CSS and SCSS.
Inside each one, the file style. (With the right termination)
css> style.css eg
and finally
npm run scss
Everything you type in scss, it converts to css.
I'm using WordPress Twenty Sixteen theme. I've created a page and now I have inserted 4 images in it. When I open the page, the images are displayed in vertical order, i.e., 1 above other. They aren't assigned display: block property either. I tried display: inline and display: inline-block properties, but they aren't working. These are clearly shown in inspect element, but they don't affect the elements. (Also, float: left works perfectly, but I want display: inline to work).
What is the problem and how can I solve it?
Here's the text written in the page:
<div id="gal-1">
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/surface.jpg" alt="" />
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/lumia.jpg" alt="" />
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/windows.jpg" alt="" />
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/edge.jpg" alt="" />
</div>
It will work if you use this:
div#gal-1>img {
display:inline;
}
This will match div gal-1 child when it is an img.
Use !important if necessary to override any display: block;
please check your code i think there is break line tag which is causing issue if you remove it will display items inline block;
another solution
instead of using display:inline-block you can do like
#gal-1
{
display:flex;
display: -ms-flexbox;
display: -webkit-flex;
}
#gal-1 img
{
display:inline-flex;
}
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
I've seen other answers, but none of them seem to work for me.
What I want: when I type the URL .../page.html#two to go to #two, but with a 50px offset from the top of the page.
note: ive added the big space and <a>'s because you can't type the url in jsfiddle. I want it to work with urls, as well as with links.
<body>
<section id="one">First section</section>
<section id="two">Second section</section>
<section id="three">Third section</section>
<div id="big_space"></div>
one
two
three
</body>
body
{
height: 2000px;
}
#big_space
{
height: 1000px;
}
section
{
height: 100px;
background-color: lightblue;
margin-bottom: 5px;
}
Here's a link to the JSfiddle: http://jsfiddle.net/hAmCL/
I have tried using the section:before but it seems to give the wrong result (i've commented it out in jsfiddle)
This is impossible to do with pure CSS as you want it, though there are some semi-work arounds
This approach only works in certain instances, but the trick is to use margin-top:-50px; padding-top:50px;. This makes the element appear in the same position except for the background will be 50px higher and pushed up 50px. Here's a demo of that approach
The second approach which I'd recommend more is one involving an added inner element. I decided to format each one like so <section id="one"><div class="reference" id="refOne"></div>First section</section>. Then you can point to the refence in the link, i.e. one. Then all it takes it the following simple CSS
section {
... Your other lines ...
position:relative;
}
.reference {
position:absolute;
top:-50px;
}
Demo. This approach leaves all of the elements the way they were before in performance and looks but requires slight additional HTML markup
It'd be nice to be able to reference element's pseuo-elements like you tried to do but I understand how it could be non-syntactically correct to do so