I have used Animate.css for creating a left and right slide in effect. I can't figure out why the slides are adding up to the invisible width. Could any of you help me?
http://jsfiddle.net/itsnamitashetty/CKgX8/1/
<style>
body{
margin:0;
padding:0;
}
#animationentry{
width:100%;
height:700px;
margin:0;
padding:0;
background:green;
display:block;
}
#cww_bg{
display:block;
float:left;
width:50%;
background:red;
}
#crw_bg{
display:block;
float:left;
width:50%;
background:yellow;
}
</style>
<link type="text/css" rel="stylesheet" href="css/animate.css">
</head>
<body>
<div id="animationentry">
<div id="crw_bg" class="animated slideInLeft">
<img src="images/crw.jpg">
</div>
<div id="cww_bg" class="animated slideInRight">
<img src="images/cww.jpg">
</div>
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/CKgX8/2/
Add overflow: hidden; to #animationentry
#animationentry{ overflow: hidden;}
I'm trying to design a website where everything is contained withing one main div that restricts everything to 85% of the screen width. I am trying to center the outer div, which seems to have worked, and make the inner div (menubar) float to the left. But no matter what I do I can't get it to go to the left of the outer div, it goes all the way to the left of the page. Thanks for any help.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accessorize With Style | Index</title>
<style type="text/css">
body {
overflow:hidden;
}
img.background {
position:absolute;
top:0;
left:0;
width: 100%;
z-index:-1;
}
.menu{
margin:0;
padding:0;
width:300px;
list-style:none;
background:rgb(255,255,255);
}
.menu li{
padding:0;
margin:0 0 1px 0;
height:40px;
display:block;
}
.menu li a{
text-align:left;
height:40px;
padding:0px 25px;
font:16px Verdana, Arial, Helvetica, sans-serif;
color:rgb(255,255,255);
display:block;
background:url('images/verMenuImages.png') 0px 0px no-repeat;
text-decoration:none;
}
.menu li a:hover{
background:url('images/verMenuImages.png') 0px -40px no-repeat;
color:rgb(0,0,0);
}
.menu li a.active, .menu li a.active:hover{
background:url('images/verMenuImages.png') 0px -80px no-repeat;
color:rgb(255,255,255);
}
.menu li a span{
line-height:40px;
}
#site {
width:85%;
}
</style>
</head>
<body>
<img src="images/background.jpg" class="background" />
<div id="site" align="center">
<div id="menubar" align="left">
<ul class="menu">
<li><span>Home</span></li>
<li><span>About</span></li>
<li><span>Necklaces</span></li>
<li><span>Bracelets</span></li>
<li><span>Earings</span></li>
<li><span>Rings</span></li>
<li><span>Scarves</span></li>
<li><span>Contact</span></li>
</ul>
</div>
<div id="gallery" align="center">
</div>
</div>
</body>
</html>
In your CSS, add
#menubar {
position: relative;
left: 0px;
}
and remove the inline CSS:
<div id="menubar">
You might want to use HTML5 notation.
Live Demo
HTML
<main>
<aside>Menu</aside>
<section>
<article>Content</article>
</section>
</main>
CSS
html {
background-color:black;
}
main {
background-color:red;
width:85%;
height:400px;
margin: 0 auto;
padding:4px;
}
aside {
width:20%;
height:90%;
margin-top:5%;
background-color:blue;
color:white;
clear:left;
display:inline-block;
}
section {
display:inline-block;
background-color:green;
padding:4px;
}
article {
background-color:#F60;
}
so I did searches on here beforehand, trying to find an answer to my question, but all the solutions I found gave me no results. Basically, I have an image in my div#wrapper that I'd like to display, but it won't unless I fill the area -after- the respective div with text.
I have overflow:auto; in my #wrapper since I have floats in the succeeding divs.
CSS file:
#media only screen and (min-width: 25em) {
html {
background: url(images/gridbg.jpg) repeat fixed center top;
}
}
#media only screen and (max-width:25em) {
html {
background-color:#0c0c1f;
}
}
img {
border:0px;
}
textarea:focus, input:focus{
outline: none;
}
#wrapper {
margin:0 auto;
width:60em;
overflow:auto;
background-image:url(images/cont-bg.png);
}
#content {
text-align:justify;
position:fixed;
width:59em;
height:100%;
overflow:auto;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.4em;
padding-right: 0.4em;
outline:none;
z-index:2;
margin-top:12em;
}
#homeNav {
position:fixed;
float:left;
margin-left:0.65em;
margin-top:0.65em;
z-index:3;
}
#primaryNav {
z-index:2;
float:right;
margin-left:28em;
margin-top:1em;
position:fixed;
}
#navGFX {
background-image:url(images/navGFX.png);
background-repeat:no-repeat;
width:60em;
height:8em;
float:left;
position:fixed;
z-index:1;
margin-top:3em;
}
HTML file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ag Design</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="scrollstyles.css"/>
<script type='text/javascript' src="js/flexcroll.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navGFX">
<div id="homeNav"><img src="images/buttons/btn_logo.png"></div>
<div id="primaryNav">
<img src="images/buttons/btn_home.png">
<img src="images/buttons/btn_link1.png">
<img src="images/buttons/btn_link2.png">
<img src="images/buttons/btn_link3.png">
<img src="images/buttons/btn_link4.png">
</div>
</div>
<div id="content" class="flexcroll">
This area is full of filler text
</div>
</div>
</body>
</html>
I haven't the foggiest clue what I'm doing wrong. Anyone have any ideas? :/
Just remove the CSS:
position: fixed;
from the #wrapper id and the background-image will appear
My issue is that when I zoom in or out of the page (in all the browsers I tried), only some parts of it are displayed as zoomed (the contents that are in the divs, but not the divs themselves). I put the borders to show it easily.
When I searched for a solution, all of them mentioned that it is because of fixed width values by using pixels (px). So, I used % when putting values to width and height; but still, the issue remains...
Here are some screenshots to illustrate my problem:
When zoomed-in:
When zoomed-out:
Here is my code:
HTML:
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="title_bar">
some txt here
<div id="title_img"></div>
<div id="title_txt"></div>
<div id="menu_navigation"></div>
</div>
<div id="title_bar_2">
some txt here
</div>
<div id="container_columns">
<div id="column_1">
<span id="column_1_content">some txt here</span>
</div>
<div id="column_2">
<span id="column_2_content">some txt here</span>
</div>
</div>
</body>
</html>
CSS:
html body
{
margin: 0;
width: 100%;
height: 100%;
background-color:#f2f2f2;
}
div#title_bar
{
height:4%;
width:76%;
margin:auto;
margin-top:4%;
border-style:solid;
border-color:blue;
}
div#title_bar_2
{
text-align:center;
height:44%;
width:76%;
margin:auto;
margin-top:2%;
border-style:solid;
border-color:blue;
}
div#title_bar img
{
margin-top:1%;
float:left;
}
div#title_txt
{
float:left;
margin-left:2%;
margin-top:1.4%;
font-style: italic;
font-family:verdana;
font-size: 16px;
}
div#menu_navigation
{
float:left;
margin-left:35%;
margin-top:1.4%;
font-size:19px;
}
div#container_columns
{
margin:auto;
width:76.5%;
margin-top:2%;
height:27%;
border-style:solid;
border-color:blue;
}
div#column_1
{
height:100%;
width:49%;
float:left;
border-style:solid;
border-color:blue;
}
div#column_2
{
margin-left:1%;
width:48%;
float:left;
height:100%;
}
Hi This is happening because you are using the property height. try not to use it, if you want this property.
html body{
margin: 0;
width: 100%;
background-color:#f2f2f2;}
div#title_bar{
width:76%;
margin:auto;
margin-top:4%;
border-style:solid;
border-color:blue;}
div#title_bar_2{
text-align:center;
width:76%;
margin:auto;
margin-top:2%;
border-style:solid;
border-color:blue;}
div#title_bar img{
margin-top:1%;
float:left;}
div#title_txt{
float:left;
margin-left:2%;
margin-top:1.4%;
font-style: italic;
font-family:verdana;
font-size: 16px;}
div#menu_navigation{
float:left;
margin-left:35%;
margin-top:1.4%;
font-size:19px;}
div#container_columns{
margin:auto;
width:76.5%;
margin-top:2%;
border-style:solid;
border-color:blue;
display:block;}
div#column_1{
width:48%;
float:left;
border-style:solid;
border-color:blue;}
div#column_2{
margin-left:1%;
width:48%;
float:left;}
Im a self learner for web designing, so i might missed out some fundamentals coding.
So the problem is the content is overspilling the div from the right in one line.
The code as below
THE HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<div id="bg">
<div id="mainwrapper">
<div id="header">
<div id="logo"></div>
</div>
<div id="contentwrapper">
<div id="leftwrapper">
<div id="contentspacing">
<div id="content">
<p>
asdfasdfasdfasdvvasdvasdvasdvfasdvsdasdas
dfasdfasdfasdvvasdvasdvasdvfasdvsdasdasdfasdfas
</p>
</div>
</div>
</div>
<div id="rightwrapper">
asdfasdf
</div>
</div>
</div>
</div>
</body>
</html>
THE CSS AS BELOW
/* ---------------------------------------------------------------*/
/* ---------------------> RESET <<<-------------------------*/
/* ---------------------------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
body {
font-family:Arial,sans-serif;
font-size:100%;
line-height:1.3em;
_font-size:16px;
color:#504e45;
background:#ebe9e1 url(pics/bg.jpg) top left repeat-x;
}
#bg {
float:left;
display:block;
height:600px;
width:100%;
background:url(pics/hotel-bg.jpg) top center no-repeat;
margin:0 0 0 0;
}
#mainwrapper {
float:left;
display:block;
width:1000px;
margin:0 auto;
}
#header {
float:left;
display:block;
}
#logo {
width:274px;
height:44px;
background:url(pics/logo.png) no-repeat;
margin:50 0 0 100;
}
p {
float:left;
display:inline-block;
line-height:1.7em;
margin:1em 0;
-webkit-margin-before:1em;
-webkit-margin-after:1em;
-webkit-margin-start:0px;
-webkit-margin-end:0px;
}
#contentwrapper {
float:left;
display:block;
width:1000px;
}
#leftwrapper {
float:left;
display:block;
width:593px;
}
#contentspacing {
float:left;
display:block;
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
#content {
float:left;
display:block;
height:auto;
width:593px;
border:1px solid #bdc9f4;
background:url(pics/bg2.png) top left repeat-x;
margin:35 120;
}
#rightwrapper {
float:left;
display:block;
}
Add word-wrap: break-word; word-break: break-all; to #content
Demo here http://jsfiddle.net/ZK6yR/
This occurs when you are using rather long words. Try this:
word-wrap: no-break;