Similar Questions

• Simple (!) CSS question

  Trying to transition to the use of CSS for layout. Ran into a question, can't understand why.

  
  Here is the CSS of the page I'm working on that:

  @charset "UTF-8";
  /* CSS Document */
  
  #container {
       width: 968px;
       margin: 0 auto;
       padding-left: 10px;
       padding-right: 10px;
       overflow: hidden;
       border: 2px solid #FF0000;
  }
  #main_image {
       background-image: url(../images/main.jpg);
       background-repeat: no-repeat;
       position: relative;
       height: 376px;
       width: 968px;
  }
  #left_column, #center_column, #right_column {
       width:316px;
       float:left;
  }
  #center_column, #right_column {
    margin-left: 10px;
  }

  The problem occurs when I add the float: left; rule, highlighted above. In Dreamweaver, he seems to be pushing 3 columns to the bottom and outside of the container div - I added the Red 2px border to the container to confirm.

  However, viewing the page in a browser, it appears that 3 columns are correctly nested in the container div.

  It is disconcerting, because this isn't WYSIWYG!

  Someone suggested to turn off all Visual AIDS. Did not help.

  Can anyone suggest what is happening here? It would be GREATLY appreciated.
  
  Here is the page: http://www.stephencoren.com/CSS_Tutorial/NavBar.htm
  Here's the CSS: http://www.stephencoren.com/CSS_Tutorial/css/NavBar.css

  Here is a screenshot of what I see in DW CS3 in Safari: http://www.stephencoren.com/CSS_Tutorial/example.jpg

  Thank you.

  DWCS3 is also unable to make CSS layouts as was DWCS4 and DWCS4 was not as good as DWCS5.  When I look at your page layout in Design CS5 mode, I see exactly the same thing I do in the browser.  But as bemdesign, DW Design view is not now and has never been good enough for anything other than a rough layout.  The browser (or Live see DW) is the only way to be relatively safe.

• CSS Question %, EM, px dimensions

  How the browser does not render css when a css property has a value, but the value is not a unit of measurement. IE %. PX, em is not specified.

  Amy:

  I think the deal is that when the style in question has an associated default digital value (height of the default 1 line), you can use a number of multiplier, for example, line-height: 2, with success.

• Shorthand CSS question

  Please translate these values of CSS shorthand for me because I need to get through my thick skull

  background: no-repeat scroll 0 0 Green ;

  Very appreciated

  background-image: none;

  background-repeat: repeat; / * x and y * /.

  background-attachment: scroll;

  background-position: left, top;

  background-color: green;

  The order is defined as "color, image, repeat, attachment, position", but in your case, there is no ambiguity as to her mean values.

• Interactive report CSS question...

  Hi all..
  
  APEX: 4.1
  BROWSER: IE 7
  Database: 11g
  
  Please help me with this CSS problem.
  I have an interactive report that is too large for the region.
  I use the following CSS to have a bar scrolling for this region,
  If it grows more.
  

  Region Header:
  <div style="overflow:auto;overflow-y: hidden;">
  
  Region Footer:
  </div>

  Please see the following page.
  
  http://Apex.Oracle.com/pls/Apex/f?p=41803:4
  workspace: kumar2003
  Username:test_user
  password: test
  application: 41803
  Page: 4
  
  
  
  
  I have the following problems with the report.
  
  (1) If you scroll the report, "" OBSERVE THE "' GO AND ' ' BUTTONS of ACTION '" interactive reports.
  Even the button are also mobile and spoil the appearance of interactive report.
  Is anyway to keep the buttons in the same situation?
  
  Another question:
  
  (2) instead of a scroll at the bottom of the area bar, it is possible to
  '' increase the width of the region' "until the report develops?
  What CSS changes in the level of the region as I do?
  
  Please help me

  Hello

  I don't know what the problem is.
  But if fix you this move button, I guess you have problem that drop downs column header are not aligned correctly when you click the header.

  Maybe you check this plugin
  http://www.apex-plugin.com/Oracle-Apex-plugins/dynamic-action-plugin/IR-plugin-package_108.html

  Kind regards
  Jari

  http://dbswh.webhop.NET/dbswh/f?p=blog:Home:0

• JQuery CSS question...

  Hi all..
  
  Please help me with this problem.
  
  I'm trying to put a button on "'top right'" my page.
  I am able to place it in the right position with CSS.
  But somehow after the button had moved it ugly «"»
  Do not know what has changed
  
  Please see the following page.
  
  http://Apex.Oracle.com/pls/Apex/f?p=52018:2
  
  I use the CSS for this

  #SUBMIT_BUTTON {
    position:absolute;
    right:100px;
    top:20px;
  }

  I also tried with jquery too. It does the same thing
  
  $("#SUBMIT_BUTTON").css({"position":"absolute","right":"100px","top":"20px"});)
  
  
  Thank you

  Hello

  Please check your sample now.

  Kind regards
  Jari

  http://dbswh.webhop.NET/dbswh/f?p=blog:Home:0

