Solved

Wide-content div alignment issue-images misaligning with content div rounded box

Posted on 2009-04-02
20
270 Views
Last Modified: 2013-11-19
I have my content, as referenced in the xhtml below. It is a div that has a top and bottom image to give it a rounded box appearance. The box is missaligned and all attempts to correct the css have not worked. Any ideas would be appreciated. Here's a link to vie the referenced issue. http://www.webgirlwebdesigns.com/testing/StPauls/staff.html
<!-- BEGIN: CONTENT -->
		<div id="wide_content">
		<div id="wide-content-top">
		<div id="wide-content-bot">
		<div class="innerpad clearfix">
<!--[if !IE]>INTI GLOBAL POSTPAGE FUNCTIONS<![endif]-->
<div id="post-index">
  <!--[if !IE]>INIT NORMAL BLOG CONTENT<![endif]-->  
  <!-- TemplateBeginEditable name="content-wide" -->
  <h1 class="post-title"><a href="http://www.webgirlwebdesigns.com/testing/StPauls/?p=1" rel="bookmark" title="St. Pauls Episcopal Church welcomes you!">St. Pauls </a></h1>
 
  <div class="post-content">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <!-- TemplateEndEditable -->
  <div class="clear-fix"></div>
  <span class="article_seperator">&nbsp;</span>
  <div class="clear-fix"></div>
  <div id="post-navigator">
    <div class="alignright"></div>
    <div class="alignleft"></div>
    </div>
  <div class="clear-fix"></div>
</div>
</div>
</div></div></div>
<!-- END: CONTENT -->

Open in new window

0
Comment
Question by:LisaWilcox
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 9
20 Comments
 
LVL 14

Expert Comment

by:amar31282
ID: 24051635
Please replace the following two classes as given below

#wide-content-bot
{
background:transparent url(../images/wide-content-bot.gif) no-repeat scroll left bottom;
}
 
#wide-content-top {
background:transparent url(../images/wide-content-top.gif) no-repeat scroll left top;
}

Open in new window

0
 
LVL 14

Expert Comment

by:amar31282
ID: 24051650
The bottom image will be aligned properly but i couldn't find the top image.


0
 
LVL 1

Author Comment

by:LisaWilcox
ID: 24051869
As you can see the top image and bottom are there, but there is still an alignment issue and some stray background to boot. http://www.webgirlwebdesigns.com/testing/StPauls/staff.html


/* PRIMARY COLUMN
--------------------------------------------------------- */
#content-top {
background: url(../images/content-top.gif) no-repeat top;
}
#wide-content-top {
background:transparent url(../images/wide-content-top.gif) no-repeat scroll left top;
}
#content-bot {
	background: url(../images/content-bot.gif) no-repeat bottom;
}
#wide-content-bot {
	background:transparent url(../images/wide-content-bot.gif) no-repeat scroll left bottom;
}
 
#content div.innerpad {
	clear: both;
	margin: 0;
	padding: 20px;
	display: block;
	height: 300px;
}
 
html>body #content div.innerpad {
	height: auto;
}

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 14

Expert Comment

by:amar31282
ID: 24052090
but i couldn't fine
#content-bot  and #content-top  implemented in the code
0
 
LVL 1

Author Comment

by:LisaWilcox
ID: 24052169
<!-- BEGIN: CONTENT -->
            <div id="wide_content">
            <div id="wide-content-top">
            <div id="wide-content-bot">
            <div class="innerpad clearfix">
<!--[if !IE]>INTI GLOBAL POSTPAGE FUNCTIONS<![endif]-->
<div id="post-index">
  <!--[if !IE]>INIT NORMAL BLOG CONTENT<![endif]-->  
  <!-- InstanceBeginEditable name="content-wide" --><img src="images/gwynne.jpg" width="163" height="171" hspace="12" style="float:left"/>
  <p><strong>Rev. Gwynne Wright, Interim Priest,</strong> is a graduate of Seabury Western Theological  Seminary where she currently serves as Secretary for the Board of  Trustees.&nbsp; Before going to seminary Mother. Gwynne spent several years in  executive management in IBM and Arthur Andersen specializing in organizational  development and mergers and acquisitions.&nbsp; She feels that God was always  preparing her for ordained ministry as that experience is well suited for  interim ministry.&nbsp; Mother Gwynne is currently a candidate for a Doctor of  Ministry with the Graduate Theological Foundations.&nbsp; Her studies have  included Anglican Spirituality in Oxford, England.&nbsp;In her spare time,  Mother. Gwynne visits her stepchildren and grandchildren in England and raises  and shows Cairn Terriers.<strong> </strong>Mother Gwynne  has commented: &quot;It is evident that the Spirit is alive in the generous  hearts of the people of St. Paul's.&quot;   <strong> </strong></p>
  <p><strong>&nbsp;</strong></p>
  <p>&nbsp;</p>
  <p><img width="163" height="171" src="/images/clip_image002_0002.png" align="left" hspace="12" alt="Text Box:  " /><strong> </strong></p>
  <p><strong>Anna  Dee Lastick, Parish Administrator,</strong> is a life long Episcopalian, she has been at St.  Paul's since September 2004. Anna Dee holds degrees in Psychology and Social  Work M.S.S.W., UT. Prior to St. Pauls, in Chicago, she worked in  administrative capacities at U.I.C., DePaul University, and in business  settings.  She lives in Cortland with her husband Bob, who sings  in the St. Paul's choir.&nbsp; She loves gardening, Shakespeare, classical  music, her four dogs, two rabbits and other assorted critters.&nbsp; </p>
  <p>&nbsp;</p>
  <p><strong>&nbsp;</strong></p>
  <p>&nbsp;</p>
  <p><img width="163" height="171" src="/images/clip_image004.png" align="left" hspace="12" alt="Text Box:  " /><strong> </strong></p>
  <p><strong>&nbsp;</strong></p>
  <p><strong>Lorraine Langer, Director of Music,  and Choirs</strong> has over 30 years experience teaching, as well as directing <strong>Adult, Youth &amp; Childrens Choirs</strong> in  churchs that include the Episcopal, Catholic, Presbyterian, Methodist, Baptist  and Lutheran faiths. She joined the staff at St. Pauls  in 2005. She has a gift and passion for performing, and teaching voice  to all ages and has a private voice studio in DeKalb. She grew up on a farm in  Northfield, Minnesota in a family of thirteen children. Lorraine received a  Bachelor of Arts from the College of St. Scholastica in Duluth, Minnesota, and  a Master of Arts from Northeastern Illinois University in Chicago.   </p>
