I want to crate a search bar similar to that of https://www.zomato.com/ Exactly the same layout.
I am able create a floating search box on top of my background image. Not sure how to join various input fields and button side by side. This is the css I have as of now.
.search {
background:rgba(0,0,0,0.6);
border: 2px solid #414141;
border-radius: 5px;
padding: 10px;
}
header {
text-align: center;
color: #fff;
background-attachment: scroll;
background-image: url(../img/header-bg.jpg);
background-position: center center;
background-repeat: none;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
header .intro-text {
padding-top: 100px;
padding-bottom: 50px;
}
header .intro-text .intro-lead-in {
margin-bottom: 25px;
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 22px;
font-style: italic;
line-height: 22px;
}
As for the HTML:
<body id="page-top" class="index">
<!-- I have a navbar here -->
<!-- Header -->
<header>
<div class="intro-text">
<div class="intro-lead-in">Welcome To Our Studio!</div>
<div class="intro-heading">It's Nice To Meet You</div>
</div>
</header>
</body>
this is a fiddle which containes the style of the bar. I think it may help you.Main interest css is:
.header-link {
float: left;
height: 60px;
margin: 0px 7px auto 0px;
}
.header-link a {
line-height: 62px;
color:#FFF;
}
.header-hiring-btn {
background-color: #CB202D;
padding: 7px 8px 6px;
border-radius: 3px;
text-align: center;
color: #FFF !important;
transition: all 0.15s ease-out 0s;
margin-right: 6px;
}
.header {
box-sizing: border-box;
height: 60px;
position: absolute;
width: 100%;
z-index: 7;
background: none repeat scroll 0% 0% rgba(45, 45, 45, 0.8) !important;
color:#FFF;
}
.wrapper {
padding-left: 10px;
padding-right: 10px;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
max-width: 1140px;
}
.col-s-16 {
width: 100%;
box-sizing: border-box;
}
.logo-header {
width: 134px;
}
.logo {
display: inline-block;
float: left;
text-align: center;
height:46px;
}
.logo img {
width: 130px;
margin-top: 15px;
margin-left: -4px;
vertical-align: middle;
border: 0px none;
}
.header-navigation {
float: right;
display: inline-block;
height: 60px;
}
.login-navigation {
float: left;
}
.header-link {
float: left;
height: 60px;
margin: 0px 7px auto 0px;
}
.header-link a {
line-height: 62px;
color:#FFF;
}
.header-hiring-btn {
background-color: #CB202D;
padding: 7px 8px 6px;
border-radius: 3px;
text-align: center;
color: #FFF !important;
transition: all 0.15s ease-out 0s;
margin-right: 6px;
}
<header class="header header--fixed " id="header">
<div class="wrapper">
<div class="">
<div class="col-s-16"> <a class="logo logo--header" href="https://www.zomato.com" title="">
<img src="https://bzmtcdn-a.akamaihd.net/images/logo/zlogo.png" alt="">
</a>
<section class="header-navigation" id="header-navigation">
<section class="login-navigation" id="login-navigation">
<div class="header-link"> <a class="header-hiring-btn" href="https://www.zomato.com/careers" target="_blank">We're Hiring!</a>
</div> <span class="header-link">
Log in with Facebook
</span>
<span class="header-link mr0">
Log in
</span>
</section>
</section>
<!-- end header-navigation -->
</div>
<!-- end col-s-16 -->
</div>
<!-- end row -->
</div>
<!-- end wrapping class -->
</header>
The code seems to be based on bootstrap.css rebuild. Hope it helps.
Related
I'm coding 3 boxes. There is pic and title at first column, then there is paragraph and at the bottom there is a link. So the boxes are not editable, just the content is. They should look the same no matter how long the title is. But the length of title changes size of pictures.
When the title needed more than one line, the pic shrank. So I added to my code a min-width. Now the ones previosly problematic are OK, but the third are wider than before, than the two other. Now the css code for pic looks like this. It is an icon with border (as you can see):
background-size: 40px 40px;
border: 2px solid $primary-green;
border-radius: 10px;
height: 56px;
margin-bottom: 10px;
min-width: 56px;
What should I add/change to make all 3 pics looks the same?
Structure:
<div class="box box--product">
<div class="box__content">
<div class="box__title d-flex">
<div class="box__icon" style="background-image: url(\''.($atts['icon'] ? wp_get_attachment_image_src($atts['icon'], 'full')[0] : '').'\');"></div>
<div class="box__icon box__icon--hover" style="background-image: url(\''.($atts['icon_hover'] ? wp_get_attachment_image_src($atts['icon_hover'], 'full')[0] : '').'\');"></div>
<h3 class="box__hdl">'.$atts['nadpis'].'</h3>
</div>
<div class="box__excerpt match-height">
<p>'.$content.'</p>
</div>
<div class="box__more">
<hr>
Viac informácií
</div>
</div>
</div>
Sass:
.box {
$this: &;
background: $gray-lighter;
border-bottom: 7px solid $primary-green;
color: $black;
cursor: pointer;
//margin-bottom: $grid-gutter-width;
&--not-hover {
cursor: default;
}
&__title {
align-items: center;
&--subprod {
margin-bottom: 16px;
//min-height: 75px;
}
}
&__more {
text-align: center;
}
&__icon {
background: {
position: center;
repeat: no-repeat;
size: auto 44px;
}
border: 1px solid $gray-dark;
border-radius: 5px;
height: 80px;
margin-bottom: 16px;
margin-right: 10px;
width: 80px;
&--big {
background-size: 65px auto;
border-width: 2px;
height: 112px;
margin-bottom: 40px;
margin-top: 20px;
width: 112px;
}
&--hover {
border-color: $white;
display: none;
}
}
&__excerpt {
font-size: 14px;
letter-spacing: .44px;
line-height: 21px;
margin-top: 10px;
}
&--product {
border-bottom-width: 7px;
#{$this}__hdl {
color: $primary-green;
font-size: 16px;
line-height: 20px;
margin-left: 10px;
text-transform: uppercase;
}
#{$this}__content {
padding: 15px 22px 5px;
}
#{$this}__icon {
background-size: 40px 40px;
border: 2px solid $primary-green;
border-radius: 10px;
height: 56px;
margin-bottom: 10px;
min-width: 56px;
&--hover {
border-color: $white;
}
}
#{$this}__excerpt {
// border-bottom: 1px solid $primary-green;
color: $gray-dark;
margin-bottom: 15px;
}
#{$this}__more {
.link-warning,
.link-more {
letter-spacing: .4px;
margin-bottom: 10px;
}
}
&:hover,
&:focus {
#{$this}__hdl {
color: $white;
}
#{$this}__excerpt {
border-bottom-color: $white;
}
#{$this}__more {
.link-warning {
&::before {
background-image: url('../images/icon-warning--white.svg');
}
}
}
}
}
Something like this ?
.card {
width: 200px;
height: 300px;
display: inline-block;
margin: 12px;
border: 1px solid black;
overflow: hidden;
display: flex;
flex-flow: column;
}
.card .title {
flex: 0 0 32px;
width: 100%;
line-height: 32px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card .link {
color: blue;
text-decoration: underline;
flex: 0 0 32px;
width: 100%;
line-height: 32px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card .image {
flex: 1 1 auto;
overflow: hidden;
}
.card .image img {
height: 100%;
width: 100%;
object-fit: cover;
}
<div class="card">
<div class="title">Some title</div>
<div class="image">
<img src="https://picsum.photos/200/300">
</div>
<div class="link">Some link</div>
</div>
<div class="card">
<div class="title">Some title that is way too long to fit in 200px</div>
<div class="image">
<img src="https://picsum.photos/1024/768">
</div>
<div class="link">Some link that is also way too long for this little box</div>
</div>
Well, it is not probably best practise. But I just add
max-width: 57px; (+1px)
and it works just fine.
I tried searching the web for various answers and tried everything that solved other people problem, but my CSS just doesn't want to cooperate.
Here you can find a JSFiddle where I recreated the issue: I would like the side navigation to be visible on the black sections too.
HTML
<div class="sidenav">
Section 1
Section 2
Section 3
</div>
<div class="content">
<div>
<p>Some text<p>
</div>
<div class="blk">
<p>Some text<p>
</div>
<div>
<p>Some text<p>
</div>
</div>
CSS
.sidenav {
width: auto;
position: fixed;
z-index: 1;
top: 150px;
padding: 8px 0;
}
.sidenav a {
clear: both;
float: left;
position: relative;
left: -20%;
padding: 10px;
margin-bottom: 15px;
transition: 0.3s;
text-decoration: none;
text-align: right;
font-size: 24px;
border-style: solid;
border-width: 2px;
border-color: #0D0D0D;
border-radius: 0 5px 5px 0;
color: #0D0D0D;
mix-blend-mode: difference;
}
.blk {
background-color: #0d0d0d;
color: #ffffff;
}
did you want something like this?
html {
scroll-behavior: smooth;
background: #fff;
}
body {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
background-color: #ffffff;
color: #0d0d0d;
}
/**********************************************/
.section {
width: 100vw;
max-width: 100%;
background-color: #ffffff;
text-align: center;
margin: 0;
padding: 15vh 0;
position: relative;
}
.blk {
background-color: #0d0d0d;
color: #ffffff;
}
/**********************************************/
.sidenav {
width: auto;
position: fixed;
z-index: 1;
top: 150px;
padding: 8px 0;
mix-blend-mode: difference;
}
.sidenav a {
clear: both;
float: left;
position: relative;
left: -20%;
padding: 10px;
margin-bottom: 15px;
transition: 0.3s;
text-decoration: none;
text-align: right;
font-size: 24px;
border-style: solid;
border-width: 2px;
border-color: #fff;
border-radius: 0 5px 5px 0;
color: #fff;
background-color: #000;
}
.sidenav a:hover {
left: -2px;
}
.sidenav a.selected {
left: -2px;
color: #000;
background-color: #fff;
cursor: default;
}
<!doctype html>
<html>
<head></head>
<body>
<div class="sidenav">
Section 1
Another Section
Last One
</div>
<div class="content" onclick="closeMenu()">
<div class="section" id="works">
<p>Some text<p>
</div>
<div class="section blk" id="works">
<p>Some text<p>
</div>
<div class="section" id="works">
<p>Some text<p>
</div>
<div class="section blk" id="works">
<p>Some text<p>
</div>
<div class="section" id="works">
<p>Some text<p>
</div>
</div>
</body>
</html>
you need it add mix-blend-mode to parent element like sidenav, than change backround, color and border-color in a
I have a big bar of white space below my footer and cant figure out how to remove it. Basically I want everything below the footer to be gone.
Any help appreciated, just learning code so new to this.
https://jsfiddle.net/ptgL5pv6/1/
function active() {
var search_bar = document.getElementById('search_bar');
if (search_bar.value == 'Search') {
search_bar.value = '';
search_bar.placeholder = 'Search';
}
}
function inactive() {
var search_bar = document.getElementById('search_bar');
if (search_bar.value == '') {
search_bar.value = 'Search';
search_bar.placeholder = '';
}
}
body {
background: #efefef;
margin: 0 auto;
font-family: Verdana, Arial, sans-serif;
}
.container {}
.top_section {
background: #000;
padding: 20px;
}
.first_image {
position: relative;
text-align: center;
}
.nav_bar {
background: #222b2f;
border: 10px solid #222B2F;
font-size: 18px;
font-weight: bold;
text-transform: none;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.nav_bar a {
position: relative;
color: #fff;
Text-decoration: none;
padding: 20px;
}
.nav_bar a:hover {
color: #fff;
Text-decoration: underline;
}
.third_bar {
background: #000;
position: relative;
height: 350px;
}
.second_image {
position: relative;
text-align: center;
height: 370px;
}
#search_bar {
position: relative;
bottom: 50px;
height: 150px;
border: 1px solid #000;
border-right: none;
font-size: 36px;
padding: 10px;
outline: none;
width: 800px;
-webkit-border-top-left-radius: 10px;
-webkit-border-botton-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
right: 110px;
}
#search_button {
position: relative;
width: 200px;
bottom: 222px;
height: 172px;
border: 1px solid #000;
font-size: 36px;
padding: 10px;
background: #f1d826;
font-weight: bold;
cursor: pointer;
outline: none;
-webkit-border-top-right-radius: 10px;
-webkit-border-botton-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
left: 710px;
}
#search_button:hover {
background: #f6e049;
}
.form {
width: 200px;
margin-top: -220px;
padding-left: 280px;
}
.footer {
position: relative;
background: #000;
color: #fff;
bottom: -10px;
}
.copyright {
position: relative;
bottom: -8px;
left: 0;
overflow: hidden;
}
.footer_notes {
position: relative;
text-align: center;
bottom: 10px;
left: 100px;
overflow: hidden;
}
<div id="container">
<div class="top_section">
<div class="first_image">
<img src="logo.png" />
</div>
</div>
<div class="nav_bar">
Home
Search
About us
Products & Pricing
Contact us
login
</div>
<div class="third_bar">
<div class="second_image">
<img src="whisky.png">
</div>
<div class="form">
<form action="search.php" method="post">
<input type="text" id="search_bar" placeholder="" value="Search for your whisky here" max length="30" autocomplete="off" onMouseDown="active();" onBlur="inactive();" />
<input type="submit" id="search_button" value="Go!" />
</form>
</div>
</div>
<div class="footer">
<div class="copyright">
© test.com ®
</div>
<div class="footer_notes">
test.com is a one of a kind fully automated and repsosive database of over 40,000 items. Second to none on ther Internet.
</div>
</div>
</div>
Firt of all, edit this .footer-notes css and remove left:100px; from it. It is making your page width greater then 100%
.footer_notes{
position: relative;
text-align: center;
bottom: 10px;
padding-left: 100px;
overflow: hidden;
max-width:100%;
}
then dont declare height on .third-bar this makes your footer come up even if their is content above the footer
.third_bar{
background:#000000;
position: relative;
}
Even after doing this your footer will have maybe 20px or so space below it because their is not enough content above it. If you want your footer to always stay at bottom in any device then add this to your footer's css.
.footer{
position:fixed;
background: #000000;
color: #ffffff;
bottom:0px;
width:100%;
}
If you go through with all three changes this is what your page will look like :
function active(){
var search_bar= document.getElementById('search_bar');
if(search_bar.value == 'Search'){
search_bar.value=''
search_bar.placeholder= 'Search'
}
}
function inactive(){
var search_bar= document.getElementById('search_bar');
if(search_bar.value == ''){
search_bar.value='Search'
search_bar.placeholder= ''
}
}
body {
background: #efefef;
margin: 0 auto;
font-family: Verdana,Arial,sans-serif;
}
#container{
display:flex;
flex-direction:column;
height:100vh;
overflow:hidden;
background-color:black
}
.top_section {
background:#000000;
padding: 20px;
}
.first_image{
position: relative;
text-align: center;
}
.nav_bar {
background: #222b2f;
border: 10px; solid #222B2F;
font-size: 18px;
font-weight: bold;
text-transform: none;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.nav_bar a{
position: relative;
color:#ffffff;
text-decoration:none;
padding: 20px;
}
.nav_bar a:hover{
color: #ffffff;
text-decoration:underline;
}
.third_bar{
background:#000000;
position: relative;
}
.second_image{
position: relative;
text-align: center;
height:80vh;
background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
#search_bar
{
position: relative;
bottom: 50px;
height: 150px;
border:1px solid #000000;
border-right: none;
font-size: 36px;
padding: 10px;
outline:none;
width: 800px;
-webkit-border-top-left-radius:10px;
-webkit-border-botton-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft:10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
right:110px;
}
#search_button
{
position: relative;
width: 200px;
bottom: 222px;
height: 172px;
border: 1px solid #000000;
font-size: 36px;
padding: 10px;
background: #f1d826;
font-weight: bold;
cursor: pointer;
outline: none;
-webkit-border-top-right-radius:10px;
-webkit-border-botton-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright:10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
left: 710px;
}
#search_button:hover
{
background:#f6e049;
}
.form{
width:200px;
margin-top: -300px;
padding-left:280px;
}
.footer
{
position: fixed;
background: #000000;
color: #ffffff;
bottom: 0px;
width:100%;
}
.copyright
{
position: relative;
bottom: -8px;
left: 0px;
overflow: hidden;
}
.footer_notes
{
position: relative;
text-align: center;
bottom: 10px;
margin-left: 100px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="top_section">
<div class="first_image">
<img src="logo.png"/>
</div>
</div>
<div class="nav_bar">
Home
Search
About us
Products & Pricing
Contact us
login
</div>
<div class="third_bar">
<div class="second_image">
</div>
<div class="form"><form action= "search.php" method="post">
<input type="text" id="search_bar" placeholder="" value="Search for your whisky here" max length="30" autocomplete="off" onMouseDown="active();" onBlur="inactive();"/><input type="submit" id="search_button" value="Go!"/>
</form>
</div>
</div>
<div class="footer">
<div class="copyright">
© test.com ®
</div>
<div class="footer_notes">
test.com is a one of a kind fully automated and repsosive database of over 40,000 items. Second to none on ther Internet.
</div>
</div>
</div>
I have a navbar with a few elements inside it and a button that escapes the navbar when i resize it. What CSS property should I style to keep the button in CSS to stop the button from escaping the navbar?
Attached is a JFiddle of an example of what happens:
https://jsfiddle.net/6Lx0hkfa/
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
float: left;
margin-left: 235px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
<a href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
</div>
</section>
I don't know what you are trying to achieve, but this one worked for me:
.green-button {
position: absolute;
}
This is a case where I would use float for simplicity. Note that this requires to put the link element on top of the rest of the wrapper's contents within the markup, but it's the most direct solution.
.green-button-link {
float: left;
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
margin-right: 20px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<a class="green-button-link" href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
</div>
</section>
check the snippet if its what you want.i added description add to ones I added to your code.
* {
margin: 0;
padding: 0;
}
body {
background: url(img/hero_bg.jpg) repeat-y center center fixed;
background size: 100%;
}
#header {
background-color: #1d7cb6;
display: block;
/* position: relative; */
color: white;
width: 100%;
height: 50px;
}
.wrapper {
text-align: center;
margin: 0px auto;
font-family: 'Raleway';
background: white;
z-index: 500;
vertical-align: middle;/* add */
position: relative;/* add */
padding-right: 200px;
}
.address {
display: inline-block;
width: 240px;
float: left;
display: inline-block;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.phone {
display: inline-block;
width: 100px;
float: left;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.email {
width: 150px;
float: left;
display: inline-block;
height: 100%;
padding: 20px 18px;
font-size: 10px;
}
a.social-btn {
width: 20px;
height: 20px;
margin-top: 13px;
float: left;
}
a.social-btn.fb {
background: url("img/facebook#2x.png") 0% 0%/ 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.tw {
background: url("img/twitter#2x.png") 0% 0% / 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.ig {
background: url("img/instagram#2x.png") 0% 0% / 20px 20px no-repeat;
}
a.social-btn.gp {
background: url("img/google#2x.png") 0% 0% / 20px 20px no-repeat;
}
section {
width: 900px;
margin: 0 auto;
}
section#header .wrapper button.green-button {
text-decoration: none;
font-family: 'Raleway';
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
/* float: left; */
right: 0;/* add */
position: absolute;/* add */
/* margin-left: 235px; */
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social"><a class="social-btn fb" href="http://facebook.com"></a></div>
<div class="social"><a class="social-btn tw" href="http://twitter.com"></a></div>
<div class="social"><a class="social-btn ig" href="http://instagram.com"></a></div>
<div class="social"><a class="social-btn gp" href="https://plus.google.com"></a></div>
<button class="green-button">Book Consultation</button>
</div>
</section>
It is a common <h3> but the text appear on the right side of box, not extreme right but almost, something like that
h3:
.....................................................................................................................................................................
text appear here
.....................................................................................................................................................................
html file:
<div class="fifth">
<p>F-Village</p>
<div class="f-t">
<div class="f-t-col" id="f-t-c-photos">
<h2>Photos</h2>
<div class="big-photo">
<img src="./images/photo.jpg">
</div>
<div class="small-photo">
<img src="./images/photo.jpg">
<img src="./images/photo.jpg">
<img src="./images/photo.jpg">
</div>
</div>
<div class="f-t-col" id="f-t-c-material">
<h2>Material</h2>
<span>
...some text...
</span>
<p>
<img src="./images/history.jpg">
...some text...
</p>
</div>
<div class="f-t-col">
<h2>Words</h2>
<p class="words"><em>"...some text..."</em>
</p>
</div>
</div>
<div class="f-m">
<div class="f-m-l">
<h3>Video</h3> <!--The problem appear here-->
</div>
</div>
</div>
css file:
.fifth{
/* margin-top: 40px; */
width: 100%;
height: 700px;
color: white;
background-image: url('../images/ww-bg.jpg');
margin: auto;
}
.fifth .f-t-col{
color: white;
height: 265px;
width: 27%;
display: inline-block;
margin-left: 57px;
float: left;
}
#f-t-c-photos div{
float: left;
}
#f-t-c-photos .big-photo{
width: 190px;
}
#f-t-c-photos div:last-child{
width: 80px;
}
.f-t{
width: 1102px;
margin-left: 125px;
height: 240px;
border-bottom: 2px solid rgba(100, 100, 100, 0.9);
}
.small-photo img{
margin-bottom: 2px;
height: 55px;
width: 60px;
}
.small-photo img:first-child{
margin-top: 15px;
}
.big-photo img{
width: 165px;
height: 171px;
margin-top: 15px;
border: 2px #00b3ff solid;
}
.f-t-middle img{
width: 165px;
height: 170px;
margin-top: 15px;
border: 2px #00b3ff solid;
}
.words{
margin-top: 65px;
font-size: 17px;
}
.fifth h2{
color: #2e2e2e;
font-size: 17px;
color: whitesmoke;
padding: 0 0 10px 7px;
background: url('../images/ww-title.png') top right no-repeat;
margin-top: 5px;
height: 8px;
border-left: 3px solid red;
}
#f-t-c-material img{
float: left;
width: 215px;
}
#f-t-c-material span{
font-weight: 800;
font-size: 16px;
color: #00b3ff;
}
.f-m:before{
clear: both;
}
.f-m h3{
color: white;
}
You can align your text like this,
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
If the text is in a div that is floating right or margin right, you could change it to
float: left;