I'm currently working on a "webshop" kind of project. I am creating a product panel with a
float:left; property but when I loop the products they are not coming next to each other but underneath the previous one.. What am I missing?
Code:
$web_string = "
<div class='product'>
<div class='image'>
<img class='image' src='iphone.jpg' alt='iPhone' height='100%' width='100%' />
</div>
<div class='under'>
<div class='info'>
<ul>
<li>iPhone</li>
<li>iOS</li>
<li>16 GB</li>
<li>Black & White</li>
</ul>
<a href='#'>more info...</a>
</div>
<div class='extra'>
<p>price: 588</p>
<button>put in cart!</button>
</div>
<div>
</div>";
CSS:
#wrapper{
width: 100%;
height:100%;
background-color: blue;
}
.product
{
float:left;
width:250px;
height:250px;
background-color:red;
}
.onder
{
height:50%;
}
.afbeelding
{
background-color: green;
}
.info
{
background-color:yellow;
float:left;
width:50%;
height:100%;
}
.extra
{
background-color: purple;
float:right;
width:50%;
height:100%;
}
PHP Loop:
<?
echo $web_string;
for($i = 0; $i < 4; $i++)
{
echo $web_string;
if($i == 2)
{
echo "Hello World";
}
}
?>
EDIT: Changed ID's to Classes
You're using CSS ID selector which can be used to point only ONE element. So the float property is applied only on the first one. Use class instead : <div class='product'> and then in your CSS : .product { float: left; }
Same thing for "image" and "under"
Here is a jfiddle fix:
link
Had to add float: left; on image and under ID too
#image {
float: left;
}
#under {
float: left;
}
Let me know if this is what you needed
Related
I am creating a social site and I want to leave three menu dots on the top right corner of each individual post a user makes. But it only works on one post. They show up on all of the posts but when I click it, the dropdown content only shows on the very first post at the top of the page.
I put it in my posts loop so I don't see why it's not working.
$str .= "<div class='status_post'>
<div class='post_profile_pic'>
<img src='$profile_pic' width='50'>
</div>
<!-- three dot menu -->
<div class='dropdownPosts'>
<!-- three dots -->
<ul class='dropdownbtn icons btn-right showLeft' onclick='showDropdown()'>
<li></li>
<li></li>
<li></li>
</ul>
<!-- menu -->
<div id='myDropdown' class='dropdownPost-content'>
<a href='#home'>Home</a>
<a href='#about'>About</a>
<a href='#contact'>Contact</a>
</div>
</div>
<div class='posted_by' style='color:#ACACAC;'>
<a href='$added_by'> $username </a> $user_to $time_message
$delete_button
</div>
<div id='post_body'>
$body
<br>
$imageDiv
<br>
<br>
</div>
<div class='newsfeedPostOptions' onClick='javascript:toggle$id(event)'>
Comments($comments_check_num)
<iframe src='like.php?post_id=$id' scrolling='no'></iframe>
</div>
</div>
<div class='post_comment' id='toggleComment$id' style='display:none;'>
<iframe src='comment_frame.php?post_id=$id' id='comment_iframe' frameborder='0'></iframe>
</div>
<hr>";
.header{
width: 100%;
background-color: #0d77b6 !important;
height: 60px;
}
.showLeft{
color:#000 !important;
padding:10px;
}
.icons li {
background: none repeat scroll 0 0 #000;
height: 7px;
width: 7px;
line-height: 0;
list-style: none outside none;
margin-right: 15px;
margin-top: 3px;
vertical-align: top;
border-radius:50%;
pointer-events: none;
}
.btn-left {
left: 0.4em;
}
.btn-right {
right: 0.4em;
}
.btn-left, .btn-right {
position: absolute;
top: 0.24em;
}
.dropdownbtn {
position: absolute;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
margin-top: 6%;
margin-right: 30%;
}
.dropdownPosts {
position: absolute;
display: inline-block;
right: 0.4em;
}
.dropdownPost-content {
display: none;
position: absolute;
margin-top: 60px;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdownPost-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdownPosts a:hover {background-color: #f1f1f1}
.show {display:block;}
<script>
function changeLanguage(language) {
var element = document.getElementById("url");
element.value = language;
element.innerHTML = language;
}
function showDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropdownbtn')) {
var dropdowns = document.getElementsByClassName("dropdownPost-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
If you remove any duplicated IDs from the HTML and modify the 3-dots portion like so
<div class='dropdownPosts'>
<!-- three dots -->
<ul class='dropdownbtn icons btn-right showLeft' onclick='showDropdown(event)'>
<li></li>
<li></li>
<li></li>
</ul>
<!-- menu -->
<div class='dropdownPost-content'>
<a href='#home'>Home</a>
<a href='#about'>About</a>
<a href='#contact'>Contact</a>
</div>
</div>
You can then likey modify your showDropdown function like this:
function showDropdown(event) {
event.target.nextElementSibling.classList.toggle("show");
}
I'm trying to define some css styling to an < a > element, in particular, padding and margins. I've noticed that when I'm trying to define it in-line, it's working, but when I try to use a class selector in an external style sheet, for some reason it is not working. The weird thing is that other attributes (like height), does work in the external file.
The relevant php code:
<div id='navbar_line'>
<nav class="home_navbar">
<div class="container">
<div id="navbar" class="collapse navbar-collapse" style='padding:0'>
<ul class="nav navbar-nav home_nav">
<?php
// Create the top navigation list by listing the children of the homepage.
// If the section we are in is the current (identified by $page->rootParent)
// then note it with <a class='on'> so we can style it differently in our CSS.
$homepage = $pages->get( "/" );
$children = $homepage->children;
$reversed = $children->reverse();
foreach ($reversed as $child) {
echo "<li class='home_navbar_item'>";
echo "<a href='{$child->url}'>";
echo "<div class='navbar_logo'>";
echo "<img src='{$child->page_logo->url}' alt='{$child->title}' height='30' width='30'>";
echo "</div>";
echo "</a>";
echo "</li>";
}
echo "<li class='home_navbar_item'> <a href='{$homepage->url}'>";
echo "<img src='{$meta_data->Logo->url}' alt='{$homepage->title}' height='30' width='30'>";
echo "</a>";
echo "</li>";
?>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
The css code:
#lower_part span{
padding:0;
margin:0;
white-space: pre;
}
#navbar_line{
background-color: #04619c;
height: 137px;
margin: auto;
}
#navbar{
background-color: #04619c;
}
.home_navbar_item a {
height: 300px;
padding:0;
margin:0;
}
.navbar_logo{
height: 50px;
width: 50px;
background-color: white;
/*border-radius: 50%;*/
}
.carousel_image{
width:100%;
}
.hebrew_text{
text-align: right;
}
#scrollable_body{
height: 100px;
margin:0;
padding:0;
}
.scrollable_content{
padding:0;
overflow: scroll; overflow-x:hidden;
height: 500px;
/*-webkit-overflow-scrolling: touch;*/
}
span{
padding:4em 0 0 0;
display:inline-block;
}
hr {
border:none;
border-top:1px dotted #f00;
color:blue;
background-color:#fff;
height:1px;
width:50%;
}
Seems you just can't override previous defined padding & margin, while you doing that inline, inline styles have bigger priority and applies.
Try to read this article, it can helps to understand a problem https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
i am developing a web application,I have made some div which is visible in each browser.one of my div is not showing up on firefox.What are the possible reasons.
here is my fiddle
i have given the background-color:black to the div which is not showing up.
css
html, body
{
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
#main_header
{
height:20%;
border-bottom:3px solid grey;
}
#user_info
{
height:40%;
width:auto;
float:right;
text-align:right;
position:relative;
right:3%;
top:42%;
}
#user_info span
{
font-size:1.2em;
font-weight:600;
}
#logo
{
height:60%;
width:25%;
float:left;
background-image:url('../images/ibuildmart_logo.png');
background-repeat:no-repeat;
background-size:100% 100%;
position:relative;
left:5%;
top:20%;
}
#main_wrapper
{
height:75%;
}
#menu_wrap
{
width:10%;
float:left;
height:100%;
background-color:yellow;
}
#content_wrap
{
width:90%%;
height:100%;
float:right ;
}
#content
{
background-color:black;
width:95%;
height:92%;
border-radius:20px;
-moz-border-radius:20px;
margin:2%;
overflow:auto;
}
#main_footer
{
height:5%;
background-color:blue;;
}
html
<div id="main_header">
<?php
include_once('header.php');
?>
</div>
<div id="main_wrapper">
<div id="menu_wrap">
</div>
<div id="content_wrap">
<div id="content">
</div>
</div>
</div>
<div id="main_footer">
<?php
include_once('footer.php');
?>
</div>
Firs thing is the HTML comments are not closed properly. And the main reason is you are using double % in ID content_wrap.
Here is the Demo.
#content_wrap
{
width:90%%; /*you are using double percentage here*/
height:100%;
float:right;
}
You have multiple problems:
http://jsfiddle.net/uZd3u/2/
You closed your HTML comments with --!> which is wrong. It have to be like this: <!-- comment -->
Your content_wrap was float: right;
i have php program that contain div main_wrapper that div have two sub div resultwrapper and adv_right. I want adv_right div exactly right side of the resultwrapper div.When i'm use float mean that div present outside of the main_wrapper div.
<style>
.resultwrapper{width:990px; margin: 10px auto 10px auto; clear:both; }
.resultitem{ float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:218px;}
.resultleftitem{padding-left:0;margin-left:0px;}
.resultitem img{border:dotted 1px #666; padding:6px;}
.resultitem img:hover{border:solid 1px #F60;}
.resultitem h4{font-size:12px; font-weight:bold; color:#249ce9; margin-top:5px; }
.resultitem a{color:#249ce9;}
.resultitem .caption{color:#9c9c9c; font-size:12px; display:block; margin-top:6px; text-align:justify;}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php
while($row = mysql_fetch_array($rs)) {
$id=$row['id'];
$type=$row['type'];
$location=$row['location'];
if(file_exists("properties//". $imageloc ."//thumb.jpg") )
{
$thumb_img="properties/". $imageloc ."/thumb.jpg";
} else {
$thumb_img="images/default.jpg";
}
if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;
?>
<div id="parent" >
<div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank">
<img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" /></a>
<div class="itemdetails">
<h4 id="linkheading"><?php echo $type ." # ".$location; ?></h4>
<span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span>
</div>
</div>
</div>
<?php
$cnt++; } ?>
</div>
<div class="adv_right" style=" clear:both; width:15%; float:right;height:300px; background-color:#999999;">
</div>
</div>
Please try it,
Remove clear:both; from both div and set width what u want ,,
Please try this code you want like this ??
<style>
.resultwrapper {
margin: 10px auto 10px auto;
}
.resultitem {
float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:218px;
}
.resultleftitem {
padding-left:0;
margin-left:0px;
}
.resultitem img {
border:dotted 1px #666;
padding:6px;
}
.resultitem img:hover {
border:solid 1px #F60;
}
.resultitem h4 {
font-size:12px;
font-weight:bold;
color:#249ce9;
margin-top:5px;
}
.resultitem a {
color:#249ce9;
}
.resultitem .caption {
color:#9c9c9c;
font-size:12px;
display:block;
margin-top:6px;
text-align:justify;
}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php
while($row = mysql_fetch_array($rs)) {
$id=$row['id'];
$type=$row['type'];
$location=$row['location'];
if(file_exists("properties//". $imageloc ."//thumb.jpg") )
{
$thumb_img="properties/". $imageloc ."/thumb.jpg";
} else {
$thumb_img="images/default.jpg";
}
if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;
?>
<div id="parent" >
<div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" />
<div class="itemdetails">
<h4 id="linkheading"><?php echo $type ." # ".$location; ?></h4>
<span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span> </div>
</div>
</div>
<?php
$cnt++; } ?>
</div>
<div class="adv_right" style="width:15%; float:right;height:300px; background-color:#999999;">23123 </div>
</div>
add float:left here
<div class="resultwrapper" style="float:left;">
and rempove clear:both and add float:left
<div class="adv_right" style=" clear:both; width:15%; float:left;height:300px;
background-color:#999999;">
see demo here ....http://jsfiddle.net/6e4xN/1/
when you going to use this code it will not work with more than 7-8 elements, to work when you have more elements then use below stylesheet.
<style>
.resultwrapper {
margin: 10px auto 10px auto;
width:80%;
float:left;
}
.resultitem {
float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:150px;
}
.resultleftitem {
padding-left:0;
margin-left:0px;
}
.resultitem img {
border:dotted 1px #666;
padding:6px;
}
.resultitem img:hover {
border:solid 1px #F60;
}
.resultitem h4 {
font-size:12px;
font-weight:bold;
color:#249ce9;
margin-top:5px;
}
.resultitem a {
color:#249ce9;
}
.resultitem .caption {
color:#9c9c9c;
font-size:12px;
display:block;
margin-top:6px;
text-align:justify;
}
</style>
Let me know if it works for you or not.
I guess there is some problem in the code. You CANNOT use the same ID for multiple elements in a page. Secondly when you are using percent width for the adv_right div, why don't you use the same for resultwrapper div with both the resultwrapper & adv_right divs floated left and no clear:both in the css. I feel this should solve your problem.
i have a jcarousel gallery of images
but the jcarousel is not working at all it's not scrolling through images at all
this is my code :
<ul id="mycarousel" class="jcarousel-skin-tango">
<?php foreach ($images as $image_item) : ?>
<li><img src="<?php echo $image_item['Path']; ?>"/></li>
<?php endforeach; ?>
</ul>
and this is my css :
.jcarousel-skin-tango .jcarousel-container {
width:500px;
height:250px;
background: none;
border: none;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
height:250px;
padding: 20px 40px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 500px;
height: 250px;
}
.jcarousel-skin-tango .jcarousel-item {
width: 500px;
height: 250px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
margin-right: 10px;
}
and there is my js :
$(document).ready(function(){
$('#mycarousel').jcarousel({wrap:'circular'});
});
Your code is almost correct — you just need to add "auto: 1" (or some other non-zero number of seconds) and it'll start auto-scrolling. If you don't want auto-scroll, you need to specify the "buttonNextHTML" and "buttonPrevHTML" parameters to get buttons.