- This topic is empty.
July 3, 2012 at 5:47 am #38749
Can someone please advise why when I add in a relative div (boxy2v class) into my layout, but the box moved to the wrong position as I see in dreamweaver (it suppose to stay on top/overlap between T1 (right end) and T2 (bottom left) div). Now the box is displayed at the (top overlap) bottom of ABC, 123 and top of T1 which is totally out of the position I put. Besides, the text inside this div is displayed outside of the the container below. Did I put my div for the boxy2v class in the wrong place or I have the wrong css setting? I can’t use absolute position because I need to use while loop to display this multiple times using the same classes.please advise.
July 3, 2012 at 6:47 am #105283
no.. i can’t use it because i am using php while loop to display multiple records by using the same div.. so there is no way I can use absolute since that will only fix in first record and others won’t be there.. i did try that and that was the result I got unless I did it wrongly.. please adviseJuly 3, 2012 at 8:11 am #105286SenffParticipant
I’m also not really sure what you’re trying to do, but here’s a few tips that may get you in the right direction.
Give the green box a top of 0 and left of 0, and you’ll see where it would end up without any specific positioning (in my case, top left). Then with adding values to top and left, you can position it better.
float:left, like all the other blocks. That way, it’ll interact the same way as the other blocks do with eachother. If you don’t do that, the default placement is top left.
Instead of using
position:relative, use margins to position the block where you want it.
Just a few suggestions you might want to look into!July 3, 2012 at 10:28 am #105295
alicia, do you have a mockup you could share with us. I strongly believe you’re going about this all wrong… I’d love to be able to help you out.
Incidentally, the browsers are displaying it correctly, while DW is not (another reason I said DW is a pile of dung in your other thread). The position of boxy2v is where you’ve set it, and the text inside of it is overflowing because the previous floats are displacing it.July 3, 2012 at 10:30 am #105296
chris, may i know why your script works with absolute but not mine? is there something wrong with my original code.. i tried to compare mine with yours but I didn’t see any difference but the still my green box doesn’t show on the right position but yours did.. please advise what I have missed. thanksJuly 3, 2012 at 10:32 am #105297
hi wolfcry, what mockup you meant? I was trying out the layout by using the code I have above… may I know where you think I have done wrongly?July 3, 2012 at 10:37 am #105299
another one that I tried with absolute position. It looks fine in dreamweaver (on top of bottom c and top d div) but when it loads in browser, it moved to far right.. I tried to figure out whats wrong but failed.. hopefully someone can give me an idea what I have done wrong,.. thanks
July 3, 2012 at 10:45 am #105300
dear wolfcry, thanks for your comment.. do you mind to explain a little further about :
the text inside of it is overflowing because the previous floats are displacing it.
Did you mean my text is too long and the div below push it to other position? if that is the case, what is the right way to get what I want?July 3, 2012 at 11:02 am #105304
by mockup I mean can you show us a pic of what you want this to look like with some fake content (other than abc, green div, etc.)
I’ll explain the overflowing text being displaced by the floats, but the remedy most likely is to completely redo the html, but again I don’t know without seeing some substantial content and without knowing the desired rendering.
Let’s jump down to the boxy2botbox classed div (terrible class names btw). This div has a set height and 5 child divs (as stated in the other thread, too many divs). The first 4 divs are floats, which are taken out of the document flow, but their content will displace inline boxes of elements left in the document flow. The fifth child (green box) div begins at the top left corner of the boxy2botbox, because the previous siblings were removed from document flow. Because the green box has a set width and height, its displayed as such. But the inline box within the div containing the text ‘green box’ has been displaced by the floats. If you remove the height and width of .boxy2v you’ll see that div grow to encompass its text node. The green div is actually rendered 20px down and right of the top left of its parent because of the position relative and the top and right offsets you’ve given it. I hope this helps explain why its rendering this way. I realize it doesn’t help in fixing things, but I need more information to help you.July 3, 2012 at 11:08 am #105305
i just tried to change the boxbox position to relative and it fixed the boxview absolute position issue. now it can displayed on the correct position.. if i keep this way of writing the css, will it cause any major issue in my page? i tried to check with multiple type of browsers and all looks fine.. please advise tq
by the way, if I don’t put div for each of the content I want to put, what will be the right way to do it since you said there are too many div inside a container.. if I don’t use div, I won’t able to separate the div with different style and content right? need your advise again.. thanksJuly 3, 2012 at 11:19 am #105306
divs and span are structural elements – they have no semantic value (even if you give appropriate id or class names). The content should be marked up describing what it is. In your example, what is ABC? what is 123, T1, T2, green box? Are they headers? Is this tabular data? I’m beginning to think it is, and if so, tables are the correct method in marking up the data.
Again, it’s difficult if not impossible to answer your questions correctly without more information.July 3, 2012 at 2:15 pm #105318
i thought div can load faster than table?July 4, 2012 at 10:13 am #105375
to display e-ticket with thumbnail and info in a boxJuly 4, 2012 at 10:20 am #105376Paulie_DMember
We’re all struggling to work out how this is supposed to look…. at least I am.
Can you please provide us with an image of a couple of rows of the table (ideally with some example content) so we can all visualise what it is you are trying to achieve?
- The forum ‘CSS’ is closed to new topics and replies.