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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts

    CSS Layout Issues With Images....

    Alright Guys

    I really need somebodies help I have been trying for a few days now and can't seem to get it to work.. Not sure what I am trying to do..

    I have already got a website up and running which is coded with html and css.. See here http://unlockingblueprints.com/

    And all I am trying to do is to add another part to it.. I am trying to take the following image and split it into several parts just like the module 1 sections..

    I have tried several ways and nothing will work correctly.. I need help big time....

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Byronwells,
    You can slip more module sections in there. Give them a different class name since this new one has different header, content and background images and then you can copy the others pretty closely.
    Something like this maybe -
    Code:
    	
    <!--Module Box Start -->
    	<div class="module-container-new">
    		<div class="header">
    			<div class="right"></div>
    			<div class="left"></div>
    				<div class="heading">
    					<h2><br>
    					<span></span></h2>
    				<!--end heading--></div>
    		<!--end header--></div>
    			<div class="content">
    				<div class="img"></div>
    					<h3></h3>
    					<p><span class="bold"></span></p>
    						<ul>
    							<li></li>
    						</ul>
    			<!--end content--></div>
    		<div class="bottom"></div>
    	<!--end module-container-new--></div>
    <!--Module Box End -->

    Then new your CSS would be directed at .module-container-new and it's child elements.
    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
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Byronwells,
    You can slip more module sections in there. Give them a different class name since this new one has different header, content and background images and then you can copy the others pretty closely.
    Something like this maybe -
    Code:
    	
    <!--Module Box Start -->
    	<div class="module-container-new">
    		<div class="header">
    			<div class="right"></div>
    			<div class="left"></div>
    				<div class="heading">
    					<h2><br>
    					<span></span></h2>
    				<!--end heading--></div>
    		<!--end header--></div>
    			<div class="content">
    				<div class="img"></div>
    					<h3></h3>
    					<p><span class="bold"></span></p>
    						<ul>
    							<li></li>
    						</ul>
    			<!--end content--></div>
    		<div class="bottom"></div>
    	<!--end module-container-new--></div>
    <!--Module Box End -->

    Then new your CSS would be directed at .module-container-new and it's child elements.
    I did try it like that way.. I copied the css code for the module sections and create a new class, called them different names. Then made the html code. Had everything showing in design view of dreamweaver correctly, but then when going to live view or browser view there would be a gap between the header section and the image that I was using for the background in that section..

    Don't know why

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Byronwells View Post
    I did try it like that way.. I copied the css code for the module sections and create a new class, called them different names. Then made the html code. Had everything showing in design view of dreamweaver correctly, but then when going to live view or browser view there would be a gap between the header section and the image that I was using for the background in that section..

    Don't know why
    I couldn't possibly know either without seeing what you tried.
    I can say that you should not use design view in DW! That is nothing like a browser, never has been.
    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

  • #5
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    I couldn't possibly know either without seeing what you tried.
    I can say that you should not use design view in DW! That is nothing like a browser, never has been.
    Right I just done what you've suggested in the first post And uploaded it to here http://unlockingblueprints.com/index1.html..

    My first issue is that the background image is not repeatedly correctly.. It needs to be exactly the same doesn't matter how big the box the will get..

    Here's the css for sections

    PHP Code:
    /* VideoModule Container */
    .videomodule-container    {
        
    margin:0 auto 0px;
        
    width:849px;
    }
    .
    videomodule-container .header    {
        
    margin:0 auto;
        
    width:849px;
        
    height:114px;
        
    background:url(../../images/salestemplate3_13.jpgno-repeat top;
    }
    .
    videomodule-container .right    {
        
    margin0 0 0 0;
        
    float:right;
    }
    .
    videomodule-container .left    {
        
    margin0 0 0 15px;
        
    float:left;
    }
    .
    videomodule-container .left .no    {
        
    margin:3px 0 0 22px;
        
    float:left;
    }
    .
    videomodule-container .right .no    {
        
    margin:3px 22px 0 0;
        
    float:right;
    }
    .
    videomodule-container .left .icon    {
        
    margin:34px 0 0 -28px;
        
    float:left;
    }
    .
    videomodule-container .right .icon    {
        
    margin:34px -28px 0 0;
        
    float:right;
    }
    .
    videomodule-container .heading    {
        
    padding:48px 0 0 0;
        
    text-aligncenter;
        
    width:422px;
        
    height:75px;
        
    margin:0 auto;
    }
    .
    videomodule-container h2    {
        
    font-family'MyriadPro-Bold';
        
    font-size:48px;
        
    color:#f9f9bd;
        
    text-aligncenter;
        
    line-height32px;
        
    margin:0;
    }
    .
    videomodule-container h2 span    {
        
    font-family'danielregular';
        
    font-size:18px;
        
    color:#FFF;
        
    text-aligncenter;
    }
    .
    videomodule-container .content    {
        
    backgroundurl(../../images/salestemplate3_16.jpg)repeat-y;
        
    margin:0 auto;
        
    padding:8px 45px 22px 45px;
        
    width:841px;
    }
    .
    videomodule-container .content .img    {
        
    margin:0 auto;
        
    text-align:center;
    }
    .
    videomodule-container h3    {
        
    font-family'MyriadPro-Bold';
        
    font-size30px;
        
    line-height38px;
        
    margin0 auto;
        
    padding32px 0 5px;
        
    text-aligncenter;
        
    width580px;
    }
    .
    videomodule-container p    {
        
    font-family'MyriadPro-Regular';
        
    font-size18px;
        
    line-height25px;
        
    padding2px 0 0;
        
    text-alignleft;
    }
    .
    videomodule-container ul    {
        
    padding:0px;
        
    margin:0px;
    }
    .
    videomodule-container ul li    {
        
    background:url(../images/arrow.pngno-repeat 36px 16px;
        
    padding:10px 0 0 58px;
        
    font-weight:bold;
        
    font-style:italic;
        
    font-size:18px;
    }
    .
    videomodule-container .bottom    {
        
    background:url(../images/module-bg-bottom.pngno-repeat center;
        
    height:42px;
        
    width:743px;
        
    margin:0px auto

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    My first issue is that the background image is not repeatedly correctly
    That's not a very repeatable background is it? It's doing just what you told it to, repeating itself on the Y-axis. You just need a better image.

    http://bit.ly/152EHSJ
    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


  •  

    Posting Permissions

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