I have created a news web site like http://www.bbc.com/persian .
There is a problem in top header.
I want to put all the elements in a line, But they are placed under Link
<a> text-decoration not work.
How to resolve it?
**
Friends . Please give rather than negative score, call me to question
**
body {
float: right;
direction: rtl;
margin: 0;
padding: 0;
}
.iri-Header {
width: 1349px;
height: 40.5px;
background-color: red;
}
a {
text-decoration: none;
}
.iri-Header-container {
width: 1008px;
height: 40.5px;
padding: 0 16px;
margin: 0 auto;
background-color: blue;
position: relative;
vertical-align: baseline;
}
.logo {
width: 92px;
height: 39.5px;
background-color: yellow;
padding-left: 8px;
}
.logo img {
padding-top: 7px;
}
.iri-login {
width: 167.05px;
height: 39.5px;
background-color: violet;
float: right;
border-right-style: solid;
border-color: #000000;
border-right-width: 1px;
border-bottom-color: #1083b5;
cursor: pointer;
}
.iri-login:hover {
border-bottom-style: solid;
border-color: #000000;
}
.statusbar {
background-color: red;
margin-left: 40px;
margin-top: 10px;
margin-right: 10px;
font-family: 'Iranian Sans';
}
.statusbar a span {
text-decoration: none;
}
.icon-login img {
width: 30px;
height: 30px;
float: left;
margin-top: -24px;
margin-left: 2px;
}
.nav-link {
width: 505.5px;
height: 39.5px;
background-color: aqua;
border-right:1px solid black;
}
.nav-search {
width: 208px;
height: 38.5px;
background-color: red;
font-family: 'Iranian Sans';
border-right:1px solid black;
}
.search-form {
background-color: black;
width: 208px;
height: 38.5px;
}
.row {
padding-top: 2px;
}
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Site IR</title>
<link href="StyleSheet/StyleSheet.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.1.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="iri-Header">
<div class="iri-Header-container">
<div class="logo">
<a href="#">
<img src="img/Logo.png" />
</a>
</div>
<div class="iri-login">
<div class="statusbar">
<span id="login-txt">Login</span>
</div>
<div class="icon-login">
<img src="img/pic1.png" />
</div>
</div>
<div class="nav-link">
</div>
<div class="nav-search">
<div class="row">
<!-- /.col-lg-6 -->
<div class="col-xs-12">
<div class="input-group">
<input type="text" class="form-control" placeholder="جستجو کن . . .">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search
"></span>
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Try border:0; in the linked element
body {
float: right;
direction: rtl;
margin: 0;
padding: 0;
}
.iri-Header {
width: 1349px;
height: 40.5px;
background-color: red;
}
a {
text-decoration: none;
}
.iri-Header-container {
width: 1008px;
height: 40.5px;
padding: 0 16px;
margin: 0 auto;
background-color: blue;
position: relative;
vertical-align: baseline;
}
.logo {
width: 92px;
height: 39.5px;
background-color: yellow;
padding-left: 8px;
}
.logo img {
padding-top: 7px;
}
.iri-login {
width: 167.05px;
height: 39.5px;
background-color: violet;
float: right;
border-right-style: solid;
border-color: #000000;
border-right-width: 1px;
border-bottom-color: #1083b5;
cursor: pointer;
}
.iri-login:hover {
border-bottom-style: solid;
border-color: #000000;
}
.statusbar {
background-color: red;
margin-left: 40px;
margin-top: 10px;
margin-right: 10px;
font-family: 'Iranian Sans';
}
.statusbar a span {
text-decoration: none;
}
.icon-login img {
width: 30px;
height: 30px;
float: left;
margin-top: -24px;
margin-left: 2px;
}
.nav-link {
width: 505.5px;
height: 39.5px;
background-color: aqua;
border-right:1px solid black;
}
.nav-search {
width: 208px;
height: 38.5px;
background-color: red;
font-family: 'Iranian Sans';
border-right:1px solid black;
}
.search-form {
background-color: black;
width: 208px;
height: 38.5px;
}
.row {
padding-top: 2px;
}
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Site IR</title>
<link href="StyleSheet/StyleSheet.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.1.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="iri-Header">
<div class="iri-Header-container">
<div class="logo">
<a href="#">
<img src="img/Logo.png" />
</a>
</div>
<div class="iri-login">
<div class="statusbar">
<span id="login-txt">Login</span>
</div>
<div class="icon-login">
<img src="img/pic1.png" />
</div>
</div>
<div class="nav-link">
</div>
<div class="nav-search">
<div class="row">
<!-- /.col-lg-6 -->
<div class="col-xs-12">
<div class="input-group">
<input type="text" class="form-control" placeholder="جستجو کن . . .">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search
"></span>
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Related
The CSS display: works for the text elements, but it is not doing anything for <i> element. I am able to move it with float: right which is where I need it to be on my div but then the padding is off and a headache to deal with! Any feedback would be greatly appreciated :)
Part of my code is below:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://use.fontawesome.com/37471687aa.js"></script>
</head>
<body>
<section class="container">
<nav>
<div class="arrow-left">
<i class="fa fa-chevron-left fa-inverse fa-2x" aria-hidden="true"></i>
</div>
</nav>
<section class="restaurant-list">
<div class="location">
<div class="content">
<h1>Bakalaki Greek Taverna</h1>
<h3>Seng Poh Road 3, Singapore</h3>
</div>
<div class="arrow">
<i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</div>
</div>
</section>
</section>
</body>
</html>
CSS:
body {
background-color: #333;
font-family: sans-serif;
font-size: 10px;
}
.container {
margin: 0 auto;
width: 420px;
}
nav {
box-sizing: border-box;
background-color: #000;
padding: 10px 0 15px 15px;
width: 100%;
}
.restaurant-list {
margin: 0 auto;
width: 100%;
}
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
float: left;
}
.location:hover {
background-color: #888;
}
.content {
display:block;
}
.content h1 {
font-size: 18px;
font-weight: bolder;
}
.content h3 {
font-size: 12px;
padding-top: 5px;
}
.arrow {
display: inline-block;
}
I feel like I am missing some detail here when I use display: inline-block on element arrow. I know the .arrow works because float: right; works for it. I don't know what I am missing here. I need the text to be on left of div and the arrow to be on the right.
if I understand you correctly, this will solve your problem :
Css:
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
/* You can solve the problem with Display flex. */
display: flex;
justify-content: space-between;
align-items: center;
}
Could you please try the following codes?
What I added are:
Add float: left; in the css class .content;
Add float: right; in the css class .arrow;
body {
background-color: #333;
font-family: sans-serif;
font-size: 10px;
}
.container {
margin: 0 auto;
width: 420px;
}
nav {
box-sizing: border-box;
background-color: #000;
padding: 10px 0 15px 15px;
width: 100%;
}
.restaurant-list {
margin: 0 auto;
width: 100%;
}
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
float: left;
}
.location:hover {
background-color: #888;
}
.content {
float: left;
display:block;
}
.content h1 {
font-size: 18px;
font-weight: bolder;
}
.content h3 {
font-size: 12px;
padding-top: 5px;
}
.arrow {
float: right;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://use.fontawesome.com/37471687aa.js"></script>
</head>
<body>
<section class="container">
<nav>
<div class="arrow-left">
<i class="fa fa-chevron-left fa-inverse fa-2x" aria-hidden="true"></i>
</div>
</nav>
<section class="restaurant-list">
<div class="location">
<div class="content">
<h1>Bakalaki Greek Taverna</h1>
<h3>Seng Poh Road 3, Singapore</h3>
</div>
<div class="arrow">
<i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</div>
</div>
</section>
</section>
</body>
</html>
Trying to create test Bootstrap Master-Content (asp.net) application using Bootstrap. Despite having applied row no gutter, it is still having padding.
Image
CSS
.customDivTopRow {
text-decoration: solid;
text-align: left;
background-color: firebrick;
height: 10%;
width: 100%;
}
.customDivTopRowRight {
text-align: center;
font-size: small;
background-color: bisque;
height: 15%;
width: 100%;
}
.customDivMenuRow {
min-height: 20px;
text-decoration: solid;
border: thick;
border-color: black;
text-align: right;
background-color: antiquewhite;
}
.customDivLeftTopRow {
min-height: calc(100% - 450px);
font-size: small;
border: thick;
border-color: black;
}
.customDivMiddleTopRow {
min-height: calc(100% - 450px);
text-align: center;
margin-bottom: 5px;
font-size: small;
border: thick;
border-color: black;
}
.customDivRightTopRow {
min-height: calc(100% - 450px);
padding-bottom: 2px;
font-size: small;
border: thick;
border-color: black;
}
.customDivLeft {
min-height: calc(100% - 650px);
font-size: small;
border: thick;
border-color: black;
background-color: cornsilk;
}
.customDivMiddle {
min-height: calc(100% - 650px);
text-align: center;
font-size: small;
border: thick;
border-color: black;
}
.customDivRight {
min-height: calc(100% - 650px);
text-align: center;
font-size: small;
border: thick;
border-color: black;
background-color: cornsilk;
}
.customDivBottom {
min-height: 30px;
margin-top: 200px;
text-align: center;
font-size: small;
border: thick;
border-color: black;
}
.footer {
text-align: center;
min-height: 50px;
}
.vcenter {
display: block;
vertical-align: middle;
float: right;
}
.customDivContentPage {
padding-top: 30px;
}
.row.no-gutter {
padding-top: 0;
padding-left: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 0;
padding-left: 0;
padding-top: 0;
}
.menuitem {
text-align: center;
}
.pclass {
padding: 2px 2px 2px 2px;
text-align: justify;
margin: 2px 2px 2px 2px;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
My MasterPage Code
<body>
<form id="form1" runat="server">
<div>
<div class="container-fluid">
<div class="row no-gutter ">
<div class="col-md-9">
<div class="customDivTopRowRight">
<h2>This is header</h2>
</div>
</div>
<div class="col-md-1">
<div class="customDivTopRow">
</div>
</div>
<div class="col-md-2">
<div class="customDivTopRowRight"><
<asp:HyperLink ID="HyperLink1" runat="server" ToolTip="Click profile"/>
<%--<asp:Label ID ="lblUsername" runat="server" Font-Bold="True"/>--%>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" id="menurow">
<div class="col-md-12">
<div class="customDivMenuRow" style="vertical-align: middle;">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-2">
<div class="customDivLeft">
<div class="list-group menuitem">
<div>
<br/>
<span class="h4">Quick Links</span>
</div>
<br />
Home
</div>
</div>
</div>
<div class="col-md-8">
<div class="customDivMiddle">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="col-md-2">
<div class="customDivRight">
<div class="list-group menuitem">
<div>
<br />
<span class="h4">Other Menu</span>
</div>
<br />
<a href="#" class="list-group-item list-group-item-info"><span
class="glyphicon glyphicon-flag"></span>Office details</a>
Our docs
<a href="#" class="list-group-item list-group-item-info"><span
class="glyphicon glyphicon-ok-circle"></span>Your voice</a>
<div>
<br />
<span class="h4">His Menu</span>
</div>
<br />
Sports
Education
Extraa
<div>
<br />
<span class="h4">Her Menu</span>
</div>
<br/>
Beauty tips
Home
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="customDivBottom">
</div>
</div>
</div>
</div>
</div>
</form>
</body>
The problem is around 1st row having 3 columns (9-1-2). As can be seen in image it is adding some padding, not able to view on browser in developer mode. I am new to Bootstrap and even at designing.
I have a little problem with my header i want this:
search bar to be flexible, and this means that if that orange buttons text becomes larger the search bar must resize so that buttonsdont go down who knows how to do it can you share your experience, and sorry form my English
HTML
<div class="navigation-holder">
<div id="top-navbar">
<div class="container">
<div class="col-lg-9 no-padding">
<input type="text" name="" class="top-navbar-search" placeholder="Поиск по предметам или по именам">
</div>
<div class="col-lg-3 no-padding">
<div class="top-navbar-links">
#if(Auth::check())
{{ Auth::user()->first_name }}
Выйти
#else
aefaefaefaefaefaefaefe
Зарегистрироваться
#endif
</div>
</div>
</div>
</div>
<nav id="navbar">
<div class="container">
<button class="navbar-toggle">
<span></span>
</button>
<ul class="navbar-nav">
<li>Обратная связь</li>
<li>О проекте</li>
<li>Рус</li>
<li>Узб</li>
<li>Eng</li>
</ul>
</div>
</nav>
</div>
#top-navbar{
min-height: 50px;
width: 100%;
background-color: #brand-blue;
.top-navbar-search{
width: 100%;
min-height: 50px;
padding: 0 70px 0 20px;
color: #fff;
background: #339dd1 url(../img/search.svg) no-repeat 97% 48%;
background-size: 22px;
font-size: 18px;
font-family: 'Light';
.placeholder({
color: #fff;
});
}
.top-navbar-links{
width: 100%;
text-align: center;
display: table-cell;
a{
padding: 0 10px;
font-family: 'Light';
color: #fff;
display: inline-block;
line-height: 50px;
font-size: 18px;
min-height: 50px;
float: left;
background-color: #brand-yellow;
.transition(background, 200ms, linear);
&:hover{
background-color: #d17a45;
}
}
}
}
#navbar{
background-color: #fff;
min-height: 70px;
width: 100%;
border-bottom: 1px solid #cbcbcb;
.navbar-brand{
width: 160px;
height: 41px;
background: url(../img/brand.svg) no-repeat center;
background-size: 100%;
display: inline-block;
margin-top: 16px;
}
.navbar-toggle{
width: 70px;
height: 70px;
float: right;
position: relative;
display: none;
span{
display: block;
width: 35px;
margin: 0 auto;
height: 4px;
background-color: #393939;
.transition(all, 200ms, linear);
&:before{
content: '';
top: 23px;
.bar;
}
&:after{
content: '';
bottom: 23px;
.bar;
}
}
&:hover{
span{
background-color: #brand-blue;
&:before, &:after{
background-color: #brand-blue;
}
}
}
}
.navbar-nav{
float: right;
display: inline-block;
line-height: 70px;
li{
display: inline-block;
&:first-child{
margin-right: 20px;
}
&:nth-child(3){
margin-left: 30px;
}
}
a{
display: block;
line-height: 70px;
color: #brand-black;
.transition(color, 100ms, linear);
&:hover{
color: #brand-blue;
}
}
}
}
Use bootstrap grid, an example:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color:blue;"></div>
<div class="col-sm-7" style="background-color:lavenderblush;">Search</div>
<div class="col-sm-1" style="background-color:lavenderblush;">Button</div>
<div class="col-sm-2" style="background-color:blue;"></div>
</div>
</div>
</body>
</html>
I have a problem with my css and html code.
When I open the page normally it works, but when I change screen resolution, the .content-body class (the light blue with diagonal) does not fulfill the entire page width (there is that pink column). Could anyone help? Thank you.
That's the whole css code:
html {
width: 100%;
}
body {
background-color: #ffe1d9;
width: inherit;
overflow-x: hidden;
}
.top-header {
width: 100%;
}
.container {
width: 100% - 25px;
}
.content {
background-color: #ffe1d9;
width: 100%;
}
.header {
padding: 40px;
width: 50%;
float: left;
}
.presentation-header {
//position: relative;
////padding-top: 0;
//top: 150px;
//z-index: 999;
max-width: 1000px;
//margin: 0 auto;
}
li.header-menu-item {
padding: 15px;
font-size: 16px;
a {
color: #666167;
text-decoration: none;
&:hover {
color: #111111;
font-weight: 400;
box-shadow: #111111;
}
span {
&:hover {
border-bottom: 1px solid #60629d;
}
}
}
}
.active {
border-bottom: 1px solid #60629d;
}
.header-menu {
display: block;
padding-top: 70px;
text-align: right;
}
#slogan {
width: 50%;
float: left;
}
#slogan-img {
width: 50%;
float: left;
}
#button {
background: #1d1c24;
padding: 15.5px 51px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
color: white;
font-size: 12px;
font-family: SansSerif, Serif;
text-decoration: none;
vertical-align: middle;
font-weight: bold;
}
#button:active {
background: #000000;
}
#sign-in-button, #submit {
background: white;
}
#sign-in-button, #next {
padding: 20px 20px 20px 20px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
color: black;
font-size: 14px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
text-align: left;
}
#next {
background: #ffe1d9;
margin-left: 150px;
width: 50%;
}
#submit {
background-color: #ffe1d9;
padding: 15px 20px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
color: black;
font-size: 14px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
text-align: left;
}
#sign-in-button:active, #submit:active {
background: #ffe6e3;
}
select {
padding: 15px 50px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
border: 0 solid;
color: black;
font-size: 14px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
text-align: left;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #e9f3f5;
background-position: 100%-15px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
h2 {
font-family: 'Montserrat';
font-weight: 700;
font-size: 7.0rem;
line-height: 100%;
letter-spacing: -.5rem;
margin: initial;
}
//.padding {
//padding-top: 30px;
//padding-bottom: 50px;
//}
/*Line bellow Features*/
.span-decoration {
border-bottom: 5px solid #caafaf;
width: 30px;
margin: 10px 0 20px 0;
}
/*Draws a diagonal line in a box*/
.diagonal-line-box {
position: relative;
width: 100%;
height: 200px;
clear: both;
//background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient( left top, #ffe1d9 49.75%, #989cdb 50.25%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #ffe1d9 49.75%, #989cdb 50.25%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #ffe1d9 49.75%, #989cdb 50.25%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom left, #ffe1d9 49.75%, #989cdb 50.25%); /* Standard syntax */
}
/*Draws a diagonal line in a box*/
.second_diagonal-line-box {
position: relative;
width: 100%;
height: 300px;
//top: -150px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient( right top, #989cdb 49.75%, #60629d 50.25%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom left, #989cdb 49.75%, #60629d 50.25%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom left, #989cdb 49.75%, #60629d 50.25%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #989cdb 49.75%, #60629d 50.25%); /* Standard syntax */
}
//html, .content-body {
// width: 100%;
//}
.content-body {
position: relative;
width: 100%;
background-color: #989cdb;
margin: 0 auto;
//left: 50px;
}
#slogan-image {
}
section {
.cashflow {
width: 70%;
float: left;
//margin: -60px -80px;
margin-top: -60px;
margin-left: -90px;
//margin-right: -150px;
}
.cashflow-text {
width: 30%;
float: left;
}
.cashflow, .cashflow-text {display: inline-block;}
}
section {
.budget {
width: 70%;
float: left;
margin-left: 0px;
margin-right: -100px;
margin-top: -60px;
}
.budget-text {
width: 35%;
float: left;
}
.budget, .budget-text {
display: inline-block;
}
}
.wrapper {
background: #282731;
border-radius: 1px;
box-sizing: border-box;
-webkit-box-shadow: 22px 17px 58px 3px rgba(54, 45, 105, 0.59);
-moz-box-shadow: 22px 17px 58px 3px rgba(54, 45, 105, 0.59);
box-shadow: 22px 17px 58px 3px rgba(54, 45, 105, 0.59);
margin: auto;
position: relative;
float: left;
max-width: 800px;
width: 100%;
top: -280px;
}
.wrapper.box {
padding: 80px;
form {
padding-top: 50px;
}
}
.wrapper-payment {
background: -webkit-linear-gradient( 90deg, #ffffff 50%, #2e2935 50%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(90deg, #ffffff 50%, #2e2935 50%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, #ffffff 50%, #2e2935 50%); /* For Firefox 3.6 to 15 */
background: linear-gradient(90deg, #ffffff 50%, #2e2935 50%); /* Standard syntax */
}
#-moz-document url-prefix() {
.wrapper.box {
margin-left: 0px;
}
#button {
font-size: 11px;
}
}
.wrapper-image {
background: #282731;
border-radius: 1px;
box-sizing: border-box;
-webkit-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
-moz-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
//box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
//margin: auto;
}
.title{
font-family: 'Montserrat';
font-weight: 700;
font-size: 5.0rem;
line-height: 100%;
letter-spacing: -.5rem;
//margin: initial;
}
.title-body {
font-size: 2rem;
color: white;
}
//Form styling
input, label{
display: block;
}
label {
color: #7f7e83;
}
input {
width: 100%;
padding: 4px 0;
margin: 5px 0 15px 0;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
border: 2px solid #83828a;
background-color: #282731;
color: white;
padding-left: 10px;
font-family: Georgia, Serif;
font-weight: bold;
}
.first-part-form {
width: 100%;
}
.form-first-left {
width: 46%;
float: left;
margin-right: 20px;
}
.form-first-right {
width: 46%;
float: right;
}
//End form styling
.post-content {
position: relative;
width: 100%;
//height: 750px;
background-color: #60629d;
//top: -150px;
//z-index: -10;
}
#post-content-div {
//height: 100px;
}
#next {
background-color: #ffe1d9;
color: #282731;
}
#login-or-company {
border: none;
border-radius: 0;
border-bottom: 1px solid white;
padding-left: 0;
}
#login-url {
color: white;
font-size: 16px;
//float: left;
padding-top: 18px;
padding-left: 0;
}
#login-url, #login-or-company {
display: block;
}
.footer {
position: relative;
display: block;
width: 100%;
background: #60629d;
padding-bottom: 50px;
margin: 0 auto;
img {
margin: 0 auto;
}
}
.halfwidth {
display: inline-block;
width:50%;
position: relative;
}
.second-part-form {
label {
color: #ffffff;
}
h3{
color: #ffffff;
}
}
And this is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Join Now ‐ Sweety & Co. Pro</title>
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/base.css">
<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/static/js/base.js"></script>
</head>
<body>
<div class="top-header">
<div class="row">
<div class="header col-md-6">
<img id="header-logo" src="/static/img/logo_escuro.svg" width="314" height="81">
</div>
<div class="col-md-6" id="div-header-menu">
<ul class="header-menu list-inline " id="nav">
<li class="header-menu-item"><a class="" href="/"><span>Home</span></a></li>
<li class="header-menu-item"><span>Features</span> </li>
<li class="header-menu-item"><span>Pricing</span></li>
<li class="header-menu-item"><span>Help</span> </li>
<li class="header-menu-item"><a href="#" type="button" role="button"
id="button" class="button">JOIN NOW</a> </li>
<li class="header-menu-item"><span>Sign in</span></li>
</ul>
</div>
</div>
</div>
<div class="container ">
<div>
<div class="container">
<div class="row presentation-header">
<div id="slogan" class="">
<h2>Because</h2>
<h2>you can't</h2>
<h2>create</h2>
<h2>money</h2>
<div style="margin: 50px"></div>
<div class="">
<a id="sign-in-button" href="/auth/login" role="button" type="button">Sign in ></a>
</div>
<div style="clear: both"></div>
</div>
<div id="slogan-img" class="">
<img id="slogan-image" src="/static/img/mac2.png">
<p style="margin-bottom: 50px"></p>
</div>
</div>
</div>
</div>
</div>
<div class="container diagonal-line-box">
<div class="container">
<div class="row">
</div>
</div>
</div>
<div class="content-body">
<div class="container">
<div class="row">
<section class="">
<div class="container">
<section class="row ">
<h3 class="col-md-5">Features<p class="span-decoration"></p></h3>
</section>
<h4>Get to know SweetyPro & Co. Features</h4>
<section>
<img class="cashflow" src="/static/img/cashflow_144.png">
<div class="cashflow-text">
<h1 class="title ">Cashflow</h1>
<p class="title-body">Organize your expenses and incomes in a platform easy to use.</p>
<p class="title-body">Enough of losing control of the situation, your payments and outputs are always on time.</p>
</div>
</section>
<div style="clear: both;"></div>
<section>
<div class="budget-text">
<h1 class="title " style="text-align: right">Budgets</h1>
<p class="title-body" style="text-align: right">
Can you imagine creating budgets with just a few steps? Yes! It's possible.
</p>
<p class="title-body" style="text-align: right">
Sweety & Co. Pro helps you figure out how much to charge and making budgets turned into novice task.
</p>
</div>
<img class="budget" src="/static/img/budget_144.png">
</section>
<div style="clear: both;"></div>
<section class="row">
<div class="col-md-12">
<h1 class="title">Timeline</h1>
<p class="title-body">Time is money. Thus organize yourself and your time and don't stop until you earn money.</p>
</div>
<img class="col-md-12" src="/static/img/timeline_144.png">
</section>
<section class="row padding">
<div class="col-md-12">
<h1 class="title" style="text-align: center">Fastcreate</h1>
<p class="title-body" style="text-align: center">Running out of time? With a simple mouse click, you get access to foremost features of
Sweety & Co. Pro. in any gadget at any time.</p>
</div>
<img class="col-md-12" src="/static/img/fastcreate_144.png">
</section>
<section class="row">
<h3 class="col-md-5">Join now<p class="span-decoration"></p></h3>
</section>
<h4>The Status of Liberty Enlightening the World was a gift of the people of France...</h4>
</div>
</section>
</div>
</div>
</div>
<div class="container second_diagonal-line-box">
<div>
<div class="container">
<div class="row">
<section class="col-md-12">
</section>
</div>
</div>
</div>
</div>
<div class="container post-content">
<div class="container">
<section class="col-md-offset-1">
<div id="post-content-div" class="container">
<div id="wrapper" class=" wrapper box ">
<div class="first-part-form">
<h1 class="form-first-left" style="color: #FFFFFF;">Get your time and money on track</h1>
<img class="" style="padding-top: 10px; padding-left: 25px" src="/static/img/price.png">
</div>
<div style="clear: left"></div>
<div class="second-part col-md-6 col-sm-12">
<h3>Payment method</h3>
<p class="span-decoration"></p>
<p class="">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.</p>
<select >
<option>Credit Card</option>
<option>Paypal</option>
</select>
</div>
<form method="post" role="form">
<div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1471534484##5376f5b3fac93b1e7f29c731c668293a456aca13"></div>
<div class="first-part-form">
<div class="form-first-left">
<label for="name">First Name</label>
<input id="name" name="first_name" placeholder="John" required type="text" value="">
</div>
<div class="form-first-right">
<label for="surname">Last Name</label>
<input id="surname" name="last_name" placeholder="Smith" required type="text" value="">
</div>
<div style="clear: both"></div>
<div class="form-first-left">
<label for="login-or-company" id="login-or-company-label">Login (company's name or yours)</label>
<input class="col-md-6" id="login-or-company" name="username" required type="text" value="">
<p id="login-url" class="col-md-2">.sweetyand.co</p>
</div>
<div class="form-first-right">
<label for="password">Password (min. 6 characters)</label>
<input id="password" name="password" placeholder="******" required type="password" value="">
</div>
<div style="clear: both"></div>
<div class="form-first-left">
<label for="email">Email</label>
<input id="email" name="email" placeholder="john#example.com" required type="email" value="">
</div>
<div class="form-first-right">
<label for="reemail">Re-email</label>
<input id="reemail" name="re_email" placeholder="john#example.com" required type="email" value="">
</div>
</div>
<div class="second-part-form row">
<div class="col-md-6">
<div class="row">
<label class="col-md-offset-1" style="margin-top: -30px">You chose</label>
<h3 class="col-md-offset-1" id="dropdown-option">Credit Card</h3>
</div>
<div class="row">
<label class="col-md-offset-1" for="credit-card-name">Name as in credit card</label>
<input class="col-md-12 col-md-offset-1" id="credit-card-name" name="credit_card_name" required type="text" value="">
</div>
<div class="row">
<label class="col-md-offset-1" for="credit-card-number">Credit card number</label>
<input class="col-md-9 col-md-offset-1" id="credit-card-number" name="credit_card_number" required type="text" value="">
</div>
<div class="row">
<div class="row">
<label class="col-md-4 col-md-offset-1" for="validate">Validate</label>
<label class="col-md-4 col-md-offset-3" for="cvc">CVC/CW</label>
</div>
<input class="col-md-3 col-md-offset-1" id="validate" name="month_card" placeholder="MM" required type="text" value="">
<input class="col-md-3" id="year" name="year_card" placeholder="YYYY" required type="text" value="">
<input class="col-md-4 col-md-offset-1" id="cvc" name="cvc" required type="text" value="">
</div>
<div class="row">
<p class="col-md-1"></p>
<input class="col-md-1 col-md-offset-2" id="accept_terms" name="accept_terms" required type="checkbox" value="y">
<p style="margin-left: 10px; color: white">I accept the terms of SweetyPro.</p>
</div>
<div class="row">
<input class="col-md-6 col-md-offset-1" id="submit" name="submit" type="submit" value="Next >">
</div>
</div>
</div>
</form>
<div class="form-first-left">
<img id="logo-form" src="/static/img/logo.svg" class="" width="200" height="71">
</div>
<div class="form-first-right">
<input id="next" class="" type="button" value="Next >">
</div>
<div class="row" id="flash">
<div class="col-md-offset-6">
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
</section>
</div>
</div>
<div class="footer container">
<div class="container">
<img id="foot-logo" class="col-md-12" src="/static/img/sco.svg" width="129" height="79">
</div>
</div>
</body>
</html>
This is a simple topic:
#media (max-width: 800px) {
/* CSS that should be displayed if width is equal to or less than 800px goes here */
}
On the header, I need to have
the logo be located the left side of the banner (without space)
Both banner and logo be always in the middle of the page (regardless of screen size)
Also have four images that should always be on the top right side of
the window (regardless of screen size)
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.form-control{
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5;
}
#logo{
float:right;
}
#media screen and (min-width: 480px) {
#logo{
float:left;
}
}
#media screen and (min-width: 768px) {
#logo{
float:left;
}
}
.searchinput{
height: 40px;
border:#000 1px solid;
box-shadow: none;
margin-bottom:10px;
}
.btn-search{
background: #777;
width:95%;
height: 40px;
border: 1px solid #777;
border-radius: 4px;
padding:8px 50px;
display: inline-block;
text-align: center;
color: #fff;
font-weight: 100;
letter-spacing: 0.05em;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);
}
.btn-search:hover{
color: #fff;
text-decoration: none;
border-color: #3c3c3c;
background: #3c3c3c;
box-shadow: none;
}
.btn-search:a{
padding-top: 50px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" >
<div class="col-md-9 col-sm-9 col-xs-2">
<div id="banner">
<div id="logo" style="margin-right:0px;">
<img height="40px" width="40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA">
</div>
<img height="40px;" width="300px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC"></div>
</div>
</div>
</div>
<div class="col-md-3">
<div id="images" style="float:right;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
</div>
</div>
</div>
Update
So far, I could put the images on the top right of the window.
<div class="container-fluid">
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-2">
<div id="banner">
<div id="logo" style="margin-right:0px;">
<img height="40px" width="40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA">
</div>
<img height="40px;" width="300px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC"></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-10">
<div id="images" style="float:right; position: absolute;
right: 0;
top: 5px;
z-index: 9999;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
</div>
</div>
</div>
</div>
you misplaced one div
you no wrong in one div that you forgot to put it try to check in advance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.form-control{
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5;
}
#logo{
float:right;
}
#media screen and (min-width: 480px) {
#logo{
float:left;
}
}
#media screen and (min-width: 768px) {
#logo{
float:left;
}
}
.searchinput{
height: 40px;
border:#000 1px solid;
box-shadow: none;
margin-bottom:10px;
}
.btn-search{
background: #777;
width:95%;
height: 40px;
border: 1px solid #777;
border-radius: 4px;
padding:8px 50px;
display: inline-block;
text-align: center;
color: #fff;
font-weight: 100;
letter-spacing: 0.05em;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);
}
.btn-search:hover{
color: #fff;
text-decoration: none;
border-color: #3c3c3c;
background: #3c3c3c;
box-shadow: none;
}
.btn-search:a{
padding-top: 50px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" style="background-color:orange;">
<div class="col-md-9">
<div id="banner" style="margin-left: 49%;">
<img height="40px" width="40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA">
<img height="40px;" width="300px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC">
</div>
</div>
<div class="col-md-3">
<div id="images" style="float:right;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
</div>
</div>
</div>
</div>
</body>
</html>
I updated your fiddle to your needs. if you do it like this you don't even need a media query!
Please pay attention to the new added class google for the google image and the removed width property
http://jsfiddle.net/b9tbxtLb/16/
#logo{
display: inline-block;
}
.google {
display: inline-block;
}
#banner {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
display: inline-block;
text-align: center;
width: 100%;
}
#images img{
display: inline-block;
text-align: right;
}
#media screen and (min-width: 480px) {}
although i think you would be able to solve it on your own, with so many approaches provided ;)
how about centering inline-block?
#banner-container {
text-align: center;
}
#banner {
display: inline-block;
white-space: nowrap;
}
Just remove all the css which is not required and use only below snippets,
refer to the link below Here.
#image {
float: right;
position: absolute;
right: 0;
top: 5px;
max-width: 20%;
}
#logo {
margin-left: 10%;
float: left !important;
max-width :60%
}
and it will solve your issue if you remove the unwanted divs in the HTML part