Solved

Help with site- CSS, design, etc, a few QUESTIONS comments welcome

Posted on 2004-08-23
4
201 Views
Last Modified: 2013-12-03
All I have so far is at http://www.caboosepro.com/dsc/index.html

I am a total newbie at CSS, but I am determined to use it for this site.

The page needs to work with all major browsers.

Also, any tips or tricks or appreciated and will get you points.  Any help with redundant css or improper/inefficient use is bonus.

I really appreciate this people! I will be monitoring this 24/7 until I get it.

____________
|QUESTIONS|
+-----------------------------------------------------------------------------------------------------+
1.  How can I get the google search located within the top black area (holds the horizontal navigation) and still maintain the single-line appearance?

2.  Would it be possible to get the same black appearance without use of a picture?

3.  How can I I get a div to house added images and effects behind the uppermost top_pics area (Above black area)?

4.  How can I easily add in a third column on the right, between the top and footer, to hold additional items like a news feed?

5.  At the updated site, on the bottom, what is a way I can split the text so 2204 Duke Street - Indianapolis, Indiana 46205 - U.S.A. - appears on left and the rest on right.  Of course this should be fluid to fit the size of the screen, res, etc..

Duke Security Corp. © 2004 | Disclaimer | Copyright |   <---on left and the rest on right
+-----------------------------------------------------------------------------------------------------+

Any/all suggestions,tips,tricks,comments,feedback about anything related is greatly appreciated and will be valuable to me.  

If you want more points add your answers to:
http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21094543.html
0
Comment
Question by:cduke250
  • 3
4 Comments
 
LVL 2

Accepted Solution

by:
Epistemo earned 55 total points
ID: 11878866
First question:
Don't know if you mean this:


<link rel="stylesheet" type="text/css" href="http://www.caboosepro.com/dsc/css/index.css"/>
<style type="text/css">
#googlesearch {overflow: hidden; color:#fff;}
</style>
</head>
<body>
<!-- Top area including pictures -->
<div id="top_pics">
      <div class="floatleft"><a href="http://www.caboosepro.com/dsc/index.html"><img src="images/logo_3.gif" alt="" height="70" width="57" border="0"/></a></div>
      <div class="floatright"><a href="http://we04.com"><img src="images/web04banner.gif" alt="" width="88" height="31" border="0"/></a></div>
      <!--<div style="float: left; margin: 0; padding: 0; border: 0;"><a href="http://www.caboosepro.com/dsc/index.html"><img src="images/bg2.gif" alt="" width="132" height="29" border="0"/></a></div>  -->                        
<h1>DUKE</h1>
<h2>SECURITY CORPORATION</h2>
</div>
<!-- Top horizontal navigational bar -->
<div id="bannernav">
      <ul id="bannernav1"><li id="active"><a href="http://www.caboosepro.com/dsc/index.html" id="current">dsc Home</a></li>
      <li><a href="http://www.caboosepro.com/dsc/about_us/index.html">About Us</a></li>
      <li><a href="http://www.caboosepro.com/dsc/services/index.html">Services</a></li>
      <li><a href="http://www.caboosepro.com/dsc/products/index.html">Products</a></li>
      <li><a href="http://www.caboosepro.com/dsc/learning/index.html">Learning Area</a></li>
      </ul>
<form method="get" id="googlesearch" action="http://www.google.com/custom" target="_blank"><input type="text" name="q" size="14" maxlength="255" value=""/> <input type="submit" name="sa" value="GO" style="font-size:1em; font-weight: bold; background-color:#5A933C; color:#fff; border-color:#AEEA90"/><input type="hidden" name="cof" value="S:http://www.caboosepro.com/dsc/;GL:0;VLC:#69BF3A;AH:left;LH:70;LC:#5A933C;L:http://www.caboosepro.com/dsc/images/logo_3.gif;ALC:#5A933C;LW:57;AWFID:06b1154700591ac5;"/><input type="hidden" name="domains" value="caboosepro.com"/><input type="radio" name="sitesearch" value=""/>www<input type="radio" name="sitesearch" value="caboosepro.com" />dsc</form>
</div>




--------------
second question:

Use background: #000
But make sure you use overflow:hidden other wise empty divs will enlarge in IE etc.

---------------

Fourth question:
You could do relative positioning of the divs.

See example.

<html>
<style>
div#main {boder:1px solid #000;}
div#left {width:150px; background:#000; float:left;}
div#center {background:#f00; float:left;}
div#right {width:150px;background:#000; float:right;}
</style>
<body>
<div id="main">
<div id="left"> s</div>
<div id"center"> s</div>
<div id="right"> s</div>
</div>
</body>
</html>

---------------
fifth question:

<style>
.yep1 {float:left;}
.yep2 {float:right;}
</style>

<div id="addresss">
<span class="yep1">2204 Duke Street   -   Indianapolis, Indiana 46205   -   U.S.A.</span>
<span class="yep2">1.800.899.5606 - 317.545.5165</span>
</div>

----------------

Third question:

I might not understand that one. But you can always use a background image in the div. (not span)
Or z-index the text to a higher level that the image.
So :

#text {z-index:100;}
#background4text {z-index:90;}

But to I think the background image is the best way to go ...
On the other hand ... didn't understand question 2 and 5 so .... lol
Just let me know what you mean.


Arno - aka: Epistemo
0
 
LVL 2

Expert Comment

by:Epistemo
ID: 11878902
Oops,
Spelled border wrong in fourth question and forgot the = in the center div id .... sorry.
0
 
LVL 3

Author Comment

by:cduke250
ID: 11882151
_________________
|Updated Questions|
+-----------------------------------------------------------------------------------------------------+
1. FIXED! Awesome Epistemo, You pointed me in the right direction and the google search is working great.  Check out the
updated site.

2.  Would it be possible to get the same black background appearance without use of a picture?  By this I mean on the left.
 If you look at the code you'll notice I am using a small gif tiled for my background.  I want to be able to just use the color black
 instead of a gif to speed up my site.  But only on the left area.

3.  Basically I want a div on the top of the site to hold the duke security logo and the web essentials logo.  Currently the site
gets messed up in firefox up at the top there.  

4.  How can I easily add in a third column on the right, between the top and footer, to hold additional items like a news feed?
(not important)

5.  FIXED!  Great advice Epistemo!  I wish I knew this a month ago!
+-----------------------------------------------------------------------------------------------------+

Keep the awesome answers coming!  Go to my other question and you get 150 points!
0
 
LVL 2

Expert Comment

by:Epistemo
ID: 11882654
Question 2: can you tell what the name of the div is?
Question 3: absolute position the logo's if needed.

do first a normal div. so....

#topholder {position:relative; }
#logo1 {position:absolute; top:5px; left:10px; border:0;}
#logo2 {position:absolute; top:5px; left:50px; border:0;}

<div id="topholder">
<img src="lala.gif" id="logo1"><img src="lalalala.gif" id="logo2">
</div>

Again ... I'm kind of lost ...if you have an image of what you are trying to do ... I might be able to help you better.
Just post the screen on that site as a jpg and I'll take a peek.

Question 4 means a redesign, yet making a div and float it to the right could do it.
Then before the footer do a  <div style="clear:both;"> </div> statement or some browsers will screw up your footer and drop it higher then you want to to go.

0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

706 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now