H1 Logo in body not working correctly - php

I am by far not an expert with PHP, and could really use some help creating my logo below into a H1. This is in my body section of the site:
<!--logo-->
<div class="logo" style="float:left;">
<?php echo $html->link($html->image('rental_logo.png'),array('controller'=>'homes','action'=>'index'),array('escape'=>false)); ?>
</div>
<div class="logo" style="float: right; margin-right: 470px; padding-top: 40px;">
Here is what I tried to create the above logo into a H1 tag:
<h1>
<a href="<?php echo $html->link($html->image('rental_logonew.png')?>" title="http://example.net/img/rental_logo.png"><br/>
<img src="<?php (http://example.net/img/rental_logonew.png);>/images/rental_logo.png" alt="vacation rentals" title="logo"
</h1>
I am very inexperienced writing code. So, I know the above that I tried to enter is wrong. Should I also be altering my look.css file?
/* css */
#logo {
background: transparent url("http://example.net/img/rental_logo.png") no-repeat scroll 0% 0%;
float: left;
/*width: 200px;*/
padding-bottom:10px;
text-indent: -3333px;
border: 0;
margin: 0;
}
#logo a {
display: block;
width: 280px; /* larger than actual image? */
height: 120px;
text-decoration: none;
border: 0;
}
I am attempting to add "rendered html" as requested. This may be incorrect, because I am unfamiliar with rendered html. I obtained the above codes from my header.ctp and look.css files.
($html->image('rental_logonew.png'),array('controller'=>'homes','action'=>'index'),array('escape'=>false)); ?>
Thanks for looking, and helping if you can.

In the php code i dont see where you close the "a" tag, just follow the structure bellow. I hope it will work.
CSS:
#logo {
width: 344px;
height: 82px;
margin-top: 10px;
/*float: left;*/
background: url(../images/logo.png) no-repeat;
}
h1.logo {
width:344px;
height:82px;
margin:0;
padding:0;
}
h1.logo a {
display: block;
height: 82px;
text-indent: -3000em;
overflow: hidden;
}
HTML:
<div id="logo"><h1 class="logo" title="logo"><a title="logo" href="/">Logo</a></h1></div>
Demo here..

Related

Footer overlapping only one page

The footer is overlapping one of my webpage. all the others pages are fine but this one its overlapping, i dont really want to edit/update the footer as it is working in other pages, but I would like to see if there is something I can do with the css container for this page.
CSS
#box {
width: 100%;
height: auto;
margin-top: 20px;
position:relative;
padding-right:0.4%;
float:left;
margin-bottom: 10px;
}
.boxChildLeft {
left: 0;
width: 80%;
height: 100px;
border: 1px solid;
margin-bottom: 2px;
position: relative;
float: left;
}
CSS footer/body etc
html,
body {
margin:0 auto;
padding: 0;
max-width: 960px;
height: 100%;
background-color: white;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:white;
padding:10px;
}
#body {
padding:10px;
padding-bottom:40px; /* Height of the footer */
}
#footer {
position: absolute;
bottom:0;
left: 0;
right: 0;
height:40px; /* Height of the footer */
background:#EBEBEB;
border-radius: 5px;
}
PHP/HTML
for($temp = 1; $temp <= $cArray[2]; $temp++)
{
$img .= "<div class='boxChildLeft'>
<div class='img'>
<img src='../ProductImages/$cArray[0].jpg' width='100px' height='100px'>
</div>
<div class='prodInfo'>
<p1>$pName</p1><br>
<span id='sp'><p1>$pPrice<p1>
</span>
</div>
</div>";
}
HTML
<div id="box">
<?php echo $img;?>
</div>
The information you provided is not enough, what I suggest is to use W3school HTML validator it will indicate what's missing from your HTML implementation, it will help you by giving suggestions.

Footer moving and sticking on lower resolutions

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.

call PHP image as CSS background-image: url

