14 replies [Last post]
timothy-c-anderson
timothy-c-anderson's picture
Offline
newbie
Last seen: 12 years 19 weeks ago
Timezone: GMT-5
Joined: 2010-03-19
Posts: 8
Points: 9

Hi everyone,

This is my first post here so please forgive me if I'm asking in the wrong place, or too soon. I have a somewhat unique question, which should be easy to answer but hard to find the answer to.

If you look at my design, I'm trying to get the blue 1 px border for the top menu buttons to overlap the white 1 px border of the container div. Is this possible? Or do I need to use something besides CSS borders for what I want to do?

And also, could anyone help me find a simple way of adding (believable-looking) shadows to the sides of the layout? I just want it to look like it's hovering a few inches above the background.

Any advice will really help.

Thanks.

Sincerely,

Tim

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>
New Design
</title>
</head>
 
<body>
<div id="contentwrapper">
<div id="pagetop">
<div id="tmcontact">
<ul>
<li><a href="#" title="Have more questions? Click here for our FAQ">
FAQ
</a>
</li>
</ul>
</div>
<div id="tmplants">
<ul>
<li><a href="#" title="Link 3">
Plants
</a>
</li>
</ul>
</div>
<div id="tmlinks">
<ul>
<li><a href="#" title="Link 2">
Links
</a>
</li>
</ul>
</div>
<div id="tmhome">
<ul>
<li><a href="#" title="Anderson's Hosta Acres Home">
Home
</a>
</li>
</ul>
</div>
</div>
<div id="titlehead">
<a href="index.htm" title="Anderson's Hosta Acres Home">
<img src="images/logo.jpg" alt="Anderson's Hosta Acres Home" />
</a>
</div>
<div id="titlemenu">
<div id="tmaboutus">
<ul>
<li><a href="#" title="Have more questions? Click here for our FAQ">
Hostas? What?
</a>
</li>
</ul>
</div>
<div id="tmproducts">
<ul>
<li><a href="#" title="See a list of all of our products">
Inventory
</a>
</li>
</ul>
</div>
</div>
<div id="body">
<div id="rightbodyimgs">
<div id="pic1">
<ul>
<li>
</li>
</ul>
</div>
<div id="pic2">
<ul>
<li>
</li>
</ul>
</div>
<div id="pic3">
<ul>
<li>
</li>
</ul>
</div>
<div id="pic4">
<ul>
<li>
</li>
</ul>
</div>
</div>
<div id="webcontent">
<p>
<h1>
Welcome!
</h1>
At Anderson Acres we have approximately 500 varieties of hostas. 
Some are mature, large hostas, to save our customers growing time if needed. We also sell at the Farmer's Market in Minneapolis at Lyndale and Olson Memorial Hwy. Our farm is a four generation family farm located in Historical Bluff Country of Southeastern Minnesota.
</p>
<p>
Prices on Hostas usually assume 1 stem on most collector's (unusual) varieties. We also have classic hostas usually sold with more than one stem.  Prices are negotiable for large multistemed Hostas to save you years of growing and to have an impressive garden quickly if it fits your budget.
</p>
<p>
We also grow a few Designer Daylilies and other perennials.
</p>
<p>
<h2>
Hours
</h2>
<table border="0">
<tr>
<td>
<b>
Tuesday:
</b>
</td>
<td>
10:00 A.M. - 6:00 P.M.
</td>
</tr>
<td>
<b>
Wednesday:
</b>
</td>
<td>
10:00 A.M. - 6:00 P.M.
</td>
</tr>
<tr>
<td>
<b>
Thursday:
</b>
</td>
<td>
10:00 A.M. - 6:00 P.M.
</td>
</tr>
<tr>
<td>
<b>
Friday:
</b>
</td> 
<td>
10:00 A.M. - 6:00 P.M.
</td>
</tr>
<tr>
<td>
<b>
Saturday:
</b>
</td>
<td>
10:00 A.M. - 6:00 P.M.
</td>
</tr>
<td>
<b>
Sunday:
</b>
</td>
<td>
1:00 P.M. - 6:00 P.M.
</td>
<tr>
<td>
<b>
Monday:
</b>
</td>
<td>
Closed
</td>
</tr>
</table>
</p>
<p>
<h2>
Contact
</h2>
24102 260th St.
<br />
Fountain, MN 55935-4909
</p>
<p>
(507) 352-2451
<br />
Email: 
<a href="mailto:[email protected]" title="Email us">
andacres@hmtel.com
</a> 
</p>
<p>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;safe=off&amp;client=firefox-a&amp;ie=UTF8&amp;q=anderson+acres+fountain,+mn&amp;fb=1&amp;split=1&amp;gl=us&amp;cid=4802375513119606877&amp;li=lmd&amp;ll=43.745305,-92.1698&amp;spn=0.347233,0.583649&amp;z=10&amp;output=embed">
</iframe>
<br />
<small>
<a href="http://maps.google.com/maps?hl=en&amp;safe=off&amp;client=firefox-a&amp;ie=UTF8&amp;q=anderson+acres+fountain,+mn&amp;fb=1&amp;split=1&amp;gl=us&amp;cid=4802375513119606877&amp;li=lmd&amp;ll=43.745305,-92.1698&amp;spn=0.347233,0.583649&amp;z=10&amp;source=embed" style="color:#0000FF;text-align:left" target="_blank">
View Larger Map
</a>
</small>
</p>
</div>
</div>
<div id="footermenu">
<div id="mapb">
<ul>
<li><a href="#" title="Download Adobe Reader">
Adobe
</a>
</li>
</ul>
</div>
<div id="pricesb">
<ul>
<li>
<a href="files/andersonacreshostas09.pdf" title="Right-click &amp; then 'Save Target As...'">
Hostas
</a>
</li>
</ul>
</div>
<div id="topb">
<ul>
<li><a href="#" title="Go to the top of the page">
Top
</a>
</li>
</ul>
</div>
</div>
<div id="footer">
<div id="footerinset">|
<a href="#" title="Site hierarchy">
Site Map
</a>
&nbsp;|
<a href="mailto:[email protected]" title="Give us feedback">
Feedback
</a>
&nbsp;|
<a href="#" title="Frequently Asked Questions">
FAQ
</a>
&nbsp;|
<a href="#" title="Ordering information">
Ordering Information
</a>
&nbsp;|
<br />
<br />
Design &copy;
<a href="#" title="Web design">
Tim Anderson
</a>
2009
<br />
Pattern textures by 
<a href="http://www.theinspirationgallery.com/" title="Website ornaments">
The Inspiration Gallery
</a>
</div>
</div>
</div>
</body>
</html>

