I tried a lot, but wasn't able to fix it. I am not able to align the header and footer.
JSFIDDLE: http://jsfiddle.net/80hrz44f/
I get this layout for the custom css code given below
body{
font-family: 'Sorts Mill Goudy', sans-serif;
padding-top: 40px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
font-family: 'Sorts Mill Goudy', sans-serif;
color: #ddd;
}
.navbar .navbar-collapse {
text-align: center;
font-family: 'Sorts Mill Goudy', sans-serif;
color: #ddd;
}
#media (min-width: 1200px) {
.container{
max-width: 850px;
}
}
header{
background-color: #333;
}
footer{
background-color: #333;
color: #ddd;
padding: 20px;
text-align: center;
}
aside{
background-color: #0000;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
But when I add the following header part to the custom CSS code, I get the following layout
header{
background-color: #333;
}
Add this style in your css file
header.container {
padding: 0;
}
modify like this
.container
{
padding-left:0; //in your code 15px;
padding-right:0; //in your code 15px;
}
.navbar
{
margin-bottom:20px; // remove this
}
Related
Css wont validate and I keep getting these errors. I have an ending bracket, so I'm not sure what the problem is. There's a parse error on line 39. Unrecognized media only on lines 79 and 81. Then on lines 79 and 89 those have the parse error. If anyone could help that would be greatly appreciated.
39. nav a:{text-decoration:none;
font-weight: bold; }
nav a:link {color: #ffffff;}
nav a:visited {color: #808080;}
nav a:hover {color: #ff0000; }
h1 {text-align: center;
color: #ffffff;
font-family: CustomHeaderFont}
h2 { text-align: center;
color: #ffffff;
font-family: CustomHeaderFont}
h3 {text-align: center;
color: #ffffff;
font-family: CustomHeaderFont}
p { font-family: CustomFont;
color: #ffffff;
text-align: center;}
ul li { padding: 5px 0px; }
footer { font-size: 90%;
text-align: center;
clear: right;
padding: 15px;
color: #ffffff;
font-family: CustomFont;
}
70. #media only screen and (max-width: 1024px){
body { margin: 0; }
#wrapper { width: auto; }
main {margin-left: 0;}
nav {float: none; width: auto; }
nav li { display: inline-block; padding: 0.5em; }
nav ul { text-align: center; }
nav a { border-style: none; }
h1, h2,h3 { font-size: 120%; }
79. p { font-size: 90%; } }
81. #media only screen and (max-width: 768px) {
h1, h2, h3{ font-size: 100%; }
p { font-size: 90%; }
main { margin: 0.5%;
width: auto ;}
nav, nav ul, nav li { padding: 0;}
nav li { display: block; }
aside { display: none; }
89. }
#font-face {
font-family: CustomFont;
src: url(Font/GlacialIndifference-Regular.otf); }
#font-face {
font-family: CustomHeaderFont;
src: url(Font/BLURRYFACE.ttf);
}
form { background-color: #000000;
font-family: CustomFont;
padding: 10px;
}
fieldset{ width: 320px;
border: 2px ridge #ff0000;
padding: 10px;
margin-bottom: 10px;
}
legend { font-family: CustomHeaderFont;
font-weight: bold;
}
label { float: left;
width: 100px;
clear: left;
text-align: right;
padding-right: 10px;
margin-top: 10px;
font-family: CustomFont;
}
textarea, submit {margin-top: 10px;
display: block;
}
input checkbox {display: inline;
margin-bottom: 60px;}
table { border: 5px solid #ff0000;
width: 600px;
margin: auto;
}
td, th {border: 1px solid #ff0000;
padding: 0.5em;
font-family: CustomFont;}
caption { font-family: CustomHeaderFont;
font-weight: bold;
font-size: 1.2em;
padding-bottom: 0.5em;
}
there is a : after a on line 39
I'm trying to make a page with text floated left and the image floated right. I accomplished that, but my webpage images and text need to be able to properly resize. and width in css aren't working for me, unlike in my home page, so I was wondering if anyone could fix it.
<section>
<div id="right">
<img src="../img/placeholder.png" alt="Photo of --">
<p>--</p>
</div>
<p id="left">Web and Graphic Designer beginner,<wbr>blah blah.</p>
</section>
and the css (I included all of it just in case, but the most relevant part is the bottom PAGE PORTFOLIO):
/*ABOUT CSS*/
/*GENERAL*/
body {
}
ul {
list-style: none;
}
/*section*/
section {
max-width: 940px;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 300;
margin: 0 auto;
padding: 0;
color: gray;
}
/*all styling*/
* {
background-color: #f2f2f2;
}
/*all links*/
a {
text-decoration: none;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 300;
color: gray;
}
/*visited links and hover links*/
a:visited {
color: #838383;
}
a:hover {
font-size:105%;
}
/*HEADING*/
/*header*/
h1 {
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
line-height: 0.5em;
color: #8c8c8c;
width: 100%;
}
/*subhead*/
h2 {
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
color: #8c8c8c;
width: 100%;
}
/*NAVIGATION*/
nav {
text-align: center;
padding: 10px 0;
}
/*horizontal nav*/
nav li {
display: inline;
}
nav a {
display: inline-block;
padding: 2% 2%;
}
/*FOOTER*/
footer {
font-size:0.75em;
text-align: center;
clear: both;
}
/*social media*/
footer {
text-align: center;
margin: 0 5px;
padding: 15px 15px;
}
#twitter img {
width: 46px;
height: 37px;
margin: 0 auto;
padding: 15px 15px;
}
#facebook img {
width: 40px;
height: 40px;
margin: 0 auto;
padding: 15px 15px;
}
/*PAGE PORTFOLIO*/
#right {
float: right;
width: 40%;
height: 40%;
}
#left {
float: left;
}
What's wrong here
Used your code except for:
p+img {
width:50px;
height:50px;
text-wrap:true;
float:left;
}
which is for extra text
I'm using this css code for mobile device. In chrome it looks ok, but in FireFox this code isn't running, so my website doesn't change. What should i do?
#media (min-width: 220px) and (max-width: 480px) {
.nav a {
color: #5a5a5a;
font-size: 14px;
padding: 14px 10px;
font-family: 'Open Sans', sans-serif;
}
.nav ul.pull-left{
padding-top: 5px;
padding-left: 80px;
}
.nav ul.pull-right{
padding-top: 30px;
}
.nav li {
display: inline;
padding-bottom: 5px;
}
.nav-account{
background-color: #204056;
}
.nav-account a {
color: #fff;
font-size: 13px;
padding: 14px 10px;
font-family: 'Open Sans', sans-serif;
}
.nav-account ul.pull-right{
padding-top: 10px;
}
.nav-account li {
display: inline;
padding-bottom: 10px;
}
.site-header {
width: 100%;
height: 100%;
min-height: 50vh;
position: relative;
text-align: center;
background: url(../images/novotel.jpg) no-repeat center center/cover;;
}
}
I think you need to add the media type after "#media".
Try #media all and (min-width: 220px) and (max-width: 480px) {
...
}
I'm trying to get my background image to show at the top center of the page. The image works fine if I do:
<style>
body {
background: #FFF url('img/top_logo_blank_small.png') no-repeat fixed;
}
</style>
I can't seem to work out where I've gone wrong. There must be something I've managed to mess up, I just can't see it. Here is the CSS:
body {
font-family: 'Quattrocento Sans', helvetica, sans-serif;
background: #EEE url('img/top_logo_blank_small.png') no-repeat fixed;
color: #fff;
margin: 0;
padding: 0;
}
a {
color: black;
text-decoration: none;
}
/* Typography */
.header h1 {
position: absolute;
width:100%;
top: 50%;
margin-top: -20px;
text-align: center;
letter-spacing: 4px;
}
.header h1 em {
font-size: 1.200em;
font-style: normal;
}
h1 {
font-size: 2.2em;
color: #fff;
}
.content h2 {
font-size: 1.75em;
color: #fff;
letter-spacing: 4px;
text-align: center;
}
.content h2 em {
font-size: 1.2em;
font-style: normal;
}
.content h3 {
text-align: center;
font-size: 1.0em;
font-weight: normal;
color: #ede0ed;
letter-spacing: 1px;
margin-bottom: 25px;
}
.content h4 {
margin-top: 0;
text-align: center;
font-size: 0.8em;
font-weight: normal;
color: #ede0ed;
letter-spacing: 1px;
}
#banner p {
text-align: center;
}
/* Navigation */
#nav {
margin: 4px 4px 40px;
}
#nav ul {
padding: 0;
margin: auto;
list-style: none;
}
#nav ul li {
width: 50%;
color: #BBB;
float: left;
font-family: 'Cabin Sketch';
font-size: 1.75em;
text-align: center;
background: url(img/scribble_dark.png);
}
#nav ul li a {
display: block;
/*padding: 5px 20px;*/
}
#nav ul li a:hover {
background: #e0d0e0;
}
/* Content */
.container{
max-width: 720px;
margin: 50px auto 0;
background: #FFF url('img/top_logo_blank_small.png') no-repeat fixed 0 0;
}
.header {
position: relative;
background-color: #b88fb8;
border-top: 5px solid #ede0ed;
height: 75px;
}
.content {
background-color: #000;
padding: 15px;
margin-bottom: 10px;
}
div#about {
padding:25px;
min-height: 255px;
}
img#portrait {
float: left;
margin-right: 25px;
width: 256px;
height: 256px;
}
div#footer {
width: 100%;
max-width: 720px;
margin: auto;
color: black;
text-align: right;
padding: 0 10px;
font-size: 0.850em;
}
#media screen and (max-width: 650px) {
.container {
width: 90%;
max-width: none;
}
div#footer {
width: 90%;
}
}
Try to change your path for example:
background: #EEE url('../img/top_logo_blank_small.png') no-repeat fixed top;
Because you are in a subfolder, you have to go up of a level I think
Most likely your css file is in a different folder and therefore needs another path to the image file.
The common way is to put css in a separate css/* folder, so the path should be:
url('../img/top_logo_blank_small.png')
This CSS seems to work fine, are you certain that the image exists?
http://jsfiddle.net/ghsNR/
I've just tried it here and it works fine with an image from http://placehold.it/
body {
font-family: 'Quattrocento Sans', helvetica, sans-serif;
background: #EEE url('http://placehold.it/500x500') no-repeat fixed top;
color: white;
margin: 0px;
padding: 0px;
}
The most likely cause after observing this is that your CSS isn't actually locating your image correctly. I suggest using tools like the Chrome dev tools, or Firebug to inspect the absolute path that the browser is trying to use to load the image and moving forward from there.
Is the css in the same folder as the page? If you have a different folders, you need to change the URL accordingly.
Maybe change the URL to
'../img/top_logo_blank_small.png'
So I'm messing with my sites CSS and all of the sudden there is always a horizontal scroll bar and my nav bar doesn't go all of the way to the end even though its width is set to 100%. Is this a common problem? I looked through my CSS values and none are enough to make the page need to extend.
Edit: Code
html {
height:100%;
}
.content {
width:269px;
margin-left: auto;
margin-right: auto;
}
.home {
width:100%;
margin-left: auto;
margin-right: auto;
text-align:center;
font: bold x-large verdana, arial, helvetica, sans-serif;
padding-top:10px;
}
.home a:visited {
color: blue;
}
.head {
width:100%;
text-align:center;
padding: 15px;
font: bold x-large verdana, arial, helvetica, sans-serif;
}
.foot {
width:100%;
text-align:center;
padding: 20px;
font: normal medium verdana, arial, helvetica, sans-serif;
}
body {
background-color: #FFF;
margin: 0px;
padding: 0px;
font: normal medium verdana, arial, helvetica, sans-serif;
}
div#navbar2 {
height: 50px;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
background-color: #336699;
text-align:center;
}
div#navbar2 ul {
margin: 10px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
color: #000;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;
}
div#navbar2 li a {
text-decoration: none;
padding: 11px 20px;
color: #FFF;
}
div#navbar2 li a:link {
color: #FFF:
}
div#navbar2 li a:visited {
color: #FFF;
}
div#navbar2 li a:hover {
color: #FFF;
background-color: #3366FF;
}
Your footer has width:100%; but also has left and right padding
you always have to math paddings and widths.
edit: the same with your .head
to hide the stuff that overflows use: overflow:hidden;
Just add this css property to your body element style.
overflow-x:hidden
It will remove the horizontal scroll bar and prevent extra white spaces on the right for sure.