Learning CSS, this is the sample code.
The text block "TITLE HEADING" is behind the picture, how to move it to the same row as the picture ?
body,
h1,
h2,
h3,
h4,
h5 {
font-family: "Raleway", sans-serif
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<body class="w3-light-grey">
<!-- w3-content defines a container for fixed size centered content,
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:1400px">
<!-- Header -->
<header class="w3-container w3-center w3-padding-32">
<h1><b>MY BLOG</b></h1>
<p>Welcome to the blog of <span class="w3-tag">unknown</span></p>
</header>
<div class="w3-row l8 s12">
<!-- Blog entry -->
<div class="w3-card-4 w3-margin w3-white">
<img src="/w3images/woods.jpg" alt="Nature" style="width:100%">
<div class="w3-container">
<h3><b>TITLE HEADING</b></h3>
<h5>Title description, <span class="w3-opacity">April 7, 2014</span></h5>
</div>
<div class="w3-container">
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt
sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<hr>
</div>
<br>
<!-- END w3-content -->
</div>
</body>
Nest those two elements in a parent .wrapper and use flex.
body,
h1,
h2,
h3,
h4,
h5 {
font-family: "Raleway", sans-serif
}
.wrapper {
display: flex;
align-items: center;
}
img {
max-width: 50%;
}
.w3-container {
margin: auto;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<body class="w3-light-grey">
<!-- w3-content defines a container for fixed size centered content,
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:1400px">
<!-- Header -->
<header class="w3-container w3-center w3-padding-32">
<h1><b>MY BLOG</b></h1>
<p>Welcome to the blog of <span class="w3-tag">unknown</span></p>
</header>
<div class="w3-row l8 s12">
<!-- Blog entry -->
<div class="w3-card-4 w3-margin w3-white">
<div class="wrapper">
<img src="https://dummyimage.com/600x400/000/fff" alt="Nature" style="width:100%">
<div class="w3-container">
<h3><b>TITLE HEADING</b></h3>
</div>
</div>
<div class="w3-container">
<h5>Title description, <span class="w3-opacity">April 7, 2014</span></h5>
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt
sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<hr>
</div>
<br>
<!-- END w3-content -->
</div>
</body>
.body {
text-align: center;
background-color: red;
height: 150px;
}
.container {
background-color: blue;
height: 50px;
display: flex;
}
.imgdiv {
background-color: green;
width: 50px;
height: 50px;
}
img {
height: 50px;
}
.textdiv {
background-color: yellow;
width: 100px;
height: 50px;
}
p {
padding: auto;
font-weight: bold;
}
<div class="body">
<div class="container">
<div class="imgdiv">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhWSuoV5RUZiv4vizlSTEFOJCuA6Db5nwvtA&usqp=CAU"
alt="alternatetext" />
</div>
<div class="textdiv">
<p>some text</p>
</div>
</div>
<p>some content here</p>
</div>
</div>
Related
I am working on a website. I am a little rusty when it comes to CSS. I am trying to get the same effect as this page https://prp.fm/. I want the header to be over the hero section with a transparent background. The header does not need to be sticky, but I am unable to get the header to overlay over the header.
I tried adding background-attachment:fixed in the .hero-section CSS, but it would just fix the image to the page and not scroll with the page. That I do NOT want. I want the hero section to be behind the header and scroll with the page.
.main {
padding-top: 0 !important;
}
.header-section {
background: #212121;
padding: 0 33px;
padding-bottom: 50px;
border-bottom: 1px solid #fff;
position: relative:
}
.hero-section {
height: 962px;
background-image: url(../img/chart-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
padding-top: 0px;
z-index: 100;
}
<header class="header-section" id="header">
<div class="header-warp">
<!-- Site Logo -->
<a href="home.html" class="site-logo">
<img src="img/logo.png" alt="">
</a>
<!-- responsive -->
<div class="nav-switch">
<i class="fa fa-bars"></i>
</div>
</div>
</header>
<div class="main">
<section class="hero-section">
</section>
<div id="inner">
<section class="some-section">
<div class="container">
<div class="section-title text-center">
<h2>Tile</h2>
</div>
<div class="row about-box">
<div class="col-lg-6">
<img src="img/pic1.jpg" alt="">
</div>
<div class="col-lg-6">
<div class="ab-content">
<h4>A short History</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tincidunt ligula. Fusce dictum ullamcorper purus, at elementum sem sollicitudin non. Sed id tristique lacus. Fusce pellentesque dignissim arcu, id hendrerit urna feugiat vitae.
Pellentesque viverra aliquet arcu, vel aliquet est commodo quis. Nam tempus, nisl eu maximus viverra, magna quam porta nibh.</p>
</div>
</div>
</div>
</div>
</section>
</div>
Just reduce an opacity on the header and increase the font-weight of the contents which are in the header like the following
.main {
padding-top: 0 !important;
}
.header-section {
background: #212121;
padding: 0 33px;
padding-bottom: 50px;
border-bottom: 1px solid #fff;
opacity: .3; /* added */
position: relative:
}
.hero-section {
height: 962px;
background-image: url(../img/chart-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
padding-top: 0px;
z-index: 100;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<header class="header-section" id="header">
<div class="header-warp">
<!-- Site Logo -->
<a href="home.html" class="site-logo">
<img src="img/logo.png" alt="">
</a>
<!-- responsive -->
<div class="nav-switch">
<i class="fa fa-bars"></i>
</div>
</div>
</header>
<div class="main">
<section class="hero-section">
</section>
<div id="inner">
<section class="some-section">
<div class="container">
<div class="section-title text-center">
<h2>Tile</h2>
</div>
<div class="row about-box">
<div class="col-lg-6">
<img src="img/pic1.jpg" alt="">
</div>
<div class="col-lg-6">
<div class="ab-content">
<h4>A short History</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tincidunt ligula. Fusce dictum ullamcorper purus, at elementum sem sollicitudin non. Sed id tristique lacus. Fusce pellentesque dignissim arcu, id hendrerit urna feugiat vitae.
Pellentesque viverra aliquet arcu, vel aliquet est commodo quis. Nam tempus, nisl eu maximus viverra, magna quam porta nibh.</p>
</div>
</div>
</div>
</div>
</section>
</div>
I am relatively new to MDL and I am trying to understand how to position cards within or next to a piece of text I have. I am very close but I have tried lots of different ways and I don't seem to be getting the outcome I am looking for.
I would like the text to be on the left (which I am happy with at the moment where it is positioned) and two wide MDL cards on the right one on top of the other, in line with the text.
So far I have:
<body>
<div class="header">
<a class="logo" target="_blank"><img src=".\images\logo.png" border="0" alt="logo" width="90"></a>
<div class="header-left">
Home
Wall
<a class="active" href="shop.html">Shop</a>
Blog
FAQ
<div class="header-right">
<a class="active" href="http://instagram.com/woolybox" target="_blank"><img src=".\images\instagram.png" border="0" alt="instagram"img width="20" height="20"></a>
<img src=".\images\twitter.png" border="0" alt="twitter" img width="20" height="20">
</div>
</div>
<p>
<table>
<div class="boxed-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper. Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui ante ac lectus.
</div></table>
<p>
<div class="col">
<div class="row">
<div class="float-right">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
</div>
<p>
<div class="col">
<div class="row">
<div class="float-right">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
</div>
<p>
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">woolyBox ltd.</h1>
<ul class="mdl-mega-footer__link-list">
<li>About</li>
<li>Shop</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</div>
</div>
<div class="mdl-mega-footer__bottom-section">
<ul class="mdl-mega-footer__link-list">
<li>Privacy & Terms</li>
</ul>
</div>
</p></div>
</body>
and CSS:
html, body {
height: 100%;
min-height: 100%;
background-color: #ffffff;
font-family: 'Courier New', Courier, monospace;
}
body {
background: #fafafa;
position: relative;
}
table {
height: 100%;
width: 100%;
background-color: #f4d442;
font-family: 'Courier New', Courier, monospace;
}
td {
height: 100%;
width: 100%;
vertical-align: middle;
text-align: right;
font-family: 'Courier New', Courier, monospace;
}
.header {
overflow: hidden;
background-color: #ffffff;
}
.header a {
float: left;
color: grey;
text-align: center;
padding-top: 16px;
padding: 24px;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
line-height: 25px;
}
.header a.logo {
font-size: 25px;
padding-top: 4px;
font-weight: bold;
}
.header a:hover {
color: black;
}
.header a.active {
color: #f4d442;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.content {
padding: 16px;
}
.boxed{
width: 50vw;
height: 60vh;
box-align: left;
text-align: justify;
padding: 5%;
background-color: #fff;
margin: 5%;
margin-left: 5%;
}
/* .image {
} */
.boxed-1 {
width: 25%;
height: 100%;
text-align: justify;
padding-top: 10%;
background-color: #fff;
margin: 0 auto;
margin-left: 5%;
margin-right: 80%;
}
.container-wrapper{text-align:center;}
.container-1,
.container-2,
.container-3{width:475px; height:400px; display:inline-block; margin-left:10px; font-family: 'Courier New', Courier, monospace;}
.container-1{background:grey; margin-left:0;}
.container-2{background:grey;}
.container-3{background:grey;}
#media all and (max-width: 650px) {
.container-1{
width:100%;
display:block;
margin:0;
}
.container-2{
width:100%;
display:block;
margin:0;
}
.container-3{
width:100%;
display:block;
margin:0;
}
}
.card-img-top {
height: 200px;
float: left;
margin: 1rem;
position: relative;
justify-content: center;
}
.card {
margin: 0 auto;
float: none;
margin-bottom: 5px;
}
.card-text {
color: grey;
text-align: justify;
padding: 5px;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
line-height: 25px;
}
.demo-card-square.mdl-card {
width: 320px;
height: 320px;
float: left;
margin: 1rem;
position: relative;
justify-content: center;
}
.demo-card-square.mdl-card:hover {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
}
.demo-card-square > .mdl-card__title {
color: #fff;
background: #03a9f4;
}
.demo-card-square > .mdl-card__accent {
background: #ff9800;
}
.demo-card-wide.mdl-card {
width: 100%;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('../assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
Is anyone able to point me in the correct direction as to where I am going wrong?
There are a variety of ways to get the layout you are looking for. A simple one for what you are after is to use flexbox. Below is a minimal example of a Material Design Lite layout with a header, main content, and a footer that includes the text and card positioning you describe.
You will see that the main html element is set to display: flex, and align-items: center which displays its child elements side by side and vertically aligned in the middle (you can experiment with different align-items options if you are looking for some other vertical alignment). The cards are wrapped in a div so that they are displayed stacked alongside the text (rather than both side by side).
.mdl-layout__content main {
padding: 16px;
display: flex;
align-items: center;
}
.mdl-card {
margin: 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite layout example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Logo</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__content">
<main>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae.
Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem,
et pretium dui ante ac lectus.
</div>
<div class="cards">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
<!-- close cards -->
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer__link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</div>
<!-- close mdl-layout__content -->
</div>
<!-- close mdl-layout -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>
In your own html, it looks like you are using p tags as breaks in some places without closing the tag (there is a br tag that is more appropriate for what you intend, but I would recommend against this as you can get what you are looking for by setting appropriate margin and/or padding values in your css). You also forgot to close your footer tag. You can use a html validator to help you clean up syntax issues like these.
I'm trying to fix 2 issues:
The images on the left (sideImage) won't vertically align with the text box when I scale the window down horizontally. I've tried using margin-top auto and margin-bottom auto but that doesn't seem to work to well.
The top div would disappear on top when I scale down the window vertically. (I have no idea why that happened)
I'm using Bootstrap btw, so pls do keep that in mind.
/*-- CSS --*/
* {
background-color: rgba(0, 0, 0, 0.1);
}
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
}
.page2Box {
float: left;
display: inline-block;
clear: both;
}
.sideImage {
margin-top: auto !important;
margin-bottom: auto !important;
}
.mainImage {
float: right;
margin-top: auto !important;
margin-bottom: auto !important;
}
p {
height: 180px !important;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Page2_Bootstrap</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid bigBox col-md-8">
<div class="container page2Box col-md-12" id="box1">
<h2 class="col-md-5">Main Goal</h2>
<p class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices urna in dui laoreet rhoncus. Vestibulum posuere mollis velit. Morbi elementum placerat erat.</p>
</div>
<div class="container page2Box col-md-4" <div class="container page2Box col-md-12" id="box2">
<img class="image-responsive sideImage col-md-4" src="placeholder.png">
<h2 class="col-md-5">Who We Are</h2>
<p class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices urna in dui laoreet rhoncus. Vestibulum posuere mollis velit. Morbi elementum placerat erat.</p>
</div>
<div class="container page2Box col-md-12" id="box3">
<img class="image-responsive sideImage col-md-4" src="placeholder.png">
<h2 class="col-md-5">What We Do</h2>
<p class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices urna in dui laoreet rhoncus. Vestibulum posuere mollis velit. Morbi elementum placerat erat.</p>
</div>
</div>
<image class="image-responsive col-md-4 mainImage" src="placeholder.png">
</body>
</html>
This is how it looks like.
Here are the problems.
I would suggest using the flex-box option while nesting the image and text in separate divs. I.E.
HTML:
<div class="container">
<div class="row equal">
<div class="col-md-6 col-sm-6">
<div class="box">
<img class="image-responsive" src="http://via.placeholder.com/350x150" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="box">
<h2>Main Goal</h2>
<p>In iaculis elit id odio malesuada, vitae euismod dui viverra. Maecenas pulvinar quis magna in dapibus. Ut eget elit eget nibh eleifend ultricies a a orci. Aliquam tristique nulla eu sapien posuere egestas. </p>
</div>
</div>
</div>
</div>
CSS:
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
border: 1px solid #333;
}
JSFiddle: https://jsfiddle.net/Jabideau/rkzafmrb/
I'm trying to create a single page website, with multiple divs that are full screen, but I'm not being able to turn them full screen.
I'm Already using bootstrap to make the website responsive, and it's my first time doing that.
What I want to do is set a background video, then when I scroll down, the divs fitting the entire viewport
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="imagens/logo_icone.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilos.css">
<title>Museu do Barro Preto</title>
</head>
<body>
<div class="container-fluid">
<!--Video -->
<div class="row">
<div class="col-xs-12">
<video class="video_bg" autoplay muted loop>
<source src="video/prom.mp4" type="video/mp4">
A extensão do ficheiro não é suportada pelo seu browser
</video>
</div>
</div>
<!--/Video -->
<!--Barra de Navegação-->
<div class="row">
<header class="col-md-12">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Quem Somos</li>
<li>Onde Estamos</li>
<li>Educação</li>
<li>Video</li>
<li>Exposições</li>
</ul>
</div>
</div>
</nav>
</header>
</div>
<!--/Barra de Navegação-->
<div class="row pag1">
<article class="col-md-8">
<section>
<h1>Quem Somos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis mattis odio, vitae aliquet orci porttitor quis. Morbi feugiat nulla sit amet felis rutrum, sed iaculis augue porta. Morbi semper et enim in ultricies. Morbi consectetur lorem sodales, maximus risus in, lacinia ex. Nulla metus risus, luctus in quam ut, maximus viverra sem. Nulla posuere condimentum hendrerit. Nulla pulvinar dictum magna non euismod. Quisque et elit nunc. Aenean non dignissim lectus. Ut et purus ac mauris luctus tempor.
Praesent elit quam, eleifend ac aliquet id, imperdiet a est. Nam gravida sed nunc at elementum. In hac habitasse platea dictumst. Aenean.</p>
</section>
</article>
<aside class="col-md-4">
<img src="http://www.dueceira.pt/trilhos/imgs/barro_preto_vnp2.jpg" alt="Peças Barro Preto">
</aside>
</div>
<div class="row">
<article>
<aside class="col-md-4">
<div id="mapa">
</div>
</aside>
<section class="col-md-8">
<h1>Onde Estamos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis mattis odio, vitae aliquet orci porttitor quis. Morbi feugiat nulla sit amet felis rutrum, sed iaculis augue porta. Morbi semper et enim in ultricies. Morbi consectetur lorem sodales, maximus risus in, lacinia ex. Nulla metus risus, luctus in quam ut, maximus viverra sem. Nulla posuere condimentum hendrerit. Nulla pulvinar dictum magna non euismod. Quisque et elit nunc. Aenean non dignissim lectus. Ut et purus ac mauris luctus tempor.
Praesent elit quam, eleifend ac aliquet id, imperdiet a est. Nam gravida sed nunc at elementum. In hac habitasse platea dictumst. Aenean.</p>
</section>
</article>
</div>
<div class="row">
<div id="ilustracao">
<h1>SLIDESHOW DAS ILUSTRAÇÕES</h1>
</div>
</div>
<div id="video">
<div id="documentario">
<h1>Documentario</h1>
<video class="documentario" controls>
<source src="video/prom.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
html,body {
height:100%;
margin:0;
}
html>body .pag1 {
height:auto;
}
.video_bg {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translate(-50%, -50%);
}
.borders {
border: 1px solid black;
}
.documentario {
width: 500px;
height: 500px;
}
.pag1 {
width: 100%;
height: 100%;
margin-top: 100%;
background-color: #fff;
overflow: hidden;
position: relative;
}
.pag1 img {
width: 400px;
height: 400px;
}
Try giving your div's a vh style. Such as
div {max-height:100vh;} // this will give your div a max height of 100 vertical height which is set to full screen size.
http://www.w3schools.com/cssref/css_units.asp
What you want is the vh unit, coupled with a fallback for browsers that don't support it. Unless it's a very big project (those scroll-y sites usually aren't) I'd ditch Bootstrap. It's pretty badly made, actually.
Last site we did that had to behave like that, we put each full-screen element in a li, sized the li using 100vh, falling back to regular px units set by javascript to match screen size, falling back to a set of common screen resolutions through conditional comments.
Sadly, using 100% created a lot of headaches with sizing child elements.
This is elaborate to set up, but if you do this once it will save you a lot of work later. It's also pretty much the only solid way to do this accessibly. (We test all our work through a group of users with assistive technology.)
So In essence:
<ol>
<li>
'Page' content here.
</li>
<li>
'Page'content here.
</li>
</ol>
ol {
display: block;
position: relative;
width: 100%; /* Caused no issues and is better supported */
height: auto;
float: left;
}
li {
display: block;
position: relative;
width: 100%;
height: 100vh;
float: left;
}
Look at Modernizr if you haven't already:
https://modernizr.com/
Also look at the various Javascript solutions for serving up compatible video formats, or you may find yourself showing a full-screen blank screen.
Oh, and insert obligatory warning here about video aspect ratio's not matching all screen aspect ratio's. ;-)
I am attempting to put several messages in a thread-like layout. To see the result of what I have, go here: http://jsfiddle.net/sunjay03/Aykqc/embedded/result/
If you adjust the width of the screen, you will see that the text in the lower message does not layout properly. As well as that, I can't seem to get the date to always go to the very right of the screen.
Here is the link to the full jsfiddle: http://jsfiddle.net/sunjay03/Aykqc/
Here are some images of what I'd like to happen:
Any help?
I fiddled around with your fiddle and made this of it:
http://jsfiddle.net/S7drj/1/
HTML:
<div class="messages">
<div class="message">
<div class="message-image">
<img src="http://www.sunjay.ca/images/logo_notext.gif" alt="profile_image">
</div>
<div class="message-body">
<div class="message-name">
<span class="message-date">Nov. 15, 2010</span>
<h3>John Smith</h3>
</div>
<div class="message-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="message">
<div class="message-image">
<img src="http://www.sunjay.ca/images/logo_notext.gif" alt="profile_image">
</div>
<div class="message-body">
<div class="message-name">
<span class="message-date">Nov. 15, 2010</span>
<h3>Joe Smith</h3>
</div>
<div class="message-text">
<p>Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</p>
</div>
</div>
</div>
</div>
CSS:
body
{
margin: 20px;
}
.message
{
padding: 2px;
margin: 2px;
clear: both;
width:100%;
}
.message .message-image
{
padding: 5px;
float:left;
}
.message .message-body
{
}
.message .message-body .message-name
{
}
.message .message-body .message-name h3
{
}
.message .message-body .message-text
{
}
.message .message-body .message-date
{
float: right;
}
Is that how you want it?
How's this jsFiddle?
HTML:
<div class="container">
<div class="name">John Smith</div>
<div class="date">Nov. 15, 2010</div>
<div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div>
</div>
<div class="container">
<div class="name">John Smith</div>
<div class="date">Nov. 15, 2010</div>
<div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div>
</div>
<div class="container">
<div class="name">John Smith</div>
<div class="date">Nov. 15, 2010</div>
<div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div>
</div>
CSS:
.name {
float:left;
}
.date {
float:right;
}
.content {
clear:both;
}
.container {
overflow:auto;
padding-left:115px;
background: url(http://www.sunjay.ca/images/logo_notext.gif) no-repeat;
min-height: 110px;
margin-bottom: 20px;
}