I have set up a page for printing an alphabetic index. Each printed page contains a 2 column layout. I am able to flow the content correctly but I need to add a header/footer for each page. I also need to be able to change the footer content for each page created. The footer will contain a disclaimer and page number. The problem is that the column content overlaps the footer. is there a way to restrict the 2 columns to a specific size per page so that the header and footer displays correctly
<!--CSS -->
#media print {
#content {
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
margin:5px;
#footer {
position: fixed;
bottom: 0;
}
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<!--Page Start -->
<body>
<div id="head">
<p>This is the document header</p>
</div>
<div id="content">
<?php
for ($x = 0; $x <= 40; $x++) {
echo "<table>";
echo "<tr>";
echo "<td>$x-Term <br /> Description</td>";
echo "<td>192</td>";
echo "<td>10955</td>";
echo "</tr>";
echo "</table>";
}
?>
<div id="footer">
<p>This is the document footer <?php echo $page number?></p>
</div>
</div>
</body>
Related
Below is the css and Html for the multiple card elements within a webpage and each card element contains a webpage, but this is not working for me. When I am trying to put texts at the place of webpage inside each card then its working fine.
I need the same layout as discussed above.
.container{
background-color:bisque;
position:relative;
}
.container-2{
width: 95%;
background-color:black;
padding: 20px;
color:white;
}
.card-body {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
}
.card-text{
background-color:black;
}
.row {
margin:0px -5px ;
}
column {
float: left;
width: 25%;
padding: 0 10px;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
padding: 16px;
background-color: #f1f1f1;
margin:5px 5px 5px 5px;
}
<div class="row">
#foreach (KeyValuePair<string, Asset> asset in assets)
{
<div class="column">
<div class="card" style="overflow-x: scroll; overflow-y: scroll; width: 18rem; height: 300px; ">
<div class="card-body" style="background-color:black">
<h5 class="card-title" style="border:solid">#x.Value.title</h5>
<p class="card-text" style="color:whitesmoke">#Html.Raw("<!DOCTYPE html>"+"<html>" + "<head>" + x.Value.head + "</head>" + "<body>" + x.Value.body + "</body>" + "</html>");
</p>
</div>
</div>
</div>
}
</div>
Here x is a List<Dictionary<key,value>> containing multiple data.
"But this is not working for me. When I am trying to put texts at the place of webpage inside each card then its working fine"
Let's begin with this concern, because you are using Bootstrap’s card component which has its own css if you want to implement your
custom css you have two way, either modify Bootstrap’s css file
which is not recomemded or define your custom css file and then use
that. The way you are trying will not work this way.
Easiest solution of your problem can be:
If I would you then might be solve this issue in following manner,
Web Site Dynamic Content From Backend:
[HttpGet]
public IActionResult BindDynamicContentToHtmlCard()
{
var convertedHtmlBodyList = new List<string>();
for (int i = 1; i < 10; i++)
{
StringBuilder sb = new StringBuilder();
var convertedHtmlBody = "";
sb.Append("<!DOCTYPE html>");
sb.Append("<html>");
sb.Append("<head>");
sb.Append("</head>");
sb.Append("<body>");
sb.Append("<h5 class='card - title' style='border: solid'><strong>TEST WEB SITE "+ i + " </strong></h5>");
sb.Append("<p>Simplest solution of the dynamic card generation.</p>");
sb.Append("<p>This is how you can generate dynamic Card</p>");
sb.Append("<p><strong style='color: red'>Note:</strong> For more details please check details: <a href='https://stackoverflow.com/questions/71167733/i-want-to-use-html-rawstring-where-string-contains-a-complete-html-webpage'>Details</a></p>");
sb.Append("</body>");
sb.Append("</html>");
convertedHtmlBody = sb.ToString();
convertedHtmlBodyList.Add(convertedHtmlBody);
}
ViewBag.bindToHtmlInView = convertedHtmlBodyList;
return View(); ;
}
Card HTML:
#{
ViewData["Title"] = "BindDynamicToHtml";
}
<div class="row">
<div class="col-md-12">
#foreach (var item in ViewBag.bindToHtmlInView)
{
<div class="col-md-4">
<div class="card" style="overflow-x: scroll; overflow-y: scroll;">
<div class="card-body" style="background-color:white">
<p class="card-text" style="color:whitesmoke">
#Html.Raw(item)
</p>
</div>
</div>
</div>
}
</div>
</div>
Card Output:
Here you can get the card element without much css modifications. I hope that would help you to achieve your requirement.
I am having trouble formatting the position of my Nav. I just finished up a basic web-development course and am messing around on my own now (the code is NOT perfect).
I'm sort of trying to format the home page after another site, learning different ways of doing stuff, but I'm having trouble with my Nav1/Nav2 sections. I can't get them to have 0 spacing between the left edge of the page. I formatted everything with a min/max width so to expands nicely when I change the width of the page, but can't for the life of me get it to butt up to the left of the page.
Any help would be great.
Not sure how much to post on here but I'll put most everything I guess.
Here is the site: My Test Page
Index Page:
<?php
include ('top.php');
?>
<main>
<article class="indexIMGArea">
<figure>
<img class="indexIMG" alt="Site Logo" src="pictures/index-e-sports-betting.jpg">
</figure>
<h2>FIRST TIME USER?</h2>
<Table>
<tr>
<th>LIVE GAMES</th>
<th>MATCH DETAILS</th>
<th>CHAMPION ANALYTICS</th>
</tr>
<tr>
<td>Check out stats for your games</td>
<td>Find out the best builds</td>
<td>Add depth to your knowledge</td>
</tr>
<tr>
<td><img src="pictures/index-e-sports-betting.jpg" alt class="siteLogo"><span class="siteName">eSports Home</span></td>
</tr>
</Table>
</article>
</main>
<?php
include ('footer.php');
?>
</body>
</html>
CSS:
html {
background-color: #1f8ecd;
}
body{
padding: 0px;
margin: 0px;
}
/* ========================= Start of Index ==================================*/
.indexIMGArea{
position: relative;
width: 1080px;
margin: 0 auto;
padding: 10px;
}
.indexIMG{
display: block;
max-width: 350px;
margin-left: auto;
margin-right: auto;
}
.siteLogo{
max-height: 25px;
}
#index table{
width: 900px;
height: 300px;
margin: auto;
background-color: whitesmoke;
text-align: center;
}
/* ========================= End of Index ====================================*/
/* ========================= Start of Nav ====================================*/
.nav1{
margin: auto;
max-width: 1300px;
min-width: 1080px;
margin-bottom: -25px;
font-size: 1.5em;
padding: 0px;
}
.nav2{
background-color: #1d2e51;
text-align: left;
width: 100%;
font-size: 1.5em;
height: 40px;
margin-bottom:10px;
padding: 0px;
}
nav ol li{
display: inline-block;
list-style-type: none;
padding: 5px;
text-align: left;
width: max-content;
}
.navContainer1, .navContainer2{
margin:auto;
min-width: 1080px;
max-width: 1300px;
}
nav a:link, nav a:visited{
text-decoration: none;
padding: 5px;
}
.navTop a:link, .navTopRight a:link, .navTop a:visited, .navTopRight a:visited{
color: whitesmoke;
}
.navBot :link, .navBot a:visited{
color: #1f8ecd;
}
.navBot li:hover{
color:whitesmoke;
border-bottom: 3px solid whitesmoke;
}
.activePage{
border-bottom: 3px solid whitesmoke;
}
.navTop{
float: left;
}
.navTopRight{
float: right;
}
.navContainer1::after{
content: "";
clear:both;
display:table;
}
/* ========================= End of Nav ======================================*/
/* ======================== Start of Footer ================================*/
footer{
font-size: 0.8em;
padding: 2em;
text-align: end;
}
/* ======================== End of Footer ==================================*/
Nav1:
<nav class="nav1">
<div class="navContainer1">
<ol class="navTop">
<li><img src="pictures/index-e-sports-betting.jpg" alt class="siteLogo"><span class="siteName">eSports Home</span></li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ol>
<ol class="navTopRight">
<li><img src="pictures/index-e-sports-betting.jpg" alt class="siteLogo"><span class="siteName">eSports Home</span></li>
</ol>
</div>
</nav>
Nav2:
<nav class="nav2">
<div class="navContainer2">
<ol class="navBot">
<?php
print '<li class="';
if ($path_parts['filename'] == "index") {
print ' activePage ';
}
print '">';
print 'Home';
print '</li>';
print '<li class="';
if ($path_parts['filename'] == "home") {
print ' activePage ';
}
print '">';
print 'Home';
print '</li>';
print '<li class="';
if ($path_parts['filename'] == "home") {
print ' activePage ';
}
print '">';
print 'Home';
print '</li>';
print '<li class="';
if ($path_parts['filename'] == "home") {
print ' activePage ';
}
print '">';
print 'Home';
print '</li>';
?>
</ol>
</div>
</nav>
Top:
<?php
$phpSelf = htmlentities($_SERVER['PHP_SELF'], ENT_QUOTES, "UTF-8");
$path_parts = pathinfo($phpSelf);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test eSports Site</title>
<meta charset="utf-8">
<meta name="description" content="Test page for a potential eSports site">
<meta name="keywords" content="eSports">
<meta name="author" content="John DeMarche">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../appleBottomedJeans/css/custom.css" type="text/css" media="screen">
<?php
$debug = false;
$domain = '//';
$server = htmlentities($_SERVER['SERVER_NAME'], ENT_QUOTES, 'UTF-8');
$domain .= $server;
if ($debug) {
print '<p>php Self: ' . $phpSelf;
print '<pdomain: ' . $domain;
print '<p>Path Parts<pre>';
print_r($path_parts);
print '</pre></p>';
}
?>
</head>
<?php
print '<body id="' . $path_parts['filename'] . '">' . PHP_EOL;
include ('nav1.php');
print PHP_EOL;
include ('nav2.php');
print PHP_EOL;
if ($debug) {
print '<p>DEBUG MODE IS ON</p>';
}
print "<!-- End of top.php -->";
?>
I am not 100% sure I understand your problem. But, If I do, you want your Nav to be as close as possible to the left edge of the window.
So, what you currently have is this :
You have a space (in green in the picture) cause by the ol which usually let a place to the numeration (1. 2. 3. 4. ...). To remove the place, you simply have to add a paddling-left: 0 to your ol.navTop in css. You can do the same with your ol.NavBot which will result with this :
I hope it helped you!
By css tried me text-align: right
Or tar
dir = "rtl"
Pal css
Just force her
So
text-align: right! important;
! important This forces the application of the style
Building my first website, and learning HTML, CSS, PHP, MySQL as needed. I'd like a set of inline divs which are aligned to the left. However, if there's not enough room to fill the screen, I'd like for the entire block of inline divs to be centered. After much searching and research, I determined it was impossible with only CSS, due to the fact that the internal size of all the inline left aligned divs would have to be calculated before the auto margin of the centered containing div could be calculated. I ended up kludging it together with the use of a whole bunch of invisible inline "ghost" divs which make the last line of the inline divs appear as if it's left-aligned.
Now it looks like this, which is great. http://i.stack.imgur.com/Zmru7.png
I gave the fake divs a border, and now they're visible. http://i.stack.imgur.com/Zmru7.png
Firstly, is there an elegant solution to this aside from media tags which change the CSS depending on screen size? Secondly, is it possible to force it to center when there's only one line?
i.stack.imgur.com/ DjWaj.png
CSS: (stripped, if something seems missing let me know)
div.pmegaframe {
width: 100%;
margin: 0px auto; padding: 0px;
text-align: center; }
div.pfake {
display: inline-block;
vertical-align: top;
overflow: hidden;
margin: 22px; margin-top:0px; margin-bottom:0px;
width: 164px; height: 1;
border: none; }
div.pframe {
display: inline-block;
vertical-align: top;
overflow: hidden;
margin: 15px;
width: 164px;
border: 6px solid var(--header); }
/*div.pframe:hover {
border: 16px solid #B85843; }*/
div.pminiframe {
width: 160px;
margin: 0px; padding: 0px;
border: 2px solid var(--white);
background: var(--dark); }
div.pimageframe {
overflow: hidden;
width: 160px; height: 160px;
color: var(--accent);
background: var(--white); }
div.pwordsframe {
position: relative;
width: 160px; height: 280px; }
index.php (stripped)
<div class="pmegaframe">
<?php
$pquery = mysqli_query($db, "SELECT f_name, l_name, blurb FROM users");
$pnum = mysqli_num_rows($pquery); $id = 0; //Pull userdata
while ($id < $pnum) { //Collect userdata
mysqli_data_seek($pquery, $id); $prow = mysqli_fetch_row($pquery);
$image = "160px_profile_".$id; $name = $prow[0]." ".$prow[1];
$text = $prow[2];
$state = 0; $rating = 1;
$squery = mysqli_query($db, "SELECT ID, courseID FROM subjects WHERE userID=".$id); //Pull the user's subjects
$snum = mysqli_num_rows($squery);
include "pframe.php"; //Makes the userframe
$id += 1;
}
echo str_repeat("<div class=\"pfake\"></div>", 8);
//fills in the grid with invisible boxes
?>
</div>
pframe.php (also stripped):
<div class="pframe"> <!--The base grey outer frame-->
<a href="profile.php?user=<?php print $id?>" class="nocolor"> <!-- links it-->
<div class="pminiframe"> <!-- puts down the interior white frame-->
<div class="pimageframe"> <!--The upper half of the box-->
<img src="/profiles/<?php echo $image; ?>.png" alt="Profile image not found!"></div>
<div class="pwordsframe"> <!--The lower half of the box-->
<!-- *snip* This was the messy content of the lower half of the profile boxes. -->
</div>
</div>
</a>
</div>
I'm using wordpress and woocommerce and I'm having difficulty with the css on single product pages :
The red border should surround all the content like here : http://lebruloir.com/cafe-bistrot/
But when on single product page it is all messed up : http://lebruloir.com/boutique/test/
I'm pretty sure it is a really simple solution but I can't seem to find it.
the code of woocommerce.php (which is used to display content) PS : it is normal that there is a alone it is closing a div called from the header
Thank you so much
<?php get_header(); ?>
<div class="col span_5_of_8 transparent">
<div class="site-content">
<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
<div class="border"></div>
<?php woocommerce_content(); ?>
</div>
</div>
This is caused by the floating content inside the <div> with the border.
Try adding overflow: auto to .site-content.
.site-content {
font-family: 'Radley', 'Libre Baskerville', 'Fenix', serif;
color: #6B0001;
font-size: 110%;
z-index: 1;
word-wrap: break-word;
padding: 4% 4% 0;
border: solid 1px #6B0001;
margin: 15px 15px 15px;
overflow: auto; /* ADD THIS */
}
I have the following issue.
I have 2 sets of checkboxes with a title for each. That title is supposed to have a grey background, then the checkboxes area should have no color in the background.
The issue is that if I put only 1 set of checkboxes with its title, the backgrounds work good.
However, when I put the 2nd set of checkboxes, the checkboxes area of the 1st set has a grey background and seems to be inheriting the bg of the title of the 2nd set.
Here is the code. Any clue?
Thanks!
<div class="bgFilterTitles">
<h1 class="filterTitles">COLOR</h1>
</div>
<div class="boxes">
<?php
$colors = $con -> prepare("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1 ASC");
$colors ->execute();
while ($colorBoxes = $colors->fetch(PDO::FETCH_ASSOC))
{
echo "<input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'> ".$colorBoxes[color_base1]."</font><br />";
}
?>
</div>
<div class="bgFilterTitles">
<h1 class="filterTitles">PRICE</h1>
</div>
<div class="boxes">
<?php
$prices = $con -> prepare("SELECT DISTINCT price FROM item_descr ORDER BY price ASC");
$prices ->execute();
while ($priceSort = $prices->fetch(PDO::FETCH_ASSOC))
{
echo "<input type='checkbox' class='regularCheckbox' name='price' value='".$priceSort[price]."' /><font class='similarItemsText'> ".$priceSort[price]."</font><br />";
}
?>
</div>
Here are the CSSs used:
.boxes {
width: 160px;
float: left;
padding: 10px;
border: 1px solid #C6C6C6;
clear: both;
}
.filterTitles
{
background-color: #F1F1F1;
font-family: Arial,Helvetica,Verdana,Sans-serif;
font-size: 11px;
font-weight: normal;
color: #333;
text-transform: uppercase;
padding: 4px;
border: 1px;
border-color: #C6C6C6;
border-top-style: dotted;
}
I'm not sure if I understood the problem correctly, is this what you were trying to do?
http://jsfiddle.net/mdLVG/
In that case you need to add clear:both; to your .filterTitles CSS class.