|
CSS - Content Moving On Webpage Resize.
Similar Tutorialsi thought it was easy but i cant seem to get a div fit the space it has on my page like.....the size of my page depend on 1 table...the div has to grow till the bottom of that table if i put 100% in the div and things it grows too big maybe im forgetting something Found lots of similar threads, but not exactly the same problem... Any ideas how I can get the main content to stay centered along with the background on my site: http://gumbald.co.uk It works fine in FF, but not in IE, so I'm guessing it's a CSS issue My CSS: Code: /*Default CSS file*/
/*Formats <html> tag*/
html {
height: 100%;
overflow: -moz-scrollbars-vertical;
background-color: #BBF;
}
* html #wrap {
height: 100%;
}
/*Formats links to set colors, actions*/
#wrap a:link {
color: #0054A6;
text-decoration: none;
}
#wrap a:visited {
color: #0054A6;
text-decoration: none;
}
#wrap a:hover {
color: #828282;
text-decoration: none;
}
#wrap a:active {
color: #000000;
text-decoration: none;
}
/*Formats <body> tag*/
body {
font: 65% 'trebuchet ms', arial, helvetica, sans-serif;
min-height: 100%;
width: 640px;
margin: auto;
padding: 0;
background-color: #FFFFFF;
border: 0px solid red;
}
/*Formats <h1> tag*/
h1 {
font: 300% 'trebuchet ms', Arial, Helvetica, sans-serif;
color: #00f;
padding-top: 0px;
margin: 0;
}
h2 {
font: 130% 'trebuchet ms', Arial, Helvetica, sans-serif;
padding-top: 6px;
}
/*Formats images, is class so can be reused on same page*/
.imgLeft {
float: left;
padding-right: 10px;
padding-bottom: 0px;
margin-top: 0px;
}
.imgRight {
float: right;
padding-left: 10px;
padding-bottom: 0px;
margin-top: 0px;
}
/*Wraps all Divs Up*/
#wrap {
position: relative;
min-height: 100%;
width: 640px;
margin: auto;
background: top left repeat-y;
}
/*Deals with head navigation bar*/
#headwrap {
}
#logo {
padding-left: 0px;
text-indent: 10px;
width: 100%;
height: 42px;
background: #BBF repeat center;
text-align: left;
}
#navbar {
text-indent: 10px;
padding-left: 0px;
width: 100%;
font: 110% 'trebuchet ms', Arial, Helvetica, sans-serif;
margin: auto;
height: 16px;
padding-top: 2px;
padding-right: 0px;
color: #000;
text-align: left;
background: #DCDCDC repeat-x;
border-bottom: 1px solid #ccc;
}
#navbar li {
display: inline;
padding-right: 10px;
margin: 0;
}
#navbar ul {
padding: 0;
margin: 0;
}
/*Deals with side navigation bar*/
#sidenavbar {
float: left;
width: 100px;
margin-top: 0px;
text-align: center;
background: #DCDCDC;
}
/*Deals with main page content*/
#mainwrap {
padding-bottom: 0px;
}
#mainwrap:after {
display: block;
clear: both;
}
#content {
position: relative;
margin-left: 6px;
margin-right: 6px;
padding: 0 10px;
text-align: justify;
}
/*Deals with the footer*/
#footwrap {
clear: both;
height: 68px;
}
#footer {
position: absolute;
bottom: 0;
height: 40px;
background: #0054A6 repeat center;
width: 100%;
color: #FFF;
text-align: center;
margin: 0 auto;
}
#footnavbar {
position: absolute;
bottom: 40px;
font: .95em 'trebuchet ms', Arial, Helvetica, sans-serif;
width: 100%;
height: 28px;
padding-top: 8px;
color: #000;
text-align: center;
background: #DCDCDC repeat-x;
border-top: 1px solid #ccc;
}
#footnavbar li {
display: inline;
padding-right: 10px;
margin: 0;
}
#footnavbar ul {
padding: 0;
margin: 0;
}
i can't seem to get my site to view properly in safari and ie, firefox seems to do a fine job (of course). the left and right sides should show a red shadowed bar but they are not in the browsers listed above. would someone check the css in firebug and tell me what's happening?? thank you in advance for any help! the site is greatfoodcoop.com I have just moved to working with layers as opposed tables/cells. Previously i had a table with three cells, at 86%, 4%, and 16% widths so it spanned the screen. The first cell's content only partly fills the cell, so when the browser is resized (made smaller), each cell stays on the same line and the table happily resize to the point where it can no longer get smaller before it wraps text I have tried to replicate this using 3 div's of the same width as the cells, with float left, however, the browser can hardly be resized at all from full screen without the third div moving onto the next line. If i make the 2nd and third divs larger it works slightly better, however the content does not look right in the layers Therefore can anyone point out how i might be able to achieve better DIV resize when the browser resizes please. Thanks very much Ed Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Code: <style type="text/css">
<!--
div.wrapper {
width: 400px;
margin: 0 auto;
}
div.menu {
color: blue;
white-space: pre;
text-align: right;
font-size: 90%;
margin: 200px 500px 200px 100px;
}
div.submenu {
color: blue;
white-space: pre;
margin: 150px 300px 500px -10px;
font-size: 70%;
line-height: 180%;
}
body {
background: white url("Images/background.jpg") no-repeat top scroll;
text-align:justify;
margin:200;
padding:0;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
}
-->
</style></head>
<body>
<div class="wrapper">
<div class="menu"><span><button style="width:100;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span> <span><button style="width:100;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span> <span><button style="width:200;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span> <span><button style="width:200;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span>
<div class="submenu">
<span> <button style="width:200;height:30" onClick="window.location='prva.htm'">title lef</button><br /></span>
<span><button style="width:200;height:30" onClick="window.location='XXXXXXX.htm'">title lef</button><br /></span>
<span><button style="width:200;height:30" onClick="window.location='prva.htm'">title lef</button><br /></span><br /></span>
<span>title lef<br /></span>
<span>title lef<br /></span>
</div>
</body>
</html>
here is code. please save code with .html and open with browser. Give me sugestions how to move links easily left or right [ write trick if know] thank you in advance loverbugs Old story...looks good in IE but, different in FireFox: link to page My goal is to have all the footer infor appear below the content...not wrap up. Any help would be greatly appreciated. Thanks! I developed http://technology-sleuth.com by testing in Firefox and Opera as I am on linux and at the time didn't have access to IE. All is fine in those browsers. However, in IE I see that when the page get too narrow, instead of narrowing the center div, it moves it below the rest of the page. As the center div is the one with the content, this is unacceptable. How can I prevent this? This site as you see it now was 'shortened' so that the center div does not get pushed down in the 800*600 screen resolution. So you will need to make the browser window very narrow to see the effect. But the problem is still visible. Thanks in advance. Dotan Cohen Hi Whenever I shrink my window in Ie, the Links bar stays in the same place. You can view this at http://www.trowbridge-wiltshire.co.uk/newtrowbridge Code:
body {
background:#CBDEF5;
margin: 1em auto;
width: 600px;
}
#leftcontent {
margin: 1em auto;
position: absolute;
top:100px;
left:250px;
width:100px;
background:#CBDEF5;
}
#centercontent {
margin: 1em auto;
width:500px;
background:#87B4EB;
color:#ffffff;
border:2px solid rgb(75,123,211);
margin-left: 140px;
margin-right:20px;
}
#advertising {
margin: 1em auto;
width:500px;
background:#87B4EB;
color:#ffffff;
border:2px solid rgb(75,123,211);
margin-left:140px;
margin-right:20px;
}
#banner {
background:#CBDEF5;
height:40px;
padding:5px;
}
p,h1,pre {
margin:0px 10px 0px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
background: #c3c8c3; }
#button ul {
list-style: none;
margin: 0;
padding:0;
border:;
}
#button li {
border-bottom: 1px solid #CBDEF5;
margin: 0;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border: 1px solid #1958b7;
background-color: #87B4EB;
color: #fff;
text-align:center;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border: 1px solid #1958b7;
background-color: #4B7BD3;
color: #fff;
}
Hi! I just floated left my navigation menu, and it caused my page title and breadcrumbs to move over to the immediate right of that (because it is also floated left)... Wondering if anyone could tell me the proper way of getting it back to the left side as it was before. Thanks. Drew EDIT: Here's the link, whoops! http://drewclifton.com/healthwise/?page_id=1667 So I am trying out using CSS instead of TABLES. I am also changing to XHTML, so I figured I'd do both since my site holds a very strict skeleton. Here's my first question. Is this transformation proper, and are their other properties/values I should include to facilitate all browsers best Quote: <table border="0" width="770" cellspacing="0" cellpadding="0"> <tr> <td width="770" height="5" bgcolor="#CCCCFF"></td> </tr> <tr> <td width="770" align="center">test here</td> </tr> </table> switched to CSS of this Quote: #footer_cell { width: 770px; } footer_bar { width:70px; height:5px; background:#CCCCFF } footer_copyright { width:770px: text-align:center; and the code as Quote: <div class="footer_cell"> <div class="footer_bar"></div> <div class="footer_copyright">copyright me</div> </div> Ok, let me know what I missed or messed up. Thanks. I have a css menu navigation that I'm having problems with. I don't know why the menu bar is being pushed about 40px to the left. I want it to go further left. The total size of the menu bar is 960px. Please help me out... Thanks, Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Easy Living by Lisa Marie- Professional Organization and Design</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="content"> <div id="header"> <img src="images/logo.jpg" alt="easy living by lisa marie- organizing your life so you can enjoy it" width="554" height="197" /> <ul id="nav"> <li id="home"><a href="index.html">Home</a></li> <li id="lisa"><a href="about.html">About Lisa Marie</a></li> <li id="services"><a href="services.html">Services</a></li> <li id="benefits"><a href="benefits.html">Benefits</a></li> <li id="testimonials"><a href="testimonials.html">Testimonials</a></li> <li id="contact"><a href="contact.php">Contact</a></li> </ul><!--end of nav--> </div><!--end of header--> <div id="slideshow"> <img src="images/slide1.jpg" alt="" class="active" /> <img src="images/slide2.jpg" alt="" /> <img src="images/slide3.jpg" alt="" /> <img src="images/slide4.jpg" alt="" /> <img src="images/slide5.jpg" alt="" /> <img src="images/slide6.jpg" alt="" /> </div><!--end of slideshow--> </div><!--end of content--> </div><!--end of wrapper--> </body> </html> Here is the CSS styling... Code: body {
background-image: url(../images/background.jpg);
margin: auto;
}
#wrapper {
width: 1054px;
background-color: #ffffff;
color: #000000;
border: 1px white;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 30px;
padding-bottom: 20px;
}
h1 {
font-family:"Apple Chancery", Serif;
font-weight: normal;
font-size: 32px;
text-align: left;
color: #60b6d7;
}
h2 {
font-family:"Apple Chancery", Serif;
font-weight: normal;
font-size: 26px;
text-align: center;
color: white;
}
h3 {
font-family:"Apple Chancery", Serif;
font-weight: normal;
font-size: 28px;
text-align: left;
color: #60b6d7;
}
h4 {
font-family:"Apple Chancery", Serif;
font-weight: normal;
font-size: 20px;
text-align: left;
color: #000000;
}
#header {
text-align: center;
}
#nav {
height: 50px;
width: 960px;
background-color: #60b6d7;
margin: auto;
list-style: none;
display: block;
overflow: hidden;
}
#nav li {
margin-top: 10px;
float: left;
width: 160px;
}
#nav li a:link {
color: white;
font-family: "Apple Chancery", Serif;
font-size: 25px;
text-decoration: none;
height: 50px;
}
#nav li a:hover {
color: black;
font-family: "Apple Chancery", Serif;
font-size: 25px;
text-decoration: none;
height: 50px;
}
#nav li a:visited {
color: black;
font-family: "Apple Chancery", Serif;
font-size: 25px;
height: 50px;
}
I've attached a *.gif picture of how my site looks. It is completely coded in CSS. The footer just lies underneath the content, and I want to be able to move the footer to the bottom of the page. Below the sidebar. Does anybody know how to do this? Any help would be appreciated. Thank you! Hi. This is template I copied just for fun in joomla http://www.worldoffashion.info/test/. I wonder how to move text from border as you can see in gray boxes text is near border. I tried padding but then it makes whole box larger IE is at it once again.... it is doing VERY odd things.... On the following page, when you roll over the title/type/date and description sections for the related article, it changes backgrounds... this is done mostly with CSS and the smallest amount of javascript (only onmouseover/mouseout is used). It works great elsewhere, but not in IE... any suggestions at what it may be?? THE LINK My problem is getting very frustrating been trying to fix it for ages, and its probably something simple but if i dont fix it soon my laptops going to find a river very quickly. I have a site using CSS(duh!) and when i highlight over a link on the site some of my text moves around. then when i highlight over my javascript drop down menu it moves back. its very strange. heres the link to one of the worse pages for jumping. http://zephyr-wgtn.co.nz/newsite/eventS.aspx Any help much appreciated. Regards Dan Hi I recently moved a site "http://www.nikkilamann.com/index.php" and after moving it the CSS is all messed up (style.css) The scroll frame box is not centred anymore and the scrollbar is supposed to be white in colour and there is some funny box next to "fashion" on navigation. Site is totally messed up after move. Does anybody know what could cause this? hi i go problem the pictures keeps moving towards right is there way to fix these? the movie pictures so they stay all on left side forever. |
|||||||