<head>
<title>WCK&TMB</title>
<style>
* {
margin: 0px;
padding: 0px;
}
html, body {
width: 100%;
background-color: #FFC18F;
}
div#container {
width: 100%;
min-width: 1024px;
}
header {
height: 100px;
width: 100%;
background-color: #ff8400;
text-align: center;
}
header img {
clear: left;
float: left;
margin: 10px;
}
header a#purchase {
background: url("http://i.imgur.com/RJe8a1D.png") repeat-x;
width: 500px;
height: 25px;
margin: 30px;
padding: 5px;
border: 3px double #ccc;
text-align: center;
float: right;
font-family: Arial;
font-size: 20px;
text-decoration: none;
color: #ffffff;
}
section#main {
padding: 0px 0px 10px 0px;
text-align: center;
}
section#main div#head_announcements {
padding-top: 10px;
color: #000;
font-family: "Arial";
}
section#main div#head_announcements h2 {
font-size: 24px;
font-weight: lighter;
line-height: 26px;
}
section#main h2 a {
color: #FFFFFF;
text-decoration: none;
}
section#main h2 a:hover {
color: #000000;
}
section#main nav {
background: url("./images/navBG.png") repeat-x;
width: 100%;
height: 35px;
text-align: center;
}
section#main nav a.link {
font-family: "Century Gothic";
text-decoration: none;
color: white;
font-size: 25px;
vertical-align: top;
float:center;
}
section#main nav a.link:nth-of-type(1) {
float:center;
}
section#main nav a.link:hover {
color: #39F;
}
section#main nav a.link.active {
color: #39F;
}
section#main section#frames {
margin-top: 10px;
width: 100%;
}
section#main section#frames iframe {
border: 0px;
outline: 0px;
overflow: hidden;
margin: 0px;
padding: 0px;
}
section#main section#frames iframe#frame1 {
width: 650px;
height: 450px;
background-color: black;
}
section#main section#frames iframe#frame2 {
width: 350px;
height: 450px;
}
footer {
padding: 10px 0px 10px 0px;
width: 100%;
text-align: center;
height: 110px;
}
</style>
</head>
URL: http://skyaccess.se/forum/misc.php?page=hdppvs
I can't seem to center the navigation bar text. Can someone please correct this?
Also, I'm trying to learn CSS so if anyone could show me a great site, I'd be very thankful. Considering paying $29/mo are some interaction website with points.
add float:left in your css:
section#main nav {
background: url("./images/navBG.png") repeat-x;
width: 100%;
height: 35px;
text-align: center;
float: left;
also add this css for create gaping between navigation: "padding-right: 40px;".
section#main nav a.link {
font-family: "Century Gothic";
text-decoration: none;
color: white;
font-size: 25px;
vertical-align: top;
float: center;
padding-right: 40px;
Related
I am trying to convert a chat widget template so that:
The height and width of the container div are 100%.
A vertical scroll appears if the member list exceeds the screen size so that the user can scroll through the rest of the member list.
The textarea to type messages is visible all the time. Currently, the user has to scroll down to see it.
I have managed to achieve the first thing on my list but not the second and third. How would you do it?
Here is where I am at so far:
#import url(https://fonts.googleapis.com/css?family=Lato:400,700);
*, *:before, *:after {
box-sizing: border-box;
}
body {
background: #C5DDEB;
font: 14px/20px "Lato", Arial, sans-serif;
padding: 0;
color: white;
}
.container {
margin: 0 auto;
width: auto;
background: #444753;
border-radius: 5px;
}
.people-list {
width: 260px;
float: left;
}
.people-list .search {
padding: 20px;
}
.people-list input {
border-radius: 3px;
border: none;
padding: 14px;
color: white;
background: #6A6C75;
width: 90%;
font-size: 14px;
}
.people-list .fa-search {
position: relative;
left: -25px;
}
.people-list ul {
padding: 20px;
height: 770px;
}
.people-list ul li {
padding-bottom: 20px;
}
.people-list img {
float: left;
}
.people-list .about {
float: left;
margin-top: 8px;
}
.people-list .about {
padding-left: 8px;
}
.people-list .status {
color: #92959E;
}
.chat {
width: auto;
float: left;
background: #F2F5F8;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color: #434651;
}
.chat .chat-header {
padding: 20px;
border-bottom: 2px solid white;
}
.chat .chat-header img {
float: left;
}
.chat .chat-header .chat-about {
float: left;
padding-left: 10px;
margin-top: 6px;
}
.chat .chat-header .chat-with {
font-weight: bold;
font-size: 16px;
}
.chat .chat-header .chat-num-messages {
color: #92959E;
}
.chat .chat-header .fa-star {
float: right;
color: #D8DADF;
font-size: 20px;
margin-top: 12px;
}
.chat .chat-history {
padding: 30px 30px 20px;
border-bottom: 2px solid white;
overflow-y: scroll;
height: 575px;
}
.chat .chat-history .message-data {
margin-bottom: 15px;
}
.chat .chat-history .message-data-time {
color: #a8aab1;
padding-left: 6px;
}
.chat .chat-history .message {
color: white;
padding: 18px 20px;
line-height: 26px;
font-size: 16px;
border-radius: 7px;
margin-bottom: 30px;
width: 90%;
position: relative;
}
.chat .chat-history .message:after {
bottom: 100%;
left: 7%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #86BB71;
border-width: 10px;
margin-left: -10px;
}
.chat .chat-history .my-message {
background: #86BB71;
}
.chat .chat-history .other-message {
background: #94C2ED;
}
.chat .chat-history .other-message:after {
border-bottom-color: #94C2ED;
left: 93%;
}
.chat .chat-message {
padding: 30px;
}
.chat .chat-message textarea {
width: 100%;
border: none;
padding: 10px 20px;
font: 14px/22px "Lato", Arial, sans-serif;
margin-bottom: 10px;
border-radius: 5px;
resize: none;
}
.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o {
font-size: 16px;
color: gray;
cursor: pointer;
}
.chat .chat-message button {
float: right;
color: #94C2ED;
font-size: 16px;
text-transform: uppercase;
border: none;
cursor: pointer;
font-weight: bold;
background: #F2F5F8;
}
.chat .chat-message button:hover {
color: #75b1e8;
}
.online, .offline, .me {
margin-right: 3px;
font-size: 10px;
}
.online {
color: #86BB71;
}
.offline {
color: #cccccc;
}
.busy {
color: #E38968;
}
.me {
color: #94C2ED;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.float-right {
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
This will do:
.chat .chat-history {
height: calc(100vh - 278px);
overflow-y: auto;
}
.people-list {
height: 100vh;
overflow-y: auto;
}
Updated codepen: https://codepen.io/anon/pen/BRxXmV
This is the code associated with the assignment I am working on in my web development class. The W3C CSS Validator keeps giving me the following message: "64 Parse Error [:]". What is this and how do I fix it? Please help!
Here is my css:
* {
box-sizing: border-box;
}
body {
background-color: #ffffff;
color: #666666;
background-image: url(../images/background.jpg);
font-family: Verdana, Arial, sans-serif;
}
#wrapper {
background-color: #90c7e3;
width: 80%;
min-width: 700px;
max-width: 1024px;
box-shadow: 10px 10px 5px #888888;
margin-right: auto;
margin-left: auto;
}
header {
background-color: #000033;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
}
h1 {
background-image: url(../images/sunset.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 20px;
height: 72px;
line-height: 200%;
margin-bottom: 0;
}
nav {
float: left;
width: 160px;
padding-top: 20px;
padding-right: 5px;
padding-left: 20px;
padding-bottom: 0;
padding: 5px;
font-weight: bold;
}
nav a {
text-decoration: none;
}
nav a:hover {
color: #ffffff;
}
nav a:link: {
color: #000033;
}
nav a:visited {
color: #344873;
}
nav ul {
list-style-type: none;
margin: 0;
padding-left: 0;
}
main {
background-color: #ffffff;
margin-left: 170px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 20px;
padding-right: 20px;
display: block;
}
h2 {
color: #3399cc;
font-family: Georgia, "Times New Roman", serif;
}
h3 {
color: #000033;
}
dt {
color: #000033;
font-weight: bold;
}
.resort {
color: #000033;
font-size: 1.2em;
}
#homehero {
background-image: url(../images/coast.jpg);
height: 300px;
background-size: 100% 100%;
margin-right: 0;
margin-left: 170px;
background-repeat: no-repeat;
}
#yurthero {
background-image: url(../images/yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 300px;
margin-left: 170px;
}
#trailhero {
background-image: url(../images/trail.jpg);
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 170px;
}
footer {
background-color: #ffffff;
margin-left: 170px;
font-size: .70em;
font-style: italic;
text-align: center;
padding: 10px;
}
header, nav, main, footer {
display: block;
}
It's because of nav a:link: {
Replace it with nav a:link {
I don't know how to place a "+" in my CSS. Take a closer look at the "Donator+" div.
body
{
margin: 0;
padding: 0;
font-family: "Arial", serif;
}
.nav
{
background-color: #595959;
color: #ffffff;
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
border-bottom: 3px solid #1b1b1b;
}
.nav > li
{
display: inline-block;
padding: 0 25px 0 25px;
}
.nav > li > a
{
text-decoration: none;
color: #ffffff;
}
.nav > li > a:hover
{
color: #1b1b1b
}
.line
{
width: 100%;
height: 0;
border-bottom: 2px solid #353535;
}
.image
{
display: block;
max-width: 100%;
height: auto;
}
div.vip
{
vertical-align: top;
display: inline-block;
text-align: left;
width: 190px;
height: 215px;
margin-left: 350px;
margin-top: 70px;
}
div.price-vip
{
font-weight: bold;
font-size: 85%;
}
div.name-vip
{
margin-top: 20px;
font-size: 85%;
font-weight: bold;
}
div.donator
{
vertical-align: top;
display: inline-block;
text-align: left;
width: 190px;
height: 165px;
margin-left: 320px;
margin-top: 70px;
}
div.price-donator
{
font-weight: bold;
font-size: 85%;
}
div.name-donator
{
font-size: 85%;
font-weight: bold;
margin-top: 20px;
}
div.donator+
{
vertical-align: top;
display: inline-block;
text-align: left;
width: 190px;
height: 165px;
margin-left: 320px;
margin-top: 70px;
}
div.price-donator+
{
font-weight: bold;
font-size: 85%;
}
div.name-donator+
{
margin-top: 20px;
font-size: 85%;
font-weight: bold;
}
You just need to escape the character in your selector:
div.name-donator\+ {
but don't escape it in the HTML:
<div class="name-donator+">
See I don't know what you are trying, but here is little explanation regarding css + selector,
element + element - selects all elements that are immediately placed after another element parent element, not parent element and child inside of it, to select and style child element you have to use css > selector.
.div1{
width:200px;
height:200px;
background:#111;
}
.div2{
width:200px;
height:200px;
background:#f2f;
}
.div1 + .div2{
background:#f22;
}
<div class="div1"></div>
<div class="div2"></div>
I've tried everything. I've tried to refresh the page multiple times, I've tried uploading various ways to ensure that the css file is updated. Nothing seems to work. My media queries don't seem to be overriding them, but in Dreamweaver, they work just fine.
Here is the code for the CSS:
header {
width: 100%;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
position: fixed;
top: 10px;
left: 0px;
right: 0px;
height: 55px;
border-bottom: 4px solid #636466;
margin-bottom: 10px;
margin-top: 0px;
}
#logo {
float: left;
background-image: url(wordsbyperla_wordpress%20header_small.png);
background-repeat: no-repeat;
height: 50px;
width: 40%;
position: absolute;
margin-top: 24px;
max-width: 411px;
background-size: 100%;
min-width: 300px;
background-position: bottom;
margin-bottom: 10px;
}
nav {
top: 40px;
position: absolute;
right: 3%;
width: auto;
vertical-align: text-bottom;
height: auto;
padding: 0;
font-size: 12px;
}
nav li {
list-style: none;
display: inline-block;
vertical-align: bottom;
height: auto;
top: auto;
}
.menu-item {
text-decoration: none;
list-style: none;
font-family: "Courier";
background-color: transparent;
width: auto;
display: inline-block;
margin-right: 20px;
}
.menu-item a , .menu-item a:visited, .menu-item a:active{
color: #000;
text-decoration: none;
list-style: none;
}
.menu-item a:hover {
color: #EC2726;
}
#searchform {
font-family: "Courier";
border: 1px solid #000000;
margin-bottom: 1px;
background-color: #fff;
}
#s {
border: none;
font-family: "Courier";
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
background-color: transparent;
margin-left: 5px;
}
#searchsubmit {
border: none;
font-family: "Courier";
margin: 0;
background-color: transparent;
}
#contentWrap {
position: absolute;
top: 100px;
right: 0px;
width: 100%;
overflow: auto;
bottom: 50px;
margin-right: 0px;
margin-top: 10px;
margin-left: 0px;
}
.meta {
width: 25%;
position: relative;
font-family: "Courier";
font-size: 12px;
margin-top: 20px;
margin-right: 70%;
margin-left: 0px;
max-width: 200px;
min-width: 100px;
}
.meta div {
text-decoration: none;
text-align: right;
padding-right: 20px;
padding-top: 0px;
}
.meta div a {
text-decoration: none;
color: #000;
}
.meta div a:hover, .meta div a:active {
color: #EC2726;
}
.meta span {
color: #EC2726;
text-transform: lowercase;
}
#tags {
color: #000;
margin-right: 10px;
right: auto;
width: auto;
}
.meta .pagination {
position: fixed;
left: 2%;
font-size: 14px;
font-family: "Courier";
bottom: 35px;
text-decoration: none;
max-width: 200px;
vertical-align: middle;
text-align: right;
right: 70%;
width: 23%;
}
.meta .pagination ul {
padding-right: 25px;
}
.meta .pagination li {
display: inline-block;
list-style: none;
text-decoration: none;
font-family: "Courier";
color: #000;
}
.meta .pagination a , .meta .pagination a:visited{
text-decoration: none;
text-align: left;
margin: 0;
color: #000;
}
.meta .pagination a:hover , .meta .pagination a:active {
color: #EC2726;
}
.meta2 {
height: auto;
width: 75%;
margin-left: 21%;
position: relative;
padding-left: 15px;
min-width: 300px;
top: -50px;
}
.meta2 a , .meta2 a:visited {
font-family: "Helvetica Neue";
text-transform: lowercase;
font-style: normal;
font-weight: bolder;
text-decoration: none;
color: #000;
font-size: 18px;
margin-top: 10px;
}
a:hover, a:active, .meta2 a:hover{
color: #EC2726;
}
.entry p {
font-family: Helvetica;
font-size: 12px;
font-style: normal;
font-weight: 200;
margin-bottom: 50px;
margin-top: -15px;
}
footer {
margin-top: 10px;
position: fixed;
bottom: 10px;
width: 100%;
height: 30px;
/* [disabled]background-color: #f7f7f7; */
border-top: 3px inset #636466;
font-family: Courier;
font-size: 10px;
/* [disabled]display: inline; */
left: 0px;
}
footer ul {
float: right;
margin-right: 3%;
/* [disabled]margin-left: 5px; */
display: inline-block;
width: auto;
list-style: none;
}
And here is the code for the #media query for the iPhone 6:
/*iphone 6+*/
#media (device-width:414px) and (device-width:736px) and (-webkit-device-pixel-ratio: 3){
#contentWrap {
top: 85px;
}
#logo {
width: 90%;
}
.meta {
margin-top: 20px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
width: 100%;
max-width: none;
top: auto;
padding: 0;
text-align: right;
}
.meta div {
margin: 0;
text-align: right;
padding: 0;
width: 100%;
}
.meta2 {
width: 96%;
max-width: none;
margin-top: 55px;
margin-right: 3%;
margin-left: 3%;
padding: 0;
margin-bottom: auto;
}
.entry p {
margin-top: -15px;
padding: 0;
width: 100%;
margin-left: 0px;
margin-right: 0px;
}
.meta .pagination {
width: 100%;
max-width: none;
text-align: center;
bottom: 25px;
height: 30px;
vertical-align: middle;
}
footer {
position: fixed;
height: 7px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
footer ul {
margin-bottom: auto;
margin-top: auto;
text-align: center;
margin-right: auto;
margin-left: auto;
padding: 0;
float: none;
}
footer li {
margin: auto;
text-align: center;
float: none;
}
nav {
padding-top: 0;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 0;
top: -10px;
text-align: center;
/* [disabled]margin-left: 3%; */
/* [disabled]margin-right: 8%; */
width: 100%;
}
.meta div {
margin: 0;
text-align: right;
padding: 0;
width: 100%;
}
}
I cant seem to figure out why the h1 tag is showing differently on mobile browsers.
The site is www.jd-financialservices.co.uk When I view the site on my desktop everything is fine. When I view it on my Nexus 4 however, the 10px gap between h1 and the .topbar div has gone. It's the same on Opera, Firefox and Chrome.
Can anyone help please?
Thank you in advance.
I would advise against using position:relative; and negative top on all of your elements.
With some minor changes to your css you will probably find that it fixes itself: here is my updated version of your css. See if that fixes things.
I updated: aside nav h1 .welcome and footer. By changing some of the header elements to use position:absolute and then using margin to space elements out. You will probably find the css is more compatible cross-browser/device.
#font-face { font-family: 'Constantia'; src: url('constantia/constantia.eot'); src: url('constantia/constantia.eot?#iefix') format('embedded-opentype'), url('constantia/constantia.svg#Constantia') format('svg'), url('constantia/constantia.woff') format('woff'), url('constantia/constantia.ttf') format('truetype'); font-weight: normal; font-style: normal;}
* {
margin-top: 0px;
margin-bottom: 0px;
}
html {
font-family: 'droid sans';
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
body {
width: 940px;
margin: 0 auto;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: underline;
}
header a:hover {
text-decoration: none;
}
h1 {
font-family: 'Constantia', helvetica;
position: absolute;
top: 20px;
}
header {
height: 140px;
position: relative;
margin-bottom: 40px;
}
nav {
width: 660px;
height: 30px;
background-color: #00788a;
position: absolute;
font-size: 1.2em;
bottom: 0;
right: 0;
}
nav li a {
color: #ffffff;
}
nav a:hover {
text-decoration: underline;
}
nav ul {
padding-left: 0px;
}
nav ul li {
display: inline;
line-height: 30px;
vertical-align: middle;
color: #ffffff;
padding-left: 70px;
padding-right: 65px;
}
aside {
height: 600px;
width: 240px;
float: left;
background-color: #00788a;
color: #ffffff;
clear: both;
position: relative;
text-align: center;
margin-bottom: 30px;
}
article a {
color: #00788a;
}
.contain {
width: 940px;
}
footer {
height: 100px;
clear: both;
background-color: #00788a;
color: rgba(255,255,255,0.5);
position: relative;
font-size: 0.85em;
padding: 0 10px;
line-height: 1.5em;
margin-top: 40px;
}
footer li {
display: inline;
border-left: 2px solid rgba(255,255,255,0.5);
padding: 0 5px;
}
footer li:first-child {
border: none;
}
footer ul {
padding-left: 0;
text-align: center;
}
.foot_fade {
color: rgba(255,255,255,0.5);
}
.first_initial {
font-size: 110px;
color: #00788a;
font-weight: lighter;
}
.second_initial {
font-size: 101px;
color: #00788a;
font-weight: lighter;
position: relative;
top: -6px;
}
.rest_of_title {
font-size: 26px;
position: relative;
left: -73px;
top: 20px;
font-weight: lighter;
}
header a {
color: #000000;
}
.header_background {
float: right;
position: relative;
z-index: -1;
}
.topbar {
width: 940px;
height: 30px;
background-color: #00788a;
}
.call_now {
padding: 10px 50px 10px 50px;
font-size: 1.5em;
line-height: 1.5em;
border-bottom: 5px solid #ffffff;
text-shadow: 2px 2px 2px #2a2a2a;
}
.home_service {
padding: 10px 40px 10px 40px;
font-size: 1.45em;
line-height: 1.5em;
border-bottom: 5px solid #ffffff;
text-shadow: 2px 2px 2px #2a2a2a;
}
.service_list {
font-size: 1.25em;
line-height: 3em;
text-align: left;
padding-top: 35px;
padding-left: 20px;
text-shadow: 2px 2px 2px #2a2a2a;
}
.welcome {
width: 660px;
float: right;
padding: 0px 0px 0px 40px;
font-size: 0.9em;
line-height: 2em;
color: #2a2a2a;
position: relative;
/* top: -95px; */
text-align: justify;
}
.services {
width: 660px;
float: right;
padding: 0px 0px 0px 40px;
position: relative;
top: -95px;
}
.services a {
text-decoration: none;
position: absolute;
top: 151px;
left: 0;
width: 275px;
color: #ffffff;
background-color: rgba(0,0,0,0.5);
padding: 10px 0 10px 10px;
}
.services div {
margin-bottom: 15px;
}
.services div:last-child {
margin-bottom: 0;
}
.savings_pic {
position: relative;
height: 190px;
width: 285px;
}
.retire_pic {
position: absolute;
top: 0;
right: 0;
height: 190px;
width: 285px;
}
.protection_pic {
position: relative;
height: 190px;
width: 285px;
}
.insurance_pic {
position: absolute;
top: 205px;
right: 0;
height: 190px;
width: 285px;
}
.mortgage_pic {
position: relative;
height: 190px;
width: 285px;
}
.retire {
width: 300px;
float: right;
margin: 0 0 10px 10px;
}
/*.shadow {
box-shadow: 0 0 3px 1px rgba(42,42,42,0.5);
margin: 3px 0;
}*/
.overlay {
background-color: rgba(0, 0, 0, 0.5);
bottom: 54px;
color: #FFFFFF;
padding: 10px;
position: relative;
width: 265px;
}
.overlay a {
text-decoration: none;
color: #ffffff;
}
.overlay a:hover {
}
.left {
float: left;
}
.right {
float: right;
}
.regulation {
font-style: italic;
color: #9a9a9a;
font-size: 0.9em;
}
.smallprint {
width: 520px;
font-size: 0.9em;
text-align: center;
position: absolute;
right: 210px;
top: 30px;
}
.copyright {
width: 310px;
margin: 0 auto;
}
.scapa {
position: absolute;
bottom: 0;
right: 10px;
font-size: 0.9em;
}