Div positioning help

Discussion in 'CSS' started by eight84, Apr 19, 2010.

  1. #1
    Hello!


    I am trying to help someone with website. So far the main page is fine...the other nine sub pages look similar to this:

    http://www.eight84.com/bilbryan/oneindex.html

    which is fine except in the highlighted areas on the main image they want editable text. How do I do this? I tried some portioning in CSS and was not able to do it because I don't know how to code. I have this and nine other pages. This seems like something simple for someone who knows what they are doing and isn't code challenged like myself...any tips and ideas would be greatly appreciated thanks!
     
    eight84, Apr 19, 2010 IP
  2. palmerlarryray

    palmerlarryray Active Member

    Messages:
    158
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    80
    #2
    Personally, I would use tables with a transparent background so the picture would show through and the text would be easy to edit.
     
    palmerlarryray, Apr 19, 2010 IP
  3. palmerlarryray

    palmerlarryray Active Member

    Messages:
    158
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    80
    #3
    Forgot to leave you the link on how to do it www htmlcodetutorial.com/help/archive.php/o_t__t_1043__transparent-table.html If you need any help, just email me
     
    palmerlarryray, Apr 19, 2010 IP
  4. grandpa

    grandpa Active Member

    Messages:
    185
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    75
    #4
    give position: relative; to div#flash

    inside div#flash, add <div style="width: ???px; height: ???px; left: ???px; right: ???px; position: absolute;">some content</div>

    change ??? with the actual div size and position.
     
    grandpa, Apr 19, 2010 IP
  5. ampg-it

    ampg-it Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Something like this should do it.

    HTML
    <div id="flash">
    			  <div id="div1">Header
    			<p>&nbsp;</p>
    			<p>some text</p>
    			  </div></div>
    Code (markup):
    CSS
    #div1 {
    	width: 200px;
    	margin-top: 50px;
    	margin-left: 70px;
    	text-align: left;
    }
    Code (markup):
    This should do the left box, you will need to duplicate and change the margin settings for the right box.
     
    ampg-it, Apr 20, 2010 IP
  6. javier.garcia.esteban

    javier.garcia.esteban Well-Known Member

    Messages:
    66
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    118
    #6
    Yes, use CSS not tables, they are quite unpredictable. Also with CSS you can use scrolling in case the text exceeds the "highlighted areas".
     
    javier.garcia.esteban, Apr 20, 2010 IP