I'm trying to add a new div area right above the content section of blogger-dynamic-magazine view like shown in the picture. How can I put a three-div area (like shown in the picture) with red color?
I've tried to insert a <div> right after the <body> tag and before the <content> tag, but it doesn't work.
I've put even below code but doesn't worked.
<div id="container" style="background:black; position:relative; clear:left; top:100px; width:100px; height:100px;">
<table>
<tr>
<td> <div style="background:black;"> Content for div #1</div> </td>
<td> <div style="background:black;"> Content for div #2</div> </td>
<td> <div style="background:black;"> Content for div #3</div> </td>
</tr>
</table>
EDIT:
In my blogger code, I've
</head>
<body>
<div class='content'>
<div class='content-outer'>
<div class='fauxborder-left content-fauxborder-left'>
<div class='content-inner'>
<div class='main-outer'>
<div class='fauxborder-left main-fauxborder-left'>
<div class='region-inner main-inner'>
<div class='columns fauxcolumns'>
<div class='column-center-outer'>
<div class='column-center-inner'>
<b:section class='main' id='main' showaddelement='no'>
Use a table:
<div id="container">
<table>
<tr>
<td> <div> Content for div #1</div> </td>
<td> <div> Content for div #2</div> </td>
<td> <div> Content for div #3</div> </td>
</tr>
</table>
</div>
CSS for explanatory purposes only.
table tr td div {
background:red;
}
You can use this code:
<<<<<<<<<<<<<< CSS >>>>>>>>>>>>>
<style>
#container {width:100%; margin:0px; padding:0px;}
.inner-container {max-width:1140px; width:100%;margin:0 auto;}
.red {display:inline-block; width:30%; margin:1%;}
</style>
<<<<<<<<<<<< HTML >>>>>>>>>>>>>
<div id="container">
<div class="inner-container">
<div class="red red-1"> Content for div #1</div>
<div class="red red-2"> Content for div #2</div>
<div class="red red-3"> Content for div #3</div>
</div>
</div>
Dynamic Blogger seems to remove any custom html from the template. The only way to do this is to dynamically insert the html using JavaScript and something like jQuery, e.g.
var divstr = "Some content";
$(divstr).insertAfter(".article-header");
Related
I'm using bulma.css for a layout, but when I give a border to something I've found its overlapping.
Here is the overlap:
The .shop div seems 'as expected'
But the .basket div seems to be creeping up a bit.
Here is a link to a demo
And Html:
<div id="app">
<div class="container">
<div class="shop">
<div class="columns">
<div class="column is-one-quarter product">
<h3 class="title is-4">Cat</h3>
<p>
£<span>2.99</span></p>
<div><button class="button">Add to basket</button></div>
</div>
<div class="column is-one-quarter product">
<h3 class="title is-4">Dog</h3>
<p>
£<span>4.00</span></p>
<div><button class="button">Add to basket</button></div>
</div>
</div>
</div>
<div class="basket">
<h1>Basket</h1>
<table class="table">
<thead>
<tr>
<td>Item</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No items in the basket</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
// All of bulma.css
html,body{
height:100%;
padding:20px;
}
.product{
box-sizing:border-box;
border:2px solid #eaeaea;
padding:20px;
}
I think its something to do with ... flexbox? I'm not sure!
In it's latest version try is-gapless along with columns class
The bottom container is creeping up over the top container because of this rule in the Bulma code:
.columns:last-child {
margin-bottom: -.75rem;
}
Just override it. Add this to your code:
.columns:last-child {
margin-bottom: 0 !important;
}
!important may not be necessary. I just added it to ensure that your rule prevails.
<div style="border-style:solid; margin:auto;">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
I'm trying to put a div over the image, how let the floating div to occupy the space, so the footer div will be pushed accordingly.
I'm not sure what you're asking. Do you wish to have the yellow div take up only the amount of space of the div behind it (with the Google Doodle)? Or do you want the reverse, that is, you want the footer height to automatically adjust to the yellow div height?
I am not sure I completely understand. Do you mean to make the div containing the image to have a minimum height? You can use the min-height property then as follows:
<div style="border-style:solid; margin:auto;min-height:80%">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
-- Edit: If you are looking for some kind of a background-image in a div container you can control you can do something like this:
<html>
<head>
</head>
<body>
<div style="border-style:solid; margin:auto">
<div div style="background-image:url('https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg'); background-repeat: no-repeat;" >
<div style="border-style:dotted; height:400px; width:600px">
</div>
</div>
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
</body>
</html>
I know that's been asked many times and I am trying to compile the answers but cannot come up with something that would work for me. Here is my code:
<div style="position:relative; overflow:hidden; height:35px">
<table style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle;">
<div style="float:left">
<img src="image1.png">
<img src="image2.png">
</div>
<div style="float:right;height:30px" class="panel panel-default">
<img src="image3.png">
</div>
<div style="float:right;width:250px;height:30px" class="panel panel-default"></div>
</td>
</tr>
</table>
</div>
Demo
What I want is to have all inner divs aligned vertically in the middle.
Can someone please help?
Thanks
You should use inline-block
<style>
.my_div {position:relative; overflow:hidden; height:35px;}
.my_div table {width:100%; height:100%;}
.my_td div {display: inline-block; vertical-align:middle;}
</style>
<div class="my_div">
<table>
<tr>
<td class="my_td">
<div>
<img src="image1.png">
<img src="image2.png">
</div>
<div class="panel panel-default">
<img src="image3.png">
</div>
<div class="panel panel-default"></div>
</td>
</tr>
</table>
</div>
I'm trying to figure out why my <div> element does not expand to cover everything it contains. I've seen this in Google Chrome's "Elements" view when I press Shift+Ctrl+J. I expected my "content" div to be sized to include <p>A</p> and <p>B</p>, but it doesn't.
PS-- I've read some comments that a footer is normally positioned absolute, but this is just to show the error.
Here is the simplified page:
<html>
<head>
<style type="text/css">
#footer{
background-color: lightblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content" align="center">
<div style="width:50%;">
<p align="left">
Two divs:
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
</p>
</div>
</div>
<div id="footer" align="center">
<div style="width:90%;" align="center">
Here is my footer.
</div>
</div>
</body>
</html>
Add
<div style="clear:both"></div>
After
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
add this to the css:
#content { overflow: hidden; }
I have a website wallz.moon.pk, it's a wallpaper collection, on the gallery where I show thumbnails I have created a mouse over effect that for mouse a semi transparent strip is shown over the thumbnail so that user can select an appropriate answer..
I am not very good with DIVs so I put in a table to create the effect I wanted, check it out here, I have used the following code:
<div id="i551" class="actions">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center" colspan="2"><h2>Water Bubbles</h2></td>
</tr>
<tr>
<td width="50%">
Open Here
</td>
<td width="50%">
<a href="Water+Bubbles.html" class="acthuns" target="_blank">
+ New Tab </a>
</td>
</tr>
</table>
</div>
My question is how to convert the above Table and used DIVs & CSS styling to get the same effect....
Here is a simple approach:
http://jsfiddle.net/tNms9/3/
HTML
<div id="i551" class="actions">
<div class="row">
<h2>Water Bubbles</h2>
</div>
<div class="row">
<div class="cell">
Open Here
</div>
<div class="cell">
<a href="Water+Bubbles.html" class="acthuns" target="_blank">
+ New Tab </a>
</div>
</div>
</div>
CSS
.actions{ width:400px; }
.row { width:100%; overflow:hidden; background:lime; }
.cell {width:45%; padding:10px; float:left; background:orange; }
In CSS 2.1, the display property have Table model values which allows you to set the display of a element to each <table> known element : https://developer.mozilla.org/en-US/docs/CSS/display#Values
PS : It doesn't work on IE7-.
The provided code will produces the first row of images. You can mess with the percentages to get the white space you want, but here is the basic idea:
CSS:
.tile-container {
width:100%;
margin-left:-2%; /* offsets the first column of tiles */
}
.tile {
float:left;
width:23%;
margin-left:2%;
margin-bottom:2%;
}
HTML:
<div class="tile-container">
<div class="tile>
<!-- Image + other markup goes here -->
<div>
<div class="tile>
<!-- Image + other markup goes here -->
<div>
<div class="tile>
<!-- Image + other markup goes here -->
<div>
<div class="tile>
<!-- Image + other markup goes here -->
<div>
</div>