I have two different sections with exactly the same CSS code but if you look at the image below, you can see at the width the screen is set to, that the images are all already moved onto a new line (which is what I want) but the categories underneath are still on the same line and get more "squashed" together. How can I make it so the categories move onto a new line like the images do? Thanks in advance.
Image of problem - http://i.imgur.com/u6GnTa1.png
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
Home
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Find Us
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2 class="sectionhead">Best Selling Books</h2>
<div id="bestsellerimages">
<figure>
<img src="Images/4.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Girl On The Train <br>
<span style="font-style: italic; font-size: 0.9em">Paula Hawkins</span></figcaption>
</figure>
<figure>
<img src="Images/3.jpg" alt="book2" height="200" width="131" class="imgbot">
<figcaption>Meet Me In Manhattan <br>
<span style="font-style: italic; font-size: 0.9em">Claudia Carroll</span></figcaption>
</figure>
<figure>
<img src="Images/5.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Pointless Book 2 <br>
<span style="font-style: italic; font-size: 0.9em">Alfie Deyes</span></figcaption>
</figure>
</div>
<h3 class="secfooter">Mere Bestsellers <span style="color: #ed786a;"><strong>Here</strong></span></h3>
</div>
</div>
<div id="sectionthree">
<div id="containerthree">
<h2 class="sectionhead">Popular Categories</h2>
<div class="categories">
<h3>Fiction</h3>
<p>New Releases</p>
<p>Australian Fiction</p>
<p>Crime & Mystery</p>
<p>Childrens</p>
<p>Fantasy</p>
</div>
<div class="categories">
<h3>Fiction</h3>
<p>New Releases</p>
<p>Australian Fiction</p>
<p>Crime & Mystery</p>
<p>Childrens</p>
<p>Fantasy</p>
</div>
<div class="categories">
<h3>Fiction</h3>
<p>New Releases</p>
<p>Australian Fiction</p>
<p>Crime & Mystery</p>
<p>Childrens</p>
<p>Fantasy</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
display: block;
}
a:link, a:visited, a:hover, a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
/*font-style: italic;*/
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
#sectionone {
/*position: fixed;*/
top: 0;
right: 0;
width: 80%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#sectiontwo {
width: 80%;
top: 0;
right: 0;
}
#containertwo {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
padding: 0 0 2em 0;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
.sectionhead{
margin: 2em 0 2em 0;
color: #888888;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#bestsellerimages{
float: left;
display: inline-block;
width: 100%;
max-width: 100%;
margin: 0 0 2em 0;
}
#bestsellerimages img{
padding: 0;
}
#bestsellerimages figure{
display: inline-block;
width: 131px;
}
#bestsellerimages figcaption{
font-size: 1.2em;
}
#bestsellerimages figure .imgbot{
margin: 0 0 0.5em 0;
}
#sectionthree {
width: 80%;
top: 0;
right: 0;
}
#containerthree {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
padding: 0 0 2em 0;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
.secfooter{
color: #888888;
letter-spacing: 2px;
font-size: 0.85em;
}
.categories{
max-width: 100%;
width: 20%;
padding: 0 1em 0 1em;
display: inline-block;
}
The issue is that your categories divs are set to width: 20% with display: inline-block causing them to remain in columns. First, if you want them to stack on top of each other you either change the width to 100% and/or display to block:
.categories{
display: block;
width: 100%;
}
This will affect the design on desktop so if you're building this responsively you would actually just add:
#media only screen and (max-width: 568px) {
.categories{
display: block;
width: 100%;
}
}
Related
I have designed a web page for a friend but when I try to change the H2 Logo for a png image. It does not seem to want to load.
The strange thing is however, that the .PNG file works in the Brackets Application. But not live on the server.
The webpage is here: http://www.donjaswell-beingforkids.co.uk/
It is supposed to look like this: (Brackets Preview)
This is from the Index.HTML code, which I will write below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | Donja's Well-Being For Kids</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>
<body>
<header>
<a href="index.html">
<img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
<!--
<h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
-->
</a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
<img src="img/Kids-Well-Being-Health.jpg" alt="Kids Health">
</div>
<br/>
<div class="welcomeBar">
<h2>Welcome To</h2>
<h2><q>Donja's Well-Being For Kids</q></h2>
<p><q>......Helping children to become calm, confident and resilient, by understanding and regulating their emotions, through Relax Kids™ and Emotional Literacy classes and workshops.</q></p>
</div>
<div id="wrapper">
<section>
<ul id="collections">
<li>
<a href="emotionalLiteracy1-1Support">
<img src="img/Emotional-Literacy-1-1-Support.jpeg" alt="Emotional Literacy 1 on 1 Support">
<p>Emotional Literacy 1-1 Support</p>
</a>
</li>
<li>
<a href="relaxKids">
<img src="img/Relax-Kids-Online.jpg" alt="Relax Kids">
<p>Relax Kids™</p>
</a>
</li>
<li>
<a href="tipsToHelpYourChild">
<img src="img/Tips-To-Help-Your-Child.jpeg" alt="Tips to Help Your Child">
<p>Tips To Help Your Child</p>
</a>
</li>
<li>
<a href="helpWithParenting">
<img src="img/Help-With-Parenting.jpeg" alt="Help With Parenting">
<p>Help With Parenting</p>
</a>
</li>
<li>
<a href="classesAndWorkshops">
<img src="img/Classes-And-Workshops.jpeg" alt="Classes and Workshops">
<p>Classes and Workshops</p>
</a>
</li>
<li>
<a href="testimonials.html">
<img src="img/Testimonials.jpg" alt="Testimonials">
<p>Testimonials</p>
</a>
</li>
</ul>
</section>
<footer>
<!-- <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">-->
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2017 Donja's Well-Being For Kids.</p>
</footer>
</div>
</body>
</html>
And the CSS is here:
/*******************************************
GENERAL
********************************************/
body {
font-family: 'Indie Flower', sans-serif;
/* background-image: img/shining-blue-water-background.jpg;*/
margin: 0;
padding: 0;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.centerText {
text-align: center;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/*******************************************
HEADING
********************************************/
header {
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
display: block;
width: 40%;
margin: 5px auto;
}
/*******************************************
NAVIGATION
********************************************/
nav {
text-align: center;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 700;
padding: 15px 10px;
transition: .5s ease-out;
}
/*******************************************
BANNER
********************************************/
.banner {
display: block;
margin: -30px 0 0px 0;
}
.banner {
width: 100%;
display: block;
}
.banner img {
position: relative;
width: 100%;
display: block;
}
/*******************************************
WELCOME BAR
********************************************/
.welcomeBar {
float: left;
width: 100%;
text-align: center;
display: block;
margin: 0 0 15px;
}
.welcomeBar h2 {
margin: 0;
}
/*******************************************
TOP BOX
********************************************/
.topBox {
text-align: center;
position: fixed;
right: 0;
bottom: 50px;
background-color: #659EB8;
height: 35px;
width: 35px;
border-radius: 50%;
}
.topBox i {
position: relative;
height: 100%;
width: 100%;
top: 6px;
}
/*******************************************
FOOTER
********************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
width: 100%;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/*******************************************
PAGE: HOME: COLLECTIONS
********************************************/
#collections {
margin: 0;
padding: 0;
list-style: none;
}
#collections li {
float: left;
width: 95%;
margin: 2.5%;
}
#collections li a img{
border: 5px solid;
border-color: #f5f5f5;
}
#collections li {
position: relative;
max-width: 100%;
}
#collections li a p {
font-size: 100%;
padding: 3px;
white-space: nowrap;
position: absolute;
float: left;
top: 40%;
left: 52%;
transform: translate(-50%, -50%);
transition: .5s ease-out;
font-weight: bold;
}
#collections li a:hover p {
transition: 0.5s;
font-size: 105%;
}
/*******************************************
PAGE: ABOUT
********************************************/
.profile-photo {
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*******************************************
PAGE: CONTACT
********************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.fax {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: left 3px bottom 5px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
word-wrap: break-word;
}
.contact-info li.fax {
background-image: url('../img/printer.png');
}
.contact-info li.facebook a {
background-image: url('../img/facebook.png');
}
/*******************************************
PAGE: EMOTIONAL LITERACY
********************************************/
.emotionalLiteracy {
text-align: center;
padding: 15px;
border-radius: 10px;
}
/*******************************************
PAGE: RELAX KIDS
********************************************/
.relaxKids {
padding: 15px;
border-radius: 10px;
}
.relaxKids li {
margin: 0 17px;
}
.chill-skills-photo {
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 2%;
}
/*******************************************
PAGE: TIPS TO HELP YOUR CHILD
********************************************/
.tips {
padding: 15px;
border-radius: 10px;
}
.tips li {
margin: 0 17px;
}
/*******************************************
PAGE: HELP WITH PARENTING
********************************************/
.parenting {
padding: 15px;
border-radius: 10px;
}
.parenting-banner {
display: block;
margin: 0 0 30px;
width: 100%;
border-radius: 10px;
}
/*******************************************
PAGE: CLASSES AND WORKSHOPS
********************************************/
.workshops {
text-align: center;
padding: 15px;
border-radius: 10px;
}
iframe {
border: none;
overflow:hidden;
}
/*******************************************
PAGE: TESTIMONIALS
********************************************/
.testimonials-lydia {
padding: 1px;
border-radius: 10px;
}
.testimonials-lydia p {
margin: 5px 17px 0;
}
.testimonials-benjamin {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-benjamin p {
margin: 5px 17px 0;
}
.testimonials-gabby {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-gabby p {
margin: 5px 17px 0;
}
.testimonials-amy {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-amy p {
margin: 5px 17px 0;
}
.testimonials-isabelle {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-isabelle p {
margin: 5px 17px 0;
}
.testimonials-johnny {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-johnny p {
margin: 5px 17px 0;
}
/*******************************************
COLORS
********************************************/
/* site body */
body {
background-color: #fff;
color: #000;
}
/* grey header */
header{
background: #fff;
border-color: #000;
}
/* nav background on mobile */
nav {
background: #D4BDD7;
}
/* links */
a {
color: #000;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #000;
transition: .5s;
}
p.littleStars {
color: blue;
}
.welcomeBar {
background-color: #659EB8;
}
#collections li a p {
color: black;
background: rgba(235, 229, 235, .3);
}
#collections li a:hover p {
background: rgba(235, 229, 235, .9);
}
.emotionalLiteracy {
background-color: #F15369;
color: white;
}
.relaxKids {
background-color: #8B5D8D;
color: white;
}
.tips {
background-color: #ECE272;
color: black;
}
.parenting {
background-color: #F4B97B;
color: black;
}
.workshops {
background-color: #71A87B;
color: white;
}
/* testimonial boxes */
.testimonials-lydia {
background-color: #F15369;
color: white;
}
.testimonials-benjamin {
background-color: #F4B97B;
color: white;
}
.testimonials-gabby {
background-color: #ECE272;
color: white;
}
.testimonials-amy {
background-color: #71AB7B;
color: white;
}
.testimonials-isabelle {
background-color: #2e619f;
color: white;
}
.testimonials-johnny {
background-color: #8B5D8D;
color: white;
}
The CyberDuck Server files are organised like this:
Please help, I cannot seem to get the logo to appear how I would like. I have tried renaming it, uploading CSS and Index files from scratch so they exactly math Brackets. But still get nothing. Don't really understand what I am doing wrong.
Many Thanks,
Luke
I do not understand why the logo is showing smaller on the contact.html page:
Do you know why this might be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact | Donja's Well-Being For Kids</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>
<body>
<header>
<a href="index.html" id="logo">
<img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
<!--
<h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
-->
</a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<!------------ PRODUCTS -------------------------------------
<li>Products</li>
------------------------------------------------------------->
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>For more details please contact me.</p>
<p>I have a current DBS Certificate and also Public Liability Insurance.</p>
</section>
<section id="secondary">
<h3>Contact Information</h3>
<ul class="contact-info">
<li class="phone">Phone: 07916 337 916 </li>
<li class="mail">Email: Donja#donjaswell-beingforkids.co.uk</li>
<li class="facebook">CLick to Message me on Facebook!</li>
</ul>
<!--
<h3>Hours of Operation</h3>
<p>Monday - Friday 8:00am - 5:30pm</p>
<h3>Address</h3>
-->
<p></p>
</section>
<footer>
<!-- <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">-->
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2017 Donja's Well-Being For Kids.</p>
</footer>
</div>
</body>
</html>
The site is working. If its not working for you clear you cache or do a force refresh / hard refresh.
Really not sure why this is happening, but it's very annoying as I can't seem to find the cause of it.
If I take the below HTML and add a P element inside the class="comments" div then it'll push down the entire class="ratingComments" div that it's inside. Even if I turn off margins and padding it'll still do it, why is this?
It'll probably make more sense to look at this fiddle: https://jsfiddle.net/sz4fodqj/
I want the two divs in the center to be inline, but the P tag prevents this.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nrthrn</title>
<link rel="icon" href="./res/icon.png">
<link rel="stylesheet" type="text/css" href="960styling.css" id="stylesheet">
</head>
<div id="wrapper">
<body>
<div class="headerBar">
<img id="logo" src="./res/logo.png"/>
<ul class="menu">
<li>Home</li>
<li>Events</li>
<li>Past Events</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<a id="loginLink" href="login.html">Login</a>
</div> <!-- end headerBar -->
<div class="promoArea">
<img id="bigLogo" src="./res/bigLogo.png"/>
</div>
<div class="eventsSearchBar">
<p>Order By: </p>
<select required="required" name="field4" class="selectfield">
<option value="Advertise">Closest Date</option>
<option value="Partnership">Furthest Date</option>
<option value="General Question">Rating: High to Low</option>
<option value="General Question">Rating: Low to High</option>
</select>
</div>
<div class="pastEventsContentArea">
<div class="pastEventRowContainer">
<div class="pastEventContainer">
<div class="dateWrapper">
<span class="day"><p id="daytext"><b>23rd</b></p></span>
<span class="month"><p id="monthtext"><b>May</b></p></span>
</div>
<div class="textWrapper">
<div class="title"><p id="eventTitle">ODESZA</p></div>
<div class="location"><p>Location</p></div>
</div>
<div class="buttonWrapper">
<button id="moreInfoButton">Info</button>
<button id="moreInfoButton">Tickets</button>
</div>
</div>
<div class="ratingComment">
<div class="rating">
</div>
<div class="comments"><!--P CLASS HERE MAKES WEIRD THINGS HAPPEN--></div>
</div>
</div>
</div>
<div class="footerBar">
<div class="footerLeft">
<ul>
<li>Home</li>
<li>Events</li>
<li>Past Events</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div class="footerRight">
<img src="./res/facebook.png"/>
<img src="./res/twitter.png"/>
<img src="./res/instagram.png"/>
</div>
</div>
<p id="copyright">Copyright 2017</p>
</body>
</div>
</html>
CSS
.pastEventsContentArea{
width: 95%;
margin: 50px auto 50px auto; /*top right bottom left */
padding-top: 20px;
/* background-color: #ff6464;*/
text-align: center;
}
.pastEventContainer{
/*width: 45%;
height: 30%;*/
/* width: 55%;*/
height: 120px;
/* background-color: rgba(0, 0, 0, 0.2);*/
background-color: #ffffff;
margin-left: 5%;
margin-right: 0%;
/* margin-bottom: 10px;*/
/* margin-right: 10px;*/
display: inline-block;
min-width: 500px;
max-width: 500px;
color: black;
border-style: solid;
border-color: #363636;
border-width: 1px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.pastEventContainer .dateWrapper{
width: 20%;
/*background-color: rgba(0, 0, 0, 0.4);*/
height: 100%;
float: left;
font-family: opensans;
color: black;
}
.pastEventContainer .textWrapper{
width: 45%;
/* background-color: rgba(0, 0, 0, 0.6);*/
height: 100%;
float: left;
color: black;
font-family: opensans;
margin-left: 10px;
}
.pastEventContainer .buttonWrapper{
width: 30%;
/* background-color: rgba(0, 0, 0, 0.8);*/
height: 100%;
float: left;
}
.pastEventContainer .dateWrapper .day{
display: inline-block;
width: 100%;
height: 60%;
/* background-color: red;*/
font-size: 25px;
font-family: opensans;
}
.pastEventContainer .dateWrapper .month{
display: inline-block;
width: 100%;
height: 40%;
/* background-color: indianred;*/
font-size: 24px;
}
.pastEventContainer .dateWrapper #daytext{
margin-top: 30%;
}
.pastEventContainer .dateWrapper #monthtext{
margin-top: -10%;
}
.pastEventContainer .textWrapper .title{
/* background-color: aqua;*/
height: 50%;
margin: 0;
margin-top: 30px;
font-size: 20px;
overflow: hidden;
}
.pastEventContainer .textWrapper .location{
/* background-color: blue;*/
margin-top: -20px;;
font-size: 14px;
max-height: 30px;
min-height: 30px;
overflow: hidden;
}
.pastEventContainer .textWrapper p{
margin: 0;
text-align: left;
}
.pastEventContainer .buttonWrapper #moreInfoButton{
display: block;
margin-left: auto;
margin-right: auto;
font-family: Porter;
text-transform: uppercase;
background-color: #242424;
height: 30%;
color: white;
outline: 0;
width: 75%;
border: 0;
padding: 10px;
font-size: 15px;
/*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);*/
box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
margin-top: 10%;
}
.pastEventRowContainer .ratingComment{
display: inline-block;
height: 120px;
background-color: white;
width: 30%;
margin: 0;
margin-left: 50px;
padding: 0;
border-style: solid;
border-color: #363636;
border-width: 1px;
max-width: 300px;
}
.pastEventRowContainer .ratingComment .rating{
/* background-color: red;*/
height: 50%;
display: block;
margin: 0;
}
.pastEventRowContainer .ratingComment .comments{
/* background-color: aqua;*/
height: 50%;
display: block;
text-align: center;
color: black;
font-family: opensans;
font-size: 20px;
position: relative;
}
.pastEventRowContainer .ratingComment a{
display: block;
margin: 0;
padding: 0;
position: absolute;
left: 60px;
top: 15px;
text-decoration: none;
}
p is block level element by default. You can use span instead or change the display properties of .comments in your css. This really depends on what you want to add in the div.
see
https://www.w3schools.com/html/html_blocks.asp
I think that the reason is that .ratingComment has display: inline-block;. That forces the elements to change so that whatever elements you put inside .comments to be inline with the .pastEventContainer. Look at this for example https://jsfiddle.net/sz4fodqj/4/ where the div contains more text, still it's inline with the first div.
Fiddle: https://jsfiddle.net/uatzust3/
Here is the fiddle for my problem, you'll observe that the children are not staying inside the parent div card and also I want the divs to take full width of parent which they are not taking.
Also, where should I be learning best practices? I am new to the community. Thanks in advance.
The left div(black_container) is short of content but should arrange the height according to the width of the right div(content_container) all the while staying inside the card div.
.card {
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.30), 0 15px 15px rgba(0, 0, 0, 0.22);
max-width: 800px;
margin: auto;
position: relative;
}
.black_container {
height: inherit;
background: #333;
display: inline-block;
vertical-align: top;
padding: 3%;
font-family: 'Nunito', sans-serif;
}
.content_container {
display: inline-block;
padding: 3%;
/* position: absolute;
top:0;
bottom: 0; */
}
.small_bar {
padding: 3px;
width: 30px;
margin: 0 auto;
background: #e4e4e4;
margin-top: 35px;
}
.name {
color: #fff;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 5px;
margin: 30px auto 5px auto;
text-align: center;
font-weight: 800;
}
.designation {
font-size: 10px;
margin: 0 auto;
}
.qrcode_container {
float: right;
}
.qr_container {
overflow: auto;
width: 100%;
}
.qr_text {
display: inline-block;
list-style-type: none;
}
.qr_text>li {
font-size: 18px;
font-weight: 600;
letter-spacing: 2.5px;
color: #9a9a9a;
}
.bars {
display: inline-block;
position: relative;
top: 10px;
}
.bars .small_bar {
width: 15px;
background: #777;
}
.bar {
position: absolute;
top: -80px;
}
.qr_code {
display: inline-block;
height: inherit;
border: 1px solid #e4e4e4;
padding: 5px;
}
.button {
width: 150px;
letter-spacing: 1;
text-transform: uppercase;
font-weight: 600;
color: #fff;
text-align: center;
background: #333;
padding: 5px 10px;
}
<div class="card">
<div class="black_container">
<div class="circular">
</div>
<p class="small_bar"></p>
<p class="name">wow</p>
<p class="name designation">Front-End Designer</p>
</div>
<div class="content_container">
<!-- qr code container ends -->
<div class="qr_container">
<div class="qrcode_container">
<ul class="qr_text">
<li>LOREM</li>
<li>IPSUM</li>
<li>DPOLER</li>
</ul>
<div class="bars">
<div class="small_bar bar"></div>
<div class="small_bar"></div>
</div>
<div class="qr_code"></div>
</div>
</div>
<!-- qr code container ends -->
<div class="card_content">
<p>Hello!</p>
<p>My name is lorem</p>
<p>I am a web designer</p>
<p>Im stuck</span>
</p>
<div class="button">button</div>
</div>
<div class="card_footer"></div>
</div>
</div>
A parent cannot take the height of a direct child if the child is absolute because the absolute elements are removed from the document flow(like floats), so in this case "card" doesn't even know "content_container" even exists .
https://jsfiddle.net/OmarIsComing/eq4L86g9/1/
update:
solution with flexbox: https://jsfiddle.net/OmarIsComing/eq4L86g9/2/
solution without flexbox: https://jsfiddle.net/OmarIsComing/eq4L86g9/3/
If flexbox is an option, this is easy :
Add display: flex to your card
Add flex: 1 to the content-container
See demo below:
.card {
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.30), 0 15px 15px rgba(0, 0, 0, 0.22);
max-width: 800px;
margin: auto;
position: relative;
display: flex;
}
.black_container {
height: inherit;
background: #333;
display: inline-block;
vertical-align: top;
padding: 3%;
font-family: 'Nunito', sans-serif;
}
.content_container {
display: inline-block;
padding: 3%;
/* position: absolute;
top:0;
bottom: 0; */
flex: 1;
}
.small_bar {
padding: 3px;
width: 30px;
margin: 0 auto;
background: #e4e4e4;
margin-top: 35px;
}
.name {
color: #fff;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 5px;
margin: 30px auto 5px auto;
text-align: center;
font-weight: 800;
}
.designation {
font-size: 10px;
margin: 0 auto;
}
.qrcode_container {
float: right;
}
.qr_container {
overflow: auto;
width: 100%;
}
.qr_text {
display: inline-block;
list-style-type: none;
}
.qr_text>li {
font-size: 18px;
font-weight: 600;
letter-spacing: 2.5px;
color: #9a9a9a;
}
.bars {
display: inline-block;
position: relative;
top: 10px;
}
.bars .small_bar {
width: 15px;
background: #777;
}
.bar {
position: absolute;
top: -80px;
}
.qr_code {
display: inline-block;
height: inherit;
border: 1px solid #e4e4e4;
padding: 5px;
}
.button {
width: 150px;
letter-spacing: 1;
text-transform: uppercase;
font-weight: 600;
color: #fff;
text-align: center;
background: #333;
padding: 5px 10px;
}
<div class="card">
<div class="black_container">
<div class="circular">
</div>
<p class="small_bar"></p>
<p class="name">wow</p>
<p class="name designation">Front-End Designer</p>
</div>
<div class="content_container">
<!-- qr code container ends -->
<div class="qr_container">
<div class="qrcode_container">
<ul class="qr_text">
<li>LOREM</li>
<li>IPSUM</li>
<li>DPOLER</li>
</ul>
<div class="bars">
<div class="small_bar bar"></div>
<div class="small_bar"></div>
</div>
<div class="qr_code"></div>
</div>
</div>
<!-- qr code container ends -->
<div class="card_content">
<p>Hello!</p>
<p>My name is lorem</p>
<p>I am a web designer</p>
<p>Im stuck</span>
</p>
<div class="button">button</div>
</div>
<div class="card_footer"></div>
</div>
</div>
Use the class card-body, this will keep the contents inside of the card.
<div class="card border-success">
<div class="card-header border-success">
<h3 class="card-title">Card Title</h3>
</div>
<div class="card-body border-success">
<dl>
<dt>
Stuff
</dt>
<dd>
Stuff Details
</dd>
</dl>
</div>
</div>
replace the .content_container css with:
.content_container {
display: inline-block;
padding: 3%;
vertical-align: top;
}
I think the CSS attribute position: absolute; is causing this issue. In short, absolute position removes the element from the flow of other elements; therefore, its height is simply ignored, and never counted in your .card container.
Why is my div moving to right whenever I specify overflow-y: scroll on the .messages element?
Even when I use margin-left: -10px;, it doesn't move to the left!
#import url(http://fonts.googleapis.com/css?family=Roboto:300,400,900);
#import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
}
body {
background: #BDC1C6;
font-family: 'Roboto';
}
p {
font-weight: 300;
}
.chat {
width: 300px;
background: #fff;
margin: 0 auto;
}
header {
background: #35323C;
height: 50px;
padding: 5px 10px;
}
.menu-icon {
background: #2F2E33;
padding: 5px 10px;
float: left;
font-size: 3em;
line-height: 0.5em;
color: #fff;
border-radius: 3px;
}
.menu-icon:hover {
background: #39caad;
cursor: pointer;
}
h1 {
float: right;
color: #fff;
margin: 5px;
font-weight: 300;
font-size: 1.3em;
}
.menulist {
background: #39caad;
color: #fff;
text-align: center;
padding: 10px;
}
.menulist:hover {
cursor: pointer;
background: rgb(255, 0, 0);
text-align: center;
padding: 20px;
}
.openchat {
background: #39caad;
color: #fff;
text-align: center;
padding: 5px;
}
.new {
background: rgb(57, 202, 173);
color: #fff;
text-align: center;
padding: 20px;
}
.new:hover {
cursor: pointer;
background: rgba(57, 202, 173, 0.9);
}
.messages {
padding: 10px;
overflow-y: scroll;
height: 300px;
}
.message {
float: left;
width: 100%;
margin: 10px 0;
border-bottom: 1px solid #ccc;
}
.message p {
font-size: 0.8em;
width: 90%;
margin: 5px 0;
}
.message:hover {
background: #39caad;
cursor: pointer;
}
.messageSender {
text-align: right;
float: right;
width: 100%;
margin: 10px 0;
border-bottom: 1px solid #ccc;
}
.messageSender p {
font-size: 0.8em;
width: 90%;
margin: 5px 0;
}
.messageReceiver {
float: left;
width: 100%;
margin: 10px 0;
border-bottom: 1px solid #ccc;
}
.messageReceiver p {
font-size: 0.8em;
width: 90%;
margin: 5px 0;
}
img {
border-radius: 100%;
float: left;
margin: 0 10px 15px 0;
}
img.sender {
border-radius: 100%;
float: right !important;
margin: 0 10px 15px 0;
width: 35px;
height: 35px;
}
img.receiver {
border-radius: 100%;
float: left;
margin: 0 10px 15px 0;
width: 35px;
height: 35px;
}
p.time {
color: rgba(0, 0, 0, 0.5);
font-weight: 400;
}
p.chattime {
color: rgba(0, 0, 0, 0.5);
font-weight: 400;
font-size: 10px;
}
h2 {
font-size: 1em;
font-weight: 400;
}
h2:after {
content: '';
display: inline-block;
height: 10px;
width: 10px;
background: #39caad;
border-radius: 100%;
margin-left: 5px;
}
h2.send:before {
content: '';
display: inline-block;
height: 10px;
width: 10px;
background: #39caad;
border-radius: 100%;
margin-left: 5px;
}
h2.send:after {
content: '';
height: 0px;
width: 0px;
border-radius: 00%;
margin-right: 5px;
}
footer {
width: 100%;
background: #fff;
padding: 10px;
text-align: center;
font-size: 0.8em;
}
footer p:before,
footer p:after {
content: ' - ';
}
<div class="chat">
<header>
<div class="menu-icon" id="menubutton"><span class="entypo-menu"></span>
</div>
<h1>Chats</h1>
</header>
<?php include( "menu.php"); ?>
<div class="openchat" id="openchat">
<img style="width:35px; height: 35px;" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg" />
<h2>XYZ</h2>
<p class="time">Online</p>
</div>
<section class="messages" id="chatBox">
<div class="messageReceiver">
<img class="receiver" src="assets/users/1.jpg">
<h2 class="receive">Admin 1</h2>
<p class="chattime">12:00:00 AM, 3rd Jan16</p>
<p>There ?</p>
</div>
<br>
<br>
<div class="messageSender">
<img class="sender" src="assets/users/2.jpg">
<h2 class="send"> You</h2>
<p class="chattime">12:00:00 AM, 4th Jan16</p>
<p>Yes</p>
</div>
<br>
<br>
<div class="messageReceiver">
<img class="receiver" src="http://dtechnomist.com/clients/chat/assets/users/1.jpg">
<h2 class="receive">Admin 1</h2>
<p class="chattime">08:59:33 PM, 4th Jan16</p>
<p></p>
</div>
<div class="messageReceiver">
<img class="receiver" src="assets/users/1.jpg">
<h2 class="receive">Admin 1</h2>
<p class="chattime">09:05:55 PM, 4th Jan16</p>
<p>hi</p>
</div>
<br>
<br>
<div class="messageReceiver">
<img class="receiver" src="http://dtechnomist.com/clients/chat/assets/users/1.jpg">
<h2 class="receive">Admin 1</h2>
<p class="chattime">09:06:02 PM, 4th Jan16</p>
<p>ok</p>
</div>
<br>
<br>
<div class="messageSender">
<img class="sender" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg">
<h2 class="send"> You</h2>
<p class="chattime">09:06:58 PM, 4th Jan16</p>
<p>hello</p>
</div>
<br>
<br>
<div class="messageSender">
<img class="sender" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg">
<h2 class="send"> You</h2>
<p class="chattime">09:07:08 PM, 4th Jan16</p>
<p>hi</p>
</div>
<br>
<br>
<div class="messageSender">
<img class="sender" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg">
<h2 class="send"> You</h2>
<p class="chattime">09:07:31 PM, 4th Jan16</p>
<p>asd</p>
</div>
</section>
<section class="write">
<textarea type="text" name="msg" id="msg" style="width:85%; height: 30px; margin: 0px 0px 0px 2%; resize: none" placeholder="Type your message here..."></textarea>
<button name="send" id="sendMsg" style="width: 9%;"><span class="entypo-plus"></span>Send</button>
</section>
<footer>
<p>Designed by Kashan Shah
</p>
</footer>
</div>
You're seeing this behavior due to collapsing margins.
When you add overflow-y: scroll to the element, a new block formatting context is established, which means that the .openchat element's vertical margin no longer collapses with the .messages element. Since the margins no longer collapse, the element is shifted to the right.
Margins of elements that establish new block formatting contexts (such as floats and elements with overflow other than visible) do not collapse with their in-flow children.
To resolve this issue, you could either add overflow: hidden to the .openchat element in order hide the overflowing margin (which essentially prevents the margin from adjoining):
Updated Example
.openchat {
background: #39caad;
color: #fff;
text-align: center;
padding: 5px;
overflow: hidden;
}
Alternatively, you could also just remove the margin-bottom from the child img element:
Updated Example
.openchat img {
margin-bottom: 0;
}
I have been trying to add three icons for like 6 hours and nothing works can someone please help :(
Want the icon to show up above "Performance", "Technology", and "Design".
In addition I wanted to add quote icons to the <p> tags inside the three div's.
Also wanted to change the color of the icons to match the hr tag with the same hue of red.
Here is my HTML
<html>
<header>
<title>NavBar</title>
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</header>
<body>
<div id="menu wrapper" class="red">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
<li class="login"><a class="login" href="#">Log In</a></li>
</ul>
</div>
<div class="header">
<img class="head-image" src="banner2.jpg">
</div>
<div class="hr">
<hr />
</div>
<div class="content">
<div class="container">
<div class="icon1">
<i class="fa fa-rocket fa-5x"></i>
<h2>Performance</h2>
<hr class="ptd" />
<p>Best in class when it comes to raw power!</p>
</div>
<div class="icon2">
<i class="fa fa-power-off fa-5x"></i>
<h2>Technology</h2>
<hr class="ptd" />
<p>Oringinal Innovations pushing the boundaries of modern technology</p>
</div>
<div class="icon3">
<i class="fa fa-laptop fa-5x"></i></a>
<h2>Design</h2>
<hr class="ptd" />
<p>Designed with you in mind</p>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Here is my CSS
body {
background-image: url(black-Linen.png);
}
/* NavBar */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #800000;
font-size: 13px;
height: 40px;
border-bottom: 2px solid #5A0000;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #FFF;
}
#menu li a:hover {
background-color: #CC0000;
border-bottom: 2px solid #DDD;
color: #000;
}
#menu_wrapper ul {
margin-left: 12px;
}
#menu_wrapper {
padding: 0 16px 0 0;
background-color: #666666;
}
#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
background-color: #666666;
}
.header {
height: 720px;
width: 1600px;
margin: 0 auto 0 auto;
padding: 10px 10px 20px 10px;
overflow: hidden;
}
.head-image {
height: 720px;
width: 1600px;
box-shadow: 5px 5px 3px #000;
}
div.hr {
height: 32px;
background: url(fire.png) no-repeat scroll center;
}
div.hr hr {
display: none;
}
.content {
width:1600px;
height: 250px;
margin: 25px auto 15px auto;
padding: 10px;
}
/*Performance*/
.icon1 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
.container i {
display: block;
margin: 10px auto 0 auto;
width: 32px;
color: #800000;
border-radius:50%;
}
/*Technology*/
.icon2 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: 42px;
margin-left: 42px;
}
/*Design*/
.icon3 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
h2 {
text-align: center;
font-weight: bold;
font-family: roboto, sans-serif;
margin-top: 2px;
}
h2 a {
text-decoration: none;
color: #FFF;
}
h2 a:hover, a:active {
color: #9f1111;
}
.ptd {
width: 40%;
}
p {
text-align: center;
font-style: italic;
font-family: roboto, sans-serif;
color: #FFF;
}
I think it's actually working fine, I can see icons in my JS Fiddle.
Could the problem be your link to your CSS file? Should there be a space within the href?
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
http://jsfiddle.net/Delorian/1x6u553h/
Start by double checking your markup. You have two IDs "menu" + "wrapper" and one selector "#menu_wrapper". I think you should keep IDs just for actions and add classes to add style.
Your markup:
<div id="menu wrapper" class="red">
...
</div>
Correct markup:
<div id="menu" class="wrapper red">
...
</div>
You are missing the protocol http:// on your link to the bootstrap CDN.
Try to add it to the link and see if it works:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">