Fixed, fluid or Elastic css layout - which is best?

Similar Questions

• Strange spaces that appear when viewing DWCS3 CSS Layouts

  I am using CSS Layouts in Dreamweaver (2 fixed columns, left sidebar, header and footer) to build a site from scratch. Everything looks fine in Dreamweaver, but as soon as it is presented as a preview in a browser, a space appears between the header Div and sidebar1″ Div.

  I have attached an image showing the problem or if you prefer to see here: http://www.primeprint.co.uk/screen-grab.jpg

  I put the padding and margins to 0 in the two Div and used a < UL) and CSS for style and with a substitution effect.

  I have speant 2 days banging my head against a wall and all suggest would be most appreciated.

  Thank you

  Adam.

  You have a few IE conditional comments, which seem to be the cause. Remove the line 87 new.html

  .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
  

  --
  Mark A. Boyd
  Keep-on-Learnine :-)

  Post edited by: Mark A. Boyd

• Problem with layout to a CSS Layout image

  I'm not able to get the photo in image to make my point.  I want it in the sidebar after the naviation menu.

  However, it moves to the right and against which it is inserted.

  I work a liquid two-column CSS layout header footer.

  The linke is http://www.klbattorney.com    

  Murray * CPA * has written:

  If you made the block: image display, you wouldn't even have to do.

  I recreated the page and the link is here:

  http://www.mytechnet.TalkTalk.NET/image_position01.htm>

  OK, it shows in FF 8.0.1 but not in IE8.  Something with his scripts, he used to create the simple Menu system that could be easily done with pure CSS.

  Time to catch up with little sleep; Tomorrow another important day!

  Good night.

• Remove comments in CSS layouts CSS

  According to Stephanie Rawls article on what's new in Dreamweaver CS5 CSS layouts it mentions David Powers free extension: stored query to remove CSS comments.  How can I find and download this extension?

  http://foundationphp.com/tools/css_comments.php

  "I loves me some Google..."

• Misunderstand CSS Layout and padding

  Hello

  I'm having serious problems of understanding the CSS layout techniques and the impact of padding and hoped I could get help.

  Here are some pages that show examples of what I do "get". The first offer padding causing the layout to look right. The second has no filling but don't have as I expect. In addition, the amount of text affects the div "down" as well. I'm an old hand at HTML and could make this layout in my sleep by using tables. CSS is different and frustrating.

  
  http://www.libertywebmarketing.com/test/1.html

  http://www.libertywebmarketing.com/test/2.html

  Thank you.

  Fitz21

  Fitz21 wrote:

  I guess what I'm asking is, "How YOU would design this using CSS?"
  http://www.libertywebmarketing.com/test/3.html

  Fitz21

  With CSS rounded corners, the floats and margins:

  http://ALT-Web.com/demos/CSS-rounded-corners.shtml

  http://ALT-Web.com/demos/CSS2-captions-on-floated-images.shtml

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  http://ALT-Web.com/
  http://Twitter.com/ALTWEB
  http://ALT-Web.blogspot.com

• CSS layout issue

  Hi there and that if a long time for your help. I'm sure the answers are easy.

  My questions are all on this page:

  http://www.energywa.co.za/CSS-layout.php

  I am busy redesigning our web site and have forgotten a lot of CSS stuff, I used ± 3 years.

  1. so that this provision to work, I had first put in the column on the right handed and after the main content. It shows why not in order?

  2. How can I make sure that the columns on the right do not spread in my footer if the text is longer than the main content?

  Any suggestions in a different way is welcome, please.

  Kind regards

  Deon

  (1) you can have it left then right, what you just float to the left to the left and the right to the right.

  / * copied from firefox firebug * /.

  {.oneColFixCtrHdr #mainContent
  -moz-background-clip: border;

  -moz-background-inline-policy: continuous;

  -moz-background-origin: padding;

  background: #FFFFFF no-repeat scroll 0 0;

  float: left;

  padding: 0 20px;

  Width: 780px;
  }
  then you can have the content in the correct order.

  -After you do this, you will get the footer color behind your right sidebar that brings us to question 2

  (2) add clear: both for footer styles

  .oneColFixCtrHdr #footer {}
  background-color: #FF0000;

  Clear: both;

  padding: 0 10px;
  }