• Problem of position CSS Logo

  Hello

  I recently worked on a web project. In the project, I have a css file that is suppose to position the image of the logo.

  This is the css code:

  / * LOGO * /.

  #logo {}
  Width: 830px;
  height: 90px;
  margin: 0 auto;
  margin-top: 10px;
  margin left: 200px;
  background: url(images/img04.jpg) no-repeat left top;
  }

  Margin-top down the logo and the left margin moves the logo into alignment. The problem is that when I check the

  page on the different sizes of screen left margin makes the logo image to automatically move to the middle of the page.

  Rather than stay in the position you want.

  If anyone can help.

  Thank you.

  Very difficult to know what needs this poster. First, they say they want the logo to the left so I said delete margin: 0 auto; in the css as it was then. 200px left margin appears now... hummmm

• Positioning CSS or DW problem?

  I have problems with CSS positioning after spending several hours of reading and trial and error.  I'm starting to think that Dreamweaver is broken, and thoughts of reloading cross my mind.

  My desire is to have a background image "beneath" my page wrap div, essentially as a border surrounding it.  I posted this image of 'background' as relative position and therefore my wrap div page as absolute positioning.  The wrap of the page was given a background color and a line of text to allow me to 'see' where I am to get the correct positioning. I think that the background color of the page div wrap "show" but it is not. (?)

  I placed my palette, as we'll call it, with margins, while he was trying to put my envelope of page using the top, right, bottom and left through the CSS dialog box.  What are the values used, the div is in the lower left corner of the browser window and refuses to move.

  #palette {}
  background: url(images/pallete.png) no-repeat;
  Width: 1200px;
  height: 1400px.
  margin: 100px auto;
  position: relative;
  }

  #page wrap {}
  position: absolute;
  background: #C06;
  height: 1100px;
  Width: 960px;
  top: 100px;
  right:-120px;
  }

  It got so that the changes I've made to the CSS at this stage will not trigger even a refresh of the Panel styles CSS?  What gives?

  Thank you.

  I've never used "Live Code" before and could set more #page for my taste, but it's an approximate position, so to speak, I can only approximate its center within #palette.  I started thinking that I have the success, until I go to the browser view, where the #page position seems to pass.

  You try to use HTML as a word processor, and it's the absolute wrong approach (no pun intended)!

  Location of the item an absolute positioning is calculated based on the location of its nearest positioned ANCESTOR.  An "ancestor" is a container element, not an adjacent element (which would be a 'brother').  So, if you want to than your element to absolute positioning out of the location of a relatively positioned element, it must be a child (or descendant) of this relatively positioned element.  In other words, to make #page work against #palette, he must be inside #palette.

  If there are alternatives to ensure the positioning other than my current method, I would be interested to learn about it.  I'm not aware of the disadvantages mentioned with using this type of positioning, could you give some details please?

  There is an excellent alternative without using the positioning at all - it is called "best practices".   The disadvantages of using absolute positioning for all are:

  1. because the absolute position elements are removed from the flow of code on the page, they are immune to travel in other parts of page not positioned due to changes in browser window size or screen text size changes.

  2. because #1 is the case, and given that display text size changes can cause the container to change height, if this container is positioned absolutely, its text content may overlap other content to the screen.  More positioned in absolute terms of containers of text the worse this effect becomes quickly, producing a unusable, overlapping mess.

  3 in absolute position items on the screen regardless of where the items appear in the code, and as a result, it is entirely possible to have two parts of the text which are meaningful semantic when taken as a unit separated by a bit of code, or other pieces of text.  Thus, pages built with absolute positioning text containers are usually not semantically sensitive, which means that they would not succeed well when it is run by a system of assistance of the screen.

  4. in view of all these things, the pages that contain elements of balance and frequently positioned elements go wandering as width of the viewport is changed.

  As a result, the method most likely to be chosen by an inexperienced user due to its apparent simplicity is also the absolute worst possible approach to the construction of the page.

  Oh, by the way, the values of positioning below were obtained through 'slide' div = page in position.  I wouldn't rather Code Live, but taken into concrete values in the future.

  The approach of processing in action!  The only way to make the connection of concrete values is to have a provision already laid down on paper before you start.

  Tell more about how you want your page to look at (I don't know what you mean exactly on centering #page #palette 'up', but if you mean "before" then consider this -

  This is my page

  (Note that I deleted all the positioning, as well as all heights - of Villa is a bad idea to declare explicit heights on elements that contain text, once again because of possible overflow issues)

• Spry Navigation - CSS Question

  I recently added spry navigation on my site (http://www.faithbuilders.com) and changed the default CSS to match the site a little better. Everything works well enough, but I have a few things left to straighten.

  First of all, there is a gap between the right side of the drop-down list and the left side of the menu subcategory that pops out to the right. See the image below.

  Is there a specific part in the CSS that affects this gap?

  Second, given that the submenu appears on the right, it is hidden when the browser size is small enough to cover it. Is there a simple way to get out to the left OR right, depending on where there is room for it?

  Your help is greatly appreciated.

  ~ Sarah

  I'm giving It All wrote:

  I've recently added spry navigation on my site (http://www.faithbuilders.com) and changed the default CSS to match the site a little better. Everything works well enough, but I have a few things left to right.

  First of all, there is a gap between the right side of the drop-down list and the left side of the menu subcategory that pops out to the right. See the image below.

  Is there a specific part in the CSS that affects this gap?

  Yes change 95% to 200px in the css below rule: (as shown)

  / * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) * /.
  UL. MenuBarHorizontal ul ul
  {
  position: absolute;
  margin:-5% 0 0 200px;
  }

  I'm giving It All wrote:

  Second, given that the submenu appears on the right, it is hidden when the browser size is small enough to cover it. Is there a simple way to get out to the left OR right, depending on where there is room for it?

  Your help is greatly appreciated.

  ~ Sarah

  Not that I know of.

• A simple CSS question

  I don't know how I managed, but the list appears on the right side of the div, despite the fact that I have text-align: left.

  A reflection about how I managed?

  HTML:

  < div id = "workArea" >
  < div id = "nav" >
  < ul >
  < li > < a href = "#product1" > product 1 < /a > < /li >
  < li > < a href = "#product2" > product 2 < /a > < /li >
  < li > < a href = "#product3" > product 3 < /a > < /li >
  < li > < a href = "#product4" > product 4 < /a > < /li >
  < /ul >
  < / div >
  CSS:

  #nav {}
  top: 95px;
  position: absolute;
  Width: 150px;
  left: 0px;
  height: 411px;
  text-align: left;
  background-color: #CCCCCC;
  }

  Li {list-style: none ;}}
  a {text-decoration: none; color: #000000; outline: none ;}}

  http://gtworkspace.com/peloton/product_pg

  Absolute positioning, yuck!  You just need your lists of style better.

  Try this (note the changes in red):

  #nav ul {}

  margin: 150px 0;
  padding: 5px;
  Width: 145px;
  float: left;
  background-color: #CCC;
  do-size: 16px;

  }

  #nav li {list-style: none}

  #nav li a {}

  Display: block;

  Color: #000;

  text-decoration: none;

  }

  #nav li a: hover,

  #nav li a: active,

  #nav li a: focus {}

  color: #FFF;

  text-decoration: underline;

  }

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

