Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts

    Replacing tables with CSS, centering image vertically

    First post here so be gentle with me....

    I'm trying to update a page to remove the table used to layout a list of photos and accompanying descriptions.

    I've done this by using a list:

    http://www.adelaidewalker.co.uk/Test/TableTest.htm

    Relevant css is here:

    Code:
    ul.column{
    
    	margin: 10px 0;
    	padding: 0;
    	list-style: none;
    	float: left;
    	width: 100%;
    }
    
    ul.column li {
    	float: left;
    	width: 100%;
    	padding: 10px 0;
    	margin: 0;
    	border-bottom: 2px solid #A7A669;
    
    
    }
    
    ul.column li .imgblock {
    
    	font-weight: bold;
    	float: left;
    	width: 252px;
    	padding: 0px;
    	text-align: center;
    	margin: auto 0px;
    	vertical-align:middle
    }
    
    
    ul.column li .detail{
    
    	padding-left: 300px;
    }
    Fine so far, but I would like to get the image to center vertically against the text - as it does in the existing table based page here:http://www.adelaidewalker.co.uk/sheepbreeds.html.

    If this is possible any hints would be greatly appreciated. Alternatively, in this case is the use of a table justified - any views.

    Thanks in advance.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello SB65,
    A table really isn't appropriate there, and neither is your ul since it's not really a list.
    You also have a lot of absolute positioning. Have a look at this page - http://www.tyssendesign.com.au/artic...ning-pitfalls/
    Much better to use floats and margins to position your elements.

    Your #header, #menu, #MainText and probably others are set heights but not high enough for their content. Try this and you'll see what I mean:
    Code:
    #Header {
    	position:absolute;
    	width:525px;
    	height:76px;
    	z-index:7;
    	left: 221px;
    	top: 26px;
    background: #fff;
    }
    
    
    
    #Menu {
    	position:absolute;
    	width:200px;
    	height:268px;
    	z-index:4;
    	left: 22px;
    	top: 250px;
    background: #f00;
    }
    
    #Logo {
    	position:absolute;
    	width:200px;
    	height:215px;
    	z-index:5;
    	left: 24px;
    	top: 23px;
    }
    
    #MainText {
    	position:absolute;
    	width:587px;
    	height:171px;
    	z-index:6;
    	left: 270px;
    	top: 156px;
    background: #00f;
    }
    Leave those colors and remove the height:xx; line and see what happens.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Have a start with your positioning with this -
    Code:
    deleted
    Last edited by Excavator; 02-28-2009 at 06:27 PM. Reason: delted code for version control
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Hi Excavator

    Thanks for your suggestions on positioning using margins rather than absolutes, I will work through these. I'm slowly working through this site trying to tidy it up.

    I maybe being dense, but I still can't see a way of centring the image against the text. On the example page and the revised code suggested, the top of the image is aligned with the top of the text, but in some cases I have much smaller image and much longer text, and don't want to have the two things aligned at the top.

    I've amended the page to better illustrate the question (and removed all the absolute positioning):http://www.adelaidewalker.co.uk/test/tabletest.htm.

    For the top entry the image is small in height compared to the text, and I'd like to centre the image against the text. There will be multiple entries on this page with varying image and text heights. Sorry if I didn't explain better before.
    Last edited by SB65; 02-28-2009 at 05:10 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning SB65,
    That was a hurried example I gave you, it was 2am here and I was off to bed.
    To move the image in my above code you would need to adjust the margin. I didn't know you were going to have multiple and varied entries like this. That calls for another method.

    To start with, #PageText isn't really doing anything rightnow. Let's make that a class so we can re-use it. That way it can contain the text and your image can have the same container to center in. I have a demo that should show the centering method here - http://nopeople.com/CSS/vertical%20center%20with%20CSS/ -
    I think the method used on the second page will work. I've never tried it in a fluid height container though... I'll have to mess with this a bit.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Ok, this is valid and seems to work in FF3 and IE7. I've added a meta tag in the head that forces IE8 to emulate IE7 because this doesn't work in IE8.
    Not a clue what it's going to do in IE6.

    • When we made .pageText a class so it could contain each image and coresponding text together it needed to be position:relative; for the vertically centered image to work.
    • Remove the .left on the image because it's absolutely positioned now with #ewe.
      You could use a class here too, as long as each image was the same size.


    I hope this makes sense.
    index.html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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=iso-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title></title>
    <link href="adelaideWalker.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="wrap">
            <div id="logo">
            	<img src="http://www.adelaidewalker.co.uk/Images/Header/AWlogo_cream.jpg" alt="Adelaide Walker logo" title="Adelaide Walker logo" width="180" height="212" />
            </div>
    <div id="header">
        <img src="http://www.adelaidewalker.co.uk/Images/Header/AdelaideWalker_cream.jpg" alt="Adelaide Walker" title="Adelaide Walker" width="567" height="56" />
        <p>Textile Craft Specialist</p>
    </div>
            <div id="menu">
                <p><a href="../Index.html" class="navlink">Home</a></p>
                <p><a href="../UndyedTops.html" class="navlink">Undyed Wool Tops</a></p>
                <p><a href="../DyedTops.html" class="navlink">Dyed Wool Tops</a></p>
                <p><a href="../PlantFibres.html" class="navlink">Silk &amp; Vegetable Fibres </a> </p>
                <p><a href="../SpecialityFibres.html" class="navlink">Luxury Fibres</a> </p>
                <p><a href="../Ordering.html" class="navlink">Ordering</a></p>
                <p><a href="../Gallery.htm" class="navlink">Gallery</a></p>
                <p><a href="../SheepBreeds.html" class="navlink">Sheep Breeds</a></p>
                <p><a href="../Contact.html" class="navlink">Contact Us </a></p>
            </div>
        <div id="mainText">
            <div class="pageText">
                <img src="http://www.adelaidewalker.co.uk/Images/SheepBreeds/Breeds_Herdwick.jpg" alt="Black Welsh Mountain ewe and two lambs" title="Black Welsh Mountain ewe and two lambs" id="ewe" width="252" height="184" />
                    <div class="detail">
                        <h2>Herdwick</h2>
                            <p>(Fibres available <a href="UndyedTops.html#Herdwick">here</a>)</p>
                            <p>
                                The name Herdwick comes from a Norse word meaning sheep pasture. The origin of the breed itself is unknown, 
                                but the most common theory is that the ancestors of Herdwick sheep were introduced  by early Norse settlers. 
                                Herdwick are very hardy sheep which can survive on the high fells. Flocks today are still concentrated in 
                                the Lake District.
                            </p>        
                            <p>
                                Image provided by Dorothy Wilkinson, <a href="http://www.herdwick-sheep.com/" target="_blank">Herdwick 
                                Sheep Breeders' Association</a>. The sheep have traditional red backs,  now used for making the sheep
                                more attractive when they are shown but historically believed  to help the farmers determine where 
                                their tups (rams) were when they were on the fells. Iron ore dust was originally used but it can now 
                                be purchased as Herdwick red in tubs.
                            </p>
                    <!--end detail--></div>
                <hr/>
            <!--end pageText--></div>
            <div class="pageText">
                <img src="http://www.adelaidewalker.co.uk/Images/SheepBreeds/Breeds_BlackWelshMountain.jpg" alt="Black Welsh Mountain ewe and two lambs" title="Black Welsh Mountain ewe and two lambs" class="left" width="252" height="184" />
                    <div class="detail">
                        <h2>Black Welsh Mountain</h2>
                            <p>(Fibres available <a href="UndyedTops.html#BlackWelshMountain">here</a>)</p>        
                            <p>
                                This coloured sheep is an ancient breed and was described in Welsh writings from the middle ages. They are relatively 
                                small  black sheep with dense fleeces and no wool on their face or legs below their knees. The males have horns. 
                                Flocks are concentrated in Wales with smaller flocks throughout the UK. 
                            </p>                
                            <p>
                                Image provided by kind permission of the <a href="http://www.blackwelshmountain.org.uk/">Black Welsh Mountain 
                                Sheep Breeders' Association</a>.
                            </p>
              <!--end detail--></div>
          <!--end pageText--></div>
        <!--end mainText--></div>
            <div id="footer">	  
            	<p>Adelaide Walker &copy; 2009 </p><span>Some more text</span>
            <!--end footer--></div>
        <!--end wrap--></div>
    </body>
    </html>
    adelaideWalker.css:
    Code:
    /* Set defaults */
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    p,td,th,tr,h1{margin-top:0px;margin-bottom:15px}
    table{margin-bottom:15px}
    body,td,th {
    	color: #000000;
    	font: small Arial, Helvetica, sans-serif;	
    	/*background-color: #f7f59c;*/
    }
    /*Common styling */
    a, a:link, a:visited {color: #000000;}
    hr{
    	width: 100%;
    	height: 2px;
    	margin: 0 0 20px 0;
    	background: #A7A669;
    	color: #A7A669;
    }
    h1 {font-size: large;font-weight: bold;}
    h2{margin:0px;font-size:large;font-weight:bold}
    h3{margin-top:0px;font-size:large;font-weight:bold}
    img.left {float:left;margin:0px 15px 15px 0px}
    img.right {float:right;margin:15px 15px 15px 30px}
    img.rightnotopmargin {float:right;margin:0px 15px 15px 0px}
    .clearboth {clear:both}
    /* Layout Divs */
    #wrap {
    	width: 1000px;
    	background: #F6F59B;
    	overflow: auto;
    }
    #header {
        margin: 26px 0px 0px 17px;
    	width:525px;
        float:left
    }
    #menu {
    	width:200px;
    	margin: 15px 0px 0px 22px;
    	float: left;
    	clear:left
    }
    #logo {
        margin: 23px 0px 0px 24px;
        float:left
    }	
    #mainText {
    	margin: 156px 0 0 270px;
    	width:587px;
    	overflow: auto;
    }
    /* Entries */
    .pageText {
    	position: relative;
    }
    .detail {margin:0px 0px 0px 285px}
    #ewe {
    	position:absolute;
    	top: 50%;
    	left: 10px;
    	width: 252px;
    	height: 184px;
    	margin: -100px 0 0 0; /*this negative top margin should be half the images height*/
    }#footer{
    	border: 3px double #000;
    	color:black;
    	clear:both
    }
    
    /* Menu styling */
    #menu a.navlink {
    	text-decoration: none;
    	width:180px;
    	float:left;
    	text-align:	center;
    	line-height:1.5em;
    	font-size:12pt;
    	margin:5px 5px 5px 0px;
    	color:#000000;
    	border: 1px solid #A7A669;
    	background: url(http://www.adelaidewalker.co.uk/Images/Header/MenuButton.jpg);
    }
    #menu a.navlink:hover {
    	color: #f00;
    }
    
    /*Header styling - for the text under the AW text image */
    #header p {
    	padding-left: 280px;
    	font: italic bold 24px "Times New Roman", Times, serif;
    }
    
    /*Styling to put the brown border on */
    .border{border: 4px solid #A7A669}
    .border p {margin:10px}
    p.border {padding:10px}
    
    /* Footer - allow two items of text left and right */
    #footer p {margin-top:15px;padding-bottom:15px;float:left}
    #footer span {margin-top:15px;padding-bottom:15px;float:right;text-align:right;width:400px}
    Last edited by Excavator; 02-28-2009 at 07:33 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    SB65 (03-26-2009)

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Hi Excavator

    Thanks very much for all this. Need to go and do something else now so I will have another look in the morning and try and get my head round it. Unfortunately not all the images are the same height, so I guess I'm going to end up with a few ids to sort it all out.

    Cheers.


  •  

    Posting Permissions

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