divs on top of eachother not minding their margins - html

I have created several divs on top of each other .
Here is the problem that I'm having. The 2 divs in sessiondetails (sessionspeakers and sessionhosts) while they line up on top of themselves like I want them to, they don't listen to what I tell them to about padding. I want about 15px space between them, but they overlap eachother.
This is the html i am using:
<div class="sessiondetails">
<h3>Global Security Challenges and How We're Facing Them</h3>
Some of the biggest and most successful companies in the world depend on RSA's products and services for protection. Niloofar Howe, RSA's Chief Strategy Officer, is charged with making sure her company is responding to the needs of those customers by anticipating the next threat.<!-- Start of speaker list -->
<div class="sessionspeakers">
Speaker:<br><div class="speaker"><img src="http://www.structuresecurity.com/wp-content/uploads/2016/08/structuresecurityconf-niloo-howe.jpg" width="100px" height="100"><strong>Niloofar Howe</strong><br> Chief Strategy Officer, RSA</div>
</div> <!-- End of sessionspeakers list -->
<!-- Start of host list -->
<div class="sessionhosts">
Host:<br><strong>Mahendra Ramsinghani</strong>, Founder, Secure Octane
</div> <!-- End of sessionhosts list -->
</div>
This is my css:
.sessionentry {
width: 100%;
border-top: 1px solid grey;
border-top-color: grey;
border-bottom: 1px solid grey;
border-bottom-color: grey;
clear: both;
vertical-align: top;
overflow: hidden;
padding: 20px 0;
}
.sessiontime {
width: 15%;
float: left;
display: inline-block;
padding-left: 15px;
}
.sessiondetails {
width: 75%;
float: left;
display: inline-block;
}
.sessionmoderator, .sessionspeakers, .sessionhosts, .sessionemcee {
margin-top: 15px;
clear: both;
float: left;
}
.speaker {
overflow: visible;
display: block;
clear: both;
}
.speaker img {
float: left;
margin-right: 15px;
}
So can some kind soul please tell me what I did wrong?
Here are two images of the problem:
Sessionspeakers section doesn't go down far enough:
and then sessionhosts (div on bottom looks too high and covers part of photo)

Related

CSS Code Help Needed

I'm looking to find out how to add another box inside my box which would be faded to act as a title bar for that specific box (If that makes sense)!
So basically, in the SOCIALBOX I'm looking to get a sub-faded bar at the top inside which would act as a title bar.
After a few comments of people saying they're not sure what I mean, I created a quick image in photoshop to act as some reference point.
Code Snippet:
body {
background: url("../images/backgroundimage.jpg") repeat 0 0;
}
/* CSS MENU BAR CODE GOES HERE */
#menubar {
width: 98.5%;
height: 40px;
background-color: #000000;
position: fixed;
border: 2px solid #ffffff;
}
.inside_text {
color: #FFFFFF;
float: right;
margin: 11px 7px 0 0;
}
.inside_text2 {
color: #FFFFFF;
float: left;
margin: 11px 0 0 7px;
}
/* CSS SOCIALBOX (RIGHT) GOES HERE */
#socialbox {
width: 40%;
height: 40%;
position: relative;
float: right;
margin: 0 8px 0 0;
background-color: #000000;
border: 2px solid #126b72;
}
<div id="menubar">
<div class="inside_text">
PLACEHOLDER TEXT
</div>
<div class="inside_text2">
PLACEHOLDER TEXT
</div>
</div>
<br />
<br />
<br />
<div id="socialbox">
</div>
So you are asking for a faded line within SOCIALBOX div, to serve as underline for a title?
If thats correct create another class
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
}
position with margin-left & margin-top values inside that class based on where you want it within SOCIALBOX.
for example:
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
margin-left:50px;
margin-top:30px;
float:left;
}
create a:
<div class="title-bar"></div>
and place that inside
<div id="socialbox"></div>
BTW make it a habit to use float:left when positioning divs with CSS, try to avoid position:absolute or fixed, unless absolutely necessary. It just comes out cleaner this way.

Responsive box with border lines

