I have a problem with some css in my website
this is the main CSS source :
/* html selectors ---- */
html, body {
font-family: 'Arial Unicode MS';
margin: 0;
padding: 0;
background-repeat: repeat-x;
background-color: white;
direction: rtl;
font-size: 10.3pt;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
h1 {
font-size: 17pt;
text-decoration: underline;
top: 3px;
padding-bottom: 10px;
line-height: 25px;
}
h2 {
font-family: david;
font-size: 11pt;
color: #191970;
}
h3 {
font-size: 16pt;
color: white;
margin-left: 15px;
font-weight: bold;
margin-bottom: 20px;
padding-right: 30px;
padding-top: -55px;
font-family: 'Arial Unicode MS';
}
/*page -----------*/
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
z-index: 100;
z-index: 5;
background-image: url("images/bgimage.png");
}
#leftshadow {
width: 100px;
height: 900px;
background-image: url("images/leftshadow.png");
position: absolute;
right: 840px;
z-index: none;
top: -25px;
}
#rightshadow {
width: 100px;
height: 900px;
background-image: url("images/rightshadow.png");
position: absolute;
right: -45px;
z-index: none;
top: -25px;
}
My question is how can I move the image-shdow back, behind the main content?
I tried a lot with z-index but I couldn't find a solution, can you help me solve thos problem pleas?
You forgot to use a position property in addition to the z-index property .. z-index will not work unless the element which has the z-index property applied to it is positioned using either:
position: relative;
position: absolute;
position: fixed;
Add one of those (relative preferably in your case) and it will work.
I recommend reworking your DOM structure to accomodate for this case, something like this:
<div class="content">
<div class="page"></div>
<div class="leftshadow shadow"></div>
<div class="rightshadow shadow"></div>
</div>
check out this fiddle of the how the new structure might work - http://jsfiddle.net/wHgm8/
You could also, if you wanted a nice clean shadow around the page, use css3 box-shadow, example here: http://jsfiddle.net/ASc7J/ though support is for newer browsers.
try this in your code:
box-shadow: 5px 0px 5px grey;
in above syntax, 5px is for left, 0px is for top and bottom and again 5px is for right. Play with the values untill you are comfortable. Also make sure you use hex values of color and is apt for a shadow.
You need both a position command, and "none" is not a valid z-index value. -1 works for me.
style="position:relative; z-index:-1;"
Related
I don't understand why my footer is sitting slightly above the bottom of my webpage and not directly on the bottom
h6 {
font-family: Neue Haas Grotesk, sans-serif;
font-weight: 300;
font-size: 1.4vw;
color: white;
position: relative;
display: block;
}
.footer {
position: relative;
display: inline;
bottom: 0;
width: 100%;
height: 100%;
margin-bottom: 0;
padding: 0;
}
<div class="footer">
<h6>© Alex Burger. All rights reserved<br>Further information can be requested through email.</h6>
</div>
The <h6> tag has a native margin. So your problem will be solved with:
.footer h6 {
margin-bottom: 10px;
}
Note that setting margin: 0px have not the result that you expect, this will only be solved changing other parts fo your document.
I'm working on a little design for a site that's comprised of the main content being in a square roughly 80% the width of the site, and then a header, footer and two sidebars being signalled via lines. I have the header, footer, lines and content all working, and they all (mostly) stay in the right place when resized. However, I can't for the life of me work out how to get the square in the center to continue to fill the section in the middle of the screen (without overlapping, or having a scroll bar!)
I've attached the code for my square and some screenshots of what I'm attempting to do and what currently happens below. Other than my innercontent div, there're no divs on the side, and a header and footer div above and below.
*Update: Added code as requested. I believe this is all that's used in the example I provided in the screenshots, other than the lines, which are produced via some JS. I've included the important css here too, so to allow me to link to my JS Fiddle with it all:
/* ===================
Inital Styles
=================== */
html {
color: #fff;
font-size: 1em;
background: #3f51b5;
line-height: 1.4;
animation: fade 5s
}
::-moz-selection {
background: #6534ff;
text-shadow: none;
}
::selection {
background: #3f51b5;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
body {
font: 16px/26px Helvetica, Helvetica Neue, Arial;
}
h1,
h2,
h3,
h4 {
color: #fff;
font-family: 'Montserrat', sans-serif;
line-height: normal;
}
h1 {
font-size: 25px;
letter-spacing: 3.1;
}
h2 {
font-size: 14px;
font-weight: 500;
text-align: justify;
}
h3 {
font-family: 'Space Mono', monospace;
font-weight: 400;
}
h4 {
font-size: 19px;
}
.inline {
display: inline;
}
.clear {
clear: both;
display: block;
content: "";
}
.center {
margin: auto;
width: 50%;
padding: 10px;
}
.header-container {
height: 145px;
position: relative;
}
.header-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.title {
color: white;
text-align: center;
font-size: 40px;
font-family: 'Space Mono', monospace;
font-weight: 400;
line-height: 0px;
margin-top: 35px;
}
.subTitle {
color: white;
text-align: center;
font-size: 14px;
font-family: 'Space Mono', monospace;
font-weight: 400;
font-style: italic;
}
.innercontent {
position: relative;
height: 3vw;
width: 80%;
margin: auto;
padding-top: 32.5vw;
margin-top: -28px;
margin-left: 10.0%;
}
.green {
background: #42ab9e;
}
/* ===================
Name Collection
=================== */
#nameCollection {
text-align: center;
}
#nameText {
margin-top: -28%;
margin-left: 15%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.nameSkipButton {
margin-top: 25px;
background-size: 210% 100%;
background-image: linear-gradient(to right, #963019 50%, #16174f 50%);
-webkit-transition: background-position 0.3s;
-moz-transition: background-position 0.3s;
transition: background-position 0.3s;
border: none;
font-family: 'Space Mono', monospace;
color: #fff;
padding: 10px;
font-size: 12px;
}
.nameSkipButton:hover {
background-position: 99%, 0;
}
<body>
<div class="delay">
<div class="fade-in delay">
<div class="header-container">
<header class="header-center">
<h1 class="title" onclick="location.reload();" style="cursor: pointer;">COMPUTERIFY.IO</h1>
<p class="subTitle" onclick="location.reload();" style="cursor: pointer;">Alpha is just a fancy word for unfinished.</p>
<p class="subTitle">
</h1>
</header>
</div>
<div class="main-container">
<div id="content" class="innercontent green">
<div id="nameCollection">
<div id="nameText">
<h3>Hello. I'm the PC Generator, or PCG for short. Before we get started, can I just ask...</h3>
<h1>What's your first name?</h1>
<div>
<input type="button" style="display:none" id="btnSearch" value="Search" onclick="getUserName()" />
<span class="input input--nameCollection">
<input class="input__field input__field--nameCollection" maxlength="19" onkeydown = "if (event.keyCode == 13) document.getElementById('btnSearch').click()" type="text" id="input-25" />
<label class="input__label input__label--nameCollection" for="input-25">
<span class="input__label-content input__label-content--nameCollection">First Name</span>
</label>
</span>
</div>
<input class="nameSkipButton" id="skipName" type="button" value="I don't value my name, pick one for me" onclick="confirmSkip();" />
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/nxyg4a9x/2/
Attached screenshots demonstrating the design when it works (on a 1920x1080 display, and how it looks on resize and on mobile.
I would use flexbox if you can.
The following is a demo and you'll likely need to make adjustments to fit your needs.
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
overflow: hidden;
background-color: #3f51b5;
}
header,
main,
footer {
margin: 0 10%; // Indirect way of making element width: 80%;
border-left: 2px solid lightgray;
border-right: 2px solid lightgray;
}
header,
footer {
flex-basis: 100px;
}
main {
position: relative;
flex-grow: 1;
background-color: #42ab9e;
}
main:before {
content: '';
z-index: -1;
position: absolute;
top: -2px;
right: -100%;
bottom: -2px;
left: -100%;
display: block;
border-top: 2px solid lightgray;
border-bottom: 2px solid lightgray;
}
<header></header>
<main></main>
<footer></footer>
The most important thing that we did is use flex-grow: 1 on main which addresses your primary concern of stretching your content area to fill the appropriate space. flex-grow: 1 tells the element to take up any remaining space inside of it's parent element. So whatever space is left over from the height of the header and footer it will file up.
We use min-height on body as a starting point so that main doesn't end up a fixed size (which is what would have happened if we used height instead) and the layout fills the viewport initially even if there is not a lot of content.
You mentioned using JS to create your lines, that seems like overkill to me and can be accomplished with CSS. The lines are just borders and the only non obvious set of lines would be the horizontal lines that extend outside of main. I did this with a pseudo element that stretches itself outside of it's parent element. The top and bottom of the pseudo element are pulled outside of it's containing element equal to the border's thickness. The left and right of the pseudo element are pulled out just wide enough to always extend a little past the viewport window (I used a relative unit so it will grow with the viewport). We used overflow: hidden; on body to prevent a horizontal scrollbar that this element initially creates.
Hope this works for you and let me know if you have any questions, cheers!
In your .innercontent div, you are using the vw measurement which stands for "viewport width" - basically what this means is that the height of your box is going to be relative to the width of the screen/viewport that the user is viewing the site in.
You need to set height, width margin etc in another unit other than vw since it will result in what you're seeing. I forked your fiddle to demonstrate.
https://jsfiddle.net/550n5wgn/1/
I am trying to add a div to the side of my wrapper. It will be a link / button.
I want it to be able to slide up and down, fixed to the right hand side border when scrolling.
The button is:
#booknow {
position: absolute;
right: 0;
margin-left:25px;
text-align:center;
font-family: 'Raleway',sans-serif;
font-size:22px;
color:#ffffff!important;
font-weight:700;
line-height:26px!important;
text-transform:uppercase;
}
And the inner wrapper (Where the border is), is:
.wrapper_inner{
position:relative;
z-index:10!important;
padding:30px!important;
background:#fff!important;
border:1px solid #D4D4D4!important; }
HTML:
<div class="wrapper">
<div class="wrapper_inner">
<div id="booknow">
Book <br> Now
</div>
</div>
</div>
At the minute I have this:
If I set it to fixed it slides up and down but it won't position perfectly to the outside of .wrapper_inner.
The HTML wasn't that helpful, so I just threw something together. The color scheme is to display the elements. I removed .inner_wrapper and added the surrounding layout so it would be possible to demonstrate that #booknow floats. If you click the #booknow it'll scroll down to a faux form at the bottom.
Demo: https://plnkr.co/edit/qACqW4O4rJn7YHoPRWLy?p=preview
Full screen: https://run.plnkr.co/njw73AIIIuHXEooM/
Relevant CSS
body {
position: relative;
overflow-y: scroll;
overflow-x:hidden;
font: 500 16px/1.4 'Arial';
min-height: 100vh;
}
.spacer {
position: absolute;
bottom: -200px;
height: 60%;
}
#booknow {
position: fixed;
top: 30px;
right: 0;
float: right;
margin-left: 25px;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 22px;
color: #ffffff;
font-weight: 700;
line-height: 26px;
font-variant: small-caps;
z-index: 10;
background: #fc3;
padding: 10px;
width: 50px;
}
.wrapper {
position: absolute;
top: -110px;
margin: 25px;
padding: 5px 10px;
width: 100%;
border: 3px double grey;
min-height: 70px;
background: #eff999;
}
I have a site I'm working on where I have some text that needs to view close to the same size on all browsers. I'm using 1.6em as the font size in the pics below. The problem is that in IE 11 the font appears way larger than in it does in Chrome/FF/Safari. I have tried every font sizing option I can think of, such as; px,vh,vw,vmin,% but, all still render larger in IE 11 than all other browsers. Does anyone know a good work-around for this?
Not sure if it makes a difference but I am using a google font instead of a regular font.
Sample in Chrome (this is how it should look)
Sample in IE 11
My HTML:
<div class="banner-wrap">
<div>
<h1>Where Compassion Lives</h1>
</div>
<img class="banner" src="assets/images/banner_title_home.png">
<img class="greg" src="assets/images/greg-transparent.png">
</div>
MY CSS:
.banner-wrap {
position: relative;
width: 100%;
max-width: 796px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.banner-wrap div {
font-size: 1.6em;
position: absolute;
bottom: 59px;
left: 0px;
width: 100%;
height: auto;
z-index: 40;
font-family: 'Kaushan Script', cursive;
color: #FFF;
letter-spacing: 0.2em;
opacity: 0.9;
text-align: center;
text-shadow: 1px 1px 1px #999;
}
.banner-wrap img.banner {
position: absolute;
bottom: 59px;
left: 0px;
width: 100%;
height: auto;
z-index: 30;
}
.banner-wrap img.greg {
position: absolute;
bottom: 30px;
right: -50px;
width: 19vmin;
max-width:180px;
height: auto;
z-index: 40;
}
Nevermind...figured it out. since I was assigning the font-size using the selector div the user-agent style for the h1 tag was overriding my div font-size style. Changed my font-size style to use the h1 selector and all is good.
I've been meaning to replace the tables in my site with css positioning and have been trying to teach myself through tutorials etc. I've had some early success but it all came crashing down when I tried to create a sidebar. I'm hoping the problem has some kind of simple solution. The relative/absolute positioning of the elements is not going anywhere close to what I wanted to do. My goal is to have a sidebar with images that stack (float?) from top to bottom, with the middle elements being part of an unordered list. I got it to work once but now that stack on top of each other. It has to be the way I am setting the float and the absolute/relative positioning. After reading some articles here I tried adding a div wrapper to put them inside but I think I got myself even more confused. Is it possible someone could nudge me in the right direction? Here is the code:
CSS
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 50px;
padding: 0px;
color: #696969;
height: 160px;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS ----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* PRIMARY LAYOUT ELEMENTS ---------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
top: 0px;
left: 0px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 0px 4px 4px 4px;
min-height: 420px;
width: 500px;
float: left;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* MISC ----------------------------------------------------------*/
.clear
{
clear: both;
width: 936px;
height: 35px;
}
.title
{
display: block;
float: left;
text-align: justify;
}
.bold
{
font-weight: bold;
}
p.clear
{
clear: both;
height: 0;
margin: 0;
padding: 0;
}
#wrapper
{
position:relative;
height: 500px;
width: 900px;
}
#insidemain
{
position:absolute;
float: left;
width: 500px;
height 180px;
}
/* ---------------- Sidebar Items ---------------------*/
#sidebar /* Sidebar container */
{
position:absolute;
border-top: 1px solid #99CC33;
border-left: 1px solid #99CC33;
height: 300px;
width: 180px;
margin-right: 5px;
padding: 5px 0 0 5px;
}
#sidebarHeader
{
position:absolute;
height: 37px;
width: 172px;
float: left;
background-image: url(../img/TopMenu.jpg);
background-repeat:no-repeat;
}
#sidebarItems ul
{
position:absolute;
height: 27px;
width: 172px;
float:left;
background-image: url(../img/MenuItems.jpg);
background-repeat:no-repeat;
/*left: 6px;
top: 45px;*/
background-position: 0px -27px;
}
#sidebarFooter
{
position:absolute;
height: 46px;
width: 172px;
float:left;
background-image: url(../img/BottomMenu.jpg);
background-repeat:no-repeat;
}
And the HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<link href="Styles/Simple.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div class="header">header
<div class="title">
<h1>
Test Page
</h1>
</div>
</div>
<p class = "clear">clear</p>
<div id="wrapper">
<div id="sidebar">
<div id="sidebarHeader">
</div>
<div id="sidebarItems">
<ul>
<li>test item</li>
</ul>
</div>
<div id="sidebarFooter">
</div>
</div>
</div>
<div id="insidemain">
main
</div>
</div>
<div class="clear">clear</div>
<div class="footer">
<a href="http://www.google.com/">
Blah blah test to see how far this will go across the page blah blha lorem ipsum and various other stuff that is meaningless etc
</a>
</div>
</body>
</html>
Typically (for non-responsive sites especially), you'd have your .wrapper div around the entire content (header, content, sidebar, footer, etc). Then set your .wrappers width. Your .sidebar would have a set width and it would either float: left; or float: right; depending on the side you want it on. Set your .content div's width which would be less than or equal to your .wrapper width - your .sidebar width. Then add your .clearfix below so the .footer falls beneath everything. In most cases (at least for the large page chunks) you can avoid position:absolute; which helps make things more easily fall into place.
You really shouldn't have to float your div's or list. Those are block elements by default and will stack vertically regardless.
Also, as Scrimothy mentioned, you do not want absolutely positioned elements as that will take the element out of the page flow. In other words, they no longer take up "real" space in the page, and instead render at whatever coordinates you position them.
Similarly, floats also take up no space, except with other floated elements. That's why some UI developers will float almost every element on the page and "clear" them using a footer or at key breaks in the page. I personally don't recommend positioning in that fashion, but to each his own.
See if this quick tutorial helps you with some key positioning concepts: HERE
Don't target the same element with both float and position:absolute. It doesn't make much sense. Anywhere where you have float, you should get rid of position:absolute
Next, get rid of those silly class="clear" elements. Instead, target .footer with clear:both and .page with overflow-y:hidden;