?
Solved

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

Posted on 2004-08-23
4
Medium Priority
?
209 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 220 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…
Suggested Courses

762 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