I've got a 4-col page and I'm inserting content. It works OK, but I can't get my first div to align to top in inline-blocks. I'm pretty newbie so I'm thinking I'm missing something. (Tried padding 0; in divs.)
Thanks. Milt.
<html>
<style>
html, body, #content { margin: 0px; height: 100%; width: 100%; padding: 0px;}
div.outer { background-color: lightgreen }
div.inner { display: inline-block; }
div.WebTopic { width: 190px;}
.col {
position: absolute;
top: 0px; bottom: 0px;
margin: left: 10px;
border: 1px solid black;
background-color: seashell;
}
.col-1 { left: 0px; width: 400px; top: 0px;}
.col-2 { left: 401px; width: 200px; top 0px; }
.col-3 { left: 601px; width: 400px; }
.col-4 { left: 1001px; width: 50px; }
</style>
<body>
<div id="content">
<div class="col col-1">
<div class="outer">
<div class="inner">
<div class="WebTopic">
<p>??? Why is this at the foot of the frame? Would like it at top.</p>
</div>
<p class="fanRating">HTML Fan rated #1</p>
</div>
<div class="inner">
<div class="WebTopic">
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
</div>
<p class="fanRating">CCS Fan Rated #3</p>
</div>
</div> <!-- OUTER 1 END -->
<p>Stuff here in usual block mode</p>
<!-- OUTER 2 START -->
<div class="outer">
<div class="inner">
<div class="WebTopic">
<p>HTML is a markup language that is used for creating web pages. </p>
</div>
<p class="fanRating">HTML Fan rated #1</p>
</div>
<div class="inner">
<div class="WebTopic">
<p>CSS is used for describing the presentation of web pages. Loads more words. Loads more words. Loads more words. Loads more words. Loads more words. Loads more words. Loads more words. </p>
</div>
<p class="fanRating">CCS Fan Rated #3</p>
</div>
</div> <!-- OUTER 2 END -->
</div>
<div class="col col-2">
COLUMN 2 -------------
</div>
<!-- COLUMN 3 START -->
<div class="col col-3">
<div class="outer">
<div class="inner">
<div class="WebTopic">
<p>??? Why is this at the foot of the frame? Would like it at top. Tons of text. Tons of text. Tons of text. Tons of text. Tons of text. </p>
</div>
<p class="fanRating">HTML Fan rated #1</p>
</div>
<div class="inner">
<div class="WebTopic">
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
</div>
<p class="fanRating">CCS Fan Rated #3</p>
</div>
</div>
</div>
<div class="col col-4">
COL 4
</div>
</body>
<html>
Since it's not explicitly declared, you will probably need to add vertical-align: top to the inline-block elements.
e.g.
div.inner {
display: inline-block;
vertical-align: top;
}
Here it is applied to your code:
Before: https://jsfiddle.net/hu6yosgq/1/
After: https://jsfiddle.net/hu6yosgq/2/
Related
I am using materializecss in my landing page. I have the page set up in a container (with the html {background-color: yellow}, but I want my background color in the second div to extend the full width of the window. How can I "extend past the bounds of the container"
Here is a jsfiddle
Right now it looks like this:
But I want it to look like this:
Here's my HTML
<div class="theme-landingpage-main">
<div class="container">
<div class="row">
<div class="col m12 l12 s12 layout-header">
<p class="headertitle">MELLOW<br /> MOMENT</p>
</div>
</div>
<div class="row layout-hero">
<div class="col s12 m6 l6 module-hero-picture-badge">
<img id="badge" src="app/assets/img/login/badge.png" alt="">
<img id="boxhero" src="app/assets/img/login/boxhero.png" alt="">
</div>
<div class="col s12 m6 l6 module-hero-text">
<img id="text-chill-banner" src="app/assets/img/login/banner.png" alt="">
<img id="talking-to-you" src="app/assets/img/login/text-talking-to-you.png" alt="">
<p>Take your life back. Breathe. Take stock of yourself. You need a break. Take one.<br>
Focus your mind. Relax your body.<br>
<p style="font-family: 'Raleway', sans-serif !important; font-weight: 400 !important; font-style: italic;">(and Take a Toke).</p>
</p>
<img id="text-retake-moment" src="app/assets/img/login/moment-text.png" alt="">
<img class="shop-button" src="app/assets/img/login/shopbut.png" alt="">
</div>
</div>
</div>
</div>
Here's the CSS
.theme-landingpage-main {
background-color: #FFD000;
//layouts and modules for landing page '/login'
.layout-header {
width: 100%;
height: 130px;
background-color: #FFD000;
.headertitle {
font-size: 40px !important;
position: relative;
font-family: 'Lobster Two', sans-serif !important;
font-weight: 400;
bottom: 25px;
}
}
.layout-hero { <---------------- this is the div in question
background-color: #F2F2F2;
.module-hero-picture-badge {
#badge {
position: relative;
width: 65%;
z-index: 2;
}
#boxhero {
width: 75%;
position: relative;
left: 17%;
bottom: 100px;
z-index: 1;
}
}
.module-hero-text{
p {
position: relative;
top: 20px;
right: 23px;
font-size: 20px !important;
text-align: center;
}
#text-chill-banner {
width: 128%;
position: relative;
right: 20%;
top: 50px;
z-index: 3;
}
#talking-to-you {
width: 480px;
position: relative;
top: 41px;
right: 45px;
}
#text-retake-moment {
width: 500px;
position: relative;
right: 12%;
}
}
}
}
What you need to do is close the initial .container (holding the logo) open a new div with a custom class enabling you to style it up (give it white background), open a new .container and have your hero content. When done, close .container again, close .white-bg, re-open .container and continue page.
.white-bg {
background-color: white;
}
<div class="theme-landingpage-main">
<div class="container">
<div class="row">
<div class="col m12 l12 s12 layout-header">
<p class="headertitle">MELLOW<br /> MOMENT</p>
</div>
</div>
</div> <!-- closed container -->
<div class="white-bg"> <!-- full width -->
<div class="container"> <!-- new container -->
<div class="row layout-hero">
<div class="col s12 m6 l6 module-hero-picture-badge">
<img id="badge" src="app/assets/img/login/badge.png" alt="">
<img id="boxhero" src="app/assets/img/login/boxhero.png" alt="">
</div>
<div class="col s12 m6 l6 module-hero-text">
<img id="text-chill-banner" src="app/assets/img/login/banner.png" alt="">
<img id="talking-to-you" src="app/assets/img/login/text-talking-to-you.png" alt="">
<p>Take your life back. Breathe. Take stock of yourself. You need a break. Take one.<br>
Focus your mind. Relax your body.<br></p>
<p style="font-family: 'Raleway', sans-serif !important; font-weight: 400 !important; font-style: italic;">(and Take a Toke).</p>
<img id="text-retake-moment" src="app/assets/img/login/moment-text.png" alt="">
<img class="shop-button" src="app/assets/img/login/shopbut.png" alt="">
</div>
</div>
</div> <!-- closed container -->
</div> <!-- closed white-bg -->
<div class="container">
Some other content, in container...
</div>
</div>
Side note: I noticed you have nested <p> tags. That's invalid HTML and will cause rendering problems. Most browsers will close the initial <p> tag before opening a new one, leaving your ending </p> orphan. Sometimes this doesn't have any visible effects, but it has the potential to break page or cause bugs that are hard to track/fix.
You can do it by using container for separate div
HTML
<div class="theme-landingpage-main">
<div class="container">
<div class="row">
<div class="col m12 l12 s12 layout-header">
<p class="headertitle">MELLOW<br /> MOMENT</p>
</div>
</div>
</div>
</div>
<div class="theme-landingpage-main white">
<div class="container">
<div class="row">
<div class="row layout-hero">
<div class="col s12 m12 l12 module-hero-picture-badge">
</div>
<div class="col s12 m12 l12 module-hero-text">
<p>Take your life back. Breathe. Take stock of yourself. Take one.<br>
Focus your mind. Relax your body.<br>
</p>
</div>
</div>
</div>
</div>
CSS
Add class white or background-color: #fff of this div class
.white {
background-color: #fff;
}
Demo
As per Grid explained in Materialize documentation. "It allows you to center your page content. The container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content."
You need to divide the .container class withing the page. Where you want full width, just exclude that area from .container.
Example:
<div class="yellowBkg">
<header class="container">
Header Content
</header>
<div class="fullWidthGrayBkg">
<div class="container">
Because you need content within container.
</div>
<div>
<div class="container">
Further Content.
</div>
</div>
See your fiddle modified with solution: https://jsfiddle.net/avtarnanrey/ugr9qjp7/1/
the anchor tag in my carousel is showing dead link. i.e. cannot hover over it. everything else works fine. but the link is not working inside the div. i have used all the files from bootstrap and have not made any changes to the scripts.
HTML:
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('images/slide1.jpg'); background-size:cover;"></div>
<div class="carousel-caption">
<h1>Caption 1</h1>
<p></p>
Read More »
<br/>
<div class="tech">
<img src="images/tech.png" />
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('images/slide2.jpg'); background-size:cover;"></div>
<div class="carousel-caption">
<h1>Caption 2</h1>
<p></p>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('images/slide3.jpg'); background-size:cover;"></div>
<div class="carousel-caption">
<h1>Caption 3</h1>
</div>
</div>
</div>
In the comments provided to patel.milanb's answer, the author points to a live example of his problem: http://itechnepal.com/new_site//
The issue: The <ol> containing the carousel indicators overlaps a link, which therefor is not clickable.
Removing bottom: 10px; from .carousel-indicators will solve the issue.
CSS:
.carousel-indicators {
position: absolute;
/*bottom: 10px; <- remove this*/
left: 50%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
As what i could understand from your question.
link is not working inside DIV
I would say you did not provided any link to your <a> tag
<a href="#" class="read">
replace with:
<a href="http://www.google.com/" class="read">
Update: remove your style from css
.carousel-indicators {
top: 180px;
}
look into bootstrap.css line no: 6590
OR remove bottom: 10px; from class .carousel-indicators Line no: 6523
This is probably a pretty basic question, but I have a banner with an image on the left and text on the right. Under the banner is just a block of color. When the page gets smaller, my expectation is that the bits in the banner would stack (maintaining the background color for both) and the block of color (class="blue-line") would fall beneath them.
Here is the mark-up:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
</section>
and the css
.header {
background-color: #F2EBCC;
border: 10px solid #F2EBCC;
height: 120px;
}
.row > .title {
text-align: right;
top: 45%;
}
Thanks in advance!
JSFiddle: http://jsfiddle.net/3n6Kd/
try this:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
and:
.header {
background-color: #F2EBCC;
height: 120px;
}
.title {
text-align: right;
display: block;
padding: 10px;
}
.blue-line {
margin-top:10px;
height: 15px;
background-color: blue;
}
the text go under the first column not the blue-line, but it seems to appear above the blue-line so try it in your computer because some time jsfiddle.net don't show code correctly.
hope it will help you.
I dont understand why I have a large gap between the second picture and the text to its right. I've attached a fiddle for the code. How do I close this gap?
http://jsfiddle.net/7Qchr/
.main {
-webkit-column-gap: 1em;
-webkit-column-rule: 2px;
-webkit-columns: 2;
}
#image {
max-width: 100%;
}
<div class="main">
<p id="text_l">
“ The best selection of cheese I've ever seen! Cannot wait for our next order!”
<p>
<img src="img/cheese1.jpg" alt="Picture of cheese" id="image">
</div>
<div class="main">
<img src="img/cheese2.jpg" alt="Picture of cheese" id="image">
<p id="text_r">
“ Wow,amazing cheese selection and fast delivery! I highly recommed you try!”
<p>
</div>
You'll have to rewrite your code a bit... Try something like this:
HTML
<div class="main">
<div>
<p id="text_l">blah</p>
</div>
<div>
<img src="cheese1.jpg" class="image">
</div>
</div>
<div class="main">
<div>
<img src="cheese2.jpg" class="image odd">
</div>
<div>
<p id="text_r">blah</p>
</div>
</div>
CSS
.main div{
width: 48%;
display: inline-block;
vertical-align: top;
}
.image {
max-width: 100%;
padding: 0 10px;
}
.image.odd {float: right;}
http://jsfiddle.net/7Qchr/6/
Updated Demo
The following CSS was added (none of the existing HTML or CSS was changed).
.main + .main {
text-align: right;
}
p {
text-align: left;
}
So I've been using CSS table display property to get a table layout on my site. Now before you go into the using 'float' property or use the HTML table tag, I prefer the CSS table layout and find it better and my mind is made up. Here is the HTML code:
<div class="page_wrap">
<div class="header">
<div class="banner">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Topics</li>
<li>"Closet"</li>
<li>Music</li>
<li>Resources</li>
<li>About</li>
</ul>
</div>
<div class="directory"></div>
</div>
<div class="content">
<div class="main_col">
<div class="blog">
<div class="blog_head">
<h3>What To Wear Today</h3>
</div>
<div class="blog_body">
<p></p>
</div>
<div class="blog_recent"></div>
</div>
<div class="news">
<div class="news_recent"></div>
</div>
</div>
<div class="sub_col">
<div class="daily_verse">
<h3>"What Word To Wear Today"</h3>
<p></p>
</div>
<div class="bible_topic"></div>
</div>
</div>
<div class="footer">
<div class="container"></div>
</div>
</div>
And here is the CSS:
.content
{
display: table-column-group;
margin-top: 25px;
}
.main_col
{
display: table-column;
background: red;
width: 550px;
padding: 20px 15px;
}
.sub_col
{
display: table-cell;
background: green;
width: 350px;
padding: 20px 15px;
}
.blog
{
display: table-cell;
background: black;
}
.blog h3
{
padding: 20px 0px;
width: 250px;
}
.news
{
display: table-cell;
background: gray;
}
.daily_verse
{
display: table-cell;
}
.bible_topic
{
display: table-cell;
}
</style>
The problem is when I use the table-column property in the CSS, then everything in the HTML tag under the main_col div disappears.
Use this example as your structure and go from there. Your table is crazy disorganized and I don't think you are actually wanting table-columns. Or maybe an illustration of how you'd like it to look would help and we could provide code examples?
(http://xahlee.info/js/css_table.html)