I've got some problem with css, the content is sticking out from the boundaries.
It is expected to have a scrollbar rather than hidden overflow, but the boundaries.
Please help.
Here's the code, which reflects my CSS structure:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body{
border:3px solid #FFAD17;
background-color:#FFF;
border-radius:7px;
font:9.5pt Tahoma;
margin:0px;
padding:0px;
}
html {
margin:0px;
padding:0px;
}
div.header{
background-color:yellow;
background-position:top;
padding: 3px;
}
div.wrapper{
float:left;
}
div.context_wrapper{
margin-left:158px;
padding: 3px;
}
div.context{
float:left;
}
div.menu{
text-align:center;
padding: 3px;
width:140px;
float:left;
}
div.footer{
background-color:yellow;
background-position:bottom;
width:auto;
padding: 3px;
clear:both;
}
</style>
</head>
<body>
<div class="header">Head</div>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="context_wrapper">
<div class="context">
ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent
</div>
</div>
</div>
<div class="footer">Foot</div>
</body>
</html>
a busy cat http://img215.imageshack.us/img215/6065/20120223132157.png
I shouldn't style the body element like it was a <div> element, better to make a new wrapper. Furthermore, from your question I gather you're looking for something like this: http://jsfiddle.net/SQDXt/
Basically, this adds the wrapper div with the scrollbar when your content exceeds the size of the wrapper. Also, the header and footer are within the second wrapper, to span the whole width when the content exceeds the first wrapper's width.
Related
/// The text I'm referring to is the text inside the transparent caption boxes displayed just below my picture slider(Jquery cycle2). The text seems to adhere to the opacity I've commanded for the box. I'd also like the box to span the width of the slider and the text within it to be centered, but now I'm getting ahead of myself. I would be glad to try any solutions suggested to me. I've also included an example from another website of what Im trying to imitate.
http://sff-law.ca/.
Instead, I've only been able to create the following:
///
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.cycle-slideshow, .cycle-slideshow * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* overlay */
.cycle-overlay {
font-family: Baskerville, Georgia, "Times New Roman", Times, serif;
z-index: 800;
background: black;
color: #FFF;
opacity: .1;
overflow: hidden;
position: absolute;
top: 211px;
font-size: 16px;
font-weight: bold;
right: auto;
left: auto;
clear: both;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 6px;
margin-left: 1px;
font-style: italic;
}
</style>
<script src="jquery.cycle2.caption2.min.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.cycle2.js" type="text/javascript"></script>
</head>
<body background="KAWARTHA LAW/Pics/6a00d83452719d69e2017d41a50bc6970c.jpg">
<div id="back">
<div class="cycle-slideshow"
data-cycle-timeout=2000
>
<!-- empty element for overlay -->
<div class="cycle-overlay"></div>
<img src="Slidding/buying.gif"
data-cycle-title="Contracts"
data-cycle-desc="">
<img src="Slidding/last-will-and-testament-and-glasses.gif"
data-cycle-title="Corporate"
data-cycle-desc="">
<img src="Slidding/last-will.gif"
data-cycle-title="Wills and more wills"
data-cycle-desc="">
<img src="Slidding/Top-5-Reasons-to-have-a-Will-in-PA-02-08-12.gif"
data-cycle-title="Good Wills"
data-cycle-desc="">
</div>
</div>
</body>
</html>
If you only need this for newer browsers you can set the CSS to use an RGBA value, then the text will be opaque (This will work in IE9+, Chrome, Firefox, Safari):
.cycle-overlay{
background-color:(0,0,0,.1);
}
If you need a backwards compatible solution, you can create a 1x1 PNG image with the transparency that you want, and set that as the background.
I'm hoping someone can point me the right way. When I view my site in Dreamweaver, all of my divs line up correctly. That is to say, the text sits on the background next to the menu div. However, when I test in a browser, the text sits at the bottom, below the background image.
http://jsfiddle.net/sodisarmingdarling/Pr5AQ/
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
html, body, .container {
width: 100%;
height: 100%;
margin: 0;
padding:0;
background-image:url(Background.gif);
background-repeat:no-repeat;
}
.menu {
padding: 70px 10px;
float: left;
}
li{
padding: 10px 20px;
margin: 0px 0;
list-style-type: none;
border: 0px;
}
.content{
padding: 130px 10px;
float: left;
font-family: "Letter Gothic Std Bold";
font-size: 16 pt;
color: #99CCFF;
}
</style>
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li><a href = "#" ><img src="images/DarkLayout_03.gif" width="166" height="66" /></a></li>
<li><img src="images/DarkLayout_06.gif" width="166" height="66" /></li>
<li><img src="images/DarkLayout_08.gif" width="164" height="66" /></li>
<li><img src="images/DarkLayout_11.gif" width="164" height="66" /></li>
<li> <img src="images/DarkLayout_13.gif" width="166" height="66" /></li>
</ul>
</div>
<div class="content">
text text text
</div>
</div>
</body>
</html>
What I see in Dreamweaver:
What I get in the browser (tested in Safari, Chrome, and Mozilla):
In the CSS for the .content, change the float from left, to none.
Current CSS:
.content{
padding: 130px 10px;
float: left;
font-family: "Letter Gothic Std Bold";
font-size: 16 pt;
color: #99CCFF;
}
New CSS:
.content{
padding: 130px 10px;
float: none;
font-family: "Letter Gothic Std Bold";
font-size: 16 pt;
color: #99CCFF;
}
Here is a jsFiddle of it (using random images in the html), http://jsfiddle.net/FvAW4/
Whilst the current CSS works for small text, with larger text it forces the text to go underneath everything. Changing it to none will solve this.
Design view is intended as a viewport for you to work in, and not as a browser to test in (even though most content is displayed the same in browsers). Dreamweaver has an option to enable the Design view to render it as though it were a browser, however. This option is called the "Live" view, and it is the tab next to the Design view tab.
I would suggest you get used to using Live view, as it's quick and easy to display the page. But remember, sometimes Dreamweaver renders the page contents differently to that of browsers.
I have created a page action extension that uses a popup.html file. It used to work perfectly. When I click the icon it displays a small box with only the corner of the popup.html page visible. I set the body and html css height and width but had no luck of making the box bigger. I also moved the css onto another page called popup.css and added to the popup.html head.
Has anyone run into this issue?
Please help.
HTML:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup_script.js"></script>
<link href="popup.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li id="all">All</li>
<li id="title">Name</li>
<li id="artist">Artist</li>
<li id="album">Album</li>
<li id="art">Artwork</li>
</ul>
<textarea id="info" type="text"></textarea>
</body>
</html>
CSS:
body {
font-family: arial;
font-size: 13pt;
margin: 0;
padding: 0;
color: #06477D;
}
ul {
list-style-type: none;
cursor: pointer;
padding: 0;
margin: 0;
}
li {
text-align: center;
padding: 5px 20px;
}
li:hover {
background: #06477D;
color: white;
}
textarea#info {
position: absolute;
}
Look at this Link
It's seemed to be a Chrome bug. But it's fixed in Canary-Version. So I think it's just a temporary problem.
well, I've got a straightforward layout,
but there is a problem with boundaries,
when I resize the window, the content gets outside the boundaries.
that's how it looks like:
Boundaries offset http://img819.imageshack.us/img819/1893/aproblem.png
I'd would be glad if you could offer a solution...
Dunno what's causing it.
Note, please don't change the wrapper thing, for that's really the only layout that worked for my site... But I think its possible to modify the header and the foot, or perhaps put some more wrappers, if I only knew where.
Thanks!
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body{
border:3px solid #FFAD17;
background-color:#FFF;
border-radius:7px;
font:9.5pt Tahoma;
margin:0px;
padding:0px;
}
html {
margin:0px;
padding:0px;
}
div.header{
background-image:url('http://img804.imageshack.us/img804/4743/testcj.png');
background-position:top;
background-size:100% 100%;
background-repeat:repeat-x;
padding: 3px;
}
div.wrapper{
float:left;
}
div.context_wrapper{
margin-left:158px;
padding: 3px;
}
div.context{
float:left;
}
div.menu{
text-align:center;
padding: 3px;
width:140px;
float:left;
}
div.footer{
background-image:url('http://img198.imageshack.us/img198/9422/test2fy.png');
background-position:bottom;
background-size:100% 100%;
background-repeat:repeat-x;
width:auto;
padding: 3px;
clear:both;
}
</style>
</head>
<body>
<div class="header">Head</div>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="context_wrapper">
<div class="context">
ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent
</div>
</div>
</div>
<div class="footer">Foot</div>
</body>
</html>
The above seems to work perfectly on my computer.
However, if you are getting this problem on resize, try applying min-width to the div containing the background, and try again.
I have a website setup with DIV managed layout. The problem is that under IE 6 this layout breaks.
This is the CSS:
#bg{
position:fixed;
top:0;
left:0;
/* Preserve aspect ratio */
min-width:100%;
min-height:100%;
}
#basic {
width: 902px; height: auto; margin-left: auto; margin-right: auto; position: relative; padding-bottom: 50px;
}
#logo{
width: 902px; height: 400px; position: absolute; top: 17px;
}
#navbar{
width: 902px; height: 23px; top: 280px; position:absolute;
}
#content{
width: 802px; height: auto; top: 325px; position: absolute; background-color: white; padding-top: 50px;padding-left: 50px; padding-right: 50px; padding-bottom: 50px
}
#csob{
width: 100px; height:100px; bottom:0px; right: 0px; position: absolute;
}
#titulni_strana {width:902; height:auto; top:325px; position:absolute}
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="shortcut icon" href="http://protechp.cz/zimnihrycsob/images/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<link href="default.css" rel="stylesheet" type="text/css" >
<title>Zimni Hry CSOB</title>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
</head>
<body>
<img src="images/background-gradient-ok.jpg" id="bg" alt="pozadi">
<div id="basic">
<div id="logo">
<center><img src="images/logo3.png" alt="logo"></center>
</div>
<?php include ("./menu.php") ?>
<div id="titulni_strana">
<img src="images/titulni_strana.jpg" alt="titulni strana">
</div>
</div>
</body>
</html>
It look as if there are issues here beyond just simple CSS.
First, ensure your HTML is valid. It looks as if the browser in the first image is being more lenient than IE6 since the image is broken in one but not the other.
Also, IE6 does not support the min-* properties. You need to use height and width instead, either in an IE6-only stylesheet or with the star hack to target IE6 only.
Edit: Also, IE6 does not support fixed positioning. You'll need to use absolute positioning for it instead.
It seems the problem is with the image not loading and not the css.
Try removing the style sheet, all css, and the ie6 png fix javascript just to confirm your image is making it to the page as it doesnt look like a css problem to me. A live example would be nice.