I need the width of the whole page to be 1200px, but I must be doing something wrong because when I say for the html to be 1200px (either calling out the html or the body) chrome web dev tools always says its about 1300 px with a large right hand margin? I was looking through similar posts, and added more code that helped other people but it's still there for me. What am I doing wrong?
html,body
{
margin: 0px;
padding: 0px;
display: inline-block;
width: 1200px;
}
#font-face {
font-family: Montserrat-Regular;
src: url('../fonts/Montserrat-Regular.ttf') format('opentype');
font-family: Montserrat-Bold;
src: url('../fonts/Montserrat-Bold.ttf') format('opentype');
}
body{
font-family: 'Montserrat-Regular', sans-serif;
margin: 0;
width: 100%;
}
/*GRID*/
.full-width{
width: 100%;
clear: both;
padding-left: 20px;
}
.half-width{
width:50%;
float: left;
}
.third-width{
width:33%;
float:left;
}
/*HEADER*/
header{
border-bottom: 6px #77a466;
}
ul{
color:#77a466;
list-style-type: none;
}
nav{
float:right;
padding-top: 25px;
}
nav ul li{
display:inline;
text-transform: uppercase;
font-family:'Montserrat-Bold', sans serif;
padding: 0 8px 0 8px;
}
h1{
line-height: 60px;
}
h1, h2, h3{
font-family: 'Montserrat-Bold', sans-serif;
text-transform: uppercase;
}
span{
color: #77a466;
}
/*MAIN*/
img{
background-size: cover;
height: 290px;
width: 1200px;
}
Try adding * {
box-sizing: border-box
} to your css. I also agree with Lux, if you create a live example then it will be much easier to help you come up with a solution.
Related
I can't change h1 font-size in print preview. although every other property works, the font size doesn't work.
body{
margin: 1%;
padding:1%;
background-color: rgba(0,0,255,.2);
font-size: 100%;
min-width: 500px;
}
header, footer{
background-color:#0066FF;
padding: 1%;
margin: 1%;
}
header h1{
font-size: 3rem;
color:rgba(0,0,0,.7);;
}
section{
margin:1%;
padding:1%;
}
nav a{
display:block;
background-color: white;
border: 1px solid black;
text-align: center;
border-radius: 35px;
text-decoration: none;
padding: 2%;
margin: 1%;
}
h1{
text-align: center;
color:rgba(255,0,0,.7);;
}
.myClass{
margin: 0em 1em;
padding:.75em;
border: 1px solid black;
border-radius: .25%;
/* Safari and Chrome */
-webkit-column-count:3;
-moz-column-count: 3;
column-count:3;
}
ol{
list-style:upper-roman;
margin:1em;
}
img{
display: none;
}
footer{
clear: both;
text-align:center;
text-transform: uppercase;
}
#media screen and (min-width: 600px) {
img{
display: inline-block;
width: 20%;
margin-right: 4%;
}
section {
display: inline-block;
vertical-align: top;
}
#left {
width: 20%;
}
#center {
width : 70%;
}
#center div:last-of-type{
width: 100%;
padding:.75em;
padding-left: 0;
margin: 0em 1em;
}
h2 {
font-size: 1.7em;
}
h1::after {
content: "(I guess...)";
}
h3 {
height: 35px;
line-height: 35px;
font-size: 1.6em;
font-weight: bolder;
}
#center div p {
height: 45px;
line-height: 45px;
font-size: 1.6em;
}
header , footer {
background-color: initial;
}
footer {
width: 70%;
float: right;
}
footer p {
text-align: left;
}
}
#media print {
nav a {
display:block;
background-color: white;
border: 0;
text-align: center;
border-radius: 0;
text-decoration: none;
padding: 0;
margin: 0;
}
h1 {
font-style: italic;
font-weight: bolder;
font-size: 16px;
}
}
<!--
Create a stylesheet that will style the page
as it appears in the example. -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Design Lab</title>
<link rel="stylesheet" type="text/css" href="responsive.css"/>
<meta charset = "UTF-8">
</head>
<!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
<header>
<h1> Web Design is Awesome!!!</h1>
<nav>
University of Michigan
Intro to Web Design
</nav>
</header>
<footer>
<p>Sample code for Responsive Design .<br/> Colleen van Lent</p>
</footer>
<!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
</body>
</html>
Try using em, px, or a a percent value.
h1 {
font-size: 24px;
font-size: 200%;
font-size: 1.5em;
}
The percentage will depend on what the default text size is.
Usually the default size is 16px.
I was facing the same problem for H1. It turned out that for me normalize.css was overriding the font-size in the CSS file.
Try to use css for print mode:
#media print{
h1{....}
}
You can add !important in front of the h1 property value so that the browser does not override the value in print preview.
I have an 8 pixel border that I'd like to increase, but I can't find where it's coming from. Also, if I use margin, it disproportionally adds to the border.
The CSS and the entire project is available here:
CSS Resume Project
#font-face {
font-family: "Open Sans";
src: url(Open_Sans/OpenSans-Regular.ttf);
}
.global {
/*border: solid 10px lightgray;*/
border-radius: 25px;
font-family: 'Open Sans', sans-serif;
background-color: white;
/*position: absolute;*/
top: 20px;
margin-bottom: auto;
padding-bottom: 20px;
right: 20px;
left: 20px;
align-self: center;
}
h3 {
font-weight: 300;
}
p {
font-weight: 300;
}
body {
background-color: lightgray;
}
Any help or even a pull request would be greatly appreciated. Thanks.
because it has a margin set by default and the user-agent-stylesheet looks something similar to this:
body {
display: block;
margin: 8px
}
so , simply reset margin in body
body {
margin:0
}
body element has 8px margin set as default by browsers.
You just need to change the margin of the body tag
body {
margin:20px;
}
You can reset/normalize your code by adding this code !
body {
margin: 0
}
This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 8 years ago.
I am trying to display some text over an image : http://jsfiddle.net/5AUMA/31/
I need to align this text at the bottom part of the image
I tried putting this in css:
.head_img p {
position: absolute;
left: 0;
width: 100%;
vertical-align:bottom;
}
but this doesn't work ...
.............
Secondly I want this to be scalable with the screen width ... if width less than that of a 13" laptop .. remove the image but keep the text
How do i do that
Try this:
body{
color: #202020; /*#3d3636 #fffaf0; #fdfdfd 8c8c8c*/
font-size:100%;
font-family: 'Maven Pro', sans-serif;
line-height:1.4em;
min-height:100%;
/*padding-left: 5%;*/
background-color: #fdfdfd;
}
.head_img{
margin-top:10%;
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
position:relative;
}
.head_img p {
position: absolute;
left: 0;
width: 100%;
bottom:5px;
margin:0;
padding:0;
}
#media (max-width: 1366px) {
.head_img img { display:none; }
}
I added position:relative; to the .head_img class and positioned the p element absolutely with a bottom of 5px.
Then added a media query to hide the image once the screen width goes below 1366px. You will have to adjust that breakpoint, but I believe it's a common screen width for 13" laptops.
Updated fiddle: http://jsfiddle.net/5AUMA/33/
http://jsfiddle.net/5AUMA/32/
your markup wasn't correctly set (moved the paragraph in the same div that contains the image)
<body class ="body">
<div class ="head_img">
<div style="text-align:center;"><img style="min-width:50%; min-height:60%;" src = "http://i.imgur.com/H56PB85.jpg"/>
<p> display this text over the image <br> and at the bottom part of the image</br></p>
</div>
</div>
</body>
also look for position:relative on the container div to make things work on all browsers
body{
color: #202020; /*#3d3636 #fffaf0; #fdfdfd 8c8c8c*/
font-size:100%;
font-family: 'Maven Pro', sans-serif;
line-height:1.4em;
min-height:100%;
/*padding-left: 5%;*/
background-color: #fdfdfd;
}
.head_img{
margin-top:10%;
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
position: relative; /* HERE */
}
.head_img p {
position: absolute;
left: 0;
width: 100%;
bottom: 0;
color: white;
}
You need to make couple of changes to your css to make it work as follows.
.head_img p {
position: absolute;
left: 0;
width: 100%;
top: 0;--> Added
color: white;--> Added
}
.head_img{
<--Margin Removed-->
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
}
WORKING FIDDLE
Now to make your image to hide in particular width you can use media queries something like this
#media (max-width: 768px) {
.head_img img{
display:none;
}
}
try this
body {
color: #202020;
font-size: 100%;
font-family: 'Maven Pro', sans-serif;
line-height: 1.4em;
min-height: 100%;
background-color: #fdfdfd;
}
.head_img {
margin-top: 10%;
font-size: 1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align: center;
position: relative;
}
.head_img p {
left: 0;
width: 100%;
position: absolute;
bottom: 5px;
margin: 0;
color: #fff;
}
<body class="body">
<div class="head_img">
<div style="text-align:center;">
<img style="min-width:50%; min-height:60%;" src="http://i.imgur.com/H56PB85.jpg" />
</div>
<p>display this text over the image
<br>and at the bottom part of the image</br>
</p>
</div>
</body>
i have added
top: 394px;
color: #fff;
in .head_img p jsfiddle
body {
background-color: #fdfdfd;
color: #202020;
font-family: "Maven Pro",sans-serif;
font-size: 100%;
line-height: 1.4em;
min-height: 100%;
}
.innerimg {
background: url("http://i.imgur.com/H56PB85.jpg") no-repeat scroll center center rgba(0, 0, 0, 0);
border: 2px solid;
height: 500px;
width: 500px;
}
.head_img {
color: #000000;
font-size: 1.5em;
font-style: italic;
font-weight: bold;
line-height: 1em;
margin: 0 auto;
text-align: center;
width: 500px;
}
.head_img p {
display: table-cell;
height: 480px;
text-align: center;
vertical-align: bottom;
width: 500px;
}
<body class ="body">
<div class ="head_img">
<div class="innerimg" style="text-align:center;">
<p> display this text over the image <br> and at the bottom part of the image</br></p>
</div>
</div>
</body>
add HTML tags
<h2><span>display this text over the image <br> and at the bottom part of the image</span></h2>
CSS
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
i have updated the code in this FIDDLe
So im fully aware of the amount of questions asked about "Sticky Footers", and have also referenced many, MANY different questions on here and websites about sticky footers. I've created a fresh template away from this project that work and have examples of how sticky footers operate, be it inside the wrapper or out...
However, i just cant seem to get it operate correctly within my solution.
Currently the footer appears to be "sticky", however on one of my main pages, the content (images and text) seem to overlap the footer, due to the footer not being pushed to the bottom correctly. It seems to sit just below the screen (Meaning you have to scroll slightly to see the footer) - But on this page it sits in that location, doesnt get pushed down and then the content overlaps.
I've tried everything, Removing 100% on HTML, BODY, WRAPPER, contentDiv, but basically, one thing works, which breaks another.
What im after is, ContentDiv = 100% (pushing down the footer). So i should be able to create a blank page, the footer be glued to the bottom, and if content increases it pushed it down... Simple right? But tearing out my hair with this :/
So, any help would be massively appreciated, as i have a short deadline to get this sorted.
Fiddle Demo
CSS
html
{ margin: 0px; padding: 0px; height:100%; }
body
{ margin: 0px; padding: 0px; height: 100%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; }
/* { margin: 0px; padding: 0px; height: 100%; font-family: 'Montserrat', sans-serif; font-size: 12px; } */
p { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; }
h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:24px; }
h2 { margin:0px; padding:0px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
/* PAGE FORMATTING - START*/
span:hover { /* text-decoration: underline; */ }
a:link, a:visted { }
ahover, a:active { }
.link_nav_header{
padding:0px;
font-size:20px;
font-weight:bold;
color:#333333;
cursor:pointer;
}
.but_default
{
padding: 2px;
border: 1px solid #009900;
background-color: #33FF00;
/* background-color: #dddbdb; */ /* TWO COLOURS? */
}
.but_events-buybutton
{
padding:3px;
min-width:90%;
margin-bottom:5px;
color:#ffffff;
background-color:#378ec8;
}
.but_all
{
min-width:90%;
cursor: pointer;
margin: 2px;
}
/* HEADER - START */
.hdr_container
{
width:100%;
height:110px;
padding:0px;
margin:0px;
position:relative;
background-color:#0099ff;
color: #ffffff;
overflow: hidden;
}
#hdr_profile-icon {
margin-top: 1%;
margin-right: 1%;
float: right;
background-color: inherit;
}
/* NEW NAVIGATION */
#nav {
width: 100%;
padding: 0;
margin: 0 auto;
background-color: #333333;
position: absolute;
bottom: 0%;
}
#nav ul {
list-style: none;
/* width: 800px;*/ /* REMOVE TO STRETCH NAV TO FULL WIDTH */
width: 100%;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
text-align: center;
}
#nav ul li{
width: 11%; /* STRETCHES NAV TO FULL WIDTH */
}
#nav li a {
padding: 8px 15px;
display: block;
text-decoration: none;
font-weight: bold;
color: white;
text-transform:uppercase
}
#nav li:first-child a {
background: red;
width: 10px;
font-weight: normal;
}
#nav li a:hover {
/* color: #c00; */
background-color: #0099ff;
}
#nav a:hover a:focus {
/* color: #c00; */
background-color: red;
}
/* MAIN CONTENT - START */
#wrapper {
clear: both;
/* margin: 0 auto; */
width: 100%;
height:100%;
min-height: 100%;
/* margin-bottom: -75px; */
z-index:10;
}
.contentDiv
{
clear: both;
width:65%;
min-width: 800px;
height:90%;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;
/* z-index: -9999; */
}
/* TABLE - START */
.tbl_container-centered
{
width:100%;
height:100%;
min-height:100%;
/* padding-bottom: 20px; */
margin-left:auto;
margin-right:auto;
display:table;
overflow:auto;
/* margin-bottom: 75px; */
display: inline-table;
vertical-align: middle;
}
.tbl_containerpaneltext-centered
{
width:95%;
min-height:35%;
margin-left:auto;
margin-right:auto;
background-color:red;
}
.tbl_head-genericthread
{
min-height:3%;
max-height:3%;
text-align:center;
color:#ffffff;
background-color:#0099ff;
}
.tbl_events-head {
width: 100%;
height: 100%;
min-height: 100%;
border: 1px solid;
text-align: left;
border-collapse: collapse;
}
.tbl_grid-events
{
background-color: #ffffff;
}
.tbl_pickseats-famtable
{
width:100%;
background-color:#e1e1e1;
}
table#tbl_events{
height:100%;
min-height:100%;
border-collapse: collapse;
border-right: 1px solid #333333;
border-left: 1px solid #333333;
}
.link_moreinfo{
padding:0px;
font-size:14px;
font-weight:bold;
color:#0099ff;
cursor:pointer;
}
#event_row {
height: 140px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#basket2 {
background: red;
}
/* FOOTER CSS - START */
.footer_container
{
clear: both;
width:100%;
height:75px;
bottom:0;
background-color:#0099ff;
/* position:absolute; */
}
.footer_container, .wrapper:after {
/* .push must be the same height as footer */
height: 75px;
}
.wrapper:after {
content: "";
display: block;
}
.footer_global-bottom {
width: 100%;
margin: auto;
padding-top: 20px;
text-align: center;
color: white;
background: #333333;
}
.footer_global-bottom a {
color: white;
text-decoration: none;
}
/* ERROR HANDELING */
.error {
background: #ef7474;
border: 1px solid #f5aca6;
text-align: center;
}
.success
{
background: #74e963;
border: 1px solid #59e836;
text-align: center;
}
.alerts_box {
padding: 10px;
width: 250px;
position: absolute;
visibility: hidden;
font-size: 10px;
color:black;
}
.alerts {
width: 275px;
z-index: 2;
padding-bottom: 40px;
}
have you considered using this piece of code:
.footer_container {
position: fixed;
bottom: 0;
z-index: 100;
}
If you want full content being visible you can add to wrapper something like this:
margin-bottom: (footer-height)px;
Or use padding-bottom instead of margin-bottom.
in your #wrapper rule-set change height:100% to height:auto and remove min-height:100%.
jsFiddle
#wrapper {
clear: both;
width: 100%;
height:auto;
z-index:10;
}
I believe that setting the height to 100% is setting it to 100% of the browser window, not 100% of the content. I could be wrong about that though.
This will place the footer at the end of the content. On pages where the content is less than the height of the window, you can wrap the footer and give the footer wrapper a class like this:
.minContentFooter {
position: absolute;
bottom: 0;
}
If the case is that the content is loaded dynamically and you don't know if it will fill a browser window, then you will need a bit of javascript to have it both ways - either at the bottom of the content or the bottom of the window when there is minimal content.
Problem was solved, not by CSS, but by Javascript.
The problem was due to the page loading dynamic content from a table, it never knew how big the contentDiv was, so didnt know where to but the footer.
The sticky footer is achieved by setting CSS % heights, and also using javascript to help correct for pages with no content or those with dynamically loaded content.
The code below explains the active javascript:
var totalHeight = $('#header').height() + $(id).height();
var contentDivHeight = $('#content').height();
var wrap = $('#wrapper');
if (totalHeight >= contentDivHeight) {
wrap.removeClass('wrapper-height');
wrap.addClass('wrapper-minHeight');
} else {
wrap.addClass('wrapper-height');
wrap.removeClass('wrapper-minHeight');
}
The code checks the height of the header and the content contained within the content and if its over the footer switches to a css class enforcing min-heights rather than heights to allow the footer to flow to the end of the content.
Many Thanks for everyone's help.
I know this is probably really easy, but I am just about ready to throw my laptop out the window with this...
I have been trying to make a bit of javascript work within my one of my web pages, but failing this I made a back up of my previous code and tried to restore what it was before... but it has completely messed up my gallery page (I haven't touched this page) and it isn't linking up with my CSS - I really don't understand it.
The images in the gallery are supposed to be horizontal not vertical.
Please help, I am very new to Wordpress and understand my coding may be amateur
Link: Gallery
/*
Theme Name: tigertone
Theme URI: http://tigertonestudio.com
Description:
Version: 1.0
*/
#clear {
clear: both;
}
body {
margin:0;
padding:0;
height: 100%;
background: url('images/bg.png') repeat;
text-align:left;
font-family: "Verdana", Arial, Helvetica, sans-serif;
font-size:.8em;
}
#brushblack {
background: url('images/brushblack.png') repeat;
height: 100%;
}
#header{
width:1000px;
height:118px;
margin: 0 auto;
padding:50px 0 25px 0;
clear: both;
}
#content {
font-family:'aller', Arial, Helvetica, sans-serif;
margin:0 auto;
width:100%;
padding:0;
text-align:left;
vertical-align: middle;
}
.blackcontent {
background: url('images/bgdark.png') repeat;
width:100%;
padding:40px 0;
height:100%;
overflow:hidden;
margin:0 auto;
vertical-align: middle;
}
.content{
margin:0 auto;
width:1000px;
}
.entry {
color:#000000;
}
.ngg-albumoverview .ngg-album-compact { float: left; margin-right: 20px;}
.ngg-gallery{
width:100%;
float: left;
}
.ngg-gallery-thumbnail-box {
width: 25% !important;
float: left;
margin-bottom:10px;
border:5px
border-color:white;
}
===================
Classes Page
===================
.classes {
margin-bottom: 75px;
}
.classes {
width: 450px;
float: left;
margin: 10px 8px 0 0;
}
.classes:nth-child(4n+4) {
margin-right: 0;
}
.classes a {
text-decoration: none;
}
.classes h2,
.classes .classes-bio h2 {
font-weight: 700;
font-size: 1.5em;
text-transform: none;
margin: 15px 0 5px 12px;
}
.classes .classes-bio p {
color: #666;
line-height: 21px;
margin: 0 70px 18px 70px;
}
.classes .classes-bio p strong {
font-weight: 700;
}
.classes a.read-more {
color: #D1883E;
display: block;
margin: 12px 0 0 0px;
}
.classes a.read-more:hover {
text-decoration: underline;
}
.classes .classes-bio {
position: fixed;
width: 600px;
height: 90%;
display: none;
z-index: 9998;
padding-bottom: 10px;
background-color: #eaeaea;
}
.classes .classes-bio .close-button {
position: absolute;
top: -17px;
right: -17px;
z-index: 9999;
cursor: pointer;
}
.classes .classes-bio img.profile {
width: 442px;
margin: 25px 181px 8px;
}
.classes .classes-bio h2 {
text-align: center;
margin-bottom: 6px;
}
.classes .classes-bio {
font-size: 1.1em;
margin-bottom: 28px;
}
.classes .classes-bio p {
font-size: 0.9em;
color: #000;
text-align: center;
}
.mask {
position: absolute;
left: 0;
top: 0;
display: none;
z-index: 9997;
background-color: #000;
}
HTML:
<h1>Gallery</h1>
<div class="ngg-gallery">
<div class="ngg-galleryoverview">
<div class="ngg-gallery-thumbnail-box">
[nggallery id=1]
</div>
</div>
</p>
</div>
Line 396 of style.css has a missing }, could be causing your issues.
There are some un-commented comments in there too...
===================
Classes Page
===================
(and the other ones like it) Should be like this
/*
===================
Classes Page
===================*/
There is a part in your styles.css file that is listed like this:
a:link{
font-color:#000;
a:hover{
color:#D1883E}
It looks like you are missing a closing bracket after the first a:link style block.
Looks likes there's a problem with your global.js file. The jQuery library which comes with Wordpress is in no-conflict mode, which means you can't use the $ sign. Solution is to surround the code with
jQuery(document).ready(function ($) {
So, in your case, change the global.js file to:
jQuery(document).ready(function ($) {
$('.classes a').click(function(e) {
e.preventDefault();
// Get the dimensions of the user's screen
var maskHeight = $(document).height();
var maskWidth = $(window).width();
// Set the mask overlay to fill the entire screen
$('.mask').css({'width':maskWidth,'height':maskHeight});
// Fade in the mask overlay
$('.mask').fadeTo(600, 0.7);
// Get the dimensions of the user's browser
var winHeight = $(window).height();
var winWidth = $(window).width();
// Set the bio pop-up to be in the middle of the screen
$('.classes-bio').css('top', winHeight/2-$('.classes-bio').height()/2);
$('.classes-bio').css('left', winWidth/2-$('.classes-bio').width()/2);
// Fade in the bio pop-up
$(this).parent('.classes').find('.classes-bio').delay(610).fadeIn(600);
});
// Click the mask or close button to fade out the pop-up and the mask
$('.mask, img.close-button').click(function(e) {
$('.classes-bio').fadeOut(600);
$('.mask').delay(610).fadeOut(600);
});
});
See more here
I don't know if it will solve your problem, but you could give it a try!