Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

positioning, coloring, etc.

Status
Not open for further replies.
rodentcentre

rodentcentre

MIS
Jan 7, 2005
124
US
I have a site that I am designing and need some help with positioning and coloring. The layout is basically
Code: 
|-----|----------------------------|
|     | |------| |------| |------| |
|     | |      | |      | |      | |
|NAV  | | BOX  | | BOX  | | BOX  | |
|     | |------| |------| |------| |
|     |                            |
|     | |------| |------| |------| |
|     | |      | |      | |      | |
|     | | BOX  | | BOX  | | BOX  | |
|     | |------| |------| |------| |
|     |                            |
|_____|                            |
|                                  |
|----------------------------------|

The NAV portion holds the navigation of the application. Each of the BOXes holds a particular site (clinic) and how many assets are currently deployed to that site as well as how many open support tickets there are. The application is driven in classic ASP from a SQL 2000 backend (in case you wanted to know). I would like to know how I can do the following:
Have a new BOX created for each site retrieved from the database and aligned and sized properly; I would like to have 3 BOXes across and as many as needed going down the page. I would like the size (width) to accomodate for 40 characters wide and be the same height across the board (it will store the site abbreviation (max 10 chars), a space, a hyphen, a space, and then the site description (max 50 chars) on one line, Assets Deployed: <number> on another line, and Open Tickets: <number> on another line; if the site description wraps to the next line it needs to take it into account and keep all of the BOXes the same height). When a user hovers the mouse over the BOX I would like for the BOX to have a gradient color and when the mouse leaves I would like the original color to come back, also in the hovering action I would like for the whole BOX to act as a hyperlink to take the user to the main support page for that site. I hope I am making myself clear enough, I suck at design and layout so I'm trying my best. thanks.
 
Sort by date Sort by votes

What have you tried so far?

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
You could make boxes as link elements. If you float them, they will be block items and will be able to look like boxes. That way you can easily employ the hover effect. As for the rest, make the containers (probably absolutely positioned nav vs. relatively positioned content would be easiest. You could try floats, but it my look awkward if nav is not long enough. Do boxes with floats. If you have trouble doing that, read top left corner -- these are forums for professional, not for giving tutorials or writing code for other people.
 
Upvote 0 Downvote
BillyRay, here is what I have (minus the NAV portion)...DISCLAIMER: like I said before I suck at design and layout so I really have little clue as to exactly how everything works with CSS, I could do this with a simple table layout but I want to try and do it tableless
Code: 
<style type="text/css">
	.box {float:left; border:1px solid black; width:250px;padding:1px;margin:5px 10px; display:block}
	.code {color: navy}
	ul {position: relative; top: -15px; list-style-type:none}
	li {margin: 0 0 0 -20px}
	
</style>
<script type="text/javascript" charset="ISO-8859-15">
	function Highlight(value){
		value.style.backgroundColor = 'red';
	}
	
	function Unhighlight(value){
		value.style.backgroundColor = 'white';
	}
</script>
</head>

<body>
<div class="box" id="box1" onmouseover="Highlight(this)" onmouseout="Unhighlight(this)" onclick="javascript: document.location = 'index.htm'">
	<span class="code">AMC</span> - Ramsey Medical Center
	<ul>
		<li>Assets Deployed: 4,670</li>
		<li>Open Walkthroughs: 150</li>
	</ul>
</div>
<div class="box" id="box2" onmouseover="Highlight(this)" onmouseout="Unhighlight(this)" onclick="javascript: document.location = 'index.htm'">
	<span class="code">AMC</span> - Coon Rapids Medical
	<ul>
		<li>Assets Deployed: 1,240</li>
		<li>Open Walkthroughs: 36</li>
	</ul>
</div>
<div class="box" id="box3" onmouseover="Highlight(this)" onmouseout="Unhighlight(this)" onclick="javascript: document.location = 'index.htm'">
	<span class="code">ABBT</span> - Abbott Northwestern
	<ul>
		<li>Assets Deployed: 4,246</li>
		<li>Open Walkthroughs: 212</li>
	</ul>
</div>

This is kind of how I want it done but it is very plain and could use some sprucing up. I would like to have, when the mouse is hovered over any of the DIV's, to have the cursor turn into a hand (like when you hover over a normal hyperlink), and also have the hovered DIV take on more of a gradient type color combo. Can it be done?? Thanks again.

Vragabond, whats up with the attitude?? I can't be a fricken expert at everything so I am looking for help...next time I'll ask if the question is "professional" enough to be answered.
 
Upvote 0 Downvote
rodentcentre, your first post gave us little to work with or little to help you. I explained the procedures on how to do that but not knowing clearly what you're after I didn't know if those procedures made any sense. I just warned you that if you came here to get someone to write the code for you, you came to the wrong place. As I said, based on information you gave us, I couldn't know what exactly you were after and not providing any code I felt compelled to warn you this is not the place to get someone to write one for you.

Now that that is off the way, let's see.

You can add the 'link' cursor for your boxes by simply adding [tt]cursor: pointer;[/tt] to your .box definition. I would prefer to simply do it by floating <a> boxes (as I said earlier, <a> when floated will become a block level element and by having width and height will look just like a div. Using that approach has good and bad sides:

Good: changing background and linking will be much easier. you can change the background by just changing it in the :hover state, no JS necessary; linking is default behaviour of <a> elements, again no JS and you automatically get the hand cursor.

Bad: You lose the option of having many different elements inside your block. Lists cannot be nested in links, so you would have to do that with spans.

Weigh in the options and decide. Oh, and if you want to go with just changing backgroundcolor to background image, use this:
Code: 
    function Highlight(value){
        value.style.background = 'url(hoverstate.gif)';
    }
    
    function Unhighlight(value){
        value.style.background = 'url(normalstate.gif)';
    }
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Carlvic
  • Locked
  • Question
Web Development Tools, Plugins &amp; Etc Suggestions 1
Replies
4
Views
168
ChrisHirst
ChrisHirst
lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
153
vacunita
vacunita
ggriffit
  • Locked
  • Question
strange div positioning 1
Replies
9
Views
185
ggriffit
ggriffit
Blueie
  • Locked
  • Question
Positioning Twitter box? 1
Replies
7
Views
209
1DMF
1DMF
c0deM0nK424
  • Locked
  • Question
Problem with positioning Logo, Search Box and Language Bar OUTSIDE of the navbar (Bootstrap) 1
Replies
2
Views
130
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top