I want to find a way to make hexagons be a good looking container for text at all window widths. At this point it only looks alright at a few window widths. I'd like to make it so that I can have code that will only show at the good width then hide itself when the screen width changes to a new range so that a new piece of code that does look good can take its place. How am I to do this?
My php code:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css"href="css/styleshexagon.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<?php
//for Medium screen width
print"<div class = \" d-none d-md-block d-lg-none\"\>\n";
$numHexes=3;
for($i = 0;$i<$numHexes;$i++)
{
print"<div class=\"hexagon \">\n";
print" <span class=\"text\">XYZ</span>\n";
print" </div>\n";
}
for($i = 0;$i<$numHexes;$i++)
{
print"<div class=\"hexagon \" style = \"
margin-left:auto ;
margin-bottom: auto;
\">\n";
print" <span class=\"text\">XYZ</span>\n";
print"</div>\n";
}
print"</div>\n";
//for Small screen width
/*Code for that goes here*/
?>
</body>
</html>
My SASS code:
$hex-size: 300px;
$hex-height: $hex-size / sqrt(3);
$hex-color: #C6538C;
.hexagon {
position: relative;
display:inline-block;
width: $hex-size;
height: $hex-height;
background-color: $hex-color;
margin: $hex-height/2;
margin-left:auto;
margin-bottom:auto;
left:-10px;
}
.hexagon .text {
position: absolute;
top: -80px;
left: 0;
font: 12px sans-serif;
color: #ff00ff;
width: $hex-size;
height: $hex-height;
text-align: center;
overflow: hidden;
line-height: $hex-height;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: $hex-size/2 solid transparent;
border-right: $hex-size/2 solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: $hex-height/2 solid $hex-color;
}
.hexagon:after {
top: 100%;
left: 0;
width: 0;
border-top: $hex-height/2 solid $hex-color;
}
It seems your asking for a few different things here. Displaying only certain elements at certain screen sizes, and formatting elements so they are suitable for most if not all screen sizes.
#media (max-width: 700px) {
.mydiv {
width: 100%; /* adds full width to mydiv which is best for mobiles */
display: block; /* displays mydiv as a block */
}
.mydiv-2 {
display: none; /* Doesn’t display mydiv-2 at screen sizes upto 700px */
}
}
Note that you can use both max-width and min-width
Hope this helps!
One possible solution is to use the #media CSS rule Which can apply different styling based on different display media. In your case, to customize based on screen size you could use the min-width and max-width properties.
This example would hide someElement if the screen was smaller than 200 pixels wide.
#media min-width: 200px {
someElement {
display: none
}
}
Related
I have used PHP require function to link my header and footer style.css to all my other pages however the other pages also have their own specific CSS files but when I make a change to them it doesn't have an effect but I know that the style on the pages is being provided because they are the only pages with that specific style and it only deletes it if I remove the CSS link to them. Any suggestions as to why this is? I want to add CSS to these pages but its not being affected.
<?php
require_once "../addons/header.php";
?>
<link rel="stylesheet" href="Messages-inbox.css" type="text/css"/>
I used require for the header CSS and then the html link for the pages own unique CSS but I noticed the changes I make to each of the CSS files only happens if I rename the file after each change not sure why its like this
.secondarynavi
gation-messages a:hover {
color: #fd886b;
border: 1px solid #fd886b;
font-weight: bold;
}
.secondarynavigation-messages a:hover::before {
width: 100%;
}
.secondarynav-messages ::after {
content: "";
display: table;
clear: both;
}
.secondarynavigation-messages a::before {
content: "";
display: block;
height: 5px;
background-color: #fd886b;
position: relative;
top: 40px;
width: 0%;
transition: all ease-in-out 250ms;
}
.messages-nav-line {
width: 100%;
background-color: #e6e6e1;
padding: 1px 0px;
position: relative;
z-index: -1;
top: 10px;
}
this is the CSS for the page I'm working on and if I delete this CSS from the page it doesn't do anything to the webpage the effect only takes place when I remove the link to this CSS but this is the only page with this specific CSS
As an option you can prevent your css files from being cached by adding a query string with a random number.
Try somehting like this where you call your css file
<link rel="stylesheet" href="Messages-inbox.css?ver=<?php echo(mt_rand(1,500));?>" />
I am trying to make a webpage which displays rectangles of different sizes in a grid.
The code below works to display 3 rectangles all height: 50px and width equal to $rectangleWidth = "200px".
<html>
<head>
<style>
<?php
$rectangleWidth = "200px";
?>
.grid-container {
margin: auto 1fr;
max-width: 8000px;
display: grid;
grid-template-columns: 400px
}
.grid-container div {
border: 1px dashed gray;
text-align: center;
padding: 12px;
}
.pre { display: inline; }
<?php echo ".rectangleRed {
height: 50px;
width: " . $rectangleWidth . ";
background-color: #ff1a1a;
float: left;
margin-right: 0px;
}";
?>
</style>
</head>
<body>
<div class="grid-container">
<?php
for ($x = 0; $x < 3; $x++) {
echo '<div><pre class="rectangleRed"></pre></div>';
}
?>
</div>
</body>
</html>
I have an array with three different widths $rectangleWidths = ["100px", "200px", "300px"]. I am struggling to make the rectangles change size according to the widths.
I tried to put the CSS code for .rectangleRed { } into a php block with the width as a variable so that the width of the rectangle is redefined each increment of the loop. This didn't work. The CSS code was displayed on screen instead of redefining the width of the rectangle. Here is the code from my attempt:
<html>
<head>
<style>
<?php
$rectangleWidths = ["100px", "200px", "300px"];
?>
.grid-container {
margin: auto 1fr;
max-width: 8000px;
display: grid;
grid-template-columns: 400px
}
.grid-container div {
border: 1px dashed gray;
text-align: center;
padding: 12px;
}
.pre { display: inline; }
</style>
</head>
<?php
for ($x = 0; $x < 3; $x++) {
$rectangleWidth = $rectangleWidths[$x];
echo "<style><head>.rectangleRed {
height: 50px;
width: \"" . $rectangleWidth . "\";
background-color: #ff1a1a;
float: left;
margin-right: 0px;
}</style></head>";
echo '<body><div class="grid-container"><div><pre class="rectangleRed"></pre></div></div></body>';
}
?>
</html>
My only guess for why this doesn't work is that maybe I incorrectly used the , , and tags. I'm not sure how I could do this differently to make it work.
I looked at similar questions including Apply CSS Styling to PHP output and How to add CSS styles to a PHP code within a loop?. The solutions for those questions did not resolve my issue.
I want to show this panel or modal in html / css but i cant show it because i have
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
and when i remove that link the modal will show but when it is there the modal does not show.
P.S I cannot remove that link because all of my design will be removed or will not be visible so how can i show that modal without removing that link here is my css
style
<style type="text/css">
body {
/* general styles */
padding: 30px;
font-family: 'Open Sans', sans-serif;
}
/* overlay styles, all needed */
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 10;
}
/* just some content with arbitrary styles for explanation purposes */
.modal {
width: 300px;
height: 200px;
line-height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #f1c40f;
border-radius: 5px;
text-align: center;
z-index: 11; /* 1px higher than the overlay layer */
}
.content {
margin: 30px;
}
h1 {
font-family: 'Federo', sans-serif;
}
</style>
my div
<div class="overlay"></div>
<div class="modal" id="modal"><?php echo $row['id']; ?> <?php echo $row['additional_info']; ?></div>
This doesn't show the dialog because the modal class is also used by Bootstrap.
If you change the line <div class="modal" id="modal"> to <div class="mymodal" id="modal"> you will see that it now appears. Be sure to also update your class name in your css as well.
I am using dompdf to generate letters which I want to brand with various different companies branded paper. To do this I'm getting a background image via css. See example image at bottom. I then set appropriate margins to fit the content I want to write out into the white space. However I just want this letterhead to display on the first page only. At present it is repeating onto each page. My css looks like:
<html>
<head>
<meta charset="utf-8">
<title>{$pdf.title}</title>
<style type="text/css">
#page {
size: A4;
margin:0;
padding: 0;
}
body {
padding: {$branding.page_margin_top}cm {$branding.page_margin_right}cm {$branding.page_margin_bottom}cm {$branding.page_margin_left}cm;
font-size: 7pt;
font-family: helvetica !important;
background-image: url('{$base_url}pd-direct.png');
background-position: center center;
background-repeat: no-repeat;
font-size: 10pt;
}
#postal-address {
margin: 0cm;
margin-left: {$branding.address_offset_left}cm;
margin-top: {$branding.address_offset_top}cm;
margin-bottom: {$branding.address_offset_bottom}cm;
font-size: 10pt;
}
#date {
font-weight: bold;
}
</style>
</head>
<body>
<div id="page-body">
<div id="content">
{if $pdf.postal_address}
<div id="postal-address">
{$pdf.postal_address|nl2br}
</div>
{/if}
{$pdf.main_body}
</div>
</div>
</body>
</html>
How can I change this so the background image is only displayed on the first page output by dompdf?
See current html being rendered at: http://eclecticgeek.com/dompdf/debug.php?identifier=ccfb2785f8a8ba3e1e459cbd283ad015
You can put the letterhead as the background image in an div that overlaps the main content div and use z-index to organise the stacking order of the divs, so that background image will appears at the back.
This way, the background image will only show on the first page when you convert it to PDF using DOMPDF.
The CSS below works for A4#150dpi.
CSS
#page {
size: A4;
margin-top:0.5cm;
margin-bottom:0;
margin-left:0;
margin-right:0;
padding: 0;
}
body {
font-family: helvetica !important;
font-size: 10pt;
position: relative;
}
#overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url('http://www.showhousesoftware.com/pd-direct.png');
background-position: center top;
background-repeat: no-repeat;
z-index: -1;
}
#content{
padding: 3.5cm 0.50cm 5.00cm 0.50cm;
}
#postal-address {
margin: 0cm;
margin-left: 1.50cm;
margin-top: 0.00cm;
margin-bottom: 1.00cm;
font-size: 10pt;
}
#date {
font-weight: bold;
}
HTML
<body>
<div id="page-body">
<div id="overlay">
</div>
<div id="content">
......
</div>
</div>
</body>
So i have this problem. I want to center my flyout but here is the catch. I do not know what the size of the picture will be since it is a picture uploaded by a user. I also don't what the picture disappearing if i make the screen smaller. I tried to set position to be relative but then it pushes my images / texts behind the flyout down.
<div id="imageFlyout<?=$step['order']+1?>" class="popUpWrapper" style="display:none;position:absolute;top:100px;left:<script type="text/JavaScript">
int w = screen.width;
<?php $tempSize=getimagesize("guidebook_images/".$step['attachment']); if($tempSize[0] > 935){?>w/2<?php }else{?>w-<?php echo($tempSize[0]/2);}?></script>px;">
Centering in HTML is an easy two step process:
Give the parent:
text-align:center;
Give the element:
margin:auto;
Demo: http://jsfiddle.net/uriahjamesgd_73/kNFGj/22/
I used the CSS values VW (viewer width) & VH (viewer height) to specify that the flyout be a percentage of whatever the viewport is at a given instance. Hopefully this allows resizing of the viewport in mobile devices.
<!-- HTML -->
<div class="wrap">
<div class="product">
<span class="flyOut"></span>
</div>
</div>
/* CSS */
body { margin: 50px; }
.wrap { position: relative; }
.product { background-color: #555; position: relative; width: 100px; height: 75px; }
span.flyOut { display: none; background-color: #ddd; position: absolute; width: 50vw; height: 37.5vh; left: 100%; }
.product:hover > span.flyOut { display: inline-block; }