I am using Twitter Bootstrap, I am trying to make the Hero Unit the full height of the page and then they can click a button and it scrolls down further. I also want some text to display in the Hero Unit at the bottom of the Unit.
I have added: height: 100%; and vertical-align:bottom; along with: text-align:center;
to the Hero Unit in the css file with no avail. It is almost seeming like you can't edit it :(
Here is the full CSS for the Hero Unit Class:
.hero-unit {
height: 100%;
min-height: 649px;
padding: 60px;
margin-bottom: 30px;
font-size: 18px;
font-weight: 200;
line-height: 30px;
text-align: center;
vertical-align: middle;
color: inherit;
background-color: #eeeeee;
background-image: url('../img/blured.jpg');
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.hero-unit h1 {
margin-bottom: 0;
font-size: 60px;
line-height: 1;
letter-spacing: -1px;
color: inherit;
}
.hero-unit li {
line-height: 30px;
}
And the html for the Hero Unit:
<!--HERO UNIT -->
<div class="hero-unit">
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<h4>The Green Panda</h4>
</div>
<div class="span4">
<p>Professional Web Design</p>
</div>
<div class="span4">
Learn More
</div>
</div>
</div>
</div>
Am I missing something? If so what? I can't figure this out and do not understand why the height: 100% and vertical-align:bottom is not working. Any suggestions are open. Here is a fiddle
To make the Hero Unit full height in Bootstrap add this to the hero-unit in bootstrap.css
height: 100%;
max-height:900px;
min-height:630px;
To make the items within the hero-unit of Bootstrap add this directly above the first span-4
<div class="span-bottom">
//hero unit items
</div>
And then add the following to your bootstrap.css file
.span-bottom {
padding-top: 560px;
}
You can name this div class anything you like just be sure to change the name in both the html and css file!
Related
The headertext font size changes but it won't be centered. Only just started learning HTML so this is likely a rookie mistake. Any advice is appreciated, thanks!
.main {
margin-left: 220px; /* Same as the width of the sidenav */
margin-top: 20px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
}
.main headertext {
font-size: 45px;
text-align: center;
}
<div class="main">
<headertext>ExampleTitle</headertext>
<p>Welcome to my website.</p>
</div>
headertext is not a valid HTML element. Change it to a div with a class of headertext and I think that fixes your issue, snippet below:
.main {
margin-left: 220px;
margin-top: 20px;
font-size: 20px;
}
.main .headertext {
font-size: 45px;
text-align: center;
}
<div class="main">
<div class="headertext"> ExampleTitle </div>
<p> Welcome to my website.</p>
</div>
Your problem is there is no <headertext> element. You need to use <h1> (biggest) to <h6> (smallest). If you want it centered, use the following CSS:
h1 {
margin-left: auto;
margin-right: auto;
}
Actually, if you want to it to act as a title (semantically) you should probably give it a h1 tag instead. Like so
.main {
margin-left: 220px;
margin-top: 20px;
font-size: 20px;
}
h1 {
font-size: 45px;
text-align: center;
}
<div class="main">
<h1> ExampleTitle </h1>
<p> Welcome to my website.</p>
</div>
This will tell the browser and people who use screenreaders that it's actually a title. You may benefit from reading up on html tags. This is a useful link and whilst it may seem overwhelming, you'll get used to it pretty quickly. https://www.w3schools.com/tags/ref_byfunc.asp
There is no element called headertext. Instead you can user header which is whole wrapper in standard or h1/h2/h3/h4/h5/h6 which are commonly used to represent headings.
In your code if you want to follow the first heading you can follow the following code:
.main {
margin-left: 220px;
margin-top: 20px;
font-size: 20px;
}
.header-text {
font-size: 45px;
text-align: center;
}
<div class="main">
<h1 class="header-text"> ExampleTitle </h1>
<p> Welcome to my website.</p>
</div>
But it seems in-align with other contents. I guess you are looking for the following.
.main {
/*margin-left: 220px;*/ //remove this line
margin-top: 20px;
font-size: 20px;
text-align: center; //added this line
}
.header-text {
font-size: 45px;
/* text-align: center; */
}
<div class="main">
<h1 class="header-text"> ExampleTitle </h1>
<p> Welcome to my website.</p>
</div>
I added both way that you can try for now. But still there is many ways to give you a solution. Happy journey on HTML,CSS
I'm having a tough time keeping my content centered within a certain width on my personal website. I have tried many methods such as setting body to a fix width and my wrapper container to a percentage of that. I have attached a picture of my website here and highlighted where I want my content to be contained in the picture shown
.
I want my content of my website centered within that highlighted area, while at the same time keeping the background to be the full size of the screen.
I realize this may be a simple question for many, but I have spent all day looking for and trying out different methods to do this with no avail.
body {
background-color: #F0f0f0;
text-align: center;
margin-right: 0px;
margin-left: 0px;
}
.wrapper {
text-align: center;
}
.topSection {
height: 300px;
border: solid 5px;
}
.mainAbout {
padding-left: 50px;
padding-right: 50px;
vertical-align: middle;
}
.mainAbout h1 {
font-size: 60px;
font-family: arvo, sans-serif;
margin-bottom: 5px;
}
#leftBrace {
vertical-align: middle;
}
#rightBrace {
vertical-align: middle;
}
.projects {
height: 864px;
border: solid 5px;
margin-top: 2px;
background: #0F1217;
}
.projects h2 {
color: #e6e6e6;
font-family: arvo, sans-serif;
font-size: 50px;
}
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<div class="wrapper">
<!---- Wrapper Starts Here --->
<div class="topSection" style="display:block" ;>
<!---- Name Section Starts Here --->
<div id="leftBrace" style="display: inline-block" ;>
<img src="leftbrace.png">
</div>
<div class="mainAbout" style="display: inline-block" ;>
<!--- Main Name and About me Section ---->
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
<!--- End mainAbout --->
<div id="rightBrace" style="display: inline-block" ;>
<img src="rightbrace.png">
</div>
</div>
<!--- Wrapper Ends Here --->
<div class="projects">
<h2> Projects </h2>
</div>
<div class="contact">
</div>
</div>
<!--- Wrapper Ends Here --->
<footer>
</footer>
Instead of using background you could style curly-braces using pseudo selector :before and :after, thus it works like font styling, you could use transform:translate to center your intro text container, check below codes.
#box {
width: 100%;
height: 300px;
overflow: hidden;
background: #ccc;
}
#box > .cnt {
width:50%;
text-align: center;
top: 50%;
left: 50%;
position: relative;
transform: translate(-50%, -50%);
}
#box:before {
content:"{";
font-size: 250px;
position: absolute;
top: 0;
left:10%;
}
#box:after {
content: "}";
font-size: 250px;
position: absolute;
top: 0;
right:10%;
}
<div id="box">
<div class="cnt">
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
</div>
Apply margin: 0 auto; to your content class. This will work.
You need to make sure add an inner class inside each wrapper and define your desired width. And need to apply margin: 0 auto to the inner. I added demo snippet.If u want specific wrapper full width just remove innerclass that's enough you will get full width. I hope it will help you.
.wrapper {
height: 300px;
width: 100%;
background: orange;
margin-bottom: 20px;
}
.inner {
width: 70%;
margin: 0 auto;
background: pink;
height: 100%;
}
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
Essentially, i'm trying to emulate the first page of this theme:
http://blackrockdigital.github.io/startbootstrap-grayscale/
I want to make it so that the first section occupies the entire screen, and clicking the button will scroll down to the other pages on the site (I'll be adding the button later. However, I end up with white space no matter what I do. I tried playing around with the percentage of the div in the css, but it didn't seem to do anything. I just want the black background to extend down to the bottom of the window without a scroll bar, no matter the screen size.
Code can be found here: http://codepen.io/pwatrous/pen/qZeaog
body {
width: 100%;
height: 100%;
}
html {
height: 100%;
}
h1 {
margin-top: 0;
padding-top: 10%;
}
.container-fluid {
padding: 0px;
}
.section1 {
background-color: #000000;
height: 100%
}
.title {
font-family: Quicksand;
color: #FFFFFF;
}
#name {
font-size: 5em;
}
#info {
font-size: 3em;
padding-bottom: 4%;
}
#bio {
font-size: 2em;
padding-bottom: 10%;
margin-left: 5%;
margin-right: 5%;
}
.fa-chevron-circle-down {
color: #FFFFFF;
padding-bottom: 4%;
}
Thanks!
To make a div fit the entire screen, try this:
body {
margin: 0;
}
.my_fullscreen_div {
width: 100vw;
height: 100vh;
}
Method 1:
Try adding a background-color in the body.
body {
background-color:black;
}
Method 2:
HTML:
place the section2 div inside the section1 div
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="section1 text-center">
<h1 class="title" id="name">Patrick Watrous</h1>
<h2 class="title" id="info">Learn. Implement. Innovate.</h2>
<i class="fa fa-chevron-circle-down fa-5x"></i>
<p class="title" id="bio">The ability to dream up an idea and then recreate it on a computer has always been something that has caused me immense satisfaction. Due to this, I'm pursuing a bachelor's degree at Northeastern University in computer science and business. I'm interested in all facets of design, from Bootstrap to Java. Take a look at my website and see what i've been up to!</p>
<div class="section2 text-center">
<p>Lorem ipsum dolor sit amet,.....
</div>
</div>
</div>
</div>
</div>
I am trying to make a navigation bar in the top of my website and my logo appears but the "home" doesn't when i try to float left. What am I doing wrong?
When I make the site as small as it will go, it appears left of the logo, but I want it to be to the right.
<html>
<head>
</head>
<style>
body{
margin: 0px;
padding: 0px;
}
#topBar{
background-color: #242424;
height: 63px;
}
#logo{
height: 40px;
}
#logo-item{
float: left;
margin-left: 90px;
padding-top: 10px;
}
.menu-item{
float: left;
margin-top: -28px;
font-size: 110%
margin-right: 20px;
font-color: white;
}
.topBarItems{
}
</style>
<body>
<div id="topBar">
<div id="logo-item"> <img id="logo" src="backflip-logo.png"> </div>
<div class="menu-item">HOME</div>
</div>
</body>
</html>
Here is your code with a few edits:
<body>
<div id="topBar">
<img id="logo" class="menu-item logo-item" src="backflip-logo.png"><!-- Updated the class -->
<div class="menu-item">HOME</div><!-- Updated the tag placement to fall within top bar -->
</div>
</body>
Also edited your CSS a bit:
#topBar{
background-color: #242424;
height: 63px;
}
#logo{
height: 40px;
}
.logo-item{
float: left;
margin-left: 90px;
}
.menu-item{
padding-top: 10px;
float: left;
font-size: 110%
margin-right: 20px;
color: #ffffff;
}
.topBarItems{
}
But, instead of doing everything from scratch, you may just want to use a framework such as Bootstrap : http://getbootstrap.com
Here is a fiddle for it: https://jsfiddle.net/windrunn3r1990/fck4zsue/
There are several problems with this HTML
First you have the style tag between the head and body tag, it should go inside the head tag - which may cause strange behavior or simply not work depending on the browser
You are using a margin of -28px, which effectively moves the inner div above the outer div which in turn renders it invisible (as it is above the visible page).
font-color should be color
You can solve your issue by using display:inline-block; rather than floating components. https://jsfiddle.net/oxycm856/
HTML
<body>
<div id="topBar">
<div id="logo-item"> <img id="logo" src="backflip-logo.png"> </div>
<div class="menu-item">HOME</div>
</div>
</body>
CSS
#topBar{
width:100%;
background-color:#242424;
height: 63px;
}
#logo-item, .menu-item{
display:inline-block;
color:#fff;
}
first time user of Foundation framework, I've developed all my previous websites with Bootstrap but now I'm forced to built one website with foundation. I noticed they are pretty similar but somehow different frameworks.
I've encountered a problem and hope you can help me with this.
I need to add a banner to a website which is full width and text which is within the grid and has a bg which is also full width, see what I mean here:
Here is my html:
<div class="fullWidth">
<div class="banner">
<div class="logo">
<img src="images/logo.svg"/>
</div>
<div class="row">
<div class="bg-tagline">
<h1 class="tagline">some text here</h1>
</div>
</div>
</div>
</div>
and the css:
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
.banner {
background: white url("images/baner.jpg") no-repeat center;
height: 590px;
background-size: cover;
position: relative;
}
.logo {
position: relative;
padding: 1%;
height: 5em;
width: 5em;
}
.bg-tagline {
color: #fff !important;
background-color: white;
width: 100%;
margin: 0px auto;
}
.bg-tagline h1 {
color: #fff !important;
font-size: 1.2em;
text-align: center;
}
As far as I know, there's no a "full width" class in foundation framework; Normally, in those layout types, I'd just use the elements off the framework, for instance:
<header id="banner">
<div class="slogan">Your text banner here</div>
</div>
And of course some CSS like you have already. If you need something elaborated (like a layout using foundation's classes), I'd put inside div.slogan a div.row, and start building layout from there, of course that row would be restricted to the max width from the framework.
BTW, if you need to have the entire framework having a wider width for the rows, you can change the framework settings and re-compile.
Personally, I like to make utility class for rows:
.row.fullwidth {
max-width:100em; // set your override width here
margin: 0 auto;
}
That way whenever I need a full width section I just do:
<div class="row fullwidth">
<!--- content --->
</div>