...

View Full Version : Image Troubles



Kydavis77
05-14-2009, 03:50 PM
<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.



<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>

abduraooft
05-14-2009, 03:54 PM
As a first step, fix your document with a right DOCTYPE (http://www.alistapart.com/articles/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.

Kydavis77
05-14-2009, 03:56 PM
As a first step, fix your document with a right DOCTYPE (http://www.alistapart.com/articles/doctype).
Don't trust the display of any visual editors, other than real browsers like FF,Safari etc.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Done.

kyllle
05-14-2009, 03:57 PM
can you post the stylesheet please or a link to the site?

Kydavis77
05-14-2009, 04:03 PM
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

kyllle
05-14-2009, 04:21 PM
blank

Kydavis77
05-14-2009, 04:29 PM
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 =)

abduraooft
05-14-2009, 04:31 PM
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 (http://getfirebug.com) in FF)

Or do you want to remove that box entirely? Then you'd need to set a suitable height to your #logo, say

#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 (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how), 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 (http://naked.dustindiaz.com/))

kyllle
05-14-2009, 04:40 PM
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;}

Kydavis77
05-14-2009, 04:51 PM
[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?

kyllle
05-14-2009, 05:30 PM
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;}

Kydavis77
05-14-2009, 05:37 PM
Done. But now i have no image at the top=/

kyllle
05-14-2009, 05:43 PM
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?

kyllle
05-14-2009, 05:45 PM
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;}


<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>

Kydavis77
05-14-2009, 06:24 PM
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!!

Kydavis77
05-14-2009, 06:49 PM
One last question i promise:)

Someone told me to use relative sizes for the header so it shows up the same on different monitors? Any links on how to do this or a few tips would be much appreciated. TY

abduraooft
05-15-2009, 09:55 AM
Enclose all your markup inside body inside a wrapper element, like

<div id="wrap">
<!-- top,main, footer etc all goes here-->
</div> and then change your CSS like

body{
background:#8FE909 url(images/bckg.jpg) repeat-x scroll 0;
font-family:"Myriad Pro","Trebuchet MS",Arial;
font-size:14px;
/*border:1px solid #000000;
margin:20px 40px;*/
}
#wrap{
width:95%; /* now there is no need to apply widths to the inner elements which are supposed to stretch horizontally */
border:1px solid #000;
margin:0 auto;
}
#logo {/*style.css (line 15)*/
background:#78CE31 url(http://www.centralflccr.com/images/head_bckg.jpg) no-repeat scroll 0;
height:220px;
width:1175px;
}
#main {/*style.css (line 29)*/
background:#FFFFFF url(images/sidebar_bckg.gif) no-repeat scroll right top;
/*float:left;*/
}

Refer http://bonrouge.com/2c-hf-fullyfluid.php



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum