I have a layouting problem while using this html/css coding.
Actually I want the symbols to be vertically aligned to the center of the div.
The second layout is displaying fine with float value set to left on child divs.
Whats wrong with the first layout. Any ideas?
Here is the code
<html>
<head>
<style type="text/css">
div, p {
margin:0;
padding:0;
}
div.wrapper {
background: #FFFFFF;
border-radius: 3px;
padding: 20px;
}
/* LAYOUT 1 STYLE */
div.list1 div {
display: inline-block;
}
div.thumb1 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol1 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
/* LAYOUT 2 STYLE */
div.list2 {
overflow: hidden;
}
div.list2 div {
float: left;
}
div.thumb2 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol2 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
</style>
</head>
<body>
<div class="wrapper" id="layout1">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list1">
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>=</p></div>
<div class="thumb1"></div>
</div>
</div>
<div class="wrapper" id="layout2">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list2">
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>=</p></div>
<div class="thumb2"></div>
</div>
</div>
</body>
</html>
Just give vertical-align:middle to your to mentioned below class
div.list1 div {
display: inline-block;
vertical-align: middle;
}
Demo
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.
Somewhat like a ebay search page like this
enter image description here
in my code, only the first listed item looks just like the image above, but every picture after floats to the right side of the page, but the text stays on left.
I want it to look like this:
[]-list
[] -list
[] -list
with the code I have, the image in the second div is pushed to the right side. I want all images and text aligned underneath each other to look somewhat like the ebay layout
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<html>
<style>
*, html {
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
color: #000;
font-size: 30px;
font-family: Arial;
}
.clear {
clear: both
}
product_img
{
display:flex;
40px
}
.businessInfo
{
float: left;
margin-left: 12px;
width: 552px;
text-align: left;
}
.businessName
{
float: left;
margin-top: 2px;
text-align: left;
color: #ffffff ;
}
.sitePromotion
{
float: left;
margin-top: 6px;
font-size: 14px;
color: #ffffff ;
}
.baseLocation{
float: left;
font-size: 15px;
background: #ffffff ;
}
.location {
float: left;
font-size: 15px;
color: #ffffff ;
}
.contactInfo {
float: left;
margin-top: 4px;
font-size: 15px;
color: #ffffff ;
}
.connectInfo {
float: left;
margin-top: 10px;
font-size: 15px;
color: #ffffff ;
}
.moreConnectInfo {
float: left;
margin-top: 6px;
font-size: 15px;
color: #ffffff;
}
</style>
</head>
<body>
<body style="background-color:black;">
<h1 style= "color:grey;font-size:50px;">dollas</h1>
<h2 style="color:white; font-size:25px;;">North Jersey</h2>
<hr>
<!-- business 2-->
<div class="product_img">
<img alt="KB's BBQ SMOKEHOUSE - IRVINGTON, NJ 07111 (Menu & Order
Online)" class="n3VNCb"
src="https://menufyproduction.imgix.net/637255010998628698+201756.png?
auto=compress,format&h=1080&w=1920&fit=max" data-noaft="1"
jsname="HiaYvf" jsaction="load:XAeZkd;" style="width: 200px; height:
150px; margin: 0px;">
</div>
</div>
<div class="businessInfo">
<div class="businessName">KB's BBQ Smokehouse</div>
<div class="clear"></div>
<div class="location">Location: 1077 Stuyvesant Ave, Irvington, NJ
07111</div>
<div class="clear"></div>
<div class="contactInfo">Phone: (973) 982-6528</div>
<div class="clear"></div>
<div class="connectInfo">Website:https://kbbbqsmokehouse.com/ </div>
<div class="clear"></div>
</div>
<!-- business 3-->
<div class="product_img">
<img data-visualcompletion="media-vc-image" alt="May be an image of 1 person
and text that says 'Ard Bakery Arielitas'" class="ji94ytn4 r9f5tntg d2edcug0
r0294ipz" referrerpolicy="origin-when-cross-origin"
src="https://scontent.fewr1-
5.fna.fbcdn.net/v/t31.18172-
8/26198629_1997772167107826_8453467514730795477_o.jpg?_nc_cat=105&ccb=1-
3&_nc_sid=09cbfe&_nc_ohc=1EVQdCkudYUAX-
_oK4D&_nc_ht=scontent.fewr1-
5.fna&oh=db53b58b37272d072239b01f939d602f&oe=60B6C98F" style="width:
200px; height: 150px; margin-left: -300px;">
</div>
</div>
<div class="businessInfo">
<div class="businessName">Arielita's Bakery</div>
<div class="clear"></div>
<div class="location">Location:Montclair, NJ</div>
<div class="clear"></div>
<div class="contactInfo">To order:https://www.arielitasbakery.com/menu
</div>
<div class="clear"></div>
<div class="connectInfo">Website:https://www.arielitasbakery.com/menu
</div>
<div class="clear"></div>
</div>
Check this below snippet. Its just an skeleton. It will help you to build such layout.
.product_wrapper {
}
.product_loop {
display : flex;
width: 100%;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.product_image { background : #ccc; flex : 0 0 20%; height: 150px }
.product_content { flex : 1; padding: 10px }
<div class="product_wrapper">
<div class="product_loop">
<div class="product_image">
<img>
</div>
<div class="product_content">
<h3>Product Title</h3>
<p>Product content goes here</p>
</div>
</div>
<div class="product_loop">
<div class="product_image">
<img>
</div>
<div class="product_content">
<h3>Product Title</h3>
<p>Product content goes here</p>
</div>
</div>
</div>
I'm new to coding, this is my first week in my Fullstack course and we have some homework that I've been working on for a while now. I've managed to get my wireframe to look similar to the homework example (we're supposed to make it look the same) and I'm not sure where I'm going wrong with this html/css code.
Also, I'm not sure exactly how else to show what I am working on other than posting the majority of my css, so i apologize if I do this wrong.
:)
I've placed red borders around the content I'm attempting to align evenly on all sides. I've tried changing the padding, margins, float positions, width (all that I know that would adjust the box(es), but I still cannot seem to get the "aside" content to align with the rest of the wireframe objects.
`````HTML````
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
``` </div>
`````````external css```````````````````
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;}
article {
color:#777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color:#ebebeb;
background-color: #777;
}
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;
}
article {
color: #777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
<div class="layout">
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
</div>
this is what I'm trying to do - https://gyazo.com/6f27f40e4f3e75831b5e4728387ea11f
this is what I've done so far - https://gyazo.com/79299a16a0eb2208db98519005b3bf9d
This is just a quick edit. Also your link tag should be above in tag
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div {
border: 1px solid #000000;
}
.aside1 {
width: 49%;
float: left;
height: 165px;
}
.aside2 {
width: 49%;
float: right;
height: 165px;
}
article {
background-color:green;
padding: 20px;
margin: 5px
}
footer {
width: 100%;
}
</style>
</head>
<body>
<header class="main-head">
<p>header</p>
</header>
<nav>nav</nav>
<section class="divCont">
<div class="aside1">
<p>Section</p>
<article>
Article
<div style="background-color:white; margin: 5px;">
H1,h2,H3
</div>
<div style="background-color:yellow;margin: 5px; ">
p
</div>
</article>
</div>
<div class="aside2">
Aside
</div>
</section>
<footer> Footer </footer>
</body>
</html>
I have 3 boxes that i am trying to line up..
.box {
width: 50px;
height: 50px;
background: #8C8C8C;
margin:0 auto;
border: solid 4px grey;
text-align: center;
display:block;
}
Display inlineblock is not working also it kills centering
HTML
<div class="box"(click)="boxnumber('1')" >
<p class="count1">{{item1count}}<p>
</div>
<br>
<div class="box" (click)="boxnumber('2')" >
<p class="count2">{{item2count}}<p>
</div>
<br>
<div class="box" (click)="boxnumber('3')" >
<p class="count3">{{item3count}}<p>
</div>
Also i am trying to display item1count,item2count,item3count numbers on right down corner of each box.count1 count2 css classes are empty now because i am not sure what to write in them.
boxes
Try adding css margin: 0px auto; to your .box to center them.
try this:
.box{
width:50px;
height: 50px;
border: 2px solid red;
margin: 15px auto;
display: table;
}
To display the number in the right corner you need to add vertical alignment, like so:
.box p{
vertical-align:bottom;
display: table-cell;
}
You can take a look at my plunkr here
Just remove br tag and replace display:block to inline-block
.box {
width: 50px;
height: 50px;
background: #8C8C8C;
margin:0 auto;
border: solid 4px grey;
text-align: center;
display:inline-block;
}
.boxes {
text-align: center;
}
<div class="boxes">
<div class="box"(click)="boxnumber('1')" >
<p class="count1">{{item1count}}<p>
</div>
<div class="box" (click)="boxnumber('2')" >
<p class="count2">{{item2count}}<p>
</div>
<div class="box" (click)="boxnumber('3')" >
<p class="count3">{{item3count}}<p>
</div>
</div>
Try this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box {
width: 50px;
height: 50px;
background: #8C8C8C;
float: left;
margin-right:10px;
border: solid 4px grey;
text-align: center;
}
.box-container{
width:204px; /* 50*3+(4*2)*3+10*3 */
margin:0 auto;
}
</style>
</head>
<body>
<div class="box-container">
<div class="box"(click)="boxnumber('1')" >
<p class="count1">{{item1count}}<p>
</div>
<div class="box" (click)="boxnumber('2')" >
<p class="count2">{{item2count}}<p>
</div>
<div class="box" (click)="boxnumber('3')" >
<p class="count3">{{item3count}}<p>
</div>
</div>
</body>
</html>
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