I'd like to know how to make my wrapper use percentage and grow/shrink with the width of the page instead of staying in one fixed size? I do not want the page to be cut off when I zoom in, would anyone help me with this please, thanks :)
here is a link to the entire phpbb stylesheet
https://gist.github.com/25c59943b244a3e150e8/75c6dd240980864d4872eb6cacccdf980fa9d84c
/* Main blocks
---------------------------------------- */
#wrap {
background-color: #080808;
padding: 0 0px;
min-width: 650px;
width: 960px;
margin: 0px auto;
border: 1px solid #161616;
background-repeat: repeat-x;
background-attachment: fixed;
}
#middle {
padding: 0 0px;
min-width: 650px;
width: 900px;
margin: 0px auto;
}
#header_1 {
background-image: url("http://i57.tinypic.com/m81pc0.jpg");
height: 170px;
width: 960px;
}
#menus {
height: 40px;
border-top: 1px solid #161616;
border-bottom: 1px solid #161616;
background: url() repeat-x;
}
#simple-wrap {
padding: 6px 10px;
}
#page-body {
margin: 4px 0;
clear: both;
}
#page-footer {
clear: both;
}
#page-footer h3 {
margin-top: 20px;
}
#logo {
float: left;
width: auto;
padding: 10px 13px 0 10px;
}
a#logo:hover {
text-decoration: none;
}
Related
I'm a beginner and would like to get some help and see where I'm making a mistake. I've adjusted my css to try to make the footer drop to the bottom of the page no matter the screen size that's view the page. I tried adjusting the body height to be at 100%, but that did not work.
I'm trying to make it so the bottom footer is just below the fold, so it can only be seen once you scroll down, and not seen we you first get to the page.
If there is any advice on how I can solve my issue, it would be much appreciated thanks.
Here are some pictures to give you an example & the CSS
Mobile
Tablet Vertical
Tablet Horizontal
CSS:
body {
margin: 0;
padding: 0;
background: #FFFFFF;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 18px;
color: #000000;
width:100%;
height:100%;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #000000;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1em;
margin-top: 1.8em;
text-align:left;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 100%;
}
ul, ol {
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: #000000;
}
#wrapper {
overflow: hidden;
background-color: #FFFFFF;
}
#bottom-wrapper {
overflow: hidden;
position:relative;
bottom:0;
height: 100px;
padding: 5px 0px 0px 0px;
background: url(images/blue-background.jpg) repeat-x left top;
}
#bottom {
overflow: hidden;
width: 960px;
height: 200px;
margin: 0 auto;
padding: 0px 20px;
}
.abouttext {
width: 625px;
margin: 10px auto;
}
.three {
width: 1000px;
margin: 10px auto;
padding: 10px 140px;
}
.container {
width: 880px;
margin: 10px auto;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
/* Header */
#header-wrapper {
overflow: hidden;
height: 110px;
background: url(images/blue-background.jpg) repeat-x left top;
}
#header {
overflow: hidden;
width: 100%;
height: 200px;
margin: 0 auto;
padding: 0px 20px;
font-weight: bold;
}
/* Banner */
#banner {
overflow: hidden;
height: 100px;
background: url(images/img04.jpg) no-repeat center bottom;
}
#banner .image-style {
border: 15px solid #F4F4F4;
}
/* Logo */
#logo {
float: left;
width: 400px;
margin: 0;
padding: 0;
color: #000000;
}
#logo h1, #logo p {
}
#logo h1 {
padding: 10px 0px 0px 0px;
font-size: 3.0em;
}
#logo p {
margin-top: -10px;
padding: 0px 0px 0px 5px;
font-size: 20px;
color: #FFFFFF;
}
#logo p a {
color: #FFFFFF;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #FFFFFF;
}
/* Splash */
#splash {
overflow: hidden;
padding: 0px 0px 0px 0px;
border-bottom: 1px dashed #E7E2DC;
letter-spacing: 0px;
text-align: center;
vertical-align:middle;
font-size: 18px;
}
div.home-rt, div.cat{
/*width:310;height:355;*/
text-align:center;/*border:solid 2px #e0e0e0;*/
margin: 0 auto;
vertical-align:top;
display:inline-block;
cursor:pointer;
}
.iPad_1, .iPad_2, .iPad_3, .iPad_4, .iPad_Air, .iPad_Mini, .iPad_MiniRetina
{
margin:10px 10px 10px 10px;
}
.iPhone_2G, .iPhone_3G, .iPhone_3GS, .iPhone_4, .iPhone_4S, .iPhone_5, .iPhone_5C, .iPhone_5S
{
margin:10px 10px 10px 10px;
}
#splash div.home-rt {
/*margin-top:10px;
margin-bottom:10px;*/
width:310;
height:355;
background:#fff;
}
#splash .home-rt {
text-align:center !important;
}
#splash span {
color: #313131;
}
/* Search */
#search {
float: right;
width: 280px;
height: 60px;
padding: 20px 0px 0px 0px;
}
#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 20px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: 1px solid #DEDEDE;
background: #FFFFFF;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 22px;
border: none;
background: #B9B9B9;
color: #000000;
}
/* Menu */
#menu {
float: right;
width: 500px;
height: 90px;
margin: 0 auto;
padding: 0;
}
#menu ul {
float: center;
margin: 0;
padding: 15px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
margin-right: 1px;
padding: 10px 0px 15px 30px;
text-decoration: none;
text-align: center;
font-size: 20px;
font-weight: 300;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
color: #000000;
}
#menu .current_page_item a {
}
/* Page */
#page {
padding: 30px 0px 0px 0px;
}
/* Content */
#content {
float: left;
width: 620px;
padding: 0px 40px 0px 0px;
background: url(images/img05.jpg) no-repeat right 40px;
}
.post {
overflow: hidden;
}
.post .title {
padding: 0px 0px 10px 0px;
letter-spacing: -3px;
}
.post .title a {
border: none;
color: #7D7764;
}
.post .meta {
margin-bottom: 30px;
padding: 0px;
text-align: left;
font-size: 16px;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 0px 10px 0px;
padding-bottom: 20px;
text-align: justify;
}
.links {
padding-top: 20px;
margin-bottom: 30px;
}
.more {
display: block;
float: left;
width: 88px;
height: 25px;
padding: 2px 0px 0px 0px;
margin-right: 10px;
background: url(images/img08.jpg) no-repeat left top;
text-align: center;
color: #FFFFFF;
}
.comments {
display: block;
float: left;
width: 88px;
height: 25px;
padding: 2px 0px 0px 0px;
background: url(images/img08.jpg) no-repeat left top;
text-align: center;
color: #FFFFFF;
}
/* Sidebar */
#sidebar {
float: right;
width: 320px;
margin: 0px;
padding: 0px 0px 0px 0px;
color: #000000;
}
#sidebar h2 {
padding: 0px 0px 30px 0px;
letter-spacing: -3px;
}
#sidebar a {
border: none;
}
#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;
}
/* Three Column Footer Content */
#footer-content {
background: url(images/img04.png) no-repeat center top;
color: #E2B8C6;
}
#footer-bg {
overflow: hidden;
padding: 170px 0px;
}
#footer-content h2 {
margin: 0px;
padding: 0px 0px 20px 0px;
letter-spacing: -2px;
text-shadow: 1px 2px 0px #861F40;
font-size: 16px;
color: #FFFFFF;
}
#column1 {
float: left;
width: 320px;
margin-right: 20px;
}
#column2 {
float: left;
width: 320px;
}
#column3 {
float: right;
width: 320px;
}
/* Footer */
#footer {
height: 100px;
margin: 0 auto;
padding: 10px 0px 0px 0px;
/*background: url(images/img04.png) no-repeat center top;*/
}
#footer p {
margin: 0;
padding-top: 150px;
line-height: normal;
text-align: center;
color: #000000;
}
#footer a {
color: #000000;
}
#marketing {
overflow: hidden;
margin-bottom: 30px;
padding: 20px 0px 10px 0px;
border-top: 1px solid #E3E3E3;
border-bottom: 1px solid #E3E3E3;
}
#marketing .text1 {
float: left;
margin: 0px;
padding: 0px;
letter-spacing: -2px;
font-size: 14px;
color: #000000;
}
#marketing .text2 {
float: right;
}
#marketing .text2 a {
display: block;
width: 252px;
height: 38px;
padding: 15px 0px 0px 0px;
background: url(images/img07.jpg) no-repeat left top;
letter-spacing: -2px;
text-align: center;
font-size: 12px;
color: #000000;
}
.box1 {
overflow: hidden;
height: 100px;
background: url(images/img04.jpg) no-repeat center bottom;
}
.list-style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
.list-style1 li {
padding: 7px 0px 7px 0px;
border-top: 1px dashed #E7E2DC;
}
.list-style1 .first {
padding-top: 0px;
border-top: none;
}
.list-style2 {
margin: 0px;
padding: 0px;
list-style: none;
}
.list-style2 li {
padding: 7px 0px 7px 0px;
background: url(images/img06.png) repeat-x left top;
}
.list-style2 a {
color: #E2B8C6;
}
.list-style2 a:hover {
color: #C76485;
}
.list-style2 .first {
padding-top: 0px;
background: none;
}
You mentioned:
I'm trying to make it so the bottom footer is just below the fold, so it can only be seen once you scroll down, and not seen we you first get to the page.
I don't think css alone is capable of doing this, I got a quick jsfiddle for you that may help.
windowHeight = $(window).height();
footerHeight = $(".footer").height();
$(".wrap").css({
"height": windowHeight + footerHeight
});
My fiddle: http://jsfiddle.net/f5e5d/1/
.item-data {
width:34px;
height:34px;
background-size: 34px auto !important;
margin: 2px;
border: 1px solid #000;
display:table-cell;
}
.test_div {
background-color: #eee;
width: 100%;
padding: 20px;
}
.match_details {
display:table-cell;
}
I want to show only 3 pictures in one line. How can I do it?
Now I have displayed all 6 items in 1 line.
Thanks in advance!
Like this: http://jsfiddle.net/NicoO/f5e5d/4/
.item-data {
width:34px;
height:34px;
background-size: 34px auto !important;
margin: 2px;
border: 1px solid #000;
float: left;
}
.item-data:nth-child(3n+1)
{
clear: left;
}
.test_div {
background-color: #eee;
overflow: hidden;
padding: 20px;
}
I can't get my css to center the content dive in IE. It works in all other browsers. Please help. I have tried align = center as well and even that didn't help. If there is something that I have done in and around the content div to make it not center I would like to know. Thank you.
BODY {
background-color: #eee;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
}
.wqlogin .fullwrap {
width: 100%;
margin: 0 auto;
background-color: #f7f7f7;
}
.wqlogin .topp {
width: 100%;
height: 110px;
background-color: #fff;
border-bottom: solid 1px #ddd;
}
.wqlogin .topp .wq_logowrap {
width: 910px;
margin: auto;
}
.wqlogin .topp .wq_logowrap .logo {
float: left;
/*margin-left: 10px;*/
display: block;
width: 115px;
height: 105px;
}
.wqlogin .content {
width: 910px;
background-color: #fff;
border: solid 1px #ccc;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
overflow: hidden;
}
.wqlogin .left {
display: block;
float: left;
width: 620px;
overflow: hidden;
}
.wqlogin .left .wrap {
margin: 5px 0 15px 5px;
}
.wqlogin .left .imgholder {
float: left;
margin: 8px 8px 15px 8px;
width: 288px;
height: 186px;
}
.wqlogin .rgt_login {
display: block;
float: left;
width: 280px;
height: 320px;
overflow: hidden;
}
.wqlogin .rgt_login .logwrap {
padding: 10px;
}
.wqlogin .footer {
width: 100%;
float: left;
overflow: hidden;
background-color: #fff;
}
.wqlogin .toptxt {
padding: 10px 10px 0 10px;
font-size: 24px;
/*font-weight: bold;*/
color: #666;
}
.wqlogin .toptxt .sml {
font-size: 20px;
padding-top: 0;
}
.wqlogin .error_txt {
float: left;
width: 100%;
overflow: hidden;
color: #8d0000;
}
.wqlogin .error_txt .message {
float: left;
overflow: hidden;
}
.wqlogin .username, .wqlogin .password {
width: 100%;
margin: 0 0 5px;
padding: 5px 5%;
display: block;
}
.wqlogin .login_link1 {
font-size: 12px;
text-decoration: none;
}
.wqlogin .vzw_header {
border-bottom: solid 1px #ddd;
}
.wqlogin .vzw_button {
margin: 10px 0 10px 0;
}
/*TABLE { border-spacing: 0px; border-collapse: collapse; }*/
For older versions of IE, use a text-align: center in the surrounding container.
Also, make sure the surrounding container is centered itself.
Look at this picture of it...
http://www.flickr.com/photos/91733140#N06/8329388242/in/photostream
How can i make this div go to the left and not the right?
it keeps messing up and i really need it to be fixed any ideas how i can make it work?
<style type="text/css">
#body {
height: 100%;
margin: 0;
padding: 0;
}
#html, body {
height: 100%;
margin: 0;
padding: 0;
background: #E0E0E0;
}
#header {
background: #FFFFFF;
height: 33px;
width: 100%;
padding: 5px 30px 5px 30px;
font-family: arial;
font-size: 30px;
border-bottom: 1px #737373 solid;
position: fixed;
top: 0;
}
#container {
width: 1205px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
#box {
width: 228px;
height: auto;
background: #FFFFFF;
border: 1px #5E5E5E solid;
margin: 5px;
float: left;
font-family: arial;
}
#box_title {
width: 218px;
height: auto;
padding: 5px;
background: #5E5E5E;
color: white;
border-bottom: 1px #FFFFFF solid;
float: left;
font-family: arial;
}
#box_img {
width: 210px;
height: auto;
float: left;
margin-left: auto;
margin-right: auto;
}
#box_options {
width: 228px;
height: 40px;
background: #FFFFFF;
color: #000000;
border-top: 1px #5E5E5E solid;
float: left;
font-family: arial;
Not to judge you by your open tabs but you seem to want a "Pinterestish" wall. This is not easy via vanilla css, may I suggest looking into jquery masonry?
http://masonry.desandro.com/
It does all the heavy lifting for you
I am trying to make an arrow overlap onto the div below it (the way the gray arrow overlaps onto the red on http://tinyletter.com).
Here is the code I am currently using:
#box_1 {
height: 550px;
width: 100%;
font-size: 4.5em;
font-weight: 600;
float: center;
text-align: center;
background-color: #ededed;
padding: 55px 0 0 0;
}
.arrow-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #ededed;
margin-left:auto;
margin-right:auto;
}
#box_2 {
height: 600px;
width: 100%;
font-size: 7em;
float: center;
text-align: center;
background-color: #ed2227;
}
If you're able to rely upon use of the ::after (or ::before) pseudo-elements, then this is relatively easy simply using borders:
#top {
position: relative;
background-color: #ccc;
}
#top::after {
position: absolute;
content: '';
top: 100%;
left: 50%;
margin: 0 0 0 -1em;
border: 1em solid transparent;
border-top: 1em solid #ccc;
}
JS Fiddle demo.