I'm having trouble getting the height of my HTML divs to scale with the content of my PHP-generated table.
The table I'm using might change size so I don't want to set the height of the parent divs statically, but I can't seem to get it to work otherwise. I'm not floating anything.
The main script for this page is like this:
<div id="wrapper">
<div id="contentmain">
<div id="contentleft">
<?php
include ('get_table.php');
?>
</div>
<div id="contentright">
</div>
</div>
</div>
I thought that if #wrapper and #contentleft has height:auto or height unset that the table would decide the size of those divisions, but instead the table just sits on its own, extending into white space while the divs sit as thin lines at the top.
CSS:
#contentmain
{
width:940px;
height: 1164px;
background-color:aqua;
margin: 10px 10px 0px 10px;
}
#contentleft
{
width: 700px;
height:inherit;
background-color: #CAE2ED;
position:absolute;
}
table
{
border-spacing:8px;
font-family:Georgia, serif;
padding:0px;
box-shadow:1px 0px 5px 0px #000000;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
margin:0 auto;
background-color:white;
/*border-collapse: separate;
border-spacing: 0 10px;*/
}
Note: contentleft is resizing with the table properly, but contentmain and wrapper are not.
Any help appreciated!
Try this css:
#contentmain
{
width:940px;
height: 1164px;
background-color:aqua;
margin: 10px 10px 0px 10px;
display:inline;
}
#contentleft
{
width: 700px;
height:inherit;
background-color: #CAE2ED;
position:absolute;
display:inline;
}
table
{
border-spacing:8px;
font-family:Georgia, serif;
padding:0px;
box-shadow:1px 0px 5px 0px #000000;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
margin:0 auto;
background-color:white;
display:inline;
/*border-collapse: separate;
border-spacing: 0 10px;*/
}
have you tried using the clearfix method?
http://jsfiddle.net/zqtWL/
. clearfix{display:block;clear:both; float:none; width:100%;}
You can try this:
- set your #contenmain display to block.
- set your #contentleft and #contentright display to inline-block.
#contentmain { display: block; ...}
#contentleft { display: inline-block; ...}
#contentright { display: inline-block; ..}
Related
I'm using standard CSS/HTML for designing my website. Using a table for the navigation, I assign my "#nav table" with a width of 100% and my "#nav th" with a height of 50px.
My issue is that it's not actually setting itself to what I define. I had assumed it was as easy as just saying height: 50px but even when I define it as 0px it remains at 90.5px. In the HTML I did define my cells and what the table was, etc.
How can I fix this? Right now my site header is outrageously large because my table cells won't adjust to what I define them.
Using just PHP, HTML, and CSS.
CSS:
#nav table {
margin: 15px;
width: 100%;
position: fixed;
}
#nav th {
height: 0px;
border: 5px black solid;
padding: 25px;
text-align: center;
white-space: nowrap;
letter-spacing: 0px;
word-spacing: 5px;
}
HTML:
<center>
<table id="nav">
<tr>
<th><h1>LINK</h1></th>
<th><h1>LINK1</h1></th>
<th><h1>LINK2</h1></th>
<th><h1>LINK3</h1></th>
<th><h1>LINK4</h1></th>
<th><a href="LINK5><h1>LINK5</h1></a></th>
</tr>
</table>
</center>
<p>
Page Directory:
Using the code #nav table assumes an element with the ID "nav" with a table inside, and not a table element with the id "nav".
<style type="text/css">
/* For a table with the id of 'nav'. You could equally remove 'table'. */
table#nav {
margin: 15px;
width: 100%;
position: fixed;
}
#nav th {
height: 0px;
border: 5px black solid;
padding:0 25px;
text-align: center;
white-space: nowrap;
letter-spacing: 0px;
word-spacing: 5px;
}
th h1 {
margin:0;
}
</style>
<center>
<table id="nav">
<tr>
<th><h1>LINK</h1></th>
<th><h1>LINK1</h1></th>
<th><h1>LINK2</h1></th>
<th><h1>LINK3</h1></th>
<th><h1>LINK4</h1></th>
<!-- Don't forget to close all hrefs with a double-quote: -->
<th><h1>LINK5</h1></th>
</tr>
</table>
</center>
https://jsfiddle.net/cz1o8a2n/1/
Note that if you have an element inside of your th that is 90.5px tall, you will not be able to make the table header less tall using CSS (unless you use CSS to decrease the height of that element).
Edit: Consider using the more moder nav instead, with list-items. Plus, you'll have an easier time making your site responsive if you like. :)
<style type="text/css">
nav {
margin: 15px;
width: calc(100% - 30px);
position: fixed;
text-align:center;
}
nav ul {
padding-left:0;
list-style:none;
}
nav li {
display:inline-block;
border: 3px black solid;
padding:0 20px;
text-align: center;
white-space: nowrap;
letter-spacing: 0px;
word-spacing: 5px;
margin:2px 0;
}
</style>
<nav id="nav">
<ul>
<li>LINK</li>
<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
</ul>
</nav>
https://jsfiddle.net/cz1o8a2n/2/
HTML
You're missing a " for LINK5.
<center>
<table id="nav">
<tr>
<th><h1>LINK</h1></th>
<th><h1>LINK1</h1></th>
<th><h1>LINK2</h1></th>
<th><h1>LINK3</h1></th>
<th><h1>LINK4</h1></th>
<th><h1>LINK5</h1></th>
</tr>
</table>
</center>
CSS
If you want to apply css to a table with the id set to nav your selector needs to be table#nav. As for the table headings being larger than you like, the issue is the h1 tag inherently has a pretty big margin. This big margin is making your table headings larger than you'd like.
table#nav {
margin: 15px;
width: 100%;
position: fixed;
}
#nav th {
height: 50px;
border: 5px black solid;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
#nav th h1 {
margin: 0;
}
I am using the woo-commerce plugin within my Wordpress environment and there are category pages which I need to change the colour of a div background depending on which category are you in.
So I have like a banner across the top which is found in 'archive-product.php'
the div is named 'publicationsHeader'
I need it to change the background when you are category pages like so..
?product_cat=creative
I am a bit stuck on the best approach?
Here is my code:
<div class="publicationsHeader">
<section>
<div class="introLeft">
<h2>Publications</h2>
<h3 style="font-size: 1.2em;
color: #fff;
line-height: 28px;
padding-top: 20px">We write and produce current, practical and highly effective publications that teachers and pupils can use with immediate effect. All resources have been revised for the 2014/15 academic year.</h3>
</div>
<div class="introRight">
<a href="https://www.facebook.com/JaneConsidineEducation" target="_blank">
<button style="background-image:url(img/facebookIcon.png)"></button>
</a>
<a href="https://twitter.com/janeconsidine" target="_blank">
<button style="background-image:url(img/twitterIcon.png)"></button>
</a>
</div>
</section>
</div>
.publicationsHeader{
background-color: #e84b34;
box-sizing:border-box;
padding: 40px 0;
height: auto;
overflow:auto;
}
.publicationsHeader h2{
font-size:3em;
color: #fff;
text-shadow: 0px 4px 1px rgba(0, 0, 0, 0.3);
}
.publicationsHeaderLeft{
background-color: #fff;
box-sizing: border-box;
padding:40px 20px;
float:left;
width: 50%;
}
.publicationsHeaderLeft input{
border: solid #ccc thin;
width:95%;
font-size:16px;
padding: 10px 5px;
margin: 10px 0;
}
.publicationsHeaderLeft textarea{
border: solid #ccc thin;
width:95%;
font-size:16px;
padding: 10px 5px;
margin: 10px 0;
resize:vertical;
}
.publicationsHeadereft button{
background-color: #ec4a2c;
border: none;
color: #fff;
padding: 10px 20px 10px 20px;
font-size:16px;
}
.publicationsHeaderRight{
background-color: #fff;
box-sizing: border-box;
padding:40px 20px 160px 20px;
float:right;
width: 50%;
}
.publicationsHeaderRight li{
padding: 5px 0;
}
Why not just use the body_class() function? It adds a bunch of class names to your body tag that reflect the current page; in the case of WooCommerce it will add classes for .woocommerce, tax-product_cat and a class identifying that particular category, such as: .term-my-product-cat.
Using these you could style everything quite simply:
.publicationsHeader{
background-color: #e84b34; /* Default colour */
}
.term-product-cat-1 .publicationsHeader {
background-color: red; /* Change background for header for category 1 only */
}
.term-product-cat-2 .pulicationsHeader {
background-color:blue; /* Change background for category 2 */
}
You can read more about body_class() here.
First fetch the get data in a variable with some default:
$pcat = empty($_GET['product_cat']) ? 'default' : $_GET['product_cat'];
Then make your div like this:
<div id="publicationsHeader" class="<?php echo $pcat;?>">
</div>
Define a class in your css file like this:
.creative {
background: url(images/creative.png);
}
.default {
background: url(images/default.png);
}
You could do the following: check which category is currently displaying and give the $background variable a color accordingly. Like so:
if(is_product_category('creative')){
$background = "#ffffff";
}
Then call the $backgroundin the stylesetting of your div, like so:
<div id="publicationsHeader" style="background-color: <?php echo $background; ?>">Content goes here</div>
You can grep the parameter $_GET["product_cat"] and wrap that in a if-clause to set the css-class of publicationHeader via javaScript.
I'm trying to horizontally center an image. However it does not move from the left side of the page. This answer does not work in my case. What am I doing wrong?
#container {
width: 100%;
border: 2px yellow dashed;
height: 100px;
}
#profile-image img{
margin-left: auto;
margin-right: auto;
border: 2px orange solid;
}
mypage:
<div id="container">
<div id="profile-image">
<p><img src="<?php echo $data['profile_image_url'];?>" alt="me"></p>
</div>
to make any div or anything horizontally at center , common css approach will be,lets have a width and declare margin:0 auto;
#profile-image{
width:400px;
margin:0 auto;
}
Try this: http://jsfiddle.net/rua4d/2/
#container {
width: 300px;
border: 2px yellow dashed;
height: 100px;
display:table-cell;
position:relative;
vertical-align:middle;
}
#profile-image img{
margin-left: auto;
margin-right: auto;
border: 2px orange solid;
display:block;
position:relative;
vertical-align:middle;
text-align:center;
width:50px;
}
You just need to add display:block to your image's style. Images are inline elements, and inline elements ignore margins.
why cant this work?
#profile-image p { text-align: center; }
#profile-image img { display: inline; }
that way you won't need to specify the width.. if you want margins to work together with the text-align: center you would need inline-block instead:
#profile-image p { text-align: center; }
#profile-image img { display: inline-block; }
I am trying to show a lot of results at once (like 25) but my program cut the results around the 5th record having area space still available, the results are in a table
created dynamically but seems that the area doesn't expand accordingly.
<div id="contenido" class="contenido">
<div id="Tabs">
<ul style="cursor:pointer;">
<li id="li_tab1" onclick="tab('tab1')" >
<a>Últimas alertas</a> </li>
<li id="li_tab2" onclick="tab('tab2')"> <a>otras</a> </li>
</ul>
<div id="Content_Area">
<div id="tab1">
<p class="notas">Showing last alerts</p>
<table>
<tr>
<td style="color:blue">Alert</td>
<td style="color:blue">User</td>
</tr>
<?php
while ( $row = $result->fetch_array() ){
echo "<tr><td>".$row['DESCRIPTION']."</td>";
echo "<td>".$row['EMAIL']."</td>";
echo "<td>".$row['SUB_SECCION']."</td></tr>";
}
}
else
echo "error on query: ".$conx->error;
}//else
?>
</table>
</div>
<div id="tab2" style="display: none;">
<!-- We set its display as none because we don’t want to make this
tab visible by default. The only visible/active tab should
be Tab 1 until the visitor clicks on Tab 2. -->
<p>This is the text for tab 2.</p>
</div>
</div> <!-- End of Content_Area Div -->
</div> <!-- End of Tabs Div -->
</div>
CSS creates tabs, but for the moment only the first has the table the other just one line of text, but the table is inside this tab div
archivo css
.contenido {
color: black;/*#333*/
background-color: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
border: 1px solid #ccc;
width: 75%;/*678px;*/
height: 480px;
float: right;
display: inline;
}
#Tabs ul {
padding: 0px;
margin: 0px;
margin-left: 10px;
list-style-type: none;
}
#Tabs ul li {
display: inline-block;
clear: none;
float: left;
height: 24px;
}
#Tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 24px;
padding-left: 10px;
background: #f6f6f6;
z-index: 9999;
border: 1px solid #ccc;
border-bottom: 0px;
/* make the top left and top right corners of each tab rounded. */
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
/* end of rounded borders */
width: 130px;
color: #000000;
text-decoration: none;
font-weight: bold;
}
#Tabs ul li a:hover {
text-decoration: underline;
color:red;
}
#Tabs #Content_Area {
/* this is the css class for the content displayed in each tab */
padding: 0 15px;
clear:both;
overflow:hidden;
line-height:19px;
position: relative;
top: 20px;
z-index: 5;
height: 150px;
overflow: hidden;
}
p { padding-left: 15px; }
The problem is inside your CSS.
height: 150px; and overflow: hidden; in #Tabs #Content_Area could be factor.
Since you have overflow: hidden; set to "hidden", it could be a factor.
Try changing it to overflow:scroll; or overflow:visible; to see if that works, and/or changing the heights to a higher number for those IDs.
Try different variations.
I see a two possible causes:
The database query only returns 5 results
the DIV is not large enough, and even though the table ends up in,
say, 25 records, the first 5 are only displayed and the rest are
hidden by the boundaries of DIV.
It would help if you put some more PHP code or even the CSS of the #area.
This a joomla template I created from scratch.
It has some php, like all things in joomla, but please use css and html in your answers because php is not one of my strong skills.
The problem is the main menu.
In all the other browsers, the three elements in the header are pushing the menu out of the header div, putting it just below the bottom border where I want it to be.
My header height is on auto. I don't want to make it fixed and I don't want to use positioning.
I want to stick it under the header.
The ul li are dynamically created by joomla and I am using rtl direction.
This image shows the IE problem
And this image is how I want it
http://www.flickr.com/photos/60188007#N07/5493611091/
#wrap
{
margin:0 auto;
width:100%;
height:auto;
background-color:#540501;
min-width:1100px;
}
#headr
{
margin:0 auto;
width:99%;
height:106px;
min-width:1000px;
background-color:#2c0300;
border-top:1px solid white;
border-bottom:1px solid white;
border-left:2px solid white;
border-right:2px solid white;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius:20px;
direction:rtl;
}
#logo
{
margin:0 150px;
}
#bunner
{
float:right;
height:60px;
z-index:0;
}
/****************************************************************************
Maine Menu
****************************************************************************/
#maineMenu
{
width:73%;
height:auto;
min-width:900px;
z-index:11;
clear:both;
}
#maineMenu ul
{
list-style-type:none;
margin:0 auto ;
border:none;
}
#maineMenu ul li
{
margin:0 1px 0 0;
min-width:114px;
height:38px;
float:left;
text-align:center;
line-height:37px;
-webkit-transition: all 0.2s ease-out;
}
#maineMenu ul li a
{
text-decoration:none;
color:White;
font-size:1.2em;
border:none;
display:block;
}
#maineMenu ul li a span
{
padding:0 6px;
border:none;
display:block;
background-image:url("../images/buttonTopOnCenter.png");
background-repeat: repeat-x;
background-position:top;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
-o-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
}
/*************************************************************************************
Menu Hover
*************************************************************************************/
#maineMenu ul li:hover
{
background-color:#b9c119
background-repeat:no-repeat;
position: relative; top: -2px; left: -2px;
}
#maineMenu ul li a:hover
{
text-decoration:none;
color:White;
font-size:1.2em;
border:none;
display:block;
background-color:#b9c119;
background-repeat:no-repeat;
background-position:top right;
position: relative; top: -1px; left: -1px;
}
#maineMenu ul li a span:hover
{
padding:0 6px;
border:none;
display:block;
background-repeat: repeat-x;
background-image:url("../images/buttonTopCenter.png");
-moz-box-shadow: 3px 3px 5px #2C0300;
-webkit-box-shadow: 5px 5px 5px #2C0300;
box-shadow: 5px 5px 5px #2C0300;
position: relative; top: -1px; left: -1px;
}
<div id="wrap">
<div id="headr">
<div id="logo">
<jdoc:include type="modules" name="logo" style="xhtml"/>
</div>
<div id="topMenu">
<jdoc:include type="modules" name="topMenu" style="xhtml"/>
</div>
<div id="bunner">
<jdoc:include type="modules" name="banner" style="xhtml"/>
</div>
<div id="maineMenu">
<jdoc:include type="modules" name="menu" style="xhtml"/>
</div>
</div>
</div>
IE has some issues with z-index: 0; try starting at z-index: 1;,
#bunner
{
float:right;
height:60px;
z-index:1; /*change 0 to 1*/
}