I'm trying to pack the pictures in
<div class="social block"> ... </div>
appear to be side by side, like a grid. I'm also trying to make it completely fluid, and self-adjusting (hence Bootstrap).
I want two make a total of two rows that will have 3 icons in each, with all of the images touching on the sides.
It currently looks like this: http://postimg.org/image/z0g80wf0z/
Here is my CSS:
// Place all the styles related to the Pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
p{
color: rgb(51, 51, 51);
display: block;
font-family: Roboto, sans-serif;
font-size: 21px;
font-weight: 100;
height: 90px;
line-height: 30px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 30px;
text-align: center;}
p, h1 { margin: 0 }
html {
position:relative;
height:100%;
width:100%;
}
html,body
{
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
body {
position:absolute;
min-width:100%;
min-height:100%;
}
.window {
height:700px;
width:100%;
//border-top: solid 1px #000; //temp test
}
.full{
width:100%;
}
.main-home {
background: url('http://i58.tinypic.com/2v34yub.jpg') no-repeat center center;
background-size:cover;
}
.main-about {
background: url('https://static.pexels.com/photos/1440/city-road-street-buildings.jpg') no-repeat center center;
background-size:cover;
}
.window-support {
padding: 80px 0;
text-align: center;
}
.content {
top:225px;
position:relative;
text-align: center;
color: white;
}
h1.headline {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 50px;
}
h2.headline {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 35px;
}
.btn.sharp {
border-radius:0;
border:none;
font-size: 14px;
}
.menu-icon {
top:30px;
left:30px;
position:absolute;
margin: 0;
}
.col-centered{
float: none;
margin: 0 auto;
}
.halfBack {
width: 50%;
height:500px;
}
.grid-text {
padding-top:205px;
}
.text-background {
height: 2em;
width: 100%;
background-color:#000;
line-height:2em;
vertical-align:middle;
text-align:center;
opacity:0.7;
}
#footer {
background-color: #f9f9f9;
border-top: solid 1px #F5F5F5;
height:50px;
text-align: center;
line-height:50px;
vertical-align:middle;
color: #ccc;
position:absolute;
bottom:-50px;
width:100%;
}
#abt-grid-3 {
background: url('https://paulkporterphotography.files.wordpress.com/2015/04/20141210-distillery-31.jpg') no-repeat center center;
height:500px;
background-size:cover;
border: solid 2px #F5F5F5;
}
#abt-grid-1{
background:url('https://i0.wp.com/upload.wikimedia.org/wikipedia/commons/1/14/1_yonge_street_toronto_winter_2010_panorama.jpg') no-repeat center center;
height:500px;
background-size:cover;
border: solid 2px #F5F5F5;
}
#abt-grid-2{
background: url('http://ryersonbuilds.ryerson.ca/wp-content/uploads/2013/12/X6C61871.jpg') no-repeat center center;
height:500px;
border: solid 2px #F5F5F5;
background-size:cover;
}
#leftHalf {
background: url(images/bg-1.jpg);
width: 70%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(images/bg-2.jpg);
width: 30%;
position: absolute;
right: 0px;
height: 100%;
}
.socialBlock{
border: solid 1px #CCC;
height: 300px;
width:100%;
}
.edgeWrap {
margin:0px;
padding:0;
width:100%;
}
.socialBlock {
.row {border:solid 1px #000;}
.col-md-4 {}
.container{width:auto;}
}
Here is the html:
<!DOCTYPE html>
<html>
<!-- start page -->
<div id="leftHalf" class="halfBack">
<div class="window main-home">
<div class="container edgeWrap">
<!-- content -->
<div class="row">
<div class="content col-md-12">
<h1 class="headfont text-center white" data-sr="flip 65deg over 2s" >Hi, I'm Satchel.</h1>
<p data-sr="flip 65deg over 2s"> <%= link_to 'About Me', '/about', class:'btn btn-primary sharp btn-lg', role:'button' %>
<%= link_to 'The Blog', '/blog', class:'btn btn-primary sharp btn-lg', role:'button', target:'_blank' %>
</p>
</div>
</div>
</div>
</div>
</div>
<div id = "rightHalf" class="halfBack">
<div class="container edgeWrap">
<div class="row">
<div class="col-md-12">
<div class="socialBlock">
<div class="container">
<div class="row">
<div class="col-md-4"> <%= image_tag('icon/youtube-play.png',class:'img-responsive') %> </div>
<div class="col-md-4"> <%= image_tag('icon/twitter.png', class:'img-responsive') %> </div>
<div class="col-md-4"> <%= image_tag('icon/twitter.png', class:'img-responsive') %> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
It's a little weird, because I'm trying to do a split (originally two halves now 3/10 and 7/10).
Any help is appreciated!
Satchel Hi there.
Have a look at this Fiddle to see if it helps you here.
I just tried to simplify this a bit, so if you wanted to run the Bootstrap way here.
You can always see how this works and replace the col-xs-xx with you own css. If you do not want to use Bootstrap.
You said you are wanting to have two rows each with 3 images all touching.
I did that this way.
<div class="col-xs-3">
<div class="row">
<img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg">
<img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg">
<img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg">
</div>
<div>
<div class="row padtop">
<img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg">
<img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg">
<img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg">
</div>
</div>
</div>
Related
I need a small help regarding simple html and css inside a grid.
like to attach a image which i actually want to achieve
#rectangle {
width: 100%;
height: 40px;
background: #8DB23F;
}
<div class="row">
<div class="col-md-12" id="rectangle"><span id="first" style="background-color:white;color:#8DB23F;font-size:40px;padding:7px 0px 2px 1px;border-color:white;margin-left: -15px;"><strong> JAW CRUSHER </strong></span></div>
</div>
I have achieved this as time arround please help me fix this issue (not responsive)
This a suggestion and it will work on plane background color and single line text. Just make a try.
.row {
width: 100%;
height: 40px;
background: #8DB23F;
}
.row strong{
line-height: 40px;
background: white;
display: inline-block;
}
<div class="row">
<strong> JAW CRUSHER </strong>
</div>
i think this will help you achieve the required design
<div class="row">
<div class="col-md-12" id="rectangle"><span id="first"><strong> JAW CRUSHER </strong></span></div>
</div>
<style>
#rectangle{
width:100%;
height:auto;
background:#8DB23F;
}
#first{
background-color:white;
color:#8DB23F;
font-size:40px;
padding:7px 0px 2px 1px;
border-color:white;
margin-left: -15px;
}
#media screen and (max-width: 480px) {
#first {
font-size:20px;
}
}
</style>
#rectangle {
width: 100%;
display:block;
height:40px;
background-color: red;
}
strong {
background-color: #fFF;
}
p {
flex: 1 0 auto;
margin-right:10px;
font-size:30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12" style="display:flex;align-items: baseline;">
<p ><strong> JAW CRUSHER </strong></p>
<div id="rectangle"></div>
</div>
</div>
#Box {
width: 100%;
height: auto;
background: #8DB23F;
}
#name {
background-color: white;
color: #8DB23F;
font-size: 40px;
padding: 10px 0px 3px 3px;
border-color: white;
margin-left: -15px;
}
#media screen and (max-width: 480px) {
#Box {
height: 100%;
}
#name {
font-size: 37px;
}
}
<div class="row">
<div class="col-md-12" id="Box"><span id="name"><strong> JAW CRUSHER </strong></span></div>
</div>
So, I'm trying to make this boxes that will hold some text and maybe some img brackground, but boxes won't align like they should on a small screen.
I tried a few things, but text won't align on the botton without destroying the alignment
CSS:
.bigbox {
text-align: center;
padding: 80px 40px;
}
.bigbox .bigbox-title {
text-align: left;
font-size: 28px;
color: #fff;
}
.bigbox .bigbox-text {
text-align: left;
font-size: 18px;
color: #fff;
opacity: .85;
margin-bottom: 20px;
}
.smallbox {
text-align: center;
padding: 80px 40px;
}
.smallbox.smallbox-title {
text-align: left;
font-size: 28px;
color: #fff;
}
.smallbox.smallbox-text {
text-align: left;
font-size: 18px;
color: #fff;
opacity: .85;
margin-bottom: 20px;
}
HTML
<div class="full-width-container">
<div class="row no-space-row ">
<div class="col-sm-6 bg-color-base">
<div class="bigbox ">
<h2 class="bigbox-title">BOX 1</h2>
<p class="bigbox-text">DESCRIPTION</p>
</div>
</div>
<div class="col-sm-6">
<div class="smallbox bg-color-purple ">
<h2 class="smallbox-title">BOX 1</h2>
<p class="smallbox-text">DESCRIPTION</p>
</div>
<div class="smallbox bg-color-purple-dark ">
<h2 class="smallbox-title">BOX 1</h2>
<p class="smallbox-text">DESCRIPTION</p>
</div>
</div>
</div>
</div>
The key in this is display:flex on the parent div. This is forcing the two child divs to be the same height.
I have removed the padding from the second div to move it closer to the big box, then position:absoluted the big box title to the bottom of the div.
I've also played with the padding a bit to help with styling - but haven't got it styled to look just like the image above.
.row {
display:flex;
}
.bg-color-base {
background:red;
}
.bg-color-base + div{
padding:0;
}
.bg-color-purple {
background:purple;
}
.bg-color-purple-dark {
background:blue;
}
.bigbox {
text-align: center;
padding: 40px;
position:absolute;
bottom:0;
}
.bigbox .bigbox-title {
align-self: flex-end;
text-align: left;
font-size: 28px;
color: #fff;
}
.bigbox .bigbox-text {
text-align: left;
font-size: 18px;
color: #fff;
opacity: .85;
margin-bottom: 20px;
}
.smallbox {
text-align: center;
padding: 160px 40px 10px;
}
.smallbox.smallbox-title {
text-align: left;
font-size: 28px;
color: #fff;
}
.smallbox.smallbox-text {
text-align: left;
font-size: 18px;
color: #fff;
opacity: .85;
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="full-width-container">
<div class="row no-space-row ">
<div class="col-xs-6 bg-color-base">
<div class="bigbox ">
<h2 class="bigbox-title">BOX 1</h2>
<p class="bigbox-text">DESCRIPTION</p>
</div>
</div>
<div class="col-xs-6">
<div class="smallbox bg-color-purple ">
<h2 class="smallbox-title">BOX 2</h2>
<p class="smallbox-text">DESCRIPTION</p>
</div>
<div class="smallbox bg-color-purple-dark ">
<h2 class="smallbox-title">BOX 3</h2>
<p class="smallbox-text">DESCRIPTION</p>
</div>
</div>
</div>
</div>
Here you go. The text has to be in an absolutely positioned div.
http://codepen.io/ruchiccio/pen/Kzbeqa
.bcenter {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
width: 100%;
text-align:center;
}
I'm about to become insane with this css thing. I don't know the language very well..and can't make what I need to do.
I have this html
<div id="content">
<div id="video-content">
<div id="source">
<div id="s-video">
</div>
<div id="source-controls">
</div>
</div>
<div id="preview">
<div id="p-video">
</div>
<div id="preview-controls">
</div>
</div>
</div>
<div id="segment-content">
<ul>
<li></li>
</ul>
</div>
</div>
and I have to achieve this:
so far my css code:
body {
margin: 0;
padding: 0;
/*font-family: Helvetica, Arial, sans-serif;*/
/*color: #666;*/
background: #141414;
/*font-size: 1em;*/
/*line-height: 1.5em;*/
}
#content {
background: dimgrey;
width: 97%;
height: 90%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#video-content {
background-color: #7F7F7F;
position: fixed;
width: 300px;
z-index: 20;
}
#segment-content {
background-color: #7F7F7F;
position: fixed;
width: 300px;
}
I am not interested in doing this resposive so far
To get a clean grid you'll have to change your html-structure a little bit.
<div id="content">
<div id="video-content">
<div class="row">
<div class="col-1-2">
<div id="source"></div>
<div id="s-video">
</div>
<div id="source-controls">
</div>
</div>
<div class="col-1-2">
<div id="preview">
<div id="p-video">
</div>
<div id="preview-controls">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-1-1">
<div id="segment-content">
</div>
</div>
</div>
</div>
Here's an example I made of how to achieve something similar to your screenshot:
Codepen example
You want to switch out the height-properties or remove them completly and let the content fill in dynamically. I used them in this example since we have no content, so that the divs become visible.
body {
margin: 0;
padding: 0;
/*font-family: Helvetica, Arial, sans-serif;*/
/*color: #666;*/
background: #141414;
height:auto;
/*font-size: 1em;*/
/*line-height: 1.5em;*/
}
#content{width:100%;
height:auto;
background: dimgrey;}
#video-content{width:80%;
height:370px;
margin:0 auto;}
#source{width:45%;
float:left;
height:auto;
}
#preview{width:45%;
float:left;
height:auto;
margin-left:10%;
}
#s-video{width:100%;
height:300px;
background-color:black;}
#p-video{width:100%;
height:300px;
background-color:black;}
#source-controls{width:100%;
height:50px;
background:red;
margin-top:20px;}
#preview-controls{width:100%;
height:50px;
background:red;
margin-top:20px;}
#segment-content:after {
content: "";
display: table;
clear: both;}
#segment-content{width:80%;
margin: 20px auto;
height:300px;
background:blue;}
this will work,although not the pretty way of writing css
I think you'd be much better off going with a pre-built framework if that's an option. Something like purecss.io or bootstrap. But this should also work for what you want.
https://jsfiddle.net/w5qfvezg/
.video-display {
background-color: black;
min-height: 200px;
}
.video-description {
background-color: red;
min-height: 50px;
}
body {
padding: 5%;
padding-left: 10%;
padding-right: 10%;
background-color: #999;
}
.video-item {
width: 49%;
float: left;
margin-bottom: 20px;
}
.video-spacer {
width: 2%;
float: left;
min-height: 200px;
}
#segment-content {
background-color: blue;
min-height: 200px;
}
<body>
<div id='video-content'>
<div class='video-item' id='source'>
<div class='video-display' id="s-video">
</div>
<div class='video-description' id="source-controls">
</div>
</div>
<div class='video-spacer'>
</div>
<div class='video-item' id='preview'>
<div class='video-display' id='p-video'>
</div>
<div class='video-description' id="preview-controls">
</div>
</div>
</div>
<div style='clear:both'>
</div>
<div id="segment-content">
<ul>
<li></li>
</ul>
</div>
</body>
I have two html files: index and portfolio. They use the same stylesheet. In index two divs extend to the full width of the container. However in portfolio the div only extends as long as the <h6>. I cannot figure out what is going on and how this could possibly be happening.
.container {
padding-top: 35px;
padding-left:18px;
padding-right:18px;
display:inline-block;
font-size: 0px;
overflow: hidden;
}
.spacer {
height: 2px;
}
h6 {
position:relative;
font-family:"code_boldregular";
font-size:18px;
margin: 0px;
top: 17.5px;
text-align:center;
}
#link1 {
position:relative;
height: 52.5px;
background-color: #545454;
width: 100%;
}
#link2 {
height: 52.5px;
background-color: #545454;
width: 100%;
}
<div class="container">
<div class="spacer"></div>
<div id="navlinks2">
<div id="link1" class="smalllinks"><a id="homeLNK" href="index.html"><h6>Home</h6></a>
</div>
<div class="spacer"></div>
<div id="link2" class="smalllinks"><h6>Portfolio</h6>
</div>
</div>
<div class="spacer"></div>
</div>
There are two issues that I have;
1) I'd like the images in the header to stay within my 990px header during browser window resize.
2) How do I align (middle) images withtin header?
This is what I get after resize
Orange image goes under black one.
While they suppose to stay like this (within 990px of course)
Here is the code:
body {
background-color: #e8e8e8;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
padding: 0;
margin: 0;
}
h1 {
padding: 0px;
margin: 0px;
}
#container {
margin:0px auto;
border:0px solid #bbb;
padding:10px;
min-width: 990px;
}
.white-box {
width: 180px;
margin: 0px;
}
#main-header {
border:1px solid #bbb;
height:98px;
padding:3px;
background:#FFF
min-width: 930px;
}
#main-content {
margin-top:10px;
padding-bottom:10px;
}
#main-body {
margin-left:10px;
width:666px;
height:150px;
}
#main-footer {
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
}
.box {
padding: 8px;
border: 1px solid silver;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 5px;
border-radius: 8px;
background-color: #fff;
}
.box1 {
width: 200px;
float: left;
}
.box2 {
margin-left: 224px;
}
div.left {
width: 200px;
float: left;
}
div.right {
width: 730px;
float: right;
margin-right:3px;
}
</style>
</head>
<body>
<div id="main-header">
<div class="left"><img src="imgn/banners/logo.gif" border="0" alt=""></div>
<div class="right"><img src="imgn/banners/banner1.gif" border="0" alt=""></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
</div>
<div id="main-footer">Main Footer</div>
</div>
</body>
HTML:
<div id="main-header">
<div class="left"><img src="imgn/banners/logo.gif" alt="" border="0"></div>
<div class="right"><img src="imgn/banners/banner1.gif" alt="" border="0"></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
<div style="clear:both;"></div>
</div>
<div id="main-footer">Main Footer</div>
</div>
CSS:
body {
background-color: #e8e8e8;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
padding: 0;
margin: 0;
}
h1 {
padding: 0px;
margin: 0px;
}
#container {
margin:0px auto;
border:0px solid #bbb;
padding:10px;
min-width: 990px;
}
.white-box {
width: 180px;
margin: 0px;
}
#main-header {
border:1px solid #bbb;
height:98px;
padding:3px;
background:#FFF
min-width: 933px;
}
#main-content {
margin-top:10px;
padding-bottom:10px;
}
#main-body {
margin-left:10px;
width:666px;
height:150px;
}
#main-footer {
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
}
.box {
padding: 8px;
border: 1px solid silver;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 5px;
border-radius: 8px;
background-color: #fff;
}
.box1 {
width: 200px;
float: left;
}
.box2 {
float:right; margin-left:0px; width:748px;
}
div.left {
width: 200px;
float: left;
}
div.right {
width: 730px;
float: right;
margin-right:3px;
}
Use the CSS background-image property instead of using an image. This way you can set the width of the container div as a percentage of the width of the outer container div based on the new size of the window after resize.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body { background-color: #e8e8e8; font-family: Arial, Helvetica, sans-serif; font-size:12px; padding: 0; margin: 0; }
h1 { padding: 0px; margin: 0px; }
#wrapper{width:990px; margin:0 auto;}
#container { margin:0px auto; border:0px solid #bbb; padding:10px; width: 990px; }
.white-box { width: 180px; margin: 0px; }
#main-header { border:1px solid #bbb; height:98px; padding:3px; background:#FFF; width: 990px; margin:0px auto; }
#main-content { margin-top:10px; padding-bottom:10px; }
#main-body { margin-left:10px; width:666px; height:150px; }
#main-footer { margin-top:10px; margin-bottom:10px; padding:10px; border:1px solid #bbb; }
.box { padding: 8px; border: 1px solid silver; -moz-border-radius: 8px; -o-border-radius: 8px; -webkit-border-radius: 5px; border-radius: 8px; background-color: #fff; }
.box1 { width: 200px; float: left; }
.box2 { float:right; margin-left:0px; width:748px; }
div.left { width: 200px; float: left; }
div.right { width: 730px; float: right; margin-right:3px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="main-header">
<div class="left"><img src="http://img89.imageshack.us/img89/2675/logoxnx.gif" alt="" border="0"></div>
<div class="right"><img src="http://img199.imageshack.us/img199/9759/banner2b.gif" alt="" border="0"></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
<div style="clear:both;"></div>
</div>
<div id="main-footer">Main Footer</div>
</div>
</div>
</body>
</html>
As suggested by Pete in another thread: You need to increase the min-width of #main-header to around 950px