CSS

a:link {
  color: #2d6f9e;
  text-decoration: underline;
}
a:visited {
  color: #000000;
  text-decoration: underline;
}
a:hover {
  color: #215272;
  text-decoration: none;
}
a img {
  border:  none;
}
body {
margin: 0px;
background-color: #131313;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
font-family: Geneva,Arial,Helvetica,sans-serif;
font-size: 14px;
color: #000;
}
#contentwrapper {
width: 784px;
height: 100%;
margin: 0px auto;
padding: 0px;
}
#pagetop {
width: 100%;
height: 43px;
margin: 0px auto;
padding: 0px;
background-image: url(images/titlemenubg.jpg);
border-top: 1px solid #fff;
}
#titlehead {
width: 100%;
height: 190px;
}
#titlemenu {
width: 100%;
height: 45px;
background-color: #2d6f9e;
background-image: url(images/titlemenubg.jpg);
}
#body {
width: 100%;
height: 1100px;
background-color: #fff;
}
#webcontent {
padding: 30px 150px 30px 50px;
width: 70%;
height: 1100px;
}
#rightbodyimgs {
padding: 50px 20px 0px 0px;
width: 200px;
height: 500px;
float: right;
}
#footermenu {
border-top: 3px solid #a4dae0;
width: 100%;
height: 133px;
background-color: #2d6f9e;
background-image: url(images/wp_damask_013.jpg);
}
#footer {
  border-top: 1px dashed #c1c1c1;
  height: 80px;
  width: 100%;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  color: #000;
  background-color: #c1c1c1;
  background-image: url(images/wp_damask_013.jpg);
}
#footerinset {
  margin: 15px 0px;
  height: 30px;
  width: 100%;
}
#footerinset a {
  color: #000;
  text-decoration: none;
}
#footerinset a:visited {
  color: #3a3a3a;
}
#footerinset a:hover {
  text-decoration: underline;
 }
