Div tags problem on centered layout
Like the title says, I'm working on a centered layout and I
need to place a div tag that has an overflow for scrolling. The
problem is what do I do so that it does just that. I tried using an
AP div tag but it doesn't follow the rest of the layout if you play
with the browser width. And if I simply put a div tag in my table,
I don't know how to put an overflow on it. I only have a limited
amount of space for the text, and I have too much text to simply
put it in the table. It's my first time working on a centered
layout, so I'm kind of at a lost right now. And that's the only
thing stopping me from putting it online.
> And if I simply put a div tag in
> my table, I don't know how to put an overflow on it.
<div style="overflow:scroll">
> I only have a limited
> amount of space for the text, and I have too much text
to simply put it in
> the
> table.
If that's the case, then you have a broken layout scheme, and
a usability
problem.
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
==================
"cprime" <[email protected]> wrote in
message
news:g6n78v$qmn$[email protected]..
> Like the title says, I'm working on a centered layout
and I need to place
> a div
> tag that has an overflow for scrolling. The problem is
what do I do so
> that it
> does just that. I tried using an AP div tag but it
doesn't follow the rest
> of
> the layout if you play with the browser width. And if I
simply put a div
> tag in
> my table, I don't know how to put an overflow on it. I
only have a limited
> amount of space for the text, and I have too much text
to simply put it in
> the
> table. It's my first time working on a centered layout,
so I'm kind of at
> a
> lost right now. And that's the only thing stopping me
from putting it
> online.
>
Similar Messages
-
OK so this is my first wbesite in dreamweaver so and i ran into a problem....i made a AP div tag but i can get it where i want it.....my backrground is center in the website and i put my nav links in a AP div tag so i could then put them in a certain area where i wanted.(i think is the only way i know hjow to do this) Well how can i get them centered left and right in the website but the top and bottom i want to place by hand???? they are where they need to be when i preview it in the browser but in the dreamweaver file they are down and to the right......i had to keep messing with it and previewin it until it showed up where i wanted it to in the browser. Im sure i have a setting worng either in my CSS or html.... Please help!
First rule of web design is to stop thinking like a graphic or print designer. Web pages need to be flexible to perform well on different devices, browsers, user settings, screen and text sizes. And web designers have almost no control over these user-centric variables.
The second rule of web design, you cannot precisely position text or other elements on top of big background image and expect it to stick. It just doesn't work.
http://alt-web.com/Backgrounds.shtml
If your navigation bar requires a background, it should be separate from the page background. You'll need to use solid colors or create image slices for your nav bar in your graphics editor.
Third rule, use default CSS positioning (which is no positioning at all). Align objects with CSS margins, padding and floats.
Basic CSS Layout. (No APDivs used, no animals were harmed)
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html
Also read this tutorial:
Taking a Fireworks (or Photoshop) comp to a CSS based layout in DW
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Good luck with your project!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
HTML or PHP visibility div tag problem in IE
Hi,
I have a PHP search function on a travel site a programmer
did for me. When you look at it in FF and Safari, it looks fine.
But in IE, there is a big blank space where the calendar function
goes. He has the div tag set to visibility:hidden. Any ideas how to
make it look right in IE as well?? Any help would be appreciated!
The PHP code is below:
He thinks the problem is here in this part of the code:
<div id="kalendar" style="visibility:hidden; width:0px;
height:0px; border:0;">
//then goes some tables
</div>
Any help would be much appreciated...we are stumped!
Thanks>
http://www.bluehippotravel.com/surfingvacations
404 on that link.
> Does this tell you anything?
Unfortunately, yes. The person who coded this has no sense of
best practice
in HTML authoring....
I'd like to see the page in the wild if I could - can you
investigate the
404, please?
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
==================
"Lvanhoff" <[email protected]> wrote in
message
news:[email protected]...
> Murray,
> As always you are a genius :-)
>
> The only problem I still have, and only in IE, not FF,
is that the drop
> down
> menus are cutting part of themselves off...any idea why?
>
http://www.bluehippotravel.com/surfingvacations
> Top left...see how the arrows are cut off on the drop
downs?
>
> Not sure if its ok to post to page??
>
> I didn't do this part of the page...so not sure how it
was done...
> Does this tell you anything?
>
> <table bgcolor="#f7ebb3" class="search"
style="table-layout: fixed;
> padding:0px" border="0">
> <tr><td colspan="4" width="auto">
> <select size="1" class="search" id="country"
> onchange="javascript:listajzemlje(this.value)">
> <?php
> drzave();
> ?>
> </select>
> </td></tr>
> <tr><td colspan="4" width="auto">
> <div id="state1">
> <input type="hidden" id="state" value="" >
> <input type="hidden" id="city" value="" >
>
> </div></td></tr>
> <tr>
>
>
> <td colspan="4" width="auto">
> <input class="search" id="hotel" name="hotel" value="
Hotel name
> (optional)" />
>
>
>
> <tr><td colspan="4" style="cursor:pointer;"
onClick="showKalendar()"
> class="search" >
>
> <img class="search"
src="images/btn-hotelmenu-searchbydate.jpg"
> alt="Search by
> date (optional) ">
> </td></tr>
> <tr><td colspan="4">
> <div id="kalendar" style="display:none; width:0px;
height:0px;
> border:0;layout:fixed">
>
> <table border="0" class="submenucolor" align="center"
width="auto">
>
> <tr>
> <td></td><td></td>
> <td class="HotelSearchMenu" colspan="2"
align="right">In:<?
> $aCalendarParams=array(
> "sIconPath" => "./img/calendar.png",
> "iAction" => 1, //0=>reloadCurrentPage with get
param sDate,
> 1=>fill
> field sFieldName
> "sFieldName" => "DPC_date1",
> "iStyle" => 1, //0=>display calendar,
1=>display div on icon
> click
> "aMonthNames" => $aMonthNames["EN"],
> "aDaysNames" => $aDaysNames["EN"],
> "sDateFormat" => $sDateFormat["EN"]
>
> );
> new oCalendarPicker("calFixe1",$sDate,$aCalendarParams);
> ?></td>
>
>
>
>
>
> </tr>
>
>
> Thanks!
> -
Hi,
we are using Div tag along wth applet. While loading we want to freeze the screen. so we set width and height for DIV tag. All textboxes and other thngs are going behind the DIV but not working for applets like Browser, Grid. Applets are coming over the DIV tag when freezing. We set the high Z index forApplet div and low for freezing DIV and also tried in reverse. But it is not working..
How to solve this problem?
Regards,
SenthilThe problem is that applets are not part of the DOM. This is why most commonly; iframes are used whenever you need to "dynamically" need to manipulate a MII applet. You may be better off using an XSLT style sheet transform or AJAX / Javascript framework so that you can more precisely control your grids.
Some people have tried using OBJECT tags instead of APPLET but I haven't heard of much success in this route. -
How do I center an image inside a div tag using fluid grid layout?
where do I find and what do i use the image properties position when using the fluid grid layout. I'd like to center the image in the mobile page versus th left position in the desktop.
This is what my css codes looks like where the image is in the div tag:
#logo_links {
clear: both;
float: left;
margin-left: 0;
width: 32.2033%;
display: block;
This is the html code where the image is:
</div>
<div id="logo_links">
<div align="center">
<p><img src="../fluidgrid/images/3_7x2logo.jpg" alt="" width="236" height="110" align="left"></p>
</div>
</div>
I'm going to need more detail where to insert the suggested code as I am a newby!
Thanks -
Hi there,
i am creating a website.i seem to be having a bit of trouble with div tag...i think.the navigation bar and the main content seem to be overlapping each other.any ideas?id appreciated any help.
thanks.
<body>
<div id="header">Heading</div>
<div id = "nav">
<ul id="Fyp">
<li><a href="html/Index.html">Home</a> </li>
<li><a href="html/Conventional.html">Conventional Encryption</a></li>
<li><a href="#">Public Key Encryption</a>
<ul>
<li><a href="html/PublicKey-Confidentiality.html">PublicKey-Confidentiality</a></li>
<li><a href="html/PublicKey-Authentication.html">PublicKey-Authentication</a></li>
<li><a href="html/Public Key-Confidentiality and Authentication.html">Public Key-Confidentiality and Authentication</a></li>
</ul>
</li>
<li><a href="#">MAC Encryption</a>
<ul>
<li><a href="#">MAC - Message Authentication</a></li>
<li><a href="#">Message Authentication and Confidentiality (Plaintext)</a></li>
<li><a href="#">Message Authentication and Confidentiality(Ciphertext)</a></li>
</ul>
</li>
<li><a href="#">HASH Encryption</a>
<ul>
<li><a href="#">Encryption after Concatenation</a></li>
<li><a href="#">Encryption before Concatenation</a></li>
<li><a href="#">Authentication</a></li>
<li><a href="#">Authentication and Confidentiality</a></li>
<li><a href="#">Secret Value</a></li>
<li><a href="#">Secret Value and Encryption</a></li>
</ul>
</li>
<li><a href="#">Self Test</a></li>
</ul>
</div>
<div id="main_content">
<p> </p>
<p>This is the home page for Message Authentication and Digital Signatures.This page will explain the funamental basis of these elements.</p>
<p> </p>
<p><strong>Authentication</strong>:</p>
<p><a name="#Authtentication"></a>
The Authentication service is concerned with assuring that a communication is authentic. Authentication acts as an warning or a alarm signal. The function of the authentication service is to assure the recipient that he message is from the source that it calms to be from.</p>
<p> </p>
<p><strong>Confidentiality</strong>:</p>
<p><a name = "Confidenitiality"></a>
Confidentiality is the protection of transmitted data from passive attacks. This makes sure that the message sent can not be read by anyboby except for the intended recipient .
</p>
<p> </p>
<p><strong>Public Key:</strong></p>
<p><a name = "Public Key"></a>
</p>
<p><strong>Digital Signature:</strong>
<p><a name = "Digital Signature"></a></p>
</p>
<p><strong>Integrity:</strong>
<p><a name = "Integrity"></a> </p>
<p><strong>MAC Function:</strong></p>
<p><a name = "MAC"></a> </p>
<p>A MAC (Message Authentication Code) is a small fixed size block of data that is appended to the message. The technique assumes hat two communicating parties say (Source A and B) share a common secret key(k). When A sends a message to B, it calculates the MAC as a function of the message and the key. The recipient performs the same calculation on the received message using the same key, to generate a new MAC. The received MAC and the calculated MAC are then compared. If the received MAC matches the calculated MAC, then the message is said to be authentic.</p>
</p>
</div>
<div id="footer">
<p>
Footer - all about the designer and contact links go here
</p>
</div>
</body>
</html>Here ya go.
body {
margin:0px;
padding:0px;
text-align:center;
font-size:1.0em;
font-family:trebuchet ms, tahoma, arial, sans-serif;
#container {
text-align:left;
margin:0px;
width:1270px;
border:1px black solid;
padding: 0px;
#header {
text-align:center;
width:1270px;
#width:1022px;
height:100px;
font-size:2.0em;
background-color:white;
color:white;
padding-top:0px;
padding-right:0px;
border-bottom:1px black solid;
#nav {
width:1270px;
#width:1270px;
height:24px;
font-size:0.8em;
background-color:#20548E;
color:black;
border-bottom:1px black solid;
#main_content {
width:1270px;
#width:1022px;
font-size:0.9em;
background-color:white;
color:black;
border-bottom:1px black solid;
#footer {
text-align:center;
width:1270px;
#width:1022px;
height:100px;
font-size:1.0em;
background-color:#20548E;
color:white;
border-bottom:1px black solid;
#Fyp
{ margin: 0;
padding: 0;
#Fyp li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial;
#Fyp li a
{ display: block;
background: #20548E;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 140px;
color: #EAFFED;
white-space: nowrap;
#Fyp li a:hover
{ background: #1A4473;
#Fyp li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
#Fyp li ul li
{ float: none;
display: inline;
#Fyp li ul li a
{ width: auto;
background: #9F1B1B;
#Fyp li ul li a:hover
{ background: #7F1616; -
Hello dreamweavers.
Ive place four divs one next to another till here it seems fine. then I add another Div by the name of article and its causing me
an issue. It seems fine in the DW work area, but when I see it on the internet it has a huge gap which is cause by the height of the div I think.
so please take a look at my exampels and code:
seems fine in DW
<style type="text/css">
#one {
background-color: rgb(0,204,255);
width: 200px;
height: 200px;
float: left;
margin-left: 45px;
#container {
background-color: rgb(153,204,102);
width: 1024px;
height: 768px;
margin-right: auto;
margin-left: auto;
#article {
background-color: rgb(153,51,153);
height: 200px;
margin-top: 230px;
width: 938px;
margin-left: 43px;
float: none;
#two {
background-color: rgb(153,255,204);
width: 200px;
height: 200px;
float: left;
margin-left: 45px;
#three {
background-color: rgb(255,255,204);
width: 200px;
height: 200px;
float: left;
margin-left: 45px;
#four {
background-color: rgb(204,153,204);
width: 200px;
height: 200px;
float: left;
margin-left: 45px;
</style>
</head>
<body>
<div id="container">
<div id="one">Content for id "header" Goes here</div>
<div id="two">Content for id "two" Goes </div>
<div id="three">Content for id "three" Goes Here</div>
<div id="four">Content for id "four" Goes Here</div>
<div id="article">Content for id "article" Goes Here</div>
</div>
</body>
</html>Do it this way
<!doctype html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#one {
background-color: rgb(0,204,255);
width: 200px;
height: 200px;
float: left;
margin-left: 45px;
#container {
background-color: rgb(153,204,102);
width: 1024px;
height: 768px;
margin-right: auto;
margin-left: auto;
#two {
background-color: rgb(153,255,204);
width: 200px;
height: 200px;
float: left;
margin-left: 45px;
#three {
background-color: rgb(255,255,204);
width: 200px;
height: 200px;
float: left;
margin-left: 45px;
#four {
background-color: rgb(204,153,204);
width: 200px;
height: 200px;
float: left;
margin-left: 45px;
#article {
background-color: rgb(153,51,153);
height: 200px;
width: 938px;
margin-left: 43px;
margin-top: 20px;
float: none;
.clear{
clear:both;
</style>
</head>
<body>
<div id="container">
<div id="one">Content for id "header" Goes here</div>
<div id="two">Content for id "two" Goes </div>
<div id="three">Content for id "three" Goes Here</div>
<div id="four">Content for id "four" Goes Here</div>
<div class="clear"></div>
<div id="article">Content for id "article" Goes Here</div>
</div>
</body>
</html> -
Why I am not able to see Fluid Grid Layout Div tag
Why I am not seeing Fluid Grid Layout Div tag In the Insert Layout menu
DW CC changed the panels. If you're working in FGLayouts, DW intuitively inserts the correct Div for you.
Nancy O. -
Hello,
What is the diffrence between Insert Div Tag, Insert Fluid Grid Layout Div Tag and Draw AP Div?
How to use all these three?
Where to use all these three?
What will be the effect in the design with these three?Learn CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Default positioning (static or unspecified) is all you need for 98% of layouts.
"Drawing boxes" in DW is not a good way to work either. DW is not a graphics editor like Photoshop. It's a web authoring tool.
When you draw & move APDivs on your workspace, you remove content from the normal document flow and position them relative to the top, left corner of browser window or the nearest relatively positioned parent container.
When you preview the page in browsers, everything falls apart. APDivs are not a good layout approach. Here's more on why:
http://www.apptools.com/examples/pagelayout101.php
Nancy O. -
Hello Dreamweavers.
Ive made a div tag and Ive centered it in the middle of my page. But on the top there is a gap.
Ive seen some articles where it says to add:
margin: 0;
padding: 0;
Im doing so, but im still getting that gap on the top.
this is my CSS
#box1 {
background-color: #00F;
height: 200px;
width: 600px;
padding: 0px;
margin: auto;
I have margin to Auto in order to center the box, is this correct?, there for I add the 0 padding in order to get rid of the gap.You could try adding the following to the top of the CSS
margin: 0;
padding: 0;
or better still, add a normalise script as in
/*! normalize.css v1.1.1 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
audio:not([controls]) {
display: none;
height: 0;
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
[hidden] {
display: none;
/* ==========================================================================
Base
========================================================================== */
* 1. Prevent system color scheme's background color being used in Firefox, IE,
* and Opera.
* 2. Prevent system color scheme's text color being used in Firefox, IE, and
* Opera.
* 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 4. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
html {
background: #fff; /* 1 */
color: #000; /* 2 */
font-size: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 4 */
-ms-text-size-adjust: 100%; /* 4 */
* Address `font-family` inconsistency between `textarea` and other form
* elements.
html,
button,
input,
select,
textarea {
font-family: sans-serif;
* Address margins handled incorrectly in IE 6/7.
body {
margin: 0;
/* ==========================================================================
Links
========================================================================== */
* Address `outline` inconsistency between Chrome and other browsers.
a:focus {
outline: thin dotted;
* Improve readability when focused and also mouse hovered in all browsers.
a:active,
a:hover {
outline: 0;
/* ==========================================================================
Typography
========================================================================== */
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
h1 {
font-size: 2em;
margin: 0.67em 0;
h2 {
font-size: 1.5em;
margin: 0.83em 0;
h3 {
font-size: 1.17em;
margin: 1em 0;
h4 {
font-size: 1em;
margin: 1.33em 0;
h5 {
font-size: 0.83em;
margin: 1.67em 0;
h6 {
font-size: 0.67em;
margin: 2.33em 0;
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
abbr[title] {
border-bottom: 1px dotted;
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
b,
strong {
font-weight: bold;
blockquote {
margin: 1em 40px;
* Address styling not present in Safari 5 and Chrome.
dfn {
font-style: italic;
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
* Address styling not present in IE 6/7/8/9.
mark {
background: #ff0;
color: #000;
* Address margins set differently in IE 6/7.
p,
pre {
margin: 1em 0;
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
* Improve readability of pre-formatted text in all browsers.
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
* Address CSS quotes not supported in IE 6/7.
q {
quotes: none;
* Address `quotes` property not supported in Safari 4.
q:before,
q:after {
content: '';
content: none;
* Address inconsistent and variable font size in all browsers.
small {
font-size: 80%;
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
sup {
top: -0.5em;
sub {
bottom: -0.25em;
/* ==========================================================================
Lists
========================================================================== */
* Address margins set differently in IE 6/7.
dl,
menu,
ol,
ul {
margin: 1em 0;
dd {
margin: 0 0 0 40px;
* Address paddings set differently in IE 6/7.
menu,
ol,
ul {
padding: 0 0 0 40px;
* Correct list images handled incorrectly in IE 7.
nav ul,
nav ol {
list-style: none;
list-style-image: none;
/* ==========================================================================
Embedded content
========================================================================== */
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
* Correct overflow displayed oddly in IE 9.
svg:not(:root) {
overflow: hidden;
/* ==========================================================================
Figures
========================================================================== */
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
figure {
margin: 0;
/* ==========================================================================
Forms
========================================================================== */
* Correct margin displayed oddly in IE 6/7.
form {
margin: 0;
* Define consistent border, margin, and padding.
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improve appearance and consistency in all browsers.
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
button,
input {
line-height: normal;
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
button,
select {
text-transform: none;
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
* Re-set default cursor for disabled elements.
button[disabled],
html input[disabled] {
cursor: default;
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
* Remove inner padding and border in Firefox 3+.
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
/* ==========================================================================
Tables
========================================================================== */
* Remove most spacing between table cells.
table {
border-collapse: collapse;
border-spacing: 0; -
Hi,
I'm building a website from a photoshop design and I have a
problem with the layout I can't see how to fix:
I have a header and a footer which both need to stay centered
and expand to whatever the browser window width is set to.
Between them I have a div of the main content of the pages
which also needs to be centered.
All seems very simple. I would normally just have a big div
around the whole page with an align="center". Job done.
But the problem is the space to the left of the content div
needs to be grey and the space on the right needs to be black.
Therefore I assume I'm going to need 3 divs. 2 for the left and
right spaces and another with the main content between them.
Both the side divs will need to expand somehow to fill the
space while keeping the fixed width content div centered. But I
think they will also have to be floated to sit side by side.
I cant seem to get the divs to stay in the correct places or
keep the side ones filling the space between the content div and
the edges of the browser.
Can anyone help?
Thanks,
OlliebearIs this what you au trying to do?
http://starttoweb.com/
If so, you are welcome to grab the CSS file and mostly to fit
your needs.
Cheryl D Wise
Adobe Community Expert
http://starttoweb.com
"Olliebare" <[email protected]> wrote in
message
news:fpn0q2$p1v$[email protected]..
> Hi,
>
> I'm building a website from a photoshop design and I
have a problem with
> the
> layout I can't see how to fix:
>
> I have a header and a footer which both need to stay
centered and expand
> to
> whatever the browser window width is set to.
>
> Between them I have a div of the main content of the
pages which also
> needs to
> be centered.
>
> All seems very simple. I would normally just have a big
div around the
> whole
> page with an align="center". Job done.
> But the problem is the space to the left of the content
div needs to be
> grey
> and the space on the right needs to be black. Therefore
I assume I'm going
> to
> need 3 divs. 2 for the left and right spaces and another
with the main
> content
> between them.
>
> Both the side divs will need to expand somehow to fill
the space while
> keeping
> the fixed width content div centered. But I think they
will also have to
> be
> floated to sit side by side.
>
> I cant seem to get the divs to stay in the correct
places or keep the side
> ones filling the space between the content div and the
edges of the
> browser.
>
> Can anyone help?
>
> Thanks,
>
> Olliebear
> -
Hi,
am having trouble / don't have a clue how to centre a div tag
to the center of the page? Can someone point me where am going
wrong. Here is the html code:
thanks in advance
hammer.>>I think you'll find significant disagreement here
about the following
Yes, here, I definitely will find significant disagreement.
But I'm very
much of the opinion that publishing to the web is for the
masses, not just
for you folk with the time, motivation, and expereince to
deal with the
range of issues relating to css layout. The simplicity of
tables far
outweighs the gains of css layout at this point in time.
>>There is nothing worse than a morass of nested tables
spanned to death,
>>not
only for you as the maintainer of the site, but also for the
browsers, some
of which simply cannot render such pages. CSS layouts do not
have these
problems.
Here you are wrong. I would actually revese that whole point.
It is css
layout that are notorious fo rbrowsers laying out or not
rendering properly.
Tables never came close to having such issues. Even nested
tables, one level
deep, are perfectly fine.
>>some
of which simply cannot render such pages. CSS layouts do not
have these
problems.
Politely, where the heck have you been living these last few
years!!
>>Future maintainence, bandwidth usage, and simplicity
of layout are big
benefits of using CSS as opposed to tables.
simplicity of layout??? Again, I think you are missing the
argument here.
Its almost a given that tables are simpler to use for layout.
Almost all
books on teh topic agree, but point out the long term benefit
of css layout
despite the added complexity. So please don't use the
'simplcity' as an
argument here. CSS layout is the most intimidating and hard
to fathom thing
for most beginners, not just the new syntax but all the
nonsensical
(seeming) twists and turns that must be taken to get it to
work properly -
not to mention they are buggy as hell. Tables? They don't
come close to
being as nasty as CSS layout as it is today.
>>Everyone here (I think) agrees that if tables work
better for you, then use them. BUT use them correctly if you
are going to
do that. It's pretty simple, really....
Agreed. I personally use tables for average sized websites
which have to be
edited/maintained by general staff - you can teach tables oto
people inside
of amorning to a day. You'd need weeks to months to teach
enough CSS layout
to a layman and even then he'd think it sucks. I will be
using css for
layout about two browser versions from now.
I don't see the sense on jumping on a technology that, at
every second turn
you get, go here for this hack, do this to get around that
problem, IE
cannot do this so use this javascript fix, oh it doesn't work
while looking
at in dreanweaver but it will work in the browser, blah blah
blah...its
enough to put someone off web design for life.
I came to the web initially becuase I was amazed at how much
I could do with
so little knowledge - it was awseome. I think this should
still happen to
people today - it's quite empowering. I think the reality is
a lot more folk
get disheartned, confused and simply don't run with it. We
scare the crap
out them with css layout.
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
>I think you'll find significant disagreement here about
the following -
>
> * CSS for layout is simply not there yet
> * Its only the accesibility issue which tables lose
points for
> * Possibly, the only benefit of css layout is that it
can be centrally
> goverened through a linked style sheet, but even this
can be done with DW
> templates and tables
>
> CSS for layout is certainly "there". Perhaps it's not
there for you, but
> it surely is for others.
>
> There is nothing worse than a morass of nested tables
spanned to death,
> not only for you as the maintainer of the site, but also
for the browsers,
> some of which simply cannot render such pages. CSS
layouts do not have
> these problems.
>
> Future maintainence, bandwidth usage, and simplicity of
layout are big
> benefits of using CSS as opposed to tables.
>
> But let's not make this a holy war. Nobody here is
saying that you have
> to replace tables with CSS. Everyone here (I think)
agrees that if tables
> work better for you, then use them. BUT use them
correctly if you are
> going to do that. It's pretty simple, really....
>
> --
> 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
> ==================
>
>
> "Arrdvark" <[email protected]> wrote in
message
> news:[email protected]...
>> tables are much simpler, translate well to knowledge
people have from
>> other tools (ie; ms word) and can do layout quite
well. CSS for layout is
>> simply not there yet - it feels like one great big
hack and is difficult
>> for people to learn, especially causal web designers
who just dont have
>> the time to amass all teh knowledge and expereince
needed just to get a
>> simple css layout working in both major browsers.
One of the things that
>> made the web so big was how simple it was to publish
to - CSS layout is a
>> step backward in this regard.
>>
>> tables are still fine for most sites, a perfectly
valid choice. Its only
>> the accesibility issue which tables lose points for.
Possibly, the only
>> benefit of css layout is that it can be centrally
goverened through a
>> linked style sheet, but even this can be done with
DW templates and
>> tables, or dynamic pages and tables (ie: asp.net
master pages).
>>
>> I am 50 / 50 these days as to wether css layout is
worth the hassle for
>> the average website being bult by the avergae
person.
>>
>>
>>
>>
>> "FreakyJesus" <[email protected]>
wrote in message
>> news:[email protected]...
>>> Very well said, Thierry
>>> And Arrdvark, I hear you on this:
>>> "it almost always causes total confusion as to
"why" this is the case
>>> and puts
>>> people right off CSS altogther."
>>> I am showing a friend how to use CSS (blind
leading the blind) and on a
>>> regular basis she's like "wouldn't this be
easier with tables within
>>> tables."
>>> Css CAN be very confusing.
>>>
>>> Andy
>>>
>>>
>>>
>>>
>>>
quote:
Originally posted by:
Newsgroup User
>>> Al wrote:
>>> > On Fri, 01 Dec 2006 09:39:18 -0500, Murray
*ACE*
>>> > <[email protected]>
wrote:
>>>
>>> >> Not only something different, but an
inferior choice at that!
>>>
>>> > I guess it can sometimes be difficult for
an inexperienced user to
>>> > assess and evaluate multiple solutions. If
there are downsides to
>>> > public forums, that would be at least one
of them. It's hard enough
>>> > for newbies to assess a single solution,
but wading through a
>>> > sub-discussion between third-parties
micro-analyzing their personal
>>> > favorite solutions can be untenable.
>>>
>>> I agree, but I can also understand that it can
be frustrating for people
>>> (people in general) who try to help to see that
the OP (OPs in general)
>>> didn't even try a solution that didn't require
too much effort.
>>> IMHO, there was not much for the OP to go
through here since *early* in
>>> this
>>> thread, the OP had everything to make it work.
>>> First post FreakyJesus said to set up the
left/right margin of the DIV
>>> to
>>> "auto" and second post Murray gives a very
explicit "fix" for IE5:
>>> body { text-align:center; }
>>> #graybox { text-align:left; }
>>> Actually, just trying margin auto could have
been enough for the OP.
>>> Sometimes it is important to know "some"
Javascript, HTML or else to be
>>> able
>>> to implement (not necessary understand) a
solution, but here it was not
>>> the
>>> case.
>>>
>>> Nothing against the OP here, and nothing to get
excited either ;-)
>>> This is just a general statement about the other
side of the coin.
>>>
>>> > Note to self: Recite Serenity Prayer before
posting here in the
>>> > future.
>>>
>>> Let's hope that works :)
>>>
>>> --
>>> Thierry
>>> Articles and Tutorials:
http://www.TJKDesign.com/go/?0
>>> The perfect FAQ page:
http://www.TJKDesign.com/go/?9
>>> CSS-P Templates:
http://www.TJKDesign.com/go/?1
>>> CSS Tab Menu:
http://www.TJKDesign.com/go/?3
>>>
>>>
>>>
>>>
>>>
>>>
>>
>>
>
> -
Insert Fluid grid layout div tag pastes CSS
I am trying to create a new fluid grid layout. I am able to insert 2 new layout divs, but after that, the "Insert Fluid grid layout div tag" fails. I am in "split" display, and the code view shows CSS instead of the HTML, and the design view shows a page of CSS code.
Control-Z always backs me up to the proper display of code and design, but the CSS file does not contain the definitions for the newly-inserted DIV.
Before insert:
After insert:Yes. I created a new site, named as you see, for the files created as I learn the new features in CS6.
The problem I am seeing is 100% reproducable. The 1st 2 layout divs are inserted correctly, then all after that fail. After the 2nd screen shot above, a single ^Z will restore the code & display panes. I have learned that I can quickly switch into editing the CSS file, paste in the definitions for the new div (a pain, but do-able), then I can do all of the other editing, resizing, etc.
One thing I have not tried, but will, is to remove my custom key-mapping and try this in a standard workspace. -
Hi I am currently working on a website for a school assignment and I have almost gotten my site done, however when I preview it ic the browser and then I maximize the the webpage moves but the ap div tags I have dont move with the rest of the page. Is there something that I can do about this? Any help would be greatly appreciated
Thanks TanyaNo. You're much better off using default CSS positioning which is none or static along with margins, padding and floats to align page elements. Tables are strictly for tabular data (spreadsheets, data sets).
If you're short on time, open one of the starter pages that comes with Dreamweaver.
File > New > Blank > HTML > Layout... 1 or 2-col, fixed, centered... This will serve as a framework you can drop your content and images into.
Good luck,
Nancy O. -
Nested div tags "Design View" problem
I have had ongoing problems using nested div tags to layout
my page. The page displays correct in browser but does not display
properly in Dreamweaver Design View. Highlighting the CSS id in
Code View shows the correct groupings. The code also passed the
validator test.
I am fairly new at Dreamweaver so I could be missing
something basic.
Code is displayed at
http://www.mektronix-net.campusbizcenter.com/I've not see this before, so can't say why it would be happening. Would the pc be low on resources? but then again you say it happened even after a restart of the pc.
Maybe you could try the file cache and the personal configuration folder fix to see if it fixes any issues.
http://forums.adobe.com/thread/417116#cache
PS: While I'm at it, it would be wrong for me to point out that using AP divs is not the optimum way to create a layout.... unless you know the repercussions of using them.
Here's why: (from the Dreamweaver FAQ)
http://forums.adobe.com/thread/477969
Maybe you are looking for
-
Adding a single line to a multicolumn listbox?
Hi Community, I have a multicolumn listbox which tens of thousands of lines where each line is color coded and represent a cycle with a pass/fail status. The only way I have found to add lines to a multicolumn listbox is to read its ItemNames propert
-
OK, folks, I need some help here... And I have researched on this prior to this post, but I still don't get it. I have a simple application in Reminder.java file. When I compile it, I get Reminder.class and Reminder$ReminderThread.class, because I ha
-
Advice on inserting facebook like module into webpage
Hi, I am trying to add a "facebook like" module into the homepage of my test website (link attached). I have gone into the develop part of my admin console and copied both sections of the code from the facebook developer page following the gudiance f
-
Late 2013 retina MacBook Pro constantly restarting when in sleep mode
So I just got my brand new specced out retina MacBook Pro in the mail last night. I began setting it up but didn't finish before I had to go to bed. I left it with the screen closed (and assumed it would go into sleep mode soon after), an external ha
-
I connected my Canon printer to time capsule, and can print OK. However, I can't get the printer scanner to work. How do you set up the scanner with Time Capsule?