|
CSS - Html/css Layout And Image Positioning Problem
Similar TutorialsHi been trying for a while now to fix this problem without luck see link below removed Its a gallery page with a scrolling layer below the main image (you need to click a thumbnail to see the problem). The scrolling layer behaves as if its outside the page flow and does not snap inline with its parent when the page resizes. The page does not reload to view the new main image I'm using ajax and the problem only seems to happen in IE as far as I can see for now. Has anyone time to help? Jimmy I design a layout of the page using css for an html but i have problem i want footer block must be 5px up from bottom the footer block is as follow Code: #Footer {
Position : Absolute;
Background-color : Transparent;
Border : 1px Solid Black;
Top : 730px;
Left : 5px;
Bottom: 5px;
Width : 768px;
Height : 70px;
}
I have an image I want to use as the header graphic on a website. The image is 800px wide and the table is 700px wide. The graphic is meant to overlap both ends of the table. I am putting the image inside the td of the table and then setting the position to -90px relative to the table to move it across the correct amount. The problem I'm having is that the table changes width to 800px to accommodate the image. I tried putting the image outside the table but can't get the image to maintain its position relative to the table (ie when the screen width changes) Code: <!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 1</title>
<style type="text/css">
html, body { height: 100%; }
#maintable
{
height: 100%;
}
.logoStyle {
position: relative;
left: -90px;
display: block;
top: 0px;
visibility: visible;
}
</style>
</head>
<body style="margin: 0; background-color: #D1D1D1">
<table style="width: 700px" align="center" bgcolor="#FFFFFF" id="maintable">
<tr>
<td valign="top">
<img alt="Logo" src="images/header.png" class="logoStyle" />
</td>
</tr>
</table>
</body>
</html>
Can anyone let me know what I've done wrong? Hello, I don't know whether this is the right forum for my issue, so apologies if it isn't. To better understand the problem, kindly visit this page: http://www.lightblu.com/contact.php Basically, you see those 4 social networking logos? They are at the right position. However, when you click "Submit (without writing anything anything in the form), the errors will display, and the logos will shift downwards as a result. I don't want this. I want the logos to be at the same position. Question: how could I do this? I'm trying to find the logic first before implementing it, which I can't even figure out. Thanks guys Hi, Have a problem with a left-hand table, the content of which is dragged down the page when the right-hand table grows in the same direction, say when filling it with content. I need to anchor that left-hand table in place but allow the right-hand table to stretch vertically. Have tried absolute CSS positioning, spacers, extra tables, 100% height - nothing seems to work. I've simplified the HTML code for readability, but the general layout is pretty much intact: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="668" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="49" colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="667" height="49"> </td> </tr> </table></td> <td width="1"></td> </tr> <tr> <td width="147" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="147" height="147"> </td> </tr> </table></td> <td width="520" height="32" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="520" height="32"> </td> </tr> </table></td> <td></td> </tr> <tr> <td height="24" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="520" height="24"> </td> </tr> </table></td> <td></td> </tr> <tr> <td rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="517" height="419" valign="top"><div align="center">RIGHT-HAND TABLE </div></td> </tr> </table></td> <td height="91"></td> </tr> <tr> <td height="328" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="146" height="328" valign="top"><div align="center">LEFT-HAND TABLE </div></td> </tr> </table></td> <td></td> </tr> <tr> <td height="482"> </td> <td> </td> <td></td> </tr> </table> </body> </html> Thanks, Dyb Hi all Having some problems with background image positioning - all CSS/XHTML has been validated See http://community.foe.co.uk/tmp/quote_and_image_test.html Relevant CSS : Code: #imageleft {padding:0px; float:left; width:auto; margin-right:5px; margin-bottom:5px}
.imagecaptionleft{padding:0px; margin:0px; text-align:left; font-size:8pt}
blockquote {
background: transparent url(/images/common/quote1a.gif) left top no-repeat;
margin:0px;
padding: 0px;
font-weight: normal;
color:#000;
}
blockquote div {
padding: 2px 30px;
background: transparent url(/images/common/quote2a.gif) right bottom no-repeat;
}
Relevant html Code: <div id="imageleft">
<img src="/images/common/dummy.gif" alt="Test image" width="100" height="100" />
<div class="imagecaptionleft">Caption goes here</div></div>
<blockquote><div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum augue odio, condimentum et, iaculis quis, facilisis nec, quam. Aliquam eros. Nulla ut lorem. Cras bibendum orci at ligula lobortis bibendum.</p>
</div></blockquote>
The opening quote mark is hidden behind the image - as you can see it has a position of left, and for some reason the <div> within the <blockquote> is including the image so is full width. Any help appreciated I have a problem I can't resolve as I'm out of my depth with this CSS positioning issue on a joomla site with a bespoke template I have customised. The problem is that the client (a graphic designer) created a menu design where the top level menu buttons overlap with a curve. I have assigned a background image on hover and it works well. You can see it he I can't post an image of the menu as it won't let me, being a new poster, which is a pain... Code: #horiz-menu a:hover {
display: block;
z-index: 100;
line-height: 22px;
left:-53px;
position: relative;
background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
padding-left:63px;
height:27px;
width:162px;
border-bottom:1px solid #fff;
margin-bottom:-3px;
}
To achieve the overlap, the background has to sit behind the button to its left and that is achieved by moving it a fixed amount of pixels leftward. The menu text is then put back in place with the padding. However the client now wants the hovered image to stick in the parent position when the submenu items are hovered over. I've achieved this with: Code: #horiz-menu li.parent.active a {
background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
z-index: 100;
line-height: 22px;
left:-53px;
position: relative;
padding-left:63px;
height:27px;
width:162px;
border-bottom:1px solid #fff;
}
The trouble is that although the background image is positioned correctly, it has a knock-on effect on all the submenu list items which are being positioned to the beginning of the background image, 53 pixels to the left... I cannot pad the submenu items over to the right as it causes all the other submenus items under the other parents to move to the right too. I suppose my question is twofold: is there any way of setting the active parent list item background image position without the children items inheriting the position change? ; is there a better way of doing what I am attempting to do? If the client had not specified overlapping buttons I would be in the clear but my client was a graphic designer who designed without any thought as to the css implications. The requirements have been signed off and I have to find a way of implementing it. Please, any thoughts? I am not a css coder and I find css to be impenetrable, arcane whilst being slow and difficult to debug. All help really appreciated. Hello, I recently started creating websites again and I have been pulling my hair out on this Firefox compatibility issue. The site navigation looks great in IE but in Firefox a couple of the background images are skewed down and to the left. Since all my tricks from years ago are so outdated now, I decided to try CSS for a simplified navigation setup. The code is probably pretty messy since I chopped it together from numerous sources and still am not completely sure how it works. Background: I created a large 794x1200 PNG image that contains two complete border and navigation sets. I am using CSS to both position the appropriate portion in each table/cell as well as switching to a slice on the 2nd image set for rollover purposes. An example of the current test is he (URL address blocked: See forum rules) *not sure if this is okay but would be best to see the example. If it is not allowed as a non-clickable then feel free to delete. It is here - classtime . org / test6 . htm and the navigation image is he (URL address blocked: See forum rules) *classtime . org / navigate . png I would be eternally grateful to anyone that can help me figure out why the site works great in IE but is coming up skewed in Firefox. As a side note, when I pull up the site in Frontpage, it shows the left-most cell as being larger than it is supposed to be even though it is hardcoded. To get my left image bar to show up in the correct place I had to use a value of "left: -40px;" I'm not sure why that is but I suspect it has something to do with the problem. Thank you very much for taking a look. My jumbled code is as follows: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Ultrasonic Blind Company - Elk Grove Village, Illinois</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css" media="screen">
a:link {color: #FFF4D1;}
a:visited {color: #FFF4D1;}
a:hover {color: #74060c;}
a:active {color: #FFF4D1;}
.top a
{
display: block;
width: 794px;
height: 120px;
background-image: url('navigate.png');
}
.top a:hover {
background-position: 0px -601px;
}
#left {
left: -40px;
width: 150px;
height: 460px;
display: block;
background: url('navigate.png');
background-repeat: no-repeat;
background-position: 0px -120px;
position: relative;
}
#left li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: center;
font: bold 18px Batang;
line-height: 50px;
}
#left li, #left a {height: 50px; width: 146px; display: block;}
#panel1b {top: 10px;}
#panel2b {top: 63px;}
#panel3b {top: 116px;}
#panel4b {top: 169px;}
#panel5b {top: 223px;}
#panel1b a:hover {background: transparent url('navigate.png') 0px -730px no-repeat}
#panel2b a:hover {background: transparent url('navigate.png') 0px -785px no-repeat}
#panel3b a:hover {background: transparent url('navigate.png') 0px -839px no-repeat}
#panel4b a:hover {background: transparent url('navigate.png') 0px -890px no-repeat}
#panel5b a:hover {background: transparent url('navigate.png') 0px -945px no-repeat}
#right {
width: 154px;
height: 460px;
display: block;
background: url('navigate.png');
background-repeat: no-repeat;
background-position: -640px -120px;
position: relative;
}
#right li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: right;
font: bold 18px Batang;
}
#right li, #right a {height: 85px; width: 154px; display: block;}
#panel1r {top: 0px;}
#panel2r {top: 100px;}
#panel3r {top: 200px;}
#panel4r {top: 300px;}
#panel1r a:hover {background: transparent url('navigate.png') -640px -721px no-repeat}
#panel2r a:hover {background: transparent url('navigate.png') -640px -821px no-repeat}
#panel3r a:hover {background: transparent url('navigate.png') -640px -921px no-repeat}
#panel4r a:hover {background: transparent url('navigate.png') -640px -1021px no-repeat}
</style>
</head>
<body bgcolor=#74060c>
<div align=center>
<table id="Table_01" width=794px height=600px border=0 cellpadding=0 cellspacing=0>
<tr>
<td colspan="3" height="120" width="794" bgcolor="#FFF4D1">
<div class="top">
<a href="(URL address blocked: See forum rules)"></a>
</div>
</td>
</tr>
<tr>
<td align=left valign=top height=674px width=150px bgcolor="#FFF4D1">
<ul id="left">
<li id="panel1b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Contact</a></li>
<li id="panel2b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Residential</a></li>
<li id="panel3b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Commercial</a></li>
<li id="panel4b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Coupons</a></li>
<li id="panel5b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Questions</a></li>
</ul>
</td>
<td align=left valign=top width=490px height=674px bgcolor="#FFF4D1">
aaa</td>
<td align=left valign=top width=154px height=674px bgcolor="#FFF4D1">
<p align=right> <ul id="right">
<li id="panel1r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel2r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel3r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel4r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
Hi Everyone, I have a problem trying to position a submit button on a search form. The button is an image saying "go" and I am trying to move the button down by a few pixels using CSS. Whenever I use margin-top:3px; the textfield is also moved down although I am using a class on the button of "goButton" (see code below). I want to be able to move the button only. CSS code: Code: #searchField {display:inline;}
#goButton {display:inline; margin-top:3px;}
.goButton {margin-top:3px;}
HTML/PHP code: Code: $output = '<div id="searchField"><span class="white">Search</span><input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox'. $moduleclass_sfx .'" type="text" size="'. $width .'" value="'. $text .'" onblur="if(this.value==\'\') this.value=\''. $text .'\';" onfocus="if(this.value==\''. $text .'\') this.value=\'\';" /></div>';
if ( $button ) {
$button = '<div id="goButton"><A HREF="javascript:document.searchForm.submit()"
onmouseover="document.searchForm.go_but.src=\'/silence/templates/rhuk_solarflare_ii/images/goOver.gif\'"
onmouseout="document.searchForm.go_but.src=\'/silence/templates/rhuk_solarflare_ii/images/go.gif\'"
onclick="return val_form_this_page()">
<IMG SRC="/silence/templates/rhuk_solarflare_ii/images/go.gif"
WIDTH="19" HEIGHT="19" BORDER="0" ALT="Go"
NAME="go_but" class="goButton"></A></div>';
}
Full CSS code: Code: html, body {margin: 0; padding: 0; border: 0;}
html {
height: 100%;
}
body {
color: #5f5c5c;
background-color: #8091b4;
font-family: verdana, sans-serif;
font-size: 80%;
text-align: center;
margin: 10px 0;
line-height: 130%;
height: 100%;
margin-bottom: 1px;
font-size:10px; /*added to change all font sizes*/
}
.clr {
clear: both;
}
.outline {
border: 1px solid #cccccc;
background: #ffffff;
padding: 2px;
}
#buttons_outer {
width: 635px;
margin-bottom: 2px;
margin-right: 2px;
float: left;
}
#buttons_inner {
border: 1px solid #cccccc;
height: 21px !important;
height: 23px;
}
#pathway_text {
overflow: hidden;
display: block;
height: 25px;
line-height: 25px !important;
line-height: 22px;
padding-left: 4px;
border: 1px solid #ccc;
margin-bottom: 2px;
}
#pathway_text img {
margin-left: 5px;
margin-right: 5px;
margin-top: 6px;
}
#buttons {
float: left;
margin: 0px;
padding: 0px;
width: auto;
}
ul#mainlevel-nav
{
list-style: none;
padding: 0;
margin: 0;
font-size: 0.8em;
}
ul#mainlevel-nav li
{
background-image: none;
padding-left: 0px;
padding-right: 0px;
float: left;
margin: 0;
font-size: 11px;
line-height: 21px;
white-space: nowrap;
border-right: 1px solid #cccccc;
}
ul#mainlevel-nav li a
{
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #333333;
background: transparent;
}
#buttons>ul#mainlevel-nav li a { width: auto; }
ul#mainlevel-nav li a:hover
{
color: #fff;
background: #c64934;
}
#search_outer {
float: left;
width: 165px;
}
#search_inner {
border: 1px solid #cccccc;
padding: 0px;
height: 21px !important;
height: 23px;
overflow: hidden;
}
#search_inner form {
padding: 0;
margin: 0;
}
#search_inner .inputbox {
border: 0px;
padding: 3px 3px 3px 5px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
color: #c64934;
margin-top:3px;
}
#header_outer {
text-align: left;
border: 0px;
margin: 0px;
}
#header {
float: left;
padding: 0px;
margin-right: 2px;
width: 635px;
height: 150px;
background: url(../images/header_short.jpg) no-repeat;
}
#top_outer{
float: left;
width: 165px;
}
#top_inner {
border: 1px solid #cccccc;
padding: 2px;
height: 144px !important;
height: 150px;
overflow: hidden;
float: none !important;
float: left;
}
#left_outer {
float: left;
margin-top: 2px;
width: 165px;
}
#left_inner {
border: 1px solid #cccccc;
padding: 2px;
float: none !important;
float: left;
}
#content_outer {
padding: 0px;
margin-top: 0px;
margin-left: 2px;
/** border: 1px solid #cccccc; **/
float: left;
width: 635px;
}
#content_inner{
float: none !important;
float: left;
padding: 0;
padding-top: 2px;
margin: 0;
}
table.content_table {
width: 100%;
padding: 0px;
margin: 0px;
}
table.content_table td {
padding: 0px;
margin: 0px;
}
#banner_inner {
float: left;
padding: 0px;
height: 70px;
}
#poweredby_inner {
float: right;
padding: 0px;
margin-left: 0px;
height: 70px;
}
#right_outer {
margin-left: 2px;
width: 165px;
}
#right_inner {
float: none !important;
float: left;
border: 1px solid #cccccc;
padding: 2px;
}
.user1_inner {
border: 1px solid #cccccc;
float: none !important;
float: left;
margin: 0px;
padding: 2px;
}
.user2_inner {
border: 1px solid #cccccc;
float: none !important;
float: left;
margin: 0px;
padding: 2px;
}
table td.body_outer {
padding: 2px;
border: 1px solid #cccccc;
}
.maintitle {
color: #ffffff;
font-size: 40px;
padding-left: 15px;
padding-top: 20px;
}
.error {
font-style: italic;
text-transform: uppercase;
padding: 5px;
color: #cccccc;
font-size: 14px;
font-weight: bold;
}
/** old stuff **/
.back_button {
float: left;
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
}
.pagenav {
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
}
.pagenavbar {
margin-right: 10px;
float: right;
}
#footer {
text-align: center;
padding: 3px;
}
#footerNew {
font-size:12px;
padding: 3px;
margin-left:20px;
margin-right:8px;
border-top:1px solid #7f91b4;
padding-bottom:400px;
}
#footerLeft {
float:left;
margin-left:0px;
color:#5f5c5c;
font-size:10px;
padding-left:0;
}
#footerRight {
margin-top:-15px;
float:right;
margin-right:0px;
padding-right:0;
}
.contactRollover {
margin-right:0px;
display:inline;
float:right;
width:52px;
height:13px;
background: url(/silence/templates/rhuk_solarflare_ii/images/footerContactDual.gif) no-repeat;
text-indent:-9999px;
}
a{ outline:none;}
a.contactRollover:link, a.contactRollover:visited, a.contactRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/footerContactDual.gif) no-repeat;
}
a.contactRollover:hover {background-position:-52px 0;}
.legalRollover {
display:inline;
float:right;
width:93px;
height:13px;
background: url(/silence/templates/rhuk_solarflare_ii/images/footerLegalDual.gif) no-repeat;
text-indent:-9999px;
}
a.legalRollover:link, a.legalRollover:visited, a.legalRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/footerLegalDual.gif) no-repeat;
}
a.legalRollover:hover {background-position:-93px 0;}
#searchField {display:inline;}
#goButton {display:inline;}
.goButton {margin-top:3px;}
.goRollover {
display:inline;
float:left;
width:19px;
height:19px;
background: url(/silence/templates/rhuk_solarflare_ii/images/goDual.gif) no-repeat;
text-indent:-9999px;
}
a.goRollover:link, a.goRollover:visited, a.goRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/goDual.gif) no-repeat;
}
a.goRollover:hover {background-position:-19px 0;}
ul
{
margin: 0;
padding: 0;
list-style: none;
}
li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}
td {
text-align: left;
font-size: 11px;
}
/* Joomla core stuff */
a:link, a:visited {
color: #c64934; text-decoration: none;
font-weight: bold;
}
a:hover {
color: #900; text-decoration: none;
font-weight: bold;
}
table.contentpaneopen {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}
table.contentpaneopen td {
padding-right: 5px;
}
p.contentpaneopen {
padding-right: 5px;
}
table.contentpaneopen td.componentheading {
padding-left: 4px;
}
table.contentpane {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}
table.contentpane td {
margin: 0px;
padding: 0px;
}
table.contentpane td.componentheading {
padding-left: 4px;
}
table.contentpaneopen fieldset {
border: 0px;
border-bottom: 1px solid #eee;
}
.button {
color: #c64934;
font-family: Arial, Hevlvetica, sans-serif;
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 5px;
line-height: 18px !important;
line-height: 16px;
height: 26px !important;
height: 24px;
margin: 1px;
}
.inputbox {
padding: 2px;
border:solid 1px #cccccc;
background-color: #ffffff;
}
.componentheading {
background: url(../images/subhead_bg.png) repeat-x;
color: #666666;
text-align: left;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}
.contentcolumn {
padding-right: 5px;
}
.contentheading {
height: 30px;
color: #002469;
font-weight: normal;
font-size: 16px;
white-space: nowrap;
padding-left:2px;
}
.contentpagetitle {
font-size: 13px;
font-weight: bold;
color: #cccccc;
text-align:left;
}
table.searchinto {
width: 100%;
}
table.searchintro td {
font-weight: bold;
}
table.moduletable {
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
}
div.moduletable {
padding: 0;
margin-bottom: 2px;
}
table.moduletable th, div.moduletable h3 {
background: url(../images/subhead_bg.png) repeat-x;
color: #666666;
text-align: left;
padding-left: 4px;
height: 21px;
line-height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
margin: 0 0 2px 0;
}
table.moduletable td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;
}
table.pollstableborder td {
padding: 2px;
}
.sectiontableheader {
font-weight: bold;
background: #f0f0f0;
padding: 4px;
}
.sectiontablefooter {
}
.sectiontableentry1 {
background-color : #ffffff;
}
.sectiontableentry2 {
background-color : #f9f9f9;
}
.small {
color: #999999;
font-size: 11px;
}
.createdate {
height: 15px;
padding-bottom: 10px;
color: #999999;
font-size: 11px;
}
.modifydate {
height: 15px;
padding-top: 10px;
color: #999999;
font-size: 11px;
}
table.contenttoc {
border: 1px solid #cccccc;
padding: 2px;
margin-left: 2px;
margin-bottom: 2px;
}
table.contenttoc td {
padding: 2px;
}
table.contenttoc th {
background: url(../images/subhead_bg.png) repeat-x;
color: #666666;
text-align: left;
padding-top: 2px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}
a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ccc;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 100%;
text-decoration: none;
}
a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: none;
color: #fff;
}
a.mainlevel#active_menu {
color:#fff;
font-weight: bold;
}
a.mainlevel#active_menu:hover {
color: #fff;
}
a.sublevel:link, a.sublevel:visited {
padding-left: 1px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #c64934;
text-align: left;
}
a.sublevel:hover {
color: #900;
text-decoration: none;
}
a.sublevel#active_menu {
color: #333;
}
.highlight {
background-color: Yellow;
color: Blue;
padding: 0;
}
.code {
background-color: #ddd;
border: 1px solid #bbb;
}
form {
/* removes space below form elements */
margin: 0;
padding: 0;
}
div.mosimage {
border: 1px solid #ccc;
}
.mosimage {
border: 1px solid #cccccc;
margin: 5px
}
.mosimage_caption {
margin-top: 2px;
background: #efefef;
padding: 1px 2px;
color: #666;
font-size: 10px;
border-top: 1px solid #cccccc;
}
span.article_seperator {
display: block;
height: 1.5em;
}
/*added styles*/
#search {
height:30px;
width:190px;
background-color:#4c6696;
margin-top:0px;
}
.white {
color:#fff;
padding:5px;
font-size:11px;
}
/*Added from 3 col layout*/
p {margin: 0; padding: 8px;}
h2 {font-size: 1.2em; text-align: center; padding: 10px;}
.clear { clear: both; }
a {text-decoration: underline; font-weight: bold; color: #000;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.wrapper {
margin: 0 auto;
width: 768px;
text-align: left;
/*background: #add8e6;*/
background: #ffffff;
border: 0px solid #000;
color:#5f5c5c;
}
/*** Below is the Tan hack, needed because the decorative side borders (thin black) on
.wrapper. It fixes the box model of IE5.x/win, making it display the same as other browsers. ***/
* html .wrapper {
width: 771px;
w\idth: 768px;
}
.outer {
border-left: 150px solid #ffffff;
border-right: 190px solid #ccd3e1;
background: url(images/blackline.gif) 100% 0 repeat-y;
}
/*** These are the visible side col BG's. The image BG is needed to replace a side border
on div.inner, which can't be used because of problems in Mozilla. The image substitutes
for the thin black divider between the right green col and the center col. If the black divider
is not wanted, the BG image may be removed. The Tan hack below feeds a IE a different
BG location, due to a BG placement variation.
***/
* html .outer {
background: url(images/blackline.gif) 565px 0 repeat-y;
}
.inner {
margin-left: -2px; /*** This fixes a small overlap problem in IE6. ***/
width: 620px; /*** This width is for non-IE browsers. Mozilla makes this necessary. ***/
border: 0px solid #000;
border-width: 0 0 0 0px;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/
* html .inner {
width: 100%;
}
.float-wrap {
float: left;
width: 567px;
margin-left: -150px; /*** Same length as left column width ***/
}
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
.left {
margin-top:25px;
}
#line {
border-right:1px solid #000000;
height:100%;
}
.right {
float: right;
width: 190px;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
background-color:#ccd3e1;
}
* html .right {
margin: 0 -190px 0 0; /*** IE gets this margin. ***/
}
.center {
margin-top:23px;
float: right;
width: 415px;
background: url(/silence/templates/rhuk_solarflare_ii/images/navBlueLine.gif) repeat-y 0 0;
}
.leftCenter {
width:2px;
}
.wide {
background-color: #002469; /* header and footer colours */
width: 100%;
border: 2px solid #000;
font-size: 1.4em;
font-weight: bold;
}
.wide p {padding: 5px;}
.top {border-width: 0 0 0px;
overflow:hidden;}
.bottom {border-width: 2px 0 0;}
/* Mozilla bug fixes */
html>body .inner, html>body .float-wrap {
border-bottom: 1px solid transparent;
}
.grey {
color:#5f5c5c;
}
.newsflash {
padding: 15px 10px;
width:175px;
color:#5f5c5c;
font-size: 10px;
}
.newsflashTitle {
color:#4c6696;
font-weight:bold;
margin-left: -7px;
font-size: 11px;
}
a.readon {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}
a.readon:hover {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}
a.readon:visited {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}
Any help would be greatly appreciated. Thanks. P.s. How do I post links to the site on here?...I tried but it removed the URL saying (URL address blocked: See forum rules) Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table. so i don't want to use absolute positioning, as the position would change if the window size changes... My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"... The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore... If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore... Here you can see the code i used for both example 1 and example 2: example 1: <html> <head> <title>relative problem - example 1</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table border=1> <tr> <td width="640" height="480"> <div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> example 2: <html> <head> <title>relative problem - example 2</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <table border=1> <tr> <td width="640" height="480"> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> thx for letting me know... Hey all, Can anyone recommend some good sites and forums, for CSS layout and positioning designs/help? Cheers. I'm trying to position parts of a layout using CSS only. For my assignment I'm not allowed to change anything in the .html document. When I get the layout the way it's supposed to look, I'll preview it using different screen resolutions and the layout changes and looks distorted. How can I make a layout that's 3 columns, 3 rows using CSS that will be viewed properly in different screen resolutions? Here's part of my CSS and how I have it set up... Code:
#main {
background-color:#CCCCCC;
position:absolute;
margin-left:255px;
margin-right:450px;
margin-top:-250px;
}
If you need the whole code I can post that too. So I just started working on my first complete website in a couple years and needless to say i'm behind the times in regards to layouts. I want to use CSS, more specifically DIVs to layout my site. I created a background in Photoshop that will serve as a guide for where I want the various boxes/text. I've done extensive searching and reading on the different kinds of positioning you can do with DIVs. Whether it be absolute or relative or float. But I have yet to figure out the proper way to code in the various DIVs so that they remain in the same spot no matter the resolution of the screen or if someone resizes the window. I just want to be able to tell them where I want them and not have to worry about them moving. The way I have it coded now, the DIV moves around when I resize the window - something I don't want. Any help would be greatly appreciated! Like I said I'm just getting back on my feet when it comes to HTML/CSS and i'm a bit rusty. Thanks!! Code:
<!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" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: 'Lato', sans-serif;
margin: 0;
background: #0C0 url(landscaping1.jpg) no-repeat center top;
}
#leftcontent
{
border:1px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
height:300px;
border-radius:12px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
float:left;
position:relative;
top:450px;
left:80px;
}
</style>
<title>Mueller Lawn and Lanscape 2012</title>
</head>
<body>
<div id="leftcontent">
Some text goes here.
</div>
</body>
</html>
Also, here is what the site looks like with the above code. Obviously i'm still working on the visual aspects of the site, so disregard that part for now. http://i110.photobucket.com/albums/n120/infantryclothing/0cb6b676.png Hey, I'm trying to make a 3-column layout, and I'm having troubles with IE positioning the 3rd column. The address is URL . I have no problems trying to make one where the middle column is the "main" one, but for some reason it is working out now. Also, if possible, I'm also trying to put in a footer image that will cover the whole part of the bottom (from the far left of the browser to the far right of the layout. It's perfectly fine in Firefox, but IE looks bad Thx P.S. here's an image of my problem, since it might look different when someone looks at it as i might still be screwing around w/ it <img src="http://img.photobucket.com/albums/v411/mflotron91/problem.jpg"> I have been using css for a while, but mostly just for style, not layout. I am trying to do a site, with basically three divs. One on the left for content, two on the right...one for a menu, and the other showing an image. I have stripped down the page to the smallest possible that I can show the problem. Basically, I want the image (red background) to be below the menu (dark purple bg), and both of them on the right of the content (lavendar bg). I have validated the html, but I am not getting a response from the css validator right now. Here is my html so far: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<title>Vote YES Mosinee!</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
padding: 0px;
background-color: #FFF;
text-align: center;
font: 76% Verdana,Arial,sans-serif;
}
div#container{
width:800px;
margin: 0 auto;
text-align: left;
background: #ff0;
}
div#content{
background: #d1c9e2;
width:550px;
}
div#nav{
float: right;
width:240px;
background: #484393;
}
div#nav p{
padding: 5px 0;
}
div#nav h2{
font-size: 110%;
color: #333;
}
div#imageSection{
float: right;
width: 240px;
background: #ff0000;
}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>There will be a menu here.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
</ul>
</div>
<div id="imageSection">
<img src="(URL address blocked: See forum rules)" alt="Children">
</div>
<div id="content">
<p>Vote YES is dedicated to reaching out to the members of the Mosinee community and to raising awareness of the situation our elementary students face each school day. Through their efforts, they hope to gain the support of Mosinee's voters and help the community create a facility that enables an optimal and safe learning environment.</p>
<p>After years of failed referendums and the advent of another proposed addition, numerous community members have come together and organized "Vote YES" (VOTE for Your Elementary School). The organization was formed to support the referendum proposed by the school board and help educate individuals around the community. </p>
<p>On April 3, 2007, the voters of the Mosinee School District will be asked to approve a referendum to address space inadequacies and safety issues at the current elementary school. The VOTE YES group formed for a number of different reasons. Teachers and parents found it difficult to ignore the glaring parking issues, overcrowding in the cafeteria, the use of hallways and storage closets for classes, and the 20-year band-aid solution of adding portable classrooms. Taxpayers couldn't ignore the problem and individuals throughout the community stepped forward to help. </p>
<p>Many More Paragraphs....</p>
</div>
</div>
</body>
</html>
How can I achieve this? Hi all- I m building a tableless site and am having difficulties getting the one section to fit in properly. It works great in FF but bumps down below the left nav in IE and I'm bashing my head against the wall trying to figure out which property is causing this behaviour. The majority of my audience uses IE so this is important that it displays properly See the example he http://verticalextreme.com/redesign.html CSS is he http://verticalextreme.com/_site_stylesheets/veStyle_green.css thanks in advance for any pointers! hey all, i am new to using CSS. (Yes i am very much behind the times). But i am trying to rectify that! Now the problem i am having is that i have a flash object that i simply want to align centered horizontally and it stays centered no matter what. but i would also like to position it y = 100 (x and y positioning) any ideas! http://www.mihomeanddesign.com/test/ I was hoping someone would have a suggestion as to how to lay this site out without using absolute positioning for the #mainimage div. I know that I could float it right within the main wrapper, but I also want the top nav and the footer to extend 100%. I want to do this to avoid having to put "style="padding-bottom: 423px; " in every <p> at the bottom of the page if there is not a lot of text on it... like on the home page and the contact page. Any suggestions would be greatly appreciated. I'm using absolutely positioned divs as a dropdown subnavigation. While I have yet program the javascript functionality that will make these divs appear and disappear, I am currently working on placing the divs just right on the page. (The simple part, right?? Right...) Check out this page: http://www.psd7.com/fst/www_live/ It shows one of my subnavigation divs (the rest are hidden). On most browsers, when you roll over the Our Tradition button on the left, the horizontal line lines up perfectly with the top of the subnavigation. However, on the most commonly used browser on the planet (IE for Windows), these things are not lined up, but are slightly offset. I can't imagine how to work this out. If I change the top value for the subnav so it lines up in IE for Windows, then it won't line up in any of the other browsers. Here's the css code: Code:
#subnav_our_tradition {
position: absolute;
left: 155px;
top: 230px;
width: 137px;
background-color: #7C272D;
z-index: 3;
}
Here's the HTML code regarding that one subnav: Code: <div id="subnav_our_tradition"> <div class="subnav_item"><a href="our_tradition/intellectual_tradition.htm">The Franciscan Intellectual Tradition</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/mission.htm">Mission Statement</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/community_life.htm">Community Life</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/resources.htm">Resources</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/links.htm">Links</a></div> </div> Can anyone suggest a workaround? |
|||||||