[56K WARN] boxes with css

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
User avatar
mudkicker
Forum Contributor
Posts: 479
Joined: Wed Jul 09, 2003 6:11 pm
Location: Istanbul, TR
Contact:

[56K WARN] boxes with css

Post by mudkicker »

Image

As you can see with a transparent red mark. i just want the left boxes (blog boxes don't slip below the information box. I just want them cover the information box... :roll:

Here is the css codes for the 2 types of boxes...

Code: Select all

div.blogbox {
background-color: #f6f6f6;
border: 1px solid #ededed;
margin-right: 5px;
margin-bottom: 8px;
position: relative;
}

#box {
	width: 200px;
	height: auto;
	float: right;
	clear: left;
	margin: 10px;
	font-size: 0.9em;
	background-color: #eee;
	border: 1px solid #ccc;
	padding: 5px;
	vertical-align: top;
	position: relative;
	z-index: 100;
}
Your help is really appreciated.. :wink:
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

set z-index for box to 0 and blog-box to 1,2,3,..100 whatever greater you wish ;)
timvw
DevNet Master
Posts: 4897
Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium

Post by timvw »

don't really understand what you are trying to accomplish, but meaby some playing with the z-index ?
User avatar
mudkicker
Forum Contributor
Posts: 479
Joined: Wed Jul 09, 2003 6:11 pm
Location: Istanbul, TR
Contact:

Post by mudkicker »

i want them like it's static there (info box) and the blog boxes left of it doesn't go to the right below this box..
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

have ya tried my method :?:
User avatar
mudkicker
Forum Contributor
Posts: 479
Joined: Wed Jul 09, 2003 6:11 pm
Location: Istanbul, TR
Contact:

Post by mudkicker »

you misunderstood me. or i couldn't explain it :(

i don't want blog boxes on top of my info box. i just want them surround this info box.

i just drawn what i was thinking like this (well it's funny but i hopu you'll get my problem :D :D :D ) -->

Image
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

ok, now I gotcha :!: :) Nice Art you have here lol :lol:

welll mebbe use tables for this ;)
or rrrr.... set a different width for the overlapping blog boxes.

and tell me how any of this comes along.
User avatar
mudkicker
Forum Contributor
Posts: 479
Joined: Wed Jul 09, 2003 6:11 pm
Location: Istanbul, TR
Contact:

Post by mudkicker »

i don't think tables can handle it, must be with css.. but how? because tables are more strict in positioning.. :(
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

set their width %ages according to content's width. It requires a little math here, baby. :wink:
User avatar
mudkicker
Forum Contributor
Posts: 479
Joined: Wed Jul 09, 2003 6:11 pm
Location: Istanbul, TR
Contact:

Post by mudkicker »

well.. nope.. it's still the same... it doesn't do what i want to do..
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

well i can help you in arranging the way first blog-box is
but how d'you suppose to do the second blog-box trick - the way it is protruding below the info box thing
User avatar
mudkicker
Forum Contributor
Posts: 479
Joined: Wed Jul 09, 2003 6:11 pm
Location: Istanbul, TR
Contact:

Post by mudkicker »

the second box must not protrude, it should stay left to it not over it...
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

then try my second suggestion .
set the width for first 2 blog-boxes to about 220px less than screen width because your info-box's width is 200px . So that should do the trick ;)
User avatar
mudkicker
Forum Contributor
Posts: 479
Joined: Wed Jul 09, 2003 6:11 pm
Location: Istanbul, TR
Contact:

Post by mudkicker »

well all infos in all boxes come dynamically, this is not a good idea mate.. it can make problems :roll: it can be solved with css but how.. i saw many sites like this... but now i cant remember which they are.. :evil:
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

ok lets see. you want the blog-boxes in such way that they dont ovelap info-box right ?
next all your info loades dynamically into these boxes right ?
but the thing is, see the blog-boxes should never be greater than say about 600px to satisfy first condition.
So you can safely assume a maximum width of 600 px for your blog-boxes ;)
Post Reply