I am having an issue with a layout I am trying to develop.
I basically have split the view-port into 2 equal width divs with a different background tiled image in each.
I have it stretching full screen 100%, but have a problem on scrolling.
The background image is cropped to the original height of the view-port..!
Here's the html:
<body>
<div id="container">
<div id="left" class="half">
left content here
</div>
<div id="right" class="half">
right content here
</div>
</div>
</body>
Here's the css:
html, body {
margin:0;
padding:0;
height:100%;
font: 14px Gotham, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
color: #505050;
}
div#container {
height: 100%;
min-width: 800px;
min-height: 500px;
}
div.half {
height: 100%;
width: 50%;
}
div.half#left {
float: left;
text-shadow: 0px 1px 1px white;
background-image: url(images/metalBG.jpg);
}
div.half#right {
float: right;
text-shadow: 0px -1px 1px black;
background-image: url(images/fabricBG.jpg);
}
I'm wondering if the is maybe a javascript, hence included in this cat also.
I would use Firebug or similar to verify that it's a background problem, not a DIV sizing problem. Maybe what's clipped is not your BG image, but rather the height of your DIVs.
If this is not the case, you can try adding
background-repeat:repeat,
to your CSS for div.half, but this is already the default value, so unless you have some CSS somewhere overriding it, should be in place anyway.
This seems to get me the result i want, not tested in explorer yet though.
html {
margin:0;
padding:0;
font: 14px Gotham, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
color: #505050;
background-image: url(images/metalBG.jpg);
}
body {
float:right;
margin:0;
padding:0;
width:50%;
background-image: url(images/fabricBG.jpg);
}
#left {
float:left;
margin-left:-600px;
width:550px;
}
I haven't run this code but adding it to the existing code should work (I hope :P).
You can keep the divs and their backgrounds fixed where they are using something like:
.half{
position:fixed; /* keeps the divs in the same place */
overflow:auto; /* overflowing content will scroll */
background-attachment:fixed; /* the background won't scroll with content */
}
Related
i'm trying to make a website similar to another one. On their website they use JavaScript to change the padding on the first section to keep it in the windows viewport. I have done this, but now I have an issue with making the button move the way theirs move when the window size is changed.
See the video below, basically when I make the height smaller (to a certain extent) the button should move up, but on my copy it doesn't as I can't figure out how they have done it. The video below shows their CSS Code and HTML and no values seem to be changes by JavaScript to make the button move, but it does, the padding of the element about doesn't change from 96.
YouTube Video
Edit:
My code so far, html:
<body>
<div class="container">
<section id="header" class="arrows" style="padding:280px 0px">
<header>
<h1>Mobile Paint Solutions</h1>
<p>Since 1980</p>
</header>
<footer>
<a onClick="test()" href="" class="button white">About</a>
</footer>
</section>
<section id="banner" class="arrows">
<header>
<div>
<h1>About Us</h1>
<p>We are a proud company and have been providing a superb service for many years. You may read some of our reviews or sumbmit your own below! </p>
</div>
</header>
<footer>
About
</footer>
</section>
</div>
</body>
CSS for the #header:
body {
text-align:center;
font-family:'Source Sans Pro', sans-serif;
letter-spacing: 1px;
background-image:url(images/bg.jpg);
padding:0px;
margin:0px;
}
header { margin-bottom: 1em; }
* {
margin:0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
*:before, *:after {
box-sizing: border-box;
}
/* Header and Title Styles */
#header {
display:inline-block;
text-transform:uppercase;
color:#FFF;
cursor:default;
text-align: center;
}
#header header p:before {
content: '';
display: block;
border-top: solid 1px rgba(255, 255, 255, 0.5);
margin: 4px 0 0.8em 0;
}
#header header p {
border-top:solid 1px rgba(255, 255, 255, 0.5);
letter-spacing:3px;
text-transform:uppercase;
font-size:1em;
margin-top:1em;
}
#header h1 {
font-size:2.5em;
font-weight:bold;
letter-spacing:3px;
}
Here is a link to their website so you can see it work.
Fixed the issue, it seem that the footer needed to be positioned absolute, changed around some other code for example positioned the header relative, then it seemed to start to work.
I just started learning HTML/CSS/JS 2 days ago and today I made a little tool for personal use.
I made it on computer with a 1980 x 1080 resolution but on other resolutions it doesn't look right.
What I made is a little tool which basically allows me to put a band and the band's genre into an input field and then add it to a list.
Everything looks fine on different resolutions except for when I add a band to the list.
The text that's supposed to go into the border goes all the way to the right side of the screen and the border becomes just a tiny square.
Another question I had, which I might aswell ask in here:
I would like to add a function where I can click one of the bands I added to the list, then highlight the band I clicked, and remove it by clicking a remove button.
But I have no clue where to start.
Html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel='stylesheet' href='stylesheet.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h2>Bands I Like</h2>
<form name="checkListForm">
<input type="text" id = "Item" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
<ol class = "Header">
<li>Band // Genre</li>
</ol>
<br/>
<ol class ="Bands">
</ol>
</body>
</html>
Css:
.Header {
list-style-type: none;
position: relative;
}
.Header {
background: black;
border-radius: 5px;
border: 1px solid white;
margin: 4px 20px;
padding:0.4em;
font-size: 1em;
height: 16px;
font-family: Verdana, Arial, Sans-Serif;
color:white;
text-align:center;
}
.Bands li {
list-style-type: none;
position: relative;
}
.Bands li {
background: #eeeeee;
border-radius: 5px;
border: 1px solid black;
margin: 4px 750px;
padding:0.4em;
font-size: 1em;
height: 16px;
font-family: Verdana, Arial, Sans-Serif;
//text-align:center;
}
h2 {
font-family:arial;
color:white;
}
form {
display: inline-block;
}
#button{
display: inline-block;
height:20px;
width:70px;
background-color:grey;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
.list {
font-family:garamond;
color:#cc0000;
}
body {
background-image: url("http://fc04.deviantart.net/fs71/f/2011/027/d/e/sphere_of_doom_by_crackoala-d386se9.png");
JS/jQuery:
$(document).ready(function(){
$("#button").click(function(){
$('.Bands').append('<li>'+$('#Item').val()+'</li>');
$('#Item').val("");
});
$('.Bands').sortable();
});
You can find all my code here:
http://jsfiddle.net/mLkcr501/
Any help would be appreciated!
This line in your CSS was bumping it to the right.
margin: 4px 750px;
Then just needed to float the links left so the border thingy covered them:
.bands{
float:left;
}
http://jsfiddle.net/mLkcr501/1/
-Cheers,
you must use mediaquery to ajust the size on diferent resolutions.
#media (max-width: 640px){
'here contains the class or ids'{width:100%; float: left;}
.greyBox2{display:none;}
.text{width: 100%; text-align: left; font-size: 17px;}
}
I know this must be an easy fix but I've spent the better part of the morning trying to find a solution (before posting here) to no avail.
I have a very simple jQuery "slideToggle" script that, when clicked, slides a div to the bottom of the button to the height I want it to display. It fits to the width I want(400px), starting at the left of the top div size(130px) and stretching to the right. problem is, I need it to stretch to the left (The top "button" is set to the far right of the page and it stretches off the page).
Here's the code I have:
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<style type="text/css">
#cartBox {
width: 110px;
height: 90px;
position: absolute;
margin-left: 90%;
top: 28px;
border: 3px solid #800000;
background-color: #800000;
border-radius: 12px;
z-index: 999;
}
#cartDropMenu {
position:absolute;
z-index:999;
width: 130px; /* width of top items (img + text (Cart Items) */
float:right;
top: 0px;
right: 0px;
color: white;
font-family: Arial, Helvetica, Sans serif;
font-size: 12px;
text-align: left;
}
#cartDropMenu p {
margin:0;
padding-left:24px; /* moves text to the left of img */
cursor:pointer;
background-image:url('../img/open.png');
background-position:left; /* positions image to the left or right 300px(cartDropMenu width parameter) */
background-repeat:no-repeat;
text-align: left;
}
#cartDropMenu p.close {
background-image:url('../img/close.png');
}
#DropMenu {
position:absolute;
z-index:999;
background-color:#fff;
border:solid 1px rgb(220,220,220);
padding:12px;
width:400px; /* width of drop down box */
box-shadow:1px 1px 4px rgb(220,220,220);
top:90px; /* position of start point for drop down box */
left:8000; /* ??? */
display:none;
color: black;
font-family: Arial, Helvetica, Sans serif;
font-size: 12px;
}
</style>
<script>
$(document).ready(function() {
$('#cartDropMenu p').click(function() {
$('#DropMenu').slideToggle(300);
$(this).toggleClass('close');
});
}); // end ready
</script>
</head>
<body>
<div id="cartBox">
<div id="cartDropMenu">
<p>      Display Cart</p>
<div id="DropMenu">
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
</div>
</div>
</div>
</body>
</html>
Here's the link to jfiddle:
enter link description here
Try adding right: 0; to #DropMenu
Add right:0; to #DropMenu. This will make the dropdown to start from the right end of the
Display cart p tag.
I am having problems with some content not fixed into one place when I resize the window on a browser, I basically have 3 div id box elements placed next to each other.
They are positioned fine however when I resize the screen they seem to fall below one another.
I have min-width: 947px; in the body of the CSS however this does not do anything.
HTML:
<div id ="featured1">
</div>
<div id ="featured3">
</div>
<div id ="featured2">
</div>
CSS:
#featured1{
float:left;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
margin-left:150px;
border:1px solid black;
width:250px;
height:150px;
}
#featured2 {
display: inline-block;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
}
#featured3 {
float:right;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
margin-right:200px;
}
For some reason when I try resizing the screen with this code the elements fall below each other, I am looking for the content to completely remain the same and not resize at all.
Here is the working example: jsFiddle link
use
display: inline-block;
on all 3 divs, then they wont go down.
Note: this property will not work on IE7 and smaller versions.
You have given your body a min-width:947px but the actual width occupied by all divs including the margin and borders, etc is 1150px.
Thats why its breaking.
Please add vertical-align: top; property on all the divs
This should help. FYI. When writing in CSS make sure you minify the code. Google developer has a great section on this (https://developers.google.com/speed/pagespeed/service/MinifyCSS).
HTML:
<div id="container">
<div id="featured1">
Featured 1
</div>
<div id="featured2">
Featured 2
</div>
<div id="featured3">
Featured 3
</div>
</div>
CSS:
#container {
position: absolute;
width: 836px;
height: 190px;
}
#featured1, #featured2, #featured3 {
position: relative;
font-family: 'Lobster13Regular';
font-size: 35px;
float: left;
left: 20px;
top: 20px;
width: 250px;
height: 150px;
border: 1px solid #000;
overflow: hidden; /*Remove if you are not going to overflow text in each element*/
}
#featured2, #featured3 {
margin-left: 20px;
}
I would like to implement a tree menu like the link bellow using HTML5 and CSS3 or jquery menu or somehow using ordinary html, css and javascript .
http://www.crystal.ch/abb/power_systems_landscape/
You may notice that there is following issues involved,
Nice hover effect (I badly need this)
Rotation of menu item arrow icon
Also here you see sliding up and down smoothly that is not problem to me.
Any idea or reference would be appreciated. thanks
To start we need the HTML
<p class="menu_head">first</p>
<div class="menu_body">
1
2
3
4
</div>
<p class="menu_head1">Second</p>
<div class="menu_body">
1
</div>
Jquery for the effect
$("#firstpane p.menu_head").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
});
$("#firstpane p.menu_head1").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
});
$("#firstpane p.menu_head").mouseover(function()
{
$(this).css("text-indent","35px");
$(this).css("backgroundImage","url(images/trans.png)").fadeTo("slow",0.33);
});
$("#firstpane p.menu_head").mouseout(function()
{
$(this).css("text-indent","10px");
$(this).css("backgroundImage","url(images/headbot1.png)").fadeTo("slow", 1);
});
I added the mouseover and mouseout for your glass effect. just create a background with white color or any color or just erase the .css can make it this way.
$(this).fadeTo("slow",0.33);
CSS
.menu_head {
font-family: arial;font-weight: bold;
font-size:10px;
color: black;
left:3%;
height:7px;
text-indent:10px;
padding: 10px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
vertical-align: middle;
}
.menu_head1 {
font-family: arial;font-weight: bold;
font-size:10px;
color: black;
left:3%;
height:7px;
text-indent:10px;
padding: 10px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
vertical-align: middle;
}
.menu_body {
display:none;
}
.menu_body a{
font-family: arial;font-weight: bold;
left:3%;
width: 220px;
height:7px;
text-indent:10px;
position:relative;
padding: 10px 15px;
display:block;
color:#006699;
padding-left:10px;
font-weight:bold;
font-size:10px;
text-decoration:none;
vertical-align: middle;
}
See Example
try to edit the css for it was made to adapt to my site.
Gudluck