I am trying to make this exact box with borders lines. you can see after H2 there is new border line and then a paragraph. Please tell me how do I make this? as when I do it with border-bottom:1px solid it just makes a lines but doesn't touch the edges of the main border. here I am attaching the image so you can better understand this here you can see image
my code
<div class="col-sm-8 col-sm-offset-2" id="house">
<h3 class="text">Our house packages include:</h3>
<ul class="lead text" id="list">
<li>Standard site costs (based on 500mm fall to site & ‘M’ Class slab)</li>
<li>Rainwater Tank or connection to recycled water where available.</li>
<li>Concrete driveway (up to 55sqm)</li>
<li>Tiled Front Porch</li>
<li> Internal Floor Coverings</li>
<li> 5+ star gas instantaneous HWS</li>
<li>Wall & Ceiling insulation</li>
<li>‘Classic’ range of inclusions</li>
</ul>
<img src="images/landing.jpg" alt="landing Image">
<p class="note">NB. Please note that all packages are subject to developer and/or council and statutory authorities’ approvals.</p>
</div>
</div>
CSS
#house {
border: 1px solid black;
background:white;
}
#house h3 {
border-bottom:1px solid;
font-size:28px;
font-weight:bold;
margin:10px;
}
#list {
font-size:15px;
margin:15px;
padding:15px;
position:relative;
right:20px;
text-align:left;
}
#house img {
width:40%;
position:relative;
left:500px;
bottom:260px;
}
please tell me how do I make border lines after heading and after list. please take a look into image. It should be responsive.
thank you all
I think your code is missing one div tag on the top, so I'm not able to debug. :/
But this is how I'd solve it if I had to do the same thing:
<style>
html {
background: #EEE;
width: 100%;
height: 100%;
border: 0;
text-align: center;
padding: 40px;
box-sizing: border-box;
color: #AAA;
font-family: calibri;
}
.box{
background: #FFF;
border: 2px solid #DDD;
width: 80%; /*SPECIFY WIDTH HERE*/
display: inline-block;
}
.heading {
border-bottom: 2px solid #DDD;
width: 100%;
padding: 20px;
text-size: 30px;
font-size: 30px;
box-sizing: border-box;
display: inline-block;
}
.content {
border-bottom: 2px solid #DDD;
width: 100%;
padding: 20px;
box-sizing: border-box;
display: inline-block;
}
.footer {
width: 100%;
padding: 20px;
box-sizing: border-box;
display: inline-block;
}
.myList {
display: inline-block;
text-align: left;
padding: 10px;
}
li {
margin: 10px 0;
}
.myImg {
display: inline-block;
padding: 10px;
}
.houseImg {
width: 300px;
}
</style>
<div class='box'>
<div class='heading'>
Our house packages include:
</div>
<div class='content'>
<div class='myList'>
<ul class="lead text" id="list">
<li>Standard site costs (based on 500mm fall to site & 'M' Class slab)</li>
<li>Rainwater Tank or connection to recycled water where available.</li>
<li>Concrete driveway (up to 55sqm)</li>
<li>Tiled Front Porch</li>
<li> Internal Floor Coverings</li>
<li> 5+ star gas instantaneous HWS</li>
<li>Wall & Ceiling insulation</li>
<li>'Classic' range of inclusions</li>
</ul>
</div>
<div class='myImg'>
<img src='http://www.simplyeleganthomedesigns.com/hudson%20cottage%20FL.jpg' class='houseImg'>
</div>
</div>
<div class='footer'>
Some Footer text here
</div>
</div>
The reason h3 is not working the way you want is because you assigned it a margin: 10px; This is going to push the h3 border 10px away from its parent on all sides. If you don't assign it a margin, border-bottom will work fine.
It may be good practice for you to add borders to all elements so you can see how each css rule affects an elements box.
Refer to box model for further information
W3C Box Model
MDN Box Model
1- the border is inside the margin that's img why there is spaces .
try use the padding for h3
padding: 20px;
I fix the list for you as well .
check
jsfiddle

Display text messages in HTML -- with boxes

Can some one suggest how to display this type of message chat in html where messages are shown in boxes in left & right of screen ..?
Boxes are shown in blue & green colour
I will give some clues so you can work on it, I think it can help you:
HTML code:
<div class="blue_box">
<span>Hello</span>
</div>
<div class="green_box">
<span>Bye</span>
</div>
CSS:
.blue_box, .green_box {
display: block;
clear:both;
}
.blue_box span {
background-color: blue;
color: white;
padding: 10px 5px;
display: block;
float: right;
}
.green_box span {
background-color: green;
color: white;
padding: 10px 5px;
display: block;
float: left;
}
Hope it helps,
here is a fiddle to see it running.
http://jsfiddle.net/54vgn2um/2/

Expanding down?

