I'm trying to work out how to dynamically layout DIV's so they form a grid effect layout.
My page is very simple. I have a DIV which is a wrapper and is made using :
#wrapper {
width: 80%;
margin: 50px auto;
padding: 20px;
border:1px solid #000000;
display: table;
}
Here is a FIDDLE of this page working.
Within that I want to layout 6 cells ( possibly 8 but for this 6 will be fine )
The cells are displayed using parent & child css.
The users permissions determins how many cells they may see. So some users will see 6, others 5, 4,3 etc..
The attached screen shot shows how I want the layout to look based on the number of cells shown. ( all centred correctly - unlike my image)
The text entry for the cells isn't important, some users will see 2 cells and this may be 'field 1' & 'field 6', another user it could be 'field 5' & 'field 2' etc.
A cell is created using
<div class="child">
<img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png' />
<p>field 1</p>
</a>
</div>
php will be used to hide the above code for any cell that is not to be viewed.
Any idea how I can acheive this ?
Thanks
You can work around with CSS3 flex property and java script. In HTML file, you need to just place all the six child elements [div.child] inside the parent [div#parent]. The splitting of child elements can be done using JavaScript itself.
Check this following code:
<!doctype HTML>
<html>
<head>
<style>
#wrapper {
width: 80%;
margin: 50px auto;
padding: 20px;
border:1px solid #000000;
display:block;
}
#parent {
display: flex;
font-size: 1em;
height: auto;
justify-content: space-around;
line-height: 0.6em;
margin: 0 0 30px;
text-align:center;
}
.child {
width: 120px;
height: 75px;
border: solid 1px #000;
display: inline-block;
letter-spacing: normal;
font-size: normal;
white-space: normal;
text-align: center;
vertical-align: middle;
margin:5px 25px 20px 25px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="parent">
<div class="child">
<a href="">
<img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
<p>field 1</p>
</a>
</div>
<div class="child">
<a href="">
<img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
<p>field 2</p>
</a>
</div>
<div class="child">
<a href="">
<img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
<p>field 3</p>
</a>
</div>
<div class="child">
<a href="">
<img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
<p>field 4</p>
</a>
</div>
<div class="child">
<a href="">
<img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
<p>field 5</p>
</a>
</div>
<div class="child">
<a href="">
<img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
<p>field 6</p>
</a>
</div>
</div>
</div>
</body>
</html>
<script>
var wrapper= document.getElementById('wrapper');
var temp= document.getElementById('parent');
child= temp.childElementCount;
if(child == 3)
{
temp.style.flexFlow= "row nowrap";
}
if(child == 4)
{
temp.style.flexFlow="row nowrap";
var row2 = document.createElement("div");
row2.setAttribute('id','parent');
var child3= temp.childNodes[5];
var child4= temp.childNodes[7];
row2.appendChild(child3);
row2.appendChild(child4);
wrapper.appendChild(row2);
}
if(child == 5)
{
temp.style.flexFlow="row nowrap";
var row2 = document.createElement("div");
row2.setAttribute('id','parent');
var child4= temp.childNodes[7];
var child5= temp.childNodes[9];
row2.appendChild(child4);
row2.appendChild(child5);
wrapper.appendChild(row2);
}
if(child == 6)
{
temp.style.flexFlow="row nowrap";
var row2= document.createElement("div");
row2.setAttribute('id','parent');
var child4= temp.childNodes[7];
var child5= temp.childNodes[9];
var child6= temp.childNodes[11];
row2.appendChild(child4);
row2.appendChild(child5);
row2.appendChild(child6);
wrapper.appendChild(row2);
}
</script>
You said you generate the code with PHP so just add an if that decide which layout is needed. If you need only 4 divs generate only two child divs per parent div.
Your HTML and CSS seems to work just fine when I delete divs from the HTML code.
I don't see a reason to complicate your CSS if you can easily work this out via the PHP code. Simple and clean HTML and CSS will be loaded and rendered faster and also will be easier to maintain.
Related
I created a webpage with a dynamic footer. In the footer I have a facebook icon. when I preview the page the image does not appear. All other css files are working fine except for the footer. Could anyone tell me what I am missing?
My footer template:
<footer>
<div class="icon-text">
<div class="icon-text-text">
<ul class="footer-nav">
<li>Terms and Conditions</li>
<li>Shipping Information</li>
</ul>
</div>
</div>
<div class="icon-text">
<p class="email_text">Follow me on</p>
<a href="#">
<img class="social-icon" src=../icons/facebook.png"
alt="Facebook">
</a>
</footer>
<footer class="second">
<p>© All Rights Reserved</p>
</footer>
<!--End of Footer Section-->
Here is my css for the footer section:
footer {
background-color: pink;
border: 2px solid black;
box-shadow: 5px 5px 3px rgba(0, 0, 0, .65);
width: 1350px;
max-height: 300px;
overflow: hidden;
}
.icon-text {
width: 50%;
float: left;
text-align: justify;
text-align: center;
}
.icon-text-text {
font-size: 150%;
}
img.social-icon {
height: 45px;
width: 45px;
}
.email_text {
font-size: 150%;
}
And here in the php on the index page to add the footer:
<?php include_once("templates/template_footer.php"); ?>
There are other things wrong with the footer like I can't get the wording to move to the left but the image is whats important. Any ideas on how to fix this?
Assuming your path was correct, Please check it out.
<link rel="stylesheet" type="text/css" href="<?php include_once('templates/template_footer.php'); ?>">
I would like to create a website with a tile layout, similar to the new Windows style. https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/jquery4u/2013/03/metro-template.png <- kind of like this, except that in my case:
each tile is the same size (square) (.box)
The text should be in the centered in the tile (.center-box-content)
each tile should entail two buttons in its lower right corner, in addition to the text (.lower-right-box-content)
The buttons are edit and trash icons, so that the text in the tiles can be changed.
I have accomplished this, but the problem is: The buttons seem to be dependent on the text length.
I've assigned them an absolute position in the css file, yet they don't stay put.
If the text in the tile is longer, they move all the way past/beyond the tile's borders, which they shouldn't surpass. It's a complete mess. I have tried everything but I can not find a solution. I am hoping that you guys can take a look and maybe see what I am missing? Here's my CSS Code:
.box {
width: 200px;
height: 200px;
margin: 2px;
color: whitesmoke;
float: left;
padding: 7px;
}
.center-box-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lower-right-box-content {
position: absolute;
float: right;
padding: 2px;
bottom: -60px;
right: -5px;
}
.red-box {
background-color: indianred;
}
.blue-box {
background-color: deepskyblue;
}
.green-box {
background-color: mediumseagreen;
}
Here is my HTML Code: (The PHP bit just reads out the text from the data base, which is an event name, event description, and event date)
<!--the entire square tile -->
<div class="box red-box" height="100%" width="100%">
<!--this centers the text within the tile -->
<div class="center-box-content">
<!--echo the name -->
<b><?php echo $row["title"]; ?></b>
<!--echo the description -->
<?php echo $row["description"]; ?>
<br> • <!--echo the date -->
<?php echo $row["date"]; ?> •
<!--edit and delete button in the lower right corner of the tile -->
<!--this is the part that keeps moving as the text gets longer -->
<div class="lower-right-box-content">
Upcoming Events <span style="display:inline-block; width: 20px;"></span>
<a href="#">
<span class="glyphicon glyphicon-pencil glyphicon-pencil" role="button"> </span>
</a>
<a href="deleteevent.php?id=<?php echo $row["eventid"];?>">
<span class="glyphicon glyphicon-trash glyphicon-trash" role="button"></span>
</span>
</a>
</div>
</div>
</div>
<?php };
?>
For ideal management of "box" today we use the grid. One example css for 6-columns grid:
body {
font-family: 'Ariel', sans-serif;
font-weight: 100;
font-size: 1em;
color: #faf3bc;
background-color: #0976B2;
}
.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% */
.grid_2 { width: 32.5%; } /* 260px/800px = 32.5% */
.grid_3 { width: 49.375%; } /* 395px/800px = 49.375% */
.grid_4 { width: 65.625%; } /* 525px/800px = 65.625% */
.grid_5 { width: 83.125%; } /* 665px/800px = 83.125% */
.grid_6 { width: 100%; } /* 800px/800px = 100% */
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
/* margin-right: 1.25%; */
float: left;
display: block;
}
.last {margin-right:0; }
.container{
clear:both;
width: 90%;
max-width: 800px;
padding: 0% 0;
margin: auto;
}
img {
max-width: 100%;
}
h1 {
color: #ffffff;
}
a:link {color:#b4c34f; text-decoration:none;} /* unvisited link */
a:visited {color:#b4c34f; text-decoration:none;} /* visited link */
a:hover {color:#faf3bc; text-decoration:underline;} /* mouse over link */
a:active {color:#b4c34f; text-decoration:none;} /* selected link */
a.selected {color:#ffffff;} /* selected link */
ul {
list-style-type:none;
}
.form-input {
height: 30px;
}
#media screen and (max-width : 705px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
width: 100%;
}}
HTML for 3 "box" in raw:
<div class='grid_2'>
</div>
<div class='grid_2'>
</div>
<div class='grid_2 last'>
</div>
HTML for 2 "box" in raw:
<div class='grid_3'>
</div>
<div class='grid_3 last'>
</div>
Maybe you need more grid-columns, go ahead, learn responsive web design.
Is the square the direct parent of those absolutely positioned elements? It should be, and it needs to have position: relative for the absolute position to work.
And erase the float from those elements - it doesn't make sense for absolutely positioned elements.
Here is the jsfiddle link
You need to set the .lower-right-box-content to position:relative and then make the buttons absolute positioned.
<div class="lower-right-box-content">
<div style="display:inline-block;margin-right:40px;text-align:justify;"> Upcoming Events longggg text does not matter </div>
<a href="#">
<span class="glyphicon glyphicon-pencil glyphicon-pencil" role="button" style='position:absolute;bottom:10px;right:5px;'> </span>
</a>
<a href="deleteevent.php?id=<?php echo $row["eventid"];?>">
<span class="glyphicon glyphicon-trash glyphicon-trash" role="button" style="position:absolute;bottom:10px;right:20px;">
</span>
</a
</div>
</div>
I have used inline styles for clarity. Please update the styles in stylesheet with appropriate selectors.
Place the buttons in their own div.
Add position: relative to the box.
Use position: absolute to place the text and buttons to the bottom.
To ensure longer text does not overlap with the buttons, add some padding to the text.
.box {
width: 200px;
height: 200px;
margin: 2px;
color: whitesmoke;
float: left;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
}
.center-box-content {
text-align: center;
}
.upcoming {
position: absolute;
bottom: 0;
text-align: center;
left: 0;
right: 0;
padding: 0 30px; /* ensure the text clears the buttons */
}
.buttons {
position: absolute;
bottom: 0;
right: 0;
}
.red-box {
background-color: indianred;
}
.blue-box {
background-color: deepskyblue;
}
.green-box {
background-color: mediumseagreen;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="box red-box">
<div class="center-box-content">
<b>Name</b>
<br>Description
<br> • Date •
</div>
<div class="lower-right-box-content">
<span class="upcoming">Upcoming events</span>
<div class="buttons">
<a href="#">
<span class="glyphicon glyphicon-pencil glyphicon-pencil" role="button"></span>
</a>
<a href="#">
<span class="glyphicon glyphicon-trash glyphicon-trash" role="button"></span>
</a>
</div>
</div>
</div>
<div class="box red-box">
<div class="center-box-content">
<b>Name</b>
<br>Description
<br> • Date •
</div>
<div class="lower-right-box-content">
<span class="upcoming">Upcoming events events events</span>
<div class="buttons">
<a href="#">
<span class="glyphicon glyphicon-pencil glyphicon-pencil" role="button"></span>
</a>
<a href="#">
<span class="glyphicon glyphicon-trash glyphicon-trash" role="button"></span>
</a>
</div>
</div>
</div>
This is my HTML code
<div>
<div class="text-center col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-md-3 col-sm-3 animate-box">
<div class="team-section-grid" style="background-image: url(assets/img/image-bg.jpg);">
<div class="overlay-section">
<div class="desc">
<i class="icon icon-wallet2"></i> Buy Now
</div>
</div>
</div>
<div class="text-center add-cart">
<a href="" title="">
<i class="icon icon-cart"></i> Add To Cart
</a>
<a href="" title="">
<i class="icon icon-heart" style="margin-left: 10px;"></i> Add To Wishlist
</a>
</div>
</div>
View More..
</div>
What i am trying to achieve through JQUery is whenever click the view more.. or whenever the focus is on that button I want the following div appended to the current div so that I can dynamically load products from the DB and append it.
Can anyone help me with that code? Thanks in advance..
Did you tried: http://api.jquery.com/append/ ?
A very simple example:
jQuery('.wrapper a').on('click', function(e){
e.preventDefault;
jQuery('.wrapper').append('<div class="item"></div>');
});
.wrapper{
position: relative;
background: #e6e6e6;
padding: 10px 10px 50px 10px;
}
.wrapper a{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px 0;
background: #aaa;
color: white;
text-align: center;
border-top: 3px solid #fff;
}
.item{
display: block;
width: 100%;
height: 20px;
background: #ccc;
margin: 0 0 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
show more
<div class="item"></div>
</div>
Instead of append('<div class="item"></div>') you can append html-templates, too. It could be more comfortable to use a template engine here ...
Despite of other people having the same issues I still couldn't get it to work, so I'll really need your help.
I'm currently writing a guestbook in php with a html-template but I have the issue that my divs don't use the min-height properties that I set if they are a percentage. I wanted to make the whole page responsive for all resolutions and window-sizes so that's why I'm trying to avoid fixed heights.
The following is my html-markup:
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</body>
</html>
As my CSS-file is quite big I will only give you the important parts:
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
}
body {
height:100%;
width:calc(70% - 2px);
margin-left: calc((30% - 2px) / 2);
position: absolute;
}
#wrap_main {
background: rgba(255,255,255,0.7);
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
margin-top: calc(1% + 4px);
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 550px;
width: 95%;
}
If you need more parts, please write so in the comment. I'm sorry if the code is a little messy but I haven't yet cleaned it up...
My problem is, that the #wrap_content and #content can't have a percentage height and I don't know why but it just won't work.
Did I make a mistake somewhere along the way and just don't see it?
What do I need to change, so that the #wrap_main is always as big as it's content? How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?
Do I need to change something in the html-markup?
If you see anything else that I could do better, please advise. I'm still very new to php, html and css but I'll welcome every help I can get. Thanks in advance.
If you want to check out what the page looks like at the moment click here. Be aware that not everything is working correctly yet, but if you want to register yourself, you're highly welcome to test it out.
EDIT:
I had to change the html-markup a little and adapted the css quite a bit thanks to the idea of William, thanks again:
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="whity_layer">
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</div> <!-- whity_layer -->
</body>
</html>
And CSS:
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
z-index: -1;
}
body {
height: 100%;
max-height:auto;
width:100%;
position: relative;
z-index: 0;
}
#whity_layer {
background: rgba(255,255,255,0.7);
margin-left: calc((30% - 2px) / 2);
width: calc(70% - 2px);
height: 100%;
position: fixed;
overflow: auto;
z-index: 1;
}
#wrap_main {
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
top: 45px;
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 100%;
width: 95%;
}
I'll have yet to decide the min-height of the content-wrapper, but I'll figure it out.
EDIT 2
I have to add that at the moment I have a scrollbar on the whity_layer if the content overflows (overflow: auto) which I can't get rid of for the time being... every homebrew attempt I found wouldn't work with my markup... Nowadays it should be easier to hide scrollbars with css in my opinion...
What do I need to change, so that the #wrap_main is always as big as it's content?
You don't need to use height or min-height to have the #wrap_main always as big as it's content.
How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?
Just take the height and min-height out of the CSS
Do I need to change something in the html-markup?
Not really, just change the CSS.
Here is a jsfiddle without the height and min-height on CSS that will adjust it's height according the content.
EDIT:
If you just need a whity background, you might consider this:
Create a new div #whity_layer and make it absolute before all the other divs:
<body>
<div id="whity_layer"></div>
<div id="wrap-main"></div>
.........
Change the CSS to:
body {
position: relative;
}
#whity_layer {
background: rgba(255,255,255,0.7);
position: absolute;
width: 100%;
height: 100%;
}
#wrap_main {
// Remove background
}
A time ago i tried to find a css alternative to make my div always as big as it's content, but as long as i remember that was horrible/hard, i'am sorry that i can't really answer you, but if you want to try with another method you can use AngularJs with, for exemple, ng-style so you can give your divs a "dynamic" size.
The rest is all about algorithm :).
Good luck mate :3
I would greatly appreciate any help I can get on this matter. I am using xampp on an Ubuntu Linux Server OS. I have a filed saved as template.php. I have defined a style on template.php which contains a div class "spcout". When I try and use "spcout", the text in the tags should spread themselves out evenly in a line over the width of the web page. Unfortunately, it's not happening. It appears my div class is somehow not being read. I tried using the same code in a .html file and it works when I open the file locally. If i upload the same html file onto the web server, that same html file will not display correctly. Any help is appreciated! Thanks.
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
div.spcout
{
display: table;
width: 100%;
}
div.spcout span
{
display: table-cell;
text-align: center;
}
</style>
<div id="container">
<img src="images\baseimage.png">
<div class="spcout">
<span>code 1</span>
<span>code 1</span>
<span>code 1</span>
</div>
</div>
<style type="text/css">
div.spcout span
{
display: block;
text-align: center;
float:left;
width:100px;
height:100px;
margin-right:5px
}
</style>
<div id="container">
<img src="images\baseimage.png">
<div class="spcout">
<span>code 1</span>
<span>code 1</span>
<span>code 1</span>
</div>
</div>