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.
Related
I have searched endlessly for a solution to centering my drop-down navigation bar on my website.
I have tried removing the code float: left code from my CSS and added the code display: inline-block: but nothing seems to be working. I have tried several solutions but they have either moved my navigation bar from the top or removed the background I have set for the navigation bar.
If I could get some help on centering the navigation bar without removing the navigation bar's background or displacing it, that would be great.
html {
background-image: url(../images/RL_bg.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
li {
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rocket League</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<header>
<ul>
<li class="dropdown">
Homepage
<div class="dropdown-content">
What is Rocket League?
Gameplay
Platforms
</div>
<li class="dropdown">
Cars
<div class="dropdown-content">
Standard
Downloadable Content
Platform Exclusive
</div>
<li class="dropdown">
Online Content
<div class="dropdown-content">
Multiplayer
Competitve
</div>
<li class="dropdown">
Maps
<div class="dropdown-content">
Standard
Experimental
</div>
<li class="dropdown">
Crates
<div class="dropdown-content">
Item Customization
Trading
</div>
<li class="dropdown">
About Me
<div class="dropdown-content">
Purpose of This Site
About The Creator
</div>
</li>
</ul>
</header>
<body>
<h1></h1>
</body>
</html>
Your going to want to make a create a id for your ul's that does this tag around your entire list. Then you can use this for css.
#navmenu {
margin: 0 auto;
width: 500px;
}
#navmenu a {
width: 100px;
text-align: center;
}
So this will work if your using an inline list. Let me know if this solution is helpful at all, because we can custom taylor it to your css/html specifically.
/// 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 am having some issues with z-index that I can't seem to be able to iron out. I've made sure that the relavant position atributes are set to relative, but my elements just won't play nicely.
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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="container" id="top">
<h1>Top</h1>
<div class="slideshow">
<ul class="nav">
<li class="prev">Previous</li>
<li class="next">Next</li>
</ul>
<ul class="slides" id="slides">
<li><img src="images/top_blue.gif" alt="Harley Davidson Sportster" /></li>
<li><img src="images/top_brown.gif" alt="Harley Davidson Sportster" /></li>
<li><img src="images/top_vanilla.gif" alt="Harley Davidson Sportster" /></li>
</ul>
</div>
</div>
</body>
</html>
And here my CSS:
body, h1, ul, li {
margin: 0; padding: 0; border: 0;
}
.container {
width: 800px; margin: auto;
position: relative;
}
.slideshow {
width: 800px; height: 50px;
position: relative;
}
.slideshow ul.nav {
list-style: none;
position: relative;
z-index: 100;
}
.slideshow ul.nav li.prev {
float: left;
}
.slideshow ul.nav li.next {
float: right;
}
.slideshow ul.nav li a {
display: block; width: 32px; height: 48px; text-indent: -9999px;
}
.slideshow ul.nav li.prev a {
background: url(images/arrow_prev.gif);
}
.slideshow ul.nav li.next a {
background: url(images/arrow_next.gif);
}
.slideshow ul.slides {
list-style: none;
position: relative;
top:0px;
height:50px;
}
Here my JSFiddle: http://jsfiddle.net/XPsn7/1/
Basically, the main images under have z-index of 5, and the arrow image should position in front of the slides, with z-index of 15. However, the navigation arrows cause the slides images to move right to make room for them.
What's going on?
The problem is your relative positioning. If you create a relative container with child elements that are absolutely positioned, you should be able to float the images as intended.
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.
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.