So you can see what I currently have here: https://steelcowboy.me
Basically what I want is a white content area, grey on the sides and my blue navbar. I don't want any grey atop or below the white part (i.e. I want grey on the sides only, white in the middle). However, I'm not sure what I need to do -- I tried different display options for the container element, but the one that worked (flex) then messes up all the content inside. I feel like this is a really simply fix, but can't quite seem to get it. Anyone have an answer? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Steelsite</title>
<meta charset="utf-8">
<link href="/css/materialize.min.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/materialize.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#3f51b5">
<style>html,body { height:100%; margin:0; } a {font-weight: bold;} body {background-color:#e0e0e0;} img {max-width:100%; height:auto;} </style>
</head>
<body>
[navbar in here]
<main>
<div class="container white">
<h3 class="center-align">Welcome to the site of James Heald</h3>
<div class="row">
<div class="col s12 m6">
<div class="flow-text" style="font-size: 125%;">
<p>I'm a teen who loves bike riding, photography, travel, outdoor activities and computers! In September I will be attending Cal Poly SLO, majoring in Aerospace Engineering.</p>
<p>This site, currently under construction using the Materialize framework, is proudly hosted on the Raspberry Pi 2, pictured below.</p> </div>
</div>
<div class="col s12 m6">
<div class="center-align">
<img style="padding-top:1%; padding-bottom:1%;" class="responsive-img materialboxed" src="pictures/pi2.jpg" alt="The new home of steelcowboy.me!"></div>
</div>
</div>
<div class="divider"></div>
<h5>From running "fortune":</h5><p class="flow-text" style="font-size: 115%;">Real Users find the one combination of bizarre input values that shuts
down the system for days.
</p>
<div class="container center-align">
<img src="http://imgs.xkcd.com/comics/tags.png" class="responsive-img">
</div>
</div>
</main>
<script src="scripts/google.js"></script>
</body>
</html>
The problem is this selector:
h3 {
margin: 1.46rem 0 1.168rem 0;
}
It is setting a top margin which is pushing down the rest of the container.
If you set margin-top: 0 to that specific element, it should remedy the issue.
The space is contributed by your heading, remove the top margin on it and you're good. The solutions below illustrates how to fix them using inline styles but you should really consider using css classes :)
Solution 1: remove top margin on the h3, either inline or via a css class.
<h3 class="center-align" style="margin-top: 0px;">Welcome to the site of James Heald</h3>
Solution 2: Add a top padding to the container, either inline or via a css class. This might be a better approach as it does not interfere with your h3 classes, since you might want the top margin elsewhere on your site.
<div class="container white" style="padding-top: 10px;">
To make the container span the whole height, make sure all parent elements has height: 100%. e.g.:
<main style="height: 100%">
<div class="container white" style="padding-top: 10px; height: 100%">
...
Solved by adding overflow:auto to container
Related
I'm new to coding and trying to figure this out but, I was wondering if there is a way to display an array of images horizontally without the images dropping to the line below and without the entire page moving with the scroll bar. Currently I have a div container with 5 images. I'd like to add more, however upon adding the 5th image to my div container the image dropped to line below my other 4 images.
With only 4 images, the page runs exactly how I want with a scroll bar that moves when you hover and doesn't move the entire webpage with it.
I looked up different solutions and tried adding white-space: no wrap and adjusting the width of my div container but none of these issues fixed the image dropping to the line below. With increasing the width of my div container I found that the entire webpage also moves with that div which is something I also don't want.
Attached is my code for HMTL and CSS
.menu_imagebox {
display: flex;
overflow: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TOWN_Restaurant</title>
<meta charset="UTF-8">
<meta name="description"content="TOWN is a fine dining Asian cuisine restaurant whose mission is to bring quality, style, and good fortune to all guests. ">
<meta name="keywords" content="TOWN Restaurant, food, story, menus, contact, location">
<meta name="author" content="Alexandria Brown">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="https://kit.fontawesome.com/7d95d78745.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="menu_page">
<div class="food">
<h2>Cuisine Menu</h2>
</div>
<div class="menu_container">
<img alt="menu" class="menu" src="images/menu_pg1.jpg">
</div>
</div>
<div class="menu_imagebox">
<div class="menu_image1">
<img atl="" class="" src="images/salmon.jpg">
</div>
<div class="menu_image2">
<img alt="" class="" src="images/app.jpg">
</div>
<div class="menu_image3">
<img alt="" class="" src="images/chicken.jpg">
</div>
<div class="menu_image4"></div>
<img alt="" class="" src="images/app2jpg.jpg">
</div>
<div class="menu_image5"></div>
<img alt="" class="" src="images/wagyu.jpg">
</div>
<div class="menu_image6"></div>
<img alt="" class="" src="">
</div>
</div>
Put Everything You want to Scroll in this Div i.e images then only the images will scroll left and right while the rest of the page remains still.
<div class="hscroll"></div>
<style>
.hscroll {
overflow-x: auto; /* Horizontal */
}
</style>
Also, you should arrange the images in a table and read more about semantic markup.
I have a white box that is floated left. I adjusted it to the center and I want it to overlap the background image of my title. But when I adjust the margin negative, to make it go up and overlap the background image at the top, it just cuts itself off. I can't figure out why
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
<title>Try Slim Leaf</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<section>
<div class="container">
<div class="row1">
<div class="header">
Women Over 35: Struggling With Stress Eating And Worried About How That’s Going Straight To Your Waistline?
</div>
</div>
</div>
</section>
<section><!--Hero Title-->
<div class="container">
<div class="row1">
<div class="hero-img">
<h2>“I Lost <span class="red-text">53 Pounds</span> Eating Cakes, Pizza & Ice Cream… By Flipping The</h2>
<h1>SUGAR SWITCH</h1>
<h2>Inside My Body…”</h2>
<h3>Discover How A <span class="red-text"><strong>“Near-Tragic”</strong></span> Experience Led An<br>
Arkansas Woman To Discover The Secret <span class="red-text"><strong>“Sugar Switch...”</strong></span><br>
And Lose Weight While Eating Delicious Carbs
</h3>
<h4>Now You Can Use This Breakthrough To Shed Unwanted Weight From The Comfort Of Your Home Too!</h4>
</div><!--End Hero Img-->
</div><!--End Row 1-->
</div><!--End Container-->
</section><!--End Hero Title-->
<main><!--Main Content-->
<section><!--Section 1-->
<div class="container">
<div class="row1 bg-gray">
<div class="box-white">
<div class="col">
<div class="col1"><img src="images/img1.png" alt="" width="368" height="796" class="fluid-img"/></div>
<div class="col2">
<p class="std-p">Hey, my name’s Katie Patterson.</p>
<p class="std-p"><strong>Over the next few minutes, I’m about to tell you my shameful story about how I nearly let my 5-year-old son drown…</strong></p>
<p class="std-p">All because I was too out-of-shape to run 30 steps to save him.</p>
<p class="std-p">Truthfully, I let myself go over the years…</p>
<p class="std-p">And it got to the point I could barely stand the way I looked in the mirror.</p>
<p class="std-p">My love life with my husband was practically non-existent.</p>
<p class="std-p">I avoided taking photos with friends…</p>
<p class="std-p">Seeing those pictures on social media made it painfully obvious how <strong>“big”</strong> I was compared to them.</p>
<p class="std-p">And as much as I felt like I was <strong>“cursed”</strong> with bad genes and a body that piled on stubborn fat…</p>
<p class="std-p">The tipping point came when being overweight nearly made my son drown.</p>
<p class="std-p">Today, I’m relieved to say, my son’s okay…</p>
<p class="std-p"><strong>AND there’s a silver lining too.</strong></p>
<p class="std-p">Because this near-tragic experience led me to discover…</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
I am a beginner and I hope somebody can help.
Thank you. I appreciate any advice.
From the comments above:
It is the overflow-x on .bg-gray. If you remove that the image extends beyond the parent element as you desire. I'm looking for other solutions in place of the overflow property.
overflow-y: visible; will allow your image to overflow, auto will contain any elements and create scrolling when necessary. Since this is negative margin it does not create a scroll.
Without the overflow-y your background image does not appear because you have floated all of the children and therefore .bg-gray, aka .row1 has no height.
For column layouts you should look up the more modern approach of using flexbox. Remove your floats and add display: flex; to .col
CSS
.col {
display: flex;
}
You should see your image overflow the parent and your columns sit side-by-side.
IF YOU MUST USE floats I recommend not using overflow property to get the parent to contain the floats and rather use a technique where you add an (pseudo) element to the document AFTER the the floats that clears the floats and effectively gets the parent element to wrap your floated elements.
For your example you would need something like this:
CSS
.row1::after {
content: '';
display: table;
clear: both;
}
Idk if you are using SCSS yet, but in the case you do or for others:
Reference: http://nicolasgallagher.com/micro-clearfix-hack/
SCSS Placeholder class to use with #extend
%clear {
&::after {
content: '';
display: table;
clear: both;
}
}
.row {
#extend clear;
}
SCSS Mixin to use with #include
#mixin clear {
&::after {
content: '';
display: table;
clear: both;
}
}
.row {
#include clear;
}
I am very sorry if my question or codes are confusing to you. I am trying to Position 3 divs, one on the left, two on the right (above and bottom) respectively. I want it to be like the following image:
I am using the following codes, and I can get the icon displayed correctly, but the text "ferrari' and ion-checkbox are not displayed similarly as the image attached below. And the div that contains the text 'Some Icons' is not similarly as the image attached below. At first I thought this is simple task and I tried but cannot make this work. I have been stuck for this. Can any CSS expert help me please?
<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="//code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>
<div class="container" style="width:25%;height:25%;display:inline-block;">
<img style="width: 100%;
height: auto;" src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg " />
</div>
<div style="width:75%;height:25%;display:inline-block;">
<b style="width:100%;height:50%;">Ferrari</b>
<!-- Will display some icons in it later-->
<div style="width:100%;height:50%;">Some Icons</div>
</div>
<div style="height:25%;width:75%;">
<ion-checkbox>
Please check me and ETC. !!!
</ion-checkbox>
</div>
The Some Icons Box is not displayed because you lost a " at the end of your style attribute.
Have a look at the ionic framework docs to wrap your boxes easy: https://ionicframework.com/docs/v2/components/#grid
You should use Ionic's in built grid system by assigning a row as a container, and within that row, defining columns. You can do something like this..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content >
<div class="row">
<div class= "item item-image col col-25">
<img src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg">
</div>
<div class= "list col col-75">
<div class="item item-text-wrap">
some text here
</div>
<ion-checkbox class="item item-text-wrap item-checkbox-right">
othet text here
</ion-checkbox>
</div>
</ion-content>
</ion-pane>
</body>
</html>
You will need to remove the padding that the rows and columns have by default like so.
/* Styles here */
.row,
.col{
padding:0;
}
Working Example http://play.ionic.io/app/296ddd83faf9
You can use float to align the div side by side. Using display: inline-block; have some small extra space after them so using exact width won't work. You need to remove that space if you want to achieve it using inline-block property. Here is an article that explains how you can do that.
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Or you can use float instead. You need to clear floats that I've done using clearfix css.
.clearfix:after {
display: table;
content: "";
clear: both;
}
<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="//code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>
<div class="container clearfix" style="width:25%;height:25%;float:left;">
<img style="width: 100%;
height: auto;" src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg " />
</div>
<div class="clearfix" style="width:75%;height:25%;float:left;">
<b style="width:100%;height:50%;">Ferrari</b>
<!-- Will display some icons in it later-->
<div style="width:100%;height:50%;">Some Icons</div>
</div>
<div style="height:25%;width:75%;">
<ion-checkbox>
Please check me and ETC. !!!
</ion-checkbox>
</div>
I am new to bootstrap and I was trying the following stuff. I made 3 columns, where each column has 2 paragraphs. Using CSS I defined color scheme for medium-sized-screens , large-sized-screens and extra-small-screens.
Initially the color that I see is orange. That is just the color I expected. But when I re-size the screen from large to extra-small I do not see any color change. I cannot get the reason for it ? What is the mistake that I am making ?
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='css/bootstrap.css' />
<style>
.col-md-4 {
background-color: yellow;
}
.col-xs-4 {
background-color: red;
}
.col-lg-4 {
background-color: orange;
}
</style>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col-lg-4 col-xs-4 col-md-4'>
<p> You shout it out, But I can't hear a word you say !</p>
<p> Beqarar karke humein yun na jaiye..Aapko hamari kasam laut aaiye</p>
</div>
<div class='col-lg-4 col-xs-4 col-md-4'>
<p> I have started liking David Guetta's work !</p>
<p> I really liked his song 'Titanium' :-)</p>
</div>
<div class='col-lg-4 col-xs-4 col-md-4'>
<p> I am enjoying the saturday afternoon and it is 3:24 by clock.</p>
<p> How about going for a movie ?</p>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='js/bootstrap.js' />
</body>
Your rules arent using media queries, they are always added, so the last will always take effect.
If you want to modify their existing styles you should look into using mixins with Bootstrap's less files.
I have a Bootstrap 3 grid.
I need to add a header image that's 960 pixels wide.
However, if I add it to a row, the usual padding of 10px on a column "offsets" my image since it no longer "fits":
I know how to force this to work, but I was wondering if I am missing some modifier class in BS3 to make this work.
And, yes, I know I could use a css background-image but the client wants an image there.
Add a class to your CSS that removes the margin to make full-width image within the column and then add that class after the column.
.bosom-none {
margin-right: -15px; // Removes the right gap
margin-left: -15px; // Removes the left gap
}
<div class="container">
<div class="row">
<div class="colum-md-6 bosom-none">
<img src="your-image.jpg">
</div>
</div>
</div>
You probably have something else messing it up because as you can see, a container, row and then a img gives you no margins.
<div class="container" style="background:green">
<div class="row">
<img src="http://www.placehold.it/150x150">
</div>
</div>
http://jsfiddle.net/dBNwq/1
Here's the whole page
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="background:green;">
<div class="row">
<img src="http://www.placehold.it/960x150">
</div>
<div class="row" style="background:red;">
Some other content
</div>
</div>
</body>
</html>
This is a problem I've encountered many times with Bootstrap. You basically have three options:
If you're placing the image inside a column (e.g. .col-sm-12) which is inside a .row, you'll have to apply a negative margin to the image or a parent container equal to the column's padding: http://codepen.io/anon/pen/xEGkaQ
You could also instead make the image (or a wrapping div) a direct child of the .row but Bootstrap discouraged use to do this.
You can move the image outside the .col/.row all together, give it it's own .container and rid of that container's padding: http://codepen.io/anon/pen/WGvAap.
I usually go for option #1.
Please note that this does not answer your question. It meant to write this for future reference for other people encountering the same problem and do not know how to force this to work.
The actual answer to your question: no, Bootstrap does not offer such a modifier class.
Simply replace div class="container" with div class="container-fluid"
and that's it !
You can also create a class that will cover the container it is in...
.heroLg {
size:cover;
-webkit-size: cover;
-moz-size: cover;
-o-size: cover;
}
Then add the class to your image.
put the image into a span12
<div class="row">
<div class="span12">
<img src="image.jpg" />
</div>
</div>