I have just changed my container div tag to expand in height automatically, but now i have an issue with the border, it is only visible at the very top of the page and i need it to show all around, the code of the page is below:
<!doctype html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<div id="container" style="width:500px; border: 2px solid black; margin:auto">
<?php include "header.php"; ?>
<div id="content" style="background-color:#EEEEEE; clear:both; width:500px; float: left">
<p align="center"><b>Quiz 1</b></p>
// There is some more code in the page
</div>
<?php include "footer.php"; ?>
</div>
</body>
</html>
header.php:
<div id="header" style="background-color:#FFA500; width:500px; clear:both; height:75px; float: left" align="center">
<h1>Quiz Name</h1>
</div>
footer.php:
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center; width:500px; height:25px; float: left">
Copyright/Disclaimer
</div>
Your main issue is that everything is floating. You need to clear those floating elements for that container div to appear correctly. One way is to add a clearing div before the </div> for container: <div style="clear:both;"></div>
<div style="clear:both;"></div>
</div>
</body>
</html>
Try adding this code before </body>:
<div style="clear:both;"></div>
Related
I tried this code and try to add different display properties to header and div tags, but image in next div tag is coming top left corner. I want it to come in next line of header tag which is on right top(pull right).This is about position of div and header tags
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet"/>
<style type="text/css">
</style>
</head>
<body style="background-color: #1D1D1D" >
<div id="main" class="">
<header class="site header" role="banner">
<h1 id="logo" class="pull-right"> Logo of site
</h1>
</header>
<div id="">
<div id="" class="">
<img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
</div>
</div>
</div>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/jquery.cycle2.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
</body>
</html>
you can add class="clearfix" after the header tag and then the image will come in the next line. Clearfix is a class in bootstrap
A display: block; using a css on one of this two element will be enought.
Indeed display: block tell a div to take all the width of the page.
<header class="site header" role="banner">
<h1 id="logo" class="pull-right"> Logo of site
</h1>
</header>
<div id="">
<div id="" class="" style="display:block;">
<img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
</div>
</div>
Or simply use bootstrap structurales classes as "container", "row" to create a new section above the header ?
you can simply do with this float:left property, just check with this example
header {
float:left;
width:100%;
background: #c1c1c1; /* just for showing the header */
padding:15px;
}
.block-element {
float:left;
width:100%;
background: #ddd; /* just for showing the div */
padding:15px;
margin-top:30px;
}
<header>
<!-- something here -->
</header>
<div class="block-element">
<!-- something here -->
</div>
<div class="block-element">
<!-- something here -->
</div>
I feel like using margin and padding will mess with the bootstrap grid in a way that makes it not work on all devices since your going outside of the grid. If anyone can clarify this that would be awesome. Anyways I'm having issues getting the left arrow to space out away from the 3 bike images in a way that keeps everything on the page perfectly centered. I've been messing with the grid, but no matter what I do I can't get the left arrow to move away from the first bike image. See screenshot for reference. Any help is appreciated.
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="col-md-1" id="leftArrow"><img ng-src="images/leftarrow.png"></div>
<div class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
<div class="col-md-1" id="rightArrow"><img ng-src="images/rightarrow.png"></div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
CSS
.header{
font-style:italic;
background-color:black;
height:60px;
color:white;
font-weight:bold;
font-size:40px;
}
.header .fa {font-style:italic;
}
.bikeSelector{
color:green;
}
.chooseTitle{
font-size:60px;
}
.products{
color: #1E90FF ;
text-align:center;
font-size:40px;
}
#bikePic{
height:100%;
width:100%;
}
<img ng-src="images/leftarrow.png">
change to
<img ng-src="images/leftarrow.png" class="img-responsive">
this will add max-width: 100%; to your image and won't break the <div class="col-md-1" id="leftArrow"> layout
In other words, your problem is that nav images is too big :)
I would rather use absolute positioning for the navigation elements.
Like
#leftArrow{
position: absolute;
left: -40px;
top: 50%;
}
I tried the following html code (an example from w3schools site):
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;margin-top:20px">
Copyright © W3Schools.com
</div>
</div>
</body>
</html>
And this is the output:
I need to add a space between the sections #footer and #content, and as you can see I tried using the margin-top attribute, but any value I use (in my example 20px) does not change the result: there is no space between the two sections.
How can I solve this problem?
Another reason why floats suck as much as they rock.
You can add an empty div in between the footer and the content like...
//content html
<div style='clear:both;'></div>
//footer html
http://jsfiddle.net/rK5zV/1/
Or you can make the footer a float also with a width of 100% like...
http://jsfiddle.net/7KZy9/
Other solutions can be found here...
Why top margin of html element is ignored after floated element?
You can add to content margin-bottom:20px;
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;margin-bottom: 20px;">
You can place all your elements apart from the footer in a wrapper that has margin-bottom: 20px:
<body>
<div id="container" style="width:500px">
<div id="wrapper" style="margin-bottom: 20px; border: 1px solid black; width: 100%; float: left;">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com
</div>
</div>
</body>
Here is a jsFiddle that demonstrates the behavior.
I gave your footer relative positioning and used the top attribute
Here is a working DEMO
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:left;text-align:center;position:relative;top:20px">
Copyright © W3Schools.com
</div>
</div>
Try making footer display: inline-block; width: 100%. It's not ideal, but it works.
After two blocks with styles float you should to use element with style cler:both;
You code view like this
<div id="content">
...
</div>
<div style="clear:both;"></div>
<div id="footer">
...
</div>
I'm quite new to bootstrap, but I'm beginning to like the grid system.
I've created a test layout. The only thing I haven't accomplished by now, is putting a background around some row.
How can I have some padding on the left and the right?
Here's my example:
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=UTF-8">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container" id="container">
<div id="header" class="row">
<div class="span12">Hallo123</div>
</div>
<div id="main" class="row">
<div class="span10" id="one">
<div class="row">
<div class="span2">Hallo1</div>
<div class="span2">Hallo2</div>
<div class="span2">Hallo3</div>
<div class="span2">Hallo4</div>
<div class="span2">Hallo5</div>
</div>
</div>
<div class="span2" id="two">Hallo2</div>
</div>
</div>
</body>
</html>
CSS:
#main {
background-color: white;
box-shadow: 0px 0px 6px #888;
}
#header .span12 {
background-color: #DD1144;
}
#container {
background-color: #DF8505;
}
#one, #two, #three, #four {
background-color: #0088CC;
}
See if this helps:
http://jsfiddle.net/panchroma/JAFPq/
In simple cases where you need to extend the background beyound the width of the bootstrap grid, you could certainly do it by setting negative margins. This wouldn't work so well if you want the background to cover the entire width of the screen though, and it starts getting complicated as the grid collapses on narrow screens.
The best general solution I have found is to close the bootstrap container div just before the area where you want the background. Then start a new bootstrap container for the area where you need the background and wrap this in it's own div which are are free to manipulate however you want.
<div class="container" id="container">
<div id="header" class="row">
<div class="span12">Hallo123</div>
</div><!-- end header -->
</div><!-- end container -->
<div class="backgroundHere"><!-- start of div where you want the background -->
<div class="container">
<div id="main" class="row">
<div class="span10" id="one">
<div class="row">
<div class="span2">Hallo1</div>
<div class="span2">Hallo2</div>
<div class="span2">Hallo3</div>
<div class="span2">Hallo4</div>
<div class="span2">Hallo5</div>
</div><!-- end nested row -->
</div><!-- end span 10 -->
<div class="span2" id="two">Hallo2</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end backgroundHere -->
<!-- you could open another bootstrap container here if you have more content without the background -->
Depending on the specifics of your background, you may need to also use #media requests to specify what happens at wide and narrow screens, for example the box-shaddow padding in your case.
Good luck
I have simple example with a header and content divs. I want there to be a 10 pixel margin after the header div, but it is showing up after the content div. The header div has two floating divs. Following is the code:
<style type="text/css"
div {border: 1px solid red;}
#container{width:680px;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
#header_clear{clear:both;}
</style>
<div id="container">
<div id="header">
<div id="title">Header Title</div>
<div id="link" style="float:right;">
Link
</div>
<div id="header_clear"/>
</div>
<div id="content" style="background-color:brown;">
This is the body.
</div>
</div>
Here's what it looks like. You can see that the 10px margin is below the content div instead of the header div.
margin-bottom not working
<style type="text/css">
div {border: 1px solid red;}
#container{width:680px;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
#header_clear{clear:both;}
</style>
<div id="container">
<div id="header">
<div id="title">Header Title</div>
<div id="link">
Link
</div>
<div id="header_clear"></div>
</div>
<div id="content" style="background-color:brown;">
This is the body.
</div>
</div>
Seems it didnt like the self closing div