I'm developing a website that has several pages, and to avoid having to write the entire menu I want to use the php include method. However I am not making the menu appear inside the html file. how do I make the menu appear whenever I call include?
<header>
<nav id="navbar">
<div id="navbar-div">
<span id="navbar-spam">
<h1 id="navbar-logo">
<img src="images/logo.png" alt="" srcset="" class="logo1">
</h1>
</span>
<nav id="menu">
<ul>
<li>home</li>
<li>quem somos</li>
<li>destaques</li>
<li>representantes</li>
<li>clientes</li>
<li>contato</li>
</ul>
</nav>
</div>
</nav>
</header>
style.css
*{
margin: 0;
padding: 0;
}
#font-face {
font-family: 'mandina';
src: url('font/Madina.otf')/*Para navegadores Internet Explorer*/;
font-weight: normal;font-style: normal;
}
#font-face {font-family: 'mandina';
src: url('/font/Madina.ttf') /*Para os demais navegadores*/;
font-weight: normal;
font-style: normal;
}
/* INICIO CABEÇALHO */
header {
width: 100%;
height: 4.5em;
}
#navbar-logo {
margin-left: 0.5em;
width: 17vh;
height: 9vh;
}
#navbar{
background-color: white;
position: fixed;
z-index: 10;
height: 4.5rem;
width: 100rem;
}
#navbar-div {
position: absolute;
width: 100%;
}
#navbar-spam {
position: fixed;
width: 15em;
height: 3.5em;
}
#navbar-logo {
position: absolute;
margin-right: 40rem;
margin-top: 0;
width: 50%;
height: 100%;
text-align: center;
}
#menu {
z-index: 9;
position: fixed;
margin-top: 1.5rem;
margin-left: 28rem;
width: 100%;
height: 4.5rem;
font-weight: bold;
text-transform: uppercase;
}
#menu li{
float: left;
list-style: none;
}
#menu li a {
color: black;
text-decoration: none;
padding: 1.4rem;
}
/* INICIO CORPO DO SITE */
main {
position: relative;
height: 200em;
width: 100%;
background-color: white;
color: black;
}
.design-tec {
font-family: mandina;
font-size: 15vh;
margin-left: 30rem;
margin-top: -20rem;
color: black;
text-shadow: 3px 3px 6px #f3c569;
}
.linha-home {
border: 1px dashed black;
margin-left: 39rem;
margin-top: -0.9rem;
width: 16rem;
}
#img-home {
margin-top: 4rem;
margin-left: 5rem;
width: 55vh;
}
.texto-home {
margin-top: 1rem;
margin-left: 33rem;
font-style: italic;
}
#itens-home {
position: absolute;
margin-left: 33rem;
margin-right: 21rem;
margin-top: 3rem;
font-weight: bold;
}
#ico-catalogo,
#ico-representantes,
#ico-tutoriais {
margin-left: 0.5rem;
width: 8vh;
height: 8vh;
}
#ico-representantes{
margin-left: 1.7rem;
}
#div-catalogo{
position: absolute;
margin-left: 1rem;
}
#div-representantes {
position: absolute;
margin-left: 11rem;
}
#div-tutorial {
position: absolute;
margin-left: 23rem;
}
#ico-catalogo:hover,
#ico-representantes:hover,
#ico-tutoriais:hover{
width: 9vh;
height: 9vh;
transition: 1s;
}
#home{
position: relative;
height: 20%;
width: 100%;
background-color: white;
}
/* INICIO RODAPÉ */
footer {
position: fixed;
background-color: blue;
color: black;
}
This is the index.htm file, which will be the main page
<!DOCTYPE html`
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<?php require "navbar.php" ?>
<main>
<section id="home">
<img src="images/img-home.gif" id="img-home">
<h2>
<p class="design-tec">Design & Tecnologia</p>
</h2>
<hr class="linha-home">
<div class="texto-home">
<p>Modernidade e tecnologia em um produto exclusivo para o seu imóvel!</p>
</div>
<div id="itens-home">
<div id="div-catalogo">
<img src="images/catalogo.svg" id="ico-catalogo">
<p id="Pcatalogo">Catálogo</p>
</div>
<div id="div-representantes">
<img src="images/aperto-de-mao.svg" id="ico-representantes">
<p id="Prepresantantes">Representantes</p>
</div>
<div id="div-tutorial">
<img src="images/mail.svg" id="ico-tutoriais">
<p id="Pcontato">Tutoriais</p>
</div>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Just rename your file index.htm to index.php then at the index.php, you can now use a mixture of php and html code.
To include a file inside an html, you can do this:
index.php
<!DOCTYPE html`
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<?php
require "navbar.php";
//or
// require_once "navbar.php"
?>
You can read more about using php on html here.
Note: After changing your extension to .php, you can't run the file without a server unlike with static files such as html or htm.
To do this, you can install a development server on your development environment such as XAMPP.
References to XAMPP can be found here.
Related
I'm just starting with HTML and PHP and I ran into the following problem:
When having a PHP command the webpage shows wrong colors!
With PHP command (<?php phpinfo( ); ?>)
Without PHP command:
It's pretty clear to see that the navbar elements change color, depending on the command, but why?
I can't get this fixed, no matter what I do. Here's my other code:
PHP-Source-File:
<!DOCTYPE HTML>
<html>
<head>
<title>PHP-Info</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/index.css" type="text/css" media="all">
</head>
<body>
<ul class="navbar">
<li class="navbar"><a class="navbar" href="index.php">Home</a></li>
<div style="float: right;">
<li class="navbar"><a class="navbar" href="">Server-Info</a></li>
<li class="navbar"><a class="navbar active" href="phpinfo.php">PHP-Info</a></li>
</div>
</ul>
<div>
<?php phpinfo( ); ?>
</div>
</body>
</html>
Stylesheet:
* {
margin: 0;
padding: 0;
font-family: Tahoma, sans-serif;
font-size: 100%;
}
body {
margin-top: 55px;
}
ul.navbar {
position: fixed;
top: 0;
width: 100%;
height: 5.4%;
list-style-type: none;
overflow: hidden;
background-color: rgba(33, 33, 33, 0.35);
}
li.navbar {
float: left;
}
li a.navbar {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover.navbar {
border-bottom: 4px solid dodgerblue;
}
li a.active.navbar {
background-color: #666666;
border-bottom: 4px solid #666666;
}
In your CSS stylesheet I see you have :hover and :active before your classes. Try switching them around, like this:
li a.navbar:hover {
border-bottom: 4px solid DodgerBlue;
}
li a.navbar:active {
background-color: #666666;
border-bottom: 4px solid #666666;
}
EDIT: Plus you had a period . instead of a colon : before active.
It is also a good idea to capitalize your color names. DodgerBlue instead of dodgerblue. Some browsers are strict about this.
Simply trying to get my page to scroll, simply added 'br' to test. This can be seen in the file below -
<?php
session_start();
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Menu Flexbox</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-hQpvDQiCJaD2H465dQfA717v7lu5qHWtDbWNPvaTJ0ID5xnPUlVXnKzq7b8YUkbN" crossorigin="anonymous">
<link rel="stylesheet" href="css/style6.css">
<link rel="shortcut icon" href="images/icons/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Hind:400,300,600,500,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style9.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-2">
<div class="table" id="main">
<div class="table-cell">
<div class="menu">
<div class="menu-item"><i class="fa fa-home"></i><span>Home</span></div>
<div class="menu-item"><i class="fa fa-globe"></i><span>Panel</span></div>
<div class="menu-item"><i class="fa fa-user"></i><span>Profile</span></div>
<div class="menu-item"><i class="fa fa-envelope"></i><span>Support</span></div>
<a class="menu-item" href="index.php?logout='1'"><i class="fa fa-power-off"></i><span>Logout</span></a>
</div>
</div>
</div>
</div>
</div>
<div>
<a target="_blank" style="display: block; position: fixed; bottom: 45px; right: 10px; width: 200px;" href=""><img src="https://i.imgur.com/EV5CGy2.png" alt="logo"/></a>
<a target="_blank" style="display: block; position: fixed; bottom: 15px; right: -24px; width: 200px;" href="http://www.abr.business.gov.au/ABN/View/93742390655"><img src="" alt=""/>ABN: 93 742 390 655</a>
</div>
<div id="wrap1">
<div class="ml-auto pt-5">
<?php if (isset($_SESSION['username'])) : ?>
Welcome, <strong><?php echo $_SESSION['username']; ?></strong>.
<?php endif ?>
</div>
</div>
<div id="wrap">
<br><br><br><h1 style="font-weight: 300; padding-left: 80px">Shopping cart -</h1>
<p style="font-weight: 300; padding-left: 80px ">Check out with your items</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
example
<br>
example
<br>
example
<br>
</div>
</body>
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5b7d1d95afc2c34e96e7ca57/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success" >
<h3>
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>
</script>
</html>
enter image description here
I simply can not scroll down -
Please ensure you let me know if you need anything other than what has been provied
CSS -
body{
margin: 0;
overflow: hidden;
}
#main{
position: fixed;
top: 0;
left: 0;
width: 15%;
height: 100%;
background-color: #ddeaf1;
}
.table{
display: table;
width: 100vw;
height: 100vh;
}
.table-cell{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.menu{
background-color: white;
width: 30%;
margin: auto;
display: flex;
align-content: flex-start;
flex-flow: row wrap;
justify-content: space-around;
border-radius: 10px;
-moz-box-shadow: 0px 0px 5px 0px #c0c0c0;
-webkit-box-shadow: 0px 0px 5px 0px #c0c0c0;
-o-box-shadow: 0px 0px 5px 0px #c0c0c0;
box-shadow: 0px 0px 5px 0px #c0c0c0;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=NaN, Strength=5);
}
#media all and (max-width: 900px){
.menu{
width: 80%;
}
}
.menu-item{
font-size: 17px;
flex: 1;
padding: 25px;
transition: all .2s;
cursor: pointer;
color: #636363;
background-color: white;
border-radius: 10px;
position: relative;
}
.menu-item > span{
display: block;
position: absolute;
text-transform: uppercase;
font-size: 10px;
font-weight: 200;
color: white;
left: 5px;
right: 5px;
border-radius: 5px;
background-color: #226eab;
padding: 5px;
opacity: 0;
transition: all .2s .1s;
transform: translateY(70px);
z-index: -1;
}
.menu-item:hover{
-moz-box-shadow: 0px 0px 5px 0px #c0c0c0;
-webkit-box-shadow: 0px 0px 5px 0px #c0c0c0;
-o-box-shadow: 0px 0px 5px 0px #c0c0c0;
box-shadow: 0px 0px 5px 0px #c0c0c0;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=NaN, Strength=5);
flex: 2;
color: #226eab;
transform: scale(1.1);
z-index: 3;
}
.menu-item:hover > span{
transform: translateY(35px);
opacity: 1;
}
#wrap{
width: 95%;
min-width: 900px;
margin-left: 18%;
}
#wrap1{
width: 95%;
min-width: 900px;
margin-left: 80%;
}
Any suggestions would be greatly appreciated, this is my first project so don't judge to hard :)
Remove overflow: hidden; from your CSS body element. If you do not want to let page elements cause your page to be wider than the actual viewport’s width, replace it with max-width: 100vw; and overflow-x: hidden;. vw is the unit for a percentage of the viewport width.
You have added
overflow: hidden;
to the body, so you can't scroll. Please remove the hidden so that you can scroll
please check you have enough data (> your view port) for scrollbar to appear.
Please refer here for css changes if needed
enter link description here
enter link description here
enter link description here
Try css on body
overflow-y: scroll;
*remove overflow:hidden on body
I have an issue I have been trying to solve. I have created a "blog" you can call it, and I have the option to make a new post. When I make a new post, a div is added. However, when the div gets added, the previous post is shifted to the right. I have tried all sorts of suggestions, but I can't get it. Here is an image:
What I want is so that the divs are lined up properly. Here is my code:
body {
background-color: #558C89;
/*background-color: #1FDA9A;*/
color: #000305; /*remove if background is not working */
font-size: 87.5%; /*base font size is 14px */
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
margin-left: 21.5%;
}
a {
text-decoration: none;
}
a:link, a:visited {
}
a:hover, a:active {
}
.body {
}
form {
display: inline;
}
#logo {
position: absolute;
z-index: 1;
left: 0;
top: 5px;
height: 50px;
vertical-align: top;
}
.mainheader img {
width: 100%;
height: auto;
margin: 0% 0%;
}
.mainheader nav {
background-color: #424242;
/*background-color: #008BBA; /* Here for color of navigated buttons*/
height: 65px;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
float: right;
display: inline;
margin-top: 0px;
}
.mainheader nav a:link, .mainheader nav a:visited {
color: #FFF;
font-weight: bold;
display: inline-block;
padding: 18px 25px;
height: 10px;
/* Come back here to continue to edit buttons */
}
.mainheader nav a:hover, .mainheader nav a:active, .mainheader nav .active a:link,
.mainheader nav .active a:visited {
background-color: #638CA6;
opacity: 0.85;
height: 63px;
text-shadow: none;
}
.mainheader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.newsClass{
position: absolute;
width: 1000px;
background-color: #404040;
border-style: solid;
border-color: black;
border-width: 1px;
text-align: center;
color: #FFF;
margin: -100px 0 0 -150px;
top: 25%;
left: 27%;
z-index: 2;
}
.topcontent {
background-color: #404040;
width: 850px;
position: absolute;
text-align: center;
color: #FFF;
margin-top: 120px;
border-style: solid;
border-color: black;
border-width: 1px;
line-height: 1;
display: inline-block;
left: 21.5%;
}
#box{
border: 1px solid rgb(200, 200, 200);
box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
background: rgba(200, 200, 200, 0.1);
border-radius: 4px;
top:50px;
}
h2{
text-align:center;
color:#fff;
}
#footer {
color: #FFF;
}
<?php
error_reporting(E_ALL & ~E_NOTICE);
session_start();
include("blog.php");
$posts = (isset($_GET['id'])) ? get_posts($_GET['id']) : get_posts();
$username = $_SESSION['username'];
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<!-- CSS -->
<link href="accountCSS/myaccountStyle.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="indexCSS/bootstrap.min.css">
<link rel="stylesheet" href="indexCSS/font-awesome.min.css">
<link rel="stylesheet" href="indexCSS/form-elements.css">
<link rel="stylesheet" href="indexCSS/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="icon" href="images/favicon.gif">
</head>
<body>
<img src="images/logo.gif" id="logo"/>
<header class="mainheader">
<nav><ul>
<?php
if(isset($_SESSION['user_id'])){
echo '<li>Log out</li>';
}else{
echo '<li>Log in</li>';
}
?>
<li>My Account</li>
<li>Contact</li>
<li>Play</li>
<li>Home</li>
</ul></nav>
</header>
<h2 class="newsClass"> Recent News <?php if(getPermissions($username)) {echo 'New Post'; }?>
</h2>
<?php
foreach($posts as $post) {
?>
<!-- Top content -->
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<div class="form-top">
<div class="form-top-left">
<h2 class ="title"><?php echo $post['title'];?></h2>
<p> Posted on <?php echo date('d-m-Y h:i:s', strtotime($post['date_posted'])); ?>
in <?php echo $post['name']; ?>
<br></br>
<?php
if(getPermissions($username)) {
?>
Edit Post |
Delete Post
<?php
}
?>
</p>
<div class="contents"> <?php echo nl2br($post['contents']); ?></div>
<?php
}
?>
</div>
<div class="form-top-right">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/scripts.js"></script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-88077370-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
NOTE: I guess the "run snipped" doesn't seem to run php.
It sounds like you are not closing the divs in the correct places.
Make sure your indentation is correct and ensure that every <div> you open inside the foreach is also closed before the foreach is closed.
I like to use foreach(): endforeach; when you have a lot of markup inside a loop like this, as it makes reading the code a lot easier.
<?php foreach ($posts as $post):?>
<div>
<h2 class ="title">
<?php echo $post['title'];?>
</h2>
<p>
Posted on
<?php echo date('d-m-Y h:i:s', strtotime($post['date_posted'])); ?>
in
<a href="category.php?id=<?php echo $post['category_id']; ?>", style="color:green">
<?php echo $post['name']; ?>
</a>
<br></br>
<?php if(getPermissions($username)): ?>
Edit Post |
Delete Post
<?php endif; ?>
</p>
<div class="contents">
<?php echo nl2br($post['contents']); ?></div>
<div>
</div>
<?php endforeach;?>
Adding a wrapping div to each post will provide a box around the markup inside. Divs have display:block be default. It is better practice than using <br /> or <p>&nsbp;</p> as it will give you more control when/if you need to style that element.
I am programming a website, but I can have just one div per CSS document.
Here is my code:
body {
width: 100%;
height: 100%;
margin: 0px;
background-color: white;
background: url("https://static.pexels.com/photos/160133/pexels-photo-160133.jpeg");
background-size: cover;
}
#menu {
width: 100%;
height: 60px;
background-color: white;
float: right;
}
#menu ul {
list-style: none;
margin-right: 25%;
}
#menu li {
padding-top: 7px;
float: right;
color: black;
display: inline;
margin-right: 15px;
font-family: 'Josefin Sans', sans-serif;
}
#menu a {
text-decoration: none;
color: black;
}
#menu a:hover {
text-decoration: none;
color: #DD0604;
}
#menu li:hover::first-letter {
color: black;
}
#menu li::first-letter {
color: #DD0604;
}
#menu img {
width: 70px;
height: 70px;
margin-top: -25px;
}
/* This doesnt work */
.devices-and-text {
color: green;
}
<head>
<title>Tvorba webstránok FAXEOT</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="">
<meta name="">
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
</head>
<body>
<div id="menu">
<ul>
<li style="float: left; margin-left: 30%;"> <img src="images/logo.png"> </li>
<li class="blue"> Menu </li>
<li> Menu </li>
<li> Menu </li>
<li> Menu </li>
</ul>
</div>
<div class="devices-and-text">
This text doesn't work...
</div>
</body>
Website shows menu and everything about menu is OK. But my div "devices-and-text" is still black not green. When I put the style into the index.php, everything works.
I'm not entirely sure how I managed to jack this up.
http://pretty-senshi.com
If you take a look at that, where the left item and right item are, the right item is sticking out for whatever reason, so I think I'm doing something wrong. Or maybe my coding/css is jacked up, I'm not entirely sure about the coding anyway, I just know it "works" somewhat. See below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><br />
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pretty Senshi - Sailor Moon </title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet"
href="http://pretty-senshi.com/log/wp-content/themes/BLANK-Theme/style.css"
type="text/css" />
<link rel="pingback" href="http://pretty-senshi.com/log/xmlrpc.php" />
</head>
<body class="home blog logged-in admin-bar">
<body>
<div id="container">
<div id="rightHalf"></div>
<div style="text-align: center;"><caption>
<img src="http://pretty-senshi.com/images/design.png" alt="text" id="picture">
</caption></div>
<div id="wrapper"><div id="leftcolumn">
<div class="headernav">Navigation</div>
About Us<br>
Gallery<br>
Links In/Out<br>
</div>
<div id="content">
<div class="post-1 post type-post status-publish
format-standard hentry category-uncategorized" id="post-1"></div>
<div class="header">Welcome</div>
<div class="entry">
<p>The site isn’t ready yet. This site is not ONLY dedicated to
Sailor Moon but to all anime.</p>
<div id="commentbar">
<div class="left">left stuff</div>
<div class="right">right stuff</div></div>
</div>
<div id="footer"></div>
</body>
</html>
And here is the CSS to it:
/*
Theme Name: Pretty Senshi
Theme URI: http://pretty-senshi.com
Description:
Author: Megan Riffey
Author URI: http://hateyourway.org
Version: 1
*/
body {background: url(http://pretty-senshi.com/images/sideone.png);
background-repeat:repeat-x;background-color: #fcefd8;
margin-top:0px;line-height: 20px;font-size: 10.5pt;
font-family: Tahoma;color:#998574;}
div#container {
width:100%;z-index: -1;}
.header {font-weight: bold;
font-size: 14px;
color: #D4556A;
FONT-FAMILY: verdana;
text-align: justify;
letter-spacing: 0px;
line-height: 25px;
background: url(http://pretty-senshi.com/images/header.png) left no-repeat;
padding-right:3px;
padding-left: 10px;
padding-bottom: 3px;
padding-top: 3px;
text-align:center;}
.headernav {font-weight: bold;
font-size: 13px;
color: #D4556A;
FONT-FAMILY: verdana;
text-align: justify;
letter-spacing: 0px;
line-height: 25px;
background: url(http://pretty-senshi.com/images/header.png) left no-repeat;
padding-right:20px;
padding-left: 3px;
padding-bottom: 3px;
padding-top: 3px;
text-align:right;}
.header:first-letter {color:#b970be;}
.headernav:first-letter {color:#b970be;}
div#picture {z-index: -1;width:780px;margin: 0 auto;text-align:center;}
#rightHalf {
background: url(http://pretty-senshi.com/images/sidetwo.png);
background-repeat:repeat-x;
width: 50%;
position: absolute;
right: 0px;
height: 100%;
z-index: -1;}
p {padding: 10px;z-index: 1;}
#wrapper {position:relative;
margin:0 auto;
width: 650px;
height:100%;}
#content {
float: right;
text-align:justify;margin-top:-80px;
width: 440px;z-index: 999;height:100%;}
#leftcolumn {position:absolute;
text-align:justify;
width: 200px;margin-top:-80px;
float: left;z-index: 999;height:100%;}
#commentbar {width:100%;padding:10px;}
.left {float:left; width:50%;}
.right {float:right; width:50%;text-align:right;}
A:link, A:visited, A:active {
color:#175f8b;
text-decoration:none;
text-transform:uppercase;
font-size: 9pt;
font-weight:bold;}
A:hover{
color:#d76b92;
text-decoration:none;
text-transform:uppercase;
cursor:default;
border-bottom: 1px solid #7d8f9a;
font-weight:bold;}
#date
{font:10pt "Century Gothic", sans-serif;
border-top:2px solid #d4aabc;
margin-top:10px;
color:#7ea558;
text-align:right;
font-weight:bold;
text-transform:uppercase;}
div.comment a {
width:100px
float:left;
height:22px;
background-color:#72a2c6;
text-align:center;
display:block;
letter-spacing:0px;
text-shadow:none;
text-transform:uppercase;
margin-top:-16px;
padding:3px;
opacity:.8;
filter:alpha(opacity=80);
filter:"alpha(opacity=80)";}
What can I add or change to make it align with the body text?
It is because you are using padding: 10px; in #commentbar, just remove it and you are good to go..and secondly just saw this that you are also using padding: 10px; for p in your CSS, so if you remove that too, both things will align exactly same
The padding is causing your mis-alignment...remove the padding in this CSS declaration and it will line up
#commentbar {
width: 100%;
/*padding: 10px;*/
}