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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Image Troubles

  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Image Troubles

    Code:
     
    <div id="top">
          	<div id="name"><a href="#">Website Name</a></div>
            <div id="split"></div>
         	<div style="border-top:6px solid #7abb37; background-color:blue; ">
            <div id="slogan"> Your company slogan or other text here</div>
            <div id="contact_us"><a href="#">Sitemap</a></div>
            </div>
          </div>
    That is the code I am having trouble with. I am using CoffeCup to design this site using a template. I want to delete the box with the "Your Image Here" deal. But when i do that in Visual Editor it takes away the entire top image. I just want the the the header image without the image box inside it. Here is the full code for the page.

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    	<!-- header -->
          <div id="top">
          	<div id="name"><a href="#">Website Name</a></div>
            <div id="split"></div>
         	<div style="border-top:6px solid #7abb37; background-color:blue; ">
            <div id="slogan"> Your company slogan or other text here</div>
            <div id="contact_us"><a href="#">Sitemap</a></div>
            </div>
          </div>	
          <div id="logo">
          <div id="logo_text">
          Lorem ipsum dolor sit amet, consectetuer 
          adipiscing elit. Pellentesque lobortis nibh 
          eu mauris. Morbi arcu tortor, auctor et, 
          facilisis nec, egestas sit amet, enim.
    	</div>
       
        <div id="menu">
            <a href="#">Home</a>|
            <a href="#">About Us</a>|
            <a href="#">Services</a>|
            <a href="#">Pricing</a>|
            <a href="#">Contacts</a>
        </div> 
        </div>
        <!--end header -->
        <!-- main -->
        <div id="main">
              <div id="sidebar">
              	<h2>Lorem Ipsum</h2>
                <div class="item"><a href="#"><img src="images/picture.jpg" alt=" " /></a>
                <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum sem.</span>            </div>
                <div class="item"><a href="#"><img src="images/picture.jpg" alt=" " /></a>
               	<span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum sem.</span>            </div>
               
              </div>
              <div id="text" >
                    <h1><span>Welcome</span></h1>
                    <p><strong>Compus </strong> is a free template created by <a href="http://www.realitysoftware.ca/">Reality Software</a> and released by <a href="http://www.flash-gallery.org/">Flash Gallery</a> under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, which means you can use it in any way you want provided you keep links to authors intact.</p>
                    <ul>
                      <li>Lorem ipsum dolor sit amet.</li>
                      <li>Consectetuer adipiscing elit.</li>
                      <li>Maecenas ac lacus. Etiam quis ante.</li>
                      <li>Nullam accumsan metus sit amet est.</li>
                      <li>Nullam diam. Nunc ac ipsum at nisl pretium congue.</li>
                    </ul>
                    <h1><span>Lorem ipsum dolor</span></h1>
                    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum sem. Nullam a eros. Vivamus vestibulum hendrerit arcu. Integer a orci. Morbi nonummy semper est. Donec at risus sed velit porta dictum. Maecenas condimentum orci aliquam nunc. Morbi nonummy tellus in nibh. Suspendisse orci eros, dapibus at, ultrices at, egestas ac, tortor. Suspendisse fringilla est id erat. Praesent et libero. Proin nisi felis, euismod a, tempus varius, elementum vel, nisl. Fusce non magna sit amet enim suscipit feugiat. Fusce et leo.</p>
               
    <p class="additional">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lobortis nibh eu mauris. Morbi arcu tortor, auctor et, facilisis nec, Nulla neque nisl, luctus sit amet, varius ac, tincidunt ut, 
            tellus. Proin dignissim sapien et urna. Morbi orci nisi, feugiat rutrum, tempus a,  Curabitur eu nisl. Vivamus venenatis venenatis pede. Curabitur nibh mauris, pharetra quis, mattis sed, ma
                    lesuada vitae, sem. Mauris pede iaculis eget, dapibus ac, neque. Sed libero lectus, bibendum ac, volutpat at, convallis nec, mi. Mauris felis elit, ultrices a, fringilla in, </p>
          </div>
        </div>
        <!-- end main -->
        <!-- footer -->
        <div id="footer">
        <div id="left_footer">&copy; Copyright 2009 <strong>Your Website</strong></div>
        <div id="right_footer">
    
        </div>
    </div>
        <!-- end footer -->
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    As a first step, fix your document with a right DOCTYPE.
    But when i do that in Visual Editor it takes away the entire top image.
    Don't trust the display of any visual editors, other than real browsers like FF,Safari etc.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Kydavis77 (05-14-2009)

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    As a first step, fix your document with a right DOCTYPE.
    Don't trust the display of any visual editors, other than real browsers like FF,Safari etc.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Done.

  • #4
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    can you post the stylesheet please or a link to the site?

  • #5
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    body { margin:20px 40px; font-size:0.9em; font-family: "Myriad Pro", "Trebuchet MS", Arial; font-size:14px; border:1px solid #000; background: url(images/bckg.jpg) repeat-x #8fe909; }
    a { color:#64a520; text-decoration:none;}
    a:hover { text-decoration:underline;}
    p { padding: 0 10px 5px 10px; }
    h1 { text-transform:uppercase; font-size:18px; color:#fff; }
    h1 span { background-color:#477b1d; padding:0 10px;}
    
    #top { height:30px; background-color:#477b1d;border-bottom:4px solid #000; }
    #name { float:left; border-left:20px solid #70c32e; border-right:20px solid #70c32e;}
    #name a{ color:#fff; font-weight:bold; font-size:24px; text-transform:uppercase; background-color:#70c32e; text-decoration:none;}
    #split { float:left; height:30px; width:20px; border-left:3px solid #000000;}
    #slogan { float:left; color:#fff; text-transform:uppercase; padding:3px 0 0 10px;}
    #contact_us{ float:right; background-color:#7abb37;height:20px;  padding:2px 5px;}
    #contact_us a { color:#fff; text-transform:uppercase; text-decoration:none; }
    #logo { background:url(images/head_bckg.jpg) no-repeat #78ce31;}
    #logo_text { float:right; width:200px; height:80px; background-color:#70c32e; margin:40px 20px 53px 0; font-family: Tahoma, Arial; font-size:11px; color:#fff; padding:10px; font-weight:bold; }
    #menu { background:#70c32e; height:21px; width:600px; margin: 0 auto; clear:both; border:1px solid #a8f534; text-align:center;  color:#fff; padding-top:4px;}
    #menu a { color:#fff; font-size:14px; text-transform:uppercase; font-weight:bold; text-decoration:none; margin:0 20px; margin-top:3px;}
    #menu a:hover{ color:#d4ffa1}
    .item img { background-color:#fff; padding:6px; border:1px solid #d0d0d0;}
    .description { display:block; float:right; width:220px; padding: 10px 20px 20px 0; line-height:12px; font-family:Tahoma, Arial;}
    p.additional { margin:0 10px; color:#9c9c9c; font-size:10px; line-height:12px; border-top:1px solid #bdbdbd; padding: 10px 0; font-weight:normal; font-family:Tahoma, Arial;}
    
    #text { margin: 0 292px 0 0;  padding:10px;}
    #text li { list-style:none; padding-left:20px; background:url(images/li.gif) no-repeat 0px 4px;line-height:18px;}
    #sidebar { float:right; width:245px; padding: 20px 20px 0 30px; font-size:10px; }
    #sidebar a{ font-weight:bold; }
    #sidebar h2 { margin:0; padding:0 0 20px 0; text-transform:uppercase; color:#000; font-size:18px;}
    
    #main { float:left; background:url(images/sidebar_bckg.gif) no-repeat top right #fff; }
    #footer { background:url(images/footer_bckg.gif) repeat-x #000; height:55px; clear:both;  }
    #left_footer { float:left; padding:20px 0 0 30px; color:#fff; font-size:12px;}
    #left_footer a { color:#fff;}
    #left_footer a:hover { text-decoration:none;}
    #right_footer { float:right;  padding:20px 30px 0 0; color:#fff;  font-size:12px; text-align:right;}
    #right_footer a { color:#fff;}
    Here is a link to the site. I just uploaded the template for now.

    www.centralflccr.com

  • #6
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    blank
    Last edited by kyllle; 05-14-2009 at 03:27 PM.

  • #7
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Maybe I wasnt clear enough.

    At the very top where the computer logo is. Next to that is the image box that says
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lobortis nibh eu mauris. Morbi arcu tortor, auctor et, facilisis nec, egestas sit amet, enim.
    I want the box with the text in it gone.

    Sorry if a nub, I am trying my best =)

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I want the box with the text in it gone.
    The layout stays there, even when I remove the text in that box (tried using firebug in FF)

    Or do you want to remove that box entirely? Then you'd need to set a suitable height to your #logo, say
    Code:
    #logo {/*style.css (line 15)*/
    background:#78CE31 url(images/head_bckg.jpg) no-repeat scroll 0;
    height:180px;
    }
    Your header looks good, though your way of displaying the logo is not correct. To make it semantic, it is to placed by an <img> tag instead, after isolating it from your current big header background image. (Or in other words, you logo should be visible, even in the naked CSS)
    Last edited by abduraooft; 05-14-2009 at 03:37 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    set a height and width for in #logo equivalent to the width of your webpage and the height of the image and do this


    in html:
    <div id="logo"></div>

    delete:
    <div id="logo_text">
    Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit. Pellentesque lobortis nibh
    eu mauris. Morbi arcu tortor, auctor et,
    facilisis nec, egestas sit amet, enim.
    </div>

    This is what you should have in the #logo css
    #logo { background:url(http://www.centralflccr.com/images/head_bckg.jpg) no-repeat #78ce31; width: 925px; height: 220px;}
    Last edited by kyllle; 05-14-2009 at 03:44 PM.

  • #10
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    [quote]set a height and width for in #logo equivalent to the width of your webpage and the height of the image and do this[quote]

    Last question then I should have this.

    Where do I set the hight and width? In the css file?
    Last edited by Kydavis77; 05-14-2009 at 04:04 PM.

  • #11
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    replace the current #logo in the css file with

    #logo { background:url(http://www.centralflccr.com/images/head_bckg.jpg) no-repeat #78ce31; width: 925px; height: 220px;}

  • #12
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Done. But now i have no image at the top=/

  • #13
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    did you add <div id="logo"></div> and delete <div id="logo_text">
    Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit. Pellentesque lobortis nibh
    eu mauris. Morbi arcu tortor, auctor et,
    facilisis nec, egestas sit amet, enim.
    </div>
    in your html?

  • #14
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    Code:
    body { margin:20px 40px; font-size:0.9em; font-family: "Myriad Pro", "Trebuchet MS", Arial; font-size:14px; border:1px solid #000; background: url(images/bckg.jpg) repeat-x #8fe909; }
    a { color:#64a520; text-decoration:none;}
    a:hover { text-decoration:underline;}
    p { padding: 0 10px 5px 10px; }
    h1 { text-transform:uppercase; font-size:18px; color:#fff; }
    h1 span { background-color:#477b1d; padding:0 10px;}
    
    #top { height:38px; background-color:#7ABB37;border-bottom:4px solid #000; }
    #name { float:left; border-left:20px solid #70c32e; border-right:20px solid #70c32e;}
    #name a{ color:#fff; font-weight:bold; font-size:24px; text-transform:uppercase; background-color:#70c32e; text-decoration:none;}
    #split { float:left; height:30px; width:20px; border-left:3px solid #000000;}
    #slogan { float:left; color:#fff; text-transform:uppercase; padding:3px 0 0 10px;}
    #contact_us{ float:right; background-color:#7abb37;height:20px;  padding:2px 5px;}
    #contact_us a { color:#fff; text-transform:uppercase; text-decoration:none; }
    
    /***********this is the css code for your logo*/
    #logo { background:url(http://www.centralflccr.com/images/head_bckg.jpg) no-repeat #78ce31; width: 925px; height: 220px;}
    /************************************/
    
    #menu { background:#70c32e; height:21px; width:600px; margin: 0 auto; clear:both; border:1px solid #a8f534; text-align:center;  color:#fff; padding-top:4px;}
    #menu a { color:#fff; font-size:14px; text-transform:uppercase; font-weight:bold; text-decoration:none; margin:0 20px; margin-top:3px;}
    #menu a:hover{ color:#d4ffa1}
    .item img { background-color:#fff; padding:6px; border:1px solid #d0d0d0;}
    .description { display:block; float:right; width:220px; padding: 10px 20px 20px 0; line-height:12px; font-family:Tahoma, Arial;}
    p.additional { margin:0 10px; color:#9c9c9c; font-size:10px; line-height:12px; border-top:1px solid #bdbdbd; padding: 10px 0; font-weight:normal; font-family:Tahoma, Arial;}
    
    #text { margin: 0 292px 0 0;  padding:10px;}
    #text li { list-style:none; padding-left:20px; background:url(images/li.gif) no-repeat 0px 4px;line-height:18px;}
    #sidebar { float:right; width:245px; padding: 20px 20px 0 30px; font-size:10px; }
    #sidebar a{ font-weight:bold; }
    #sidebar h2 { margin:0; padding:0 0 20px 0; text-transform:uppercase; color:#000; font-size:18px;}
    
    #main { float:left; background:url(images/sidebar_bckg.gif) no-repeat top right #fff; }
    #footer { background:url(images/footer_bckg.gif) repeat-x #000; height:55px; clear:both;  }
    #left_footer { float:left; padding:20px 0 0 30px; color:#fff; font-size:12px;}
    #left_footer a { color:#fff;}
    #left_footer a:hover { text-decoration:none;}
    #right_footer { float:right;  padding:20px 30px 0 0; color:#fff;  font-size:12px; text-align:right;}
    #right_footer a { color:#fff;}
    Code:
    <body>
    	<!-- header -->
          <div id="top">
          	<div id="name"><a href="#">Website Name</a></div>
            <div id="split"></div>
         	<div style="border-top:6px solid #7abb37; background-color:blue; ">
            <div id="slogan"> Your company slogan or other text here</div>
            <div id="contact_us"><a href="#">Sitemap</a></div>
            </div>
            </div>
        <div style="clear: both;"></div>
    
    <!--This is the html for your logo-------------------->     
    <div id="logo"></div>
    <!------------------------------------------------->
    
        <div id="menu">
            <a href="#">Home</a>|
            <a href="#">About Us</a>|
            <a href="#">Services</a>|
            <a href="#">Pricing</a>|
            <a href="#">Contacts</a>
        </div> 
        </div>
        <!--end header -->
    
        <!-- main -->
        <div id="main">
              <div id="sidebar">
              	<h2>Lorem Ipsum</h2>
                <div class="item"><a href="#"><img src="images/picture.jpg" alt=" " /></a>
                <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum sem.</span>            </div>
                <div class="item"><a href="#"><img src="images/picture.jpg" alt=" " /></a>
    
               	<span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum sem.</span>            </div>
               
              </div>
              <div id="text" >
                    <h1><span>Welcome</span></h1>
                    <p><strong>Compus </strong> is a free template created by <a href="http://www.realitysoftware.ca/">Reality Software</a> and released by <a href="http://www.flash-gallery.org/">Flash Gallery</a> under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, which means you can use it in any way you want provided you keep links to authors intact.</p>
    
                    <ul>
                      <li>Lorem ipsum dolor sit amet.</li>
                      <li>Consectetuer adipiscing elit.</li>
                      <li>Maecenas ac lacus. Etiam quis ante.</li>
                      <li>Nullam accumsan metus sit amet est.</li>
                      <li>Nullam diam. Nunc ac ipsum at nisl pretium congue.</li>
    
                    </ul>
                    <h1><span>Lorem ipsum dolor</span></h1>
                    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum sem. Nullam a eros. Vivamus vestibulum hendrerit arcu. Integer a orci. Morbi nonummy semper est. Donec at risus sed velit porta dictum. Maecenas condimentum orci aliquam nunc. Morbi nonummy tellus in nibh. Suspendisse orci eros, dapibus at, ultrices at, egestas ac, tortor. Suspendisse fringilla est id erat. Praesent et libero. Proin nisi felis, euismod a, tempus varius, elementum vel, nisl. Fusce non magna sit amet enim suscipit feugiat. Fusce et leo.</p>
               
    <p class="additional">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lobortis nibh eu mauris. Morbi arcu tortor, auctor et, facilisis nec, Nulla neque nisl, luctus sit amet, varius ac, tincidunt ut, 
            tellus. Proin dignissim sapien et urna. Morbi orci nisi, feugiat rutrum, tempus a,  Curabitur eu nisl. Vivamus venenatis venenatis pede. Curabitur nibh mauris, pharetra quis, mattis sed, ma
                    lesuada vitae, sem. Mauris pede iaculis eget, dapibus ac, neque. Sed libero lectus, bibendum ac, volutpat at, convallis nec, mi. Mauris felis elit, ultrices a, fringilla in, </p>
          </div>
        </div>
    
        <!-- end main -->
        <!-- footer -->
        <div id="footer">
        <div id="left_footer">&copy; Copyright 2009 <strong>Your Website</strong></div>
        <div id="right_footer">
    
    <!-- Please do not change or delete these links. Read the license! Thanks. :-) -->
    <a href="http://www.realitysoftware.ca/services/website-development/design/"><strong>Website design</strong></a> released by <a href="http://www.flash-gallery.org/"><strong>Flash Gallery</strong></a>
    
        </div>
    </div>
        <!-- end footer -->
    </body>

  • Users who have thanked kyllle for this post:

    Kydavis77 (05-14-2009)

  • #15
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow!

    TYVM for all your help! It was much appreciated.

    I had to delete the second line in the logo to and do some editing to the size.
    But all is well now!


    Thanks again, and I will recomend this site to anyone and everyone that needs any coding help!

    Big thumbs up!!
    Last edited by Kydavis77; 05-14-2009 at 08:16 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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