Is there any nice clean way to put nesteded button elements of a div in center with style set to "table" ?
Ideally I do not want to contain the buttons within an additional div.
<div class="the-tabs">
<button class="tool-button dark_mini"><img src="Tools-icon.png"></button>
<button class="help-button dark_mini"><img src="Info-icon.png"></button>
<button class="save-button dark_mini"><img src="Zoom-in-icon.png"></button>
<button class="save-button dark_mini"><img src="Save-icon.png"></button>
<div id="the_preview" style="width:<?php echo $third_w;?>px;height:<?php echo $third_h;?>px;">
<div id="loading"><img src="images/loading.gif"><br/>Loading .... </div>
<img src="<?php echo $the_img;?>" width=" <?php echo $width_new;?>px" height=" <?php echo $height_new;?>px" id="preview" class="preview_color"/>
</div>
</div>
Not 100% sure what you mean but here goes...
.the-tabs {
text-align: center;
}
That will centre the buttons within the parent div. Is that what you mean?
JSFiddle
Related
I just create footer with 4 columns, and last column contain two rows of div. I want that last column to be left aligned so i use justify-content-start for the first row, and it works. But when i try it to second row, which is search bar with button, the justify-content-start doesn't work.
So I tried with flex-row, but it doesn't work either. Here is my web view right now.
I want that search bar and button are parallel with the visitor counter above. Any suggestions for me to fix this things up?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="col-lg-3 offset-lg-1">
<div class="row mb-4 justify-content-start">
<div class="card text-white visitor-card" style="width: 16rem;">
<div class="card-body">
<h5 class="card-title">Total Pengunjung :</h5>
<?php
$date = date("Y-m-d");
$pengunjunghariini = $this->db->query("SELECT * FROM visitor WHERE date='".$date."' GROUP BY ip")->num_rows(); // Hitung jumlah pengunjung
$dbpengunjung = $this->db->query("SELECT COUNT(hits) as hits FROM visitor")->row();
$totalpengunjung = isset($dbpengunjung->hits)?($dbpengunjung->hits):0; // hitung total pengunjung
$bataswaktu = time() - 300;
$pengunjungonline = $this->db->query("SELECT * FROM visitor WHERE online > '".$bataswaktu."'")->num_rows(); // hitung pengunjung online`
?>
<h5 class="card-title">
<?php echo $totalpengunjung ?>
</h5>
</div>
</div>
</div>
<div class="d-flex flex-row" style="border-color: white;">
<div>
<form class="d-flex" action="<?= base_url('Home/search'); ?>" method="post">
<input class="form-control me-2" type="search" placeholder="Cari artikel ..." aria-label="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
</div>
</div>
</div>
The problem might be that your container of that search bar might already have 100% width of its parent, so that any horizontal alignment wont be possible, since it has no space to move to.
This is a very common issue, and to quickly find out what is going on, you can use some CSS debugging techniques, as weird as it sounds.
The best example of this layout debugging technique is to set a border to your div that you need to be aligned somehow (or on its children).
.container {
border: 1px solid lime
outline: 1px solid lime
}
Note: outline might be better in some cases, since it is not increasing width/height of your element
If your container is really as wide as its parent, try width: fit-content on it, so it shrinks and leaves some space to be aligned to. Hope this helps, and to the future as well :-)
I have random white space inside my website.
My HTML (Laravel) is build like this:
<ul class="thumbnails" style="max-width: 100%;">
#foreach($img as $image)
<li class="span2 thumbnail">
<div class="overflow-hidden">
<img src="{{ Config::get('app.url') }}/{{ $image }}" />
</div>
</li>
#endforeach
</ul>
This is the output:
And every time I refresh the page, there is another white space.
How can I fix this?
You might want to read up on the grid system to understand why this is happening.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
In other words, if you look at bootstrap.css:
.row {
margin-right: -15px;
margin-left: -15px;
}
You can fix your code adding the row class to your <ul> element so you have:
<ul class="thumbnails row">
Or, just add the margin-left and margin-right properties.
am i correct that you want the thumbnails to line up 5 times, than start a new row of 5?
Then you have to build in a counter that closes a row, and start a new row:
Beware of code: i do not know laravel, went true documentation to write this, it could be wrong, main focus here is the idea i am giving you:
<ul class="thumbnails" style="max-width: 100%;">
<?php $i=0 ?>
#foreach($img as $image)
<li class="span2 thumbnail">
<div class="overflow-hidden">
<img src="{{ Config::get('app.url') }}/{{ $image }}" />
</div>
</li>
<?php $i++ ?>
#if ($i === 5)
</ul><ul class="thumbnails" style="max-width: 100%;">
#endif
#endforeach
</ul>
And be sure to read the answer by WEX, about the grid system.
i need to hide "right" column in "md position" on some pages (login, registration,contacts...)
and extend "main" to col-md-12.
my index.php
<div class="container">
<div class="row">
<div id="main" class="col-md-9 col-xs-12">
<jdoc:include type="component" />
</div>
<div id="right" class="col-md-3 col-xs-12">
<?php if($this->countModules('right')) : ?>
<jdoc:include type="modules" name="right" style="none" />
<?php endif; ?>
</div>
</div>
</div>
i think the easiest way is checking the option & view in template and act based on its value , for example :
$app = JFactory::getApplication();
if(in_array($app->input->get('view'), array('login', 'registration') && in_array($app->input->get('option') ,array('com_users')){
echo ' <div id="main" class="col-md-12 col-xs-12">';
}
else {
echo ' <div id="main" class="col-md-9 col-xs-12">';
}
and similar check for right menu
also you can create menu for login & registration & ... and dont add any module in this menu for the position that you want to hide
then you can check in template if there is noting in that position simply make main div full page width
There is also a CSS way. You can print the option and view (or also itemid to base selection on the selected menu item) from $_GET as classes of the <html> or <body> tags and then just hide what you want via CSS (display: none). As for extending the #main div to full width, you can just override the class on the #main when using this approach.
To show you an example, the CSS for hiding #right div and extending #main div could look like this (example for K2 component and posts' detail view, in your case just the html classes (.com_k2 and .view-item) would be different):
html.com_k2.view-item #right { display: none; }
html.com_k2.view-item #main.col-md-9 { width: 100% !important; }
The !important could not be needed, I'm not sure, would have to try it.
i need to align-center the images and the caption of the bootstrap carrousel
i use php code tho show random images from dataase
here is the i use to keep aspect ratio:
<div class="item">';
while ($resultados = $arte->fetch_assoc()) {
$title = utf8_encode($resultados['titulo']);
$id = $resultados['medidas'];
$tec = utf8_encode($resultados['tecnica']);
$img = $resultados['imagen'];
$home .= ' <img src="'.$img.'" style="background-size: cover;background-size: cover;width: auto;height: auto;min-width: 1%;max-height: 600px;max-width: 1000px;">
<div class="container">
<div class="carousel-caption">
<h1>'.$title.'.</h1>
<p class="lead">'.$id.'<br> '.$tec.'</p>
<a class="btn btn-large btn-inverse" href="/arte_objeto">Ver más</a>
</div>
</div>';
}
$home .= '</div>
this is the result:
http://prntscr.com/64h3vb
so align the caption too so it shows the image in the center of the carousel
i tried with:
background-position: center center;
but doesnt work
Use margin:0 auto; on the div's/images you'd like to center.
Use your "inspect element" to find the div's that are pulling to the left and then apply that css.
the problem was position:absolute; on .carousel img { so i removed it and
also added margin: 0 auto; to .carousel img {
I'm having the problem with: <div class='navbar_item navbar_item_active font_colaboratelight' id='nav_".$navbarlink_id."_active' style='float:left;color:#ffffff;'>
The elements inside float just fine... I've been trying everything, but the only way I'm fixing this is to set a width on the floated elements, which is very unpractical, because I don't know their contents...
Any ideas on how to fix this?
echo "<div style='width:960px;height:37px;margin-left:auto;margin-right:auto;'>
<div style='height:37px;background:url(/system/images/navbar/background/1.png);position:absolute;left:0px;right:0px;z-index:-1;'></div>
<div id='navbar_content' style='line-height:0px;width:960px;'>";
// get navbar shortcuts
$links = frontend_getnavbarlinks("sid_".$shop_id,$lang);
foreach($links as &$link){
$navbarlink_id = $link['id'];
$link_section_arr = explode(':',$link['section']);
$sectionlink_type = $link_section_arr[0];
$sectionlink_id = $link_section_arr[1];
if($link_section_arr[0] == 'c'){
$href = "/catalog/".$sectionlink_id."/";
}
echo "
<a href='".$href."' class='toggle_reconstruct'>
<div class='navbar_item navbar_item_active font_colaboratelight' id='nav_".$navbarlink_id."_active' style='float:left;color:#ffffff;'>
<div style='float:left;'><img src='/system/images/navbar/background_active/1_left.png'></div>
<div style='float:left;background:url(/system/images/navbar/background_active/1_middle.png);background-repeat:repeat-x;height:37px;'>
<div style='float:left;color:#E46F7B;font-size:15px;margin-right:6px;margin-left:6px;margin-top:12px;'>".$link['info']['label']."</div>
</div>
<div style='float:left;'><img src='/system/images/navbar/background_active/1_right.png'></div>
<div style='clear:both;'></div>
</div>
<div class='navbar_item navbar_item_inactive font_colaboratelight nav_btn_".$sectionlink_type.$sectionlink_id."' id='nav_".$navbarlink_id."_inactive' style='float:left;color:#ffffff;'>
<input type='text' value='".$link['does_expand']."' class='nav_expand_indicator' style='display:none;'>
<input type='text' value='".$navbarlink_id."' class='nav_section_id' style='display:none;'>
<input type='text' value='".$sectionlink_id."' class='nav_sectionlink_id' style='display:none;'>
<div style='padding-left:10px;padding-right:10px;height:37px;'>
<div style='float:left;color:#ffffff;font-size:15px;margin-right:6px;margin-left:6px;margin-top:12px;'>".$link['info']['label']."</div>
</div>
</div>
</a>
";
}
echo "
<div style='clear:both;'></div>
</div>
</div>
<div style='clear:both;'></div>
<div id='navbar_expand1'></div>";
try it by giving float : left to the div navbar_content
Try this code below.
It might be helpful to you..
'display: inline-block'
I figured it out, for some reason opera keeps setting my font-size to 0px, when not declared otherwise, so I had to set font-size:1px; where there was no font-size needed or set explicitly...