I'm using the following code
<?php
$link= $_SERVER['HTTP_HOST'];
echo "<div id='link' style='position: relative; margin: 60 auto; width: 70%; top: -10px;
height: 100%;'>{$link}";
?>
The code works fine but I have other content on the page. This makes the above code move my content down the page or up depending on how I set up the margin.
What I want to do is to have my echo text to appear over my content.
Any help would be appreciated.
Use position:absolute;
<?php
$link= $_SERVER['HTTP_HOST'];
echo "<div id='link' style='position: absolute; width: 70%; top: 0px;
height: 100%;'>{$link}</div>";
?>
Probably your best bet here is to use position: absolute instead of relative. Push the rest of the content down some with a margin if you need to adjust it's spacing compared to the div.
Make sure to set a left: and top: attribute to ensure cross-browser consistency.
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 was puting some company logos in my landing web site which i wantes to use as buttons for the next pages to go in...but first everything was ok. i inserted them through .php and than positioned them in css, and than i tried to make some hover animation and it destroyed it all. than i deleted all the ":hover" codes and everything i added to do that, but now its not as it was. i cant move my pictures to the desired positions. below ill post my .php code and .css as well. please help!!!
<div class="maroonlogo">
<a href="http://maroon.maroon27.com" target="_blank">
<img src="http://maroon27.com/wp-content/themes/onesie/images/weblogo.png"/>
</a>
</div>
<div class="line">
<img src="http://maroon27.com/wp-content/themes/onesie/images/line.png"/>
</div>
<div class="27logo">
<a href="http://27.maroon27.com" target="_blank">
<img src="http://maroon27.com/wp-content/themes/onesie/images/logo.png"/>
</a>
</div>
CSS
maroonlogo {
display: inline;
float:right;
position:absolute;
top: 200px;
left: 350px;
}
.line {
display: inline;
float: right;
position: absolute;
top: 180px;
left: 600px;
}
.27logo {
display: inline;
float: right;
position: absolute;
top: 200px;
left: 500px;
}
CSS classes cannot start with an integer i.e.: 27logo
Also, there is no need to put a float if you are using position:absolute as it will be meaning less.
Suppose if you can't able to change the classname, still we have solution to apply the style for the class "27logo". You need to use special character "\3" for each number like below.
.\32\37logo
{
background-color:#ff00ff;
height:200px;
width:200px;
}
DEMO
Here am throwing the images from database to a div in php while, here I want to delete the image by clicking on the delete icon which has to be in the top right corner of the every image pulled from db. How could I get a delete icon in the top right corner of the images? This is how I am displaying the images in a dialog box.
<?php
$query = "SELECT * FROM files_images";
$res = mysql_query($query);
while ($row = mysql_fetch_array($res)) {
echo "<div id='popimages'>";
echo "<img title='$row[img]' id='$row[id]' style='width:100px;float:left; height:100px;margin-bottom:5px; margin-left:5px;border:2px solid #b06c1c;border-radius:10px;' src='http://localhost/PhpProject2/user_data/" . $row['filename'] . "'/>";
echo "</div>";
}
?>
If I understand correctly, try outputting something like this :
HTML
<div id='popimages'>
<div class="image">
<img class="btn-delete" onclick="alert('Do something!');" src="http://cdn1.iconfinder.com/data/icons/diagona/icon/16/101.png"/>
<img title='$row[img]' id='$row[id]' style='width:100px;float:left; height:100px;margin-bottom:5px; margin-left:5px;border:2px solid #b06c1c;border-radius:10px;' src='http://i.i.com.com/cnwk.1d/i/tim/2011/03/16/Chrome-logo-2011-03-16.jpg'/>
</div>
</div>
CSS:
.image {
width: 100px;
height: 100px;
position: relative;
}
.btn-delete {
position: absolute;
cursor: pointer;
right: 2px;
top: 2px;
/* This was edited out because it was stupid. See fernholz's answer.
left: 100%;
margin-left: -10px;
margin-top: 2px; */
}
JSFiddle: http://jsfiddle.net/TK7zB/
You need to wrap your image with a <div> and place your image and delete link inside that <div>.
I've created this fiddle for you, that might be what you're looking for.
Drewman is technically correct, I would change .btn-delete's style to be
.btn-delete {
cursor: pointer;
position: absolute;
right: 2px;
top: 2px;
}
The top and right can be changed to whatever distance in from the corner you want the delete icon.
Adrenaxus, was pretty close, but needed a height and width on the image div and position relative, not absolute on it.
HTML:
<div class="img-pos">
<span class="close">×</span>
<img src="">
</div>
CSS:
.img-pos{
position: relative;
}
.img-pos.close {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
}
Okay so I have tried to implement Google Maps as a background to my website. But when I try to put text over it using this code:
.content{
z-index:0;
background-color:fffff;
position: absolute; top: 0; left: 0;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}
And that is giving me an error with the map it is displaying it on top of the map, which is what I want but it is not working with with margins for some reason. All my code is here: http://pastebin.com/uz6wwtYZ
Can anyone help me because I want the content in the center of the webpage and the map to act as the background.
Thanks.
Try adjusting the top and left instead of margin when an item is set to an absolute position:
.content{
z-index: 100;
background-color:fffff;
position: absolute; top: 100px; left: 100px;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}
Hope that helps? Also might want to set a higher z-index value as I have done above.
If you want it horizontally centered with auto margin values but also absolutely positioned, I don't think you can do that.
You can try this instead by giving your content an absolute width and offsetting the left property:
.content{
width: 500px;
z-index: 100;
background-color:fffff;
position: absolute; top: 100px; left: 50%;
height: auto;
margin: auto;
margin-left: -250px; /* half the value of the width */
}
Here's a link to a JS Fiddle that uses your code: http://jsfiddle.net/4FLKt/1/ Seems to be working fine.
Mikey.
Did you try putting the content on top of the map?
#map {
z-index:1;
}
.content{
z-index:100;
}
This is because your using position: absolute; and that is not working togetter with margin:auto;.
Place a div around it with a full width over the google maps and make that absolute... then in that div you can center a other div.
Example
<div> //This div has position:absolute; and the width of the Google maps chart.
<div> //This div has margin:0 auto;
Content here
</div>
</div>
This is the code for my next/prev navigation found at http://ilikeyou.tk/763/ :
<div class="navigation">
<? if($nexts['id'] == ''){ ?>
<? }else{ ?>
<? } ?>
</div>
I would like to vertically center the buttons. I tried using vertical-align:middle; which didn't work. I also tried top:50%; but that didn't do the job either.
Here is my css:
.navigation {
position: relative;
float: left;
vertical-align : middle;
height: auto;
padding: 0;
margin: 0 -20px 0 -22px;
width: 636px;
z-index:1;
}
.navigation a.prev{
background: url('images/nav_left.png');
float: left;
width: 50px;
height: 50px;
margin-left:10px;
}
.navigation a.next {
background: url('images/nav_right.png');
float: right;
width: 50px;
height: 50px;
margin-right:10px;
}
Thanks!
So, I'm guessing that the content area height is not very static.
http://jsfiddle.net/aBzhu/
Trick is to have the outer element set to position: relative; float: left; and then the element you want to center as position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;
Note that this only works when the element that you want to center vertically IS static height. Should fit your usage I think.
Edit: Oh.. and I dont think this necessarily works in ie6. But does work ie7+
Edit2: Also if youre not interested in such a puny methods you should check this out Using jQuery to center a DIV on the screen
vertical-align is intended for table cell rendering, and even this is quite problematic. Why not just add a few pixels of top padding to your navigation ul? It's not real centering, but you're obviously not worried about dunamic scaling when you're using a fixed height graphic for the navigation background.
This Solution Matched me perfectly for small texts. Even if it is a link or just a text inside the div, this CSS Class could vertically align the content inside the DIV. Works for IE as well..
.verticalCenterDivText{
height: 29px;
line-height: 29px;
}
Hope this helps....
Regards, ADynaMic