So I have a page with a background image, and when I put text over it, I'm seeing a semi-opaque text background that is making my page background image render differently, but only under the text in question.
Does anyone know how to fix this? It is making my page look like there is a semi-transparent headed that I do not want there.
I've linked to my project below.
Codepen Project
$("#nav-status").click(function(e) {
e.preventDefault();
$("#navigation").toggle();
});
html,
body {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/wood-dark.png");
overflow-x: hidden;
font-family: "Oswald", sans-serif;
text-align: center;
}
/*mobile rules*/
#media screen and (max-width: 1023px) {
#nav-status {
display: block;
width: 100%;
height: 32px;
padding: 2px;
background-color: rgba(0, 0, 0, 0.75);
}
ul {
display: none;
width: 100%;
background-color: rgba(0, 0, 0, 0.75);
overflow: hidden;
color: white;
padding: 0;
margin: 0;
}
li h1 {
font-family: "Oswald", sans-serif;
font-size: 1.5em;
}
ul li {
width: 100%;
min-height: 32px;
padding: 0;
display: block;
position: relative;
text-align: center;
}
li a:link,
a:visited,
a:active {
color: white;
font-family: "Oswald", sans-serif;
font-size: 1em;
text-decoration: none;
}
li a:hover {
color: #ba1d30;
font-family: "Oswald", sans-serif;
font-size: 1em;
text-decoration: none;
}
.content {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
}
.content h1 {
font-family: "Bangers", cursive;
color: #ba1d30;
font-size: 2.5em;
letter-spacing: 0.1em;
}
}
/*desktop rules*/
#media screen and (min-width: 1024px) {
#nav-status {
display: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
background-color: rgba(0, 0, 0, 0.85);
height: 100%;
position: fixed;
overflow: hidden;
}
li h1 {
font-size: 3em;
}
ul li {
color: white;
margin: auto;
width: 50%;
padding: 2px;
}
li a:link,
a:visited,
a:active {
color: white;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-decoration: none;
}
li a:hover {
color: #ba1d30;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-decoration: none;
font-style: italic;
}
.content {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
margin-left: 20%;
}
.content h1 {
font-family: "Bangers", cursive;
color: #ba1d30;
font-size: 5em;
letter-spacing: 0.1em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nerdcatkiss.png">
<link href="https://fonts.googleapis.com/css?family=Bangers|Oswald" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body>
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nerdcatkiss.png" alt="Kissy Cat">
<ul id="navigation">
<li>
<h1>Explore</h1>
</li>
<li>
Web Pages
</li>
<li>
Games
</li>
<li>
Productivity
</li>
<li>
Category 4
</li>
</ul>
</div>
<div class="content">
<h1>Valarie Pisarcik</h1>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Related
I some how managed to but an additional menu on all of my pages but the Home page. Now I cannot figure out how to get rid of it. It is not even appearing under menus. Not sure how I did it :)
https://www.talismantherapeuticriding.org/rider-cup/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
add the color in swiper might help
HTML
body{
margin:0;
padding:0;
background-image: url(tiger.jpg);
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
font-family:'Sigmar One', cursive;
}
.logo{
color:white;
font-size: 60px;
font-family: 'Sigmar One', cursive;
margin-left: 30px;
margin-top: -5px;
opacity: .8;
}
.menu{
list-style: none;
list-style-position: inside;
float: right;
margin-top: -120px;
font-family: 'Sigmar One', cursive;
}
ul li{
display: inline-block;
margin: 0 30px 0 0;
}
a{
text-decoration: none;
color:white;
font-size: 17px;
transition-duration: 2s;
}
**a:hover{
color: green;
opacity: .9;
}**
<!DOCTYPE html>
<html>
<head>
<title>Layout with HTML and CSS</title>
<link rel="stylesheet" href="Layout1.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Modak&family=Sigmar+One&display=swap" rel="stylesheet">
</head>
<body>
<h1 class="logo">Tiger</h1>
<nav class="menu">
<ul>
<li>Home</li>
<li>Timings</li>
<li>Diet</li>
<li><a href="">Weather<a></li>
<li>Contact Us</li>
</ul>
</nav>
<div class="content">
<h1 class="uc">I'm the true king of the jungle</h1>
<p class="bc" style="text-transform: capitalize important!;">Tiger are mavericks,these big cats are extremely fierce and its heart pumping
to come accross one in real worlk.
</p>
<div class="btn">
<button class="a">White Tiger</button>
<button class="a">Yellow Tiger</button>
</div>
</div>
</body>
</html>
I've tried:
li a:hover
ul li a:hover
.menu ul li a:hover
.menu a:hover
Hi guys please see the see css file for a:hover styling, I have used hover on other elements and its working fine, I've tried several combination with the block and lists, still not working. Please guide me on this as why its not working.
.content
{
align-items: center;
text-align:center;
/* border: 1px yellow solid; */
margin-top: 200px;
color: blue;
}
.content .uc
{
font-size: 45px;
font-family:'Sigmar One', cursive;
color: green;
/* border: 1px solid red; */
opacity: 1;
margin-bottom: -20px;
}
.content .bc
{
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
text-transform: capitalize;
opacity: 1;
color: white;
font-size: 12px;
}
.btn
{
justify-content: center;
padding-left: 60px;
}
button
{
background-color: transparent;
width: 300px;
height: 60px;;
border-radius: 7px;
color: white;
font-weight: bolder;
border:2px solid green;
margin-right: 40px;
transition-duration: 1s;
}
.a:hover
{
background-color:green;
color: black;
}
Please be sure there is no whitespace between : and hover
a: hover ❌
a:hover ✔
Just add
a:hover {
color: red;
font-weight: bold;
}
and it would work like a charm
.content {
align-items: center;
text-align: center;
/* border: 1px yellow solid; */
margin-top: 200px;
color: blue;
}
.content .uc {
font-size: 45px;
font-family: 'Sigmar One', cursive;
color: green;
/* border: 1px solid red; */
opacity: 1;
margin-bottom: -20px;
}
.content .bc {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
text-transform: capitalize;
opacity: 1;
color: white;
font-size: 12px;
}
.btn {
justify-content: center;
padding-left: 60px;
}
button {
background-color: transparent;
width: 300px;
height: 60px;
;
border-radius: 7px;
color: white;
font-weight: bolder;
border: 2px solid green;
margin-right: 40px;
transition-duration: 1s;
}
.a:hover {
background-color: green;
color: black;
}
a:hover {
color: red;
font-weight: bold;
}
<h1 class="logo">Tiger</h1>
<nav class="menu">
<ul>
<li>Home</li>
<li>Timings</li>
<li>Diet</li>
<li><a href="">Weather<a></li>
<li>Contact Us</li>
</ul>
</nav>
<div class="content">
<h1 class="uc">I'm the true king of the jungle</h1>
<p class="bc" style="text-transform: capitalize important!;">Tiger are mavericks,these big cats are extremely fierce and its heart pumping to come accross one in real worlk.
</p>
<div class="btn">
<button class="a">White Tiger</button>
<button class="a">Yellow Tiger</button>
</div>
</div>
The hover effect is working, but those elements are behind the .logo. Try adding position to .menu so that it appears over the .logo:
body {
margin: 0;
padding: 0;
background-image: url(tiger.jpg);
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Sigmar One', cursive;
background-color: orange;
}
.logo {
color: white;
font-size: 60px;
font-family: 'Sigmar One', cursive;
margin-left: 30px;
margin-top: -5px;
opacity: .8;
}
.menu {
list-style: none;
list-style-position: inside;
float: right;
margin-top: -120px;
font-family: 'Sigmar One', cursive;
position: relative;
}
ul li {
display: inline-block;
margin: 0 30px 0 0;
}
a {
text-decoration: none;
color: white;
font-size: 17px;
transition-duration: 2s;
}
a:hover {
color: green;
opacity: .9;
}
.content {
align-items: center;
text-align: center;
/* border: 1px yellow solid; */
margin-top: 200px;
color: blue;
}
.content .uc {
font-size: 45px;
font-family: 'Sigmar One', cursive;
color: green;
/* border: 1px solid red; */
opacity: 1;
margin-bottom: -20px;
}
.content .bc {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
text-transform: capitalize;
opacity: 1;
color: white;
font-size: 12px;
}
.btn {
justify-content: center;
padding-left: 60px;
}
button {
background-color: transparent;
width: 300px;
height: 60px;
;
border-radius: 7px;
color: white;
font-weight: bolder;
border: 2px solid green;
margin-right: 40px;
transition-duration: 1s;
}
.a:hover {
background-color: green;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout with HTML and CSS</title>
<link rel="stylesheet" href="Layout1.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Modak&family=Sigmar+One&display=swap" rel="stylesheet">
</head>
<body>
<h1 class="logo">Tiger</h1>
<nav class="menu">
<ul>
<li>Home</li>
<li>Timings</li>
<li>Diet</li>
<li><a href="">Weather<a></li>
<li>Contact Us</li>
</ul>
</nav>
<div class="content">
<h1 class="uc">I'm the true king of the jungle</h1>
<p class="bc" style="text-transform: capitalize important!;">Tiger are mavericks,these big cats are extremely fierce and its heart pumping to come accross one in real worlk.
</p>
<div class="btn">
<button class="a">White Tiger</button>
<button class="a">Yellow Tiger</button>
</div>
</div>
</body>
</html>
ul li a:hover{
color: green !important;
opacity: .9 !important;
}
It will definitely work. Try this.
I create a nav-bar but when ever I hover over the links there is this gap between the ul and a:hover. I'm just trying to figure out how to remove the gap and make the hover cover the whole area.
I tried removing the padding for the ul but the hover just breaks its container and makes the ul smaller.
I tried using the inspect tool on google chrome. It showing me that the padding for the ul is 1rem and a is 1rem but I don't understand where the gap is coming from.
I've set the universal selector to include padding and margin be set to 0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
<title></title>
<style>
:root{
--max-width: 1100px;
--dark-color: #333;
--light-color: #f3f3f3;
--primary-color: #93cb52;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Karla', sans-serif;
line-height: 1.5;
background: var(--light-color);
}
a{
color: black;
text-decoration: none;
}
ul {
list-style: none;
}
img {
width:100%;
}
/*Utility*/
.container {
max-width: var(--max-width);
margin:auto;
padding: 0 2rem;
overflor:hidden;
}
,btn {
display: inline-block;
border: none;
background: var(--dark-color);
color: #fff;
padding: 0.5rem 1.5rem;
}
.bg-dark {
background: var(--dark-color);
}
/*Main-nav*/
#main-nav .container{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
#main-nav .container h1 {
flex:2;
}
#main-nav ul{
display: flex;
justify-content:center;
align-items: center;
padding:1rem;
background: white;
}
#main-nav ul li a {
flex:1;
padding:1rem;
color: black;
}
#main-nav ul li a:hover{
background: #333;
color: #fff;
}
</style>
</head>
<body>
<nav id="main-nav" class="bg-dark">
<div class="container">
<h1 class="header-logo">Experience</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
I just want to know why there is a gap and how to remove it.
Your line-height attribute is to big for the height of the navbar. As a fix, just remove that attribute from this css tag:
body{
font-family: 'Karla', sans-serif;
/* line-height: 1.5; << Remove this guy */
background: var(--light-color);
}
Here an example JSFiddle from your code with that change.
Remove lineheight from body and padding rightand leftfrom ul like,
#main-nav ul{
display: flex;
justify-content:center;
align-items: center;
padding:1rem 0rem;
background: white;
}
body{
font-family: 'Karla', sans-serif;
background: var(--light-color);
}
I am working on a portfolio site template that will have a vertical, full-height menu to the left on displays of >= 1024px, and a horizontal, full-width, drop-down menu on mobile displays. The issue is that my drop-down menu items (the text itself, not the drop-down menu) is offset slightly to the right and not centered. I've played around with my CSS and I just can't seem to figure it out. Can anyone help?
$('#nav-status').click(function(e) {
e.preventDefault();
$('#navigation').toggle();
});
html,
body {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/wood-dark.png");
overflow-x: hidden;
font-family: "Oswald", sans-serif;
color: white;
text-align: center;
}
/*mobile rules*/
#media screen and (max-width: 1023px) {
#nav-status {
display: block;
width: 100%;
height: 32px;
padding: 2px;
background-color: rgba(0, 0, 0, 0.75);
}
ul {
display: none;
width: 100%;
background-color: rgba(0, 0, 0, 0.75);
overflow: hidden;
color: white;
}
li h1 {
font-size: 1.5em;
}
ul li {
width: 100%;
min-height: 32px;
padding: 2px;
display: block;
position: relative;
text-align: center;
}
li a:link,
a:visited,
a:active {
color: white;
font-family: "Oswald", sans-serif;
font-size: 1em;
text-decoration: none;
}
li a:hover {
color: #ba1d30;
font-family: "Oswald", sans-serif;
font-size: 1em;
text-decoration: none;
}
}
/*desktop rules*/
#media screen and (min-width: 1024px) {
#nav-status {
display: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
background-color: rgba(0, 0, 0, 0.85);
height: 100%;
position: fixed;
overflow: hidden;
}
li h1 {
font-size: 3em;
}
ul li {
color: white;
margin: auto;
width: 50%;
padding: 2px;
}
li a:link,
a:visited,
a:active {
color: white;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-decoration: none;
}
li a:hover {
color: #ba1d30;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-decoration: none;
font-style: italic;
}
}
<body>
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nerdcatkiss.png" alt="Kissy Cat">
<ul id="navigation">
<li>
<h1>Explore</h1>
</li>
<li>
Web Pages
</li>
<li>
Games
</li>
<li>
Productivity
</li>
<li>
Project 4
</li>
</ul>
</div>
</body>
Here is a link to my Codepen in case that helps.
You have a bit of padding to your ul element.
Just do ul { padding : 0; }. That's it.
I am trying to learn how to use templates in Web pages. Thanks to something I found on stackoverflow, I have the basics going. Now I want some control over the formatting. I found an example which looks nice so I thought I would use it to learn something. I'll show 2 images so the problem will be clear:
I don't really care about the form itself. It just serves as an example to learn something. There are a couple of things I would like to control over:
1) Notice in the original that the Company Name is placed nicely with respect to the jpeg image. In my case it is stuck to the left.
2) In the original if I expand the Firefox window the form stays centered and there is white space on both sides. In my case the Primefaces controls take the whole window and they are too high, cutting off part of the jpeg image.
I saw the original uses style.css so I tried to copy and paste different items, but nothing gave me the control I'm looking for. I'll show the only thing in style.css which makes any difference:
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
This is the beginning of the original form
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Xhtml18</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1>Company <span>Name</span></h1>
<p>Nice Slogan Goes Here</p>
</div>
<div id="menu">
<ul>
<li class="current_page_item">Homepage</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>SUPPORT</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
I tried putting in all the inner definitions, but they made no difference. I have my version much simpler
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Master template</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</h:head>
<h:body>
<div id="logo">
<h1>Company <span>Name</span></h1>
<p>Nice Slogan Goes Here</p>
</div>
<ui:insert name="AreaOne">Default text</ui:insert>
</h:body>
</html>
Finally in my xhtml file the crucial step which allows me to do the templating
<h:body>
<ui:composition template="master.xhtml">
<ui:define name="AreaOne">
So that the major point of templating seems to be working, just I need some more control over it. Sorry for the long message but I think I need it all to explain the problem.
EDIT:
I don't know how to add a file per se, so I'll spell it out as code
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #000;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2.8em;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
text-decoration: none;
color: #419725;
}
a:hover {
}
#wrapper {
margin: 0 auto;
padding: 0;
}
/* Header */
#header-wrapper {
height: 234px;
}
#header {
width: 950px;
margin: 0 auto;
padding: 0px 0px 0px 30px;
}
/* Logo */
#logo {
float: left;
width: 500px;
margin: 0px;
padding: 30px 0px 0px 60px;
color: #f7f7f7;
}
#logo h1, #logo p {
}
#logo h1 {
padding: 0px 0px 0px 0px;
letter-spacing: -1px;
font-size: 3.8em;
background: redc;
}
#logo h1 span {
color: #efc527;
}
#logo p {
margin: 0;
padding: 0px 0px 0px 0px;
font-size: 16px;
color: #fff;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #f7f7f7;
}
/* Search */
#search {
float: left;
width: 280px;
height: 40px;
padding: 0px;
}
#search form {
height: 40px;
margin: 0;
padding: 0px 0 0 10px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: 1px solid #DEDEDE;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 22px;
border: none;
background: #e4e4e4;
color: #171d21;
}
/* Menu */
#menu {
float: right;
width: 950px;
height: 50px;
margin: 0 auto;
padding: 0;
}
#menu ul {
float: left;
margin: 0;
padding: 74px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
margin-right: 1px;
padding: 16px 20px 15px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #fff;
border: none;
}
#menu a:hover, #menu .current_page_item a {
background: #131618;
text-decoration: none;
color: #FFFFFF;
}
#menu .current_page_item a {
}
/* Page */
#page {
width: 990px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
background: url(images/img03.jpg) repeat-y left top;
}
#page-bgtop {
padding: 40px 0px 20px 0px;
background: url(images/img02.jpg) no-repeat left top;
}
/* Content */
#content {
float: left;
width: 720px;
padding: 0px 0px 0px 0px;
}
.post {
margin-bottom: 40px;
border-bottom: 1px dotted #E7E2DC;
margin-right: 10px;
}
.post .title {
height: 41px;
padding: 7px 0px 0px 30px;
letter-spacing: -.5px;
}
.post .title a {
border: none;
color: #000;
}
.post .meta {
margin-bottom: 30px;
padding: 0px 30px 0px 30px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
font-style: italic;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 30px 20px 30px;
padding-bottom: 20px;
text-align: justify;
}
.links {
padding-top: 20px;
font-size: 12px;
font-weight: bold;
}
/* Sidebar */
#sidebar {
float: right;
width: 240px;
margin: 0px;
padding: 0px 20px 0px 10px;
color: #fff;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}
#sidebar li li {
line-height: 35px;
border-bottom: 1px dotted #E7E2DC;
margin: 0px 30px;
border-left: none;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar li li a {
padding: 0px 0px 0px 15px;
}
#sidebar h2 {
height: 38px;
padding-left: 30px;
letter-spacing: -.5px;
font-size: 1.8em;
color: #fff;
}
#sidebar p {
margin: 0 0px;
padding: 0px 30px 20px 30px;
text-align: justify;
}
#sidebar a {
border: none;
color: #efc527;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
}
#calendar tbody td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/* Footer */
#footer {
height: 50px;
margin: 0 auto;
padding: 0px 0 30px 0;
font-family: Arial, Helvetica, sans-serif;
border-top: 5px solid #4ac221;
width: 990px;
background: #262626;
}
#footer p {
margin: 0;
padding-top: 40px;
line-height: normal;
font-size: 9px;
text-transform: uppercase;
text-align: center;
color: #fff;
}
#footer a {
color: #fff;
}
Your brackground has the center attribute, that's why you've got your logo on the center and the text is not on it.
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
You can remove the center attribute or you can move the text by doing something like that (just an example!)
<div align="center"><h1>Company <span>Name</span></h1></div>
Then, to stop your primefaces' components to autoresize, you've got to override the default css.
I guess that you're using a PanelGrid, so you can try with
<p:panelGrid columns="2" style="width: 200px !important">....</p:panelGrid>
I'm not sure that !important is required, but basically you've got to give a fixed width to the component to stop it from auto-resizing
EDIT:
If you want to apply your style to every p:panelGrid component, you should consider overriding the whole css class.
Just take a look here to know the css class names of each primefaces component :
http://primefaces.googlecode.com/files/primefaces_users_guide_3_2.pdf