• Another CSS layout issue

  Hello!

  I finally left drop tables and I now have my first focused on the div css layout. Sometimes I feel totally lost as in this example. I can not get the subtitle of the page ("Etusivu") down from the top of the div that is. I tried different types of fillings and margins, but Firefox or IE always live it to the top, even though I operate in the other browser. If anyone can take a look, I appreciate it a lot!

  Here's my markup:

  < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
  " < html xmlns =" http://www.w3.org/1999/xhtml ">
  < head >
  < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
  < title > Untitled Document < /title >
  < link href = "styles.css" rel = "stylesheet" type = "text/css" / > "
  < script type = "text/javascript" >
  <!--
  function MM_swapImgRestore() //v3.0 {}
  var i, x = offline. MM_sr; for (i = 0; a & & I <.) 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 is d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i <.) 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]) & & copyrights) 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 >
  < style type = "text/css" >
  <!--
  {.otsikko}
  do-family: 'Courier New', Courier, monospace;
  do-size: 18px;
  color: #FFFFFF;
  make-weight: bold;
  text-align: center;
  }
  .leipateksti {do-family: 'Courier New', Courier, monospace}
  . Style1 {do-family: 'Courier New', Courier, monospace; color: #FFFFFF ;}}
  ->
  < / style >
  < / head >

  < body = onload "MM_preloadImages (" images/doktor_streetwear_otsikko_ro.gif','images/etusivu_ro.gif ',' images/tuotteet_ro.gif','images/tietoa_ro.gif','images/ehdot_ro.gif','images/palaute_ro.gif','images/linkit_ro.gif'")" >
  < div id = "wrapperi" >

  < div id = "logo" > < img src = "images/kannulogo.jpg" alt = "logo" / > < / div > "
  
  < div id = "otsikko" > < a href = "index.htm" MM_swapImgRestore"onmouseover =" MM_swapImage ('otsikko', ", ' images/doktor_streetwear_otsikko_ro.gif', 1)" > < img src = images/doktorwear_otsikko.jpg"" alt = "otsikko" name = "otsikko' width = '487' height ="87"border ="0"id ="otsikko2"/ > < /a > < / div >

  
  < div id = "kielet" >
  < div id = "kielet_pusher" > < / div >
  < div class = "kieli" > SUOMEKSI < / div >
  < div class = "kieli" > English < / div >
  < / div >

  "" < div id = 'navi' > < a href = "index.htm" MM_swapImgRestore"onmouseover =" MM_swapImage ('etusivu', ", ' images/etusivu_ro.gif', 1)" > < img src = "images/etusivu.jpg" alt = "etusivu" name = "etusivu" width = "130" height = "56" border = "0" id = "etusivu" / > < /a > < a href = "tuotteet.htm" MM_swapImgRestore"onmouseover =" MM_swapImage ('tuotteet', ", ' images/tuotteet_ro.gif', 1)" > < img src = "images/tuotteet.jpg" alt = "tuotteet" name = "tuotteet" width = "130" height = "55" border = "0" id = "tuotteet" / > < /a >
  "< a href ="tietoa.htm"MM_swapImgRestore" onmouseover ="MM_swapImage ('tietoa'", ' images/tietoa_ro.gif', 1) "> < img src =" images/tietoa.jpg "alt ="tietoa"name ="tietoa"width ="130"height ="55"border ="0"id ="tietoa"/ > < /a >
  "< a href ="ehdot.htm"MM_swapImgRestore" onmouseover ="MM_swapImage ('ehdot'", ' images/ehdot_ro.gif', 1) "> < img src =" images/ehdot.jpg "alt ="ehdot"name ="ehdot"width ="130"height ="55"border ="0"id ="the ehdot"/ > < /a >
  "< a href ="palaute.htm"MM_swapImgRestore" onmouseover ="MM_swapImage ('palaute'", ' images/palaute_ro.gif', 1) "> < img src =" images/palaute.jpg "alt ="palaute"name ="palaute"width ="130"height ="55"border ="0"id ="palaute"/ > < /a >
  "< a href ="linkit.htm"MM_swapImgRestore" onmouseover ="MM_swapImage (" linkit "," ' images/linkit_ro.gif', 1) "> < img src =" images/linkit.jpg "alt ="linkit"name = 'linkit" width = "130" height = "55" border = "0" id = "linkit" / > < /a > < / div >

  < div id = "vasen_palkki" > content ID "vasen_palkki" goes here < / div >
  
  < div id = "main_content" >

  
  < div class = "otsikko" id = "tekstiotsikko" > ETUSIVU < / div >
  
  < div class = "style1" id = "iso_alue" > Lorem ipsum dolor sit amet, adipiscing elit computer. Vivamus nec risus at posuere lorem pellentesque. Sed a lorem tellus. Nullam justo mauris, sed ultrices interdum in, EU egestas leo. DUIs, elementum interdum gravida. Curabitur had rutrum nibh. Maecenas turpis ac leo molestie nec tristique pellentesque felis mattis. Etiam placerat tortor, dignissim ac laoreet magna AC Mauris sold vestibule pellentesque tempor. Proin had city ipsum. SED tincidunt nibh sed ipsum pulvinar sold. CRAs egestas mi imperdiet Suspendisse tempus tortor eget vehicula restore, diam massa odio, vel risus nulla vitae mauris dictum lobortis. Praesent pharetra, erat tellus had fermentum vitae, sodales EU sapien. Aenean odio lectus, egestas ID, auctor nisl at mattis. Donec viverra pharetra auctor. Surpassing lectus ullamcorper, neque a ultricies a, auctor at mauris. Proin orci risus cursus non tellus lobortis dignissim quis semper. In hac habitasse platea hac. < / div >

  
  < / div >

  
  

  < / div >

  < / body >
  < / html >

  And here is the style sheet:

  @charset "utf-8";
  {body
  background-color: #330000;
  }
  {#wrapperi}
  margin: auto;
  padding: 0px;
  Width: 800px;
  }
  #logo {}
  float: left;
  border: 1px solid #800000;
  }
  {#otsikko}
  float: left;
  border: 1px solid #800000;
  }
  {#kielet}
  float: right;
  border: 1px solid #800000;
  height: 87px;
  Width: 130px;
  }

  {.kieli}
  do-family: 'Courier New', Courier, monospace;
  do-size: 18px;
  color: #FFFFFF;
  make-weight: bold;
  border-top-width: 1px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-bottom-color: #800000;
  border-right-color: #800000;
  border-bottom-color: #800000;
  border-left-color: #800000;
  padding: 5px;
  }
  {#kielet_pusher}
  height: 25px;
  }
  {#navi}
  border: 0px none #800000;
  float: left;
  Width: 130px;
  }

  #navi img {}
  padding-top: 4px;
  border-top-width: 0px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-bottom-color: #800000;
  border-right-color: #800000;
  border-bottom-color: #800000;
  border-left-color: #800000;
  padding-bottom: 4px;
  }
  {#main_content}
  }
  {#otsikko}
  }
  {#tekstiotsikko}
  top of the margin: 30px;
  margin-bottom: 30px;
  }
  {#iso_alue}
  do-size: 14px;
  text-align: left;
  margin left: 160px;
  right margin: 200px;
  }
  {#vasen_palkki}
  float: right;
  height: 400px;
  Width: 130px;
  border: 1px solid #800000;
  }
  {#main_content}
  }

  Hello

  First change this line-

  ETUSIVU
  TO

  ETUSIVU

  Then add this rule - css

  #tekstiotsikko h2 {}

  padding-top: 2em;

  }

  Replace the 2em everything you need.

  PZ