<div class="post-content">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
  <!-- InstanceEndEditable -->
  <div class="clear-fix"></div>
  <span class="article_seperator">&nbsp;</span>
  <div class="clear-fix"></div>
  <div id="post-navigator">
    <div class="alignright"></div>
    <div class="alignleft"></div>
    </div>
  <div class="clear-fix"></div>
</div>
</div>
</div></div></div>
            <!-- END: CONTENT -->
0
 
LVL 14

Expert Comment

by:amar31282
ID: 24053730
I can't find any div where have you used the classes content-top and content-bot in page.
0
 
LVL 1

Author Comment

by:LisaWilcox
ID: 24054152
I had them as div id's not classes. Perhaps that would be my issue.
0
 
LVL 14

Expert Comment

by:amar31282
ID: 24054173
ah sorry i should have written ids but ids are also not present with these names
0
 
LVL 1

Author Comment

by:LisaWilcox
ID: 24054286
I'm using wide-content top wide-content bot and wide-content. I've attached a pdf of the code with a sticky note referencing the code.
staff.pdf
0
 
LVL 1

Author Comment

by:LisaWilcox
ID: 24056322
I did some tweaks and it's a little better but not quite
http://www.webgirlwebdesigns.com/testing/StPauls/staff.html
I changed the following:

#wide_content {
      float: left;
      width: 100%;
      background: url(../images/wide-content-center.gif) repeat-y ;
}

#wide-content-top {
background:transparent url(../images/wide-content-top.gif) no-repeat top;
}

#wide-content-bot {
      background:transparent url(../images/wide-content-bot.gif) no-repeat bottom;
}
0
 
LVL 14

Accepted Solution

by:
amar31282 earned 500 total points
ID: 24067867
Hi  Lisa,

Sorry for late reply i was little busy.

Now what you want to achieve cannot be done directly the way you are using.

you have to provide the top part, content part, and bottom part individually..

now if you want that the top image should be 300px in height then you have to provide this height explicitly and you can put some content in it.

just replace the part i have provided below and replace the two css files(change extensions).


If this page is of fixed height(static) then you should use the vertical gradient to repeat the middle part and use left and right round corners to give round shape.

try my code and let me know.

