CSS Question
I created a class for my main headers to be centered, yet when I apply it the headline remains flush left. I think it is being contolled by the rule for the div. I'll psot the code so that maybe someone can tell me how to fix the problem and what is the best way to avoid the problem to begin with.
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #000;
.thrColFixHdr #container {
width: 957px; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-image: url(../images/main_bkg.gif);
background-repeat: repeat-y;
.thrColFixHdr #header {
padding-top: 0;
padding-bottom: 0;
padding-left: 0px;
background-color: #1B75BB;
.thrColFixHdr #header h1 {
margin: 0;
padding: 0px;
.thrColFixHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 184px; /* padding keeps the content of the div away from the edges */
color: #FFF;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
.thrColFixHdr #sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 184px; /* padding keeps the content of the div away from the edges */
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
color: #FFF;
background-color: #000;
.thrColFixHdr #mainContent {
margin-top: 0;
margin-right: 215px;
margin-bottom: 0;
margin-left: 215px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
.thrColFixHdr #footer {
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
.thrColFixHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
color: #FFF;
background-color: #1B75BB;
text-align: center;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<link href="../gcw.css" rel="stylesheet" type="text/css" />
<link href="../p7pmm/p7PMMh09.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="../p7pmm/p7PMMscripts.js"></script>
<style type="text/css">
<!--
a:link {
color: #1B75BB;
font-weight: bold;
text-decoration: none;
a:visited {
text-decoration: none;
a:hover {
text-decoration: underline;
a:active {
text-decoration: none;
.headervariable { font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 17px;
font-weight: bold;
color: #FFF;
.bold_copy { font-weight: bold;
.photofloatleft { float: left;
padding-right: 5px;
.thrColFixHdr #container #mainContent h4 {
text-align: center;
-->
</style>
</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<table width="957" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" bgcolor="#000000"><p> </p>
<p><span class="headervariable">"AN ENGLISH-STYLE CIDER<br />
MADE IN OHIO<br />
BY AN ENGLISHMAN!" </span></p></td>
<td align="left" valign="top" bgcolor="#000000"><img src="../images/GCW_header.jpg" width="527" height="228" alt="Griffin Cider Works" /></td>
<td align="left" valign="top" bgcolor="#000000"><img src="../images/gcw_r1.gif" width="215" height="20" /></td>
</tr>
<tr bgcolor="#000000">
<td height="22" colspan="3" align="center" valign="top" bgcolor="#1B75BB" class="nav_cell"><!-- TemplateBeginEditable name="Navigation1" -->
<div id="p7PMM_1" class="p7PMMh09 p7PMMnoscript">
<ul class="p7PMM">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Find Us At...</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Acknowledgements</a></li>
<li><a href="#">Photo Gallery</a></li>
</ul>
<!--[if lte IE 6]>
<style>.p7PMMh09 ul ul li {float:left; clear: both; width: 100%;}.p7PMMh09 {text-align: left;}.p7PMMh09, .p7PMMh09 ul ul a {zoom: 1;}</style>
<![endif]-->
<!--[if IE 5]>
<style>.p7PMMh09, .p7PMMh09 ul ul a {height: 1%; overflow: visible !important;} .p7PMMh09 {width: 100%;}</style>
<![endif]-->
<!--[if IE 7]>
<style>.p7PMMh09, .p7PMMh09 a{zoom:1;}.p7PMMh09 ul ul li{float:left;clear:both;width:100%;}</style>
<![endif]-->
<script type="text/javascript">
<!--
P7_PMMop('p7PMM_1',1,2,-5,-5,0,1,0,1,0,3,1,1,0,0,0);
//-->
</script>
</div>
<!-- TemplateEndEditable --></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#000000"><img src="../images/gcw_r1.gif" width="215" height="20" /></td>
<td align="left" valign="top" bgcolor="#000000"><img src="../images/gcw_r3_C2.gif" width="527" height="39" /></td>
<td align="left" valign="top" bgcolor="#000000"><img src="../images/gcw_r1.gif" width="215" height="20" /></td>
</tr>
</table>
<!-- end #header -->
</div>
<div id="sidebar1">
<!-- TemplateBeginEditable name="Sidebar1" --><img src="../images/Crest.jpg" width="185" height="140" />
<p>We founded Griffin Cider Works in 2010 in Westlake, Ohio. We wanted to create a high quality cider similar to the ones we were used to drinking in Great Britain. To achieve this, we source Ohio for the best quality apples and blend select varieties to deliver a most premium taste.<br />
<br />
<strong>Griffin Cider Works</strong> – <em>artisan ciders made in Ohio!</em></p>
<p>Enjoy!</p>
<!-- TemplateEndEditable -->
<!-- end #sidebar1 --></div>
<div id="sidebar2"><!-- TemplateBeginEditable name="Sidebar2" -->
<h3>Coming Soon!</h3>
<p>Our newest member of the Giffin Cider Works family–</p>
<!-- TemplateEndEditable -->
<!-- end #sidebar2 --></div>
<div id="mainContent"><!-- TemplateBeginEditable name="MainContent" --><span class="Center_Header">Welcome to Griffin Cider Works!</span>
<p class="BodyContent">As you no doubt have guessed, we are <em>Griffin Cider Works</em>, an Ohio born and based alcoholic cider company. We use 100% Ohio-grown apples from orchards recommended by the <a href="../www.ohioapples.com">Fruit Growers Marketing Association of Ohio. </a></p>
<p class="BodyContent">Apples are selected by variety and quality. Griffin Cider Works operates in close association with Burnham Orchards and Grobes Orchard.to achieve truly remarkable ciders. <em>Read on for a list of news and events!</em></p>
<h2 class="SubHead">News and Events:</h2>
<p><span class="bold_copy"><img src="../images/Ciderman_Richard_Read.jpg" alt="Ciderman Richard Read" width="150" height="175" class="photofloatleft" /><span class="BodyContent">February 23, 2011 - The Plain Dealer</span></span><span class="BodyContent"> - Hard cider on tap and on dinner tables? Cleveland Ciderman Richard Read hopes it's an easy sell. By Joe Crea. <br />
<a href="http://www.cleveland.com/taste/index.ssf/2011/02/hard_cider_on_tap_cleveland_ci.html" target="_blank">Click here for article.</a></span></p>
<p class="BodyContent"><span class="bold_copy">5th November 2010 -</span> <a href = "../www.hfsummitcounty.org">Habitat for Humanity, Summit County </a> - Griffin Cider Works will be supporting families who need a little help getting a roof over their heads and there are many of those these days! We do certainly encourage any donations to the above website. At the event, held at the Portage country club, we will be serving up "Lolo Romy" and the last five gallons of our current batch of the exquisite "Griffin Original."</p>
<p class="BodyContent"><span class="bold_copy">12, 13 and 14th November 2010 -</span> <a href = "../www.fabulousfoodshow.com"> The Fabulous Food Show! </a> - This will be a great event for all! It'll be at the Cleveland I-X center and feature many great foods and drink. Guest appearances include: Michael Symon, Anne Burrell, Alton Brown, Guy Fieri and Giada De Laurentiis. We will be there supported by the American Wine School and serving up our flagship "Lolo Romy." The shop will also have a small amount available for purchase.</p>
<p> </p>
<h4>Griffin Cider Works • J.W.Dover Inc. <br />
24945 Detroit Rd • Westlake, OH 44145 </h4>
<!-- TemplateEndEditable -->
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p class="footer_type">©2011 Griffin Cider Works</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Thanks in advance!
Nina
you could always try using header tags (ie h1-h6) for headers. it is a good practice to get into.
h1 {
text-align:center;
also worth naming your styles something memorable.
.p7PMMh09 ???? whats that meant to be?
and you can also use shorthand for padding and margins
ie change
margin-top: 0;
margin-right: 215px;
margin-bottom: 0;
margin-left: 215px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
to
margin: 0 215px;
padding:0 10px;
<p><span class="headervariable">
can simply be <p class="headervariable">
border: 1px solid #000000; /* this overrides the text-align: center on the body element. */ ?????? how ?????????
dont know if anyone uses ie5 anymore, so mightnt need those conditional statements. in fact I never use conditional statements, they are just fluff that can be avaoided if your page is coded correctly in the first place.
<span class="bold_copy"> is also not needed just use
<strong> bold text </strong>
what is the best way to avoid the problem to begin with.
dont overcomplicate your code. follow the document flow. use semantic markup. dont make css styles that duplicate simple markup.
Similar Messages
-
Hi everyone, I have two CSS questions regarding my layout.
First off, it is located at:
http://robles.clunet.edu/~ssmi/tsr9/tsr9template.html
The CSS is embeded in the file (it will linked from a
different file once I am done with this design, but beside the
point)
My first question is about how I can keep the right top image
from being bumped down to the next line when the window is resized.
I want it to squeeze into some, but then at a point have the scroll
bars kick in.
My other question is how I could make the title image "The
Scott Report" centered between the two left and right images up
top.
Could anyone help out?
Thanks a lot!Check the AppleCare number for your country here:
http://support.apple.com/kb/HE57
Call them up, and let them know you would like to be transferred to the Account Security Team. -
I have a picture i am trying to put inside a div that has a class already which makes pictures have a frame around them when i insert them into it, which is fine for the main image but i am trying to add an extra image in there and i dont want that frame to be there.
I will attach a picture and a link to the site i am talking about.
If anyone can help me with this CSS question or how i can go about getting rid of the frame around the step 1, step 2 and step 3.
eWeb Solutions Website Development
Thanks!Take the frame class out the div and apply it to select images like this:
<div>
<img class="frame" src="step1.jpg">
<img src="picture1.jpg">
</div>
<div>
<img class="frame" src="step2.jpg">
<img src="picture2.jpg">
</div>
Nancy O. -
CheckboxDatagrid (extended) CSS question
Hello
In our application we make use of the CheckBoxDataGrid, which rocks.
We are playing with the CSS and noticed that we arent able to change the "chromeColor" property, in CSS. Only in the MXML.
I would like to set the style in the CheckBoxDataGrid super class, but I do not see a way to specify "headerStyleName".
How and where would that occur in an extended class? Would it need to happen in the constructor?
Also, how would you re-assign the CSS, in ActionScript, in this extended DataGrid class? Any ideas?
Any help is appreciated, thanks folks!kumar wrote:
Browser: IE 7 (** Is it the browser issue**)Yes. Interactive Report CSS question.. expands the page width to accommodate the IR, with a scrollbar on the viewport that allow the user to view the full width.
Remove
#apexir_DATA_PANEL {
margin-bottom: 10px;
overflow: auto;
}The IE7 bug can be addressed by feeding it the following CSS fix targeted at pre-IE8 browsers with a conditional comment in the page HTML Header:
<!--[if lt IE 8]>
<style type="text/css">
#too-wide .rc-body {
float: none;
</style>
<![endif]-->Specify the <tt>too-wide</tt> static region ID on the IR region for use as a CSS selector.
However, presenting information in a way that requires users to scroll the viewport horizontally is clunky. This will be particularly true in combination with an IR. Think about the user experience: is there an alternative way of displaying this information? -
If you would take a look at this page http://www.gcfa.org/add_data.asp you will see that between the header and the navigation bar a white line is there. I don't won't it there, how can I get rid of it?
It must be in my CSS I guess, I checked the images and neither one of them the Header nor the Navigation menu have a white border. Here's my code. Thanks in advance for your help.
My page:
<%@LANGUAGE="VBSCRIPT"%>
<!--#include file="Connections/BishopsLogin.asp" -->
<%
Dim MM_editAction
MM_editAction = CStr(Request.ServerVariables("SCRIPT_NAME"))
If (Request.QueryString <> "") Then
MM_editAction = MM_editAction & "?" & Server.HTMLEncode(Request.QueryString)
End If
' boolean to abort record edit
Dim MM_abortEdit
MM_abortEdit = false
%>
<%
If (CStr(Request("MM_insert")) = "form1") Then
If (Not MM_abortEdit) Then
' execute the insert
Dim MM_editCmd
Set MM_editCmd = Server.CreateObject ("ADODB.Command")
MM_editCmd.ActiveConnection = MM_BishopsLogin_STRING
MM_editCmd.CommandText = "INSERT INTO dbo.DeptData (Department, SubpageTitle, LinkDescription, URL, DateLastModified, ModifiedBy) VALUES (?, ?, ?, ?, ?, ?)"
MM_editCmd.Prepared = true
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param1", 201, 1, 30, Request.Form("Department")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param2", 201, 1, 1000, Request.Form("SubpageTitle")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param3", 201, 1, 1000, Request.Form("LinkDescription")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param4", 201, 1, 500, Request.Form("URL")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param5", 201, 1, 10, Request.Form("DateLastModified")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param6", 201, 1, 50, Request.Form("ModifiedBy")) ' adLongVarChar
MM_editCmd.Execute
MM_editCmd.ActiveConnection.Close
' append the query string to the redirect URL
Dim MM_editRedirectUrl
MM_editRedirectUrl = "adding_data_results.asp"
If (Request.Form<> "") Then
If (InStr(1, MM_editRedirectUrl, "?", vbTextCompare) = 0) Then
MM_editRedirectUrl = MM_editRedirectUrl & "?" & Request.Form
Else
MM_editRedirectUrl = MM_editRedirectUrl & "&" & Request.Form
End If
End If
Response.Redirect(MM_editRedirectUrl)
End If
End If
%>
<%
Dim rs_Add_Data__MMColParam
rs_Add_Data__MMColParam = "1"
If (Request.QueryString("RecordID") <> "") Then
rs_Add_Data__MMColParam = Request.QueryString("RecordID")
End If
%>
<%
Dim rs_Add_Data
Dim rs_Add_Data_cmd
Dim rs_Add_Data_numRows
Set rs_Add_Data_cmd = Server.CreateObject ("ADODB.Command")
rs_Add_Data_cmd.ActiveConnection = MM_BishopsLogin_STRING
rs_Add_Data_cmd.CommandText = "SELECT ID, Department, SubpageTitle, LinkDescription, URL, DateLastModified, ModifiedBy FROM dbo.DeptData WHERE ID = ? ORDER BY ID DESC"
rs_Add_Data_cmd.Prepared = true
rs_Add_Data_cmd.Parameters.Append rs_Add_Data_cmd.CreateParameter("param1", 5, 1, -1, rs_Add_Data__MMColParam) ' adDouble
Set rs_Add_Data = rs_Add_Data_cmd.Execute
rs_Add_Data_numRows = 0
%>
<%
Dim MM_paramName
%>
<%
' *** Go To Record and Move To Record: create strings for maintaining URL and Form parameters
Dim MM_keepNone
Dim MM_keepURL
Dim MM_keepForm
Dim MM_keepBoth
Dim MM_removeList
Dim MM_item
Dim MM_nextItem
' create the list of parameters which should not be maintained
MM_removeList = "&index="
If (MM_paramName <> "") Then
MM_removeList = MM_removeList & "&" & MM_paramName & "="
End If
MM_keepURL=""
MM_keepForm=""
MM_keepBoth=""
MM_keepNone=""
' add the URL parameters to the MM_keepURL string
For Each MM_item In Request.QueryString
MM_nextItem = "&" & MM_item & "="
If (InStr(1,MM_removeList,MM_nextItem,1) = 0) Then
MM_keepURL = MM_keepURL & MM_nextItem & Server.URLencode(Request.QueryString(MM_item))
End If
Next
' add the Form variables to the MM_keepForm string
For Each MM_item In Request.Form
MM_nextItem = "&" & MM_item & "="
If (InStr(1,MM_removeList,MM_nextItem,1) = 0) Then
MM_keepForm = MM_keepForm & MM_nextItem & Server.URLencode(Request.Form(MM_item))
End If
Next
' create the Form + URL string and remove the intial '&' from each of the strings
MM_keepBoth = MM_keepURL & MM_keepForm
If (MM_keepBoth <> "") Then
MM_keepBoth = Right(MM_keepBoth, Len(MM_keepBoth) - 1)
End If
If (MM_keepURL <> "") Then
MM_keepURL = Right(MM_keepURL, Len(MM_keepURL) - 1)
End If
If (MM_keepForm <> "") Then
MM_keepForm = Right(MM_keepForm, Len(MM_keepForm) - 1)
End If
' a utility function used for adding additional parameters to these strings
Function MM_joinChar(firstItem)
If (firstItem <> "") Then
MM_joinChar = "&"
Else
MM_joinChar = ""
End If
End Function
%>
<!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>GCFA: Update Data Files</title>
<link href="samples/OneColumn.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="screen">
@import url("images/nav_bar.css");
</style>
<script language="JavaScript1.2" type="text/javascript" src="images/mm_css_menu.js"></script>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
//-->
</script>
</head>
<body class="oneColLiqCtrHdr" onload="MM_preloadImages('images/Slices/nav_bar_r2_c2_f2.gif','images/Slices/nav_bar_r2_c 3_f2.gif','images/Slices/nav_bar_r2_c5_f2.gif')">
<div id="container">
<div id="header">
<div id="#DataFiles_LOGO"></div>
</div>
<div id="mainContent">
<div id="FWTableContainer1445733177">
<table border="0" cellpadding="0" cellspacing="0" width="799">
<!-- fwtable fwsrc="nav_bar_revised.png" fwpage="Page 1" fwbase="nav_bar.gif" fwstyle="Dreamweaver" fwdocid = "1445733177" fwnested="0" -->
<tr>
<td><img src="images/Slices/spacer.gif" width="1" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="221" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="221" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="5" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="221" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="130" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="6"><img name="nav_bar_r1_c1" src="images/Slices/nav_bar_r1_c1.gif" width="799" height="5" border="0" id="nav_bar_r1_c1" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img name="nav_bar_r2_c1" src="images/Slices/nav_bar_r2_c1.gif" width="1" height="25" border="0" id="nav_bar_r2_c1" alt="" /></td>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore();MM_menuStartTimeout(1000)" onmouseover="MM_menuShowMenu('MMMenuContainer1015135953_0', 'MMMenu1015135953_0',6,24,'nav_bar_r2_c2');MM_swapImage('nav_bar_r2_c2','','images/Slices /nav_bar_r2_c2_f2.gif',1);"><img name="nav_bar_r2_c2" src="images/Slices/nav_bar_r2_c2.gif" width="221" height="24" border="0" id="nav_bar_r2_c2" alt="" /></a></td>
<td><a href="http://www.gcfa.org/Department_Data.aspx" target="_top" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_bar_r2_c3','','images/Slices/nav_bar_r2_c3_f2.gif',1);"><i mg name="nav_bar_r2_c3" src="images/Slices/nav_bar_r2_c3.gif" width="221" height="24" border="0" id="nav_bar_r2_c3" alt="Department Data Files" /></a></td>
<td rowspan="2"><img name="nav_bar_r2_c4" src="images/Slices/nav_bar_r2_c4.gif" width="5" height="25" border="0" id="nav_bar_r2_c4" alt="" /></td>
<td><a href="http://www.gcfa.org/help_topics.html" target="_top" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_bar_r2_c5','','images/Slices/nav_bar_r2_c5_f2.gif',1);"><i mg name="nav_bar_r2_c5" src="images/Slices/nav_bar_r2_c5.gif" width="221" height="24" border="0" id="nav_bar_r2_c5" alt="Help Topics" /></a></td>
<td rowspan="2"><img name="nav_bar_r2_c6" src="images/Slices/nav_bar_r2_c6.gif" width="130" height="25" border="0" id="nav_bar_r2_c6" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="1" height="24" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><img name="nav_bar_r3_c2" src="images/Slices/nav_bar_r3_c2.gif" width="442" height="1" border="0" id="nav_bar_r3_c2" alt="" /></td>
<td><img name="nav_bar_r3_c5" src="images/Slices/nav_bar_r3_c5.gif" width="221" height="1" border="0" id="nav_bar_r3_c5" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
</table>
<div id="MMMenuContainer1015135953_0">
<div id="MMMenu1015135953_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="http://www.gcfa.org/add_data.asp" target="_top" id="MMMenu1015135953_0_Item_0" class="MMMIFVStyleMMMenu1015135953_0" onmouseover="MM_menuOverMenuItem('MMMenu1015135953_0');"> Add Data </a> <a href="http://www.gcfa.org/update_data.asp" target="_top" id="MMMenu1015135953_0_Item_1" class="MMMIVStyleMMMenu1015135953_0" onmouseover="MM_menuOverMenuItem('MMMenu1015135953_0');"> Update Data </a> <a href="http://www.gcfa.org/delete_data.asp" target="_top" id="MMMenu1015135953_0_Item_2" class="MMMIVStyleMMMenu1015135953_0" onmouseover="MM_menuOverMenuItem('MMMenu1015135953_0');"> Delete Data </a> </div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<strong>Enter the information you are wanting to add to our database:</strong><br />
</div>
<form ACTION="<%=MM_editAction%>" METHOD="POST" name="form1" target="_top" id="form1">
<table width="689" align="left">
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">Department:</td>
<td><label>
<input name="Department" type="text" id="Department" size="75" maxlength="500" />
</label></td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">Subpage Title:</td>
<td><label>
<input name="SubpageTitle" type="text" id="SubpageTitle" size="75" maxlength="1000" />
</label></td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">Link Description:</td>
<td><label>
<input name="LinkDescription" type="text" id="LinkDescription" size="75" maxlength="1000" />
</label></td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">URL:</td>
<td><input name="URL" type="text" id="URL" size="75" maxlength="500" /></td>
</tr>
<tr valign="baseline">
<td height="24" align="left" valign="top" nowrap="nowrap">Date Modified:</td>
<td><input name="DateLastModified" type="text" id="DateLastModified" size="75" maxlength="10" /></td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">Modified By:</td>
<td><label>
<input name="ModifiedBy" type="text" id="ModifiedBy" size="75" maxlength="50" />
</label></td>
</tr>
<tr valign="baseline">
<td height="20" align="left" valign="top" nowrap="nowrap"> </td>
<td> </td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap"><p> </p></td>
<td align="left" valign="top" nowrap="nowrap"><label>
<input type="submit" name="Add_Info" id="Add_Info" value="Add data to database now!" />
</label></td>
</tr>
</table>
<p> </p>
<p><br />
<br />
<br />
<br />
</p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
</p>
<input type="hidden" name="MM_insert" value="form1" />
</form> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="footer">
<p align="center">This site is maintained by the General Council on Finance and Administration <script language="JavaScript">
var today_date= new Date()
var year=today_date.getFullYear()
document.write(year)
//--> </script>
©</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
<%
rs_Add_Data.Close()
Set rs_Add_Data = Nothing
%>
My CSS Pages:
@charset "utf-8";
body {
/*background:#ffffff;*/
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
/*color: #000000;*/
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-repeat: no-repeat;
background-position: right top;
background-image: url(../images/body_bg.jpg);
.oneColLiqCtrHdr #container {
width: 99%; /* the auto margins (in conjunction with a width) center the page */
/* border: 1px solid #000000;*/
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: ;
background-repeat: no-repeat;
background-position: right top;
.oneColLiqCtrHdr #header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: 700;
color: #FFFFFF;
font-size: 18px;
background-repeat: no-repeat;
height: 124px;
width: 100%;
background-image: url(../images/dept_data_files_logo.jpg);
padding: 0px;
/*background-color: #67120D;*/
.oneColLiqCtrHdr #mainContent {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #3C0D0D;
font-weight: 700;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
margin: 0px;
width: 760px;
.oneColLiqCtrHdr #footer {
padding: 0 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: 700;
color: #FFFFFF;
background-color: #000000;
/*width:780px;*/
.oneColLiqCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
h1 {
color:#FFFFFF;
font-size: 36px;
h2,h3 {
10px;
8px;
color: #000000;
#DataFiles_LOGO{
height:127px;
width: 740px;
background-repeat: no-repeat;
background-image: url(../images/dept_data_files_logo.jpg);
background-position: left top;
padding: 0px;
margin: 0px;
top: 0px;
float: left;
And my Navigation CSS:
td img {
/* Another Mozilla/Netscape bug with making sure our images display correctly */
display: block;
#FWTableContainer1445733177 {
/* The master div to make sure that our popup menus get aligned correctly. Be careful when playing with this one. */
position:relative;
margin:0px;
width:799px;
height:30px;
text-align:left;
#MMMenuContainer1015135953_0 {
/* This ID is related to the master menu div for menu MMMenuContainer1015135953_0 and contains the important positioning information for the menu as a whole */
position:absolute;
left:7px;
top:29px;
visibility:hidden;
z-index:300;
#MMMenu1015135953_0 {
/* This class defines things about menu MMMenu1015135953_0's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:#ffffff;
border:1px solid #000000;
width:208px;
height:76px;
.MMMIFVStyleMMMenu1015135953_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu1015135953_0 */
border-top:1px solid #000000;
border-left:1px solid #000000;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:208px;
height:26px;
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
height:18px;
.MMMIVStyleMMMenu1015135953_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu1015135953_0 */
border-top:0px;
border-left:1px solid #000000;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:208px;
height:25px;
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
height:18px;
#MMMenu1015135953_0_Item_0 {
/* Unique ID for item 0 of menu MMMenu1015135953_0 so we can set its position */
left:0px;
top:0px;
#MMMenu1015135953_0_Item_1 {
/* Unique ID for item 1 of menu MMMenu1015135953_0 so we can set its position */
left:0px;
top:26px;
#MMMenu1015135953_0_Item_2 {
/* Unique ID for item 2 of menu MMMenu1015135953_0 so we can set its position */
left:0px;
top:51px;
#MMMenuContainer1015135953_0 img {
/* needed for Mozilla/Camino/Netscape */
border:0px;
#MMMenuContainer1015135953_0 a {
/* Controls the general apperance for menu MMMenuContainer1015135953_0's items, including color and font */
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#ffcc33;
text-align:center;
vertical-align:middle;
padding:3px;
background-color:#000000;
font-weight:bold;
font-style:normal;
display:block;
position:absolute;
#MMMenuContainer1015135953_0 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer1015135953_0 */
color:#ffcc33;
background-color:#990000;Glad you sorted this out.
You might want to mark this as Answered so folks trying to help answer questions won't have to click on this link now. Thanks!
E. Michael Brandt
www.divahtml.com
www.divahtml.com/products/scripts_dreamweaver_extensions.php
Standards-compliant scripts and Dreamweaver Extensions
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia -
Hello!
I have a very basic theme / csss question:
Working with Oracle XE and Apex I want to create my own theme. Therefore I tried to use
http://wiki.shellprompt.net/bin/view/Apex/ThemeTips
But thereit says:
1. Copy the theme_4 images directory to theme_100
But where do I find the theme_4 images directory???
All I found was:
Shared Components -> Themes
But how can I open the css file (2nd step)??
Excuse me for beeing this stupid...
Thank you
JohannSearching the XE Threads I found out, that
http://myserver.com:8080/i/themes/theme_4/
shows me the themes 4 directory using webdav.
But how writing there?
Bye
Johann -
Some CSS Questions and Firebug Behaviour.
Here's my page: http://martcol.co.uk/brightontherapyservice/
It's a developing site so, I'm still working on it and I know it might be a bit scruffy in places - sorry.
I'll start with the Firbug thing first.
If I check Outline > Outline Block Level Elements why do some of the outlines seem to start left and off the screen and why do some of the outlines not form completely?
If you are able to outline these elements in FireFox this is what I mean:
A is a border that shoots off to the left and B is an example of a border that does not form completely. I am asking this because obviously, I don't understand it and more, because I wonder if it indicates something bad. Which leads me to my next question.
On some of the individual image panels the box-shadow gets shaved off top and right. I can make it come back by fiddling with margins but it is such a fiddle I don't know which is the best way to sort it out.
Thanks
Martin
PS: My next question will be about lining up the bottom text panel. I thought I'd wait to see how you all get on with these questions but since you're here, how can I line that up with the image panels?
Thanks again.
BTW - it's WordPressA1: if you don't need nating, simply do not use a group.
A2: route the traffic without checking if it hits a content rule.
Your acl 1 will permit all traffic and nat traffic from 10.10.10.0/24 when hitting a specific content rule.
Your acl 2 is the same but if you have more content rules the traffic 10.10.10.0/24 will simply be routed and will not hit any of them.
We usually use the bypass for cache devices that would need to access a server directly.
A3: ACL are not mandatory. By default the CSS permits all traffic. If you enable acl so, you then need to explicitly permit the traffic you want to have across the CSS.
Gilles. -
CSS question - complete Novice
i know some of you people must dispair at novice questions
but we all need to start somewhere don't we. i have had dreamweaver
for 18 months and have hardly used it but now i am starting to
learn. basically my problem is this...and i bet it's an old
chesnut.
i have two different places on my website that have links,
one with a green background, that on hover turns white.... thats in
the settings. thing is i want an email link thats on a white
background in the same page, i have tried different colurs but it
just doesn't look right.
could anyone tell me in simple terms what i need to add to
either the CSS file or change something in settings that allow me
to do this.
sorry if this has been asked before...thanks for your help,
Bryan
PS i am using MX 2004Pseudo-classes and container styles are what you need - here
are some
tutorials.
http://www.mako4css.com
http://www.thepattysite.com/linkstyles1.cfm
http://www.projectseven.com/tutorials/pseudoclasses/index.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"beebbuoy" <[email protected]> wrote in
message
news:eng6jm$8dg$[email protected]..
>i know some of you people must dispair at novice
questions but we all need
>to
> start somewhere don't we. i have had dreamweaver for 18
months and have
> hardly
> used it but now i am starting to learn. basically my
problem is
> this...and i
> bet it's an old chesnut.
>
> i have two different places on my website that have
links, one with a
> green
> background, that on hover turns white.... thats in the
settings. thing is
> i
> want an email link thats on a white background in the
same page, i have
> tried
> different colurs but it just doesn't look right.
>
> could anyone tell me in simple terms what i need to add
to either the CSS
> file
> or change something in settings that allow me to do
this.
>
> sorry if this has been asked before...thanks for your
help, Bryan
>
> PS i am using MX 2004
> -
Include In Head adaptive Tag and Webcenter Default CSS questions
Hello I'm fairly new to Webcenter
I`m currently working on a project that`s requiring us to do a lot of customizing of Templates and Stylesheets changes, I have a couple of questions I was hoping someone might be able to help me with.
1) I want to inject some code into the page header of all webcenter pages. I understand that there is an adaptive tag "includeinhead", documented here:
http://download.oracle.com/docs/cd/E13174_01/alui/devdoc/docs60/Portlets/Adaptive_Portlets/Using_Adaptive_Tags/plumtreedevdoc_integration_portlets_adaptive_namespacetoken.htm
This works, for the most part. However, for IE I would like to include the 'ie shim' which fixes behaviours for IE (adding things like border radius), etc...this code goes as follows:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
As you can see, there are 'comment' tags that are not really comments, but directives to IE to process the script. This unfortunately gets parsed out by webcenter because (I assume) it just sees the whole block as a comment...So I am wondering what can be done about this.
2) I am wondering where the 'default' stylesheet that webcenter uses resides. By default, I am referring to the styles that get applied in the cases where tags are not defined in the skin file. I am having some difficulties around this because often Webcenter injects inline CSS into the controls where I don't really want it to... For example, in the "panel header" control, webcenter injects code for the title field and automatically sets the width of the cell. I would like to override this and control it completely.
Thanks.Is that really a big deal or is it ok .... ? I'm always thinking .... oh god how heavy that is , anytime you call up the page the browser has to go through all that first ... is it actually ok or are there any tricks or tips ?
It's always a good idea to worry about how heavy the LINKED files are since they contribute to the overall weight of the page. The contribution of the links themselves, though, is negligable. There is also benefit in managing the order in which those links appear. Put CSS links first and follow them with javascript links (since the CSS will affect the page rendering, while the javascript most likely will not), so the browser can begin to render the page even while it's waiting for the js files to be fetched.
2 - Templates are great but If a spry is only needed on some pages,how do we handle that ? By setting up another template ? Or is there a better way ?
If you are applying Spry effects to a Template child page, DW is smart enough to drop those links into the editable region in the head of the page (which is what it should do). Just make sure that the editable region falls BETWEEN your CSS links and your JS links to allow you to arrange things as mentioned above. There is never a real need to have more than one Template per site.
3 - is it better to have 1 single compressed css file with ALL styles in it or various css files ?
There is a small performance hit everytime you have to go back to the server for another file. So two pages of the same overall weight, one with 1 externally linked file, and the other with 10 externally linked files will show a difference in their download time. How significant that difference is will depend on many variables, but it will be a real difference. That being the case, it's always better to opt for a single file than multiple files. Practically speaking, the difference will usually be small, especially when you consider how small these 'incremental' css files usually are.... -
Hello Dreamweavers.
im seeing two types of codes in order to link a htlm file to a css sheet.
one code is: <link rel="stylesheet" type="text/css" href="theme.css">
second code is: <link href="styel.css" rel="stylesheet" type="text/class" media="screen" />
what is the difference between these 2?
Kind Regards.Ok i have understood that. i was just asking this question because i went to w3schools. and wheni typed in link to external file sheet.
the default came up as :
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
smthing different to the tutorial i was doing.
Bu thank you for the Help. -
Photoshop CS3 to Dreamweaver CS3 CSS question
Hi all,
I am sorry if this is allready dicussed a couple of times.I did a search and just could not find it. When I export a site from Photoshop CS3 to DIV (generate CSS by ID) it is aligned to the left and all DIV's have a specific position on the page. How can I get my site to center in Dreamweaver CS3 without having to adjust al separate DIV's?
For Example: When I export from Photoshop all slices are exported as folowed.
#Table_01 {
position:absolute;
left:auto;
top:0px;
width:832px;
height:562px;
right: auto;
#test-13 {
position:absolute;
left:275px;
top:26px;
width:9px;
height:189px;
#test-14 {
position:absolute;
left:284px;
top:26px;
width:128px;
height:98px;
I know how to make a DIV center (with Margin auto left and right) but I do not know how to center all DIV's at once.
I hope you are willing to help me with this. In case you have more questions let me know.The answer is to not let Photoshop write either your HTML or your CSS for you. What you show is a disaster waiting to happen, really, and is characteristic of the kind of mess produced by any wizard that writes HTML based on a graphic layout. Use your graphics editors to produce your graphics. Build your page in DW. It's a much better way to go.
I know how to make a DIV center (with Margin auto left and right) but I do not know how to center all DIV's at once.
I hope you are willing to help me with this. In case you have more questions let me know.
Leaving your page with all absolutely positioned elements is really asking for trouble, but here's how to make them all center at once -
Change this -
</head>
to this -
<style type="text/css">
#wrapper { width:760px; margin:0 auto;position:relative; }
/* 760px will display on an 800px screen maximized browser window without */
/* horizontal scrollbars. Change as needed */
</style>
</head>
change this -
<body ...>
(the ellipsis represents any other attributes that might be mentioned in the body tag, and SHOULD NOT BE INCLUDED EXPLICITLY!)
to this -
<body ...>
<div id="wrapper">
and this -
</body>
to this -
<!-- /wrapper -->
</div>
</body>
and see if that helps. -
Just two quick questions. First, I am trying to change the value of one of my backing bean properties using js. It is a boolean and what I tried was:
onfocus="{ ${displayOnly} = true}"
however, as expected, this tries to set the actual value of displayOnly (false) to true which cant be done. How do I set the variable displayOnly to true?
My other questions is about css. I have a panelgrid which has many inputText and labels. Using a styleclass on the panelgrid changes the styles of the labels but the inputText stay the same. Is there a way to write a subclass of my panelgrids style (pgstyle)? I tried .pgstyle t:inputText and .pgstyle #t:inputText but neither worked. As you can see, I have no idea what I am doing when it comes to subclassing style classes so I would appreciate any help I can get.Just two quick questions. First, I am trying to
change the value of one of my backing bean properties
using js. It is a boolean and what I tried was:
onfocus="{ ${displayOnly} = true}"
however, as expected, this tries to set the actual
value of displayOnly (false) to true which cant be
done. How do I set the variable displayOnly to true?JavaScript is executed on the client side. Your backing bean lives on the server side. So the only way to modify the backing bean properties is when the server is processing a request. You can use JavaScript to help define what this request will be and even invoke it, but you cannot directly change the backing bean via JavaScript.
>
My other questions is about css. I have a panelgrid
which has many inputText and labels. Using a
styleclass on the panelgrid changes the styles of the
labels but the inputText stay the same. Is there a
way to write a subclass of my panelgrids style
(pgstyle)? I tried .pgstyle t:inputText and .pgstyle
#t:inputText but neither worked. As you can see, I
have no idea what I am doing when it comes to
subclassing style classes so I would appreciate any
help I can get.CSS is interpreted on the client side. The inputText components are interpreted on the server side; they generate HTML which is what the browser sees.
You need to have a solid understanding of what is executed where in order to develop web applications. -
The question pertains to this page
this
page
This is a class project & am not allowed to touch the
html page. Only the CSS Tab in D/W.
Ideally, what I would like to do is move the paragraph which
starts with "A demonstration of what can be accomplished" up at the
very top, aligned with "Zen Garden" but justified right.
If that is not possible, then I would at least like the
second paragraph.. which starts out as "So What is This About?" to
wrap around the paragraph I mentioned above.
Thanks again!
Edit: Link to CSS page:
http://www.webrevamps.com/adwclass/a2/sample.cssquote:
Originally posted by:
bregent
Uh. Are you asking us to do your homework for you?
LOL! No, however I am asking for help, which I'm allowed to
do (it's an online class). -
I know basic tableless css, my question is instead of a regular navigation bar I need to use the spry widget for a dropdown navigation bar on an exisitng html page. I'm able to insert the spry in the correct spot on the .html page and get it to work but I have a css sheet already attached to the page I need to know if I can just select all the css from the spry css page and insert it inside my attached css page?
Any help?Yes, you can move the styles, but in my opinion, it is safer to maintain the Spry CSS assets in their own file, safe from inadvertent deletion or harm. There is an inherent logic to the order of styles in the Spry CSS sheets, and you might lose the wisdom of the comments not to mention the orderly consistency as well.
You may link many style sheets to your .html pages...you are not limited to one per page.
By using several CSS files attached to one page, you can also have a separate style sheet for different media: one for the Screen, one for Print, one for a Handheld device. There's no reasonable way to keep all these varying uses for different style sheets all one ONE sheet. The Printer will look for your main style sheet AND at the overriding styles in the print style sheet, for instance, so you don't need to print the nav bar when what you want is a print of the content.
Z
You do, of course, need to NAME the CSS files with distinct names, for instance, global.css, print.css, handheld.css.
Message was edited by: Zabeth69 -
Basic CSS question. New learner
I am just learning CSS and HTML and I have a basic question. How can I make my float left div's expand down for content? I have a wrapper and within my wrapper I have 3 columns all floated left with margins added to them, I ommited height so that my columns can expand as I add stuff to it. I have content on my columns, but instead of wrapping the content down as I add...the div's are expanding and dropping below each other because there is no space for them. I tried clearing, but I am not sure I understand the clear property well so I stuck "none" in there for now. Here is my HTML and CSS:
<body>
<div id="wrapper">
<div id="head"></div>
<div id="slideshow"></div>
<div id="menu"></div>
<!--End Navigation-->
<div id="firstcolumn">stuffstuffstuff
stuffstuffstuffstuffstuff
stuffstuffstuffstuffstuff
stuffstuff</div>
<div id="secondcolumn">stuffstuffstuff
stuffstuffstuffstuffstuffstuffstuff
stuffstuffstuffstuffstuff</div>
<div id="thirdcolumn">stuffstuffstuff
stuffstuffstuffstuffstuffstuff
stuffstuffstuffstuffstuffstuff</div>
</div>
<!--End Wrapper-->
<div id="footer">This is my footer</div>
<!--End Footer-->
</body>
</html>
-------CSS---------
body {
margin: 0;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
background: url(images/bg.png) #666 repeat;
#wrapper {
margin: 0 auto;
width: 975px;
background-color: #CCC;
height: 1000px;
#head {
width: 975px;
height: 100px;
background-color:#666;
position: relative;
#slideshow {
height: 110px;
width: 975px;
position: relative;
background-color: #066;
#menu {
width: 975px;
height: 30px;
background-color:#999;
position: relative;
#firstcolumn {
width: 315px;
float: left;
position: relative;
background-color:#666;
clear: none;
margin: 10px 10px 0px 10px;
#secondcolumn {
width: 305px;
float: left;
position: relative;
background-color: #CCC;
clear: none;
margin: 10px 10px 0px 0px;
#thirdcolumn {
width: 315px;
float: left;
position: relative;
background-color:#666;
clear: none;
margin: 10px 10px 0px 0px;
#footer {
margin: 0 auto;
width: 975px;
height: 200px;
position: relative;
background-color:#666;
This is what I am seeing on my display in Dreamweaver. As you can see, these rectangular elements are my div's. They are supposed to line up side by side, but my "content" isn't filling my div's properly, but rather expanding them causing my div's to drop down below each other.
Thanks for any input.It would be much easier to advise you if you could post a URL for a site or page.
Height and CSS is a bit of mystery to me but the most simple principle is that content is the way to give an element height. There are ways around it and you might like to Google "Faux Columns CSS" or something like it. The principle is that you construct an image that is a slim band of color that align with your intended columns. You apply that image as a background in you CSS and set it to repeat down the page. Then as your content grows or differs the graphic takes care of that.
There are other ways such as using positioning and javascript but they are more complicated.
Martin -
I previously designed an html website in Dreamweaver MX 2004
that I need to switch over to CSS. I've been studying pages and
pages of tutorials, and have some questions that haven't really
been addressed, or else I've been missing the point!
So far, I've successfully created a simple, external .css
file that had paragraph and heading rules, linked it to an
existing, table-based, html test-page, published it, and it worked
fine.
Now I want to get away from using tables to using divs, and
there's a sample layout in DW that I selected: Two column, elastic,
with header and footer. Now I'm confused.
In the sample page, along with css rules and instructions,
there are paragraphs of content:
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus,
fermentum id, molestie in, commodo porttitor, felis. Nam blandit
quam ut lacus. </p>
Question #1: Does this mean this isn't supposed to be an
external style sheet? Because I'm pretty sure one doesn't put any
content on an external style sheet. Can I turn this into an
external style sheet, and what do I need to do in order to
accomplish this?
Question # 2:
As mentioned above, my first foray into an external style
sheet worked fine with one of my table-based html pages. What I
fail to grok is when you set up an external style sheet with divs
how exactly do you put your content on your page in design view? Do
I need to convert tables to divs, which would be on each individual
page? Then am I giving up having the divs controlled by an external
style sheet? I don't mind making all new html pages to be
controlled by the divs on a css, but then I'm back to the first
question - how do you place content on an html page, when the divs
are supposed to be controlled by the external ss. This seems to be
a never-ending loop in my mind!
Many thanks in advance for trying to straighten this out!> Dreamweaver the Missing Manual - a good overall
reference to the whole
> of Dw - but don't follow everything as it teaches you
about the bad
> bits such as frames - and nested templates.
Not so much the one on CS3....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Malcolm N_" <[email protected]> wrote in message
news:[email protected]...
> On Sun, 30 Dec 2007 23:44:45 +0000 (UTC), "mindi-1"
> <[email protected]> wrote:
>
>>Malcolm M,
>>
>> Thank you for your reply! I'm starting to get more
comfortable in code
>> view.
>>I appreciate your letting me know about moving the
styles from the page to
>>the
>>external style sheet. Good idea to get some books -
do you have any to
>>recommend?
>>
>> Kim,
>>
>> Thank you for the link - I'll do the tutorials, as
they are ones I
>> haven't
>>seen before.
>>
>> Happy new year to you both!
>> Mandira
>>
>>
>
>
> Yes the cssmax tutorial are good - and a good place for
css controlled
> navigation list
>
>
> My recommended library:
>
> HTML,XHTML & CSS by Elizabeth Castro - very
comprehensive, readable
> and attractive book explains all - ( or most at least )
>
> HTML Mastery - Semantics, Standards , and Styling by
Paul Haine - an
> excellent guide to how to really use html, including a
comprehensive
> guide to styling tables used for data.
>
> CSS Mastery - Advance Web Standards Solutions - by Andy
Budd - an
> excellent companion to HTML Mastery - which really
guides you into
> using CSS correctly with valid code.
>
> These two Mastery books compliment each other extremely
well.
>
> CSS - The Definitive Guide - by Eric Meyer - an
excellent reference -
> perhaps a little more difficult style to read - but
clearly the author
> is one of the top experts on CSS.
>
> Dreamweaver CS3 with CSS, Ajax and PHP by David Powers -
another
> excellent book, very readable style on how to produce
good websites
> with Dw. It is NOT like your typical guide to Dw - just
regurgitates
> the help files - including the bits of Dw that should
have been binned
> - David guides you on best practise and the parts of Dw
to avoid.
>
> Dreamweaver the Missing Manual - a good overall
reference to the whole
> of Dw - but don't follow everything as it teaches you
about the bad
> bits such as frames - and nested templates.
>
>
>
> --
>
> ~Malcolm N....
> ~
Maybe you are looking for
-
Do NOT use Dropbox for iPhoto backups - corrupted library
So after a couple of weeks of problem solving I've just been able to recover part of my 72gb iPhoto library. My office was burgled a short while before Xmas so I was left to recover my stuff all from Dropbox which I have set to synchronise, together
-
How do I paste a signature onto an Acrobat XI Standard pdf form?
How do I paste a signature onto an Acrobat XI Standard pdf form?
-
NULL values and Data Control based on Web Service
One of my ADF control is based on a Data Control created through a web service. Every thing is working fine except the way ADF control is handling the null values return by the web service based data control. For example for null columns the web serv
-
I can not open in safe mode. It launches Utilities instead. I tried to reinstall Mavericks but it stalled for over an hour. I found a loose kernel in my HD fielder and deleted it. Anny ideas? Thanks. Allan
-
Dynamic image positioning in SAPScript
Hi everyone! I have been searching the whole internet but unfortunately did not find a solution for my problem, maybe someone of you knows how to solve it: I want to print thumbnail pictures beside items of an inquiry. I know that there are variable