#tmcontact ul {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  list-style-type: none;
}
#tmcontact li {
  height: 35px;
  width: 90px;
  display: inline;
  float: right;
}
#tmcontact a {
  padding: 13px 0px;
  text-decoration: none;
  font-weight: bold;
  display: block;
  text-align: center;
  color: #ffffff;
  height: 17px;
}
#tmcontact a:hover {
  border-top: 1px solid #359ee7;
  background: #183955 none repeat scroll 0% 50%;
  background-image: url(images/buttonoverlay.png);
  background-repeat: repeat-x;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}
#tmcontact a:visited {
  text-decoration: none;
  font-weight: normal;
}
#tmaboutus ul {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  list-style-type: none;
}
#tmaboutus li {
  height: 35px;
  width: 130px;
  display: inline;
  float: right;
}
#tmaboutus a {
  padding: 13px 0px;
  text-decoration: none;
  font-weight: bold;
  display: block;
  text-align: center;
  color: #ffffff;
  height: 17px;
}
#tmaboutus a:hover {
  border-bottom: 2px solid #fff;
  background: #b56d3e none repeat scroll 0% 50%;
  background-image: url(images/buttonoverlay.png);
  background-repeat: repeat-x;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}
#tmaboutus a:visited {
  text-decoration: none;
  font-weight: normal;
}
#tmlinks ul {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  list-style-type: none;
}
#tmlinks li {
  height: 35px;
  width: 90px;
  display: inline;
  float: right;
}
#tmlinks a {
  padding: 13px 0px;
  text-decoration: none;
  font-weight: bold;
  display: block;
  text-align: center;
  color: #ffffff;
  height: 17px;
}
#tmlinks a:hover {
  border-top: 1px solid #359ee7;
  background: #73b7ee none repeat scroll 0% 50%;
  background-image: url(images/buttonoverlay.png);
  background-repeat: repeat-x;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}
#tmlinks a:visited {
  text-decoration: none;
  font-weight: normal;
}
#tmproducts ul {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  list-style-type: none;
}
#tmproducts li {
  height: 35px;
  width: 90px;
  display: inline;
  float: right;
}
#tmproducts a {
  padding: 13px 0px;
  text-decoration: none;
  font-weight: bold;
  display: block;
  text-align: center;
  color: #ffffff;
  height: 17px;
}
#tmproducts a:hover {
  border-bottom: 2px solid #fff;
  background: #ae5754 none repeat scroll 0% 50%;
  background-image: url(images/buttonoverlay.png);
  background-repeat: repeat-x;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}
#tmproducts a:visited {
  text-decoration: none;
  font-weight: normal;
}
#tmplants ul {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  list-style-type: none;
}
#tmplants li {
  height: 35px;
  width: 90px;
  display: inline;
  float: right;
}
#tmplants a {
  padding: 13px 0px;
  text-decoration: none;
  font-weight: bold;
  display: block;
  text-align: center;
  color: #ffffff;
  height: 17px;
}
#tmplants a:hover {
  border-top: 1px solid #359ee7;
  background: #c2bf41 none repeat scroll 0% 50%;
  background-image: url(images/buttonoverlay.png);
  background-repeat: repeat-x;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}
