SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    Boston
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image and header question

    hello again
    so my little problem is how can I make the text in the header no to move when resizing the window by making it smaller or by having a side bar, for example in IE distorted the header and in Firebird the header text goes beyond the header onto the main menu.
    www.bc.edu/ops

    and the problem with the picture of the machine room servers is that, although now with some help from you we go it to look better, I would still rather have the picture static and not move or go anywhere when the window is resized.

    this is the html code for the header and the pictures

    HTML Code:
    <h3><a name="top" id="top"></a><p class="headertext">Information Technology</p>
      <img class="heading" name="bclogo" src="metaelements/logo-bc-1.gif" width="151" height="54" alt="Boston College" /> 
    </h3>
    HTML Code:
    <div class="image">
       <img src="metaelements/computer_room1.jpg" alt="Console Area" />
       <p>Console Area</p>
    </div>
    <div class="image">
       <img src="metaelements/computer_room2.jpg" alt="Machine Room Servers" />
       <p>Machine Room Servers</p>
    </div>
    and this the css goes like this

    Code:
    body
    {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: normal;
    	background-color: #FFFFFF;
            padding:0px;
    	margin:10px;
    	page-break-after: auto;
    	border-top: #660000;
    	border-right: 2px solid #660000;
    	border-bottom: 2px solid #660000;
    	border-left: 2px solid #660000;
    }
    
    h3 
    {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 1.5em;
    	font-weight: bold;
    	text-align:center;
    	background-color: #CCB47B;
            height:52px;
    	margin:0;
    	word-spacing: 1em;
    	border-bottom-width: 2px;
    	border-bottom-style: solid;
    	border-bottom-color: #660000;
    	letter-spacing: 5px;
    	border-top-width: 2px;
    	border-top-style: solid;
    	border-top-color: #660000;
    	vertical-align: middle;
    }
    
    h3 p.headertext 
    {
    	margin:0 152px;
    	text-align:center;
    	padding-top: 10px;
    }
    
    h3 img 
    {
    	position:absolute;
    	left:10px;
    	top:10px; 
    }
    Code:
    .image 
    {
        float: left;
        width: 49%;    /* to prevent rounding errors */
        margin: 0;
        padding: 0;
        text-align: center;    /* because IE doesn't understand margin:auto */
    }
    
    .image img 
    {
        margin: 1em auto;
        border: 1px solid #000;
    }
    
    .image p 
    {
        margin: 1em;
        font-size: .8em;
    }


    Thank you very much to all

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,346
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As I'm in a rush I'll give you the answers as I get to them :
    make the text in the header no to move when resizing the
    Add white-space:nowrap, I think that's what you meant
    Code:
     
    h3 p.headertext 
    {
     margin:0 152px;
     text-align:center;
     padding-top: 10px;
     white-space:nowrap;
    }
    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,346
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I would still rather have the picture static and not move or go anywhere when the window is resized.
    What exactly do you mean by not move or go anywhere?

    If the images stay in the same place then all the text above will overwrite them. If you don't want the text above to move either then you will have to fix the centre content as well so that doesn't move either. This means giving the centre content a fixed width and loosing the fluidity of the design.

    If on the other hand you want the images to stay xxpixels away from each other but move down the page when the text is resized then you will need to give them a margin to keep them apart.

    If you mean that you want the images to stay in a pair and not drop one below the other as the page is resized then you will need to put both images inside a fixed width container so that the images don't split.

    I haven't offered any code otherwise I might be barking up the wrong tree

    Paul

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    Boston
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul,
    yes I mean
    If you mean that you want the images to stay in a pair and not drop one below the other as the page is resized then you will need to put both images inside a fixed width container so that the images don't split.
    That's what I mean, so what do I have to do.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,346
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Something like this should work.

    Code:
    div.centered 
    {
     padding-right: 13em;
     padding-left: 7em;
     text-align: left;
     font-size: 0.95em;
     min-width:400px;
    }
    .imagecontainer{
     width:550px;
     margin:auto;
    }
    .image 
    {
    	float: left;
    	width: 49%;	/* to prevent rounding errors */
    	margin: 0;
    	padding: 0;
    	text-align: center;	/* because IE doesn't understand margin:auto */
    }
    .image img 
    {
    	margin-right: 1em auto;
    	border: 1px solid #000;
    }
    html:
    Code:
    <div class="imagecontainer">
    <div class="image">
       <img src="http://www.bc.edu/ops/metaelements/computer_room1.jpg" alt="Console Area" />
       <p>Console Area</p>
    </div>
    <div class="image">
       <img src="http://www.bc.edu/ops/metaelements/computer_room2.jpg" alt="Machine Room Servers" />
       <p>Machine Room Servers</p>
    </div>
    </div>
    <div style="clear:both"></div>
    You may need to tweak the measurements a bit as I just guessed at the sizes

    I've also put a min-width in your centred style to stop mozilla pushing the images off the left of the screen now that they are tied together. (Just take it out if you don't need it.)

    Paul

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    Boston
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your help Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •