I am writing the header for a basic sie, and am having trouble grasping the idea of the proper way to override the bootstrap CSS with my own CSS. I added the form-control input and buttom to act as a site search, but am having trouble with positioning. Positioning always seems to be an issue I run into, as I always add features that require me o adjust positioning of others. Anyway, I wrote some code for my header that I want to act as logo > menu > search > social buttons all in a row. My HTML is:
<!doctype html>
<html>
<head>
<link rel = "stylesheet" href = "css/style_samp2.css">
<link rel = "stylesheet" href = "css/bootstrap.min.css">
<meta charset="utf-8">
<title>Site</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="logo_header_test1.html">
<img alt="My Logo" src="logo.gif">
</a>
</div>
<div class="container">
<ul class = "dropdown-menu-right">
<div class = "top-menu">
<li>About</li>
<li>Blog</li>
<li>Resume</li>
<li>Portfolio</li>
</div>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</nav>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</body>
</html>
CSS:
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.container-fluid {
background-color: #30302f;
height: 90px;
}
.top-menu a{
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
position: relative;
left: 320px;
top: 64px;
}
.top-menu a:hover {
text-decoration: underline;
color: #fff;
}
.container .top-menu li{
display: inline-block;
}
.social{
position: relative;
top: 20px;
left: 900px;
}
.navbar-header a {
background-color: #30302f;
height: 69px;
width: 367px;
position: relative;
left: 120px;
}
Pseudo ::before element
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::after element
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Here is a fiddle (the logo isn't working, but the dimensions are correct):
https://jsfiddle.net/yp1pm3e8/
Thanks for any kind of input as to the correct way to position the divs!
Check out this page http://getbootstrap.com/css/ and view bootstrap's "Grid System". This will help you understand rows and columns. As for your custom css I agree with the above answer. You must have your style sheet after the bootstrap stylesheet in the head.
The logo and the search bar should not be wrapped in a nav tag. http://www.w3schools.com/TAgs/tag_nav.asp Check this page out for a good definition on the use of nav. The nav should only wrap your site navigation or other main/utility site navigation. In this instance it would be your about, blog, resume and portfolio.
Bootstrap makes it easy to create fluid layouts. So you should be careful trying to override the code. Based on the code you provided and the question you are asking I would try wrapping everything like I have below. This will put everything on the same row and help you position like you want. You can then wrap everything in your tags and style how you want. Just remember bootstrap is a fluid and responsive layout.
<div class="container-fluid">
<div class="row">
<div class="col-md-4">Logo tags and code goes heare</div>
<div class="col-md-4">Navigation and tags goes here</div>
<div class="col-md-4">Search code and tags goes here</div>
</div>
</div>
I would recommend setting the .img-responsive to your logo to keep it fluid. In js fiddle I noticed there was problems with the logo overlapping your navigation. I think this is because you provided fixed dimensions. Also, you are setting things to position relative when you may not need to. Let me know if you need further explanation.
Hope this helps!
EDIT: okay so after reviewing your question one more time and looking over your new code in jsfiddle I came up with this solution: https://jsfiddle.net/8yufLL4n/embedded/result/
here is link to editable jsFiddle code: https://jsfiddle.net/8yufLL4n/
I used a few resources for this: http://getbootstrap.com/components/#navbar-default I copied the code over from bootstrap and I made slight alterations to fit what I think you are trying to do. Now on large screens and normal tablet view the logo, navigation and search form all sit in the same row. As you adjust the screen size this changes like in all fluid and responsive designs. To get the dropdown working you will have to add javascript. This link should help: http://getbootstrap.com/javascript/#dropdowns
Here is the html:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menuIcon" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Brand" src="http://i.imgur.com/jeJYf95.gif" class="img-responsive" id="brandImage" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
About <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Blog <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Resume <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Portfolio <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<label for="search" class="sr-only">Search Bar</label>
<input type="text" name="search" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
And the css:
.container {
background:#30302f;
}
.menuIcon {
background:rgb(200,200,200);
}
.navbar-brand {
height:auto;
}
#brandImage {
max-width:60%;
}
#media (max-width:600px) {
.navbar-brand {
width:95%;
padding:8px 2.5%;
}
#brandImage {
max-width:100%;
}
}
#media (min-width:990px) and (max-width:1200px) {
.navbar-brand {
width:250px;
}
}
Notice that I use media queries to style it at different screen sizes. I am not trying to make drastic changes to the bootstrap css. Instead, try adding id or classes to the elements that you need to style (like what I did with menuIcon and brandImage). Try making small changes one at a time to see how it effects the design.
Let me know if this helps!
You must include your new style settings AFTER the bootstrap definitions, so that the bootstrap css definitions will get overwritten.
So first need to include the default bootstrap css and afterwards your new style definiton file, so that settings get overwritten by the new settings.
well this pretty simple buddy you should place your custom css file below the bootstap css file. something like this:
<!doctype html>
<html>
<head>
<link rel = "stylesheet" href = "css/bootstrap.min.css"> <!-- first place bootstrap -->
<link rel = "stylesheet" href = "css/style_samp2.css"> <!-- place of custom css file to override your bootstrap css file
</head>
<body>
<!-- your body -->
</body>
</html>
this way you can override bootstrap css file
Related
I have a problem with hiding some of my content. I am very new to coding, i started with coding for a week ago. Until now i have learned html, the most inportaint css, and how to use bootstrap 4. My problem is I want to hide some content. I have searched around on the web for hours, and the only ting i found useful was the d-none and d-sm-block and all the other hide and show tags. I tried it several places in my code without any luck, so hope anyone can help.
I want the search bar, log in and register button on small screens to disappear, and then a small dropdown menu shows up instead(only on the small screens). In the dropdown menu i want to have the log in an register button. I know i didn't use boopstrap as navbar at the top, but thats beacause I hadn't learn it yet, and i didn't want to change it since I liked the size on the buttons.
Hope anyone can help.
The top of my html code.(The hotpink buttons are bigger in my real code since I have other text in it)
<head>
<title>hello world</title>
<link rel="stylesheet" href="../test_sublime/css/bootstrap.css">
<link href="test1.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h2><em><u>Header</u></em>.no</h2>
<nav class="headnav">
<ul>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
</ul>
</nav>
<div class="btn-group">
Logg In
Register
<!--This is the search bar I want to hide when the screen is small-->
</div>
<form class="form-inline my-lg sok">
<input class="form-control mr-sm-2 msok" type="search" placeholder="Søk" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0 msok" type="submit">Søk</button>
</form>
<!--I want this dropdown menu to show up when the screen is small-->
<div class="dropdown-menu d-block d-sm-none" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="../test_sublime/logg in.html">Logg Inn</a>
<a class="dropdown-item" href="../test_sublime/registrer.html">Register Deg</a>
<div class="dropdown-divider"></div>
</div>
</header>
...
<footer>
...
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script scr="../test_sublime/jQuery/jquery.js"><\/script>');</script>
<script type="text/javascript" src="../test_sublime/js/test.js"></script>
<script src="test_sublime/js/bootstrap.min.js"></script>
</footer>
</body>
Parts of my css
body {
background: pink;
margin-left: 12px;
margin-right: 12px;
margin-top: 10px;
}
h2 {
display:inline;
background: mediumvioletred;
padding: 20px 40px 7px 40px;
margin: 0px 5px 40px -15px;
border-radius: 4px;
}
ul {
display: inline;
margin: 0px 0px 0px -38px
}
.sok {
display: inline-block;
float: right;
margin-right: 35px;
margin-top: 10px;
}
.msok {
margin-top: 0px;
}
.btn-group {
padding: 0px 10px 0px -10px
display: inline;
float: right;
margin-top: 10px;
}
nav.headnav {
display: inline-block;
}
Is it any ways to fix it with bootstrap, or do i have to use JavaSript or something else?
(Sorry for the colors)
Use a media query in your css
#media (max-width: 767.98px) {
form.sok {
display: none;
}
You can hide the elements based on screen size.
Bootstrap Responsive Break Points
This will solve your problem using navbar class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria- expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">yourbrand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>About</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="btn input-group-addon">Search</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<div class="btn-group">
Logg In
Register
</div>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
I have the following code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<nav class="col-sm-6">
<span class="pull-left">
<a href="#" class="navbar-left">
<img src="img/gyn.png" alt="" class="logo">
</a>
</span>
</nav>
<nav class="col-sm-6">
<span class="pull-right">
<ul class="nav navbar-nav thmbl">
<li><a class="tupac" href="#team"><strong>TEAM</strong></a></li>
<li><a class="tupac" href="#services"><strong>SERVICES</strong></a></li>
<li><a class="tupac" href="#gal"><strong>GALLERY</strong></a></li>
<li><a class="tupac" href="#location"><strong>LOCATION</strong></a></li>
</ul>
</span>
</nav>
</div>
</div>
</nav>
For the life of me I can't understand why the logo is displaying at full size and not being contained in the Navbar. I basically want the logo on the left and my menu items on the right. Moreover, I want them to always be on the samle line, i.e. when I resize the windows (or on a smaller screen like an iPhone for example), it scales down. Maybe I have tunnel vision but can anyone perhaps point out the problem?
Can't say for sure without looking at your css, but images will only be resized if the logo class is configured correctly. You may want to look at this example https://codepen.io/bootstrapped/pen/KwYGwq on how to configure css properly.
For what concerns wrapping, the default behaviour is to wrap especially as you are dividing the screen in 2 columns when small. An option is to play around with CSS (see How to make bootstrap 3 navbar not wrap). Alternatively, play with column sizing so that a small logo doesn't take half screen real estate and the menu items are scaled correctly. For very small screen, the best option is to collapse and show a vertical menu.
This code from bootply should do what you need:
<div class="container example2">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
and this is the CSS
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding: 15px;
width: auto;
}
/* EXAMPLE 2 (larger logo) - simply adjust top bottom padding to make logo larger */
.example2 .navbar-brand>img {
padding: 7px 15px;
}
/* CSS Transform Align Navbar Brand Text ... This could also be achieved with table / table-cells */
.navbar-alignit .navbar-header {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 50px;
}
.navbar-alignit .navbar-brand {
top: 50%;
display: block;
position: relative;
height: auto;
transform: translate(0,-50%);
margin-right: 15px;
margin-left: 15px;
}
.navbar-nav>li>.dropdown-menu {
z-index: 9999;
}
body {
font-family: "Lato";
}
I'm having an issue where a banner image (the "Review Us" text and lines) is not centering correctly when trying to adjust the screen size. Here is a before and after of what my issue is. The after image is also showing the same results on mobile screens
before
after
The HTML for that image goes as followed:
<div class="rowBanner">
<img src="images/reviewus.png" alth="review">
</div>
The only CSS in effect is on
div.rowBanner{
padding-top: 40px;
text-align:center;
}
I would like the "Review Us" text part of the image to be centered (left-to-right) regardless of screen width
The problem you have might be from desktop to mobile the hambuger menu shift your logo. using position absolute with transform: translate(-50%, 0%); will center your img by its own width.
.rowBanner {
position: absolute;
left: 50%;
display: block;
transform: translate(-50%, 0%);
}
Centering Percentage Width/Height Elements
REF: https://css-tricks.com/centering-percentage-widthheight-elements/
.navbar {
position: relative;
}
.rowBanner {
position: absolute;
left: 50%;
display: block;
transform: translate(-50%, 0%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="rowBanner">
<img src="http://via.placeholder.com/100x50" alth="review">
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Just add this css to the image:
div.rowBanner > img {
display: block;
margin: 0 auto;
max-width: 100vw;
}
Edited: Added a maximum with to the img, 100vw means 100 viewport width units, See: http://caniuse.com/#feat=viewport-units
You may try following CSS:
div.rowBanner {
margin-left:auto;
margin-right:auto;
width:80%;
}
What about using CCS background-image to set your image. You can then control where the center point is on different resolutions via background-position
function resize(isDesktop) {
if (isDesktop) {
$('.banner').css('width', '100%');
} else {
$('.banner').css('width', '200px');
}
}
.banner {
background-image: url('https://i.ytimg.com/vi/qh7LLydY8eo/maxresdefault.jpg');
background-size: cover;
background-position: center;
height: 175px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="resize(true)">Desktop</button>
<button onclick="resize()">Mobile</button>
<div class="page">
<div class="banner">
</div>
</div>
I would like to use a bootstrap navbar fixed at the top of my page. I then would like to have a div bellow that that covers the rest of the page. I have the width solved by applying the class container-fluid. However i have adjusted the containers height to 93.5% and set the html overflow to hidden. This works fine with a full screen window. However this solution does not appear o be responsive and fails with window size adjustments. I would like the height of the div container to automatically fill the rest of the page. Code is bellow:
CSS
html {
height:100%;
overflow:hidden;
}
body {
height:100%;
}
#map-container{
height:93.5%;
border-color: black;
border-style:solid;
border-width:2px;
margin:5px;
}
.navbar{
margin-left:5px;
margin-right: 5px;
margin-top:5px;
margin-bottom:0px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>quickMap</title>
<!-- Bootstrap Core CSS -->
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/quickMap.css" rel="stylesheet" >
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid" id="map-container">
<div>
</div>
</div>
<!-- jQuery -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
I think overflow: hidden is messing you up. I changed it to auto and it worked well enough for me.
html {
height:100%;
overflow:auto;
}
Not sure that 93.5% is the exact right number for the height, as, at least on my browser, the div ends up being slightly too tall for the window, but this can be fixed by adjusting the height slightly shorter. Something more like 91%.
I have a website I'm trying to design and I have a general layout page where everything will be placed i.e content from other pages I've made, I ran into a problem where my content overflowed and no scrollbar appeared; I looked around and tried a couple of ways to resize my content but none of them worked out so I settled for a temporary fix and made the window size static, can anyone help me with resizing my page based on the screen it's running on. I'm using webmatrix and there will be some C# code in these pages so the extension is cshtml. I am also very new to web development so sorry if my code is messy.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="/Shared/css/bootstrap.css" />
<style type="text/css">
.body
{
padding-top: 60px;
padding-bottom: 40px;
}
.renderBody {
height: 462px;
overflow: auto;
padding-top: 60px;
padding-left: 440px;
margin: initial;
}
#login{
padding-right: 0px;
}
</style>
<link rel="stylesheet" type="text/css" href="/Shared/css/bootstrap-responsive.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>
<script src="/downloads/twitter-bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.js?view=1"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="navContainer">
<img src="/Shared/Images/Logo.png" alt="LogoImage"></img>
<form class="navbar-form pull-right">
<ul class="breadcrumb" id="login">
<li> Login
<span class="divider"> /
Register</span></li>
</ul>
</form>
</div>
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://www.facebook.com">Some Information</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">More Information</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="active">Traveling</li>
<li class="active">Moving</li>
<li class="active">Sports</li>
</ul>
<!--<form class="navbar-form pull-right">
<ul class="nav"><li class="active">Register</li></ul>
</form>
</div>-->
</div>
</div>
</div>
<div class="renderBody">
#RenderBody()
</div>
</div>
</body>
</html>
There are a few things you can try layout-wise, before you go down the road of screen measurement in script:
First, be sure to use the viewport meta tag (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Next, wrap RenderBody with the bootstrap container class:
<div id="main" class="container">
#RenderSection("featured", required: false)
<section>
#RenderBody()
</section>
</div>
Also, if you're not already familiar with it, you may want to read up on the fluid grid system in bootstrap (http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem)
Lastly, if all else fails, you can use the overflow CSS property on your content container:
.renderBody {
overflow-x: scroll;
}