I want that my "New post" and "Log out" buttons from my blog website to be in the right side of the header. But they are in left, under the "All posts"...print screen of my project
"application.html.erb" file:
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application' , 'http://fonts.googleapis.com/css?family=Raleway:400,700' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div id="sidebar">
<div id="logo">
<%= link_to root_path do%>
<%= image_tag "logo.svg" %>
<% end %>
</div>
<ul>
<li class="category">Website</li>
<li><%= link_to "Blog", root_path %></li>
<li>About</li>
</ul>
<ul>
<li class="category">Social</li>
<li>Facebook</li>
<li>GitHub</li>
<li>Gmail</li>
</ul>
<p class="sign_in">Admin Login</p>
</div>
</div>
<div id="main_content">
<div id="header">
<p>All posts</p>
<div class="bottons">
<button class="button"><%= link_to "New Post", new_post_path %>
</button>
<button class="button">Log Out</button>
</div>
</div>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert") %>
<% end %>
<%= yield %>
</div>
</body>
</html>
"application.css.scss" file:
#import 'normalize';
html, body {
font-family: 'Raleway', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
}
a {
text-decoration: none;
color: inherit;
}
#sidebar {
width: 250px;
position: fixed;
left: 0;
top: 0;
height: 100%;
background: #f5f7f9;
padding: 7em 0 0 0;
border-right: 1px solid #d6dce0;
#logo {
width: 40px;
position: absolute;
right: 3em;
top: 3em;
}
ul {
list-style: none;
text-align: right;
padding-right: 3em;
.category {
font-weight: 700;
font-size: 0.7em;
text-transform: uppercase;
color: #33acb7;
}
li {
padding: .5em 0;
a {
color: #9eafba;
text-decoration: none;
transition: all .4s ease;
&:hover {
color: #33acb7;
}
}
}
.active {
a {
color: #33acb7;
}
}
}
.sign_in {
position: absolute;
right: 3em;
top: 80%;
font-size: .8em;
color: #9eafba;
}
}
.button {
outline: none;
background: transparent;
border: 1px solid #d6dce0;
padding: .5em 1.5em;
border-radius: 1.5em;
&:hover {
border: 1px solid #33acb7;
color: #33acb7;
a {
color: #33acb7 !important;
}
}
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
#main_content {
margin-left: 250px;
#header {
padding: 1em 3em;
border-bottom: 1px solid #d6dce0;
background: #f5f7f9;
color: #9eafba;
p {
display: inline;
}
a {
color: #9eafba;
text-decoration: none;
}
.buttons {
float: right;
margin-top: -6px;
.button {
font-size: .8em;
margin-left: .5em;
}
}
}
.post_wrapper {
padding: 3em;
border-bottom: 1px solid #d6dce0;
.title {
margin: 0;
a {
font-weight: 500;
text-decoration: none;
color: #2a2f35;
font-size: 1.5em;
&:hover {
color: #33acb7;
}
}
}
.date_and_author {
color: #9eafba;
margin: .5em 0 0 0;
}
}
#post_content {
padding: 1em 3em;
.title {
font-weight: 500;
text-decoration: none;
color: #2a2f35;
font-size: 2.5em;
margin-bottom: 0;
}
.body {
font-size: 1.1em;
line-height: 1.75;
}
.date_and_author {
color: #9eafba;
margin: .5em 0 2em 0;
}
#comments {
h2 {
margin: 3em 0 1em 0;
border-bottom: 1px solid #d6dce0;
padding-bottom: 0.5em;
}
h3 {
margin-top: 2em;
}
.comment {
border-bottom: 1px solid #d6dce0;
padding: 1.5em 2em;
.clear_both {
clear: both;
}
&:after {
clear: both;
}
.comment_content {
float: left;
.comment_name {
margin: 1em 0 0 0;
font-size: 0.7em;
text-transform: uppercase;
}
.comment_body {
font-size: 1.2em;
margin: 0.2em 0 0 0;
}
.comment_time {
margin-top: 1.2em;
font-size: .8em;
}
}
.button {
float: right;
}
}
input[type="text"], textarea {
width: 50%;
}
}
}
#page_wrapper {
padding: 3em;
#profile_image {
width: 300px;
float: left;
margin-right: 2em;
img {
width: 100%;
border-radius: 0.35em;
}
}
#content {
h1 {
font-weight: 500;
}
p {
font-size: 1.1em;
line-height: 1.75;
}
a {
color: #33acb7;
font-weight: 700;
text-decoration: none;
}
}
}
.links {
margin: 2em 0;
}
input[type="text"], input[type="email"], input[type="password"], textarea {
width: 90%;
border: 1px solid #d6dce0;
border-radius: .35em;
margin-top: 10px;
padding: .5em 1em;
line-height: 1.75;
}
input[type="text"] {
height: 35px;
}
textarea {
min-height: 180px;
}
input[type="submit"] {
outline: none;
background: transparent;
border: 1px solid #d6dce0;
padding: .5em 1.5em;
font-size: 1.1em;
border-radius: 1.5em;
margin-left: .5em;
&:hover {
border: 1px solid #33acb7;
color: #33acb7;
}
}
}
Please help me to move these buttons on right. Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!
You have a typo in your class name in application.html.erb for the buttons div. Change:
<div class="bottons"> ...
to
<div class="buttons"> ...
Here is an example working fiddle.
Related
I've been stuck for about a week on this and i really need help. Searched everywhere but to no avail. The problem i am facing is that my flex items get pushed horizontally when i open a dropdown-menu that's togglable from another item on the list. Screenshot describing the problem : http://imgur.com/H6FUf3o
I am using rails and react.
the header.html.erb
<nav data-behavior="animated-navbar" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid col-md-10 col-md-offset-1">
<div class="navbar-header">
<%= link_to root_path, class: "navbar-brand", id: "logo" do %>
<%= image_tag('logo.png', width: 55) %>
<% end %>
</div>
<ul class="nav navbar-nav filter-links">
<li>
<% if user_signed_in? %>
<%= nav_link_to "Home", root_path %>
<% else %>
<%= nav_link_to "Staff pick", root_path %>
<% end %>
</li>
<li><%= nav_link_to "Top stories", top_stories_path %></li>
<% if user_signed_in? %>
<li><%= nav_link_to "Bookmarks", dashboard_bookmarks_path %></li>
<% else %>
<li>Bookmarks</li>
<% end %>
</ul>
<div class="folding-nav">
<ul class="nav navbar-nav navbar-right">
<li class="main-searchbar">
<%= react_component('SearchContainer') %>
</li>
<% if user_signed_in? %>
<li class="new-post-button"><%= link_to "Write a story", new_post_path, class: "button" %></li>
<li id="notifications">
<%= react_component('NotificationsContainer', {}) %>
</li>
<%= render 'layouts/avatar_dropdown' %>
<% else %>
<li class="new-post-button"><%= link_to "Write a story", new_post_path, class: "button", data: { behavior: 'trigger-overlay' } %></li>
<li class="sign-in-button"><%= link_to "Sign in / Sign up", new_user_session_path, class: 'button green-border-button', data: { behavior: 'trigger-overlay' } %></li>
<% end %>
</ul>
</div>
</div>
</nav>
the header.scss
body {
padding-top: 0;
}
.container-fluid, .container {
padding: 0;
}
.navbar-header {
padding: 8px 0;
border-bottom: 1px solid $super-light-gray;
}
.navbar-fixed-top {
position: relative;
}
.navbar-nav, .navbar-nav > li {
display: inline-block;
}
.navbar-nav {
margin: 5 10px;
}
.navbar-nav > .open > a {
background-color: $white !important;
}
.navbar-nav > li > a {
padding: 7px 24px;
}
/** Navbar animation **/
nav.navbar {
transition: 0.3s transform;
&.is-inView {
transform: translateY(0);
}
&.is-hidden {
transform: translateY(-100%);
}
}
.navbar-admin {
ul.nav.navbar-nav > li > a {
color: #fff;
border: none;
}
}
nav.navbar {
margin-bottom: 0;
border-radius: 0;
border-color: $super-light-gray;
&.navbar-default {
background-color: $greenlight;
}
.navbar-brand {
height: 40px;
}
.regular-nav {
color: $white;
}
.filter-links {
margin-left: 9px;
li > a {
text-decoration: none;
font-family: 'CaviarBI';
font-size: 18px;
color: $white;
font-weight: 400;
&.active {
font-size: 25px;
}
}
}
.folding-nav {
position: absolute;
top: 3px;
right: 0;
}
.navbar-right {
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
align-content: stretch;
align-items: flex-start;
}
.navbar-right > li {
order: 0;
flex: 0 1 auto !important;
align-self: auto !important;
}
.new-post-button {
display: none;
}
.new-post-button a {
transition: all .1s;
color: $light-gray;
font-family: 'Caviar';
font-weight: 600;
background-color: $white;
}
.new-post-button:hover {
a {
color: $greenlight;
border-color: $border-hover-color;
background-color: $white;
}
}
.new-post-button,
.sign-in-button {
margin-top: 5px;
margin-right: 10px;
.button {
padding: 0.6em 1em 0.7em 1em;
}
}
.account {
padding-top: 5px;
}
a.avatar-wrapper {
padding: 0;
display: inline;
float:none;
margin: 3px 15px 0 10px;
}
a.avatar-wrapper img.avatar-image {
border: 1.5px solid $border-color;
transition: all .1s;
}
a.avatar-wrapper:hover img.avatar-image, .open a.avatar-wrapper img.avatar-image {
border: 1.5px solid $border-hover-color;
}
.nav-dropdown {
background: #fff;
#include border-radius($popover);
box-shadow: 0 1px 2px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.35);
border: none;
top: 134%;
right: 20px;
a {
color: $light-font-color;
&:hover {
background-color: $white;
color: rgba(0,0,0,0.8);
}
}
.nd-main {
font-size: 16px;
font-weight: 100px;
line-height: 1.4;
}
.nd-sub {
font-size: 14px;
font-weight: 100;
line-height: 1.4;
}
.dropdown-arrow-top {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
z-index: 20;
border-bottom: 10px solid #fff;
position: absolute;
right: 10px;
top: -10px;
}
.dropdown-arrow-bottom {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
z-index: 10;
border-bottom: 11px solid rgba(0, 0, 0, 0.11);
position: absolute;
right: 8px;
top: -11px;
}
}
#logo {
width: 128px;
margin-left: 15px;
img {
top: 5px;
height: 31px;
}
span {
right: 0;
text-transform: uppercase;
font-weight: bold;
}
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width: $screen-sm-min) {
body {
padding-top: 67px;
}
.navbar-header {
border-bottom: none;
}
.navbar-fixed-top {
position: fixed;
}
nav.navbar {
padding: 5px 0;
.filter-links {
margin-top: 16px;
margin-left: 0;
}
#logo {
width: 138px;
margin-left: 0;
}
.new-post-button {
display: inline-flex;
}
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: $screen-md-min) {
nav.navbar {
#logo {
width: 150px;
}
}
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width: $screen-lg-min) {
}
#media (max-width: 767px){
.navbar-nav
.open .dropdown-menu {
background-color: $white;
box-shadow: 0 1px 2px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.35);
clear:both;
}
}
The dropdown-menu is for notifications, done with react. Here's what react renders :
render () {
return (
<div className="notification-container">
<a className={`dropdown-toggle ${this.state.newNotificationCount > 0 ? 'active' : ''}`}
onClick={() => this.handleMarkAsTouched()}
data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
{this.renderNotificationIcon()}
</a>
<div
className="dropdown-menu"
ref={(ref) => {this.dropdownRef = ref}}
>
<span className="dropdown-arrow-top"></span>
<span className="dropdown-arrow-bottom"></span>
<div className="notification-header">
<span>Notifications</span>
<a className="pull-right mark-all-as-read"
onClick={(e) => this.handleMarkAllAsRead(e)}>
Mark All as Read
</a>
</div>
<ul
onScroll={() => this.handleScroll()}
ref={(ref) => {this.notificationsListRef = ref}}
className="notifications-list">
{this.renderNotificationItems()}
{this.loadMoreButton()}
</ul>
</div>
</div>
);
}
lastly the notifications.scss :
#notifications {
a.dropdown-toggle.active {
background-color: rgba($accent-color, 0.8);
}
a.dropdown-toggle {
display: inline-block;
width: 40px;
height: 40px;
padding: 0;
margin-top: 5px;
position: relative;
background-color: white;
border: 1.5px solid $border-color;
transition: all .1s;
#include border-radius($round);
i.fa-bell-o,
span#new-notifications-count {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.3em;
}
#bell {
color: $light-font-color;
}
span#new-notifications-count {
color: $white;
}
}
a.dropdown-toggle:hover {
border: 1.5px solid $border-hover-color;
#bell{
color: $greenlight;
}
}
}
.notification-container {
.dropdown-menu {
width: 360px;
margin-top: 9px;
}
.notification-header {
padding: 4px 20px;
border-bottom: 1px solid $light-border-color;
color: $font-black;
}
.mark-all-as-read {
cursor: pointer;
color: $light-font-color;
&:hover,
&:active {
color: $accent-color;
}
}
.notifications-list {
overflow: hidden;
overflow-y: scroll;
max-height: 440px;
list-style: none;
padding: 0;
}
.load-more {
text-align: center;
}
.dropdown-arrow-top {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
z-index: 20;
border-bottom: 10px solid #fff;
position: absolute;
right: 10px;
top: -10px;
}
.dropdown-arrow-bottom {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
z-index: 10;
border-bottom: 11px solid rgba(0, 0, 0, 0.11);
position: absolute;
right: 8px;
top: -11px;
}
}
.notifications-list {
.avatar-image {
margin-right: 18px;
vertical-align: baseline;
}
li {
padding: 8px 0;
border-bottom: 1px solid $light-border-color;
&.unread-notification {
border-left: 2px solid $accent-color;
}
}
li > a {
color: $light-font-color;
display: block;
padding: 3px 0 3px 20px;
clear: both;
white-space: nowrap;
font-weight: normal;
transition: color 200ms;
&:hover {
color: $font-black;
}
}
.notification-metadata {
display: inline-block;
}
.fa {
margin-right: 8px;
}
.fa-heart-o {
color: #e81c4f;
}
.fa-user {
color: lightblue;
}
.fa-commenting-o {
color: $light-font-color;
}
}
// Bell Animation for "No Notifications"
.no-notifications {
margin: 10px 11px 8px 10px;
padding: 10px;
text-align: center;
position: relative;
.speech-bubble {
border: $border-color 1px solid;
padding: 10px;
#include border-radius($radius);
width: 170px;
margin: 0 auto;
color: $light-font-color;
}
.speech-arrow-top {
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
z-index: 20;
border-top: 10px solid #fff;
position: absolute;
right: 46.7%;
top: 36.5%;
}
.speech-arrow-bottom {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
z-index: 10;
border-top: 11px solid $border-color;
position: absolute;
right: 46.3%;
top: none;
}
.ringer {
margin: 0 auto;
width: 50px;
margin-top: 20px;
}
}
.bell-jar,.mouth,.eye{opacity:0.2;fill:$black;}
.blink, {
animation: blink 5s step-start 0s infinite;
}
#keyframes blink {
53% {
opacity: 0.2;
}
55% {
opacity: 0.0;
}
57% {
opacity: 0.2;
}
59% {
opacity: 0.0;
}
61% {
opacity: 0.2;
}
}
#media (max-width: 767px){
a.dropdown-toggle {
float:right;
}
}
I'm designing a tv show page for my web design class I'm taking.
I added tabs to my web page to be used as top menu following a tutorial, but now I'm not sure how to center the tabs even using the center tag.
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: right;
border: 1px solid #bbb;
border-bottom-width: 0;
margin: 0;
padding: 0;
}
#header a {
text-decoration: none;
display: block;
background: #eee;
padding: 0.24em 1em;
color: #00c;
width: 8em;
text-align: center;
}
#header a:hover {
background: #ddf;
}
#header #selected {
border-color: black;
}
#header #selected a {
position: relative;
top: 1px;
background: white;
color: black;
font-weight: bold;
}
#content {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
<div id="header">
<center>
<ul>
<li style="font-family: DFKai-SB;">Home
</li>
<li style="font-family: DFKai-SB;">Shows
</li>
<li style="font-family: DFKai-SB;">Classic
</li>
<li style="font-family: DFKai-SB;">More
</li>
</ul>
</center>
</div>
<div id="content">
</div>
add this div with class .centeer to your tabs instead of <center> :
.centeer {
display: table;
margin: 0px auto 0px auto;
}
Live Demo
The float has more priority so that's why your content floats to one side instead of align. In your css at li elements use some inline variant to avoid stacking.
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
display: inline-flex;
border: 1px solid #bbb;
border-bottom-width: 0;
margin: 0;
padding: 0;
}
#header a {
text-decoration: none;
background: #eee;
padding: 0.24em 1em;
color: #00c;
width: 8em;
text-align: center;
}
#header a:hover {
background: #ddf;
}
#header #selected {
border-color: black;
}
#header #selected a {
position: relative;
top: 1px;
background: white;
color: black;
font-weight: bold;
}
#content {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
<div id="header">
<center>
<ul>
<li style="font-family: DFKai-SB;">Home
</li>
<li style="font-family: DFKai-SB;">Shows
</li>
<li style="font-family: DFKai-SB;">Classic
</li>
<li style="font-family: DFKai-SB;">More
</li>
</ul>
</center>
</div>
<div id="content">
</div>
I have used the default(Razor-cshtml) template provided by the Microsoft to insert the data in db using MVC.It is working fine.
Now i have added three new drop-down lists for which i want to apply same look and feel as that of text-box.(Width and style of textbox and dropdown should be same).
Microsoft used div class="editor-field and editor-label" for text-boxes(EditorFor) and labels.But this is not applying for DropdownlistFor.Why is it so??
I even want to change the style like: width and font of textbox.How to do it??
I searched these classes in the default css(site.css) provided by Microsoft,But i'm not finding these classes.How to solve this???
How to make the Uniform css for all the textbox and dropdownlist using default css(site.css) provided by microsoft.
Please suggest me some ways to do it.
My CSHTML Code:
#model Sample.Models.Master.CompanyModel
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<br />
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>CompanyModel</legend>
<div class="editor-label">
#Html.LabelFor(model => model.companyModel.CompanyID)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.companyModel.CompanyID)
#Html.ValidationMessageFor(model => model.companyModel.CompanyID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.companyModel.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.companyModel.Name)
#Html.ValidationMessageFor(model => model.companyModel.Name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.companyModel.Address1)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.companyModel.Address1)
#Html.ValidationMessageFor(model => model.companyModel.Address1)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.companyModel.Address2)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.companyModel.Address2)
#Html.ValidationMessageFor(model => model.companyModel.Address2)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.companyModel.Address3)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.companyModel.Address3)
#Html.ValidationMessageFor(model => model.companyModel.Address3)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.companyModel.CountryID)
</div>
<div class="editor-field">
#Html.DropDownListFor(model=>model.companyModel.CountryID,Model.ddlCompanyModel.ddlCountry,"Select Country")
#Html.ValidationMessageFor(model => model.companyModel.CountryID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.companyModel.StateID)
</div>
<div class="editor-field">
#Html.DropDownListFor(model=>model.companyModel.StateID,Model.ddlCompanyModel.ddlState,"Select State")
#Html.ValidationMessageFor(model => model.companyModel.StateID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.companyModel.CityID)
</div>
<div class="editor-field">
#Html.DropDownListFor(model=>model.companyModel.CityID,Model.ddlCompanyModel.ddlCity,"Select City")
#Html.ValidationMessageFor(model => model.companyModel.CityID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.companyModel.Pin)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.companyModel.Pin)
#Html.ValidationMessageFor(model => model.companyModel.Pin)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.companyModel.Phone)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.companyModel.Phone)
#Html.ValidationMessageFor(model => model.companyModel.Phone)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Default CSS:
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
}
body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
a {
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}
a:link, a:visited,
a:active, a:hover {
color: #333;
}
a:hover {
background-color: #c7d1d6;
}
header, footer, hgroup,
nav, section {
display: block;
}
mark {
background-color: #a6dbed;
padding-left: 5px;
padding-right: 5px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.sidebar {
background-color:#efeeef;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
h1, h2, h3,
h4, h5, h6 {
color: #000;
margin-bottom: 0;
padding-bottom: 0;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.75em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
h5, h6 {
font-size: 1em;
}
h5 a:link, h5 a:visited, h5 a:active {
padding: 0;
text-decoration: none;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 95%;
}
#body {
background-color: #F3F3F3;
clear: both;
/*padding-bottom: 35px;*/
}
.main-content {
/*background: url("../Images/accent.png") no-repeat;*/
padding-left: 10px;
padding-top: 30px;
}
.featured + .main-content {
/*background: url("../Images/heroAccent.png") no-repeat;*/
}
header .content-wrapper {
padding-top: 30px;
padding-bottom:60px;
}
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
height: 100px;
}
/* site title
----------------------------------------------------------*/
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 0;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
/* login
----------------------------------------------------------*/
#login {
display: block;
font-size: .85em;
margin: 0 0 10px;
text-align: right;
}
#login a {
background-color: #d3dce0;
margin-left: 10px;
margin-right: 3px;
padding: 2px 3px;
text-decoration: none;
}
#login a.username {
background: none;
margin: 0;
padding: 0;
text-decoration: underline;
}
#login ul {
margin: 0;
}
#login li {
display: inline;
list-style: none;
}
/* menu
----------------------------------------------------------*/
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 5px;
}
ul#menu li a {
background: none;
color: #999;
text-decoration: none;
}
ul#menu li a:hover {
color: #333;
text-decoration: none;
}
/* left-menu
----------------------------------------------------------*/
ul#left-menu {
font-size: 1.1em;
font-weight: 600;
/*margin: 0 0 5px;*/
padding: 0;
text-align: left;
}
ul#left-menu li {
list-style: none;
padding-left: 18px;
}
ul#left-menu li a {
background: none;
color: #999;
text-decoration: none;
}
ul#left-menu li a:hover {
color: #333;
text-decoration: none;
}
/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
background-color: #fff;
}
.featured .content-wrapper {
background-color: #7ac0da;
background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
color: #3e5667;
padding: 20px 40px 30px 40px;
}
.featured hgroup.title h1, .featured hgroup.title h2 {
color: #fff;
}
.featured p {
font-size: 1.1em;
}
/* page titles */
hgroup.title {
margin-bottom: 10px;
}
hgroup.title h1, hgroup.title h2 {
display: inline;
}
hgroup.title h2 {
font-weight: normal;
margin-left: 3px;
}
/* features */
section.feature {
width: 300px;
float: left;
padding: 10px;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
margin: 25px 0;
padding-left: 45px;
}
ol.round li.zero {
background: url("../Images/orderedList0.png") no-repeat;
}
ol.round li.one {
background: url("../Images/orderedList1.png") no-repeat;
}
ol.round li.two {
background: url("../Images/orderedList2.png") no-repeat;
}
ol.round li.three {
background: url("../Images/orderedList3.png") no-repeat;
}
ol.round li.four {
background: url("../Images/orderedList4.png") no-repeat;
}
ol.round li.five {
background: url("../Images/orderedList5.png") no-repeat;
}
ol.round li.six {
background: url("../Images/orderedList6.png") no-repeat;
}
ol.round li.seven {
background: url("../Images/orderedList7.png") no-repeat;
}
ol.round li.eight {
background: url("../Images/orderedList8.png") no-repeat;
}
ol.round li.nine {
background: url("../Images/orderedList9.png") no-repeat;
}
/* content */
article {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}
aside ul {
list-style: none;
padding: 0;
}
aside ul li {
background: url("../Images/bullet.png") no-repeat 0 50%;
padding: 2px 0 2px 20px;
}
.label {
font-weight: 700;
}
/* login page */
#loginForm {
border-right: solid 2px #c8c8c8;
float: left;
width: 55%;
}
#loginForm .validation-error {
display: block;
margin-left: 15px;
}
#loginForm .validation-summary-errors ul {
margin: 0;
padding: 0;
}
#loginForm .validation-summary-errors li {
display: inline;
list-style: none;
margin: 0;
}
#loginForm input {
width: 250px;
}
#loginForm input[type="checkbox"],
#loginForm input[type="submit"],
#loginForm input[type="button"],
#loginForm button {
width: auto;
}
#socialLoginForm {
margin-left: 40px;
float: left;
width: 40%;
}
#socialLoginForm h2 {
margin-bottom: 5px;
}
#socialLoginList button {
margin-bottom: 12px;
}
#logoutForm {
display: inline;
}
/* contact */
.contact h3 {
font-size: 1.2em;
}
.contact p {
margin: 5px 0 0 10px;
}
.contact iframe {
border: 1px solid #333;
margin: 5px 0 0 10px;
}
/* forms */
fieldset {
border: none;
margin: 0;
padding: 0;
}
fieldset legend {
display: none;
}
fieldset ol {
padding: 0;
list-style: none;
}
fieldset ol li {
padding-bottom: 5px;
}
label {
display: block;
font-size: 1.2em;
font-weight: 600;
}
label.checkbox {
display: inline;
}
input, textarea {
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: 1.2em;
margin: 5px 0 6px 0;
padding: 5px;
width: 300px;
}
textarea {
font-family: inherit;
width: 500px;
}
input:focus, textarea:focus {
border: 1px solid #7ac0da;
}
input[type="checkbox"] {
background: transparent;
border: inherit;
width: auto;
}
input[type="submit"],
input[type="button"],
button {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 1.2em;
font-weight: 600;
padding: 7px;
margin-right: 8px;
width: auto;
}
td input[type="submit"],
td input[type="button"],
td button {
font-size: 1em;
padding: 4px;
margin-right: 4px;
}
/* info and errors */
.message-info {
border: 1px solid;
clear: both;
padding: 10px 20px;
}
.message-error {
clear: both;
color: #e80c4d;
font-size: 1.1em;
font-weight: bold;
margin: 20px 0 10px 0;
}
.message-success {
color: #7ac0da;
font-size: 1.3em;
font-weight: bold;
margin: 20px 0 10px 0;
}
.error {
color: #e80c4d;
}
/* styles for validation helpers */
.field-validation-error {
color: #e80c4d;
font-weight: bold;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #e80c4d;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #e80c4d;
font-weight: bold;
font-size: 1.1em;
}
.validation-summary-valid {
display: none;
}
/* tables
----------------------------------------------------------*/
table {
border-collapse: collapse;
border-spacing: 0;
margin-top: 0.75em;
border: 0 none;
}
th {
font-size: 1.2em;
text-align: left;
border: none 0px;
padding-left: 0;
}
th a {
display: block;
position: relative;
}
th a:link, th a:visited, th a:active, th a:hover {
color: #333;
font-weight: 600;
text-decoration: none;
padding: 0;
}
th a:hover {
color: #000;
}
th.asc a, th.desc a {
margin-right: .75em;
}
th.asc a:after, th.desc a:after {
display: block;
position: absolute;
right: 0em;
top: 0;
font-size: 0.75em;
}
th.asc a:after {
content: '▲';
}
th.desc a:after {
content: '▼';
}
td {
padding: 0.25em 0.25em 0.25em 0.5em;
border: 0 none;
}
tr.pager td {
padding: 0 0.25em 0 0;
}
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
/* header
----------------------------------------------------------*/
header .float-left,
header .float-right {
float: none;
}
/* logo */
header .site-title {
margin: 10px;
text-align: center;
}
/* login */
#login {
font-size: .85em;
margin: 0 0 12px;
text-align: center;
}
#login ul {
margin: 5px 0;
padding: 0;
}
#login li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#login a {
background: none;
color: #999;
font-weight: 600;
margin: 2px;
padding: 0;
}
#login a:hover {
color: #333;
}
/* menu */
nav {
margin-bottom: 5px;
}
ul#menu {
margin: 0;
padding: 0;
text-align: center;
}
ul#menu li {
margin: 0;
padding: 0;
}
/* main layout
----------------------------------------------------------*/
.main-content,
.featured + .main-content {
background-position: 10px 0;
}
.content-wrapper {
padding-right: 10px;
padding-left: 10px;
}
.featured .content-wrapper {
padding: 10px;
}
/* page content */
article, aside {
float: none;
width: 100%;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
padding-left: 10px;
margin: 25px 0;
}
ol.round li.zero,
ol.round li.one,
ol.round li.two,
ol.round li.three,
ol.round li.four,
ol.round li.five,
ol.round li.six,
ol.round li.seven,
ol.round li.eight,
ol.round li.nine {
background: none;
}
/* features */
section.feature {
float: none;
padding: 10px;
width: auto;
}
section.feature img {
color: #999;
content: attr(alt);
font-size: 1.5em;
font-weight: 600;
}
/* forms */
input {
width: 90%;
}
/* login page */
#loginForm {
border-right: none;
float: none;
width: auto;
}
#loginForm .validation-error {
display: block;
margin-left: 15px;
}
#socialLoginForm {
margin-left: 0;
float: none;
width: auto;
}
/* footer
----------------------------------------------------------*/
footer .float-left,
footer .float-right {
float: none;
}
footer {
text-align: center;
height: auto;
padding: 0 0;
}
footer p {
margin: 0;
}
}
use like below..
.cssclass{
width:auto!important;
}
You need to use the important, and also reload browser using f5 so that browser don't cache.
According to this Answer by Daniel Imms says
I need to wrap the elements in class as:
HTML as:
<div class="editor">
<label class="editor-label">Test</label>
<input class="editor-field" />
</div>
Instead of:
<label class="editor-label">Test</label>
<input class="editor-field" />
CSS as:
.editor label { /**/ }
.editor input,
.editor select { /**/ }
Instead of:
.editor-label { /**/ }
.editor-field { /**/ }
We may use some javascript to add the classes back in:
var content = document.getElementById('content');
var labels = content.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
labels[i].classList.add('editor-label');
var id = labels[i].getAttribute('for');
var input = document.getElementById(id);
input.classList.add('editor-field');
}
My CSS mirrors the CSS for chapter 11 in hartl but for some reason, the avatars for my followers are lining up vertically instead of horizontally and each column has a line separating them. Like this :
The way it is supposed to look is vertical rows with no lines separating them. Like this :
I am more than happy to share any details that could prove helpful! thanks in advance!
Here is my CSS :
#import url(http://fonts.googleapis.com/css?family=Atomic+Age|Raleway);
#import "bootstrap";
/* mixins, variables, etc. */
$grayMediumLight: #eaeaea;
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-family: 'Raleway', sans-serif;
/*font-family: 'Atomic Age', cursive;*/
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $grayLight;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
font-family: 'Raleway', sans-serif;
float: left;
margin-right: 10px;
font-size: 1.7em;
color: white;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
&:hover {
color: white;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $grayMediumLight;
color: $grayLight;
a {
color: $gray;
&:hover {
color: $grayDarker;
}
}
small {
float: left;
}
ul {
float: right;
list-style: none;
li {
float: left;
margin-left: 10px;
}
}
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box_sizing;
}
/* sidebar */
aside {
section {
padding: 10px 0;
border-top: 1px solid $grayLighter;
&:first-child {
border: 0;
padding-top: 0;
}
span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
}
}
.stats {
overflow: auto;
a {
float: left;
padding: 0 10px;
border-left: 1px solid $grayLighter;
color: gray;
&:first-child {
padding-left: 0;
border: 0;
}
&:hover {
text-decoration: none;
color: $blue;
}
}
strong {
display: block;
}
}
.user_avatars {
overflow: auto;
margin-top: 10px;
.gravatar {
margin: 1px 1px;
}
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
#include box_sizing;
}
input {
height: auto !important;
}
#error_explanation {
color: #f00;
ul {
list-style: none;
margin: 0 0 18px 0;
}
}
.field_with_errors {
#extend .control-group;
#extend .error;
}
/* Users index */
.users {
list-style: none;
margin: 0;
li {
overflow: auto;
padding: 10px 0;
border-top: 1px solid $grayLighter;
&:last-child {
border-bottom: 1px solid $grayLighter;
}
}
}
/* microposts */
.microposts {
list-style: none;
margin: 10px 0 0 0;
li {
padding: 10px 0;
border-top: 1px solid #e8e8e8;
}
}
.content {
display: block;
}
.timestamp {
color: $grayLight;
}
.gravatar {
float: left;
margin-right: 10px;
}
aside {
textarea {
height: 100px;
margin-bottom: 5px;
}
}
Here is my show_follow.html.erb :
<% provide(:title, #title) %>
<div class="row">
<aside class="span4">
<section>
<%= gravatar_for #user %>
<h1><%= #user.name %></h1>
<span><%= link_to "view my profile", #user %></span>
<span><b>Microposts:</b> <%= #user.microposts.count %></span>
</section>
<section>
<%= render 'shared/stats' %>
<% if #users.any? %>
<div class="user_avatars">
<% #users.each do |user| %>
<%= link_to gravatar_for(user, size: 30), user %>
<% end %>
</div>
<% end %>
</section>
</aside>
<div class="span8">
<h3><%= #title %></h3>
<% if #users.any? %>
<ul class="users">
<%= render #users %>
</ul>
<%= will_paginate %>
<% end %>
</div>
</div>
Please help if you can, thank you!
Give an explicit width to the mother <section> of .user_avatar class like 300px or something and make display:block. Apply display:inline-block to .user_avatars and also create a :before class for that <section> and put a display:block in it.
My ASP page looks like this on large screens:
How do i make the page fit the whole screen?
the css file looks like this:
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 3px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
top: 0px;
left: 0px;
}
.header h1
{
border-style: none;
border-color: inherit;
border-width: medium;
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
line-height: 2em;
font-size: 2em;
height: 52px;
width: 338px;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
margin-top: 48px;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: 0px;
height: 13px;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
I tried to set the .page part as following
.page
{
height: 100%;
width: 100%;
background-color: #fff;
margin: 20px auto 0px auto;
border: 3px solid #496077;
}
But it partly worked for the width and it didn't changes the positions of the content:
Any ideas what the problem is?
the site master looks like this:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Styles/TUClogo2.png" style="margin-left: 0px" Height="82px" Width="408px" />
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
height will not work in this case . please add this to your css
html
{
height: 100%;
}
This will force the html tag to occupy 100% height. Hope this help.
In addition to adding height to html, you also need to add it for body as below
html, body
{
width: 100%;
height: 100%;
}