I have created vertical and horizontal lines with the <hr> html tag, and have them inside a PHP script. The problem I have is that when you zoom on the site, the position of the lines move.
if you zoom (command key +/- on most browsers) the border i've made (with a div) stays in its place, but the horizontal and vertical lines do not.
Another thing I just want to mention is that I was unable to change the CSS script (stylesheet.css) because of the oscommerce 2.2 configuration.. It's a very old version of the oscommerce server and I know it would probably be a better option to upgrade the server and look into templates, but I would like to figure out my problem here.
So let's not talk about CSS since i'm not entitled to use it in this case.
Here is a snippet of the code:
<div style="width:680px;height:540px;border-radius: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;-o-border-radius: 20px;border:1px solid #a4a4a4;background-color:#FFFFFF;">
<hr style="width: 0.3px; height: 480px; background: #333; position: absolute; left: 660px; top: 315px;">
<hr style="width: 0.3px; height: 480px; background: #333; position: absolute; left: 890px; top: 315px;">
<hr style="width: 610px; height: 0.3px; background: #333; position: absolute; left: 468px; top: 463px;">
<hr style="width: 610px; height: 0.3px; background: #333; position: absolute; left: 468px; top: 643px;">
<table width="100%" cellspacing="0" cellpadding="15">
</div>
I suggeest to add position:relative to parent DIV and change HR width & height to %
Example:
<div style="width:680px;height:540px;border-radius: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;-o-border-radius: 20px;border:1px solid #a4a4a4;background-color:#FFFFFF;position: relative">
<hr style="width: 0.3px; height: 100%; background: #333; position: absolute; left: 33%; top: -9px;">
<hr style="width: 0.3px; height: 100%; background: #333; position: absolute; left: 66%; top: -9px;">
<hr style="width: 100%; height: 0.3px; background: #333; position: absolute; left: 0; top: 33%;">
<hr style="width: 100%; height: 0.3px; background: #333; position: absolute; left: 0; top: 66%;">
<table width="100%" cellspacing="0" cellpadding="15"></table>
</div>
Live: http://jsfiddle.net/ybBwT/
ok i got it problem is you use position:absolute and its in browser behaviour
and solution is give position:relative to its parent div and rearrange your hr position according to you it works i tried in browser here is your hr code i modified it according to me you modify it according to you and don't forget to give position relative to its parent div
<hr style="width: 0.3px; height: 480px; background: none repeat scroll 0% 0% rgb(51, 51, 51); position: absolute; top: 0px; left: 215px;">
<hr style="height: 480px; background: none repeat scroll 0% 0% rgb(51, 51, 51); position: absolute; width: 0.3px; right: 227px; top: 0px;">
<hr style="width: 610px; height: 0.3px; background: none repeat scroll 0% 0% rgb(51, 51, 51); position: absolute; top: 170px; left: 34px;">
<hr style="width: 610px; height: 0.3px; background: none repeat scroll 0% 0% rgb(51, 51, 51); position: absolute; left: 34px; top: 347px;">
That's happening because you have absolute positions in your style... Try blocking all the divs into one div and aligning the hr's with margins instead of "left" and "right"
Your <hr/> has absolute position, so it ok what it's stay in same place while other elements move.
You cannot open <hr/> after <table> tag.
This is wrong:
<table width="100%" cellspacing="0" cellpadding="2">
<hr style="width: 0.3px; height: 480px; background: #333; position: absolute; left: 660px; top: 315px;">
<hr style="width: 0.3px; height: 480px; background: #333; position: absolute; left: 890px; top: 315px;">
<hr style="width: 610px; height: 0.3px; background: #333; position: absolute; left: 468px; top: 463px;">
<hr style="width: 610px; height: 0.3px; background: #333; position: absolute; left: 468px; top: 630px;">
</div>
Need to be for example:
<hr/>
<hr/>
<hr/>
<hr/>
<table width="100%" cellspacing="0" cellpadding="2">
<tr>
<td>
<div>
</div>
.....
</td>
Better to use small png images instead of hr and make it background of <td>, or in last case of <table>
Related
I'm working on PHP to output the email content. I want to check the width size through on the style of the html tag that if the width size which is greater than 400, I want to change it to 306px.
Example:
style="width: 406px;
If the width value is greater than 300, I want to change it to:
style="width: 306px;
Have is the html content on my php page:
<div class="a3V ui-widget-content ui-resizable ui-resizable-resizing" style="width: 406px; height: 128px;"><div class="ui-resizable-handle ui-resizable-nw a3T" id="nw" style="left: -5px; top: -5px; cursor: nw-resize;"></div><div class="ui-resizable-handle ui-resizable-sw a3T" id="sw" style="left: -5px; bottom: -5px; cursor: sw-resize;"></div><div class="ui-resizable-handle ui-resizable-ne a3T" id="ne" style="right: -5px; top: -5px; cursor: ne-resize;"></div><div class="ui-resizable-handle ui-resizable-se a3T" id="se" style="right: -5px; bottom: -5px; cursor: se-resize;"></div><div class="ui-resizable-handle ui-resizable-n a3b" id="n" style="top: 0px; left: 0px; right: 0px; height: 1px; cursor: n-resize;"></div><div class="ui-resizable-handle ui-resizable-s a3b" id="s" style="bottom: 0px; left: 0px; right: 0px; height: 1px; cursor: s-resize;"></div><div class="ui-resizable-handle ui-resizable-w a3b" id="w" style="top: 0px; left: 0px; bottom: 0px; width: 1px; cursor: w-resize;"></div><div class="ui-resizable-handle ui-resizable-e a3b" id="e" style="top: 0px; right: 0px; bottom: 0px; width: 1px; cursor: e-resize;"></div><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google" style="width: 406px;height: 128px;"></div>
Here is the code:
$mailbox= $link->prepare("SELECT * FROM Drafts WHERE id = ?");
$mailbox->execute([$id]);
if ($mailbox->rowCount() > 0) {
$row = $mailbox->fetch(PDO::FETCH_ASSOC);
$draft_id = $row['email_id'];
$draft_attached_files = $row['attached_files'];
$draft_message = $row['message'];
if (!empty($draft_message)) {
$draft_message = base64_decode($draft_message);
}
echo '<body>
<div id="mobile-app-container" data-reactroot="" style="height: 100%; overflow-y: auto;">
<div id="app" data-test-id="mobile-app" class="a6" tabindex="-1">
<div class="eM" role="message" style="display: block; overflow-y: auto;">
<div id="eMB" style="overflow-y: auto;">
<div class="mSG">';
echo $draft_message;
if (!empty($draft_attachments)) {
echo $draft_attachments;
}
echo '</div>
</div>
</div>
</div>
</div>';
echo "</html><body>";
I have got no idea how to check if the value is greater than 300, the only things I can think of would be like this:
if (strpos($draft_message, 'width:400px;') !== false) {
$draft_message = str_replace('width:400px;', 'width: 335px;', $draft_message);
}
I would have to write hundred of lines for each different value which is not the right way to do.
Can you please show me an example how I can check on the tag for the width size that if the width size is greater than 400, then I want to replace it with 306??
Thank you.
Perhaps add this somewhere:
<style>
div {
max-width: 306px !important;
}
</style>
u can try and use max width set to 306px for that part
i have this HTML line here (its an echo from php)
echo "
<div class='rowItem'>
<div class='singleItem'>
<div class='itemImage' >
<img src= $arr3[$i] >
</div>
<div class='itemName'>$arr1[$i]</div>
<div class='itemPrice'><br> Php$arr2[$i]
<div class='orderButtonDiv'>
<a href='menu_burger.php'>ORDER</a>
</div>
</div>
</div>
</div>";
Here is the CSS I'm using
.itemImage{
height:100%;
width :100%;
}
.itemImage img{
width: 60%;
left: 0px;
right: 0px;
}
.itemName{
color: red;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 150%;
font-weight: bold;
margin-left: 40%;
margin-top: 4%;
}
.itemPrice{
color: black;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 110%;
margin-left: 41%;
position: absolute;
bottom: 25%;
z-index -1;
}
.singleItem{
width: 48%;
background-color: #e0dede;
border:1px solid red;
height: 150px;
position: relative;
z-index: -1;
}
here picture of the result
as you can see i am not able to resize the image here is the css code. Aside from that it is also overlapping some text
here is the image without the picture without the image
How can i resize the image properly that it will follow the the height of single item and at the same time equate its width to its height
Thank you very much
In my experience, a div with
background:url([imagepath]);background-size:cover;
is the best solution, the css property:
object-fit: cover;
Can help if you want to preseve the img aproach, but is less backwards compatible.
As for the overlaping text, read the documentation for z-index css property.
You will need to apply the background-image as an inline style. You can then add background-size: cover; onto .singleItem in css to control the background image size.
.itemImage{
height:100%;
width :100%;
}
.itemImage img{
width: 60%;
left: 0px;
right: 0px;
}
.itemName{
color: red;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 150%;
font-weight: bold;
margin-left: 40%;
margin-top: 4%;
}
.itemPrice{
color: black;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 110%;
margin-left: 41%;
position: absolute;
bottom: 25%;
z-index -1;
}
.singleItem{
width: 48%;
background-color: #e0dede;
background-size: cover;
border:1px solid red;
height: 150px;
position: relative;
z-index: -1;
}
echo "
<div class='rowItem'>
<div class='singleItem' style='background-image: url(\"{$arr3[$i]}\");'>
<div class='itemName'> {$arr1[$i]}
</div>
<div class='itemPrice'><br> Php{$arr2[$i]}
<div class='orderButtonDiv'><a href='menu_burger.php'>ORDER</a></div>
</div>
</div>
</div>";
I have been using PHP and ImageMagick for to generate a 3D preview of a canvas print (see image below).
There are options to change the edge type, depth, size etc which are AJAX calls to a PHP support file which re-renders the preview with new settings and I reload it into the DOM.
This is starting to overload our server when busy. So I thought I could do this in CSS3 and do all the preview rendering client-side instead.
Here's what I have so far:
<div class="wrapper">
<div class="inner">
<div>
<img src="http://lorempixel.com/200/200/nature" alt="Nature">
</div>
</div>
</div>
.wrapper {
perspective: 500px;
margin: 4em auto;
width: 37em;
}
.inner {
transform: rotateY(40deg);
}
.inner div {
width: 11em;
display: inline-block;
margin-right: 1em;
}
.inner img {
display: block;
height: auto;
max-width: 100%;
margin: 0 auto;
}
The problem I am having is wrapping the image around the edges like in the image above. How can I do this?
I have done a demo, with 2 elements holding the same image.
Just set the image origin on them accordingly to the dimension, and it will match.
.main {
width: 400px;
height: 300px;
border: solid 1px red;
background-image: url(http://lorempixel.com/400/300);
background-size: 0px 0px;
perspective: 500px;
position: relative;
}
.front {
position: absolute;
width: 360px;
height: 100%;
left: 40px;
top: 0px;
transform: rotateY(45deg);
transform-origin: left center;
background-image: inherit;
background-position: -40px 0px;
}
.side {
position: absolute;
width: 40px;
height: 100%;
left: 0px;
top: 0px;
transform: rotateY(-45deg);
transform-origin: right center;
background-image: inherit;
background-position: 0px 0px;
}
<div class="main">
<div class="side"></div>
<div class="front"></div>
</div>
I'm trying to build a page with a footer. It looks fine in 1600x900, but as soon as I scale down the footer moves to dead center and won't budge. Any suggestions would be appreciated
#Container{
width: 100%;
height: 100%;
position: absolute;
}
#Banner_Container {
position:relative;
width: 100%;
padding-bottom: 0.2%;
}
#Banner {
color: #FF7538;
font-style: oblique;
font-family: Courier New;
line-height: 1;
float: left;
}
#Index {
width: 80%;
background: rgba(250, 250, 250, 0.9);
border: 10px solid #ED9121;
border-style: outset;
padding-top: 2%;
float:left;
padding-bottom: 2%;
position: absolute;
margin-top: 30%;
min-width: 10%;
max-width: 80%;
}
#nav {
position: absolute;
margin: 0;
font-family: 'Roboto Condensed';
width: 15%;
float: right;
border: 5px solid #ED9121;
border-style: inset;
margin-top: 35%;
margin-left: 82%;
min-width: 5%;
max-width: 20%;
}
#footer{
width: 100%;
height: 50px;
position: absolute;
margin-top: 110%;
}
I was requested to do this in PHP
index.php
<?php
echo "<div id='Container'>";
include("banner.php");
include("navbar.php");
include("intro.php");
include("footer.php");
echo"</div>";
?>
So I have it separated like this
intro.php
<?php
echo "<div id='Index'>
<div id='Info'>
<img align='left' src='images/stock1.jpg'/>
<h2 align='left'>Welcome to East End Dental</h2>
<p>Ipsum</p><br><br><br><br><br><br><br><br><br><br>
<img align='right' src='images/stock2.jpg'/><br>
<h2 align='left'>Quality Guarantee</h2>
<p>Ipsum</p><br><br><br><br><br><br><br><br><br><br><br><br>
<div id='summary1'>
<center><h2>Our Dental Services</h2>
<img src='images/stock3.jpg'/></center>
<p>Ipsum<br><br></p>
</div>
<div id='summary2'>
<center><h2>Meet the Staff</h2>
<a href='staff.php'><img src='images/stock4.jpg'/></a </center>
<p>Ipsum.</p>
</div>
<div id='summary1'>
<center><h2>Contact Us Today</h2>
<img src='images/stock5.jpg'/></center>
<p>Ipsum</p><br><br>
</div>
</div>
</div>";
?>
footer.php
<?php
echo" <div id='footer'>
<center>
<p>Company Name 2016<br/>
Designed by <a href='mailto:email#gmail.com'>Name</a></p>
<a href='index.php'>Home</a> | <a href='services.php'>Services</a> | <a href='cerec.php'>CEREC®</a> | <a href='staff.php'>Staff</a> | <a href='contact.php'>Contact</a>
</center>
</div>";
?>
The problem is that you have the footer's margin-top set to 110% which will cause the footer to move around at different screen sizes. Percentage-based values are relative and change depending upon the parent container. I made a JSFiddle to show what this looks like with your code. The problem is faithfully reproducible by resizing the web browser.
To begin to fix this change your footer CSS. If you wanted a sticky/persistent footer that should would look something like this:
#footer{
width: 100%;
height: 50px;
position: absolute;
bottom: -50px;
}
I made a JSFiddle showing the solution so you can see this in action. This should address the footer floating to another location when the browser window resizes or is shown on a different device.
If you want the footer to just be at the bottom of the page and not stick there you would make this modification to the CSS:
#footer{
width: 100%;
height: 50px;
display: block;
clear: both;
}
This will just make sure the footer stays at the bottom of the content within the page and doesn't appear on the side of the previous element. Since you didn't specify if you were going for a stick footer I'm putting this in just to cover this other scenario.
In any case, hopefully this is the info you need to move forward on your website.
I have a simple PHP website, that uses PHP only to include another files in index.php, so you may consider it uses HTML only.
The problem is that when viewing a one page of the site in my laptop, it seems to display normally, while viewing it from my smartphone or PC makes it very strange.
Here is the link: strasbourgmeetings.org/rigaCloud/login: you will find two-color page there with a semi-transparent login form in the middle. Well the problem is that only my laptop displays it in the middle, but my PC and other devices are not.
Yes, I know there is a horrible CSS code, but, anyway, I would highly appreciate your help to place this block in the middle.
P.S.: I thought that top: 50%; left: 50% and margin: -25% 0 0 -25% will make it centered, but...
That is the HTML I use:
<div class="white"></div>
<div class="blue"></div>
<div class="heraldry"></div>
<!--</div>-->
<section class="container">
<div class="login">
<div class="loginOpacity"></div>
<h1>Login to RigaCloud</h1>
<form method="post" action="index.html">
<p><input type="text" name="login" value="" placeholder="Username or Email"></p>
<p><input type="password" name="password" value="" placeholder="Password"></p>
<p class="remember_me">
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Remember me on this computer
</label>
</p>
<p class="submit"><input type="submit" name="commit" value="Login"></p>
</form>
</div>
<!--<div class="login-help">-->
<!--<p>Forgot your password? Click here to reset it.</p>-->
<!--</div>-->
</section>
.white {
position: absolute;
top: 0;
width: 100%;
height: 50%;
}
.blue {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
z-index: -1;
}
.heraldry {
position: absolute;
top: 50%;
left: 50%;
width: 728px;
height: 428px;
margin: -214px 0 0 -364px;
}
.container {
margin: 80px auto 0 -25%;
width: 640px;
position: absolute;
top: 10%;
left: 50%;
}
.containerOpacity {
margin: 90px auto 0 -25%;
width: 640px;
position: absolute;
top: 10%;
left: 50%;
}
.login {
position: absolute;
left: 50%;
top: 50%;
//margin: 0 auto;
margin: 0 auto 0 -25%;
padding: 20px 20px 20px;
width: 310px;
}
.login:before {
content: '';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
}
.loginOpacity {
background: #000;
position: absolute;
width: 310px;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
margin: 0 auto;
padding: 20px 20px 20px;
}
Using auto for the left and right-margins will centre an element within its parent (together with other suitable css rules). However, your whole login form is within a section <section class="container"> which is absolutely positioned. You should concentrate on centring this container element, which will probably require removing its absolute positioning.
BTW Your login is also not centred if you reduce your browser's width on your laptop.
Give it a specific width and do margin: 0 auto;
This is my way of centering an element with no specific width.
You can use this method for text, images, buttons etc!
/* The HTML */
<div class="container">
<div class="content"></div>
</div>
/* The CSS */
.container {
float: left;
position: relative;
left: 50%;
}
.content {
float: left;
position: relative;
left: -50%;
}