Ariana
Reputation: 31
Trying to move something without using position:relative
I'm just wondering if it's possible to move this (image1) to (image2). I don't want to use position:relative as that would ruin my design in bootstrap.
Image 1 (I don't want it here)
http://puu.sh/ciBCF/3d1d6b202a.png
Image 2 ( I want it here)
http://puu.sh/ciBET/0f44f62b3f.png
My code for CSS
.results {
color: red;
display: block;
font-size: 20px;
text-align:center;
text-decoration: none;
font-weight: bold;
background: #232323;
color:red;
font-family: 'Julius Sans One', sans-serif;
font-size: 150%;
}
Thanks in advance :)
UPDATE WHOLE CODE:
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<body>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<a href="index.php"><img src="../images/logo.png"> </a>
</div>
<div class="cssmenu">
<ul>
<li><a href="index.php"><span>Home</span></a></li>
<li class="active"><a href="about.php"><span>About</span></a></li>
<li class="has-sub"><a href="service.php"><span>Gallery</span></a>
</li>
<li class="last"><a href="contact.php"><span>Contact</span></a></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<div class="search1">
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" id="password" name="username" required />
<label>Password:</label>
<input type="password" id="password" name="password" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p><a href="register.php">Register</a></p></h2>
</center>
</form>
</div>
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['username']) && !empty($_POST['password'])) {
$username=$_POST['username'];
$password=$_POST['password'];
$password = strip_tags($password);
$password = md5($password); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$username."' AND password='".$password."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($username == $dbusername && $password == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$username;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "<div class='results'>Invalid username or password</div>";
}
} else {
echo "All fields are required!";
}
}
?>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="content_bg">
<div class="wrap">
<div class="wrapper">
<div class="main">
<h2 class="style">About us</h2>
<div class="about">
<div class="cont-grid-img img_style">
<img src="../images/about_pic.jpg" alt=""></a>
</div>
<div class="cont-grid">
<div class="abt-style">
<p class="style top">We are a company built on dreams. And these dreams inspire us to create innovative products that enhance human mobility and benefit society. We see "The Power of Dreams" as a way of thinking that guides us and inspires us to move forward. The strength of our company comes from this philosophy—based on the visionary principles of our founder, Soichiro Honda.Our success in the global marketplace is the result of our continued investment in America's future. We thank our customers for the support and trust they've shown us. We look forward to challenging ourselves to create new products and services that bring value to our customers and society during the next 50 years.</p>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="about-p top">
<p class="style">Honda's global lineup consists of the Fit, Civic, Accord, Insight, CR-V, CR-Z, Legend and two versions of the Odyssey, one for North America, and a smaller vehicle sold internationally. An early proponent of developing vehicles to cater to different needs and markets worldwide, Honda's lineup varies by country and may have vehicles exclusive to that region. A few examples are the latest Honda Odyssey minivan and the Ridgeline, Honda's first light-duty uni-body pickup truck. Both were designed and engineered primarily in North America and are produced there. Other example of exclusive models includes the Honda Civic five-door hatchback sold in Europe.
Honda's automotive manufacturing ambitions can be traced back to 1963, with the Honda T360, a kei car truck built for the Japanese market.[27] This was followed by the two-door roadster, the Honda S500 also introduced in 1963. In 1965, Honda built a two-door commercial delivery van, called the Honda L700. Honda's first four-door sedan was not the Accord, but the air-cooled, four-cylinder, gasoline-powered Honda 1300 in 1969. The Civic was a hatchback that gained wide popularity internationally, but it wasn't the first two-door hatchback built. That was the Honda N360, another Kei car that was adapted for international sale as the N600. The Civic, which appeared in 1972 and replaced the N600 also had a smaller sibling that replaced the air-cooled N360, called the Honda Life that was water-cooled.
The Honda Life represented Honda's efforts in competing in the kei car segment, offering sedan, delivery van and small pick-up platforms on a shared chassis. The Life StepVan had a novel approach that, while not initially a commercial success, appears to be an influence in vehicles with the front passengers sitting behind the engine, a large cargo area with a flat roof and a liftgate installed in back, and utilizing a transversely installed engine with a front-wheel-drive powertrain.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li><a href="#">Skype</a></li>
<li><a href="#">Linked in</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
Upvotes: 2
Views: 79
Answers (3)
Nripendra
Reputation: 359
If css 3 is ok for you, then "translate", transformation may help?
e.g:
.results {
...
transform: translate(0px,-200px);
}
you may have to set appropriate value instead of -200px.
Update:
After looking at your code.
Why not place the "php" section where you need to show the error message?
Update 2
Putting up the code example, based on OP's original code as @Moob suggested.
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<body>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<a href="index.php"><img src="../images/logo.png"> </a>
</div>
<div class="cssmenu">
<ul>
<li><a href="index.php"><span>Home</span></a></li>
<li class="active"><a href="about.php"><span>About</span></a></li>
<li class="has-sub"><a href="service.php"><span>Gallery</span></a>
</li>
<li class="last"><a href="contact.php"><span>Contact</span></a></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<div class="search1">
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['username']) && !empty($_POST['password'])) {
$username=$_POST['username'];
$password=$_POST['password'];
$password = strip_tags($password);
$password = md5($password); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$username."' AND password='".$password."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($username == $dbusername && $password == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$username;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "<div class='results'>Invalid username or password</div>";
}
} else {
echo "All fields are required!";
}
}
?>
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" id="password" name="username" required />
<label>Password:</label>
<input type="password" id="password" name="password" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p><a href="register.php">Register</a></p></h2>
</center>
</form>
</div>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="content_bg">
<div class="wrap">
<div class="wrapper">
<div class="main">
<h2 class="style">About us</h2>
<div class="about">
<div class="cont-grid-img img_style">
<img src="../images/about_pic.jpg" alt=""></a>
</div>
<div class="cont-grid">
<div class="abt-style">
<p class="style top">We are a company built on dreams. And these dreams inspire us to create innovative products that enhance human mobility and benefit society. We see "The Power of Dreams" as a way of thinking that guides us and inspires us to move forward. The strength of our company comes from this philosophy—based on the visionary principles of our founder, Soichiro Honda.Our success in the global marketplace is the result of our continued investment in America's future. We thank our customers for the support and trust they've shown us. We look forward to challenging ourselves to create new products and services that bring value to our customers and society during the next 50 years.</p>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="about-p top">
<p class="style">Honda's global lineup consists of the Fit, Civic, Accord, Insight, CR-V, CR-Z, Legend and two versions of the Odyssey, one for North America, and a smaller vehicle sold internationally. An early proponent of developing vehicles to cater to different needs and markets worldwide, Honda's lineup varies by country and may have vehicles exclusive to that region. A few examples are the latest Honda Odyssey minivan and the Ridgeline, Honda's first light-duty uni-body pickup truck. Both were designed and engineered primarily in North America and are produced there. Other example of exclusive models includes the Honda Civic five-door hatchback sold in Europe.
Honda's automotive manufacturing ambitions can be traced back to 1963, with the Honda T360, a kei car truck built for the Japanese market.[27] This was followed by the two-door roadster, the Honda S500 also introduced in 1963. In 1965, Honda built a two-door commercial delivery van, called the Honda L700. Honda's first four-door sedan was not the Accord, but the air-cooled, four-cylinder, gasoline-powered Honda 1300 in 1969. The Civic was a hatchback that gained wide popularity internationally, but it wasn't the first two-door hatchback built. That was the Honda N360, another Kei car that was adapted for international sale as the N600. The Civic, which appeared in 1972 and replaced the N600 also had a smaller sibling that replaced the air-cooled N360, called the Honda Life that was water-cooled.
The Honda Life represented Honda's efforts in competing in the kei car segment, offering sedan, delivery van and small pick-up platforms on a shared chassis. The Life StepVan had a novel approach that, while not initially a commercial success, appears to be an influence in vehicles with the front passengers sitting behind the engine, a large cargo area with a flat roof and a liftgate installed in back, and utilizing a transversely installed engine with a front-wheel-drive powertrain.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li><a href="#">Skype</a></li>
<li><a href="#">Linked in</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
Upvotes: 1
Billy
Reputation: 2448
You could put the div in the form in the place you want it, set an id and in css set it to display none, then in the else block of your code where you now echo the div drop out of php and use js to show the div if theres an error. i.e
else{ ?>
<script>document.getElementById("your_chosen_id").style.display="block";</script>
<noscript><div class='results' style='position:relative;top:-200px;>Invalid username or password</div></noscript>
<?php
EDIT
Added noscript as Moob correctly pointed out that it obviously wouldn't work with js turned off.
Upvotes: 0
ProllyGeek
Reputation: 15846
You may consider using css :after
http://www.w3schools.com/cssref/sel_after.asp
.search1::after {
color: red;
display: block;
font-size: 20px;
text-align:center;
text-decoration: none;
font-weight: bold;
background: #232323;
color:red;
font-family: 'Julius Sans One', sans-serif;
font-size: 150%;
content: "your content here";
}
use script to hide or show it based upon php response.
Edit: whole code illustration
add this CSS:
.search1::after
{
display:block;
content:attr(data-content);
}
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<body>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<a href="index.php"><img src="../images/logo.png"> </a>
</div>
<div class="cssmenu">
<ul>
<li><a href="index.php"><span>Home</span></a></li>
<li class="active"><a href="about.php"><span>About</span></a></li>
<li class="has-sub"><a href="service.php"><span>Gallery</span></a>
</li>
<li class="last"><a href="contact.php"><span>Contact</span></a></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<div class="search1">
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" id="password" name="username" required />
<label>Password:</label>
<input type="password" id="password" name="password" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p><a href="register.php">Register</a></p></h2>
</center>
</form>
</div>
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['username']) && !empty($_POST['password'])) {
$username=$_POST['username'];
$password=$_POST['password'];
$password = strip_tags($password);
$password = md5($password); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$username."' AND password='".$password."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($username == $dbusername && $password == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$username;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "$('.search1').attr('data-content','Your text Here');";
}
} else {
echo "All fields are required!";
}
}
?>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="content_bg">
<div class="wrap">
<div class="wrapper">
<div class="main">
<h2 class="style">About us</h2>
<div class="about">
<div class="cont-grid-img img_style">
<img src="../images/about_pic.jpg" alt=""></a>
</div>
<div class="cont-grid">
<div class="abt-style">
<p class="style top">We are a company built on dreams. And these dreams inspire us to create innovative products that enhance human mobility and benefit society. We see "The Power of Dreams" as a way of thinking that guides us and inspires us to move forward. The strength of our company comes from this philosophy—based on the visionary principles of our founder, Soichiro Honda.Our success in the global marketplace is the result of our continued investment in America's future. We thank our customers for the support and trust they've shown us. We look forward to challenging ourselves to create new products and services that bring value to our customers and society during the next 50 years.</p>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="about-p top">
<p class="style">Honda's global lineup consists of the Fit, Civic, Accord, Insight, CR-V, CR-Z, Legend and two versions of the Odyssey, one for North America, and a smaller vehicle sold internationally. An early proponent of developing vehicles to cater to different needs and markets worldwide, Honda's lineup varies by country and may have vehicles exclusive to that region. A few examples are the latest Honda Odyssey minivan and the Ridgeline, Honda's first light-duty uni-body pickup truck. Both were designed and engineered primarily in North America and are produced there. Other example of exclusive models includes the Honda Civic five-door hatchback sold in Europe.
Honda's automotive manufacturing ambitions can be traced back to 1963, with the Honda T360, a kei car truck built for the Japanese market.[27] This was followed by the two-door roadster, the Honda S500 also introduced in 1963. In 1965, Honda built a two-door commercial delivery van, called the Honda L700. Honda's first four-door sedan was not the Accord, but the air-cooled, four-cylinder, gasoline-powered Honda 1300 in 1969. The Civic was a hatchback that gained wide popularity internationally, but it wasn't the first two-door hatchback built. That was the Honda N360, another Kei car that was adapted for international sale as the N600. The Civic, which appeared in 1972 and replaced the N600 also had a smaller sibling that replaced the air-cooled N360, called the Honda Life that was water-cooled.
The Honda Life represented Honda's efforts in competing in the kei car segment, offering sedan, delivery van and small pick-up platforms on a shared chassis. The Life StepVan had a novel approach that, while not initially a commercial success, appears to be an influence in vehicles with the front passengers sitting behind the engine, a large cargo area with a flat roof and a liftgate installed in back, and utilizing a transversely installed engine with a front-wheel-drive powertrain.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li><a href="#">Skype</a></li>
<li><a href="#">Linked in</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
Upvotes: 0
Related Questions
- how can I move div with position:relative above div with position:absolute?
- How to move a specific element?
- How to move images with relative positioning?
- Is there a way in CSS to move an element in the DOM
- Move element using css alone
- setting html to position relative
- HTML position:relative
- Position element without using absolute positioning
- CSS: move an element, overriding its position in the HTML
- html + CSS: Make position relative some other element?