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
Related
Update: Thanks all for your kind comments. I have taken up isherwood's advice to use flexbox and pytth's comments on naming of id/ class.
Now, I have this but the height of the two flexboxes are not the same. What am I doing wrong? I have tried setting min-height, and height: 100% to no avail.
Here's my updated HTML:
<section class="featured movie">
<!--featured movie-->
<div class="container">
<div class="content-1">
<!--image-->
<img src="images/edge of tomorrow.jpg.png" alt="Edge of Tomorrow" href="featured.html" class="featured-banner">
</div>
<!--headings-->
<div class="content-2">
<h1>Edge of Tomorrow</h1>
<h2>Rating: 4/5</h2>
<h3>It leaves you on the edge, wishing for a tomorrow.</h3>
</div>
</div>
</section>
And my updated CSS:
#media(min-width:768px) {
.container {
display: flex; /*puts the 2 contents side by side*/
margin: auto;
justify-content: center;
width: 70%;
min-height: 100%;
padding-top: 20px;
}
}
.content-1 {
flex: 1 ;
min-height: 0%;
height: 100%;
}
.content-2 {
background-color: grey;
flex: 1;
}
Would appreciate any advice/ suggestions. Thank you in advance :)
What isherwood has said but with some context. Try stay away from id's unless you want to specifically target something. Otherwise Class is better. In terms of rows and columns, unless you are using a front end framework like bootstrap, your better off just using your own stuff.
Have a look into display flex, its quite an indepth thing and works for most situations
<section class="featured-movie">
<!--featured movie-->
<!--image-->
<div class="featured-image">
<img src="https://via.placeholder.com/150x150" alt="Edge of Tomorrow" href="featured.html" class="featured-banner">
</div>
<!--headings-->
<div class="featured-content">
<h1>Edge of Tomorrow</h1>
<h2>Rating: 4/5</h2>
<h3>It leaves you on the edge, wishing for a tomorrow.</h3>
</div>
</section>
/*==FEATURED SECTION===*/
/*Align featured movie & texts to middle of page*/
.featured-movie {
width: 70%; /*so that there is 15% space left and right*/
margin-left: 15%;
margin-right: 15%;
padding-top: 20px;
display: flex;
}
/*====FEATURED IMAGE===*/
.featured-banner {
min-width: 320px;
width: 70%; /*banner to occupy 70% of space within the 70%*/
float: left;
}
/*featured section for text*/
.featured-content {
display: inline-block;
text-align: center;
width: 30%;
background-color: grey;
}
Update to all:
After researching more I have used a grid CSS layout which works perfectly. Thanks all for your kind comments and guidance! :-)
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/
I need to overlap logo and a cart button on my navigation bar ie.:
[Collapsed navi] [logo] [cart]
However, I cannot seem to get the below code to make them float left, center and right. Hope someone can help. Thank you!
CSS:
#navi_container {
width: 100%;
}
#navi_left {
float: left;
width: 100%;
}
#navi_right {
float: right;
width: 100%;
align-content: right;
}
#navi_center {
float: left;
width: 100%;
align-content: center;
}
HTML:
<div id='navi_container'>
<div id='navi_left'>
<div class='menumobile'/>
</div>
<div id='navi_center'>
<center><a href='url'><img height='auto' src='logoimg.jpg' width='150px'/></a></center>
</div>
<div id='navi_right'>
<span style="float: right;"<a href='url'><img height='auto' src='cartimg.jpg' width='150px'/></a>
</div>
</div>
Instead of float you can use flex here:
CSS:
#navi_container {
width: 100%;
display: flex;
justify-content: space-between;
}
You can remove width and float properties from #navi_left, #navi_right and #navi_center
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.
My top div acts as a logo and has a title. I would like a logout button to be on the right-hand side of the div and text above also right-aligned.
I left out the button/ link as i did not know where to place it.
I'm looking for something like this:
My goal is a logo and, on the right, the logout button with text on the top.
How can I achieve that?
.logo {
overflow: hidden;
text-align: left;
position: relative;
margin: 0px 100px;
height: 60px;
background-color: pink;
color: blue;
font-family: Arial;
}
<div class="logo">
<h1>LOGO</h1>
</div>
You can use flexbox here. Try this out:
.wrap {
display: flex;
justify-content: space-between;
}
.logo {
overflow: hidden;
text-align: left;
position: relative;
height: 60px;
background-color: white;
color: #1F6C8B;
font-family: Arial;
}
<div class='wrap'>
<div class="logo">
<h1>LOGO</h1>
</div>
<div>
<p>abcdefg</p>
<button>Click It</button>
</div>
</div>
jsfiddle: https://jsfiddle.net/dm198kpx/2/
There are various ways to achieve what you want. I believe the simplest one is with Flexbox:
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
<div class="flex justify-between">
LOGO
<div>
BLABLABLA<br>
<button>Logout</button>
</div>
</div>
Here, flex is a display property that is usually used in container-type elements (like div). It helps to align content. It allows the use of various other properties like justify-content, align-items* and others. In this case, we are using only justify-content, which align direct children on the main axis (the horizontal one by default), with the space-between value, which distributes the content as far as possible - and since we have only two direct children of <div class="flex justify-between">, LOGO and <div>, put the first on the far left and the last on the far right.
*: you can learn more about Flexbox properties and use cases in this game: https://flexboxfroggy.com/
I've added the button to what I think is your header? I used the native header tag, but if it isn't your header, you can always replace this with a div with a unique id of your choice. I included position:fixed; in the css, otherwise the button wouldn't stay to the right (you could use float, but it can be problematic imho). Height/colour etc are adjustable of course.
Hope this helps
h1.logo {
display: inline-block;
position: relative;
text-align: left;
margin: 10px 100px;
height: 60px;
background-color: white;
color: #1F6C8B;
font-family: Arial;
}
#logout {
background-color: lightblue;
height: 30px;
text-align: right;
right: 40px;
position: fixed;
}
.logo,
#logout {
vertical-align: top;
}
<header>
<h1 class="logo">LOGO</h1>
<button id="logout">Logout</button>
</header>
EDIT: Just saw the text-above edit to your question. See fiddle