• If the CSS layout Position is absolute and its content has been tested with the largest font in the browser with no. overlapping, then safe to USE?

  I found that if I used POTIONING RELATIVE to the CSS layouts and pasted my content in them, each of the displaced patterns.  So with the RELATIVE POSITIONING, I have re-aline formatting CSS with each new pasted content.

  In making the CSS absolute Position and tesing with the largest font in the browser, I did NOT meet the problem of duplication of text between two layout close to each other.

  Can there be additional problems with the help of absolute Positions?  Its looks to its worth the risk.

  see you soon

  If the page is good enough for you with the smallest size text as well as the largest text size, go for absolute positioning. It is certainly easier to place the divs with absolute positioning. The biggest problem with the AP div tags is the text problem you mentioned. I would like text in a few different browsers to make sure it looks ok to you.

• CSS layouts

  If someone could help. I try to remove the extra space (or margin) that exists when you use pre-made DW CSS layouts. I changed the background color for the header, footer and of content area and there is white space between each div and I can not for the life of get rid me of it. Any help would be greatly appreciated.

  We would need to see your page code / answer. Please post a link to the
  downloaded the page and tell us where to look to see the extra space.

  --
  Murray - ICQ 71997575
  Adobe Community Expert
  (If you * MUST * write me, don't don't LAUGH when you do!)
  ==================
  http://www.projectseven.com/go - DW FAQs, tutorials & resources
  http://www.dwfaq.com - DW FAQs, tutorials & resources
  ==================

  "jmasco" wrote in message
  News:gpa7g2$ICP$1@forums. Macromedia.com...
  > Could help them. I am trying to remove the extra spacing (or margin) that
  > closes when you use pre-made DW CSS layouts. I have change the
  > color
  > for the area header, footer and content and there is white space
  > between
  > each div and I can not for the life of me get rid of it. All assistance
  > would be
  > appreciated.
  >

• DIFFERENCE BETWEEN SONY SOUND &amp; SOUND of PHILIPS. WHICH IS BEST.

  DIFFERENCE BETWEEN SONY SOUND & PHILIPS SOUND. WHICH IS BEST.

  Hello benu_krupajal,

  Unfortuantely this issue is a matter of personal preference, however, given Sony legendary audio engineer and industry leading the line ES AV receiver that are designed to meet the needs of even the most critical audiophile. It is safe to say that Sony is clearly the winner when it comes to audio quality and create the best possible listening.

