I have a problem with an image and 'float: right;'. It moves everything on the image.
I really need help. I am just a beginner. Any help will be appreciated. Please help me.
My HTML code:
<section id="header">
<div class="container">
<img scr="./img/logo.png" class="logo">
<div class="header-text">
<h1>Choose the cheapest teachers</h1>
<span class="square"></span>
<p>Here you can find the best people<br>Start working for us right now</p>
<button class="common-btn">Read more</button>
</div>
</div>
My CSS code:
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font: Nunito;
}
#header {
height: 100vh;
background-image: url(img/image3.png);
background-position: center;
background-size: cover;
width: 80vh;
height: 80vh;
padding:35px;
float: right;
}
}
.conatiner {
margin-right: 100px;
margin-left: 100px;
}
.logo {
margin-top: 30px;
width: 100px;
}
.header-text{
max-width: 350px;
margin-top: 140px;
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font: Nunito;
}
#header {
height: 100vh;
background-image: url(img/image3.png);
background-position: center;
background-size: cover;
width: 80%;
height: 80vh;
padding:35px;
}
img.logo{
float: right!important;
}
.container {
margin:0;
width:100%;
}
.logo {
margin-top: 30px;
width: 100px;
}
.header-text{
max-width: 350px;
margin-top: 140px;
}
<section id="header">
<div class="container">
<img src="https://placekitten.com/200/200" class="logo">
<div class="header-text">
<h1>Choose the cheapest teachers</h1>
<span class="square"></span>
<p>Here you can find the best people<br>Start working for us right now</p>
<button class="common-btn">Read more</button>
</div>
</div>
</section>
Modify your css file to match the following
.logo {
margin-top: 30px;
width: 100px;
height: 100px; /* Add a fixed height on image */
float: right; /* then you can now float right */
}
Related
I have this flip box which looks like this
When I hover on it, it would turn around and would look like this.
I want to know, how do I move the text to the right only, I tried putting text-align: right; on my css but it didn't work. Am I doing it wrong?
Here's my CSS and HTML:
.box9 {
background-color: #4C586F;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 45px;
}
.box10 {
background-image: url("../img/commended/erwin.png");
background-size: 50%;
background-repeat: no-repeat;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 45px;
}
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box9">
<p style="font-size:180%; color: white">Kudos!</p>
</div>
</div>
<div class="back">
<div class="box10">
<p style="font-size:180%; color: black">sdasdsadas</p>
</div>
</div>
</div>
</div>
I would do it like this, setting text-align: right in the back view and to center in the front view, vertical centering of the p tag and also changing some other settings (no padding [therefore changed width and height settings] and some other details):
.box9 {
background-color: #4C586F;
width: 340px;
height: 240px;
margin: 0 auto;
text-align: center;
}
.box10 {
background-image: url(http://placehold.it/150x250/);
background-size: auto 100%;
background-repeat: no-repeat;
width: 340px;
height: 240px;
margin: 0 auto;
text-align: right;
}
.box9 p,
.box10 p {
margin: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.box10 p {
padding-right: 20px;
}
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box9">
<p style="font-size:180%; color: white">Kudos!</p>
</div>
</div>
<div class="back">
<div class="box10">
<p style="font-size:180%; color: black">sdasdsadas</p>
</div>
</div>
</div>
</div>
Try to access acetheinterview.co on your mobile phone and go to page 2. You will see that the part of the screen you see when you land on the page has a background color but when you start to scroll it becomes white and you cannot see the last part of my content.
Any ideas how to fix?
.page {
display:none;
padding-left: 20px;
padding-right: 20px;
padding-top: 0px;
padding-bottom: 0px;
}
* {
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
margin: 0;
font-family: "Helvetica Neue" !important;
}
html {
margin: 0;
}
.jumbotron {
height:100%;
background: url('hero-bg-v1.jpg');
text-align: center;
margin: 0 !important;
}
h1 {
color: #FFFFFF !important;
font-size: 45px !important;
padding-top: 10%;
font-weight: 500;
line-height: 50px;
letter-spacing: 0.8px;
}
h2 {
color: #FFFFFF !important;
font-size: 20px !important;
font-weight: 400;
letter-spacing: 0.8px;
padding-bottom: 20px;
}
#page1 {
width: 100%;
height: 100%;
background-color: #7DBB91;
}
#page2 {
width: 100%;
height: 100%;
background-color: #8BCBCA;
}
#page3 {
width: 100%;
height: 100%;
background-color: #C384C5;
}
#page4 {
width: 100%;
height: 100%;
background-color: #7C8DF5;
}
#page5 {
width: 100%;
height: 100%;
background-color: #E96C6C;
text-align: center;
}
<div class="container">
<div class="row">
<h1 class="advice">ADVICE #1</h1>
</div>
<div class="row">
<div class="col-sm-5">
<p class="quote">Always, always research the company you are interviewing with. What is their core product?
What other opportunities are they pursuing? What are the challenges they are facing?
</p>
<br>
<br>
<button type="button" class="btn-md sales-cta" id="previousbuttonpage1">Previous</button>
<button type="button" class="btn-md sales-cta" id="nextbuttonpage1">Next</button>
</div>
<div class="col-sm-7 text-center hidden-xs">
<%= image_tag("quote.png", width: "250", height: "170") %>
<h2 class="author">Girl</h2>
<h3 class="job-title">Product Manager</h3>
<h4 class="company">Google</h4>
</div>
</div>
</div>
<div class="col-xs-12 hidden-xs">
<div class="author-picture" id="joe">
<%= image_tag("joe-zadeh.png") %>
</div>
</div>
</div>
As I guess this is the problem:
body { height: 100vh;}
100vh limits the heigh to the viewport height. Change this to height:100% or min-height:100vh; as Paulie_D suggested
I'm new at the Bootstrap. Before I was writing a grid by myself, but now, I thougt, that I should learn new thing.
I'm making a basic site with background image in one of the containers. I don't know why, I have an extra padding added. I was trying with background-size: contain and cover, but it is not the effect that I want.
And I need that padding-bottom to stretch the container. The mathematical operation is the height of the image split with with and multiply with percetage. In my own grid it was working like a fairy tale.
Now I'm missing something. Any ideas?
This is jsfiddle: https://jsfiddle.net/LukMona/qwqck9bp/2/
CSS:
.bg-img {
width: 100%;
background-image: url("https://github.com/LukMona/Doctors_Search_Basic/blob/master/images/header_background.jpg?raw=true");
background-repeat: no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
padding-bottom: (1210/2808)*100%;
}
.main-top-header {
position: absolute;
width: 90%;
margin-top: 2%;
margin-left: 5%;
margin-right: 5%;
}
.main-top-header-left {
float: left;
position: relative;
width: 25%;
margin: 0;
}
.logo {
margin: 0;
}
h1 {
font-size: 2.5rem;
margin: 0;
}
.main-top-header-right {
position: relative;
float: right;
width: 75%;
}
ul {
text-align: right;
}
li {
display: inline-block;
margin-left: 5%;
font-size: 2rem;
}
a:link {
color: inherit;
text-decoration: none;
}
a:hover {
color: blue;
}
.main-search {
background-color: grey;
width: 80%;
margin-left: 10%;
margin-right: 10%;
margin: 0 auto;
padding-top: 2%;
padding-bottom: 5%;
border-radius: 3%;
position: relative;
;
top: 10rem;
}
.searching {
width: 50%;
margin: 0 auto;
}
.find {
width: 80%;
background-color: grey;
}
span:first-child {
padding: 2%;
margin-bottom: 2%;
}
.search {
float: left;
}
input {
height: 3rem;
width: 75%;
padding-left: 2%;
}
button {
width: 20%;
height: 3rem;
background-color: blue;
color: white;
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
}
nav {
background-color: grey;
height: 200px;
}
HTML:
<header class="container-fluid bg-img">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12 col-lg-12 main-header">
<!-- TOP HEADER -->
<div class="main-top-header">
<div class="main-top-header-left">
<div class="logo">
<h1>
Logo
</h1>
</div>
</div>
<div class="main-top-header-right">
<div class="menu">
<ul>
<li>one
</li>
<li>two
</li>
<li>three
</li>
<li>four
</li>
</ul>
</div>
</div>
</div>
<!-- END OF TOP HEADER -->
<div class="main-search">
<div class="searching">
<span>type something</span>
<br>
<input class="search" type="text" name="search" placeholder="typing">
<button class="search">
<span>find</span>
</button>
</div>
</div>
</div>
</div>
</header>
<nav class="row">
<div>
<div class="col-md-12 col-xs-12 col-sm-12 col-lg-12">
</div>
</div>
</nav>
Remove .main-top-header { position: absolute; } and .main-top-header-left { position: relative; } that will work
I am trying to make a grid of pictures with padding in between inside the main_block div. I cant get the images to aline next to eachother and then break it with a becouse they go inline. inline block does not work. I tried making a new div for these images but i cant resize the pictures nor give them padding. I tried to make the pictures resizable but without results. iut is as if something is overriding the size of the pictures. The pictures stack upon eachother and im trying to maaake a grid.
Thanks in advance for any help!
This would be the optimal solution.
Here is the fiddle
https://jsfiddle.net/q2cr9ttL/1/
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height:100px;
}
</style>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<body>
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png >
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
</body>
You could use the flex display property.
You will need to include some prefixes for cross browser compatibility.
* {
box-sizing: border-box;
}
.main_block {
display: flex;
flex-wrap: wrap;
}
.grid_block {
width: 33%;
padding: 1.4em
}
.grid_block img {
max-width: 100%
}
/* ORIGINAL STYLES */
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height: 100px;
}
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg >
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
I got problem with centering the div #offer within the section .tight. I don't want to use position: absolute; because of possibility of correct displaying site in 1024px width screens.
Here's the HTML:
<section class="main">
<section class="tight">
<div id="offers">
<article class="offer">
<div id="offer_stats"></div>
text
</article>
<article class="offer">
<div id="offer_comp"></div>
text
</article>
<article class="offer last">
<div id="offer_time"></div>
text
</article>
</div>
</section>
</section>
And the CSS:
section.main {
min-width: 880px;
max-width: 1200px;
margin: 0 auto;
}
section.tight {
width: 100%;
margin: 0 auto;
float: left;
}
#offers {
float: left;
padding-bottom: 100px;
text-align: center;
}
article.offer {
float: left;
min-height: 178px;
width: 260px;
color: #59535e;
padding-right: 50px;
}
article.offer.last {
padding-right: 0;
}
article.offer div {
height: 178px;
}
#offer_stats {
background: url("../images/offer_stats.png") no-repeat;
}
#offer_comp {
background: url("../images/offer_comp.png") no-repeat;
}
#offer_time {
background: url("../images/offer_time.png") no-repeat;
}
The printscreen:
Any suggestions?
section.main {
width: 880px;
max-width: 1200px;
margin: 0 auto;
}
First, i suggest you to remove float: left; from #offers
#offers {
padding-bottom: 100px;
text-align: center;
}
Second, i suggest you to use display: inline-block; instead of float: left; in article.offer
article.offer {
display: inline-block;
min-height: 178px;
width: 260px;
color: #59535e;
padding-right: 50px;
}
See this jsfiddle