#tmplants a:visited {
  text-decoration: none;
  font-weight: normal;
}
#tmhome ul {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  list-style-type: none;
}
#tmhome li {
  height: 35px;
  width: 90px;
  display: inline;
  float: right;
}
#tmhome a {
  padding: 13px 0px;
  text-decoration: none;
  font-weight: bold;
  display: block;
  text-align: center;
  color: #ffffff;
  height: 17px;
}
#tmhome a:hover {
  border-top: 1px solid #359ee7;
  background: #d46a3c none repeat scroll 0% 50%;
  background-image: url(images/buttonoverlay.png);
  background-repeat: repeat-x;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}
#tmhome a:visited {
  text-decoration: none;
  font-weight: normal;
}
#mapb ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#mapb li {
  margin: 7px 0px;
  height: 122px;
  width: 105px;
  display: inline;
  background-image: url(images/photos.png);
  background-repeat: no-repeat;
  float: right;
}
#mapb a {
  padding: 48px 0px 0px 0px;
  text-decoration: none;
  font-weight: bold;
  font-size: 15pt;
  display: block;
  text-align: center;
  color: #ffffff;
  height: 75px;
}
#mapb a:hover {
  padding: 48px 0px 0px 0px;
  background-image: url(images/photos2.png);
  background-repeat: no-repeat;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}
#mapb a:visited {
  text-decoration: none;
  font-weight: normal;
}
#pricesb ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#pricesb li {
  margin: 7px 0px;
  height: 122px;
  width: 130px;
  display: inline;
  background-image: url(images/prices.png);
  background-repeat: no-repeat;
  float: right;
}
#pricesb a {
  padding: 48px 0px 0px 0px;
  text-decoration: none;
  font-weight: bold;
  font-size: 15pt;
  display: block;
  text-align: center;
  color: #ffffff;
  height: 75px;
}
#pricesb a:hover {
  padding: 48px 0px 0px 0px;
  background-image: url(images/prices2.png);
  background-repeat: no-repeat;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}
#pricesb a:visited {
  text-decoration: none;
  font-weight: normal;
}
#topb ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#topb li {
  margin: 7px 0px;
  height: 122px;
  width: 130px;
  display: inline;
  background-image: url(images/map.png);
  background-repeat: no-repeat;
  float: left;
}
#topb a {
  padding: 48px 0px 0px 0px;
  text-decoration: none;
  font-weight: bold;
  font-size: 15pt;
  display: block;
  text-align: center;
  color: #ffffff;
  height: 75px;
}
#topb a:hover {
  padding: 48px 0px 0px 0px;
  background-image: url(images/map2.png);
  background-repeat: no-repeat;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}
#topb a:visited {
  text-decoration: none;
  font-weight: normal;
}
#pic1 ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#pic1 li {
margin: 10px 0px;
  height: 150px;
  width: 150px;
  display: inline;
  background-image: url(images/pic10.png);
  background-repeat: no-repeat;
  float: right;
}
#pic1 li:hover {
  background: none repeat scroll 0% 50%;
  background-image: url(images/pic7.png);
  background-repeat: no-repeat;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}
#pic2 ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#pic2 li {
margin: 10px 0px;
  height: 150px;
  width: 150px;
  display: inline;
  background-image: url(images/pic5.png);
  background-repeat: no-repeat;
  float: right;
}
#pic2 li:hover {
  background: none repeat scroll 0% 50%;
  background-image: url(images/pic4.png);
  background-repeat: no-repeat;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}
#pic3 ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#pic3 li {
margin: 10px 0px;
  height: 150px;
  width: 150px;
  display: inline;
  background-image: url(images/pic9.png);
  background-repeat: no-repeat;
  float: right;
}
#pic3 li:hover {
  background: none repeat scroll 0% 50%;
  background-image: url(images/pic8.png);
  background-repeat: no-repeat;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}
#pic4 ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#pic4 li {
margin: 10px 0px;
  height: 150px;
  width: 150px;
  display: inline;
  background-image: url(images/pic1.png);
  background-repeat: no-repeat;
  float: right;
}
#pic4 li:hover {
  background: none repeat scroll 0% 50%;
  background-image: url(images/pic3.png);
  background-repeat: no-repeat;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}

