My website is http://nickliddell.com/pieres.
As you can see, the background on the header is repeating. I tried adding background-repeat:no-repeat; to all of the divs that is in the header, and it is still repeating.
Here is my header.php
<?php
/**
* The Header for our theme.
*
* #package WordPress
*/
global $cubby_options;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
<?php wp_title('|', true, 'right'); ?>
</title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<center>
<div class="header">
<div class="top">
<div class="container">
<div class="contact left">
<?php echo cubby_options_array('top_contact_info') ; ?>
</div>
<div class="follow right"> <?php echo cubby_get_social_network(array("skype","facebook",'twitter','google_plus','youtube',"linkedin",'pinterest','rss'));?> </div>
</div>
</div>
<div class="top2">
<div class="container">
<div class="logo left"><a href="<?php echo esc_url(home_url('/')); ?>">
<?php if ( cubby_options_array('logo')!="") { ?>
<img src="<?php echo cubby_options_array('logo'); ?>" alt="<?php bloginfo('name'); ?>" />
<?php }else{ ?>
<span class="site-name">
<?php bloginfo('name'); ?>
</span>
<?php }?>
</a><span class="tagline"><?php echo get_bloginfo( 'description' );?></span></div>
</div>
</div>
<div class="menu_bottom">
<?php do_action('wp_menubar','Home'); ?>
</div>
</div>
</div>
</center>
<!--header-->
Here is my stylesheet:
.top2 {
display:inline-block;
width:100%;
min-height:186px;
background:#cccccc;
padding:20px 0 0;
margin-left: auto;
margin-right: auto;
position: relative;
background-repeat:no-repeat;
}
.container {
width:960px;
margin:0 auto;
background-repeat:no-repeat;
}
.top {
height:20px;
background:#333333;
padding:5px 0;
color:#ccc;
background-repeat:no-repeat;
}
min-height:60px
margin-left:auto;
margin-right:auto;
background-repeat:no-repeat;
}
.top2 .menu_bottom{
display: block;
position: absolute:
width: 100%;
bottom: -20px
}
.header {
}.center-content,.footer {
margin-top:20px;
}
Sorry I'm new to html and css. I was also wondering, how come in the stylesheet it states the classes as having a color as a background, but on the page it shows the image?
All replies are appreciated :)
Well check your code. Because you have this:
.header .top2 {
url("http://www.nickliddell.com/pieres/wp-content/uploads/2014/05/cropped-header1.png") repeat scroll 0 0 rgba(0, 0, 0, 0)
}
Where it says repeat. Change it to:
.header .top2 {
background-image: url("http://www.nickliddell.com/pieres/wp-content/uploads/2014/05/cropped-header1.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
Also, if you are new. Do like what I typed in, and it will be easier for you to see the mistake ;)
Related
Hey guys I have problems with contenteditable height. With code like this:
function Preview() {
var x = document.getElementById("code").value;
document.getElementById("preview").innerHTML = x;
}
.preview{
text-align: left;
color: white;
margin-left: 10px;
max-height: 300px;
overflow: auto;
}
<section id="main">
<div id="gra">
<input type="hidden" id="current-code" name="current-code" />
<textarea id="code" name="code">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Simple PHP File</title>
</head>
<body>
<h1><?php echo "Hello, world!"; ?></h1>
</body>
</html>
</textarea>
<div class="flex">
Preview
Reset
</div>
</div>
<div id="gra">
<div contenteditable="true" class="preview" id="preview">
</div>
</div>
</section>
When I enter code with more I can observe effect like this:
Anyone can help me with limit contenteditable height?
try this code
and also change color: red; instead of color:white because its not see anything on white screen
function Preview() {
var x = document.getElementById("code").value;
document.getElementById("preview").innerHTML = x;
}
function Reset() {
document.getElementById("preview").innerHTML = "";
}
.preview {
text-align: left;
color: red;
margin-left: 10px;
max-height: 300px;
overflow-y: scroll;
border: solid 1px #ddd;
}
<section id="main">
<div id="gra">
<input type="hidden" id="current-code" name="current-code" />
<textarea id="code" name="code">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Simple PHP File</title>
</head>
<body>
<h1><?php echo "Hello, world!"; ?>you write php code hear so it will not print on html</h1>
</body>
</html>
</textarea>
<div class="flex">
Preview
Reset
</div>
</div>
<div id="gra">
<div contenteditable="true" class="preview" id="preview">
</div>
</div>
</section>
this is the template menu I'm trying to make, creative menu with image, taken from my wordpress site
my index.php file
defined('_JEXEC') or die;
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');
?>
<!DOCTYPE html>
<!--jdoc:include type="head" sudah include bootstrap.min.js*-->
<html lang="en">
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- main container -->
<div class='container'>
<section class="feature-image">
<h1 class="page-title title-style">CREATIVE BLOG</h1>
</section>
<!-- header -->
<div class="navbar navbar-outer">
<a class="brand" href="#">CREATIVE</a>
<div class="navbar-inner">
<ul class="nav" >
<li>Home</li>
<li>Features</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact Form</li>
</ul>
</div>
</div>
<!-- mid container - includes main content area and right sidebar -->
<div class='row'>
<!-- main content area -->
<div class='span9'>
<jdoc:include type="modules" name="position-3" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="position-2" style="none" />
</div>
<!-- right sidebar -->
<div class='span3'>
<jdoc:include type="modules" name="position-7" style="well" />
</div>
</div>
<!-- footer -->
<div class='row'>
<div class='span12'>Footer</div>
</div>
</div>
</body>
</html>
and below is the style.css file
.main_container {
width:940px;
margin-left:auto;
margin-right:auto;
}
.mid_container {
margin:20px 0px;
}
.main_content_area {
float:left;
width:700px;
}
.right_sidebar {
float:right;
width: 220px;
}
.main_content_area,
.right_sidebar,
.footer,
.header {
border:1px solid #bbb;
}
.navbar-outer
{
padding-bottom: 20px;
margin-bottom: 30px;
}
.navbar-inner
{
list-style-type: none;
margin: 0;
padding: 0;
float: right;
overflow: visible;
border:none !important;
background:transparent;
}
.nav >li >a:hover{
color:#5F5F5F !important;
}
.mostread,
.weblinks,
.category-module,
.syndicate-module,
ul.nav.menu
{
margin: 100px 0px 0px 15px;
}
.feature-image {
background-size: cover !important;
width: 960px;
height: 300px;
display:table;
width:100%;
}
h1.page-title {
background: url("/templates/basicjoomla3.0template/images/raindrops.jpg");
display: table-cell;
background-size:cover;
vertical-align: middle;
text-align: center !important;
color: #FFFFFF;
width: 960px;
height: 300px;
}
and its still not working, I admit I'm still a novice in joomla and web programming. The template above was created by following a basic tutorial and I think I need to tinker with the modules provided to get the the header to look like I wanted. but I'm just not sure where to start. looking for some pointers from anyone, which would be great.
In the meantime I guess I read joomla documentation again and practice what I can
Both sites are hosted locally
<DOCTYPE! html>
<head>
<link rel="stylesheet" type="text/ccs" href="css/indexcss.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<?php
include("utilbar.php");
include("navbar.php");
?>
</div>
<?php
if (isset($_GET["type"])) {
$page = $_GET["type"];
}
else {
$page = "home";
}
//echo "<body onload=\"changeContent('".$page."')\">";
?>
<!--script>
function contentOnload() {
window.location.href('content.php');
}
</script-->
<script>
function navClick(contentName)
{
window.location.href = "index.php?type=" + contentName;
}
</script>
<div class="container">
<?php include($page.".php"); ?>
</div>
<div class="footer">
<?php include("footer.html"); ?>
</div>
</div>
</body>
</html>
CSS here:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: auto;
margin-top: 0;
padding: 0;
}
.footer {
bottom: 0;
position: absolute;
}
So I'm trying to get a footer to stick under the content of all my includes, but sometimes it jumps above the content of the included file. I've looked up most possible sticky footer guides and tried to apply them, but none seem to work like they should. I've been trying to fix this for a while now.
Here's the footer HTML CSS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/footercss.css">
<title>Footer</title>
</head>
<body>
<div id="containerf">
<div id="logos"></div>
<div id="foottext">
<img src="images/youtube.png" height="25" width="25">
<img src="images/twitter.png" height="25" width="25">
<img src="images/fbtrp.png" height="25" width="25">
<b>| Schaafstraat 137 | © 2016 Kopala | All rights reserved.</b>
</div>
</div>
</body>
</html>
#containerf {
width: 100%;
height: 180px;
background-color: #006666;
position: absolute;
bottom: 0;
margin-bottom: 500px;
}
#foottext {
line-height: 180px;
text-align: center;
color: #d9d9d9;
}
#foottext img {
padding-right: 5px;
}
In which file did you set the .footer to bottom:0; ? It seems that you declared it in a regular style.css but in the fotter.htm you include footercss.css
You should paste the bottom:0; to the footercss.css
I have created a database named Magazine and it has a table social_media. The table has 5 columns namely ID, Headline, Author, Content Short, Content. The Content Short column contains the shorter version of the entire article(which will be displayed in the following code) and the Content column contains the entire article(which will be displayed on clicking the Read More button). I have created a homepage where all the articles from the social_media are displayed in the Content_Left div(NOTE: The Content Short column is displayed and not Content). At the end of each entry from the database there is a 'Read More' button. On clicking on that read more button I want the user to be redirected to a new page 'article.php' where the Headline, Author and Content of the corresponding article will be displayed(The Longer version of the content and not the Content Short). How do I do it? I have created the following webpage:
<?php require_once('connections/connection.php'); ?>
<?php
session_start();
$stmt = $con->query("SELECT * FROM social_media");
?>
<!doctype html>
<html>
<head>
<link href="CSS/Layout.css" rel="stylesheet" type="text/css" />
<link href="CSS/menu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<meta charset="utf-8">
<title>Home</title>
</head>
<body style="background-color:#E0DDDD">
<div id="Container">
<div id="Header"></div>
<div id="NavBar">
<nav>
<ul>
<li>Home</li>
<li>Social Media</li>
<li>Tech</li>
<li>Tips & Tricks</li>
</ul>
</nav>
</div>
<div id="Content">
<div id="Content_Left">
<h1><center>Social Media</center></h1>
<table>
<?php
while($records=$stmt->fetch_assoc()) {
$_SESSION["ID"] = $records['ID'];
echo "<tr>";
echo "<th><h3>".$records['Headline']."</h3></th>";
echo "</tr>";
echo "<tr>";
echo "<td>By <strong>".$records['Author']."</strong></td>";
echo "</tr>";
echo "<tr>";
echo "<td>".$records['Content_short']." Read More...</td>";
echo "</tr>";
}
?>
</table>
</div>
<div id="Content_Center">
<h1>Header Here </h1>
<p>Text Goes Here!</p>
</div>
<div id="Content_Right">
<h1>Header Here </h1>
<p>Text Goes Here!</p>
</div>
</div>
<div id="Footer">
<center>Your Copyright Message</center>
</div>
</div>
</body>
</html>
And here is the CSS file(Layout.css):
body{
margin:0;
padding: 0;
}
#Container {
width: 980px;
height:auto;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:21px;
}
#Header {
height:120px;
background-image:url(../Assets/Untitled-1.png);
background-repeat:no-repeat;
margin-bottom:21px;
}
#NavBar {
height:60px;
background-color:#000000;
}
#Content {
background-color:#FFFFFF;
margin-top: 20px;
padding: 5px;
overflow:hidden;
}
#Content_Left {
height: auto;
width: 210px;
padding:5px;
float:left;
background-color: lightblue
}
#Content_Center {
height: auto;
padding:5px;
width: 500px;
float:left;
margin-left: 10px;
margin-right: 10px;
background-color: lightblue
}
#Content_Right {
height: auto;
padding:5px;
width: 210px;
float: right;
background-color: lightblue
}
#Container #Content h1 {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: bolder;
text-shadow: 0px 0px;
}
#Footer {
padding-top: 10px;
height: 100px;
}
And here is the CSS file(menu.css):
nav ul {
margin:0;
padding:0;
}
nav ul li {
list-style-type:none;
display:block;
width:150px;
height:60px;
float:left;
text-align:center;
line-height:55px;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:17px;
}
nav ul li a {
text-decoration:none;
color:#FFF;
}
nav ul li:hover {
background-color:#BBB5B5;
}
nav ul li:hover a {
display:block;
color:Black;
}
I want to display that article in the new page but with the same background theme. Or is there any other way to display the entire article? I hope this much detail is enough. In case any more information is needed please ask.
EDIT: As per the suggestions of the fellow members I have edited the code. My article.php file now looks like this:
<?php require_once('connections/connection.php');?>
<?php
$articleId = $_GET['articleId'];
// you need to fetch only one record this time for showing only the article that wanted to be read. so use `where` condition
$stmt = $con->query("SELECT * FROM social_media WHERE id = $articleId ");
?>
<!doctype html>
<html>
<head>
<link href="CSS/Layout.css" rel="stylesheet" type="text/css" />
<link href="CSS/menu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<meta charset="utf-8">
<title>Home</title>
</head>
<body style="background-color:#E0DDDD">
<div id="Container">
<div id="Header"></div>
<div id="NavBar">
<nav>
<ul>
<li>Home</li>
<li>Social Media</li>
<li>Tech</li>
<li>Tips & Tricks</li>
</ul>
</nav>
</div>
<div id="Content">
<div id="Content_Full">
<table>
<?php
while($records=$stmt->fetch_assoc()) {
echo "<tr>";
echo "<th><h1>".$records['Headline']."</h1></th>";
echo "</tr>";
echo "<tr>";
echo "<td>By <strong>".$records['Author']."</strong></td>";
echo "</tr>";
echo "<tr>";
echo "<td>".$records['Content']."</td>";
echo "</tr>";
}
?>
</table>
</div>
</div>
<div id="Footer">
<center>Your Copyright Message</center>
</div>
</div>
</body>
</html>
However, I am getting the following error:
Fatal error: Call to a member function fetch_assoc() on a non-object
How do I resolve this problem?
Change few thing
in php file
echo "<td>".$records['Content_short']." <a href='article.php'>Read More...</a></td>";
to
echo "<td>".$records['Content_short']." <a href='article.php?articleId= " . $records['ID']. "'>Read More...</a></td>";
then in your article.php
<?php
if(isset($_GET['articleId'])){
$articleId = $_GET['articleId'];
}else{
echo "Invalid access"; die;
}
// you need to fetch only one record this time for showing only the article that wanted to be read. so use `where` condition
$stmt = $con->query("SELECT * FROM social_media WHERE id = $articleId ");
Follow same html code of your article listing page on article.php
Change your below line
echo "<td>".$records['Content_short']." <a href='article.php'>Read More...</a></td>";
To:
echo "<td>".$records['Content_short']." Read More...</td>";
Now you've to get details by ID and display data accordingly.
Im creating my site and require a 2 column layout on my page.
I have this code available for the one column layout.
<HTML>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include_once('header.php'); ?>
<div class="header_02"><center>one column layout</center></div>
<div style="position:relative">
<div>
<div style="position:absolute; left:30; top:30;">
<img src="images/xclo.jpg" width="350" height="215">
</div> </div>
<div style="position:absolute; left:0; top:0;">
<img src="images/frame.png" width="400" height="400">
</div>
</div>
column 2 content goes here.
</div></div>
<?php include_once('footer.php'); ?>
</body>
</HTML>
which displays fine.
however when I change it to this:
<HTML>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include_once('header.php'); ?>
<div class="header_02"><center>2 column layout</center></div>
<div style="position:relative">
<div id="container">
<!-- Start Column 1 -->
<div id="column1">
<div>
<div style="position:absolute; left:30; top:30;">
<img src="images/xclo.jpg" width="350" height="215">
</div> </div>
<div style="position:absolute; left:0; top:0;">
<img src="images/frame.png" width="400" height="400">
</div>
</div>
</div>
<div id="column2">
column 2 content goes here.
</div></div>
<?php include_once('footer.php'); ?>
</body>
</HTML>
with this css code in style.css
#container {
float: left;
width: 98%;
position:relative;
font-size: 22px;
}
#column1, #column2 {
width: 45%;
float: left;
position:relative;
}
#column1 {
overflow:hidden;
}
#column2 {
border-left: 1px solid #000000;
padding-left:30px;
}
it does not display the column 1 content.
my question to you is this:
how can I get this to work?
am I missing something?
please help me.
thank you.
I have simplified your layout a bit, you might be able to build on this:
This is HTML:
<div>
<center>2 column layout</center>
</div>
<div id="container">
<div id="column1">Coumn 1 content</div>
<div id="column2">column 2 content goes here.</div>
</div>
This is CSS:
#container {
font-size: 22px;
}
#column1 {
float: left;
width:50%;
background-color: green;
}
#column2 {
float: left;
width:50%;
background-color:red;
}