I have a footer with four icons and they lie on top of each other. My aim is to arrange the four icons side by side. I tried different things but nothing worked. Either I have the icons all at one point in the middle, the left side at the bottom or vertical in a row. Would ne nice to get some help for that!:)
<style>
.i{
margin: 50px;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
float: left;
}
</style>
<body>
<p class="container" div align="center" class = "i">
<img src="static/website/media/profile.jpg" class="rounded-circle" alt="My image" width="254" height="186"></p>
<p class = "i" div align="center">I am a 20 years old computer science student from Berlin. Let's go for a walk!</p>
<div class = "footer">
<p><img src="static/website/media/iconfinder_4691356_discord_icon.svg" alt="discord"></p>
<p><img src="static/website/media/iconfinder_1964405_linkedin_logo_media_social_icon.svg" alt="discord"></p>
<p><img src="static/website/media/iconfinder_4202766_email_gmail_mail_icon.svg" alt="gmail"></p>
<p><img src="static/website/media/iconfinder_287723_goodreads_icon.svg" alt="goodreads"></p>
</div>
</body>
</html>
First of all, it doesn't make sense to use this if there will only be an image inside the "p" tag. I removed them.
We created a new element named ".footer--icons" in the footer and included all the images.
The next is easy, we set the Element to "display:flex" and align it all side by side.
See: excellent article about flex-box
Also with "align-items" we have centered them all on the "Y" axis and with "justify-content" we have centered them all on the "X" axis relative to their parent.
.i {
margin: 50px;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
float: left;
}
.footer--icons {
display: flex;
align-items: flex-center;
justify-content: center;
}
.footer--icons > img {
margin: 5px;
}
<p class="container" div align="center" class="i">
<img src="static/website/media/profile.jpg" class="rounded-circle" alt="My image" width="254" height="186"></p>
<p class="i" div align="center">I am a 20 years old computer science student from Berlin. Let's go for a walk!</p>
<div class="footer">
<div class="footer--icons">
<img src="static/website/media/iconfinder_4691356_discord_icon.svg" alt="discord">
<img src="static/website/media/iconfinder_1964405_linkedin_logo_media_social_icon.svg" alt="discord">
<img src="static/website/media/iconfinder_4202766_email_gmail_mail_icon.svg" alt="gmail">
<img src="static/website/media/iconfinder_287723_goodreads_icon.svg" alt="goodreads">
</div>
</div>
Just use CSS flex-blox and .footer as your container.
.footer {
display: flex;
justify-content: center/flex-start;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
float: left;
}
With justify-content you can control your flex-items either on center or left side of the parent container which is what you want to happen.
Add the following to you css footer class:
display:flex;
flex-direction:row;
Remove the paragraph tags:
<div class = "footer">
<img src="static/website/media/iconfinder_4691356_discord_icon.svg" alt="discord">
<img src="static/website/media/iconfinder_1964405_linkedin_logo_media_social_icon.svg" alt="discord">
<img src="static/website/media/iconfinder_4202766_email_gmail_mail_icon.svg" alt="gmail">
<img src="static/website/media/iconfinder_287723_goodreads_icon.svg" alt="goodreads">
</div>
Then amend your .footer class to the following:
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
display: flex;
}
To center the images, add justify-content: center to the footer class.
To distribute them evenly, add justify-content: space-between.
For a complete guide to flexbox (display: flex), you can check this article out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I'm a complete novice here, I want to put the vault-tec image on the left side aligned with the navigation menu,
<body>
<div class="container">
<nav class="navbar">
<img src="/images/vault-tec.png" alt="vault-tec-logo" />
<div class="home">Home</div>
<div class="about">About</div>
<div class="services">Services</div>
</nav>
</div>
</body>
Here's the css input:
`
.container {
background-color: #35538b;
height: 300px;
}
.navbar {
gap: 50px;
display: flex;
float: right;
font-size: 30px;
font-family: monospace;
align-items: center;
color: #eac852;
}
.navbar img {
width: 300px;
height: 200px;
justify-content: flex-start;`
I tried with the flex properties display, align-item...it's not working, I want to know what exactly I'm doing wrong. I attached an image for reference.
Thanks
You can use align-self and margin-right to align the image to the top left side, your CSS code should look like this:
.navbar img {
width: 300px;
height: 200px;
align-self: flex-start;
margin-right: auto;
}
Is that how you want it to be? Did I get right?
body{
margin:0;
}
.container {
background-color: #35538b;
height: 300px;
}
.navbar {
gap: 50px;
display: flex;
float: right;
font-size: 30px;
font-family: monospace;
align-items: center;
color: #eac852;
}
.navbar .logo {
padding:15px;
width: 300px;
height: 200px;
display:flex;
align-items:center;
}
.logo img{
width:100%;
height:100%;
}
<div class="container">
<nav class="navbar">
<div class="logo">
<img src="https://images.pexels.com/photos/9604815/pexels-photo-9604815.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="vault-tec-logo" />
</div>
<div class="home">Home</div>
<div class="about">About</div>
<div class="services">Services</div>
</nav>
</div>
By putting the features of the Flexbox, it is distributed to all its children in the same way. Therefore, if you want to change the position properties of any of them without changing the status of the rest, you can use self-align or make position property for your navbar equal to "relative" and the img position property equal to "absolute" and you can manipulate its position by top bottom left right properities. Or, I suggest that it is better for you to make the icons in a new container and control this container in its place or the location of its children icons in it easier, and you will also be able to control the image more smoothly
I'm trying to put a logo on the top left corner, and text parallel to the logo (top center).
The text should have the same distance from both sides of the page regardless of the logo.
I tried adding around "display: table; display: table-cell; position: relative; position: absolute;"
But the best I can get is text being centered but not on the same line as the logo but a bit low.
html:
<header class="header">
<div class="logo">
<img src="logo.gif" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</header>
css:
.header {
border: 2px solid black;
width: 100%;
}
.logo img {
width: 80px;
}
.header-text {
text-align: center;
}
example image:
You could use position: absolute; and i've added the position to the title and gave it a wrapper together with the image so you can move them together.
I've also added some margin to show you the title stays centered
.header {
border: 2px solid black;
width: 100%;
position: relative;
}
.wrapper {
width: 100%;
position: relative;
margin: 30px 0;
}
.logo {
display: flex;
}
.logo img {
width: 80px;
}
.header-text {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
<header class="header">
<div class="wrapper">
<div class="logo">
<img src="https://via.placeholder.com/150" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</div>
</header>
use flexbox!
.header {
border: 2px solid black;
width: 100%;
display:flex;
justify-content:space-between;
align-items:center;
}
img ,#spacer{
width: 80px;
}
.header-text {
text-align: center;
}
<header class="header">
<img src="https://via.placeholder.com/150" alt="a logo">
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
<div id='spacer'></div>
</header>
There a numerous ways to go about this; I'll describe one method here.
Basically, you need to get the logo out of the layout flow so that the text can be centered without being affected by it. the easiest way to do this is by adding position: absolute to the logo.
Thus, a complete example might look like:
.header {
/* Allows the logo to be positioned relative to the header */
position: relative;
/* Centers the text — can be done other ways too */
text-align: center;
}
.header .logo {
position: absolute;
left: 0;
}
A JSFiddle Example: https://jsfiddle.net/g01z27tv/.
Keeping Proper Alignment
If you want to keep the logo and the text properly (vertically) aligned, flexbox will be your friend here.
First, ensure that the header is taller than the logo will be; otherwise the logo will be cut off.
Next, create a wrapper <div> for your logo. In your case:
<header class="header">
<div class="logo-wrapper">
<div class="logo">
<img src="logo.gif" alt="a logo">
</div>
</div>
<!-- ... -->
</header>
Now, add some styles for .logo-wrapper. Namely:
cause it to expand to fill the height of the header,
make it a flex container,
make its items' vertically centered,
make it position: absolute, and
position it to the left of the header:
.logo-wrapper {
height: 100%;
display: flex;
align-items: center;
position: absolute;
left: 0;
}
Note that you should now remove position: absolute and left: 0 from .logo, since we are positioning the wrapper instead.
Lastly, in order to properly align the text, we'll use flexbox on .header:
.header {
display: flex;
justify-content: center; /* Use this instead of text-align: center */
align-items: center;
}
You'll note now that even when you make the logo taller—as long as the header is taller—everything stays aligned.
An Update JSFiddle Example: https://jsfiddle.net/oL5un8gb/.
Note: I created a separate wrapper <div> in this example; in your case you probably don't need to because you have a separate <div> and <img> already. You might be able to get it to work without an extra element.
.header {
border: 2px solid black;
width: 100%;
}
.logo {
float: left;
}
.header-text {
text-align: center;
position: absolute;
width:100%;
margin: auto;
}
.header::after {
content: "";
clear: both;
display: table;
}
<header class="header">
<div class="logo">
<img src="https://via.placeholder.com/75" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</header>
As suggested in comments I have edited the text to be centred to 100% width.
Im building my first responsive type website, So far doing the index page. Im having an issue when that i cannot align the footer divs together. i have three divs spread out and the last div on the right has social 4 icons. but im unable to get these to align with the other two divs texts. Ive tried a number of different things to fix it in the css and flex though id rather stick to css right now on this site.
Here is the site on test host to see the actual icons in the footer.
https://hireahottub2.netlify.com/
i feel the problem may lie in my code somewhere but i cannot see it for the life of me.
align-items: center
display:inline block is in the parent
<html>
<footer>
<div id="footerwrap">
<div class="fdiv1">
<h5>Hire A Hot Tub, Goole, DN14 6QT</h5>
</div>
<div class="fdiv2">
<h5>Web Design by DM DESIGN</h5>
</div>
<div class="fdiv3">
<a href="https://www.facebook.com/hireahottub2000" target="_blank"
><img src="./img/fb2.png"
/></a>
<a href="https://www.instagram.com/hireahottub2000" target="_blank"
><img src="./img/insta2.png"
/></a>
<a href="https://twitter.com/HireahottubUK" target="_blank"
><img src="./img/twitter2.png"
/></a>
<a href="mailto:hireahottub2000#hotmail.com" target="_blank"
><img src="./img/email2.png"
/></a>
</div>
</div>
</footer>
</html>
/* FOOTER CSS */
footer{
padding: 5px;
margin-top:;
color:#ffffff;
background-color: #354243;
text-align: center;
font: bold;
border-top: #e8491d 3px solid;
}
#footerwrap{
width: 80%;
text-align: center;
}
.fdiv1{
float: center;
display: inline-block;
width: 20%;
}
.fdiv2{
float: left;
width: 20%;
}
.fdiv3{
float: right;
width: 20%;
min-width: 75px;
}
.fdiv3 img{
width: 30px;
}
For your issue specifically, I'm seeing that your divs fdiv1 and fdiv2 only align in the center because of browser-set margins on the heading tags within them. Furthermore, they have zero concept of the height of any other div, because they are floated (removed from document flow). To fix this, you will need to set them all an equal height. Then vertical-align will actually work.
h5 {
margin: 0;
}
.fdiv1, .fdiv2, .fdiv3 {
height: 50px;
}
a {
display: inline-block;
vertical-align: middle;
}
It may be beneficial for you to learn Flexbox. It makes these types of tasks easy, but it's not supported in older browsers.
My recommendations are:
Get rid of all of the float stuff.
Get rid of the width: 20% stuff on the footer items. (Maybe bring it back after you see the results of the rest of this.)
Get rid of the single inner <div> that's a child to the <footer> element (I guess you said you already did that somewhere else, just not on the current demo website).
Use the flex justify-content (space-between) and align-items (center) CSS attributes on your <footer> to spread your footer items out in the proper fashion.
Follow up...
I tried the above, ended up keeping the width: 20%, and got this as a result:
I guess you might want to switch the order of those first two footer items around, but that's not something I could do easily just playing with CSS attributes in my web console.
Use a css grid layout to achieve this.
footer {
padding: 5px;
color: #ffffff;
background-color: #354243;
text-align: center;
border-top: #e8491d 3px solid;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
footer div img {
width: 30px;
}
<footer>
<div class="fdiv1">
<h5>Hire A Hot Tub, Goole, DN14 6QT</h5>
</div>
<div class="fdiv2">
<h5>Web Design by DM DESIGN</h5>
</div>
<div class="fdiv3">
<img src="./img/fb2.png" />
<img src="./img/insta2.png" />
<img src="./img/twitter2.png" />
<img src="./img/email2.png" />
</div>
</footer>
Hello this is a solution if you want to stick with only CSS ( without flex ) :
footer{
padding: 5px;
position: relative;
margin-top:;
color:#ffffff;
background-color: #354243;
text-align: center;
font: bold;
border-top: #e8491d 3px solid;
}
.fdiv3{
width: 20%;
min-width: 75px;
position: absolute;
top: 50%;
right: 0;
transform: translate(0,-50%);
}
.fdiv2{
width: 20%;
width: 20%;
min-width: 75px;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
Well im trying to achieve a basic effect of 6 images placed next to each other ( 2 rows of 3) and want to add some text over them. But the problem is (I think) in the float = left "command" in the CSS, which indeed puts my images nicely next to each other... BUT throws all of my text in the one place instead of nicely with the appropriate image. I've been sitting and thinking on this for solid few days and have no idea what to do. Hope you can help.
CSS
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
}
.image {
float: left;
clear: both;
padding: 2px;
position: relative;
}
HTML
<body>
<div class="row" style="width:1600px">
<div class="container">
<img class="image" src="Life.jpg" alt="Life" style="width:520px;height:360px;" />
<p class="text">Life</p>
</div>
<div class="container">
<img class="image" src="Trees are Cool.jpg" alt="Trees Are Cool" style="width:520px;height:360px;" />
<p class="text">Trees are Cool</p>
</div>
<div class="container">
<img class="image" src="Radical dinosaurs.jpg" alt="Radical Dino" style="width:520px;height:360px;" />
<p class="text">Radical Dinosaurs</p>
</div>
<div class="container">
<img class="image" src="Big Round Vuttons.jpg" alt="Big Round Buttons" style="width:520px;height:360px;"/>
<p class="text">Big Round Buttons</p>
</div>
<div class="container">
<img class="image" src="Run.jpg" alt="Run" style="width:520px;height:360px;"/>
<p class="text">Run</p>
</div>
<div class="container">
<img class="image" src="Thats crazy.jpg" alt="That's Crazy" style="width:520px;height:360px;"/>
<p class="text">That's Crazy</p>
</div>
</div>
</body>
Use following css, this will solve your problem
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
top: 0;
}
.container {
display: inline-block;
box-sizing: border-box;
padding: 2px;
position: relative;
}
the problem is that you are positioning your image to relative. but your .text is direct child of .container by default .text find it's parent to be position relative but .container has not apply css property position relative then it find .container parent to be position relative and so on, in the end html is position relative that's why all your code stack on the top of each other.
SEE DEMO
try this
.contailer{
position: relative;
}
Add position: relative to the .container class, so it will be the .text element context. The element is positioned in relation to the context.
The context is the last parent that has position: relative / absolute / fixed. Right now the context is probably some higher level container or even the body itself, so all .text items are concentrated there.
It has to do with the position of the elements like other have pointed out
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
top: 50px;
left: 50px;
}
.image {
padding: 2px;
position: relative;
}
.container {
float:left;
}
https://jsfiddle.net/xqf8kfd1/1/
Give 'container' class style as follows:
.container {
position: relative;
}
And remove float: left; from 'image' class
try removing the position:absolute and adding float:left to the css text class
.text {
float: left;
z-index: 100;
color: black;
width: 100%;
display: inline-block;
}
im putting images on the screen (just little circles) and every time I press a button 10 more pop up. This is what is happening:
It goes underneath the previous one.
This is what I want to happen:
my CSS thus far:
.numbers {
position: relative;
margin-top: 20px;
padding: 0;
}
.num p {
color: #877000;
position: absolute;
margin: 0 auto;
font-size: 16.5px;
margin-top: 5px;
margin-right: 6px;
margin-left: 6px;
float: left;
font: "SourceSansProBlack",Arial,sans-serif;
font-weight: bold;
}
.numbers num img {
position: relative;
}
.userNumbers {
position: relative;
}
the HTML:
<div class="userNumbers">
<div class="numbers">
<div class="num"> <p> 1 </p><img src="pic.png"></div>
<!--to 10-->
</div>
</div>
How, using CSS, can I change it to go next to each other? The images are inside a div with a class. :)
basically every time the div 'numbers' is called I want to add 32px the the left of it.. not go under it. Im calling it with JavaScript btw, but that is unrelated.
I'd put the 10 first images inside a div with a property:
display: inline-block;
Then just duplicate the div with the images and it should fine.
For example,
<div style="display: inline-block;">
<img id="img1" />
...
<img id="img10" />
</div>
<div style="display: inline-block;">
<img id="img11" />
...
<img id="img20" />
</div>
I would choose this kind of approach with display flex to dinamically add new columns. Remember that <p> height should be 1/10 of #imgContainer if you want to show 10 images per column. For instance, if you want to show 20 images per column, set parent height to 1000px or <p> height to 25px
#imgContainer {
max-height: 500px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
#imgContainer p {
position: relative;
margin: 0;
width: 50px;
height: 50px;
}
#imgContainer img {
width: 100%;
height: 100%;
}
#imgContainer span {
color: #877000;
line-height: 50px;
font-size: 16.5px;
font: "SourceSansProBlack",Arial,sans-serif;
font-weight: bold;
position: absolute;
text-align: center;
width: 100%;
left: 0;
}
<div id="imgContainer">
<p><img src="http://goo.gl/L72CdX"><span>1</span></p>
<p><img src="http://goo.gl/L72CdX"><span>2</span></p>
<p><img src="http://goo.gl/L72CdX"><span>3</span></p>
<p><img src="http://goo.gl/L72CdX"><span>4</span></p>
<p><img src="http://goo.gl/L72CdX"><span>5</span></p>
<p><img src="http://goo.gl/L72CdX"><span>6</span></p>
<p><img src="http://goo.gl/L72CdX"><span>7</span></p>
<p><img src="http://goo.gl/L72CdX"><span>8</span></p>
<p><img src="http://goo.gl/L72CdX"><span>9</span></p>
<p><img src="http://goo.gl/L72CdX"><span>10</span></p>
<p><img src="http://goo.gl/L72CdX"><span>11</span></p>
<p><img src="http://goo.gl/L72CdX"><span>12</span></p>
<p><img src="http://goo.gl/L72CdX"><span>13</span></p>
</div>