How do I put the image next to the h1 text? The image on the left and the text on the right. Thanks in advance!
img {
width: 150px;
height: 150px;
}
h1 {
padding: 25px;
border: 0px;
margin: 0px;
height: 30%;
width: 70%;
}
<header class="head">
<img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" class="pic">
<h1 class="home" id="home">Hi</h1>
It may be most efficient to use flexbox to resolve this layout issue. Adding
display: flex; to the parent element will create the row layout you're looking for and some additional CSS properties will center the children elements if desired. Check out the complete guide here to really control the position of every element if needed.
.head {
display: flex;
justify-content: center;
}
img {
width: 150px;
height: auto;
max-width: 100%;
}
h1 {
padding: 25px;
border: 0;
margin: 0;
align-self: center;
}
<header class="head">
<img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" class="pic">
<h1 class="home" id="home">Hi</h1>
</header>
Either add float: right to h1:
img {
width: 150px;
height: 150px;
}
h1 {
float: right;
padding: 25px;
border: 0px;
margin: 0px;
height: 30%;
width: 70%;
}
<header class="head">
<img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" class="pic">
<h1 class="home" id="home">Hi</h1>
Or display: inline-block to h1:
img {
width: 150px;
height: 150px;
}
h1 {
display: inline-block;
padding: 25px;
border: 0px;
margin: 0px;
height: 30%;
width: 70%;
}
<header class="head">
<img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" class="pic">
<h1 class="home" id="home">Hi</h1>
Keep in mind that the image has a fixed width and the text has a relative width, so it will automatically flow over to the next line if the total width allowance is exceeded. To prevent this, simply set width: fit content on the h1.
Related
I'm quite new to HTML and CSS. I have a list that serves as a navigation bar for a website, which is inside the div "inner header." I was able to align the "nav" container (in teal) to the right edge of the "inner header" container, but I am struggling to do the same for the items within nav (in red).
Containers Appearance
Essentially, I would like the text to align with the teal on the right side, but I noticed no matter what I do, the red will not expand. I've tried changing width to 100%, but that causes each word to separate into three rows (possible due to the display type?).
If I add width: 98px, it gets closer to my desired outcome, but it doesn't perfectly align with the teal.
Close to desired outcome
Any advice is appreciated!
.inner_header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
background-color: #8ecae6;
display: flex;
justify-content: center;
align-items: center;
}
.nav {
float: right;
height: 100%;
width: 70%;
background-color: teal;
text-align: right;
}
.nav a {
height: 100%;
display: table;
table-layout: fixed;
float: left;
padding: 0px 20px;
background-color: red;
overflow: hidden;
width: 98px;
}
.nav a:last-child {
padding-right: 0px;
}
.nav a li {
display: table-cell;
vertical-align: middle;
height: 100%;
font-family: 'Montserrat';
font-weight: 300;
}
<div class="header">
<div class="inner_header">
<div class="logo_container">
<img src=".png">
<img src=".jpeg">
</div>
<p>Text <br> Text</p>
<ul class="nav">
<a>
<li>Home</li>
</a>
<a>
<li>Data</li>
</a>
<a>
<li>Tool</li>
</a>
</ul>
</div>
</div>
I still don't understand what you wanted, I'm just taking a guess here and tried to get the result closer to your screenshot and based on what you explained.
.inner_header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
background-color: #8ecae6;
display: flex;
justify-content: center;
align-items: center;
}
.nav {
float: right;
height: 100%;
width: 70%;
display: table;
background-color: teal;
text-align: right;
padding:0;
}
.nav a {
height: 100%;
display: table-cell;
padding: 0px 20px;
background-color: red;
overflow: hidden;
width: auto;
}
.nav a:last-child {
padding-right: 0px;
}
.nav a li {
display: table-cell;
vertical-align: middle;
height: 100%;
font-family: 'Montserrat';
font-weight: 300;
}
<div class="header">
<div class="inner_header">
<div class="logo_container">
<img src=".png">
<img src=".jpeg">
</div>
<p>Text <br> Text</p>
<ul class="nav">
<a>
<li>Home</li>
</a>
<a>
<li>Data</li>
</a>
<a>
<li>Tool</li>
</a>
</ul>
</div>
</div>
I have created a jsFiddle that shows the content.
.container {
height: 100%;
width: 100%;
margin: 0;
}
.body {
position: relative;
height: 100%;
width: 100%;
margin: 0 auto;
background-color: #F7F4F2;
text-align: center;
}
.form {
background-color: #fff;
padding: 50px 20px;
color: #333;
}
.footer {
margin-top: 26px;
font-size: 20px;
line-height: 26px;
}
.content {
padding: 5% 5%;
}
<div class="container">
<div class="body">
<div class="content">
<div class="form">
<h1>Content</h1>
</div>
<div class="footer">
This is a link
</div>
</div>
</div>
</div>
What I am failing to do is to have the container element to fill the available viewport and have the inner white div also stretch to the bottom with the padding respected.
I would also like to move the link to the bottom of the viewport.
Is this possible without JavaScript?
How about something like this using flexbox?
Put display: flex; on .content
Then use flex: 1; on the main child div and then height: 100vh;.
Now you don't need all that width and height 100% styles.
Also used box-sizing: border-box so the padding doesn't mess with the size of the containers.
* {
box-sizing: border-box;
}
.container {
margin: 0;
}
.body {
position: relative;
margin: 0 auto;
background-color: #F7F4F2;
text-align: center;
}
.content {
display: flex;
flex-direction: column;
height: 100vh;
padding: 5% 5%;
}
.form {
flex: 1;
background-color: #fff;
padding: 50px 20px;
color: #333;
}
.footer {
margin-top: 26px;
font-size: 20px;
line-height: 26px;
}
<div class="container">
<div class="body">
<div class="content">
<div class="form">
<h1>Content</h1>
</div>
<div class="footer">
This is a link
</div>
</div>
</div>
</div>
Use this CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
You need height: 100%; on every parent, all the way up to html & body. Without it, the height won't be dynamic aren't going to work.
JSfiddle
I'm trying to layout my first site and I'm stuck on positioning two divs in the same line. I have posted an image below showing the layout I am trying to achieve.
This is the code that i have for the 2 divs at the moment.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<ul class="social-icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitter.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address to go here</p>
</div>
</div>
I have been playing around with the CSS for a little while but just can't seem to get it right.
What I am looking to do is have all the above on one row, with the nav on the row underneath. Hope that makes sense. I am not using any framework like bootstrap so just using my own classes etc.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
color: #fff;
position: relative;
}
.logo {
width: 300px;
height: auto;
position: relative;
display: inline-block;
}
.logo img {
width: 100%;
height: auto;
}
.social {
display: inline-block;
float: right;
margin-right: 20%;
}
.social li {
display: inline-block;
}
.social li img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
You need to create more containers for your div's. Here is a very basic example to explain:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title></title>
</head>
<body>
<div class="container">
<div id="one"></div>
<div id="two">
<div id="three"></div>
<div id="four"></div>
</div>
</div>
</body>
</html>
The container class would take up the full width of the page and contain everything above your navbar. Div one would be your logo, than div two would be another container in which you could put more divs (three and four) that take up a percentage of the height of div two. Than inside of one of these divs, you would need put your social logos, and the address in the next one so it shows underneath. Here is the CSS:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
width: 100%;
}
#one {
height: 300px;
width: 300px;
background-color: green;
float: left;
margin-left: 25%;
}
#two {
height: 300px;
width: 500px;
float: left;
margin-left: 10%;
}
#three {
height: 30%;
width: 100%;
background-color: yellow;
}
#four {
height: 70%;
width: 100%;
background-color: blue;
}
This is just a very basic example, only to be used as a concept for your idea. Obviously remove the cheesy background colors and modify
Updated:
I created a div with the class .top that has a defined width, which allows you to center anything within it with margin:auto;. I created a section around your social icons and floated it right. This is a better example than my previous one because here the logo is centered.
I hope this helps: https://jsfiddle.net/0sptpx0j/3/
Hi guys thanks for all the advice, i decided after reading about absolute positioning to go down that route. this is what i have come up with.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<div class="social-list">
<ul class="icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitterSS.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address goes in here</p>
</div>
</div>
</div>
.logo {
width: 300px;
height: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.logo img{
width: 100%;
height: auto;
}
.social {
float: right;
width: 300px;
}
.social-list {
width: 100%;
}
.icons {
list-style: none;
padding: 0;
}
.icons li {
display: inline-block;
margin-right: 10px;
}
.icons img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
I'm experiencing an issue with my text where I don't see it at all, or it doesn't act as though I would think it would in a flexbox. I have three images in the flexbox right now, but I would like to place small 'captions' under each of them(not in the p element, the purple, but I would like to place it on the white, which is right under the purple box(the p element). I thought that by adding a child element, that element would at least line up vertically with the element above it but I guess I'm wrong. Can anyone help? Another piece of info is that really my images are 250 pixels, but I wanted to accommodate for a snippet so I made it 50 pixels, but that's probably irrelevant.
#footer {
display: flex;
height: 130px;
width: 100%;
background-color: #862d59;
clear: both;
}
#footer, #wrapper:after{
height: 130px;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 100px;
color: white;
border-right: solid white 1px;
}
.sub:last-child {
border: 0px;
}
html {
height: 100%;
}
body {
height: 100%;
margin:0;
font-family: courier;
font-size: 22px;
color: white;
}
#wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
min-height: 100%;
margin-top: -130px;
}
#inner {
position:absolute;
display:flex;
flex-wrap: wrap;
height: 600px;
top:50%;
align-items: center;
justify-content: space-between;
margin-top: -300px;
align-content: center;
width: 100%;
}
#inner p {
background-color: #26004d;
padding: 60px;
border-radius: 9px;
}
#inner img {
border-radius: 8px;
}
<div id="wrapper">
<div id="inner">
<p><img src="cat1.jpeg" alt="Picture of a cat" width="50" height="50"></p>
<p><img src="dog1.jpg" alt="Picture of a cat" width="50" height="50"></p>
<p><img src="park.jpg" alt="Picture of a cat" width="50" height="50"></p>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
</div>
Without additional info / image, here's the solution I was able to come up with. If you want to keep each image / caption grouped together, wrap them in another parent div. Then just add the caption below that, which is a block element and should flow below the image, as intended. Snippet below.
#footer {
display: flex;
height: 130px;
width: 100%;
background-color: #862d59;
clear: both;
}
#footer, #wrapper:after{
height: 130px;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 100px;
color: white;
border-right: solid white 1px;
}
.sub:last-child {
border: 0px;
}
html {
height: 100%;
}
body {
height: 100%;
margin:0;
font-family: courier;
font-size: 22px;
color: white;
}
#wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
min-height: 100%;
}
#inner {
position:absolute;
display:flex;
flex-wrap: wrap;
height: 600px;
top:50%;
align-items: center;
justify-content: space-between;
margin-top: -300px;
align-content: center;
width: 100%;
}
#inner p {
background-color: #26004d;
padding: 60px;
border-radius: 9px;
}
#inner p.caption {
color: #000;
background-color: transparent;
border-radius: 0;
}
#inner img {
display: block;
border-radius: 8px;
}
<div id="wrapper">
<div id="inner">
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
</div>
Let me know if you have any questions, or if this doesn't satisfy your description.
I have a div element (1200px width) that contains 3 inner divs.
First and last ones have static sizes (150px and 200px). I want the second one to be centered between logo and buttons. The problem is I don't know how to center this div...
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
width: auto;
float: left;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
One approach would be to set the display of the .text element to inline-block (and remove float: left), then add text-align: center to the parent element in order to center it. Since the other elements are floated, text-align won't affect them, and it will only center the inline .text element.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
text-align: center;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
display: inline-block;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Alternatively, you could also add margin: auto to the .text element and then set display: flex on the parent element. In doing so, the .text element will be centered horizontally with equal space on each side. In doing so, you don't need to float the elements either (since they are flexbox items).
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display: flex;
}
.logo {
width: 150px;
height: 50px;
background-color: darkred;
}
.text {
margin: auto;
}
.buttons {
width: 200px;
height: 70px;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
The problem is that you're floating the centre column. Don't.
The proper way to do what you're doing is to put the left and right columns first, then the centre column won't have to float and you can simply use text-align.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
text-align:center;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="buttons"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
</div>
Try
.text {
width: auto;
float: left;
text-align: center;
}
Trivial with Flexbox:
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display:flex;
justify-content:space-between;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
background:#c0ffee
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Here's an (I think) more appropriate solution which centers the entire div and not only the text, using width:calc(100% - 350px);
https://jsfiddle.net/tyvfcbre/1/
.text {
display:inline-block;
width:calc(100% - 350px);
background:lightgrey;
}
Background is there to demonstrate the div position.