I have the code below in a site but can't get to center everything within the main div (rightBarItems):
<div class="rightBarItems">
<?php
echo "<div class='similarTitle'>YOU MAY ALSO LIKE</div>";
while ($row3 = $result3->fetch())
{
echo "<div class='similarItems'>";
echo "<a href='items_descr.php?itemId=".$row3[id_item]."'><img class='similarImage' src='images/{$row3[thumb1]}.jpg'></img>";
echo "<div class='similarItemsText'>".$row3[name]."</div></div>";
}
?>
Then, here is my css:
.similarTitle {
font-family:"Century Gothic","Trebuchet MS",Helvetica,Arial,sans-serif;
font-size:15px;
text-transform:uppercase;
color:#3E3E3E;
}
.rightBarItems
{
margin: 0 auto;
width: 168px;
background: #F3EFE2;
padding: 10px;
float: right;
text-align: center;
height: 300px;
}
.similarItems {
float: left;
text-align:center;
margin: 0 auto;
padding: 5px;
}
.similarItemsText {
padding-right: 11px;
margin: 0 auto;
font-family: verdana,Helvetica,Arial,sans-serif;
font-size: 11px;
color: #666;
}
#similarImage {
margin: 0 auto;
border: 1px solid gray;
float: left;
}
Not everything gets centered... Any help? Thanks!!
* Adding some extra CSS I had forgot to put
Use:
text-align:center;
For all of these CSS classes: rightBarItems, similarTitle, similarItemsText, similarImage.
Try This in CSS
.rightBarItems{ text-align:center ; }
or
.rightBarItems > div { margin-left:auto ; margin-right:auto; }
Remove the float:right style from the rightBarItems div.
Well, firstly, you have different padding values for each class so that will first prevent them from aligning.
If you are ok with leaving a paragraph space between the texts then align=center should work with the paragraph tag instead of fixing the whole CSS code.
<p align="center"> Centered Text </p>
Related
I want to make some formatting within html with css to make my data presentable.
My php code is,
echo '<br><div class="items">' . "id" .'</div>';
echo '<div class="colon"> : </div>';
echo '<div class="details">' . "12" . '</div>';
My css is,
.items,.details,.colon {
display: inline-block;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.colon {
position: fixed;
left: 200;
}
.items {
position: relative;
margin-top: 5px;
padding: 3px 2px 0 8px;
width: auto;
display: block;
text-align: right;
margin : 0 auto;
font-size: 12px;
font-weight: bold;
}
.details {
font-size: 12px;
font-weight: normal;
text-align: left;
}
The output i am getting is,
And the output i want is,
Can anybody please suggest ?
Your looking for display:flex; "The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning."
Source # https://www.w3schools.com/css/css3_flexbox.asp
Html
<div class="flex-container">
<div class="item auto">auto</div>
<div class="item initial">initial</div>
<div class="item initial">initial</div>
</div>
Css:
.flex-container{background-color:#f4f7f8;overflow:hidden;display:flex;margin:1em}
.item{margin:1em;padding:.5em;width:110px;min-width:0;background-color:#1b5385;color:#fff;font-family:monospace}
.initial{flex:initial}
.auto{flex:auto}
Working codepen version https://codepen.io/amarinediary/pen/VwaVMza
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.
Ok. Here is my problem. Regardless when i do my while loop to get my list elements out to the page, my images wont center. I have tried using divs and classes but nope. I have tried closing the tags and using html and opening the PHP tags but no. Here is the code. Help plz.
<?php
while($row = mysqli_fetch_array($result))
{
$id = $row['id'];
$name = $row['name'];
$desc = $row['longDesc'];
$cost = $row['cost'];
$qty = $row['quantity'];
$img = $row['imageFilename'];
echo "<a href='paintings.php?id=$id'><li><img src='../../_/images/paintings/$img'><center><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
}
?>
Here is the css:
ul#items li{
color: white;
padding: 10px;
display: block;
font-family: 'Alef';
height: 180px;
text-align: center;
width: 150px;
vertical-align: middle;
background:url('../images/nav/navBg.jpg');
border: 1px solid #191919;
display: inline-block;
margin: 10px;
}
ul#items li:hover{
border: 1px solid #8E8E8E;
}
ul#items img{
margin-top: 15px;
display: block;
position: absolute;
border: 1px solid black;
max-width:149px;
height: 118px;
width: fit-content;
}
Help please.
IMAGE OF PROBLEM:
http://i.stack.imgur.com/arzL0.png
echo "<a href='paintings.php?id=$id'><li><img src='../../_/images/paintings/$img'><center><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
You're not center'ing the 'img' tag in your code. Try this instead:
echo "<a href='paintings.php?id=$id'><li><center><img src='../../_/images/paintings/$img'><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
There are many places where your HTML could/should be improved. A lot of it depends on context we don't have, which is understandable, but doesn't make it easy to give you a complete answer.
To make it work and still look like your screenshot, I would first:
Move the anchor tags into the list item
Remove any IDs that are within loops that do not change per loop iteration. An id is a unique identifier. This doesn't have anything to do with your question, but is important.
Then refer to this (INCOMPLETE) fiddle to get started:http://jsfiddle.net/aNgcb/
The css might look something like this:
ul#items {
list-style-type:none;
overflow:hidden;
}
ul#items li {
color: white;
padding: 10px;
font-family:'Alef';
height: 180px;
text-align: center;
width: 150px;
background:url('../images/nav/navBg.jpg');
border: 1px solid #191919;
float: left;
margin: 10px;
}
ul#items li:hover {
border: 1px solid #8E8E8E;
}
ul#items img {
border: 1px solid black;
height: 118px;
max-width: 100%;
}
You can't center a "block" element with text-align: center;
You can try making the img display: inline-block; or just leave them at the default inline.
display: inline-block;
There is no problem in the php, the problem its with css. try putting a div there and make it margin-left: auto and margin-right:auto.
If you want a good answer, try posting a jsfiddle example. www.jsfiddle.com
for some reason the text in my div doesn't go to the next line, i've tried several different css elements which don't seem to work.... word-wrap:break word, just jumbles the letters...
what i want is for one there is an extra word it goes down to the next line like it's supposed to
this is the div it's in
#top7 {
width: 150px;
height:auto;
margin: 5px;
display: block;
float: left;
word-wrap:break-word;
}
text that it's in
#p6 {
font-family: Myriad Pro;
margin: 1px;
font-size: 22px;
background-color:#540f45;
padding: 5px 5px 3px 4px;
margin:4px;
}
a {
text-decoration: none;
color: white;
text-align: right;
font-family: Myriad Pro;
}
here is the php function that retrieves the data from the database
<p id='p6'><?php echo "<a href='' "</a>"; ?></p>
this is all wrapped in these two id's
body {
background:#603e4f;
display: block;
}
#foursquare {
background-color:#603e4f; width: 290px;
display: block;
position: absolute;
}
There's no white space in the generated code, add some between elements (and not )
<p6 id="a2"><a href=http://classm8.net/retrieveclasslist.php?className=MATH100>MATH100</p6><p6 id="a2"><a href=http://classm8.net/retrieveclasslist.php?className=HINF200>HINF200</p6>
You have to use "display:flex" with word-wrap.
#top7 {
word-wrap: break-word;
display:flex;
}
Create a proper class and get rid of the p6 element. Obviously you'd use your database generated HTML. I just used your values as an example for the fiddle. Also since you're wrapping the elements in a p tag anyway the word break is pointless unless you expect data to be too long for a single tag. Paragraphs break to a new line automatically.
<div id="top7">
<p class="six">CSC110</p>
<p class="six">MATH100</p>
<p class="six">HINF130</p>
<p class="six">CSC110</p>
<p class="six">HINF200</p>
</div>
.six {
font-family: Myriad Pro;
margin: 1px;
font-size: 22px;
background-color:#540f45;
padding: 5px 5px 3px 4px;
margin:4px;
}
http://jsfiddle.net/calder12/5crqT/