I had gone through w3school and read some online resource it's really difficult for me to understand html and css, please someone help me, I am beginner
I have created this form but problem is its not coming center and not looking nice, I want to see like this
Latitude Max
[ ]
Longitude Min [ ] [ ] Longitude Max
[ ]
Latitude Min
SUBMIT
Many people told me to use dreamviewer its gui based, but I am using centos so I like to understand and write html and css code manually.
See here is my code
<!DOCTYPE html>
<html>
<body>
<form action="search.php" method="post">
Latitude Max <input type="lat_max" name="RANGE[]"></br/>
</br/>Longitude Min <input type="lon_min" name="RANGE[]">
<input type="lon_max" name="RANGE[]">Longitude Max</br/>
</br/>Latitude Min <input type="lat_min" name="RANGE[]">
</br/><input type="submit" name="formSubmit" value="Submit" />
</form>
</body>
</html>
and this form I want to call inside php script please help me.. as I beginner I am taking more than 1 day to design one html page, hard but true.
I'm infinitely sympathetic to beginners, since I was one about a year ago. It takes time, and reading tons of code. I'll give you a "solution", but spend most of the time going over the CSS portion of the fiddle. If this is your first step, you still have much to learn about reading the values from the input fields, cleaning them up, and using them.
A large program begins with a single FIDDLE.
CSS
.container {
width: 600px;
border: 1px solid black;
}
.singleinput {
width: 100%;
text-align: center;
margin-top: 25px;
}
.doubleinput {
width: 100%;
margin-top: 25px;
border: 1px solid transparent;
overflow: hidden;
}
.minlong {
float: left;
margin-left: 30px;
}
.maxlong {
float: right;
margin-right: 30px;
}
.buttondiv {
width: 80px;
margin: 20px auto;
}
input {
width: 50px;
}
Suggestions:
Learn how to use jsfiddle - you can experiment for hour after hour without have to upload your files to a server. It has all the 'stuff' (jQuery) built in.
Read about div widths, and "floating" divs.
The "overflow: hidden" is a trick for floating divs within divs. You just have to memorize it.
Play with the margins and watch what happens.
Figure out was "margin: 0px auto;" means.
Best of luck! Do NOT give up!
I think it's a good idea to make actual labels for the input. Both for property HTML and for convenient styling. Also, it's handy to embed the separate chunks in divs:
<!DOCTYPE html>
<html>
<body>
<form action="search.php" method="post">
<div class="pos lat_max">
<label for="lat_max">Latitude Max</label>
<input id="lat_max" name="RANGE[]"/>
</div>
<div class="pos lon_min">
<label for="lon_min">Longitude Min</label>
<input id="lon_min" name="RANGE[]"/>
</div>
<div class="pos lon_max">
<label for="lon_max">Longitude Max</label>
<input id="lon_max" name="RANGE[]"/>
</div>
<div class="pos lat_min">
<label for="lat_min">Latitude Min</label>
<input id="lat_min" name="RANGE[]"/>
</div>
<input type="submit" name="formSubmit" value="Submit" />
</form>
</body>
</html>
After that you can style them:
/* Start by absolutely positioning every element so you can put them
where ever you want. This is not always the right thing to do, but I think
it is for pieces of the website where you have a very specific positioning
like this. */
div.pos {
width: 10rem;
position: absolute;
}
label {
display: block;
text-align: center;
}
.pos label,
.pos input {
position: relative;
width: 100%;
}
/* Center the container of the latitude inputs */
.lat_max,
.lat_min {
left: 50%;
right: auto;
}
/* Correct the position, because the left side of the container is centered */
.lat_max *,
.lat_min * {
position: relative;
left: -50%;
}
/* Lat-min at the bottom */
.lat_min {
bottom: 0;
}
/* lon in the vertical middle of the page */
.lon_min,
.lon_max {
top: 50%;
}
/* lon max on the right */
.lon_max {
right: 0;
}
I know, this is not exactly what you described, but you can continue finetuning it.
http://jsfiddle.net/s99hU/
One important note:
position: absolute now works within the page, but actually it looks at the closest parent that has position: absolute or position: relative.
position: relative doesn't move the element itself, so you can add that to the form. This will postion the inputs in the form, rather than spread over the page. After that, you can give the form an exact width and height (especially the height is needed, otherwise the form will collapse). The inputs will then be positioned inside the form, and the form itself is a self contained block, a building stone that can be embedded and positioned inside the page however you want.
Related
I'm not sure if this is possible but I'll ask anyway...
I'm trying to use the PHP shortcode in Advanced Custom fields
<?php the_field('charitynumber'); ?>
for our client to enter a number on the back end between 1-100. This will effect the height of a div showing/hiding an image based on a overall goal number for a charity. I'm thinking of setting it up like
<div style="<?php the_field('charitynumber'); ?>"><img src="/img_here.jpg"></div>
But cannot think of how to do it or an alternative way.
You need to put the shortcode in a valid style attribute. That means outputting the style name and appending the appropriate units. Also, if the_field() returns a string, you need to echo it.
<div style="height: <?php echo the_field('charitynumber'); ?>%;"><img src="/img_here.jpg"></div>
Give this a shot - you can
<div class="progress">
<div class="fillBar" style="height:calc(100% - <?php the_field('charitynumber'); ?>);"></div>
<img src="/img_here.jpg">
</div>
Then from there, you just need to style the bar. My example below has the progress bar locked to the bottom, and when you land on the page the progress bar will animate from the top down until it stops at the current percentage.
.progress{
position: relative;
width: 50px;
height: 200px;
}
.progress img{
width: 50px;
height: 200px;
position: absolute;
z-index: 1;
}
.progress .fillBar{
width: 50px;
bottom: 0;
height: 200px;
transition: height 0.3s ease-out;
}
I'm doing a grid with several elements in the sidebar of a WordPress site.
Each element of the grid is an image with a label below.
My goal is to have an image change:
the normal state of the image is to be green (#66be2c), then to the passage of mouse cursor will change it in the original image.
I tried using two physical images for the two states and overlaying them when needed. But this solution is very wasteful... load two different image files is not a good thing.
There's a way to achieve the same effect in a more efficient manner?
This is a part of my page code:
<td style="width: 150px; text-align: center;">
<p style="color: #66be2c;">
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" style="width:50px; height:50px" onmouseover="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png';" onmouseout="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png';">
</p
<p style="color: #66be2c;">.NET</p>
</td>
SOLUTION:
The correct way to do this is creating a Vector Image.
What you need is an image editor (such as Adobe Illustrator or others) and a C compiler (in particular two libraries for xslt)
These are two links that may be useful: SVG-Stacking_Guide and GitHub-SVG-Stacking-Download
I hope this can be of help to others who have the same problem.
It's a bad approach,
I'm not an expert in CSS or design but i think you should do :
<div class='overlay'></div>
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png" style="width:50px; height:50px">
</div>
And put a class in CSS like this :
.overlay { background-color: your_color; }
.overlay:hover { background-color: transparent; }
You can overlay a DIV with a lesser opacity on to the image, and then register the hover such that the covering div fades away and the real image appears.
<div class='cover'></div>
<img id='your-image' />
The CSS for the image would be as such:
.cover{
position: absolute;
top: 0;
left: 0;
opacity: .7;
background: green;
/* additional transition effects */
-webkit-transitions: all .3s;
-moz-transitions: all .3s;
transitions: all .3s;
}
.cover:hover{
opacity: 0;
}
Note that the covering div and the image should be in the same containing div relative to each other.
You could use the ::before selector to achieve this. This would mean not using any extra markup, and no javascript either. You'd really benefit from not using that inline css either. Take a look at CSS :: Before
HTML:
<table>
<tr>
<td>
<p>
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" class="image">
</p
<p>.NET</p>
</td>
</tr>
</table>
CSS:
td {
width: 150px;
text-align: center;
}
td p {
color: #66be2c;
}
.image {
width:50px;
height:50px;
position: relative;
}
.image::before {
content: "";
position: absolute;
height: 50px;
width: 50px;
top: 0;
left: 0;
background: green;
}
.image:hover::before{
display: none;
}
Basically, this targets your image with a class of .image and puts a 50 x 50px box on top of it with a green background. When you then move your mouse over it, it gets rid of the box.
You can see this working in this fiddle
I would like to align text to the left side and the input box to the right side.
This is how my site looks like and this is how it should be: [PICTURE REMOVED]
However, I did what I wanted by using div tag inside a div tag, so, if I give background colour to it, this is how it looks like:
The problem is, after green (on the grey side) I would like to echo errors. But because of the div width of the green area, I cannot do that. Error goes under input box. So, I wonder how can I be able to show form like I did in pictures but at the same time able to show errors on the right side, as well.
So, the script calls javascript plugin (http://jqueryvalidation.org). And this plugin add error right after input box, when it sees a problem. That's why I am not able to put the errors in another div tag.
error will appear in this class: "label.error". If there is way to make this class "don't care fixed width" in css. That would work.
Basicly what you want to do is create a container <div /> element and put 2 <div /> elements inside it. Since you didn't give any code, I can only give you an example:
#container {
width: 512px;
height: 506px;
border: 3px solid green;
}
#left {
float: left;
width: 250px;
height: 500px;
border: 3px solid red;
display: block;
}
#right {
float: left;
width: 250px;
height: 500px;
border: 3px solid blue;
display: block;
}
<div id="container">
<div id="left">
Form here
</div>
<div id="right">
Errors here
</div>
</div>
This is a UI/UX issue and surprisingly I'm shocked no one mentioned using a table with div's.
Because your picture was removed I can't really compare the UI, but to make this a simple answer for Text to the left and Textbox to the right see below.
(JS is just to show how it does work)
function updateText(){
var txtStrng=document.getElementById("txtTextbox1").value;
document.getElementById("lblText").innerHTML=txtStrng;
}
<form action="" >
<table width="100%" height="71" border="0">
<tr>
<td width="45%"><div align="left"><label id="lblText">Test</label></div></td>
<td width="55%"><div align="right">
<input type="text" name="txtTextbox1" id="txtTextbox1" value="Test" onkeyup="updateText();" />
</div></td>
</tr>
</table>
</form>
I want to have php generated navigation bar. It will consist of a left side with a list of links to the directories below the current one, a link to the index of the current directory, and the right side with a list of links to directories directly inside the current one.
tester1 > tester2 | index | tester4a tester4b
I would like to center this navigation bar around 'index', regardless of the length of the left or right. I know I could pad the arrays to equal length within the php that generates it, but I'm interested in whether or not I could do this with html and/or css.
Pretty easily actually. You may need to play with the widths to fit your context, but pretty straight forward.
<div class="main">
<div class="left">
stuff in here
</div>
<div class="center>
INDEX
</div>
<div class="right">
stuff in here too
</div>
</div>
CSS:
.main {
width: 410px;
text-align: center;
}
.main > div {
display: inline-block;
}
.left {
width: 175px;
text-align: right;
}
.center {
width: 50px;
text-align: center;
}
.right {
width: 175px;
text-align: left;
}
.main > div > * {
display: inline;
}
Fiddle HERE
Or you can try faking "float:center"
The image below explains what I am trying to achieve.
I need to show a user's car picture with the name under it. Each image/name pair should be in a DIV so as a user adds more cars, they move to the next line or page. Ideally the DIVs should be centered, more as a matter of aesthetics.
Using DOMPDF, I am generating a PDF from an HTML layout.
Unfortunately, DOMPDF's support for float is bad, even in the new 0.6.2 beta. I wonder if this layout I am proposing could be done without float. DOMPDF also does not support unordered lists.
I have tried some solutions using tables, but this also isn't good since DOMPDF does not allow cells to spill over to the next page.
I am using PHP 5/ codeigniter, and DOMPDF 0.5.2 (stable).
Any suggestions on how to get this layout are greatly appreciated!
Here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
img {width: 150px; height: 150px;}
h1 {font-size: 3em; text-align: center;}
h2 {text-transform: uppercase; width: 150px; text-align: center;}
div {margin: 10px; width: 150px;}
</style>
</head>
<h1>My Cars</h1>
<?php foreach ($cars as $row): ?>
<div>
<img src="<?php echo $row->cars_picture; ?>" />
<h2><?php echo $row->cars_name; ?></h2>
</div>
<?php endforeach; ?>
</html>
Thanks to #rkw and #manyxcxi for helping out.
At the end the only way of doing this without hacks was to use mpdf instead of DOMPDF.
I have the impression mpdf is a much better library, with better documentation. It has partial support for float, but it works very nicely and does exactly what I needed above.
If the boxes are all fixed width and you know the width of your PDF, then you can calculate the boxes per row and use a spacer div on the left of the bottom row to give you the offset you're looking for.
Without using float, you would have to use instead of : http://jsfiddle.net/AxZam/40/
relevant css:
body {
width:800px;
}
#content {
margin: 0px auto;
width: 600px;
text-align: center;
}
img {
width: 150px;
height: 150px;
}
h1 {
font-size: 3em;
}
.cars {
text-transform: uppercase;
width:150px;
display:block;
position:absolute;
top:0px; left:0px; }
span {
margin: 10px;
position: relative;
}
relevant html section:
<div id='content'>
<h1>My Cars</h1>
<span>
<img />
<span class='cars'>car</span>
</span>
...
</div>