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
Related
I had generated multiple headers for every page of pdf will be made (dompdf)
Headers are fixed, top: 0px, width: 100%.
My problem is, on the second page and 3rd and so on, my header is over my text content instead to have a margin-bottom. If i put a margin bottom to header, nothing will happen (even if i put margin top for that text content).
What should i do?
CSS:
#header {
position: fixed;
top: 0px;
width: 100%;
margin-top: -180px;
}
#header img {
height: 175px;
width: 1000px;
float: right;
margin-top: 85px;
margin-right: 50px;
}
HTML:
<div id="header">
<img src="sd-logo.jpg"/>
</div>
Thanks.
When using fixed-position element you'll want to place it in the margins of the document to prevent overlapping the body content. You attempted to do so by specifying a negative margin, but those are not fully tested. I'd recommend using negative positioning.
CSS:
#header {
position: fixed;
top: -180px;
width: 100%;
}
#header img {
height: 175px;
width: 1000px;
float: right;
margin-top: 85px;
margin-right: 50px;
}
HTML:
<div id="header">
<img src="sd-logo.jpg"/>
</div>
Also note that, because fixed and absolutely positioned content is removed from the document flow, margins do not affect rendering of any other content.
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;
}
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;
}
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.
From what I can understand I may need to modify both the header.php file as well as the style.css file. I've uploaded the image to the hosting website and I believe it is a relative link: (/public_html/wp-content/themes/sandbox/Header-1.jpg)
So. This is the style.css code I have:
#header { border-bottom:none;
height:200px;
padding-top:0;
padding-bottom:0;
background:url("/public_html/wp-content/themes/kid/Header-1.jpg")
no-repeat bottom center; }
#headerimg {
height: 200px;
width: 800px; }
This is the original php in header.php
<div id="header">
<h1 id="blog-title"><span><?php bloginfo('name') ?></span></h1>
<div id="blog-description"><?php bloginfo('description') ?></div>
</div><!-- #header -->
I've tried replacing the h1 id and the div id lines with
<img src= "/public_html/wp-content/themes/sandbox/Header-1.jpg"/>
but that wasn't effective.
Right now the website has no header and can be seen here: www.dearjasmina.com
Thanks for your time!
The path you're using is incorrect. It should be /wp-content/themes/sandbox/Header-1.jpg.
So you're css should read
#header {
height:200px;
padding-top: 0;
padding-bottom: 0;
background:url('/wp-content/themes/kid/Header-1.jpg') no-repeat bottom center;
}
Try
#header { border-bottom:none;
height:200px;
padding-top:0;
padding-bottom:0;
background:url("/wp-content/themes/kid/Header-1.jpg")
no-repeat bottom center; }
#headerimg {
height: 200px;
width: 800px; }
Your background is actually at
http://www.dearjasmina.com/wp-content/themes/sandbox/Header-1.jpg
It appears as though the relative-URL is incorrect. Try removing the /public-html.
remove public_html folder in your image path, use like below
<img src="/wp-content/themes/sandbox/Header-1.jpg">
There's a 404 Not Found on your image, according to IE Network Sniffing. Double check your url.