timothy-c-anderson
timothy-c-anderson's picture
Offline
newbie
Last seen: 12 years 19 weeks ago
Timezone: GMT-5
Joined: 2010-03-19
Posts: 8
Points: 9

Is there anyone who can help

Is there anyone who can help me with this?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Not sure what the problem is

Not sure what the problem is or what you're trying to achieve. On hover I see the menu items have a bottom white border - is this what you meant?

You could also position a div with a grey background underneath your main content div for the shadow.

Add this:

<div id="contentwrapper">
<div id="shadow"></div>

add this to your CSS:

#shadow {
  width: 784px;
  height: 100%;
  background: #333;
  margin: 0 auto;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: -1;
}

and modify #contentwrapper:

#contentwrapper {
background: #fff;
position: relative;
width: 784px;
height: 100%;
margin: 1em auto;
padding: 0px;
}

then see what happens Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

timothy-c-anderson
timothy-c-anderson's picture
Offline
newbie
Last seen: 12 years 19 weeks ago
Timezone: GMT-5
Joined: 2010-03-19
Posts: 8
Points: 9

Hello thepinapplehead, Thanks

Hello thepinapplehead,

Thanks for your response. I will attach two pictures so hopefully you can see what I'm trying to do. As you can see in the before picture, when you hover over a button in the top menu, the button will have a blue border over the top. However, the problem that I'm having is, I want that blue border to overlap over the white border above it, which is from the div containing the menu buttons.

