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
Related
<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
My partner and I are trying to make a shopping cart site for a school project. We are having trouble with our navbar.
We use the exact same files for styling this specific navbar. (its called universal.css and inherited by each page)
Also, the navbar HTML code is in a PHP file included via script (same script for both).
However, index.php of the products is not vertically aligned with the pull-right statements, though the index.php of the whole website is.
What's the problem?
(The JS file of products and index do not do anything different to the navbar They are essentially the same).
Here is my code, we host at main page https://webdes-nikhilb99.c9users.io/ and products page https://webdes-nikhilb99.c9users.io/products
Mainnav.css
#media (max-width: 1325px) {
.navbar-header {
float: none;
}
.navbar-collapse.collapse.in { display: block!important; }
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
.glyphicon-search{
color:white;
}
#search-btn{
background-color: #337ab7;
}
Universal.css
#import url('productModal.css');
#import url('bottomNav.css');
#import url('mainNav.css');
row-title{
color:#337ab7;
font-weight:bold;
font-size:30pt;
margin-top:60px;
width:100%;
padding-bottom:50px;
}
#content-wrapper{
background-color: black;
width:100%;
opacity: 0.9;
}
#content-wrapper .content p{
color:white;
}
.content{
color:#337ab7;
font-weight:bold;
font-size:20pt;
text-align:center;
}
.content p{
font-size:10pt;
}
#mainNav{
background-color: black;
font-family: Montserrat;
font-weight: 700;
font-size:10pt;
border-bottom: 4px solid #337ab7;
background: rgba(0,0,0,0.9);
}
#img1{
position:absolute;
top:0;
left:0;
width:100%;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
.navbar-custom .navbar-toggle .icon-container .icon-bar {
background-color: #000;
}
.navbar-custom .navbar-toggle .icon-container{
background-color:#000;
}
.navbar-nav .dropdown a{
color:#337ab7;
font-size:18pt;
text-decoration:none;
}
.blacktext{
color:#337ab7;
font-size:18pt;
}
/*Drop down menu*/
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu{
/**Change up the stuff in the dropdown here*/
}
.dropdown{
line-height:95px;
}
.navbar-nav .dropdown .dropdown-toggle{
font-size:30pt;
}
.navbar-nav > li >a{
line-height:65px ;
}
.navitem{
font-size:30pt;
}
.navbar-nav > li >a:focus{
background-color:transparent;
}
#loginWindow .modal-dialog .modal-footer{
text-align: left !important;
}
body{
padding-top: 65px;
}
.icon-bar{
background-color: #fff;
line-height:65px;
font-size:30pt;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one */
display: flex;
align-items: center;
}
body{
background-color: black;
}
/*.btn-success{
background-color: #337ab7;
}
.btn-success:hover{
background-color:blue;
}*/
/*Login and Registration buttons*/
.btn-primary{
background-color:#337ab7;
}
.btn-primary:focus{
background-color:#337ab7;
}
.btn-primary:hover{
background-color:white;
color:#337ab7;
}
.navbar-nav > li >a:hover{
background-color:transparent;
color:white;
}
#logo{
margin-left:10px;
margin-top:10px;
margin-right:20px;
margin-bottom:3px;
}
#nikhil{
color:white;
}
#yadu{
color:white;
}
#content-wrapper{
position:absolute;
left:10%;
width:80% !important;
margin-top: 50px;
border-radius:25px;
opacity:0.95;
border: 3px double white;
}
.active a{
color:white !important;
}
.active a:hover{
color:white !important;
}
.active a:focus{
color:white !important;
}
body{
background-image:url("http://www.legionreport.com/wp-content/uploads/2014/04/blakegriffindunk.jpg");
}
#mtt{
color:#337ab7;
}
#bballfam{
height:200px;
width:80%;
}
Products page:
<html>
<head>
<title>Products</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/products.css">
</head>
<body>
<div class="container">
<?php
include('../snips/loginModal.php');
include('../snips/registrationModal.php');
include('../snips/menuMain.php');
?>
<div id='content-wrapper'>
<div class="row">
<div class="col-md-4 info basketball-info">
<h2 class="title text-center">Basketball</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
<div class="col-md-4 info football-info">
<h2 class="title text-center">Football</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
<div class="col-md-4 info soccer-info">
<h2 class="title text-center">Soccer</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
</div>
<script type="text/javascript">
$("#srch-term").css('width', $(window).width()).css('right','-9%');
$(".bottom-nav").css('display','none');
</script>
<!--<div class="row">
<div id='basketball-info' class="info col-md-12">
<h2 class="title text-center">Basketball</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div>
</div>
<div class="row">
<div id='football-info' class="info col-md-12">
<h2 class="title text-center">Football</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div>
</div>
<div class="row">
<div id='soccer-info' class="info col-md-12">
<h2 class="title text-center">Soccer</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div> -->
</div>
</div>
</div>
<?php
include('/home/ubuntu/workspace/snips/bottomNav.php');
?>
<?php
include('/home/ubuntu/workspace/snips/productPageModal.php');
?>
<script src="/js/products.js"></script>
<script type="text/javascript">
// $(".title").click(function(){
// $("#productsPage .modal-title").text($(this).text());
// });
// $(".bottom-nav").css('left','0');
</script>
</body>
</html>
Main Page:
<!DOCTYPE HTML>
<html>
<head>
<title>Baller Sporting Goods</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="/css/index.css">
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/js/index.js" type="text/javascript"></script>
<body>
<?php
/*Login page is a Bootstrap modal included on the main page. See snips/loginModal.php*/
include('snips/loginModal.php');
/*Registration page is a Bootstrap modal included on the main page. See snips/registrationModal.php*/
include('snips/registrationModal.php');
include('snips/menuMain.php')
?>
<div class="container" id="wrapper">
<div id='content-wrapper'>
<div class="row">
<h2 class="text-center row-title" id='mtt'>
<img class='center-block' id = "welcome" src="img/welcome.png" width="80%"/>
<br>
<i>Where Ball Really Is Life</i>
<br>
<br>
</h2>
<div class="col-md-9 content center-block">
Online Services
<p>
At Baller Sporting Goods, we offer a variety of services available to many devices.
On our site, you may use our always available quick-search that will locate the exact item
you need in a matter of seconds.
Or, if you like to shop around yourself, you can look over our exhorbitant list of products
on our site by clicking on the <a href='/products/'>Sports</a> icon on the top. We implement
an organized structure of products that sort by sport, company, and type of equipment. Check
it out!
</p>
</div>
<div class="col-md-9 content center-block">
Our Products
<p>
We started in 1991 in the garage of two partners: Nikhil Bharani & Yadunandan Pillai.
Both were high school students tired of studying; so they decided to take the easy way
out and start a business.
They accepted a small loan of one million dollars, which they used on buying the necessities
of a business: products. Eventually, the garage was full of brand new products from medium-scale
companies like ESPN and Dicks Sporting Goods, which they sold for 50 cents on EBay.
</p>
<p>
However, one million dollars is quite a small amount, so they ran out quicker than they planned.
The two collaborators then decided to escape loan sharks by moving to an island outisde US jurisdiction
and starting a shady business.
This business, today, is the most legit one in the world: Baller Sporting Goods.
We sell numerous performance-enhancing drugs and other nutritional supplements along with
imported goods from richer companies like Hong Kong.
We also sell purposefully torn up clothing made by hand.
Our best products are the cubic soccer balls.
</p>
</div>
<br>
</div>
<?php
include('snips/bottomNav.php');
?>
</div>
<!--<script src="/js/libs/slideshow.js"></script>-->
<script src="/js/index.js"></script>
</body>
</html>
Index.css
#import url('universal.css');
#searchbar{
margin-right:auto;
margin-left:auto;
width:50%;
}
#media screen and (min-width: 1200px){
.content{
left:12.5%;
}
}
.content{
padding-bottom: 50px;
}
#media screen and (max-width:800px){
#content-wrapper{
padding-right:40px;
padding-left:40px;
}
}
#wrapper{
width:100%;
height:100%;
}
#searchbar #searchForm{
color:blue;
margin-left: auto;
margin-right:auto;
}
#title h2{
font-family: Montserrat;
font-weight: bold;
color:black;
text-align:center;
margin-top:65px;
}
#searchbar #searchForm input[name='search']{
background-color:#e9e9e9;
}
#slideshoww{
margin-top:70px;
margin-right:auto;
margin-left: auto;
position:absolute;
width:100%;
opacity:0.3;
}
#searchbar #searchForm #bar_img{
font-size:25pt;
}
#welcome{
width:95%;
}
#bar_img{
color:black;
}
#content-wrapper .row-title i{
font-size:20pt;
color:lightGrey;
}
#content-wrapper{
position:absolute;
left:10%;
width:80% !important;
margin-top: 100px;
border-radius:25px;
opacity:0.90;
border-right: 3px double white;
border-left: 3px double white;
font-family:Montserrat;
}
.col-md-6{
left:25%;
}
Products.css
#import url('universal.css');
#media screen and (min-width:990px){
.col-md-4{
border-right: 4px solid #337ab7;
}
.col-md-4:last-child{
border:none;
}
}
.col-md-4{
text-align:center;
font-family: Montserrat;
}
.col-md-4 .main-link{
font-size:20pt;
color:white;
font-weight:bold;
}
.info .title{
font-size:20pt;
color:#337ab7;
font-weight:bold;
}
#content-wrapper{
background:rgba(0,0,0,0.9);
}
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 simple website with a header, navigation menu, footer and few sections runs fine in all browsers except google chrome. When I launch it in Chrome, it centers the page, like squeezing at the very middle of the browser page.
Look it here
My code:
.PHP:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fatah's Homepage</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="design.css">
<style type="text/css"></style>
</head>
<body>
<div id="wrapper">
<script type="text/javascript" src="js/scripting.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<header id="top_header" >
<h1>Welcome to my world!</h1>
</header>
<nav id="top_menu">
<ul>
<li>HOME</li>
<li>WHO I'M</li>
<li>GALLERY</li>
<li>MY DIARY</li>
<li>BLOG</li>
<ul>
</nav>
<div id="new_div">
<section id="main_section">
<article>
<header>
<hgroup>
<h1>Title of Article 1</h1>
<h2>Subtitle of the article 1</h2>
</hgroup>
</header>
<p>This is the first best article ever</p>
<footer>
-Written by Jabir
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Title of Article 2</h1>
<h2>Subtitle of the article 2</h2>
</hgroup>
</header>
<p>This is the second best article ever</p>
<footer>
-Written by Jabir
</footer>
</article>
</section>
</div>
<aside id="side_news">
<h4>Fatah's update</h4>
Fatah became very stupid!
</aside>
<footer id="the_footer">
Developed by Jabir Al Fatah 2014
</footer>
</div>
</body>
</html>
.CSS:
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer, aside, nav, article, hgroup{
display:block;
}
body{
width:100%;
display:-webkit-box;
-webkit-box-pack:center;
}
#wrapper{
max-width:1000px;
margin:20px auto;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex:1;
}
#top_header{
background:yellow;
border:3px solid black;
padding:20px;
}
#top_menu{
border:red;
background:blue;
color:white;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;
}
#new_div{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#main_section{
border:1px solid blue;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}
#side_news{
border:1px solid red;
width:220px;
margin:20px 0px;
padding:30px;
background:blue;
}
#the_footer{
text-align:center;
padding:20px;
border-top: 2px solid green;
}
remove the display:-webkit-box; in body ....
body{
width:100%;
-webkit-box-pack:center;
}
margin:20px auto;
You set the width margin to auto, normally it only centers when a width is set but well it does it for you, replace:
margin: 20px auto;
with
margin: 20px 0px;
or something like that
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;
}