I was trying to do an udacity's assignment, i want to move the paragraph to the right of the image please help.
I actually tried putting div tags for each and every block ie heading and image and a paragraph
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<div class="heading">
<h1>MY FAVOURITE APP</h1>
</div>
<div class="data">
<div class="data">
<img src="C:\Users\sreem\Desktop\pix.jpeg" alt="">
<div>
<p class="para">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
**style.css**
css code for html file
img {
height: 250px;
width: 250px;
margin-top: 20px;
margin-left: 100px;
}
.heading {
height: 70px;
width: 80%;
margin-top: 50px;
color:white;
background-color:#5AB9BA;
padding-top: 70px;
letter-spacing: 5px;
margin-left: 100px;
}
.para{
height: 250px;
width: 250px;
margin-left: 400px;
}
Float the image to the left.
img {
height: 250px;
width: 250px;
margin-top: 20px;
margin-left: 100px;
float: left; /** float the image to the left **/
}
.heading {
height: 70px;
width: 80%;
margin-top: 50px;
color: white;
background-color: #5AB9BA;
padding-top: 70px;
letter-spacing: 5px;
margin-left: 100px;
}
.para {
height: 250px;
width: 250px;
margin-left: 400px;
}
<div>
<div class="heading">
<h1>MY FAVOURITE APP</h1>
</div>
<div class="data">
<img src="http://lorempixel.com/250/250/" alt="">
<p class="para">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
You can use float property. I gave float: left; to img tag.
img {
height: 250px;
width: 250px;
margin-top: 20px;
margin-left: 100px;
float: left;
}
.heading {
height: 70px;
width: 80%;
margin-top: 50px;
color:white;
background-color:#5AB9BA;
padding-top: 70px;
letter-spacing: 5px;
margin-left: 100px;
}
.para{
height: 250px;
width: 250px;
margin-left: 400px;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<div class="heading">
<h1>MY FAVOURITE APP</h1>
</div>
<div class="data">
<div class="data">
<img src="https://www.w3schools.com/css/img_fjords.jpg" alt="">
<div>
<p class="para">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Force image float to left:
display:inline-block;
float:left;
img {
height: 250px;
width: 250px;
margin-top: 20px;
margin-left: 100px;
display:inline-block;
float:left;
}
Related
I'm just starting to learn HTML and CSS and I ran into this mystery.
In my HTML file, the flow indicates that my <img> should be rendered on the webpage BELOW the <p> element of class "lorem".
However, you can see in the screenshot below that it appears somewhere in the middle of the screen.
This is a screenshot of how my problem looks in the browser.
All the code I've written is purely to test out things for myself, so I realize it can look ridiculous for anyone else. :)
Thank you!
.rectangle {
display: inline-block;
width: 200px;
height: 300px;
border: 1px solid seagreen;
padding: 10px;
margin: 20px;
}
img {
width: 300px;
background-color: blueviolet;
padding: 50px;
}
.lorem{
border: 1px solid red;
background-color: aqua;
padding: 40px;
margin: 0;
}
<p>Even though I am writing all of this on a single line, <h1>this bit here should appear on a separate line.</h1>Did it work?</p>
<div class="rectangle">
<p>I’m a rectangle!</p>
</div>
<div class="rectangle">
<p>So am I!</p>
</div>
<div class="rectangle">
<p>Me three!</p>
</div>
<img src="./background.jpg" alt="background">
<p class="lorem">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
First of all, you shouldn't put a title in a paragraph. If you want it big and bold, you can stlye it with css. I know its just practice, but semantics are quite important.
Is this what you wanted?
body{
font-family:'Work Sans',sans-serif;
line-height:1.5;
text-align:center;
}
.rectangle {
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid seagreen;
text-align:center;
padding: 1rem;
margin: 1rem;
}
.rectangle:first-child{
margin-left:0;
}
.wrap {
display: flex;
}
img {
background-color: lightcoral;
padding: 2.5rem;
margin-bottom: 0.5rem;
}
.lorem {
border: 1px solid pink;
background-color: lightgreen;
padding: 40px;
margin: 0;
}
<body>
<p>Even though I am writing all of this on a single line,
<h1>this bit here should appear on a separate line.</h1>Did it work?</p>
<div class="wrap">
<div class="rectangle">
<p>I’m a rectangle!</p>
</div>
<div class="rectangle">
<p>So am I!</p>
</div>
<div class="rectangle">
<p>Me three!</p>
</div>
</div>
<img src="./background.jpg" alt="background">
<p class="lorem">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
From the below code, the navlinks and logo are centered within the header but I'm having issues with the flexbox container to be centered on top of the grid. As you can see, the cat image is slightly off-centered to the right.
I've tried hard coding margins but plan to make this page responsive so it wasn't efficient solution. I've also tried creating a container for my navigation links but it made no changes with centering with margin: 0 auto.
header
{
display:flex;
justify-content: center;
align-items: center;
flex-direction: row;
position: sticky;
width:100%;
top:0;
}
.nav
{
position: -webkit-sticky;
position: sticky;
top: 0%;
}
.navLink
{
padding: 0 25px;
font-weight: 300;
text-transform: uppercase;
cursor: pointer;
}
https://jsfiddle.net/2pdxqr05/3/
I expect the logo to be dead center between the red and blue column.
Your nav items were all different widths, Enjoy
This ensures the width of the nav items to be equal:
header > div{
width:120px;
}
View updated code here
header
{
display:flex;
justify-content: center;
align-items: center;
flex-direction: row;
position: sticky;
width:100%;
top:0;
}
body
{
max-width: 100%;
overflow-x: hidden;
height: 1000px
padding: 0px;
margin: 0px;
}
.nav
{
position: -webkit-sticky;
position: sticky;
top: 0%;
}
.navLink
{
padding: 0 25px;
font-weight: 300;
text-transform: uppercase;
cursor: pointer;
text-align:center;
}
header > div{
width:120px;
}
#logo
{
margin-top: 4px;
margin-bottom: 4px;
//width: 4%;
//height: 4%;
cursor: pointer;
}
.container
{
display: grid;
grid-template-columns: [content] 1fr [images] 1fr
}
.content
{
grid-column: content;
background-color: red;
}
.images
{
grid-column: images;
text-align: center;
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class = "nav">
<header>
<div class = "navLink" id="story-scroll">Our Story</div>
<div class = "navLink" id="menu-scroll">Menu</div>
<div class = "navLink">
<img src = "https://placekitten.com/50/50" id="logo" lt="logo">
</div>
<div class = "navLink" id="press-scroll">Press</div>
<div class = "navLink" id="contact-scroll">Contact</div>
</header>
</div>
<div class = "container">
<div class = "content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class = "images">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</body>
</html>
You can adjust your code like below. The trick is to handle free space distribution to be sure the image will stay in the center:
header {
display: flex;
/*justify-content: center; no more needed*/
align-items: center;
flex-direction: row;
}
header > div:nth-child(2),
header > div:nth-child(4){
flex:1;
}
/*make the last and first one take more space*/
header > div:first-child,
header > div:last-child{
flex:5;
}
/*align first and second to right*/
header > div:first-child,
header > div:nth-child(2) {
text-align:right;
}
body {
max-width: 100%;
overflow-x: hidden;
height: 1000px padding: 0px;
margin: 0px;
}
.nav {
position: sticky;
top: 0;
}
.navLink {
padding: 0 25px;
font-weight: 300;
text-transform: uppercase;
cursor: pointer;
}
#logo {
margin-top: 4px;
margin-bottom: 4px;
width: 4%;
height: 4%;
cursor: pointer;
}
.container {
display: grid;
grid-template-columns: [content] 1fr [images] 1fr
}
.content {
grid-column: content;
background-color: red;
}
.images {
grid-column: images;
text-align: center;
background-color: blue;
}
<div class="nav">
<header>
<div class="navLink" id="story-scroll">Our Story</div>
<div class="navLink" id="menu-scroll">Menu</div>
<img src="https://placekitten.com/50/50" id="logo" lt="logo">
<div class="navLink" id="press-scroll">Press</div>
<div class="navLink" id="contact-scroll">Contact</div>
</header>
</div>
<div class="container">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="images">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
I have a fiddle,
https://jsfiddle.net/thakv1/9zf1tm7q/2/
HTML :-
<div class = "single-page">
<div class="navigation">
<div class ="circle">
1
</div>
</div>
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
CSS:-
.single-page{
display: flex;
flex-flow: row nowrap;
}
.content{
height: 400px;
flex:1;
background-color:white;
}
.navigation{
width : 52px;
}
.circle{
width: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
background-color: #295ED9;
color: white;
font-weight: 700;
cursor: pointer;
text-decoration: none;
margin: 20px 10px;
}
In this fiddle the height of navigation is 400px, i want height of navigation equal to height of circle div (around 30px something) not content div.How can we achieve this.
You should add align-self:flex-start to .navigation
.single-page{
display: flex;
flex-flow: row nowrap;
}
.content{
height: 400px;
flex:1;
background-color:red;
}
.navigation{
width : 52px;
background: red;
align-self:flex-start;
}
.circle{
width: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
background-color: #295ED9;
color: white;
font-weight: 700;
cursor: pointer;
text-decoration: none;
margin: 20px 10px;
}
<div class = "single-page">
<div class="navigation">
<div class ="circle">
1
</div>
</div>
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
I have 2 divs:
div.main-info {
background: yellow;
width: 50%;
float: left;
}
div.main-cta {
background: red;
width: 20px;
}
<div id="wrapper">
<div class="main-info">
<h1>Lorem Ipsum?</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="main-cta">
<div class="window-cta">
<p>Compare Now!</p>
</div>
</div>
</div>
but the div with class main-cta seems to be still at the 2nd line? Why is that? I thought that when you float a div, it will pop out of the doc's flow and the next element will occupy the first row where the floated element was and get hidden by it?
I'm kinda confused.
Thanks!
Try this
<style>
div.main-info {
background: yellow;
width: 50%;
float: left;
}
div.main-cta {
background: red none repeat scroll 0 0;
float: left;
width: auto;
}
</style>
I think it will help for you..
div.main-info {
background: yellow;
width: 50%;
float: left;
}
div.main-cta {
background: red;
background: red none repeat scroll 0 0;
float:right;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="wrapper">
<div class="main-info">
<h1>Lorem Ipsum?</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div class="main-cta">
<div class="window-cta">
<p>Compare Now!</p>
</div>
</div>
</div>
</div>
Just add float:left to div.main-cta .
div.main-info {
background: yellow;
width: 50%;
float: left;
}
div.main-cta {
background: red;
width: 20px;
float: left; /*new line*/
}
Demo fiddle: https://jsfiddle.net/nikhilvkd/f6stjstk/
Or you dont like to add float:left , you can use display:inline-block;
div.main-info {
background: yellow;
width: 50%;
display: inline-block; /*new line*/
}
div.main-cta {
background: red;
width: 20px;
display: inline-block; /*new line*/
vertical-align: top;
}
Demo fiddle: https://jsfiddle.net/nikhilvkd/f6stjstk/2/
In order to pop the div out of the flow, you need to make the position of the div absolute.
float asks the div to move toward the left, in the same row.
For some reason my divs aren't gaining height when I apply .section {height: 100%;}, but when I give it a height attribute in pixels it works. The idea is that I want the divs to use the browsers window, so the div would cover entire section of the browser no matter what the resolution of the display.
http://jsfiddle.net/marrto/npe2y/
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 10 </title>
<!-- Slidebars CSS -->
<link href="css/mystyle.css" rel="stylesheet" text="text/css" >
</head>
<body>
<!-- MAIN AREA -->
<!-- WRAPPER - WRAPPS NAVIGATION AND LOGO-->
<div id="wrapper">
<div id="header">
<div class="logo">
<img src="logo.png" alt="Logo">
</div>
<div class="navBar">
<ul id="nav">
<li>Homepage</li>
<li>About</li>
<li>Photos</li>
<li>Contact</li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
</div>
<!-- WRAPPER END -->
<div id="topbar" class="section">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div id="about" class="section">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div id="photos" class="section">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div id="contact" class="section">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<!-- WRAPPER - WRAPPS NAVIGATION AND LOGO-->
<div id="container">
<div id="footer">
<div class="legal">
text
</div>
<div class="site">
Text
</div>
<div style="clear: both;"> </div>
</div>
</div>
<!-- WRAPPER END -->
</body>
</html>
body { /* general font size, family and color */
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
color: #343434;
margin: 0;
padding: 0;
}
.sb-toggle-left {
display: none;
}
#wrapper { /* wrapps logo and the navigation links */
background-color: #ffffff;
height: 60px;
width: 100%;
top: 0;
left: 0px;
position: relative;
z-index: 99;
-moz-box-shadow: 0 0 3px 0 #ccc;
-webkit-box-shadow: 0 0 3px 0 #ccc;
box-shadow: 0 0 3px 0 #ccc;
}
.section:nth-child(odd) {
background-color: #b1d994;
}
.section:nth-child(even) {
background-color: #5bc473;
}
.section {
height: 100%;
padding: 5%;
}
.content {
width: 60%;
margin-right: auto;
margin-left: auto;
text-align: justify;
}
/*
#topbar {
background-image: url('banner.jpg');
}
*/
#header {
width: 60%;
position:relative;
margin-left: auto;
margin-right: auto;
min-width: 600px;
}
.logo {
float: left;
padding-top: .9em;
}
.navBar {
float: right;
padding-top: 1.3em;
}
.navBar ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.navBar li {
float:left;
}
.navBar a:link, .navBar a:visited {
display: block;
color:#4a4949;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-size: 0.8em;
}
.navBar a:hover {
color:#ababab;
}
#container { /* wrapps logo and the navigation links */
background-color: #ffffff;
height: 60px;
width: 100%;
top: 0;
left: 0px;
-moz-box-shadow: 0 0 3px 0 #ccc;
-webkit-box-shadow: 0 0 3px 0 #ccc;
box-shadow: 0 0 3px 0 #ccc;
}
#footer {
width: 60%;
position:relative;
margin-left: auto;
margin-right: auto;
}
.legal {
float: left;
padding-top: 1.3em;
}
.site {
float: right;
padding-top: 1.3em;
}
If the parent element doesn't have height set explicitly, % height won't work in it's children...
in your case the parent of divs having class section is <body>, which doesn't have a height set.
HERE a wirking fiddle.
I just changed 100% with 100vh
.section {
height: 100vh;
padding: 5%;
}
You need to set following css:
html,body{
height:100%;}
you can do this using js
element = document.getElementsByClassName("section");
for(element in ele){
ele.style.width=screen.width+"px";
}
if width is gonna fixed the height won't change
For me it worked by setting position: absolute in the very top level container div.