• Hover CSS question

  It seems that once the link has been visited, it is no longer change color when stir on... this forum has been so useful, it would be nice if someone could point out where I was wrong...

  This is one of the pages of the site as the home page is different... www.meadowcroftgallery.com/meadowcroftkinetic.html

  Here's the css

  {body
  color: #c3300;
  font-size: medium;
  do-family: Verdana, Arial, Helvetica, without serif.
  make-style: normal;
  make-weight: normal;

  background-color: #fff

  }
  a: link {color: #333366; text-decoration: none ;}}
  a: hover {color: #993300; text-decoration: none ;}}
  a: visited {color: #333366; text-decoration: none ;}}
  a: img {border: none ;}}
  a: active {outline: none ;}}
  a: focus {outline: none ;}}

  {p}
  vertical-align: middle;
  }
  TD {}

  After Nancy positions, you can redesign your CSS in this way.

  a {color: #333366; text-decoration: none ;}}
  a: hover {color: #993300 ;}}
  a: active, a: focus {outline: none ;}}

  a: img {border: none ;}}

  and it works perfectly.  If you do this, keep in mind that the first rule apply to the * all * anchor tags on the page, including any named anchors, for example,.

• CS3 Spry css question

  I know basic css without table, my question is, instead of a navigation bar regular, I need to use the widget, spry for a navigation bar drop down menu on an exisitng html page. I am able to insert the spry to the appropriate place on the .html page and make it work but I have a CSS file that is already attached to the page that I need to know if I can just select all of the css in the css spry page and insert it inside my page associated css?

  Any help?

  Yes - you can copy the CSS into your own plug and then remove the reference to the default stylesheet Spry. Alternatively, make a copy of the spry roadmap to edit and link to this one separately.