• Another quick question of CSS layout - vertical align: middle

  Just another quick on the use of CSS to the content of the page within the section of the page layout.

  On the homepage below, I have some images with text next to them:

  http://www.Haiji.jp/

  Because of the uneven text, it would be better if the text on the right and left of the four images vertically flown in space.

  (Basically like this old version of the table according to: http://www.haiji.jp/indexcopy.php )

  I don't know vertical-align: middle; doesn't really work for this, but could not get the right way to work.

  I tried variations to have an external container positioned a parent and an absolutely positioned inner container and using top: 50%;

  So for the first row for example CSS is:

  #outerWrapper #contentWrapper #content #row_one {}

  Width: 620px;

  overflow: hidden;

  }

  #outerWrapper #contentWrapper #content #row_one #row_one_left {}

  Width: 210px;

  padding: 0px;

  float: left;

  margin: 0 0 0 0; / * Sets the properties of margin for an element using the shorthand notation (up, right, down, left) * /.

  }

  #outerWrapper #contentWrapper #content #row_one #row_one_right {}

  Width: 410px;

  padding: 0px;

  float: right;

  text-align: left;

  margin: 0 0 0 0; / * Sets the properties of margin for an element using the shorthand notation (up, right, down, left) * /.

  position: relative;

  }

  #outerWrapper #contentWrapper #content #row_one #row_one_right #row_one_right_content {}

  position: absolute;

  top: 50%;

  }

  Who is not doing and maybe overloading the question.

  But if anyone can let me know how to get this vertically positioned text which would be a good thing.

  Thanks again.

  Support IE7 you need to "hack" a little: adjust the "padding-top" according to the number of lines of text, it is a. (not a good solution as supposition is working but IE7 IS a marginal browser now)

  Then add

  the text (see below)

  http://ALT-Web.com/images/alt-Web-logo.gif"/ >

  Vestibule ipsum ipsum, ac malesuada pretium vel gravida malesuada, tortor. Vestibule ipsum ipsum, ac malesuada pretium vel gravida malesuada, tortor.

  http://ALT-Web.com/images/alt-Web-logo.gif"/ >

  Vestibule ipsum ipsum, ac malesuada pretium vel gravida malesuada, tortor. Vestibule ipsum ipsum, ac malesuada pretium vel gravida malesuada, tortor.

  http://ALT-Web.com/images/alt-Web-logo.gif"/ >

  Vestibule ipsum ipsum, ac malesuada pretium vel gravida malesuada, tortor. Vestibule ipsum ipsum, ac malesuada pretium vel gravida malesuada, tortor.

• predefined CSS layouts: identify the one in use and modification

  Dreamweaver CS5:

  How can you identify what predefined CSS formatting has been chosen for a page? How can we change the predefined layout that is used for a page. For example,.

  changing ' 1 fixed column, footer and header centered"to"2 column liquid, bar right side, header, and footer.

  Moving thread on the forum of Discussion General Dreameaver.

• What controls the space above "maincontent" in CSS layout with header?

  In a page layout CSS freshly downloaded with header (twoColHybLtHdr or similar), there is a space of subject 20px from the bottom of the header area to the top of the box maincontent.   For this reason of space, when a bottom border is added to the header and a left edging maincontent, two lines don't intersect, which is what I want.  What controls this space so I can get rid of him?

  Thank you, Joann

  Hi Joann,

  Add this to your CSS and it will consolidate the gaps for you.

  / * put the parameters of the default browser on all zero * /.

  * {margin: 0; padding: 0; line-height: 100%; do-size: 100 %}}

  Then manually add some top of the margin, margin-bottom, padding and line-height to your different selectors: h1, h2, h3, p, ul, ol, li, li, etc...

  Good luck

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  http://ALT-Web.com/
  http://Twitter.com/ALTWEB
  http://ALT-Web.blogspot.com

• Update for the fluid in CS6 grid layouts [was: why?]

  I understand that Adobe puts most of their efforts into other programs. But I don't understand why we can't get an update for Dreamweaver CS6 checkerboard to fluid so that we can nest the elements. I can not personally pay for 29.99 for a month of Dreamweaver CC. So I'm stuck with a program that in virtue, performs in this area. Please come back to update this feature. I would also like to Starter models.

  Thank you

  Fery

  Don't use liquid grid layouts, they are not reliable.

  There are ways to create a responsive website. Take a look at Bootstrap 3 tutorial

• Fixed size appropriate to the layout Page

  What might be appropriate for EPUB fixed layout Page size? Is there a best practice? Should I take the format of the iBook author who is 1004 pt 768 x? Google Book search play suggestions (I have not found any...).

  Any suggestions?

  Thank you

  Ulrich haha

  Not sure that this link will be helpful or not!

  http://Apex.infogridpacific.com/DCP/FXL-PageSize-tutorial.html

  Derek