Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm having a problem with this layout. Everything went smooth up until I got past the "section banner". Nothing will respond to CSS correctly. I can't align anything. I got the "col-md-4" to center correctly, but the header above it will not move where i want it. The only way I can get it to center is to put it in between the "row" div. But that doesnt solve the face that I can't adjust the padding/margin for it at all.
Also the footer is completely out of wack. Can't get it to center. Nothing.
html,
body {
margin: 0;
padding: 0;
font-family: 'Arvo', serif;
font-size: 16px;
}
.header {
max-width: 100%;
margin: 0 auto;
}
/* Header */
.nav {
position: relative;
top: 10px;
}
.nav-pills li a {
color: #d8192f;
}
.nav-pills li.active a,
.nav-pills li a:hover,
.section .btn:hover {
background-color: rgba(216, 25, 47, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
color: #fff;
}
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
/* Jumbotron */
.jumbotron {
height: 500px;
background: url(https://s3.amazonaws.com/codecademy-content/projects/bestbite/bg.jpg) no-repeat center center;
background-size: cover;
height: 500px;
margin-top: 10px;
}
.jumbotron h2:first-child {
margin: 100px 0 0;
}
.jumbotron h2 {
color: white;
font-size: 60px;
text-align: right;
margin: 0;
}
/* Banner */
.banner,
.supporting {
text-align: center;
padding-top: 20px;
}
.banner {
background-color: #36343f;
height: 150px;
color: #fff;
margin-bottom: 30px;
}
.btn {
background-color: rgba(216, 25, 47, .5);
box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
color: #fff;
margin-top: 10px;
}
}
/* Media Queries */
#media (max-width: 680px) {
.header h1 {
margin-bottom: 20px;
text-align: center;
}
.header2 h2 {
position: relative;
width: 100%;
margin: 0px 0px 0px 0px;
text-align: center;
clear: both;
}
.footer {
max-width: 33%;
margin: 0 auto;
display: inline-block;
clear: both;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<h1>BestBite</h1>
</div>
<div class="col-md-6 col-centered">
<ul class="nav nav-pills">
<li class="active">About
</li>
<li>Sign Up
</li>
<li>Log In
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="col-md-4">
<h2>Browse.</h2>
<h2>Create.</h2>
<h2>Share.</h2>
</div>
</div>
</div>
<div class="section banner">
<div class="container">
<h3>Always have the answer to "What's for dinner?"</h3>
<a class="btn" href="#">Learn More</a>
</div>
</div>
<div class="section">
<div class="container">
<div class="header2">
<h2>Test</h2>
</div>
<div class="row row-centered">
<div class="col-md-4">
<h3>One</h3>
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
<div class="col-md-4">
<h3>Two</h3>
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
<div class="col-md-4">
<h3>Three</h3>
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="row">
<div class="col-md-4">
<p class="a-left">One</p>
</div>
<div class="col-md-4">
<p class="a-center">One</p>
<div>
<div class="col-md-4">
<p class="a-right">One</p>
</div>
</div>
</div>
</body>
</html>
You have on extra } at your css (before the media queries).
Also, you had to set a div block with 100% width to center your footer, and add text-align: center to the child p tags.
For footer margin on large screen, just add:
.row .footer{
margin: 30px 0
}
JSfiddle: https://jsfiddle.net/1pwbhuzz/3/
With this you'll have the footer columns centered:
HTML
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4"><p>One</p></div>
<div class="col-xs-12 col-md-4"><p>One</p></div>
<div class="col-xs-12 col-md-4"><p>One</p></div>
</div></div>
</div>
CSS
.footer p {
text-align: center;
}
And delete the footer class in your media query.
Related
I'm building the website and I want to reach the section like on my psd (img attached):
You can see that there's 100% width section and .col-md-9 and .col-md-3 inside this section.
But when .col-md-3 ends its background should continue and pave the background of the main section.
How can I make the column's background continue? I've spent hours solving this problem but I didn't find the correct way. Thanks!
.single__content {
width: 100%;
max-width: 743px;
padding-top: 57px;
}
.single__content p {
color: #707070;
font-size: 15px;
font-weight: 400;
line-height: 23px;
}
.single__meta {
background: #3c73ba;
height: 70px;
}
.single__meta h2 {
font-size: 38px;
font-weight: 300;
line-height: 42px;
color: #fff;
margin: 0;
padding-top: 14px;
}
.col-sidebar {
background: #4285db;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<div class="single__meta">
<div class="container">
<div class="row ">
<div class="col-md-9">
<h2 class="page-title">Lorem ipsum dolor</h2>
</div>
<div class="col-sidebar col-md-3">
Second column content
</div>
</div>
</div>
</div>
You can split the background of your top with background: linear-gradient.
Demo with bootstrap 4
.top-bar {
background: linear-gradient(
to right,
#3c73ba 0%,
#3c73ba 50%,
#4285db 50%,
#4285db 100%
);
width: 100%;
padding: 0;
margin: 0;
color: #fff;
}
.col-left{
background: #3c73ba;
}
.col-right {
background: #4285db;
}
<div class="top-bar" style="padding: 0">
<div class="container">
<div class="row">
<div class="col-left col-md-9">
<h2>left</h2>
</div>
<div class="col-right col-md-3">
<h2>right</h2>
</div>
</div>
</div>
</div>
"make this changes in your code" hope this u want
<div class="row col_bg">
<div class="col-md-9 ">
<h2 class="page-title">Lorem ipsum dolor</h2>
</div>
<div class="col-sidebar col-md-3">
Second column content
</div>
<div class="clear">
</div>
</div>
"for css"
.row.col_bg {
background-color: #4285db;
clear: both;
}
.col-md-9 {
float: left;
width: 70%;
}
.single__meta h2 {
color: #000;
font-size: 38px;
font-weight: 300;
line-height: 42px;
margin: 0;
}
.col-sidebar.col-md-3 {
float: right;
width: 30%;
}
.clear {
clear: both;
}
I am trying to place footer to the bottom of a div using bootstrap without applying margin to the div I want to push to the bottom of the div as footer. This is my attempt but the footer aligns to the top
<div style="background-color:#191919;" class="container">
<h3 style="color: #32CD32; font-family: Copperplate; align:left;">
HEADER TEXT
</h3>
<h5>... reaching out</h5>
<hr style="width:101.6%;">
<div class="col-lg-12">
<nav id="main_menu">
<div align="center" class="menu_wrap">
</div>
</nav>
<div class="row">
<div class="contents">
The contents in each page
</div>
</div>
<footer style="color:#fff; text-align:center;"> © 2016 All rights reserved
<br> For more information visit our website
</footer>
</div>
</div>
Please how can I place the footer to the bottom of .
There are multiple ways to do that, i think the faster way for you is this case is using position: absolute on the footer;
First move out you footer from .col-lg-12 to be a directly children of .container. I also added a class .myFooter
<footer class="myFooter">
copy 2016 All rights reserved
<p>You can visit our website for more info</p>
</footer>
And then the css. Don't use css inline on the markup. I moved the color and text-align to the class.
.myFooter {
color:#fff;
text-align:center;
position: absolute;
bottom: 0;
}
The last step is to add position:relative to the .container. That way the position:absolute on .myFooter works properly.
.container {
position: relative;
}
Here is a working example:
http://plnkr.co/edit/Ypl82cdqxuHFIjAcpRo8?p=preview
<html>
<head>
<title>
Lugah Salisu Foundation
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<style type="text/css">
#media (max-width: #screen-xs) {
body{font-size: 10px;}
}
#media (max-width: #screen-sm) {
body{font-size: 14px;}
}
h3{
font-size: 300%;
margin-bottom: 0px;
clear: both;
margin-left: 7px;
}
h5{
margin-top: 0px;
padding: 0px;
margin-left: 15px;
color: #fff;
margin-bottom: 1px;
clear: both;
}
hr{
margin: 0px;
}
.container {
width: auto;
margin-left: 200px;
margin-right: 200px;
height:500px;
max-height:500px !important;
padding-left: 0px;
}
.nav>li {
position: relative;
display: inline-block!important;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color:transparent!important;
color:#d3d3d3;
}
.nav>li>a {
padding: 10px 4px!important;
color:#fff;
}
.golden-base {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight:bold;
-webkit-margin-before: 0.3em;
-webkit-margin-after: 0.2em;
}
.golden1 {
background-image: -webkit-linear-gradient(#FFF65C, #3A2C00);
text-shadow: -0.02em -0.03em 0.005em rgba(255, 223, 0, 0.60);
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
</style>
</head>
<body style="background-color:#1f5060;">
<div style="background-color:#191919;" class="container">
<h3 style="color: #32CD32; font-family: Copperplate; align:left;">
HEADER TEXT
</h3>
<h5>... reaching out</h5> <hr style="width:101.6%;">
<div class="col-lg-12">
<nav id="main_menu">
<div align="center" class="menu_wrap"></div>
<ul class="nav sf-menu">
<li class="sub-menu"><small>Home</small></li> |
</ul>
</div>
</div>
</nav>
<footer style="color:#fff; text-align:center;"> © 2016 All rights reserved
<div class="row">
<div class="contents">
The contents in each page
</div>
</div>
</div>
</footer>
</body>
</html>
I have been struggling to make right alignment and responsive. i want to add some of the test on top of the image. i have try changing values in css but it doesnt work out. i want to make as it below:
codepen: codepen link
Please advise. i am new to bootstrap.
<html>
<head>
<link data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" style="background: white;">
<div class="row no-gutter">
<div class="col-sm-3">
<div class="parent" >
<div class="circle">1</div>
<div class="expenseItems">Mobile</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent" >
<div class="circle">2</div>
<div class="expenseItems">Select a Product Category</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-4">
<div class="parent" >
<img src="http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png" class="tabimg" alt="">
<div class="circle tag" style="background-color:darkblue">3</div>
<div class="expenseItems">Find the latest software, firmware, and drivers<font color="darkblue"></font></div>
</div>
</div>
<div class="col-sm-2">
<div class="parent" >
<div class="circle">4</div>
<div class="expenseItems">Tablet Use</div>
<div class="hr"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.no-gutter > [class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
.parent {
border: 1px;
padding: 20px 25px 25px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding-top: 3px;
display: inline-block;
text-align: center;
background-color: gray;
color: white;
}
.expenseItems {
padding: 10px;
display: inline-block;
color: gray;
font-size: 24px;
}
.hr {
background: gray;
height: 2px;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 15px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
.tabimg {
padding : 0px 0px 0px 0px;
height: 30px;
width: 100px;
margin-top: 0px;
}
The easiest approach to this would be just setting a background image to the div
in question.
I've added an ID to the div you're trying to add the image to, and I added the following code for that div.
#box-with-image {
background: url(http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png);
background-size: contain;
background-repeat: no-repeat;
/*
OTHER OPTION:
background-size: cover;
*/
}
Full Codepen Link
For sizing, contain will position the image top left, and fill whichever dimension is smallest. cover will fit whichever dimension is largest.
Or in other words, in a non-square shaped div, contain will leave whitespace, while cover will cut some of the image off.
Another approach to this would be using the following CSS on the image
img {
position: relative;
top: 0;
left: 0;
width: 100%;
}
I don't really know how to put it in words but I do have pictures which will quite give you an idea of my problem. Seems like float is giving me the problem/
This is what I am trying to accomplish:
This is my problem:
Here's the code:
body {
background: #C52C2C;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
What I would like to do is change the height of the portfolio section but when I change the height, nothing changes. If I remove the boxes then I can change the height. How would I fix this?
Thank you if you well understood this.
That is because of impropper value of the display property for View More element. You should set it to be:
view_more{ display: block; } // Please replace **view_more** with the correct value to select the element
Also do that for the downward arrow.
Do you mean something like this?
https://jsfiddle.net/xsjjo654/1/
Code Sample:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
h1.title {
text-align: center;
color: white;
font-size: 40pt;
margin: 5px auto;
}
#portfolio {
overflow: auto;
clear: both;
min-height: 400px;
width: 100%;
background-color: #c62828;
text-align: center;
}
#portfolio > .wrapper {
display: table;
width: 100%;
}
#portfolio > .wrapper > section {
display: table-cell;
vertical-align: middle;
}
section.side-left {
text-align: right;
}
section.side-right {
text-align: left;
}
section.side-center {
width: 930px;
}
.images {
display: inline-block;
}
.images .box {
width: 300px;
height: 300px;
background-color: white;
display: inline-block;
float: left;
margin: 1px;
}
.button {
cursor: pointer;
background: transparent;
outline: 0;
border: none;
}
.button.round, .button.round-alt {
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 30px;
}
.button.round {
background-color: white;
color: #c62828;
}
.button.round-alt {
border: 2px solid white;
color: white;
margin: 30px;
}
.button.square {
border: 2px solid white;
color: white;
font-size: 14pt;
padding: 12px 30px;
margin: 40px auto;
}
/* (c) 2016 David#Refoua.me, www.Refoua.me */
</style>
</head>
<body>
<div id="portfolio">
<h1 class="title">
Portfolio
</h1>
<div class="wrapper">
<section class="side-left">
<button class="button round prev">
←
</button>
</section>
<section class="side-center">
<div class="images">
<!-- Top Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br>
<!-- Bottom Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</section>
<section class="side-right">
<button class="button round prev">
→
</button>
</section>
</div>
<button class="button square more">
View More...
</button>
<br>
<button class="button round-alt down">
↓
</button>
</div>
</body>
Try Bootstrap. It let's you play around with some cool grid functionality AND it's RESPONSIVE!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<style>
.inner {
height:350px;
background-color:white;
margin-top:5px;
margin-left:-25px;}
body {background-color:red;}
</style>
<body>
<div class='container'>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.6/js/bootstrap.min.js"> </script>
Output: http://s28.postimg.org/9y69346tp/test.png You can add more rows later if you're going to refresh your pictures from database automatically.
Hope that helps! Cheers!
if you give a width to images and margin:auto it should center much easier :)
body {
background: #C52C2C;
}
.images {
width:912px;
margin:auto;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
use this: clearfix
The problem here is that your container doesn't take the height of the inner boxes in consideration, so if you add the clearfix to it that will do the trick
this is for sure a noobish html question, because i am new at this stuff.
Anyways lets get to it:
1st, check the fiddle:
http://jsfiddle.net/d6767uur/
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="frontpage.css" rel="stylesheet">
</head>
<body>
<div class="navBar">
<div class="greyline"> </div>
<div class="menu"> smoothies </div>
<div class="greyline"> </div>
<div class="menu"> milkshakes </div>
<div class="greyline"> </div>
<div class="menu"> juicy facts </div>
<div class="greyline"> </div>
<div class="menu"> about us </div>
<div class="greyline"> </div>
<div class="stuffwithsmall"> © All rights reserved.. </div>
</div>
<div class="frontWrapper">
<h1> HELLO </h1>
<div style="margin-left: 750px; margin-top: -435px;"> <img src="frontfruit.jpg"> </div>
</div>
</body>
</html>
CSS:
#font-face { font-family: SourceSansPro-Regular; src: url('SourceSansPro-Regular.otf'); }
body {
margin: 0px;
padding: 0px;
}
.navBar {
width: 205px;
height: 667px;
background-color: #55AE3A; //hover = 398a20
}
.greyline {
width: 205px;
height: 1px;
background-color: darkgrey;
}
.menu {
font-family: 'SourceSansPro-Regular';
color: white;
font-size: 25px;
opacity: 0.64;
height: 40px;
text-decoration: none;
}
.menu:hover {
background-color: #398a20;
}
.stuffwithsmall {
color: #75715e;
font-family: helvetica;
margin-top: 320px;
}
Question: why is that header going down below the main menu, and how do i change it, so that it goes to the right of the menu?
Your navbar div goes down that far because .stuffwithsmall class is inside it and has a huge margin-top. You can fix that by moving it lower, after the closing tag of navbar div.
In css, change:
.navbar {
height: auto;
width: 100%;
}