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;
}
Related
I've designated a background image for the whole page. On top of this I would like to have a header, with a solid background color, with my logo on the left side, business name in the middle, and my name on the right side.
Below this I would like 3 columns for the main page of my site, each probably with their own background color if that's possible.
I'm trying to use bootstrap to give my header three sections (logo-text-name), and I'd like the text to be centred.
The reason I have so much padding is because the logo kept hanging out the bottom of the header.
Now I'm sure there's a lot I'm doing wrong, but if anyone could help I'd be eternally grateful. Thanks.
body {
background-image: url(images/bg.jpg);
}
header {
background-color: #539e8a;
padding: 20px 10px 30px 10px;
color: #f6c5be;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#logo {
width: 160px;
height: 140px;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-xs-2">
<img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo">
</div>
<div class="col-xs-8">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="col-xs-2">
<p>my name</p>
</div>
</div>
</div>
</header>
<div class="container">
<div id="main" class="row">
<div id="col1" class="col-sm-4">
<h2> col 1 </h2>
</div>
<div id="col2" class="col-sm-4">
<h2> col 2 </h2>
</div>
<div id="col3" class="col-sm-4">
<h2> col 3 </h2>
</div>
</div>
</div>
</body>
Bootstrap 5 really brings flexbox to the table, so I'd use that rather than wrestling with columns, which can be troublesome due to inflexibility.
Here I've replaced your container, row, and columns with a simple flex row. Item alignment on the cross axis centers things up. The center element has Bootstrap's flex-fill class on it to make it stretch.
Also notice that I've replaced your custom margin and padding with Bootstrap
spacing classes to clean things up.
body {
background-image: url(https://via.placeholder.com/1200);
}
header {
background-color: #539e8a;
color: #f6c5be;
border-radius: 25px;
}
#logo {
width: 160px;
height: 140px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<header class="mt-3">
<div class="d-flex align-items-center">
<img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo" class="logo m-3">
<div class="flex-fill text-center">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="px-3">
<p>My Name</p>
</div>
</div>
</header>
<div class="container">
<div id="main" class="row">
<div id="col1" class="col-sm-4">
<h2> col 1 </h2>
</div>
<div id="col2" class="col-sm-4">
<h2> col 2 </h2>
</div>
<div id="col3" class="col-sm-4">
<h2> col 3 </h2>
</div>
</div>
</div>
</body>
I make some changes and add somethings to your code so I hope I hope I could help you!
body {
background-image: url(images/bg.jpg);
}
header {
background-color: #539e8a;
padding: 20px 10px 0px 0px;
color: #f6c5be;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#logo {
width: 160px;
height: 140px;
}
#top-part-1 {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.col-xs-2 {
display: flex;
flex-direction: column;
justify-content: center;
}
.col-xs-8 {
display: flex;
flex-direction: column;
justify-content: center;
}
.header-2 {
padding: 20px 10px 0px 0px;
color: #000000;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#top-part-2 {
display: flex;
flex-direction: row;
justify-content: space-between;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<header>
<div class="container" id="top-part-1">
<div class="col-xs-2">
<img id="logo" src="images/logo.png" alt="cakes 'n' bakes logo">
</div>
<div class="col-xs-8">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="col-xs-2">
<p>my name</p>
</div>
</div>
</header>
<div class="header-2">
<div class="container" id="top-part-2">
<div class="col-xs-2">
<h2> col 1 </h2>
</div>
<div class="col-xs-8">
<h2> col 2 </h2>
</div>
<div class="col-xs-2">
<h2> col 3 </h2>
</div>
</div>
</div>
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'm creating a webpage that contains tables that pull data from mysql database. When I want to add a footer, footer does not show up at the bottom of the page. I've tried html's regular footer class, bootstrap footer, sticky footer but none of them worked. I've also tried all position values. Even though I write random stuff at the bottom of the code, before the body closing tag, it still shows it at the beginning.
You can see the page from: http://sagtekin.com/letseat/donat.php
Thank you very much for your help.
Edit: Code is below:
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="text/html;charset=iso-8859-9" http-equiv="content-type">
<meta content="text/html;charset=windows-1254" http-equiv="content-type">
<meta content="text/html;charset=x-mac-turkish" http-equiv="content-type">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="css/w3.css" rel="stylesheet" />
<title>Let's Eat - Donatello Pizza</title>
<style>
body {
background: url(background/bg-03.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Roboto', sans-serif;
}
#infoCard {
background: #FAFAFA;
margin-top: 100px;
}
#header {
position: fixed;
width: 100%;
z-index: 1;
box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
-moz-box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
-webkit-box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
}
div {
border-radius: 5px;
}
</style>
</head>
<body>
<header id="header" class="w3-container w3-teal">
<h1><b>LET'S EAT</b></h1>
</header>
<div class="w3-responsive">
<div class="w3-third w3-container">
</div>
<div class="w3-third w3-container">
<div id="infoCard" class="w3-card-16">
<header class="w3-container w3-teal">
<h1>Donatello Pizza</h1>
</header>
<p style="color: #4CAF50; text-align: center; margin-top: 10px; font-size: large; vertical-align: middle;">
<b>OPEN</b></p>
<hr />
<div>
<p id="textDisplay" style="text-align: center">Hover your mouse
over the buttons.</p>
</div>
<hr />
<div class="btn-group btn-group-justified">
<a class="btn btn-primary" href="tel:05338643695" onmouseout="resetText()" onmouseover="changeTextTurkcell()">
Turkcell</a>
<a class="btn btn-primary" href="tel:05488643695" onmouseout="resetText()" onmouseover="changeTextTelsim()">
Telsim</a>
<a class="btn btn-primary" href="tel:03927147083" onmouseout="resetText()" onmouseover="changeTextLandLine()">
Landline</a>
<script>
function changeTextTurkcell()
{
document.getElementById("textDisplay").innerHTML="<b>0533 864 3695</b>";
}
function changeTextTelsim()
{
document.getElementById("textDisplay").innerHTML="<b>0548 864 3695</b>";
}
function changeTextLandLine()
{
document.getElementById("textDisplay").innerHTML="<b>0392 714 7083</b>";
}
function resetText()
{
document.getElementById("textDisplay").innerHTML="Hover your mouse over the buttons.";
}
</script>
</div>
</div>
</div>
<div class="w3-third w3-container">
</div>
</div>
<div class="w3-quarter w3-container">
</div>
<div class="w3-half w3-container">
<div class="w3-responsive w3-card-16" style="margin-top: 50px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Breakfast</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Pizzas</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Chicken</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Pasta</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Other</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-quarter w3-container">
</div>
</div>
<!--<div class="w3-container w3-teal" style="position:absolute; bottom:0px;">
<h5>LET'S EAT</h5>
<p>© 2015 Poyraz Sagtekin.</p>
</div>-->ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr
</body>
</html>
I isolated what I presumed to be your footer code which was a string of letters like:
ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr
I wrapped that in a div with the following styles and it appeared at the bottom of the page:
<div style="clear:both;">
ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr
</div>
It appears you just need to clear your previous element to "force" your footer to the bottom of the page.
Extension to #Samuels answer, you must put that in a <div> or a <footer> tag and then style it by simply using clear: both; or you could add more to it like position: fixed; bottom: 0; line-height: 15px; the list could go on and on.
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 ;)