I am trying to place a list of products in individual tables and then place them side by side for display.
Originally, the tables stack on top of one another like so and fit within the jumbotron design:
http://i.snag.gy/zgBtG.jpg
I want them stacked side by side like so:
http://i.snag.gy/g0huA.jpg
However, when I do this, things get a little messed up and the tables do not stay within the jumbotron design.
Here is my code:
HTML:
td {
text-align: center;
vertical-align: central;
padding: 5px;
}
.products {
float: left;
}
<?php // Run a select query to get my latest 6 items // Connect to the MySQL database include "storescripts/connect_to_mysql.php"; $dynamicList="" ; $sql=m ysql_query( "SELECT * FROM products ORDER BY date_added DESC LIMIT 12"); $productCount=m ysql_num_rows($sql);
// count the output amount if ($productCount>0) { while($row = mysql_fetch_array($sql)) { $id = $row["id"]; $product_name = $row["product_name"]; $price = $row["price"]; $date_added = strftime("%b %d, %Y", strtotime($row["date_added"])); $dynamicList .= '
<table class="products" width="220px" border="1"
cellpadding="6">
<tbody>
<tr>
<td>
<a href="product.php?id=' . $id . '">
<img width="200px" height="250px" style="border: #CCCCCC 1px solid;" src="http://rapidcodes.co.uk/inventory_images/' . $id . '.jpg" alt="$dynamicTitle">
</a>
</td>
</tr>
<tr>
<td><strong>' . $product_name . '</strong>
</td>
</tr>
<tr>
<td>£' . $price . '</td>
</tr>
</tbody>
</table>'; } } else { $dynamicList = "We have no products listed in our store yet"; } mysql_close(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Rapid Codes - Get it now!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<?php include_once( "template_header.php");?>
<div class="container">
<div class="jumbotron">
<p>Newest Additions</p>
<?php echo $dynamicList; ?>
</div>
<div class="row">
<div class="col-md-3">
<p>P1</p>
</div>
<div class="col-md-3">
<p>P2</p>
</div>
<div class="col-md-3">
<p>P3</p>
</div>
<div class="col-md-3">
<p>P4</p>
</div>
<div class="clearfix visible-lg"></div>
</div>
<?php include_once( "template_footer.php");?>
</div>
</body>
</html>
Apologies for the messy code. Any help would be greatly appreciated. Cannot get my head around this one.
instead of doing .products { float: left; }, try .products { display: inline-block; }
floating elements takes them out of the normal DOM structure (you can imagine these elements as if they are on a different layer above the normal DOM). In your second image, you can see that the jumbotron is smaller because it doesnt recognize that the table elements are inside of it (since they are "floated" above the jumbotron now) so it defaults to its normal size when it contains no contents.
by using display: inline-block, the elements keep their block space but do not take up the whole horizontal space they normally would, but only the space they need, which allows for other elements to be placed next to them.
Related
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Data Retrieve</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.css">
<style>
#demo{
background-color:purple;
color: white;
width: 100%;
}
#home{
width: 45px;
}
#back{
width: 25px;
}
#header{
width:100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<table id="info_table" class="table">
<tr>
<td id="header">
<p align="center"><span style="float: left"><img src="back.png" id="back"></span><b>মন্ত্রণালয়</b><span style="float: right"><img src="home.png" id="home"></span><span style="float: right"><img src="refresh.png" id="refresh"></span></p>
</td>
</tr>
<tr>
<td id="demo" align="center"><td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
<script>
var bn_num = new Array('০','১','২','৩','৪','৫','৬','৭','৮','৯');
function bn_num_convert(num){
//console.log(num.length);
var bn_val = '';
for(i=0;i<num.length;i++){
//console.log(num[i] + '/' + bn_num[num[i]]);
bn_val = bn_val + bn_num[num[i]];
}
//console.log(bn_val);
return bn_val;
}
$.getJSON("http://localhost/directory/ministri.json",function(obj){
var info ='';
//alert(obj.data.length);
var count = obj.data.length;
document.getElementById("demo").innerHTML ='মোট মন্ত্রণালয় ('+bn_num_convert(count.toString())+')';
var count = obj.data.length;
$.each(obj.data,function(key,value){
info += '<tr>';
info +='<td>'+value.sitename_bn+'<span style="float: right"> > </span>'+ '</td>';
info += '</tr>';
[This is the corresponding output of the code.][1]
});
$('#info_table').append(info);
});
</script>
Firstly here purple background color doesn't get the full wide.if i inspect the background there shows an empty td which cause the problem.if i delete the empty td then i get perfect result.but there is no empty td in my code.plz see the code and show me the error.
Secondly there is no horizontal line at the end of the output result.why last line doesn't get horizontal line?
You are not closing the td, thats why empty td is appending.
<td id="demo" align="center"></td>
Close the td like in above code
and remove margin and padding as other posts suggested in case if you want full width till ends.
Set body margin paddding to 0px
body {
padding: 0px;
margin: 0px;
}
Just put in demo id td, it will show.
See thishttps://jsfiddle.net/v6mwpz89/3/
Cheers!
This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
Closed 5 months ago.
I like to make the header full width across the screen, the wrapper is 1052px and want to extend that while the logo and the menu stay in place.
Is there a way to expand the inner div to the full screen width in a responsive layout?
How can I fix this with css keeping in mind that "menu" is fixed at top and "full width" div must scroll normally? I think I cannot use absolute positioning. I hope it's clear, otherwise I'll try to improve the question.
here is the header.php code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class() ?>>
<div id="wrapper">
<div id="inner-wrap">
<div id="header" class="fullwidth">
<div id="logo">
<?php if (!option::get('misc_logo_path')) { echo "<h1>"; } ?>
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>">
<?php if (!option::get('misc_logo_path')) { bloginfo('name'); } else { ?>
<img src="<?php echo ui::logo(); ?>" alt="<?php bloginfo('name'); ?>" />
<?php } ?>
</a>
<div id="header-amp"></div>
<?php if (!option::get('misc_logo_path')) { echo "</h1>"; } ?>
</div><!-- / #logo -->
<nav class="main-navbar" role="navigation">
<div class="navbar-header">
<?php if (has_nav_menu( 'primary' )) { ?>
<a class="navbar-toggle" href="#menu-main-slide">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<?php wp_nav_menu( array(
'container_id' => 'menu-main-slide',
'theme_location' => 'primary'
) );
} ?>
</div>
<div id="navbar-main">
<?php if (has_nav_menu( 'primary' )) {
wp_nav_menu( array(
'menu_class' => 'nav navbar-nav dropdown sf-menu',
'theme_location' => 'primary'
) );
} ?>
</div><!-- #navbar-main -->
</nav><!-- .navbar -->
<div class="clear"></div>
<div class="clear"></div>
</div><!-- / #header-->
<div id="main">
#inner-wrap{
width: 100vw; /* make it 100% of the viewport width (vw) */
margin-left: calc((100% - 100vw) / 2); /* then remove the gap to the left of the container with this equation */
}
The left margin equation is the key to get full width inside a container.
First, I get the total size of the container gap in a negative number (so the margin can be negative): 100% of the container - window size ( 100% - 100vw).
And last, I divide in half (the result above is for both left and right sides, so I just need the size of the left).
In summary, I'm making the inner-wrap width the same as the viewport width, then pull it to the left without using position:absolute or position:fixed, which would break the layout if you need more content below it.
You may need to adjust the parent if the 100% of the calc doesn't get the right size. position:relative can help.
#inner-wrap{
width: 100vw;
position: absolute;
height: 100%;
margin-left: 50%;
transform: translateX(-50vw);
}
This is another option for a full-width container using absolute positioning. The parent item must be set to position: relative;
I have a webpage which is the main index.html and another projects_imgs.html which will be the iframe src inside the index.html
Inside the projects_imgs.html there will be images. What I want to do is,
In index.html I want to add <a> tags that links to the images inside projects_imgs.html, so whenever the user clicks these links the iframe loads the clicked link that targets a specific image
get the idea?
So far here is the code of index.html:
<!-- Projects section -->
<div class="section projects-section" id="section4">
<div class="container-fluid">
<div class="row">
<div class="col-lg-9">
<iframe class="pull-right" width="85%" height="700px" src="projects_imgs.html" name="projects_gallery"></iframe>
</div>
</div>
<p>Images</p>
</div>
</div>
and projects_imgs.html:
<!DOCTYPE html>
<html>
<head>
<title>MH-Shukri Projects Gallery</title>
<!--- Bootstrap CSS --->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--- Bootstrap Theme --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
</head>
<body>
<style>
body {
background-color: #34312C;
}
img {
position: fixed;
width: 100%;
height: 100%;
}
</style>
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="imgs/projects/Faf/1.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/2.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/3.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/4.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/5.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/6.jpg"/>
</div>
</div>
</body>
</html>
To implement such a logic in html only is not possible i think.
I suggest you to use PHP to implement this logic. Here is a small example:
index.html
<html>
<body>
Images: <br>
Image 1 <br>
Image 2
</body>
</html>
These links call images.html with the parameter "image". As you can see, we set "image" to 1 or 2, depends on what the user is clicking on.
images.html
<html>
<body>
<?php
if($_GET["image"] == 1)
{
echo "<img src='Image1'/>";
}
if($_GET["image"] == 2)
{
echo "<img src='Image2'/>";
}
?>
</body>
</html>
In images.html you decide with an IF Statement. If it was 1, then you just call the with the Image 1. If 2....
You can use that to implement it with your iFrame. But keep in mind that you need a webserver who understands PHP to get this running!
Have a nice day!
I actually figured it out!
I do it like this:
function setURL(url){
document.getElementById('iframe').src = url;
}
<iframe id="iframe" src="index.html" width="50%" height="250px"></iframe> <br>
A01-FAF-1<br>
A01-FAF-2<br>
A01-FAF-3<br>
A01-FAF-4<br>
A01-FAF-5<br>
A01-FAF-6<br>
Just replace the images with some random google images link to test it.
The image being output from the session contained in the div with the id 'user_image' is not conforming to the size of the parent div.
I need it to be the size of the parent div. I have no idea why its happening?
<?php
session_start();
if(!isset($_SESSION["login_user"])){
header('location:adminLogin.php');
}
?>
<?php
session_start();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Admin Page</title>
</head>
<body>
<div class="container">
<div class="header"><img src="IMAGES/LOGO.png" alt="Music Search Logo" height="90" display:block; />
<div id="welcome_message"><h1>Welcome <?php echo $_SESSION["login_user"] .'<div id="userImage"> <img src="' . $_SESSION["user_image"] . '" alt="user image"></div>'; ?></h1></div>
<!--Logout-->
<form action="endSession.php" method="post" id="end_session">
<button type="submit" name="end_session" id="end_button">Logout</button>
</form>
<!-- end header --></div>
<div class="content">
<h1 class="top-text"> Admin Page</h1>
<!--Search Form-->
<form action="adminSearchMusic.PHP" method="get" class="searchform cf">
<input type="text" id="searchMusic" name="searchMusic" placeholder="Search by Name/Genre/Year/Label" required>
<button type="submit" id="searchBTN" name="searchBTN">Search</button>
</form>
<div class="admin-buttons">
<button class="addBTN" onclick="location.href='addRecord.php'">Add a Record</button>
<button class="addUserBtn" onClick="location.href='addUser.php'">Add a User</button>
<button class="addUserBtn" onClick="location.href='adminViewUsers.php'">View users</button>
</div>
<!--end search form-->
<!--Results Box-->
<div class="result-box-admin">
<?php
if(isset($_SESSION["login_user"])){
require('includes/dbconx.php');
$sql = "SELECT * FROM music";
$result = $con->query($sql);
//if it finds no matching data it informs the user and kills the DB connextion
if(mysqli_num_rows($result) == 0){
echo("<p>No matches found! </p>");
die;
}
echo'<table><tr><th>Artist</th><th>Album</th><th>Year</th><th>Genre</th><th>Album Art</th><th>Edit</th><th>Delete</th></tr>';
//while there are rows to return it will populate the table below
while($row = mysqli_fetch_array($result)){
echo '<tr>';
echo'<td>' .$row['artist'].'</td>';
echo'<td>' .$row['album'].'</td>';
echo'<td>' .$row['releaseYear'].'</td>';
echo'<td>' .$row['genre'].'</td>';
echo'<td>' .'<img class="pic" src="'.$row['image'].'">'.'</td>';
'<td>' .$row['aID'].'</td>';
echo '<td> Edit</td>';
echo '<td> Delete</td>';
echo'</tr>';
}//end while loop
echo'</table>';
//closes connection when no more rows
mysqli_close($con);
}
else{
header("location: adminLogin.php");
}
?>
</div><!--end results box-->
</div> <!-- end .content -->
<div class="footer">
<p>©Derek Sweeney </p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
And the css
#userImage{
max-width:120px;
max-height:90px;
overflow:hidden;
}
Better Way
just apply css to img tag. and not to other.
one way you can do this (inline html method):
<img src="IMAGES/LOGO.png" alt="Music Search Logo" style="max-width:100%; max-height:100%; display:block;" />
alternatively you can create a class (better way):
<img src="IMAGES/LOGO.png" class="logo-image" alt="Music Search Logo"/>
then create css:
.logo-image {
max-width:100%;
max-height:100%;
display:block;
}
notic I applied css only to image tag.
hope it works for you.
This worked
#userImage{
max-width:120px;
max-height:90px;
overflow:hidden;
}
#userImage img {
width: 100%;
height: auto;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm facing logo and menu bar alignment no my website.
how can i fix it? sharing images below.
I want to make changes as below image..
What HTML or CSS code that I should Write ?
Continuing our discussion from wordpress.stackexchange.com here and here, if I get it right, what you are trying to do is having the same menu you have when you resize the browser's window size to 1180px, where the logo goes to the center, but instead of having this only when you resize the window to 1180px, you want to have this type of disposal at all time, meaning having the 1180px menu as the site's default menu.
First
So in order to do this, we need to remove the current CSS for the default menu when the screen size is bigger than > 1180px. To do this, go to - style.css:1006 (meaning go to the file style.css line 1006), and remove the following CSS:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/style.css
#site-branding {
width: 20%;
padding-bottom: 5px;
min-height: 60px;
}
Second
Next thing we need to set the style for the menu when it gets at 1180px as the new default menu. In order to do this, go to: - responsive.css:48, an remove the media queries around the code, which currently the code it's something like this:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/css/responsive.css?ver=4.3.1
#media (max-width: 1180px) {
#site-branding {
float: none;
display: inline-block;
text-align: center;
padding-bottom: 5px;
max-width: 320px;
width: 100%;
}
}
And you need to remove the #media query or just put the code outside the #media query, to be only like this:
#site-branding {
float: none;
display: inline-block;
text-align: center;
padding-bottom: 5px;
max-width: 320px;
width: 100%;
}
Third and last
At last, fix the menu centering disposal, go to - style.css:4328 and remove the float:right; property from the id #menu:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/style.css
#menu {
float: right; /* <- REMOVE THIS LINE */
position: relative;
height: 100%;
}
With this being done, the supposed menu from the size 1180px will now become the main default menu. Good luck! :)
Use this CSS for the logo:
.site-logo {
position: absolute;
top:-55px;
left:50%;
margin-left: -150px;
}
You'll want to move the following HTML,
<a class="site-logo" href="http://www.norenge.com/">
<img src="http://www.norenge.com/wp-content/uploads/2015/11/Oranemart-accesspress_store-logo.png" alt="Capital's First Online Super Store">
</a>
to be an immediate descendant of the <section class="home_navigation" element. Then apply text-align: center; to that same section element and it achieves the look you're asking for.
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package AccessPress Store
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="mastheads" class="site-header" role="banner">
<?php if (as_before_top_header_enabled()): ?>
<div class="before-top-header">
<div class="ak-container clearfix">
<?php accesspress_ticker_header_customizer(); ?>
<?php
if (is_user_logged_in()) {
global $current_user;
get_currentuserinfo();
?>
<div class="welcome-user">
<span class="line">|</span>
<?php _e('Welcome ', 'accesspress-store'); ?>
<a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="my-account">
<span class="user-name">
<?php echo $current_user->display_name; ?>
</span>
</a>
<?php _e('!', 'accesspress-store'); ?>
</div>
<?php }
?>
<?php if (is_active_sidebar('header-callto-action')): ?>
<div class="header-callto">
<?php dynamic_sidebar('header-callto-action') ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<div class="top-header clearfix">
<div class="ak-container clearfix">
<!-- Cart Link -->
<?php
if (is_woocommerce_activated()):
echo accesspress_wcmenucart();
endif;
?>
<?php
if (function_exists('YITH_WCWL')) {
$wishlist_url = YITH_WCWL()->get_wishlist_url();
?>
<a class="quick-wishlist" href="<?php echo $wishlist_url; ?>" title="Wishlist">
<i class="fa fa-heart"></i>
<?php echo "(" . yith_wcwl_count_products() . ")"; ?>
</a>
<?php
}
?>
<div class="login-woocommerce">
<?php
if (is_user_logged_in()) {
global $current_user;
get_currentuserinfo();
?>
<a href="<?php echo wp_logout_url( home_url() ); ?>" class="logout">
<?php _e(' LogOut', 'accesspress-store'); ?>
</a>
<?php
} else {
?>
<a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="account">
<?php _e('LogIn', 'accesspress-store'); ?>
</a>
<?php }
?>
</div>
<!-- if enabled from customizer -->
<?php if (!get_theme_mod('hide_header_product_search')) { ?>
<div class="search-form">
<?php get_search_form(); ?>
</div>
<?php } ?>
</div>
</div>
<section class="home_navigation">
<div class="inner_home">
<div class="ak-container clearfix">
<div id="site-branding" class="clearfix">
<?php accesspress_store_admin_header_image() ?>
</div><!-- .site-branding -->
<div class="right-header-main clearfix">
<div class="right-header clearfix">
<!-- if enabled from customizer -->
<div id="toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="clearfix"></div>
<div id="menu">
<?php
if (is_page('checkout') && get_theme_mod('hide_navigation_checkout')) {
} else {
?>
<nav id="site-navigation" class="main-navigation" role="navigation">
<a class="menu-toggle">
<?php _e('Menu', 'accesspress-store'); ?>
</a>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container_class' => 'store-menu',
'fallback_cb' => 'custom_fallback_menu',
)
);
?>
</nav><!-- #site-navigation -->
<?php } ?>
</div>
</div> <!-- right-header -->
</div> <!-- right-header-main -->
</div>
</div>
</section><!--Home Navigation-->
</header><!-- #masthead -->
<div id="content" class="site-content">
>> this is my header.php code