I have the following code in my html markup :
<div class="profile-img">
<img src="<?php echo $user_meta['profilepicture'][0]; ?>" />
</div>
This code generates a profile image or avatar.
I'd like to use it into CSS as a background image.
So this is what I am trying to use :
<div class="profile-img">
<style type="text/css">
.profile-img img { background-image: url('<?php echo $user_meta['profilepicture'][0]; ?>'); }
</style>
</div>
My CSS then looks like this :
.profile-img {
width: 90px;
height: 90px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 15px;
}
.profile-img img {
width: 80px;
height: 80px;
padding: 5px !important;
background: #fff !important;
border: none !important;
border-radius:500px;
-moz-border-radius:500px;
-webkit-border-radius:500px;
background-position: center center;
}
What I am trying to achieve is a round image thumbnail - avatar with proportionally cropped image.
But it seems that the code I am trying to use to call the image into CSS doesn't do the trick.
Where am I going wrong here ?
You have to add this rule removing background-image property that will be parsed via php.
.profile-img {
background-image: url('https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
width: 100px;
height: 100px;
}
<div class="profile-img"></div>
So your final html addition will be:
<div class="profile-img" style="background-image: url('<?php echo $user_meta['profilepicture'][0]; ?>');"></div>
If you want the image to be a background-image and not part of an IMG tag, and you need it to be dynamic, then you'll need something more like this:
<div class="profile-img" style="background:url('<?php echo $user_meta['profilepicture'][0]; ?>') no-repeat center center #ffffff"></div>
This will place the image as a background within the .profile-img DIV. Then you'd style just your DIV:
.profile-img {
width: 90px;
height: 90px;
margin: 0 auto;
text-align: center;
padding: 5px !important;
border: none !important;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%; }
To be honest, I haven't checked your CSS as I'm not sure what you are trying to accomplish beyond the circle shape. I changed your border-radius to 50% as that's what'll create a circle.
Im not sure, but a while back I used some css to have round corners for an webapp. Perhaps this will help you:
.myImg img{
-webkit-border-radius: 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px;
border-radius: 30px 30px 30px 30px;
}
Hope this helps
<script>
var imageSrc = "<?php echo $user_meta['profilepicture'][0]; ?>";
$('.profile-img').css('background-image',imageSrc);
</script>

HTML elements are contained to each other

I have a problem with some HTML elements. I have an image and a title in a <header> tag - they should both move independently to each other, however when I move the img element down 40px with the margin-top attribute - the title seems to move down 40px with it. So I add margin-top: -20px; to move it back up and it seems to stay put.
Here's my code:
The header file:
<div class="page">
<header>
<div class="titlesec">
<img class="circular" src="themes/default/image.jpg" />
<a class="logo" href="<?php echo base_url(); ?>">
<?php echo site_name(); ?>
</a>
</div>
<div class="split"></div>
</header>
The footer file:
<footer>
<p>© Copyright <?php date("Y"); ?> Duncan Hill</p>
</footer>
</div>
</body>
</html>
and my css:
.page {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
.logo {
font-family: 'Helvetica Neue';
font-weight: 100;
font-size: 56px;
text-decoration: none;
color: #555555;
margin-top: -20px;
}
.split {
height: 1px;
background-color: #CCCCCC;
}
.circular {
margin-top: 40px;
width: 80px;
height: 80px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
.titlesec {
height: 150px;
}
Any help is appreciated immensely!
img and a are inline tags. Which means they are in the same line. Adding margin-top manipulates this line, and affects therefore both of them.
Depending on what you want to do, you could solve this with surounding both elements with their own div. Then you can style the divs independently. Maybe a float on those divs comes in handy, too.
Close your "page" DIV. It seems that your not properly closing your html tags.

Weird gaps with float left

I am completely blocked on this problem, I am working with a CMS, and I am generating the articles, and I want them to be in two colums, so
here is the html code ( I deleted a bit of the php parts not to confuse you ):
<div id="contenu_col">
<?php
echo '<div class="col1">
<img src="square/'.$IMGACSQ.'" ><br/>
<p>'.aff($DATE).'<br/>'.aff($nom_projet).' - '.aff($ARTISTE).'</p></div>';
</div>
that generate an html code that look like that :
<div class="col1">
<a href="exhibition.php?ID=109">
<img src="square/E_3094_x.jpg" >
</a><br/>
<p>11.12. - 29.01.11.<br/>New impressions - New works - new artists - new space 5 and a happy new year)</p>
</div>
<div class="col1">
<a href="exhibition.php?ID=108">
<img src="square/BG_IoanGrosu06_x.jpg" >
</a><br/>
<p>30.10. - 04.12.10.<br/>Come here tomorrow - Ioan Grosu</p></div>
and the css :
.col1{
width:300px;
float:left;
padding: 3%;
display: block;
}
.col1 img{
width:100%;
}
.col1:after{
clear: both;
}
#contenu_col {
width:850px;
top:150px;
z-index:50;
left:460px;
position:absolute;
padding-bottom: 20px;
}
#contenu_col img{
width:100%;
}
( because I can't post images...)
It works 70% of the website; then sometimes some weird gap appears....
I don't understand what I'm doing wrong :(
RESOLVED.THANK YOU!!
Edit your col1 class and add a height,for example height:300px;
.col1 {
width: 300px;
float: left;
padding: 3%;
display: block;
height: 300px;
}
Also your DIV#encar isn't well styled.
it appears because .col1 height is not unified, try to add this to your css
.col1{
height: some value
}

Categories