When I have this picture in it only goes a certain amount of height and it wont go past. If you make it smaller it will become smaller, but if you make it bugger it wont be bigger then 50px.
Code:
Hmtl
<body>
<div class="header-img">
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Rx Programming
</a>
</li>
<li>
Calender
</li>
<li>
Achievements
</li>
<li>
Trainer
</li>
<li>
Social
</li>
<li>
Account
</li>
<li>
Contact
</li>
<li>
Sign Out
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
Menu
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
CSS:
.btn .btn-default .btn-right {
padding: 20px;
color: red !important;
float: left;
}
.header-img {
background-image: url(../img/crossfitheader.jpg);
background-position: center;
background-repeat: no-repeat;
background-color: #222;
height: 100%
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
.btn .btn-default .btn-right {
padding: 20px;
color: red !important;
}
#menu-toggle {
padding: 20px;
color: red !important;
}
Your question is very unclear and I'm not exactly sure what you're asking, though I'm assuming you're trying to enlarge an image if the window size is expanded or decreased?
Simple line in your stylesheet can fix this (IF this is what you're asking..)
img{max-width:100%;height:auto;}
All it dose is set the height of the image automatically and give it a responsive quality.
Related
I've got a sidebar, which displays good on desktop. But on mobile devices it acts strange. (On emulators of mobile devices everything is fine).
Here's some screenshots from mobile. The whole display becomes large and sidebar scrolls just a little, other content of menu is unreachable. It also changes according to left part's size.
screenshot 1
screenshot 2
My html (using bootstrap and angularjs):
<div id="wrapper">
<div class="row">
<nav class="navbar navbar-fixed-top orange-back" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">
<a id="menu-toggle" href="" class="btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
<a class="no-decoration-link" href="#">STRICS</a>
</div>
</div>
</div>
</nav>
</div>
<div class="row">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<nav role="navigation">
<ul class="sidebar-nav nav">
<h5 class="nav-group">Расходы и доходы</h5>
<li>Купить материал</li>
<li> Личный кабинет</li>
<li> Выйти</li><br><br>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="view-placement" ng-view></div>
</div>
</div>
</div>
</div>
</div>
</div>
My css:
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
.sidebar-nav {
overflow: scroll;
}
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
top: 51px;
left: 250px;
width: 250px;
background: #FFAB62;
position: fixed;
height: 95%;
overflow-y: auto;
z-index: 1000;
transition: all 0.6s ease 0s;
}
#wrapper.active {
padding-left: 0;
}
#wrapper.active #sidebar-wrapper {
left: 0;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
transition: all 0.6s ease 0s;
padding-right: 4px;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 20px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #41484c;
display: block;
text-decoration: none;
padding-left: 20px;
}
.sidebar-nav li a span:before {
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 20px;
line-height: 18px;
}
.nav>li>a {
padding: 4px 10px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
#menu-toggle {
text-decoration: none;
float: left;
color: #41484c;
padding-right: 15px;
}
#media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
}
Try below code after head tag.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1">
I am trying to get this sidebar in the right handside instead of the lefthandside, what should I do? I have tried almost everything, but I cannot really turn it in my head :-/ Everytime I think I am on the correct track, something is not working.
SIdebar
HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="contentcontainer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 bg-danger">
<h1>Simple Sidebar</h1>
<p>This templaate has a respThis tThis template has a responte has a respTate has a respThis tThis template has a responhis tThis template has a responsive menu toggling system. emplate has a responsive menu toggling system. onsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make surThis template has a responsive menu toggling system. e to keep all page content wThis template has a responsive menu toggling system. ithin the <code>#page-content-wrapper</code>.</p>
Toggle Menu
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
CSS:
/*!
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Toggle Styles */
#wrapper {
padding-right: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-right: 0;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
right:0;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
padding-left: 0;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 180px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
JS:
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
You can following way:
Change padding-right: 250px; from padding-left: 0; in #wrapper and in toggle.
#wrapper.toggled {
padding-right: 0;
}
#sidebar-wrapper should be right: 0; instead of left: 250px;.
Then change margin-right: 250px; in #wrapper.toggled #page-content-wrapper.
And change to
#media(min-width:768px) {
#wrapper {
padding-left: 0;
}
Working Fiddle
Try this
#media (min-width: 768px) {
#sidebar-wrapper {
width: 250px;
left: auto;
right: 0;
margin-left: 0;
}
#page-content-wrapper{
margin-left: -250px;
}
}
I have moved my icon-header from below the mainHeader to above it. It was fine before, but I like it the icon-header above the mainHeader, but the links in my nav are below my mainHeader. I have attempted to use padding, margin and just top, but it stays put. Here is my JSFiddle. My JSFiddle is slightly different to my actual HTML and CSS, as I have all my files in a folder in my home directory. Here is my HTML and CSS:
HTML
<!--HEADER OF WEBSITE-->
<!--Icon Header-->
<div class="bottomHeader">
<div id="icon-navwrap">
<ul id="icon-nav">
<li id="fb"><img src="Header/facebook.png" width="30px" height="30px"/></li>
<li><div id="mini-divider"></div></li>
<li id="yt"><img src="Header/youtube.png" width="30px" height="30px"/></li>
<li><div id="mini-divider"></div></li>
<li id="tt"><img src="Header/twitter.png" width="30px" height="30px"/></li>
<li><div id="mini-divider"></div></li>
</ul>
</div>
</div>
<!--End of Icon Header-->
<!--Main Header-->
<div class="mH-clearfix">
<!--Main Header Logo-->
<div id="mainHeader">
<div id="header_logo">
<div id="logo"><img src="Header/banner.png" alt="Logo" width="300"height="100">
</div>
<!--End of Logo-->
<!--Main Header Links-->
<div id="nav-wrap">
<ul id="nav">
<li>Roster</li>
<li>Gallery</li>
<li>Sponsors</li>
<li>About Us</li>
</ul>
</div>
<!--End of Main Header Links-->
</div>
</div>
</div>
<!--End of Main Header-->
</div>
CSS
/*=================
======= Body ======
=================*/
* {
margin: 0; padding: 0;
}
body {
font-family: "Montserrat";
font-size: 115%;
background-image: url(background.png)
}
/*=======================
====== Header Logo ======
=======================*/
#mainHeader {
background-color: #02236a;
}
.mH-clearfix {
height: auto;
width: 100%;
content: "";
clear: both;
}
#nav {
margin-left: 25%;
}
/*==========================
======= Icon Header ========
==========================*/
.bottomHeader {
background: #000b22;
width: 100%;
height: 30px;
margin: 0 auto;
position: absolute;
margin: 0;
overflow: hidden;
}
#icon-nav li {
float: left;
background-size: 50%;
transition: background-color 0.5s ease;
}
#mini-divider {
position: absolute;
top: 1%;
bottom: 1%;
border-left: 1px solid white;
}
#fb:hover {
background-color: #3f5c9a;
}
#yt:hover {
background-color: #bd2826;
}
#tt:hover {
background-color: #3f8dcb;
}
/*===============
====== Nav ======
===============*/
#nav {
list-style: none;
}
#nav a {
position: relative;
color: #fff;
text-decoration: none;
}
#nav li {
float: left;
margin-left: 50px;
border-radius: 5px;
line-height: 100px;
}
#nav a:hover {
color: #fff;
}
#nav a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #fff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: akk 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s
}
#nav a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/*============================
======= Miscellaneous ========
============================*/
a {
text-decoration: none;
}
li {
list-style: none;
}
Okay to fix your styling issues:
Add margin-top: 30px; and display: inline-block; to #logo
Add display: inline-block; to #nav-wrap
Remove margin-left: 25%; from #nav
This should fix the header.
I've taken this bootstrap code for a simple sidebar:http://startbootstrap.com/template-overviews/simple-sidebar/
What I need is for this sidebar code to respect the footer and header in the following code:
HTML:
Header Content
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
<! -- BEGIN: Side Bar Navigation -->
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- END: Sidebar Navigation -->
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
CSS:
/* Reset body padding and margins */
body { margin:0; padding:0; }
/* Make Header Sticky */
#header_container {
background:#eee;
border:1px solid #666;
height:60px;
left:0;
position:fixed;
width:100%;
top:0;
}
#header{
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin:0
auto; overflow:
auto; padding;0px 0
width:940px;
}
#content{
}
/* Make Footer Sticky */
#footer_container {
background:#eee;
border:1px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* BEGIN: SideBar Navigation Baare */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
I'm currently experimenting with Twitter Bootstrap but I have a problem with my fixed sidebar.
When you hover over a menu item on the left, you can see that the menu doesn't stop where the content area starts. I don't really know how to explain it properly so I hope this is clear enough.
I'd like to know if there's a solution for this.
Replace CSS as below
#sidebar .nav {
width: 95%;
position: fixed;
}
to
#sidebar .nav {
width: 10%; // change width as your choice
position: fixed;
}
you have select width of sidebar 95% of browser window.
DEMO
HTML
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">Fixed Menu
</li>
<li>Menu 1
</li>
<li>Menu 2
</li>
<li>Menu 3
</li>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="content-header">
<h1>
<a id="menu-toggle" href="#" class="btn btn-default btn-success"><i class="icon-reorder"></i></a>
Sidebar Fixed
</h1>
</div>
<!-- Keep all page content within the page-content inset div! -->
<div class="page-content inset">
<div class="row">
<div class="col-md-12">
<p class="lead">Resize window to see effect.</p>
</div>
</div>
</div>
</div>
</div>
CSS
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
left: 250px;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#page-content-wrapper {
width: 100%;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
.content-header {
height: 65px;
line-height: 65px;
}
.content-header h1 {
margin: 0;
margin-left: 20px;
line-height: 65px;
display: inline-block;
}
#menu-toggle {
display: none;
}
.inset {
padding: 20px;
}
#media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
.inset {
padding: 15px;
}
}
js
<!-- Custom JavaScript for the Menu Toggle -->
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});