Put another way: I want a blue border over the top of the a:hover menu buttons, but I also want that border to be over the white line above them (which I'm not sure how to do), as in the after.png picture.

I hope that's a little more clear. I understand it can be a little confusing.

Thanks for your help!

Tim

AttachmentSize
before.png 22.5 KB
after.png 22.5 KB
thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Do you have any updated code

Do you have any updated code I can play with, or a link to the site if it's uploaded anywhere?

Verschwindende wrote:
  • CSS doesn't make pies

timothy-c-anderson
timothy-c-anderson's picture
Offline
newbie
Last seen: 12 years 19 weeks ago
Timezone: GMT-5
Joined: 2010-03-19
Posts: 8
Points: 9

Actually, that code should be

Actually, that code should be up to date. I haven't changed it since my first post. It isn't uploaded anywhere, either.

Is there anything else that might help you?

Thanks for your time,

Tim

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

It was just that your images

It was just that your images (before and after) show a different result to what I'm getting using the code provided. I don't get a white or blue border?

It might help if you attach any images your page uses so I can download them and look at it locally.

Verschwindende wrote:
  • CSS doesn't make pies

timothy-c-anderson
timothy-c-anderson's picture
Offline
newbie
Last seen: 12 years 19 weeks ago
Timezone: GMT-5
Joined: 2010-03-19
Posts: 8
Points: 9

That's very odd because they

That's very odd because they show up fine for me, just copying and pasting the above code into my text editor and saving it.

The borders are only 1px so they may be hard to see. You will notice that when you hover over a button the text will shift down a little bit. It may be almost unnoticeable, but I can't let it go unfixed.

If you still need me to upload my project file I can definitely do do that. I'm on a slow connection right now though, so if I can avoid that it would be nice. Let me know.

Thank you again,

Tim

timothy-c-anderson
timothy-c-anderson's picture
Offline
newbie
Last seen: 12 years 19 weeks ago
Timezone: GMT-5
Joined: 2010-03-19
Posts: 8
Points: 9

Hi, I've uploaded the site

Hi,

I've uploaded the site with latest revisions to this url:

http://www.infinityblade.com/tk425/AHA%20Redone/

Sorry for the wait. Thanks for your help!

Regards,

Tim

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

I must apologise, I was

I must apologise, I was looking at completely the wrong place on the page, I didn't even notice there were links at the top Tongue

The first thing I would do is condense your menu, it would make it a lot easier to see what's going on where and easier to apply rulesets to the right elements. This:

<div id="pagetop">
<div id="tmcontact">
<ul>
<li><a href="#" title="Have more questions? Click here for our FAQ">
FAQ
</a>
 
</li>
</ul>
</div>
<div id="tmplants">
<ul>
<li><a href="#" title="Link 3">
Plants
</a>
</li>
</ul>
</div>
<div id="tmlinks">
<ul>
<li><a href="#" title="Link 2">
Links
</a>
</li>
 
</ul>
</div>
<div id="tmhome">
<ul>
<li><a href="#" title="Anderson's Hosta Acres Home">
Home
</a>
</li>
</ul>
</div>
</div>

I would write as:

<ul id="topmenu">
  <li id="tm-contact"><a href="#" title="Have more questions? Click here for our FAQ">FAQ</a></li>
  <li id="tm-plants"><a href="#" title="Link 3">Plants</a></li>
  <li id="tm-links"><a href="#" title="Link 2">Links</a></li>
  <li id="tm-home"><a href="#" title="Anderson's Hosta Acres Home">Home</a></li>
</ul>

You can style it to match your existing menu. Give that a go, let us know if you need help styling it!

Verschwindende wrote:
  • CSS doesn't make pies

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 12 years 13 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

Add a negative top margin to

Add a negative top margin to your buttons, i.e.

#tmlinks a:hover {
  border-top: 1px solid #359ee7;
  margin-top: -1px;
  background: #73b7ee none repeat scroll 0% 50%;
  background-image: url(images/buttonoverlay.png);
  background-repeat: repeat-x;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;

As a side, your code seems a bit bulky. I would condense your CSS, it will be a time saver...

timothy-c-anderson
timothy-c-anderson's picture
Offline
newbie
Last seen: 12 years 19 weeks ago
Timezone: GMT-5
Joined: 2010-03-19
Posts: 8
Points: 9

Beautiful. Thanks to both of

Beautiful. Thanks to both of you!

Is there a less time-consuming way of condensing my code? I'm using Gedit & Bluefish right now; running Linux. I read something about doing a find/replace for line breaks but I'm not sure how I would do that.

Thanks!

Tim

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

If you want it

If you want it machine-readable, but not human-readable, then sure, you could remove all the spaces. In notepad2 at least, I don't know about your text-editor, just do a find and replace.
You should be able to highlight a line-break and then copy-paste it. Paste it into the "find" box (it will probably show up as an empty space, or a block, or some other symbol) and leave the "replace" box blank, then hit Replace All and all your whitespace should disappear!

For your CSS, you can condense a lot of rules down. For example,

body {
margin: 0px;
background-color: #131313;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
font-family: Geneva,Arial,Helvetica,sans-serif;
font-size: 14px;
color: #000;
}

can be written as:

body {
  margin: 0;
  background: #131313 url(images/bg.jpg) repeat-x;
  font: 14px Geneva,Arial,Helvetica,sans-serif;
  color: #000;
}

Verschwindende wrote:
  • CSS doesn't make pies

timothy-c-anderson
timothy-c-anderson's picture
Offline
newbie
Last seen: 12 years 19 weeks ago
Timezone: GMT-5
Joined: 2010-03-19
Posts: 8
Points: 9

Okay, Thanks again! I'll look

Okay,

Thanks again! I'll look into doing that.

I really appreciate your help.

Regards,

Tim

carolpaul
Offline
newbie
Last seen: 12 years 20 weeks ago
Timezone: GMT+8
Joined: 2010-05-12
Posts: 0
Points: 1

timothy-c-anderson

timothy-c-anderson wrote:

Hi,

I've uploaded the site with latest revisions to this url:

http://www.infinityblade.com/tk425/AHA%20Redone/

Sorry for the wait. Thanks for your help!

Regards,

Tim

Great!
I am a manager mainly on China legal consultation service and you know I mainly help international friends protect their business and rights in China. It is very very lucky that one customer in US tell us the place! Thank you so much,! I like it! I will introduce to my other international customers too!

Thank you so much and God bless you!

Carol
www.wincomchina.com.cn
www.wincomchina.com

Unpublished - spam? -Hugo.