My site has a wrapper with three background images. A static top and bottom image and a third image that repeats along the y axis. For some reason the top background image is getting cut off and I can't figure out way.
Here is a link to the live site: http://storrepictures.weebly.com/projects.html
I have offset the top and bottom images so you can see what they look like. You can see that the top one is cut off. I've tried messing around with some of the div padding settings but can't seem to get it to work.
One interesting note: The background images used to be JPEGs (I switched to PNG files because I needed transparency). When I was using JPEGs this was not a problem - the three images lined up perfectly.
Let me know if it would help to have the actual code posted. From what I've been reading on this forum, people seem to like looking at the live site and I didn't want to make the post too long.
Thanks a lot for all your help.
*Here's the CSS:
body {
background: #ffffff;
font-family: Tahoma, arial, sans-serif;
font-size:12px;
color:#666666;
margin: 0;
padding: 0;
}
#wrapper {
background: url(containerbg.png) center repeat-y;
}
#wrappertop{
background: url(containertop.png) no-repeat;
background-position: 0px -40px;
}
#wrappertbtm{
background: url(containerbtm.png) no-repeat;
background-position: 34px 480px;
padding-bottom: 65px;
}
.title{
width: 1022px;
min-height: 30px;
_height: 30px;
padding: 10px 0px 10px 0px;
font-size: 30px;
}
.title, .title a {
color: #fff;
}
#container {
width: 100%;
position: relative;
top: 125px;
bottom: 0px;
margin: 0px;
padding: -300px 0px 0px 0px;
}
#content{
width: 800px;
min-height: 500px;
_height: 500px;
margin: 0pt auto;
}
#content a{
color: #ff6633;
text-decoration: none;
}
.weebly_header{
background: url(%%HEADERIMG%%) no-repeat;
}
And here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<style>
#content
{
height:400px !important;
}
</style>
<![endif]-->
</head>
<body class="wsite-theme-light">
<div id="wrapper">
<div id="wrappertop">
<div id="wrappertbtm">
<div id="container">
<div id="header">
<div id="headerleft">{logo max-height="60"}</div>
<div id="navigation">{menu}</div>
</div>
<div id="content">{content}
<div id="footer">{footer}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
From what I can see, your body element has padding and margin values interfering:
body {
background: url(theme/backgroundtop.jpg?909894) left top repeat-x,
url(theme/backgroundbottom.jpg?909894) left bottom repeat-x,
url(theme/backgroundmid.jpg?909894) left repeat;
font-family: Tahoma, arial, sans-serif;
font-size: 12px;
color: #666666;
height: 100%;
margin: 100px 0 0 0;
padding: 100px 0 0 0;
}
You should get rid of these rules:
body {
/* ... */
margin: 0;
padding: 0;
}
and all should be fine.
Note: setting height: 100% to the body element is meaningless, you might wanna remove that, too.
Note #2: you have only 3 values for the multiple backgrounds of the body, which will be parsed as T/LR/B, while the order or those values indicates you should change their order, i.e. backgroundtop / backgroundmid / backgroundbottom instead of backgroundtop / backgroundbottom / backgroundmid
Related
I have a photo gallery that I have created a frame for that has a bit of transparent tape at the top. I want it to look like a polaroid taped to my background.
The tape works perfectly onto the background, but i'd like it to also be in front of the picture. I am using a negative margin on my picture to make it overlap the frame. Unfortunately the picture appears to be in front of my frame.
Thank you in advance code gods of the internet.
This is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html, body {
background: black;
background-repeat: repeat;
background-position: left top;
background-image: url("http://moof-it.com/testing/body_bg.jpg");
background-attachment: fixed;
}
.galleryspace{
display:inline-block;
padding:15px;
margin:0px;
}
.galleryframe {
display:block;
text-align:center;
vertical-align:top;
margin:0px;
padding:0px;
border-color: white;
border-style:solid;
border-width:28px 10px 10px 10px;
-webkit-border-image: url(http://moof-it.com/testing/tapeframe2.png) 28 stretch;
-o-border-image: url(http://moof-it.com/testing/tapeframe2.png) 28 stretch;
border-image: url(http://moof-it.com/testing/tapeframe2.png) 28 stretch;
}
.imageingallery {
display:block;
background:white;
}
.imageingallery img{
height:240px;
margin:-12px -3px -1px -1px;
padding:0px;
}
.imageingallery a {
text-decoration:none;
font-size:14px;
font-variant:small-caps;
color: #C27890;
}
</style>
</head>
<body>
<div class='galleryspace'>
<center>
<div class='galleryframe'>
<div class='imageingallery'>
<a href='http://moof-it.com/testing/ALittleSpell.jpg' title='A Little Spell'>
<img src='http://moof-it.com/testing/ALittleSpell.jpg' alt='A Little Spell' title='A Little Spell'>
<br>
A Little Spell
</a>
</div>
</div>
</center>
</div>
</body>
</html>
I would recommend you not to use border-image for this, but rather make the tape a separate image and position it the way you want. Here's an example of what I mean. Note that I don't have access to your tape image separately, so I just made a red block. You can replace that with the image of the tape.
html,
body {
background: black;
background-repeat: repeat;
background-position: left top;
background-image: url("http://moof-it.com/testing/body_bg.jpg");
background-attachment: fixed;
}
.galleryspace {
display: inline-block;
padding: 15px;
margin: 0px;
}
.galleryframe {
display: block;
text-align: center;
vertical-align: top;
margin: 0px;
padding: 0px;
border-color: white;
border-style: solid;
border-width: 20px 10px 10px 10px;
}
.imageingallery {
display: block;
background: white;
}
.imageingallery .image {
height: 240px;
margin: -12px -3px -1px -1px;
padding: 0px;
}
.imageingallery a {
text-decoration: none;
font-size: 14px;
font-variant: small-caps;
color: #C27890;
display: block;
position: relative;
}
.blockOver {
display: block;
position: absolute;
left: 0;
right: 0;
margin: -40px auto;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class='galleryspace'>
<center>
<div class='galleryframe'>
<div class='imageingallery'>
<a href='http://moof-it.com/testing/ALittleSpell.jpg' title='A Little Spell'>
<img class="blockOver" src="http://via.placeholder.com/50x50/ff0000">
<img class="image" src='http://moof-it.com/testing/ALittleSpell.jpg' alt='A Little Spell' title='A Little Spell'>
<br> A Little Spell
</a>
</div>
</div>
</center>
</div>
</body>
</html>
Note: I am a beginner. For some reason, my links that were working don't work at all anymore. What am I doing wrong?
Here's the HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="portfoliostyles.css">
<title>Home</title>
</head>
<body>
<div class="header"><img class="hoofd" src="images/leaugeau.png" alt="logo">
<ul>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<img class="line" src="images/line.jpg" alt="lijn" width='95%' height='2px'>
<div class=content>
<img class="image" src="images/thumbnails/watrgatrthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/typhlotrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/anneketrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
</div>
</body>
</html>
And here's my CSS:
#charset "UTF-8";
/* CSS Document */
html,body
{
height: 150%;
width: 100%;
margin: 0px 0px 0px 0px;
}
.hoofd
{
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.header
{
height: 216px;
width: 99%;
position: fixed;
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;
}
ul
{
list-style-type:none;
margin-right:5%;
padding:0;
text-align:center;
}
li
{
display:inline;
float:right;
margin-right:2%;
font-size:45px;
line-height: 280px;
}
.content
{
padding: 230px 0 0 1.5%;
}
a
{
font-family: "HelveticaNeue-light";
text-decoration: none;
color: #000000;
}
a:hover
{
font-family: "HelveticaNeue-light";
color: #E8DA62;
}
h1
{
font-family: "HelveticaNeue-thin";
font-size: 24px;
}
p
{
font-family: "HelveticaNeue-thin";
font-size: 12px;
}
edit: Oh, and to clarify: My pages where, indeed, in the root folder, so no more folder-linking necessary.
But it got solved, thanks! Gotta work something out for the fixed line thing though. But it'll work out.
the problem with the CSS code is you are using fixed position on some classes.
would be better if you remove position: fixed; from below these two classes.
For better understanding check the Demo.
.header
{
height: 216px;
width: 99%;
position: fixed; /*Remove this line; so anchor tag could work*/
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;/*Remove this line; so anchor tag could work*/
}
you are overlapping with position:fixed
remove it from
.line
Demo
It's kinda hard to see without an actual example, but it looks like your .line is on top of them. If I'm correct:
Since it's position:fixed, it is being overlayed at the top, then you have given it a padding-top:216px; which is increasing the area it is consuming from the top, likely overlaying itself ontop of your header and navigation menu.
To fix it, you should figure out another way to position .line wherever you are trying to. You likely want top:216:
.line {
margin: 0px 0px 15px 0px;
top: 216px;
position:fixed;
}
I'm a newbie when it comes to CSS. My overall goal is to convert a small web application that I have which displays data in table to using CSS.
A description of what the application displays is that in a left hand window there is a list of employee names, on the right is a cell for each day that the employee has worked which spans a user selectable period.
In the code below, I can't get the cell elements to overflow so that the user can scroll to the right, instead the cells are overflowing down.
Is there a way I can get the overflow to work horizontally rather than vertically so I can scroll left and right to see all the cells rather than what it is doing now which is creating a scroll bar vertically?
Much appreciated if anyone can help - it's got me frustrated!
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">Header</div>
<div id="centreposition">
<div id="centrecontent">
<?php
for ($counter = 0; $counter < 100; $counter++)
{
?>
<div id="cell">AB</div>
<?php
}
?>
</div>
</div>
<div id="footer">Footer.</div>
<div id="left">Left <div>
</body>
</html>
CSS:
body {
margin: 0px;
}
#header {
height: 100px;
background-color: #9FF300;
}
#centreposition {
width: 600px;
padding-right: 10px;
padding-left: 10%;
}
#centrecontent {
z-index: 100;
min-width: 1px;
height: 40px;
border: 1px solid #999999;
padding: 4px;
background-color: #FFFF00;
overflow-x: scroll;
}
#footer {
padding-left: 175px;
background-color: #20F3F7;
}
#left {
width: 10%;
position: absolute;
top: 100px;
left: 0px;
padding: 10px 0px 10px 6px;
}
#right {
width: 130px;
position: absolute;
top: 100px;
right: 0px;
height: 200px;
}
#cell {
float: left;
width: 24px;
height: 16px;
margin: 1px;
background-color: #aaccdd;
font-size: 10px;
border-style: solid;
border-left-width: 1px;
border-color: #555555;
}
Two suggestions:
You're essentially asking for a table-based layout, so you may as
well use an HTML table.
Each of your cells has a fixed width, and your PHP code should know
how many of them to create, so you can set the width of the
container element (#centrecontent here) wide enough to contain them
all.
Also, element IDs are supposed to be unique within the HTML doc, so creating 100 elements all with #cell as their ID is incorrect - you should use a CSS class name instead.
You could put all of the cells in another div and set that div to a specific width.
jsfiddle
I am trying to make a webpage with three divs with the same background one on top left (as you look as the screen), one center right, and bottom left. I got the top left one working and copied the same code just changing the alignment. The second one just keeps putting the text at the top with no formatting. This is driving me nuts.
Thank you
body {
font-family: Copperplate / Copperplate Gothic Light, sans-serif;
background-image: url(AAHbackground.jpg);
background-size: cover;
}
#welcome {
padding: 5px; 5px;5px; 5px;
padding-left: 10px;
margin: 10x 10x 10x 10x;
text-align: left;
color: #191919;
background-image: url(Divbackgrounds.jpg);
background-repeat: no-repeat;
float: left;
width: 350px;
p style = "float: left;"
color : #731D1D;
h1, h2 {
color: #FF0066;
}
#leed {
padding: 5px; 5px;5px; 5px;
padding-right: 30px;
margin: 10x 10x 10x 10x;
text-align: center;
color: #191919;
background-image: url(Divbackgrounds1.jpg);
background-repeat: no-repeat
position: absolute; left: 100px; top: 100px;
width: 350px;
color : #731D1D;
h1, h2 {
color: #FF0066;
}
Here's the problem. It seems to be moving the text and such but not attaching the background image to it. Here's the HTML code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="AAHStylesheet.css"/>
<title>Appalachian </title>
</head>
<body>
<div id ="welcome">
<h1> Title </h1>
<p>text text text</p>
</div>
<div id ="leed">
<h1>Header/h1>
<p>text .</p>
</div>
</body>
</html>
Please help :)
Kat
You may have a look at CSS background-position Property
I believe this is a beginner's CSS question. I am utilizing the method described in http://www.xs4all.nl/~peterned/examples/csslayout1.html to fix a header to the top and a footer to the bottom.
What I'd like to achieve now is two columns inside the content div. A left one of 200px and a right one that takes up the rest of the width.
Unfortunately, I can't get the left and right divs to display correctly: they just don't grow vertically, and if I make the right div "width: 100%" it positions itself underneath the left one.
What is the trick to make the left and right div take up all the space within the content div?
The layout1.css is the original one. I just added two entries: #left and #right
layout1.css:
/**
* 100% height layout with header and footer
* ----------------------------------------------
* Feel free to copy/use/change/improve
*/
html,body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
background: gray;
font-family: arial, sans-serif;
font-size: small;
color: #666;
}
h1 {
font: 1.5em georgia, serif;
margin: 0.5em 0;
}
h2 {
font: 1.25em georgia, serif;
margin: 0 0 0.5em;
}
h1,h2,a {
color: orange;
}
p {
line-height: 1.5;
margin: 0 0 1em;
}
div#container {
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
width: 750px;
background: #f0f0f0;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom: 6px double gray;
}
div#header p {
font-style: italic;
font-size: 1.1em;
margin: 0;
}
div#content {
padding: 1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align: justify;
padding: 0 1em;
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background: #ddd;
border-top: 6px double gray;
}
div#footer p {
padding: 1em;
margin: 0;
}
// added the following:
div#left {
border: 1px solid red;
width: 200px;
float: left;
min-height: 100%;
height: 100%;
padding-left: 10px;
margin-right: 10px;
}
div#right {
border: 1px solid blue;
float: left;
min-height: 100%;
height: 100%;
padding-left: 10px;
margin-right: 10px;
}
layout.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Layout - 100% height</title>
<link rel="stylesheet" type="text/css" href="layout1.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>header</h1>
</div>
<div id="content">
<div id="left">
left column
</div>
<div id="right">
right column
</div>
</div>
<div id="footer">
<p>
footer
</p>
</div>
</div>
</body>
Just in case somebody else stumbles onto this question like me. This is what I ended up doing.
<div class="left">
text
</div>
<div class="right">
text
</div>
.left {
float: left;
width: 200px;
}
.right {
margin-left: 200px;
}
And for simpler cases (e.g., when you don't need border on the right element), you don't even have to specify left width twice: http://jsfiddle.net/j8T9v/1/
Another example, without setting up width at all. Left element takes as much space as it needs, right - the rest: http://jsfiddle.net/j8T9v/2/
The way I usually do it is by using the float and padding properties.
HTML:
<div id="leftCol">
content
</div>
<div id = "rightCol">
content
</div>
CSS:
#leftCol {
width: 200px;
}
#rightCol {
width: 100%;
float: right;
padding-left: 200px;
}
Should work.
So you are using float, and padding to put the div's side by side.
You might need:
position: absolute;
top: 0px;
right: 0px;
in your #rightCol CSS style (Not tested btw... from memory)