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.
Related
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.
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..
I am retrieving a list of products from a database and want to display them all in a rows of 3 columns not using a table though. So I want 3 divs to be displayed side by side. then below.
<div class="productindividualdisplay">
<div class="productphoto">
<img src="http://3.bp.blogspot.com/-_xP-UUa4D0c/UfAo1eYxURI/AAAAAAAAAT4/xsibNtxZceQ/s320/Books.jpg" alt="Smiley face" width="250" height="250"></p>
</div>
<div class="producttitle">
<?php echo $row['title'] ?>
</div>
<div class="productprice">
<?php echo "<div id='productrrp'> €" . $row['rrp'] . "</div>";
if(is_null($offeringprice)) {
echo "Not Available";
} else {
echo "€" . $offeringprice['price'];
}
?>
</div>
That is my code but it is just displaying the divs below each other. Is it possible so it fills up the row before starting another one?
Try using display: inline-block; on the divs's css.
A <div> is a block-level element. Block-level elements, like <h1>, <p>, <table> etc. will (by default) span the entire width of their parent elements, so they can't be positioned next to eachother.
You can change this behavior, however, using the following CSS rule:
div.column {
display: inline-block;
}
This will render the <div>s as inline blocks.
Now you can give it a certain width so that three divs fit into a row. Do note that, when you leave whitespace between two <div> elements, there will be some visual whitespace. If you give all div's a width of 33.333333333%, the extra whitespace will cause their combined width to exceed 100%, so the third div will move to the next line.
You can simply prevent this by making sure there is no whitespace between the HTML elements:
<div class="column">
<p>Some contents here</p>
</div><div class="column">
<p>As you can see, no whitespace between the two div elements.</p>
</div>
Of course you can then use margins to control whitespace manually:
div.column {
display: inline-block;
width: 30%;
margin-right: 3.33333333%;
margin-bottom: 10px;
}
You might wanna take a look at this article: Using inline-block to Display a Product Grid View (it uses <li>s instead of <div>s, but the idea is essentially the same)
Here's a FIDDLE
<div class="product-wrapper">
<div class="productindividualdisplay">
<div class="productphoto">
<img src="http://3.bp.blogspot.com/-_xP-UUa4D0c/UfAo1eYxURI/AAAAAAAAAT4/xsibNtxZceQ/s320/Books.jpg" alt="Smiley face" width="250" height="250">
</div>
<div class="producttitle">
Product Title
</div>
<div class="productprice">
<span>$100</span>
</div>
</div>
...more products...
</div>
.product-wrapper {
width: 960px;
padding: 10px;
}
.productindividualdisplay {
background: #fff;
display: inline-block;
width: 260px;
margin: 5px 5px 15px 5px;
padding: 10px;
text-align: center;
border: 1px solid #999;
box-shadow: 0 5px 6px -3px #333;
}
.productphoto {
width: 95%;
margin: 10px auto;
border-bottom: 1px solid #999;
}
.producttitle a {
font-size: 18px;
text-decoration: none;
}
.productprice {
font-size: 18px;
font-weight: 600;
}
I am having a strange issue with the website I am working on. For some reason, divs are nesting inside of other divs. This messes up my formatting and it driving me nuts. The problem page is here: http://www.thecadencegrp.com/our-books/page/2
If you scroll down to the bottom of the page, you can see the footer is messed up. I cannot seem to fix it!
Here is the code:
<?php
/*
Template Name: Template Page
*/
?>
<?php get_header(); ?>
<style>
.middler_title{
width:1000px;
margin:20px auto 0 auto;
}
#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}
#footer { width: 960px; margin: 0 auto; display: block; clear: both;}
.middler_title_row {
float:left;
width:780px;
margin-top:20px;
margin-left: 0;
margin-bottom: 40px;
margin-top: 40px;
}
.middler_title_row img{
float:left;
display:inline;
margin-bottom:20px;
margin-right:20px;
padding:0;
margin-left: 0;
}
.middler_title_row h1{
font-size:30px;
}
.middler_title_row h2{
font-size:16px;
margin-top:-38px;
}
.middler_title_row h3{
font-size:20px;
margin-top:0px;
}
.middler_title_row h4{
font-size:20px;
font-weight:normal;
}
.middler_title_row a{
text-decoration:none;
color:#005ECF;
}
h3.author-name
{
padding-top: 0px;
padding-bottom: 20px;
}
#book-navigation
{
width: 240px;
margin: 20px auto;
}
#book-nav-right
{
float: right;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
text-align: left;
}
#book-nav-left
{
float: left;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
}
</style>
<?php
global $more;
$more=0;
?>
<div id="main-wrap"> <!-- ######################################## -->
<div id="titles-wrapper"> <!-- ######################################## -->
<div class="middler_title">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'cat' => 1,
'paged' => $paged
);
query_posts($args);
query_posts('post_type=books&order=DESC&posts_per_page=10&paged='.$paged);
while (have_posts()) : the_post(); ?>
<div class="middler_title_row">
<?php $bookcover = get_the_post_thumbnail($page->ID, 'bookcover'); ?>
<?php echo $bookcover; ?>
<h1><?php the_title(); ?></h1>
<?php
$meta_values = get_post_meta($post->ID, 'subtitle', true);
?>
<h4><?php echo $meta_values; ?></h4>
<?php
$meta_values2 = get_post_meta($post->ID, 'author', true);
?>
<h3 class="author-name"><?php echo $meta_values2 ; ?></h3>
<?php
$meta_values11 = get_post_meta($post->ID, 'what_cadence_has_done_to_help_this_book', true);
?>
<?php
$meta_values3 = get_post_meta($post->ID, 'overview', true);
?>
<?php
$meta_values4 = get_post_meta($post->ID, 'read-more', true);
if(!$meta_values4){
$strtitle = get_the_title();
$title=explode(' ',$strtitle);
$title=implode('-',$title);
if(count($title)<1){
$title=strtolower($strtitle);
}else{
$title=strtolower($title);
}
$meta_values4 = get_bloginfo('wpurl').'/Books/'.$title;
}
?>
<p><?php echo $meta_values11 ?></p>
<p><?php echo substr($meta_values3,0,340); ?> ...READ MORE</p>
</div>
<?php endwhile; ?>
<div id="book-navigation">
<div id="book-nav-right"><?php next_posts_link('NEXT >>', $the_query->max_num_pages) ?></div>
<div id="book-nav-left"><?php previous_posts_link('<< PREVIOUS') ?></div>
</div>
</div>
</div> <!-- ######################################## -->
</div> <!-- ######################################## -->
<div id="footer">
<?php get_footer(); ?>
</div>
if you watch the source of the html in the page you wrote, you will see that there is a
after you
also each middler_title_row you print has a that is not even open.
just open the page in firefox and press Ctrl+U to see the source and you will see a red line of , this is one of your problems
the other problem is the coming after the
you need to straight up you html to be valid first before you try to solve this in the css
You have 2 divs with the id = footer. I'd say your problem isn't a mysterious div bug or the css. I'd say your mark up needs some review first of all. Try looking into selectors being ok, and then that every div is closed properly. After that, take a look at the footer. If you want the footer to be stuck in place at the bottom of the place, take a look at something called "Sticky footer". You can accomplish this with some css tricks.
<div id="footer">
<div class="clear"></div>
<div id="footer">
<div class="thirdpage">
<br>
<a href="https://www.facebook.com/thecadencegroup">
<img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/fb1-300x82.png" width="90">
</a>
<br>
<a href="https://twitter.com/thecadencegrp">
<img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/tw1-300x65.png" width="113">
</a>
<br><br>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US </script> <span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block;"><span style="padding: 0px !important; margin: 0px !important; text-indent: 0px !important; display: inline-block !important; vertical-align: baseline !important; font-size: 1px !important;"><iframe name="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" id="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" src="http://platform.linkedin.com/js/xdrpc.html?v=0.0.1196-RC1.31125-1408#xdm_e=http%3A%2F%2Fwww.thecadencegrp.com&xdm_c=li_gen_1384155259314_0&xdm_p=1#target=li_gen_1384155259314_0&width=600&height=400&mode=wrapper" frameborder="0" style="width: 106px; height: 20px; display: inline-block;"></iframe></span></span><script type="IN/FollowCompany+init" data-id="3323727" data-counter="right"></script>
<br><br>
<h5>© The Cadence Group. All Rights Reserved.</h5>
</div>
<div class="thirdpage">
</div>
<div class="thirdpage">
<p>The Cadence Group<br>
212 Marengo Avenue<br>
Suite 2S<br>
Forest Park, IL 60130<br>
708.689.0908<br>
services#thecadencegrp.com
</p></div>
</div><!-- /#footer -->
</div>
your footer div is located in titles-wrapper div by this style:
#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}
you can put out footer from this or set margin-left: 0px; in #titles-wrapper style.
if all the divs are set and tidy, so the </div> that i marked cause all the problems, just find it and eliminate it! :D
usually after the </html> you shouldn't have any other tag
the other things that you have to check is why your footer is in titles-wrapper, it shouldn't be , because as you can see in the picture </div> <!--/wrapper--> is parent of your footer, so consequently your footer will move ahead like titles-wrapper, just bring your footer out of your titles-wrapper and everything should be okey
I think your HTML have a problem, but you can remove margin-left form #titles-wrapper and set margin-left to .middler_title
here is CSS:
#titles-wrapper {
margin-left: 0;
overflow: hidden;
margin-left: 0; /* removed */
}
.middler_title {
width: 1000px;
margin: 20px auto 0 auto;
margin-left: 80px; /* added */
}
the footer section is in the #titles-wrapper so when you set margin to #titles-wrapper it will move footer to the right. there is another ways but this is the simplest.
image is here
I want to overlay one image on other using CSS-PHP. Please see the below HTML and CSS snippet and give ur wise suggestions:
The images are present in header part of the division:
j_logo.jpg and MMPHero3.jpg. Of which former should be transparent and in left container while later one should occupy entire header region.
<body>
<div id="container">
<div id="header">
<div id="header-left-container">
<img src="j_logo.jpg" alt="jubilant"/>
</div>
<div id="header-right-container">
<img src="MMPHero3.jpg" alt="drug"/>
</div>
</div>
<div id="content"> Sidebar <p> </p>
<div class="form">
<p>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<p>Enter Drug Name </p>
<input type="text" name="drugName" value="<?php echo (isset($_POST['drugName']) ? $_POST['drugName'] : '') ?>">
<!--To retain search query after click added value="<?php echo (isset($_POST['drugName']) ? $_POST['drugName'] : '') ?>*/-->
<!-- This is commenting style in HTML -->
<p><input type="submit" value="search"></p>
</form>
</div>
</div>
<div id="sidebar"> Body
</div>
<div id="footer"> </div>
</body>
</html>
CSS style-sheet is below:
body {background: #ffffff;}
a {color: #2b2bf6;}
h1 {font-size: 30px;}
#container
{width:1000px;
margin: 0 auto;
background: #dddddd;}
#header
{height: 150px;
margin: 0px;
padding: 0px;
background: #FFFFA3;}
#header-right-container img
{border:none;
width:80%;
height:150px;
float: right;}
#header-left-container
{width:20%;
float: left}
#header-left-container img
{border:none;
width:100%;
height:150px auto;
float: left;}
#sidebar
{
position:relative;
width: 80%;
height: 400px;
float:right;
background: #FFFFA3; ;}
#content
{
position:relative;
width: 20%;
height: 400px;
float: left;
background: #f0e811;;}
#footer
{width: 100%;
height: 70px;
float: left;
background: #000000;
div.result
{
width:88%;
padding:5%;
border:5px solid gray;
margin:5px;
align:center;
}
div.form
{
width:180px;
padding:5%;
border:5px solid gray;
margin:50px;
align:center;
float:right;
}
table, td, th
{
border:0.5px solid blue;
align:center
}
th
{
background-color:#3886FC;
color:white;
}
I believe you should set the style to be something like "position:absolute; left:100px; top:100px; opacity:0.3;" for the image element on top.
Use style="opacity:0.5;" where opacity can be any val from 0.1 to 1
and for overlapping the img onto another you need to specify style="z-index:1;", the higher the z-index more priority will be given to it.