i have a twitter layout, well sorta.. the main table kinda looks like it, with the way it's sectioned off...
html {
-webkit-user-select: none;
text-shadow: 2px 2px 2px #000;
color: #fff;
font-smooth: always;
padding: 0;
width: 100%;
height: 100%;
background: url("./img/main_back.jpg");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
body
{
height: 100%;
width: 100%;
}
.content_wrap {
position: relative;
top: 5px;
display: inline-table;
margin-right: auto;
margin-left: auto;
width: 90%;
height: 100%;
background-color: transparent !important;
}
.left_table {
overflow: hidden;
display: table-cell;
text-align: center;
width: 50%;
height: 100%;
padding-left: 5px;
padding-bottom: 20px;
}
.right_table {
display: table-cell;
text-align: center;
width: 20%;
height: 100%;
}
html5 doc type
header <-- floated left
section <-- floated right
section <-- content wrap
section <-- left_table
aside <-- right_table
footer <-- fixed position, bottom 0px
markup is spot on, i check it with the w3c site all the time.
can't get it to center, it's off center by about 30 to 40px, anyone have any ideas?
I notice that nowhere in yoru code do you actually have a center on your content div...
Perhaps you mean this?
body
{
height: 100%;
width: 100%;
text-align: center;
}
Also, first comment has a point.
Related
I'm using the background-image prop to get an image in the bg and a text on the foreground:
fiddle:
https://jsfiddle.net/zvy0j3r1/5/
however I dont see any image getting displayed. i'm not sure what I'm I missing here
CSS:
.main {
padding: 40px 70px;
display: inline-block;
width: 100%; //customizable user controlled width (not necessarily be 100% all time)
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
Just set the .main as relative and .icons as absolute.
.main {
padding: 40px 70px;
display: inline-block;
width: 100%;
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
position: relative;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
<div class="main">
<div class="icon"></div>
<div class="text">No Data available</div>
</div>
The background image is not showing because the element doesn't have any height. You might think that using height: 100% to the element, would make it take up the same height of it's parent, but it doesn't work like that.
When a child element has height: 100%, it will only take up 100% of it's parent if the parent has an explicit height set, like with pixels, ems, vm, etc.
I need some help finessing a layout I’m working on.
Here is a link to the current status of the site:
http://sometimesyoubreakaclarinet.com/
What you’ll see is a large pink area behind the gray content area, it is roughly a third down the page. For some reason, it is only forming to 100% of the height/width of the browser when I actually want it to match the height of the content. How do I get the height to fill down to fit to the content, in the same way the gray content area is already doing?
Secondly, I want this pink area to begin at the end of the background banner image at the top rather than where it is now. How do I achieve this? Do I need to change the position from relative to something else?
The goal here is to have the pink area flow over the banner image and title; something like what is outlined here:
http://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect
I’ve include what I think is the relevant CSS code below, possibly I’ve left something important out but you should be able to locate the CSS file on the link above if necessary.
#menu { width: 100%; height: 32px; margin: auto; padding: 6px auto 0; top:0px; z-index: 10;
position: fixed; text-decoration: none; background: rgba(44,44,44,0.95); }
#photograph { width: 100%; margin: 0 auto; background: #8a2dc7 url('img/header-2014-apr-1200.jpg') fixed center top no-repeat;
background-position: center top; background-size: 100%; min-height: 250px; height: 250px; top:0px;
position: fixed; }
#sitetitle { width: 100%; height: auto; margin: 0 auto; padding: 25px 0 0 0; background: transparent; position: fixed; } #deck { width: 100%; height: 100%; min-height: 100%; margin: 0 auto; padding: 0; position: relative;
background: transparent; z-index: 4; }
#card { width: 800px; height: auto; margin: 170px auto 0; padding: 10px 18px;
text-decoration: none; background: #2c2c2c; }
#curtain { width: 100%; height: auto; min-height: 100%; margin: 220px auto 0; padding: 0; position: relative;
background: #f12fde; z-index: 2; }
Hopefully someone can help me figure this out. Thank you!
does this fix your issue? Change the css of #curtain to..
#curtain {
width: 800px;
height: auto;
min-height: 100%;
margin: 0 auto;
padding: 0;
position: relative;
background: #f12fde;
z-index: 2;
top: 0;
}
This is a two part question, I believe, with a third and fourth, bonus twist.
What am I doing wrong to get the height of the purple set to 100% to be a little bit too high?
How can I set the width of the purple so that it goes 100% of the remaining space?
Is the only way to get rid of the spacing between the yellow and the purple to alter the HTML code by putting everything on the same line?
How can I remove the margin that the green border holds between self and the outer component?
jsfiddle.net/jL8e5/1/
div.faqticleList {
background: #ffdd00; /* yellow */
display: inline-block;
padding: 3px;
width: 200px;
height: 150px;
}
div.faqticlePreview {
background: #bb88ff; /* purple */
display: inline-block;
padding: 3px;
width: auto;
height: 100%;
}
I'm not sure if I completely understand your goals. I assumed:
Fixed width left
Variable width right
http://jsfiddle.net/wXme4/
CSS
body{
margin: 0;
padding: 0;
width: 100%;
}
div.faqticleList {
background: #ffdd00;
width: 200px;
height: 100%;
float: left;
}
div.faqticlePreview {
background: #bb88ff;
width: 100%;
height: 100%;
margin-left: -203px;
padding-left: 203px;
}
div.container {
border: solid 1px #007700;
margin: 0px;
height: 100px;
//overflow: hidden;
//overflow: auto;
}
div.faqticleList div, div.faqticlePreview div {
padding: 3px;
}
Script
document.getElementById("faqticleList").innerHTML = "<div>faqticleList</div>";
document.getElementById("faqticlePreview").innerHTML = "<div>faqticlePreview</div>";
Updated Demo
Float the left column, and make the right column a regular block element with overflow: hidden. That might be the simplest way to do it.
CSS
div.faqticleList {
/* display: inline-block; */
float: left;
...
}
div.faqticlePreview {
/* display: inline-block; */
/* width: auto; */
overflow: hidden;
...
}
This will do what you want, but I would recommend you set your height to fixed, or it wont work,
div.faqticleList {
background: #ffdd00;
display: inline-block;
width: 30%;
height: 150px;
}
div.faqticlePreview {
background: #bb88ff;
display: inline-block;
width: 69%;
height: 100%;
clear: both;
}
div.container {
border: solid 1px #007700;
margin: 0px;
height: 100%;
//overflow: hidden;
//overflow: auto;
display: block;
clear: both;
}
You can use jquery to dynamically find the width.
JS:
document.getElementById("faqticleList").innerHTML = "faqticleList";
document.getElementById("faqticlePreview").innerHTML = "faqticlePreview";
var difWidth = $('.container').width() - 212;
$('#faqticlePreview').css( "width", difWidth )
Then, in your CSS, remove the width from faqticlePreview and float the other div left:
div.faqticleList {
background: #ffdd00;
display: inline-block;
padding: 3px;
width: 200px;
height: 150px;
float: left;
}
div.faqticlePreview {
background: #bb88ff;
display: inline-block;
padding: 3px;
height: 100%;
}
Updated jsfiddle:
http://jsfiddle.net/a2Run/
Note: The width you are subtracting needs to be 212. 200px width from the first div, plus 3px of padding on each side of both divs 200+(3x4)=212
I'm having a bit of trouble with a div, my website has one wrapper sized height: 100%; this wrapper contains various divs like a header, slider and a content div. The only problem is the content div gets pushed out of the wrapper div for some mysterious reason.
html {
overflow-y: scroll;
height: 100%;
position: relative;
}
a {
outline: none;
}
img {
width: 100%;
border: none;
-moz-border-radius: 20px;
border-radius: 20px;
}
body {
width: 100%;
height: 100%;
background-color: yellow;
margin: 0px 0px 0px 0px;
}
.wrapper {
width: 87%;
height: 100%;
background-color: red;
margin: 0 auto;
}
.header {
width: 100%;
height: 150px;
background-color: green;
float: left;
overflow: hidden;
}
.logo {
width: 7%;
height: 114px;
margin: 18px 0% 18px 3%;
float: left;
background-image: url("..//img/logo.png");
background-size: 100%;
background-repeat: no-repeat;
}
.slogan {
width: 30%;
height: 100px;
background: orange;
margin: 25px 13% 25px 13%;
float: left;
}
.nav {
width: 31%;
height: 150px;
background-color: purple;
float: left;
margin: 0% 3% 0% 0%;
}
.search {
width: 100%;
height: 50%;
background: blue;
float: left;
}
.menu {
width: 100%;
height: 50%;
float: left;
background: grey;
}
.slider-container {
width: 100%;
height: 100%;
background-color: white;
}
.main-content {
width: 100%;
height: 100px;
background-color: pink;
float: left;
}
.column {
width: 31%;
height: auto;
background-color: orange;
float: left
}
/* SLIDER */
.caption {
width: 500px;
background-image: url("..//img/caption-bg.png");
background-size: 100%;
position: absolute;
z-index: 99;
overflow: hidden;
margin-top: 7%;
margin-left: 5%;
-moz-border-radius: 20px;
border-radius: 20px;
}
.caption-text {
max-width: 460px;
overflow: hidden;
margin: 20px;
}
.wrapper .slider-container #slideshow {
float: left;
position: relative;
width: 100%;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
You can see a live demo at http://k2stuc.nl/test/
I don't understand your question 100%. But I saw an issue, the navigation behind the slideshow is because your slides, .wrapper .slider-container #slideshow > div has set to position:absolute.
Try setting .slider-container height to a fixed height. Otherwise slides will be above the content.
you are floating things that should not be floated
i.e .header, .main-content,#slideshow - none of these need floats - body should not have height:100%;
give .slide-container a fixed height in pixels not a percentage.. doing the above will fix your problem
Setting height: 100% on the <body> sets its height to 100% of the viewport.
Now, the viewport is as high as the browser window's inner-height; and that changes when you resize the browser itself.
Any direct child of the <body>, set to height: 100% then inherits the viewport's height.
That's part of how a lot of the 'parallax' websites do their thing.
I think the problem comes from the fact the slider div has height:100%
I use % for everything so my site works the same in all screen resolutions. However the position of the content is misplaced and varies from resolution to resolution and from browser to browser. A thing that I noticed and is probably related to the problem is that the background image doesn't react to zoom. The content however reacts.
html {height: 200%; width: 100%;}
body {
min-width: 99%;
height: 100%;
margin: 0;
padding: 0;
color: #969696;
background-color: black;
text-align: center;
font-family: Arial;
font-size: 100%; }
container {
position: relative;
height: 100%;
margin: auto;
width: 85%;
text-align: center;
border: 1px solid red;
background-image: url('images/bgmain.png');
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden; }
navbar {
position: relative;
min-height: 2%;
margin-top: 21%;
margin-left: 2%;
padding: 0 auto;
width: 95%;
text-align: center;
overflow: hidden; }
For example the navigation bar in my resolution is fine while on other resolutions its misplaced. Is there any mistake? Do I miss something? Thanks in advance.
A reset of css styles would help to gain much control to your styles. Refer to this link http://meyerweb.com/eric/tools/css/reset/ and this http://developer.yahoo.com/yui/reset/ and also this http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/