• Background CSS question

  Well Yes...
  
  CSS & I are not agree between themselves for some reason any.
  
  Imagine this: 2 table column, left cell defined with a style sheet with a background of 400 x 400 image. The right cell has a 200 x 150 image. The right cell is static width 200, with the width of the left unspecified cell.
  
  Left tank: I have a table with 2 columns, each to contain an editable web content of nesting. The right cell: a nested table containing the text navigation links.
  
  The stylesheet for large bkg image does not work with the format of the rest of the page, because it seems to float. I have an absolute positioning in css, but I get varied results. Each time, the css moves cells in a table so that they appear curiously, or the bkg image shows nothing.
  
  Here is the code for the structure of the page and the css for the bkg sheet.
  
  Any input would be greatly appreciated.
  
  

  Well Yes...

  CSS & I are not agree between themselves for some reason any.

  Imagine this: 2 table column, left cell defined with a style sheet with a background of 400 x 400 image. The right cell has a 200 x 150 image. The right cell is static width 200, with the width of the left unspecified cell.

  Left tank: I have a table with 2 columns, each to contain an editable web content of nesting. The right cell: a nested table containing the text navigation links.

  The stylesheet for large bkg image does not work with the format of the rest of the page, because it seems to float. I have an absolute positioning in css, but I get varied results. Each time, the css moves cells in a table so that they appear curiously, or the bkg image shows nothing.

  Here is the code for the structure of the page and the css for the bkg sheet.

  Any input would be greatly appreciated.

• Tag DIV, positioning CSS H1and issue

  Hi all
  I have a basic question concerning the placement of a text inside a < div > tag. Essentially, I am creating a small topic block (the < div > tag) 750px wide by high 25px, with a left-aligned title text and a prize titled text aligned to the right and 5px of padding around the text on all sides.
  
  The problem I have is just to get the right text aligned to move far enough to the right of the block 750px topic using CSS. I want to create more space between the end of the title text and the beginning of the price text, but because the length of the title text will vary from point to point, I can't use a compensation of the left margin of the title text. Basically I want to compensate the right text to the far right of the header itself block edge without the use of tables. I hope this makes sense.
  
  What would be a good approach to take to do something as simple as this, not to mention that I am trying to create something that "looks like" a table without using tables?
  
  Thank you
  ~ Greg

  We will see the page, please.

  A float located on contano of text with a right margin may be whatever you
  need.

  --
  Murray - ICQ 71997575
  Adobe Community Expert
  (If you * MUST * write me, don't don't LAUGH when you do!)
  ==================
  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
  ==================

  "Myrrhlin225" wrote in message
  News:f58vph$1u6$1@forums. Macromedia.com...
  > Hi all,
  > I have a fundamental question regarding the placement of a text inside a
  >

  
  > tag. I'm basically trying to create a small topic block (the

  )
  > 750px
  > integer by 25px high, with a left-aligned title text and a price
  > topic text aligned to the right and 5px of padding around the text on all
  > side.
  >
  > The problem I just becomes right-aligned text move away
  > no longer enough on the right block 750px topic using CSS. I want to
  > create
  > more space between the end of the title text and the beginning of the
  > price
  > text, but because the length of the title text will vary from point to point, I
  > can not
  > use a shift to the left margin of the title text. Basically I want to compensate for
  > the
  > good text from the edge to the right of the header block itself without
  > help
  > tables. I hope this makes sense.
  >
  > What would be a good approach to take to do something as simple as
  >,
  > not to mention that I'm creating something that "looks like" a
  > table
  > without the use of tables?
  >
  > Thank you,
  > ~ Greg
  >

• Several CSS questions

  OK, so now I'm having a problem with the size of my Web page.  I have a container the value width: 90%, but one of the pages use a separate css page called bootstrap.css.  It is because I have included a Bootstrap carousel with a feature in Dreamweaver.  Does anyone have advice on how I can make this page the same size as the rest of them?  Here is a link to my Web site: home

  I don't see Glyphicons mentioned anywhere in your code.  This is perhaps why they are not appear?

  My awesome site

  Some pithy slogan...

  http://lorempixel.com/1180/400/Technics/4"alt ="..." ">

  Heading 3

  Details...

  http://lorempixel.com/1180/400/Technics/3"alt ="..." ">

  Heading 3

  Details...

  http://lorempixel.com/1180/400/Technics/2"alt ="..." ">

  Heading 3

  Details...

  http://lorempixel.com/1180/400/Technics/1"alt ="..." ">

  Heading 3

  Details...

  Previous

  Next