I am trying to design a login page, the screenshot is below.
http://prntscr.com/2pksiq
Where as i want the output as http://prntscr.com/2pga73 . I am trying to reduce the size of the tags
<div id="logo" class="logo col-xs-2"></div>
<div id="title" class="page-title green-bg col-xs-8">Local Adventures</div>
I am new to CSS, please suggest me a way to fix this. I am using twitter bootstrap in my project.
I have the below HTML:
<div class="visible-xs stop-detail">
<head>
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/js/bootstrap.min.js"></script>
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/createaccount.css" rel="stylesheet">
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/styles.css"rel='stylesheet' type='text/css' href='styles.css' />
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/main.css" rel="stylesheet">
</head>
<meta charset="utf-8">
<title>Local-Adventures</title>
<div id="login-form">
<div class="logo col-xs-4"></div>
<div class="page-title green-bg col-xs-8">Local Adventures</div>
Create an Account
Sign In
<input type="email" required value="Email Address" onBlur="if(this.value=='')this.value='Email Address'" onFocus="if(this.value=='Email Address')this.value='' ">
<input type="email" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' ">
<input type="email" required value="Confirm password" onBlur="if(this.value=='')this.value='Confirm password'" onFocus="if(this.value=='Confirm password')this.value='' ">
<br><br>
<span class='btn btn-lg btn-success btn-block'>Create An Account</span>
<span class='btn btn-lg btn-primary btn-block'>Facebook Login</span>
</div> <!-- end login-form -->
</div>
My CSS is below:
#charset "utf-8";
/* CSS Document */
/* ---------- GENERAL ---------- */
/*
body {
background: #FFFFFF;
color: #999;
font: 100%/1.5em sans-serif;
margin: 0;
}
*/
a {
color: #2a2a2a;
text-decoration: none;
margin:1px 33;
}
a:hover { color: #88c425; }
fieldset {
border: none;
margin: 0;
}
.btn-success {
border-radius:0px;
background-color: #88c425
}
.btn-success:hover {
background-color: #88c425
}
.btn-primary {
border-radius:0px;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
margin: 0;
-webkit-appearance: none;
}
input:focus {
outline: none;
}
input[type="submit"] { cursor: pointer; }
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after { clear: both; }
/* ---------- LOGIN-FORM ---------- */
#login-form {
margin: 50px auto;
width: 300px;
}
#login-form h3 {
background-color: #79a002;
border-radius: 5px 5px 0 0;
color: #fff;
font-size: 14px;
padding: 20px;
text-align: center;
text-transform: uppercase;
}
#login-form fieldset {
background: #fff;
border-radius: 0 0 -1px -1px;
padding: 0px;
}
#login-form fieldset:before {
background-color: #fff;
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
#login-form input {
font-size: 14px;
}
#login-form input[type="email"], #login-form input[type="password"] {
border:none; /* clear previous borders */
border-bottom: 1px solid #88c425; /* add bottom border */
padding: 12px 10px;
width: 300px;
}
#login-form input[type="email"] {
border-radius: 3px 3px 0 0;
}
#login-form input[type="password"] {
border-top: none;
border-radius: 0px 0px 3px 3px;
}
#login-form input[type="submit"] {
background: #1dabb8;
border-radius: 3px;
color: #fff;
float: right;
font-weight: bold;
margin-top: 20px;
padding: 12px 20px;
}
If you use Bootstrap, you had configurate before download it your GRID
It seems do be like a 12 Grid.
you used :
<div id="title" class="page-title green-bg col-xs-8">Local Adventures</div>
it should be :
<div id="title" class="page-title green-bg col-xs-4">Local Adventures</div>
you take 8 pieces from a 12 piece cake, so its larger. just take the half and you will get the same width you want for.
And please, if you use a mighty framework like bootstrap, dont overwrite its own classes with ids or something, its bad practise!
Maybe your bootstrap is overriding your css? Try putting important at the end:
#title{
width: 400px !important;
height: 90px !important;
}
Related
Hi I am studying and trying to make my website mobile responsive and no matter what I try have had no luck. So I have tried a range of ways to turn a menu into a mobile menu when I resize. I have also been trying to get the content to centre properly when in smaller screen. I have googled alot and worked out most now I just need help finishing it off properly.
Edit: Updated code as per request #https://stackoverflow.com/users/13447870/tobias-kristensen
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
/* Main Body */
body {
background-image: url(Image/footballField.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100hv;
min-width: 100hv;
background-size: 100% 100%;
font-family: "Lucinda Sans", "Arial", sans-serif;
text-decoration: none;
color: black
}
/*Header with logo*/
#header {
text-align: center;
margin-bottom: 20px;
margin-top: 20px;
padding: 10px;
}
#container1 {
position: relative;
background-color: #FFFFFF;
position: absolute;
min-height: 100vh;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-bottom:120px;
}
/* footer for all pages */
#footer {
position: absolute;
clear: both;
color: white;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
font-weight: 300;
bottom: 0;
background: linear-gradient(to bottom, #C61618 5%, black 100%);
width: 100%;
height: 100px; /* Footer height */
}
.fa-facebook {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
background: #3B5998;
color: white;
margin-right: 50px;
border-radius: 30%;
} /* Facebook Icon and link in Footer */
* {
box-sizing: border-box;
}
/*Search Field */
input:focus,
textarea:focus,
select:focus {
outline-color: #C61618;
}/* Search Area on Header */
form.search input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid black;
float: right;
width: 20%;
background: white;
margin-right: 5%;
} /* Style the search field from W3Schools*/
form.search button {
float: right;
width: 5%;
padding: 10px;
background: #C61618;
color: white;
font-size: 17px;
border: 1px solid black;
border-right: none;
/* Prevent double borders */
cursor: pointer;
} /* Style the submit button from W3Schools */
form.search button:hover {
background: #C61618;
} /* Search button hover */
form.search::after {
content: "";
clear: both;
display: table;
} /* Clear floats on Search from W3Schools */
/*Nav Bar*/
#navbar {
position: relative;
margin-top: 40px;
margin-right: 5%;
margin-left: 8%;
}/*Main White Background*/
li a {
display: inline;
text-decoration: none;
color: white;
font-size: 16px;
} /*link look on Nav Bar */
#navbar ul li {
list-style-type: none;
display: inline;
padding: 15px;
text-align: center;
border-radius: 30px; /*curved corners on buttons*/
background: linear-gradient(to bottom, #C61618 5%, black 100%);
} /*Menu look*/
#navbar ul li:hover {
background: black;
} /*Menu hover Colour*/
#navbar .btn.active {
background: black;
} /*Menu active Colour*/
/* Text Styling */
p,
h2,
a {
text-decoration: none;
color: black;
} /*all paragraph text*/
h1 {
text-align: center;
margin-top: 5%;
}/*position of h1*/
h2 {
text-align: center;
margin-top: 5%;
text-decoration: none;
color: black;
} /*position of h2*/
h4 a {
text-decoration: none;
color: black;
}
p {
margin-left: 50px;
margin-right: 50px;
text-align: justify-all;
line-height: 150%;
} /*format text <p> */
/*Index Page*/
#image_index {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
max-width: 30%
} /* Image on home page format */
#image_contact {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
} /* Image on home page format */
#index_table {
float: right;
padding-right: 10px;
padding-bottom: 30px;
margin-right: 5%;
} /* Table Index Page format */
/*Competitions Page */
table.c {
table-layout: auto;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
.competition_table p {
text-align: center;
margin-left: auto;
margin-right: auto;
}/* format for <p> Competitions Page */
th {
text-emphasis: bold;
font-size: 20px;
height: 10px;
background-color: lightgrey;
border-color: black;
} /* Table Header*/
table,
th,
td {
padding: 10px;
border-style: solid;
border-color: black;
border-width: thin;
border-collapse: collapse;
}
/* Contact Us Page */
#secretary {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
}
.column1 {
float: left;
width: 40%;
padding: 10px;
}
.right {
width: 75%;
}
.row:after {
/* Clear floats after the columns */
content: "";
display: table;
clear: both;
}
#contact_form {
float: right;
padding-right: 10px;
padding-bottom: 30px;
margin-right: 5%;
width: 50%;
}
* {
box-sizing: border-box;
} /*format for Contact Us form*/
input[type=text],
[type=email],
[type=tel],
select,
textarea,
email {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
} /*format for Contact Us form*/
label {
padding: 12px 12px 12px 0;
display: inline-block;
} /*format for Contact Us form*/
input[type=submit] {
background-color: black;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
font-size: 20px;
font-weight: bold;
} /*format for Contact Us form*/
input[type=submit]:hover {
background-color: #C61618;
} /*format for Contact Us form*/
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/*Merch Page*/
.merch_order_form {
clear:both;
text-align: left;
margin-bottom: 5%;
margin-right: 5%;
margin-left: 5%;
padding:10px;
}
.col-50 {
float: left;
width: 40%;
margin-left: 10%;
align-content: inline;
text-align: center;
} /*Column setout for Merch & Information Pages*/
.col-45 {
float: right;
width: 40%;
margin-right: 10%;
align-content: inline;
text-align: center;
} /*Column setout for Merch & Information Pages*/
.row:after {
content: "";
display: table;
clear: both;
} /* Clear floats after the columns */
input[type=submit_merch] {
background-color: black;
color: white;
text-align: center;
padding: 12px 20px;
font-size: 30px;
border-radius: 30px;
cursor: pointer;
margin-left: 30%;
margin-top: 10px;
} /* Merch Page Submit Button */
input[type=submit_merch]:hover {
background: linear-gradient(to bottom, #C61618 5%, black 100%);
} /* Merch Page hover change */
#subject {
font-size: 16px;
}
/* Registration Page Submit Button */
.myButton {
box-shadow: inset 0px 0px 0px 2px #0154FA;
background: linear-gradient(to bottom, #0154FA 5%, #283966 100%);
background-color: #0154FA;
border-radius: 30px;
border: 1px solid #4e6096;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-size: 28px;
font-weight: bold;
padding: 21px 76px;
text-decoration: none;
text-shadow: 0px 0px 0px #283966;
text-align: center;
margin-left: 35%;
margin-right: auto;
margin-bottom: 70px;
} /* Merch Page Registration Button */
.myButton:hover {
background: linear-gradient(to bottom, #C61618 5%, black 100%);
background-color: #C61618;
border: 1px solid #C61618;
box-shadow: inset 0px 0px 0px 2px #C61618;
} /* Merch Page Registration Button */
.myButton:active {
position: relative;
top: 1px;
} /* Merch Page Registration Button */
#media screen and (min-width: 800px) {
.column {
width: 100%;
background-image: disabled;
.navbar li, .navbar li a:last-child {
display: none !important;
visibility: hidden !important;
}
}
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
background-image: disabled;
.mobile_navbar li, .mobile_navbar li:last-child {
display: none !important;
visibility: hidden !important;
font-family: "Lucinda Sans", "Arial", sans-serif;
text-decoration: none;
color: black;
text-align: right;
}
.col-25,
.col-75,
.col-50,
.col-45,
input[type=submit] input [type=submit_merch] {
width: 100%;
margin-top: 0;
margin-left: auto;
margin-right: auto;
}
#body {
background-color: white;
margin: 0px;
}
}
#container1 {
margin="0px";
background-color: ="white";
}
#mobile_navbar {
display:flex;
margin-left: 100px;
display: inline;
}
.mobile-container {
min-width: 370px;
margin: auto;
padding: auto;
background-color: white;
height: 500px;
color: black;
border-radius: 10px;
}
/* TopNav Menu Code from W3Schools.com Dropdown Button */
.dropbtn {
background-color: #C61618;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer
display: block;
position: absolute;
right: 0;
top: 0;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #C61618}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<!DOCTYPE html> <!-- Contact Us page for OaklandFC -->
<html lang="en-US">
<head>
<title>Oakland Football Club</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='width=device-width, initial-scale=1' name='viewport' />
<meta name="viewport" content="minimum-scale=0">
<meta name="viewport" content="user-scalable=yes">
<meta charset="UTF-8">
<meta name="description" content="Oakland Football Club">
<meta name="keywords" content="Football, Soccer, Oakland, Club, family">
<meta name="author" content="Simply Designed for You">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="Oaklandstyle.css" />
<script src="formValidation.js"></script>
<script src="jquery-3.5.0.js" type="text/javascript"></script>
</head>
<body>
<div id="container1">
<div id="content-wrap">
<div id="header">
<img src="Image/logo.png" alt="Oakland Football logo" />
<form class="search" action="action_page.php">
<!--from W3Schools -->
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="navbar">
<ul>
<li class="btn">Home</li>
<li class="btn">Competitions</li>
<li class="btn">Registration</li>
<li class="btn">Merchandise</li>
<li class="btn">Sponsors</li>
<li class="btn">Information</li>
<li class="btn active">Contact Us</li>
</ul>
</div>
<div id="mobile_navbar">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu</button>
<div id="myDropdown" class="dropdown-content">
Home
Competitions
Registration
Merchandise
Information
Contact Us
</div>
</div>
</div>
<div id="content">
<div id="text">
<h1>Contact Us</h1>
</div>
<div class="column1">
<h2>Secretary</h2>
<p>Name: Laci Tanner </p>
<p>Phone: 02 - 6620 3324</p>
<p>Email: secretary#oaktownfa.com.au</p>
<br>
<div id="image_contact" show="#media screen and (max-width: 800px)">
<img src="Image/soccer.jpg" alt="Oakland Football Team Photo" width="380px"/>
</div>
</div>
<div class="column2">
<h2>Contact Us</h2>
<form action="mailto:secretary#oaktownfa.com.au" method="post" enctype="text/plain">
<div id="contact_form">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="email">Email</label>
</div>
<div class="col-75">
<input type="email" id="email" name="email" placeholder="Your email address" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="tel">Phone Number</label>
</div>
<div class="col-75">
<input type="tel" id="tel" name="tel" placeholder="Your phone number" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="team">Team</label>
</div>
<div class="col-75">
<select id="team" name="team">
<option value="PleaseChoose">Please Choose</option>
<option value="Adults">Adults</option>
<option value="Under%12s">Under 12s</option>
<option value="Under%6s">Under 6s</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="I%am">I am</label>
</div>
<div>
<form action="/action_page.php">
<input type="radio" id="thinking" name="member" value="thinking">
<label for="thinking">Thinking about joining the club</label><br>
<input type="radio" id="member" name="member" value="member">
<label for="member">Already a member</label><br>
<br>
</form></div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Message</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Message" required style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Send">
</div>
</div>
</form>
</div>
</div>
</div>
<footer id="footer">
Copyright © 2020 Simply Designed For You
</footer>
</div>
</body></html>
So this is how it shows when I add it all together. Both menu's and columns not stacking.
Assuming you want to use the same elements in your navbar on both large and small screens I would recommend not having two separate navbars in your HTML document. If you change one of them later, then you'll also need to update the other one.
W3schools has a good, basic tutorial on media queries. Media queries provide you with a way of defining special CSS rules based on the size of the browser. So if your site is opened on a smaller device, your navbar will be formatted according to the code in your media query.
Try to use media query, But first you need to set up your browser and make it like you're working on a phone to preview what you're doing, so first Press F12 (better use chrome), Look for the phone widget on the top-left , click on it, and start working with Media Query.
For example:
#media screen and (max-width:768px) {
body {
background: red!important;
/* That means that on a 768px-width screen the body will be red. */
}
}
I am trying to add a CSS to a form which has different formatting from the rest, however, if I add a separate style.css file, it applies to the entire web site which I don't want. I need to add spaces between the input fields, labels, and buttons. I'm not sure which CSS file is overriding as I have about 20 of them. Is there any way to override it and apply it to to the class "box-body"
<!-- To Do List -->
<div class="col-lg-6">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">To Do List</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-
widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-
widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<!-- <link href='https://fonts.googleapis.com/css?
family=Lato:300,400,700' rel='stylesheet' type='text/css'> ->
<p>
<label for="new-task">Add Item</label><input id="new-task"
type="text"><button>Add</button>
</p>
<h3>To Do</h3>
<ul id="incomplete-tasks">
<li><input type="checkbox"><label>Pay Bills</label><input
type="text"><button class="edit">Edit</button><button
class="delete">Delete</button></li>
<li class="editMode"><input type="checkbox"><label>Go
Shopping</label><input type="text" value="Go Shopping">
<button class="edit">Edit</button><button
class="delete">Delete</button></li>
</ul>
<h3>Completed</h3>
<ul id="completed-tasks">
<li><input type="checkbox" checked><label>See the
Doctor</label><input type="text"><button
class="edit">Edit</button>
<button class="delete">Delete</button></li>
</ul>
<script type="text/javascript" src="app.js"></script>
<script src="js/index.js"></script>
</div>
</div>
</div>
<!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
What I have currently: currently
What the box body should look like: should look like
/* To do List CSS*/
.containerToDo {
display: block;
width: 400px;
margin: 100px auto 0;
}
.box-body {
background: #fff;
color: #333;
font-family: Lato, sans-serif;
}
ul {
margin: 0;
padding: 0;
}
li * {
float: left;
}
li, h3 {
clear:both;
list-style:none;
}
input, button {
outline: none;
}
button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 10px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
}
button:hover {
color: #333;
}
/* Heading */
h3,
label[for='new-task'] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 10px;
text-transform: uppercase;
}
input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 18px;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
border-radius: 6px;
font-family: Lato, sans-serif;
color: #888;
}
input[type="text"]:focus {
color: #333;
}
/* New Task */
label[for='new-task'] {
display: block;
margin: 0 0 20px;
}
input#new-task {
float: left;
width: 318px;
}
p > button:hover {
color: #0FC57C;
}
/* Task list */
li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
li > input[type="checkbox"] {
margin: 0 10px;
position: relative;
top: 15px;
}
li > label {
font-size: 18px;
line-height: 40px;
width: 237px;
padding: 0 0 0 11px;
}
li > input[type="text"] {
width: 226px;
}
li > .delete:hover {
color: #CF2323;
}
/* Completed */
#completed-tasks label {
text-decoration: line-through;
color: #888;
}
/* Edit Task */
ul li input[type=text] {
display:none;
}
ul li.editMode input[type=text] {
display:block;
}
ul li.editMode label {
display:none;
}
.input#new-task{
margin-left: 20px;
padding:20px;
For each selector prepend .box-body, like .box-body button.
You can do something like this,
Create a separate html file with .box-body div & style you want at the top. The file would be something like this (this is just a rough idea),
<style>
.box-body {
background: #fff;
color: #333;
font-family: Lato, sans-serif;
}
</style>
<div class="box-body">
<link href='https://fonts.googleapis.com/css?
family=Lato:300,400,700' rel='stylesheet' type='text/css'> ->
<p>
<label for="new-task">Add Item</label><input id="new-task"
type="text"><button>Add</button>
</p>
<script type="text/javascript" src="app.js"></script>
<script src="js/index.js"></script>
</div>
Let's say the name of the file is box-body.html. Come to main page & remove .box-body div & add this,
<div id="box-body"></div>
Then add this before </body> at the bottom of the main code,
<script>
$('#box-body').load('./box-body.html');
</script>
body {
font-family: 'Ubuntu', sans-serif;
background: #0d0d0d;
}
body a {
color: #fff;
}
body a:hover {
color: #fff;
}
#media (min-width: 1500px) {
.container{
width: 1470px !important;
}
}
nav {
background: #1c1c1c !important;
margin-bottom: 50px;
}
.toper {
padding: 100px;
background: #071931;
color: #fff;
}
.main {
background: #121212;
border-radius: 2px;
margin-top: -60px;
color: #fff;
padding: 15px 15px;
}
.container-first {
background: #2a2a2a;
margin: 0px 0px 15px 0px;
padding: 5px;
}
.breadcrumb {
margin: 0px;
background: #2a2a2a;
}
.container-first-right {
padding-top: 2px;
}
#media screen and (max-width: 768px)
{
.container-first-right {
float: none !important;
}
}
.welcome {
background: #444;
border-radius: 3px;
padding: 0px !important;
margin-bottom: 15px;
}
.welcome-header
{
padding: 15px 20px 15px 20px;
background: #2d2d2d;
border-radius: 3px;
margin: 10px;
box-shadow: inset 0px 0px 15px 0px #000;
}
.welcome-text
{
padding: 10px;
margin: 10px;
color: #ccc;
}
.welcome-action {
padding: 15px 0px 15px 20px;
background: #4d4d4d;
color: #ccc;
letter-spacing: 5px;
border-radius: 3px;
}
.bluer {
padding: 15px;
background: #046092;
border-radius: 3px;
font-weight: 500;
}
.section-bluer
{
padding: 0px;
margin-top: 15px;
}
.section-first
{
background: #1c1c1c;
margin: 0px;
padding: 10px;
}
.section-picture
{
padding: 5px;
height: 100%;
text-align: center;
}
.section-picture > img
{
border: 1px solid #016d9b;
vertical-align: middle;
}
.section-this p
{
color: #ccc;
font-size: 12px;
}
.section-this h4 a
{
color: #87b8d7;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500" rel="stylesheet">
</head>
<body>
<main class="container main">
<div class="container-fluid bluer">
Najnowszy news: #98 Tygodnik MPC News - O grach MMORPG słów kilka!
</div>
<div clas="container-fluid row">
<div class="col-sm-8 section-bluer">
<div class="bluer">
Projekty MPCforum.pl
</div>
<div class="row section-first">
<div class="col-sm-1 section-picture">
<img src="fb.png" />
</div>
<div class="col-sm-8 section-this">
<h4>League of Legends</h4>
<p>Ćwicz swój refleks, opanuj percepcję i zostań przywódcą grupy! Stań się prawdziwym bohaterem świata League of Legends i doskonal swoje umiejętności taktyczne.</p>
<hr>
Metin2 - Publikacje Serwerów, Metin2 - Publikacje Serwerów, Metin2 - Publikacje Serwerów,
</div>
<div class="col-sm-3 section-last-post">
asdasd
</div>
</div>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</main>
</body>
</html>
It is something like this:
And as you can see I want this image to have vertical align middle.
I tried to add it with css, tried setting this column height not 100% but 100px or more. Make this img display inline-block etc....
And nothing works good. And have no Idea what to do now with it and make this works.
If you want to keep your current HTML structure you could add the image as a pseudoelement and center it vertically. It's not a pretty solution, and you'll need to use media queries to undo this. Best to view the snippet full screen.
body {
font-family: 'Ubuntu', sans-serif;
background: #0d0d0d;
}
body a {
color: #fff;
}
body a:hover {
color: #fff;
}
#media (min-width: 1500px) {
.container {
width: 1470px !important;
}
}
nav {
background: #1c1c1c !important;
margin-bottom: 50px;
}
.toper {
padding: 100px;
background: #071931;
color: #fff;
}
.main {
background: #121212;
border-radius: 2px;
margin-top: -60px;
color: #fff;
padding: 15px 15px;
}
.container-first {
background: #2a2a2a;
margin: 0px 0px 15px 0px;
padding: 5px;
}
.breadcrumb {
margin: 0px;
background: #2a2a2a;
}
.container-first-right {
padding-top: 2px;
}
#media screen and (max-width: 768px) {
.container-first-right {
float: none !important;
}
}
.welcome {
background: #444;
border-radius: 3px;
padding: 0px !important;
margin-bottom: 15px;
}
.welcome-header {
padding: 15px 20px 15px 20px;
background: #2d2d2d;
border-radius: 3px;
margin: 10px;
box-shadow: inset 0px 0px 15px 0px #000;
}
.welcome-text {
padding: 10px;
margin: 10px;
color: #ccc;
}
.welcome-action {
padding: 15px 0px 15px 20px;
background: #4d4d4d;
color: #ccc;
letter-spacing: 5px;
border-radius: 3px;
}
.bluer {
padding: 15px;
background: #046092;
border-radius: 3px;
font-weight: 500;
}
.section-bluer {
padding: 0px;
margin-top: 15px;
}
.section-first {
background: #1c1c1c;
margin: 0px;
padding: 10px;
}
.section-picture {
padding: 5px;
height: 100%;
text-align: center;
}
.section-picture>img {
border: 1px solid #016d9b;
vertical-align: middle;
}
.section-this p {
color: #ccc;
font-size: 12px;
}
.section-this h4 a {
color: #87b8d7;
font-weight: 500;
}
.section-first {
position: relative;
}
.section-first::before {
position: absolute;
display: block !important;
width: 40px;
height: 40px;
content: url(https://placehold.it/40x40) !important;
top: 50%;
transform: translateY(-50%);
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500" rel="stylesheet">
</head>
<body>
<main class="container main">
<div class="container-fluid bluer">
Najnowszy news: #98 Tygodnik MPC News - O grach MMORPG słów kilka!
</div>
<div clas="container-fluid row">
<div class="col-sm-8 section-bluer">
<div class="bluer">
Projekty MPCforum.pl
</div>
<div class="row section-first">
<div class="col-sm-1 section-picture">
</div>
<div class="col-sm-8 section-this">
<h4>League of Legends</h4>
<p>Ćwicz swój refleks, opanuj percepcję i zostań przywódcą grupy! Stań się prawdziwym bohaterem świata League of Legends i doskonal swoje umiejętności taktyczne.</p>
<hr>
Metin2 - Publikacje Serwerów, Metin2 - Publikacje Serwerów, Metin2 - Publikacje Serwerów,
</div>
<div class="col-sm-3 section-last-post">
asdasd
</div>
</div>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</main>
</body>
</html>
The column/div containing the image is currently only the height of the image because the div is floated, as ovokuro mentioned. To make it match the height of your other columns, you can first adjust the height of the column/div (col-sm-1) then manipulate the image's positioning inside it.
If a simple situation where all your rows will have a fixed height, you could try setting col-sm-1 to the needed row height (e.g. 100px) and then adjusting the image's position with margin/padding/etc. as needed.
If your rows will vary in height, here are a few approaches that have worked well:
HTML/CSS: Making two floating divs the same height
https://css-tricks.com/fluid-width-equal-height-columns/
Hope one of these works out!
How do I move the magnifying glass to the right hand side in my input field?
Here's my Fiddle.
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body {
margin: 30px;
}
.search {
position: relative;
color: #aaa;
font-size: 16px;
}
.search input {
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input {
text-indent: 32px;
}
.search .fa-search {
position: absolute;
top: 10px;
left: 10px;
}
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term">
</div>
You set left: 10px to an icon too. Set there more pixels from left side, or directly pixels from right.
.search .fa-search {left: 230px;}
http://jsfiddle.net/xhjLyf1k/1/
Setting right position instead of the left one (to prevent resizing of input field):
.search {display: inline-block} /* prevent 100% width */
.search .fa-search {left: auto; right: 10px;}
http://jsfiddle.net/xhjLyf1k/2/
you can also use a ::before pseudo-element within in the css itself to add a icon at right
.search::before {
position: absolute;
height: 3rem;
width: 3rem;
top: 50%;
transform: translate(-50%, -50%);
right: 0rem;
content: "";
background-image: url('../images/search.png');
background-size: contain;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>
<div class='form-group'>
<label>Clave</label>
<div class="input-group input-group-sm" >
<input class='form-control' type="password">
<div class="input-group-btn">
<button type="submit" id="togglePassword" class="btn btn-default fa fa-eye"></button>
</div>
</div>
</div>
Bootstrap y Font Awesome
https://jsfiddle.net/jlujan/kgxo81fm/15/
Create a relative container span around the icon and input so the icon is always positioned relative to the input, rather than the div which is 100% width. Then you can move this component anywhere and have the icon work.
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body {
margin: 30px;
}
.search {
color: #aaa;
font-size: 16px;
}
.form-element {
position: relative;
}
.search input {
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input {
text-indent: 1em;
}
.search .fa-search {
position: absolute;
top: 0;
right: 10px;
bottom: 0;
}
<div class="search">
<span class="form-element">
<span class="fa fa-search"></span>
<input placeholder="Search term">
</span>
</div>
I asked the same question before, but i made code changes from the past. I still have the same problem of adjusting the div size.
I am trying to design a login page, the screenshot is below.
http://prntscr.com/2pksiq (latest)
Where as i want the output as http://prntscr.com/2pga73 . I am trying to reduce the size of the tags
<div id="logo" class="logo col-xs-2"></div>
<div id="title" class="page-title green-bg col-xs-8">Local Adventures</div>
I am new to CSS, please suggest me a way to fix this. I am using twitter bootstrap in my project.
I have the below HTML:
<head>
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/js/bootstrap.min.js"></script>
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/createaccount.css" rel="stylesheet">
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/styles.css"rel='stylesheet' type='text/css' href='styles.css' />
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/main.css" rel="stylesheet">
<meta charset="utf-8">
</head>
<title>Local-Adventures</title>
<div class="visible-xs stop-detail">
<div id="login-form">
<div class="logo col-xs-4"></div>
<div class="page-title green-bg col-xs-8">Local Adventures</div>
Create an Account
Sign In
<input type="email" required value="Email Address" onBlur="if(this.value=='')this.value='Email Address'" onFocus="if(this.value=='Email Address')this.value='' ">
<input type="email" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' ">
<input type="email" required value="Confirm password" onBlur="if(this.value=='')this.value='Confirm password'" onFocus="if(this.value=='Confirm password')this.value='' ">
<br><br>
<span class='btn btn-lg btn-success btn-block'>Create An Account</span>
<span class='btn btn-lg btn-primary btn-block'>Facebook Login</span>
</div> <!-- end login-form -->
</div>
My CSS is below:
#charset "utf-8";
/* CSS Document */
/* ---------- GENERAL ---------- */
/*
body {
background: #FFFFFF;
color: #999;
font: 100%/1.5em sans-serif;
margin: 0;
}
*/
a {
color: #2a2a2a;
text-decoration: none;
margin:1px 33;
}
a:hover { color: #88c425; }
fieldset {
border: none;
margin: 0;
}
.btn-success {
border-radius:0px;
background-color: #88c425
}
.btn-success:hover {
background-color: #88c425
}
.btn-primary {
border-radius:0px;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
margin: 0;
-webkit-appearance: none;
}
input:focus {
outline: none;
}
input[type="submit"] { cursor: pointer; }
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after { clear: both; }
/* ---------- LOGIN-FORM ---------- */
#login-form {
margin: 50px auto;
width: 300px;
}
#login-form h3 {
background-color: #79a002;
border-radius: 5px 5px 0 0;
color: #fff;
font-size: 14px;
padding: 20px;
text-align: center;
text-transform: uppercase;
}
#login-form fieldset {
background: #fff;
border-radius: 0 0 -1px -1px;
padding: 0px;
}
#login-form fieldset:before {
background-color: #fff;
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
#login-form input {
font-size: 14px;
}
#login-form input[type="email"], #login-form input[type="password"] {
border:none; /* clear previous borders */
border-bottom: 1px solid #88c425; /* add bottom border */
padding: 12px 10px;
width: 300px;
}
#login-form input[type="email"] {
border-radius: 3px 3px 0 0;
}
#login-form input[type="password"] {
border-top: none;
border-radius: 0px 0px 3px 3px;
}
#login-form input[type="submit"] {
background: #1dabb8;
border-radius: 3px;
color: #fff;
float: right;
font-weight: bold;
margin-top: 20px;
padding: 12px 20px;
}
You can use a developer tool to see what is effecting each element. For example in Firefox if you right click on any thing on the page and press inspect element, it will show you what css attributes are applied to it, what tags they are under and even what css document they are in and the line they are on! from there you can go into your css and change it or even change things on the live page itself in the inspect element panel to give yourself a preview of what you want to do.
Another good tool you should learn to use is firebug, try downloading it and practice using it.
Fiddle: http://jsfiddle.net/Varinder/ndcad/
Frameworks like bootstrap are generally agnostic of requirement wider than basic web app or control elements etc
In your case, specific header stylings etc would be a bit of a pain in the neck to acomplish via a framwork.
It's always a good idea to rely on frameworks as little as possible.
Following will put you in right direction:
HTML
<div class="login-form-header">
<div class="logo">
<img src="http://placehold.it/50x50" />
</div>
<h2 class="page-title green-bg">Local Adventures</h2>
</div>
Shying away from using grid classes as they wont fit in here.
CSS
.login-form-header {
overflow:hidden; /* clearfix */
background:#88C425;
}
.logo {
float:left;
}
.page-title {
margin:0;
white-space:nowrap;
text-overflow:ellipsis;
color:white;
line-height:50px; /* height of the logo image to center text verticaly */
margin-left:60px;
}