Regards,
Amarjit
<div id="container" class="clearfix">
            <!-- BEGIN: CONTENT -->
            <div id="wide-content-top">
                <div id="innerpadtop clearfix">
                    <div>
                        <!--[if !IE]>INIT NORMAL BLOG CONTENT<![endif]-->
                        <!-- InstanceBeginEditable name="content-wide" -->
                        <img src="staff_files/gwynne.jpg" style="float: left;" width="163" height="171" hspace="12">
                        <p>
                            <strong>Rev. Gwynne Wright, Interim Priest,</strong> is a graduate of Seabury Western
                            Theological Seminary where she currently serves as Secretary for the Board of Trustees.&nbsp;
                            Before going to seminary Mother. Gwynne spent several years in executive management
                            in IBM and Arthur Andersen specializing in organizational development and mergers
                            and acquisitions.&nbsp; She feels that God was always preparing her for ordained
                            ministry as that experience is well suited for interim ministry.&nbsp; Mother Gwynne
                            is currently a candidate for a Doctor of Ministry with the Graduate Theological
                            Foundations.&nbsp; Her studies have included Anglican Spirituality in Oxford, England.&nbsp;In
                            her spare time, Mother. Gwynne visits her stepchildren and grandchildren in England
                            and raises and shows Cairn Terriers.<strong> </strong>Mother Gwynne has commented:
                            "It is evident that the Spirit is alive in the generous hearts of the people of
                            St. Paul's."&nbsp;&nbsp; <strong></strong>
                        </p>
                    </div>
                </div>
            </div>
            <div id="wide_content">
                <div id="innerpad clearfix">
                    <div id="post-index">
                        <!--[if !IE]>INIT NORMAL BLOG CONTENT<![endif]-->
                        <!-- InstanceBeginEditable name="content-wide" -->
                      
                        <p>
                            <strong>&nbsp;</strong></p>
                        <p>
                            &nbsp;</p>
                        <p>
                            <img src="staff_files/clip_image002_0002.htm" alt="Text Box:  " width="163" align="left"
                                height="171" hspace="12"><strong> </strong>
                        </p>
                        <p>
                            <strong>Anna Dee Lastick, Parish Administrator,</strong> is a life long Episcopalian,
                            she has been at St. Paul's since September 2004. Anna Dee holds degrees in Psychology
                            and Social Work M.S.S.W., UT. Prior to St. Pauls, in Chicago, she worked in administrative
                            capacities at U.I.C., DePaul University, and in business settings. &nbsp;She lives
                            in Cortland with her husband Bob, who sings in the St. Paul's choir.&nbsp; She loves
                            gardening, Shakespeare, classical music, her four dogs, two rabbits and other assorted
                            critters.&nbsp;
                        </p>
                        <p>
                            &nbsp;</p>
                        <p>
                            <strong>&nbsp;</strong></p>
                        <p>
                            &nbsp;</p>
                        <p>
                            <img src="staff_files/clip_image004.htm" alt="Text Box:  " width="163" align="left"
                                height="171" hspace="12"><strong> </strong>
                        </p>
                        <p>
                            <strong>&nbsp;</strong></p>
                        <p>
                            <strong>Lorraine Langer, Director of Music, and Choirs</strong> has over 30 years
                            experience teaching, as well as directing <strong>Adult, Youth &amp; Childrens Choirs</strong>
                            in churchs that include the Episcopal, Catholic, Presbyterian, Methodist, Baptist
                            and Lutheran faiths. She joined the staff at St. Pauls in 2005. She has a gift
                            and passion for performing, and teaching voice to all ages and has a private voice
                            studio in DeKalb. She grew up on a farm in Northfield, Minnesota in a family of
                            thirteen children. Lorraine received a Bachelor of Arts from the College of St.
                            Scholastica in Duluth, Minnesota, and a Master of Arts from Northeastern Illinois
                            University in Chicago. &nbsp;&nbsp;</p>
                        <div class="post-content">
                            <p>
                                &nbsp;</p>
                            <p>
                                &nbsp;</p>
                        </div>
                        <!-- InstanceEndEditable -->
                        <div class="clear-fix">
                        </div>
                        <span class="article_seperator">&nbsp;</span>
                        <div class="clear-fix">
                        </div>
                        <div id="post-navigator">
                            <div class="alignright">
                            </div>
                            <div class="alignleft">
                            </div>
                        </div>
                        <div class="clear-fix">
                        </div>
                    </div>
                </div>
            </div>
            <div id="wide-content-bot">
                &nbsp;
            </div>
        </div>

Open in new window

configurations.txt
style.txt
0
 
LVL 14

Expert Comment

by:amar31282
ID: 24067914
also change this id in style.css necessary for IE8

#containerwrap, #containerwrap-cm, #containerwrap-c, #containerwrap-f {
      padding: 0;
      text-align:center;
}

0
 
LVL 14

Expert Comment

by:amar31282
ID: 24067933
you may need to change the text alignments in the child divs as needed
0
 
LVL 1

Author Comment

by:LisaWilcox
ID: 24079452
I've tried to make adjustments to the child divs and adjust image and it's still view weird for me.
http://www.webgirlwebdesigns.com/testing/StPauls/staff.html
0
 
LVL 14

Expert Comment

by:amar31282
ID: 24079540
well i am sorry to say but you have not used my code at all.

So please first try with ID:24067867 and ID:24067914
0
 
LVL 1

Author Comment

by:LisaWilcox
ID: 24079550
oh I'm sorry I thought I did. let me retry it.
0
 
LVL 14

Expert Comment

by:amar31282
ID: 24131908
Hi Lisa,

Sorry but i couldn't find any reasons for B grade.
I think i did more than normal
Can you please explain the reason..

Regards,
Amarjit

0
 
LVL 1

Author Comment

by:LisaWilcox
ID: 24131922
I still couldn't get the information you sent me to work. I copied all of the code and css changes, but it's not working. So I scrapped that page style and I'm revamping it. I appreciate all you have done though.
0
 
LVL 14

Expert Comment

by:amar31282
ID: 24131938
Actually the issues is at your end .

your css styling is not correct.

Please check this link if it helps you

http://www.webmasterworld.com/forum83/200.htm
0
 
LVL 1

Author Comment

by:LisaWilcox
ID: 24131953
I haven't uploaded the changes since they weren't working.
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question