1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Layout vs Image

Discussion in 'HTML & Website Design' started by afridy, Aug 28, 2009.

0
  1. #1
    Hai folks

    below is my layout.
    it has 3 div's. each placed inside another.
    this is the code.

    <div id="base_box" align="center" style="border:10px solid blue;width:1000px;height:635px">

  <div align="left" id="map" style="width:100%;height:100%px;border:3px solid red;">
	  <div id="info" style="width:250px;height:200px;position:relative;top:10px;left:10px;border:1px solid yellow;">test</div>
  </div>

</div>
    Code (markup):
    now my question is,
    i want to insert an image in to the map div (red box) which is here in red. now problem is, if i insert an image, the yellow info guy jumps to bottom :p
    i dont want to use the picture as the map div (red box) backgroud since i want to assign image mappings.


    [​IMG]
     
    afridy, Aug 28, 2009 IP
  2. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    165
    #2
    qazu, Aug 28, 2009 IP
    afridy likes this.
  3. afridy

    afridy Well-Known Member

    Messages:
    802
    Likes Received:
    110
    Best Answers:
    0
    Trophy Points:
    135
    #3
    tx qazu,
    i find that useful.
    one more question.
    if i want to make that blue base box center of the page for what ever resolution, how do i ?
    coz
    <div id=basebox align="center"...
    will center only its contains and not itself. so how do i?
     
    afridy, Aug 28, 2009 IP
  4. afridy

    afridy Well-Known Member

    Messages:
    802
    Likes Received:
    110
    Best Answers:
    0
    Trophy Points:
    135
    #4 

    http://www.barelyfitz.com/screencast/html-training/css/positioning/

#4

position:relative + position:absolute

If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:
    Code (markup):
    that solved my issue tx :)
     
    afridy, Aug 28, 2009 IP
  5. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    165
    #5
    You need to add align center to the <body> tag and add margin 0 auto to the basebox div. This article explains it better: http://simplebits.com/notebook/2004/09/08/centering.html
     
    qazu, Aug 28, 2009 IP
  6. amateur81

    amateur81 Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    With this code, you try again.

    <div id="info" style="width:250px;height:200px;top:10px;left:10px;border:1px solid yellow;position:absolute;z-index:1;">test</div>
     
    amateur81, Aug 28, 2009 IP
  7. AssistantX

    AssistantX Peon

    Messages:
    173
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Do not use align="left" as that is a deprecated HTML attribute and may not be supported by some browsers. To left-align text or images (inline elements) within a div, put "text-align: left;" in the style.
     
    AssistantX, Aug 28, 2009 IP
  8. makingloveadvisor

    makingloveadvisor Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Oh ya, don't forget to check with another browser such as IE. although many people who will open the website using firefox or other web bowser, but make sure you css perfect for all browsers. because as a visitor your website would feel uncomfortable if your design not perfect. keep up your good work, dear!
     
    makingloveadvisor, Aug 29, 2009 IP
  9. afridy

    afridy Well-Known Member

    Messages:
    802
    Likes Received:
    110
    Best Answers:
    0
    Trophy Points:
    135
    #9
    tx folks.

    nwo i am using this and and document not appear in center.

    /* CSS Document */

    body{
    margin: 0px;
    padding: 0px;
    text-align:center;
    }

    #outerWrapper{ /* main box*/
    position: absolute;
    left: 50%;
    width: 1000px;
    margin-left: -500px;
    }

    * note my main box has the width of 1000px.
     
    afridy, Aug 29, 2009 IP