So currently when I add a new entry to my kind of list it goes like this:
[entry] -> [new entry]
and then starts on the line beneath. How do I do so it first fills the first line straight down and then creates a second line and fills that one straight down.
To easier show what I mean. I will give every entry a number and show how it works.
How it works right now:
1 2
3 4
5 6...
And I want it to work like:
1 4
2 5
3 6
Anyone know how I should do?
Code comes here.
HTML
<div id="staffs">
<h5>The Management</h5>
<p>
<div class="staff_box">
<img src="/images/users/1.png" class="staff_img" />
<h3 class="staff_name">Sarah Doe <img src="/images/flags/Sweden-Flag-16.png" class="staff_country" /></h3>
<text class="staff_pos">CEO, Founder, Owner</text>
</div>
<div class="staff_box">
<img src="/images/users/1.png" class="staff_img" />
<h3 class="staff_name">David Doe <img src="/images/flags/Sweden-Flag-16.png" class="staff_country" /></h3>
<text class="staff_pos">CEO, Founder, Owner</text>
</div>
<!--Same boxes are repeated-->
</p>
</div>
CSS:
#staffs {
width: 530px;
height: 275px;
float: left;
clear: left;
overflow-y: hidden;
}
h5 {
text-align: center;
background: #222;
color: #888;
padding: 5px;
width: 510px;
font-weight: bold;
border-radius: 4px;
}
.staff_country {
height: 12px;
width: 12px;
}
.staff_box {
width: 175px;
height: 50px;
margin-left: 5px;
margin-top: 5px;
clear: left;
display: inline-block;
}
.staff_img {
height: 50px;
width: 50px;
float: left;
margin-right: 3px;
border-radius: 4px;
border: 1px solid #BBB;
}
.staff_name {
font-size: 13px !important;
margin: 0 !important;
padding: 0 !important;
padding-top: 2.5px !important;
}
.staff_pos {
font-size: 11px;
color: #777;
}
To see it in action, here is a JSFiddle: http://jsfiddle.net/7MfLU/4/
I would also need some help on how to move the top entries higher up, closer to the titlebar.
Probably the easiest way, since you're just using divs anyway, is to just reorder them in your HTML. You could also create two diva inside staff_box, a left and a right, and put your diva in the appropriate column that way. To move the entries closer to the title bar, change the margin-top to something smaller (you can go negative if you need to).

Align images next to each other

I'm having trouble getting these two images lined up where I want them - I'm trying to do a grid style-display but for some reason (despite using display: inline) the images are appearing on separate lines.
I tried editing the width of the "figure" element (since I guessed that was what the problem was) but it just shrunk everything down instead of what I wanted - could anyone help me out?
HTML
<div id="blade" class="tab-content">
<div id="simpleCart_shelfItem">
<figure>
<img src="http://i.imgur.com/abi4hJu.png" class="mini-img" />
<figcaption class="item_price">$17,000</figcaption>
<span class="item_name">Gomai Blade</span>
</figure>
</div>
<div id="simpleCart_shelfItem">
<figure>
<img src="http://i.imgur.com/IFAtrSy.png" class="mini-img" />
<figcaption class="item_price">$1,682</figcaption>
<span class="item_name">Gomai Blade</span>
</figure>
</div>
</div>
CSS
.mini-img {
width: 20%;
cursor: pointer;
}
.builder {
height: 20%;
text-align: center;
padding-bottom: 10px;
width: 50%;
}
.builder fieldset {
border: 1px solid black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.builder fieldset legend {
text-align: left;
}
.tab-content {
margin-top: 10px;
}
.tab-content #simpleCart_shelfItem {
display: inline;
}
.tab-content #simpleCart_shelfItem .item_name {
display: none;
}
.tab-content #simpleCart_shelfItem figure {
width: auto;
}
I was trying to achieve a sort of "caption" effect under each separate image, but I still wanted the images lined up in a sort of "grid" format - I got the first part done (obviously) but it's the second part that's giving me trouble. I was hoping to avoid using a table, but I'm not sure if that would be more suited for this or not.
jsFiddle
I don't know what all that crazy code you've got is, but this is how I would do it. I understand you probably have all those classes for a reason, but could you consider simplifying, it will make your life easier, and make you a better coder.
HTML:
<div>
<img src="http://i.imgur.com/abi4hJu.png" class="mini-img" />
<p>$17 000</p>
</div>
<div>
<img src="http://i.imgur.com/IFAtrSy.png" class="mini-img" />
<p>$3500</p>
</div>
CSS:
div {
float: left;
margin: 10px;
}
p {
margin-top: 5px;
}
img {
width: 200px;
}
http://jsfiddle.net/eshellborn/g2xcr/18/
You are using the same ID for two DIV's which isn't valid HTML.
Can you instead of using percentages for your image tag use pixels instead. I changed the CSS to the below, adding float, and removing the other CSS.
.mini-img {
width: 100px;
cursor: pointer;
}
.tab-content {
margin-top: 10px;
}
div.simpleCart_shelfItem {
float: left;
}
JSFiddle Example:
http://jsfiddle.net/g2xcr/1/