I have following page structure:
div_Menu | div_Stat1 div_Stat2 div_Stat3 div_Stat4
When page width is not enougth - 4 divs going under Menu div. If the width changed I want last div_Stat4 will go under div_Stat1.
Relevant part of the code:
<div class="menu">...</div>
<div class="action">
<div class="title">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
</div>
css:
.menu {
float: left;
width: 200px;
height: 100%;
background-color: #006666;
color: #ffffff;
font-family: "Helvetica Neue",Georgia,Times,"Times New Roman",serif;
font-size: 2.0rem;
}
.action {
float: left;
padding-left: 60px;
}
.stat {
float: left;
background: #d8eacc;
padding: 10px;
border-color: azure;
border-style: solid;
text-align: center;
font-family: "Helvetica Neue",Georgia,Times,"Times New Roman",serif;
font-size: 1.6rem;
width: 200px;
margin-right: 10px;
}
What should I change?
Correct display:
When browser width smaller:
Try wrapping your menu and content in a flexbox:
<div class="container">
<div class="menu">...</div>
<div class="action">
<div class="title">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
</div>
</div>
.container {
display: flex;
}
That way, the .action will never go down.
Related
I want to make the images in day_time_block can cover the title class.
I also want to make all contents in day_time_block can be shown by overflow-x, but when adding overflow-x: auto; in scroll div, the images in day_time_block were covered by title div. like the following code. How to fix it?
HTML:
<html>
<body>
<div>
<div class="daily_content">
<div class="title">
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="img_title"/>
<div class="daily_title">Title</div>
</div>
<div class="scroll">
<div class="day_time_block">
<div class="day_time_text">Sunday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Monday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Tuesday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Wednesday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Thursday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
<style>
body {
margin: 0px;
}
.title {
background: #ED3632;
height: 25px;
}
.img_title {
width: 30px;
height: 20px;
float: left;
margin-left: 15px;
margin-right: 5px;
}
.daily_title {
color: #f6ff52;
font-size: 1em;
}
.daily_content {
background: #000000;
height: 3000px;
}
.scroll {
color: #ffffff;
font-size: 1em;
width: 480px;
overflow-x: auto;
white-space: nowrap;
background-color: aqua;
border: 1px red solid;
display: flex;
}
.day_time_block {
float: left;
color: #ffffff;
font-size: 1em;
padding-left: 8px;
}
.day_time_text {
font-size: 1em;
display: inline-block;
}
.daily_img {
width: 30px;
height: 20px;
margin-left: 10px;
position: relative;
top: -10px;
}
</style>
overflow work with display:block...but if you want to use display:flex then create parent div for that and make this display:block and apply overflow on parent div.
I don't really know how to put it in words but I do have pictures which will quite give you an idea of my problem. Seems like float is giving me the problem/
This is what I am trying to accomplish:
This is my problem:
Here's the code:
body {
background: #C52C2C;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
What I would like to do is change the height of the portfolio section but when I change the height, nothing changes. If I remove the boxes then I can change the height. How would I fix this?
Thank you if you well understood this.
That is because of impropper value of the display property for View More element. You should set it to be:
view_more{ display: block; } // Please replace **view_more** with the correct value to select the element
Also do that for the downward arrow.
Do you mean something like this?
https://jsfiddle.net/xsjjo654/1/
Code Sample:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
h1.title {
text-align: center;
color: white;
font-size: 40pt;
margin: 5px auto;
}
#portfolio {
overflow: auto;
clear: both;
min-height: 400px;
width: 100%;
background-color: #c62828;
text-align: center;
}
#portfolio > .wrapper {
display: table;
width: 100%;
}
#portfolio > .wrapper > section {
display: table-cell;
vertical-align: middle;
}
section.side-left {
text-align: right;
}
section.side-right {
text-align: left;
}
section.side-center {
width: 930px;
}
.images {
display: inline-block;
}
.images .box {
width: 300px;
height: 300px;
background-color: white;
display: inline-block;
float: left;
margin: 1px;
}
.button {
cursor: pointer;
background: transparent;
outline: 0;
border: none;
}
.button.round, .button.round-alt {
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 30px;
}
.button.round {
background-color: white;
color: #c62828;
}
.button.round-alt {
border: 2px solid white;
color: white;
margin: 30px;
}
.button.square {
border: 2px solid white;
color: white;
font-size: 14pt;
padding: 12px 30px;
margin: 40px auto;
}
/* (c) 2016 David#Refoua.me, www.Refoua.me */
</style>
</head>
<body>
<div id="portfolio">
<h1 class="title">
Portfolio
</h1>
<div class="wrapper">
<section class="side-left">
<button class="button round prev">
←
</button>
</section>
<section class="side-center">
<div class="images">
<!-- Top Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br>
<!-- Bottom Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</section>
<section class="side-right">
<button class="button round prev">
→
</button>
</section>
</div>
<button class="button square more">
View More...
</button>
<br>
<button class="button round-alt down">
↓
</button>
</div>
</body>
Try Bootstrap. It let's you play around with some cool grid functionality AND it's RESPONSIVE!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<style>
.inner {
height:350px;
background-color:white;
margin-top:5px;
margin-left:-25px;}
body {background-color:red;}
</style>
<body>
<div class='container'>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.6/js/bootstrap.min.js"> </script>
Output: http://s28.postimg.org/9y69346tp/test.png You can add more rows later if you're going to refresh your pictures from database automatically.
Hope that helps! Cheers!
if you give a width to images and margin:auto it should center much easier :)
body {
background: #C52C2C;
}
.images {
width:912px;
margin:auto;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
use this: clearfix
The problem here is that your container doesn't take the height of the inner boxes in consideration, so if you add the clearfix to it that will do the trick
I am working on a periodic table, and I came across a problem:
* {
text-align: center;
}
p {
font-size: 5px;
margin-top: -40px;
}
div {
height: 70px;
width: 70px;
line-height: 60px;
font-family: Trebuchet MS;
font-size: 30px;
}
.row1 {
margin-left: 92px;
background-color: #FFCC33;
}
#lithium {
margin-top: 170px;
}
<div class="row1">
<div id="lithium">Li
<p>Lithium</p>
</div>
<div id="sodium">Na
<p>Sodium</p>
</div>
<div id="potassium">K
<p>Potassium</p>
</div>
<div id="rubidium">Rb
<p>Rubidium</p>
</div>
<div id="cesium">Cs
<p>Cesium</p>
</div>
<div id="francium">Fr
<p>Francium</p>
</div>
</div>
In this case i want to change all div elements that are child to class 'row1' to #FFCC33. It works well if i just put all div's names(i.e. #lithium, #sodium,...{background-color: SOMECOLOR;}, but when i put class name(i.e. row1), it just affects the first child(in this case, its lithium). I have tried changing id to class and vice-versa to no avail. Is this supposed to even work or am I doing everything wrong here?
Try this
.row1 > div {
margin-left: 92px;
background-color: #FFCC33;
}
Demo Here
If you're trying to make sure that all <div> children of .row1 have a background color of FFCC33, try a selector like this:
.row1 > div {
background-color: #FFCC33;
}
You have to remove height:70px in div
* {
text-align: center;
}
p {
font-size: 5px;
margin-top: -40px;
}
div {
width: 70px;
line-height: 60px;
font-family: Trebuchet MS;
font-size: 30px;
}
.row1 {
margin-left: 92px;
background-color: #FFCC33;
}
#lithium {
margin-top: 170px;
}
<div class="row1">
<div id="lithium">Li
<p>Lithium</p>
</div>
<div id="sodium">Na
<p>Sodium</p>
</div>
<div id="potassium">K
<p>Potassium</p>
</div>
<div id="rubidium">Rb
<p>Rubidium</p>
</div>
<div id="cesium">Cs
<p>Cesium</p>
</div>
<div id="francium">Fr
<p>Francium</p>
</div>
</div>
I am trying to make a header wider, so that it extends to both sides of the browser size. I have all of my content inside of a wrapper div that is set to 990px. My header is the part I want to be full width. I also am trying to make my header have a fixed position. But when i put the corrected position into the css for the header, the title and the navigation bar stack vertically and do not remain how I originally set them.
<body>
<div class="wrapper">
<header class="header">
<h1>Automotive Industries</h1>
<ul class="navbar">
<li id="contact" class="navlist">Contact</li>
<li class="navlist">Services</li>
<li class="navlist">About</li>
<li class="navlist">Home</li>
</ul>
</header>
<div class="main">
<p>Welcome to the #1 stop in automotive today</p>
<div class="article">
<img class="image" src="http://cdnedge.vinsolutions.com/dealerimages/Dealer%204697%20Images/content/car-tire-repair.jpg">
</div>
<div class="article">
<img class="image" src="http://www.lonniesautomachineshop.com/shopimg/Engines1.jpg">
</div>
<div class="article">
<img class="image" src="http://image.superstreetonline.com/f/features/modp-1011-castrol-syntec-top-car-challenge-nissan-gtr/29181584/eurp_1011_02_o+castrol_syntec_top_car_challenge+lift.jpg">
</div>
</div><!--end of main-->
<div class="main-two">
<p id="two-header">Schedule today for a free consultation</p>
<div class="article">
<img class="image" src="http://s3-media2.fl.yelpcdn.com/bphoto/YDLPwsEk_fMXIw9Xwu_8rw/ls.jpg">
</div>
<div class="article">
<img class="image" src="http://image.trucktrend.com/f/tech/1011tr_2004_gmc_sierra_buildup/28770854/1011tr_03+2004_GMC_sierra_buildup+factory_ring_and_pinion.jpg">
</div>
<div class="article">
<img class="image" src="http://aautomotivetx.com/wp-content/uploads/2013/04/Brakes.jpg">
</div>
</div><!--end of main-two-->
<div class="main-three">
<p id="two-header">Guranteed service for 30 days</p>
<div class="article">
<img class="image" src="http://bernalautobodyrepair.com/images/paint_booth.jpg">
</div>
<div class="article">
<img class="image" src="https://www.bkreader.com/wp-content/uploads/2015/06/welding-1.jpg">
</div>
<div class="article">
<img class="image" src="http://cdn.instructables.com/F4Q/QD4F/HHS9SLP0/F4QQD4FHHS9SLP0.LARGE.jpg">
</div>
</div><!--end of main-three-->
<footer class="footer">
<p class="copyright">Schedule now! Call today at (123)456-7890.</p>
<p class="copyright-two">Copyright © All Rights Reserved.</p>
<div class="social-icons">
<img src="http://www.voxlumiere.com/wp-content/uploads/2009/12/facebook-logo-resized-image-50x50.png"/>
<img src="http://www2.actionforchildren.org.uk/media/128162/twitter_50x50.jpg"/>
<img src="http://www.clickondetroit.com/image/view/-/21435108/highRes/1/-/ubsa5pz/-/50x50-Instagram-logo-png.png"/>
</div><!--end of social-icons-->
</footer>
</div><!--end of wrapper-->
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 62.5%;
font-family: arial, sans-serif;
color: black;
background-image: url("http://www.theonecar.com/wp-content/uploads/2014/02/car-shops-499.jpg"), url("http://i.ytimg.com/vi/1n5j3sy-Rok/maxresdefault.jpg");
background-repeat: no-repeat;
background-position: top, bottom;
}
.wrapper {
font-size: 1.6em;
margin: 0 auto;
width: 990px;
background-color: white;
/*padding: 2em;*/
}
header {
background-color: white;
height: 50px;
display: block;
width: 100%;
}
header h1 {
float: left;
padding: 5px;
color: rgb(95, 207, 128);
margin-top: 5px;
margin-left: 100px;
font-size: 1.8em;
}
.navlist a {
text-decoration: none;
color: black;
}
.navlist a:hover {
color: white;
background-color: rgb(95, 207, 128);
padding: 15px;
}
.navlist {
float: right;
display: inline-block;
text-align: center;
padding: 15px;
font-size: 1.2em;
}
.main {
min-height: 20px;
background-color: rgb(95, 207, 128);
display: block;
width: 100%;
}
.main p {
color: white;
font-size: 1.6em;
padding: 50px;
float: left;
width: 100%;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
.image {
min-width: 200px;
min-height: 200px;
max-width: 200px;
max-height: 200px;
}
.main-two {
background-color: #39ADD1;
display: block;
}
.main-two p {
color: white;
font-size: 1.6em;
padding: 50px;
text-align: right;
width: 100%;
}
.main-three {
min-height: 20px;
background-color: #f08c35;
display: block;
width: 100%;
}
.main-three p {
color: white;
font-size: 1.6em;
padding: 50px;
float: left;
width: 100%;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
footer {
background-color: #294860;
}
.copyright {
text-align: center;
padding: 5px;
color: white;
font-size: 1.4em;
}
.copyright-two {
text-align: center;
padding: 5px;
color: white;
font-size: 1.4em;
}
.social-icons {
display: inline-block;
padding: 5px;
margin-left: 40.2%;
width: 100%;
}
.social-icons a {
margin-left: 5px;
header {
...
width: 100%;
min-width: 990px;
position: fixed;
left: 0;
}
Demo
You're seeing horizontal scrolling because the site loads in a frame. That shouldn't happen in a full browser window.
you header would need to be outside the wrapper since the wrapper is 990px wide.
make the header width 100% but it needs to either be on the root of the div structure or in another 100% width element.
Because it's inside you're <div class="wrapper"> It's not possible,
Move it above the wrapper and it should work.
<header class="header">
<h1>Automotive Industries</h1>
<ul class="navbar">
<li id="contact" class="navlist">Contact</li>
<li class="navlist">Services</li>
<li class="navlist">About</li>
<li class="navlist">Home</li>
</ul>
</header>
<div class="wrapper">
I have a group of stats styled as shown below, but if I want to center the group, it will use the width of the descriptions that extend past and have a larger width. What's the easiest way to center according to the width of just the stat numbers and still have the descriptions below them?
.container {
text-align: center;
}
.stats {
display: block;
margin: 0 auto 30px auto;
}
.left-stats {
text-align: right;
display: inline-block;
margin-right: 40px;
}
.left-stats .single-stat {
text-align: right;
}
.right-stats {
display: inline-block;
}
.right-stats .single-stat {
text-align: left;
}
.single-stat {
margin-bottom: 20px;
}
.number {
font: 60px"Bebas Neue";
font-weight: bold;
margin-bottom: -5px;
}
<div class="container">
<h3>Header</h3>
<div class="stats">
<div class="left-stats">
<div class="single-stat">
<div class="number">1,200</div>
<div class="desc">Staff on campus supported</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">Departments reached</div>
</div>
</div>
<div class="right-stats">
<div class="single-stat">
<div class="number">06</div>
<div class="desc">Different home states/countries</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">People who love food and technology</div>
</div>
</div>
</div>
</div>
I have a solution using your HTML and using display: table-cell instead of display: inline-block. Instead of a 40px margin to create the space between the columns, I added 20px left/right padding in the relevant elements.
Note that I added dotted blue borders for demonstration purposes, you can remove them.
.container {
text-align: center;
}
.stats {
display: table;
width: 100%;
margin: 0 auto 30px auto;
border: 1px dotted blue;
}
.left-stats {
text-align: right;
display: table-cell;
width: 50%;
padding-right: 20px;
border: 1px dotted blue;
}
.left-stats .single-stat {
text-align: right;
}
.right-stats {
display: table-cell;
width: 50%;
padding-left: 20px;
border: 1px dotted blue;
}
.right-stats .single-stat {
text-align: left;
}
.single-stat {
margin-bottom: 20px;
}
.number {
font: 60px"Bebas Neue";
font-weight: bold;
margin-bottom: -5px;
}
<div class="container">
<h3>Header</h3>
<div class="stats">
<div class="left-stats">
<div class="single-stat">
<div class="number">1,200</div>
<div class="desc">Staff on campus supported</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">Departments reached</div>
</div>
</div>
<div class="right-stats">
<div class="single-stat">
<div class="number">06</div>
<div class="desc">Different home states/countries</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">People who love food and technology</div>
</div>
</div>
</div>
</div>
You mean something like this?
.number {
font: 60px"Bebas Neue";
font-weight: bold;
margin-bottom: -5px;
text-align: center;
}