Solved

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

Posted on 2004-08-23
4
207 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Tool to email me when a website changes 29 147
Adjust the position 3 75
React or Angular? 6 95
object method as an event handler 8 75
When you work with shopping cart / ecommerce relates web sites, you need to pass the certain form post details to the payment gateway process page with required details for the products items you give to order. Also you may need to track the ordered…
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

734 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