This is an update on a old thread. Does anyone know a tool that when I add images to this page they appear small but when a user clicks on them they become almost full screen with the option to pan the image if there screen is smaller ?
Unless I’m over looking something, when I’m searching but I can’t find nothing.
id=tut_base is immediately after class=tut_content, so they are related (as siblings). Perhaps I’m misunderstanding your question. Could you post a link? Some CSS?
In any case, something doesn’t look right. Why are tut_name, image and tut_content classes, but tut_middle is an ID? Wouldn’t tut_middle appear more than once (like the others), and hence need to be a class? Again, posting a full example might clarify the situation.
The Green areas of the page is where a graphic will be although the Green Areas of the page are a little taller then they should be I will fixed that once the graphics are complete. I’m trying to position the blue box beside the orange box but when I position it with margins the bottom green box moves as well and want to know what order did I put the code in that is causing this?
Hi, you really need to consider a restructure. You are havin to resort to huge negative margins to get the overlap of the backgrounds (-900px for example) and I refuse to help you try and get that working just on principle ;).
I’d nest the two boxes inside the gray element and that way the background will contain both of them (assuming the gray element has a clearing mechanism such as overflow/clearfix :))
I’m trying to position the blue box beside the orange box but when I position it with margins the bottom green box moves as well and want to know what order did I put the code in that is causing this?
You should be using floats to position elements beside each other. I don’t see any floats being used in the link you posted.
The clearing mechanism that Ryan mentioned would be for the floats.
That would just be a simple One Column layout with a header and footer. Then it would just have two floats in the middle div.
Applying a float moves the id=tut_base which I don’t want to have occur. I want tut_base to stay fixed where it’s at.
You are havin to resort to huge negative margins to get the overlap of the backgrounds (-900px for example) and I refuse to help you try and get that working just on principle
Huh ??
That would just be a simple One Column layout with a header and footer. Then it would just have two floats in the middle div.
That is my goal exactly what you had said Rayzur, one column and a header and a footer then place one box on one side, the the other on the other side then rotating the boxes vertically. I can’t get the “blue” box to rest beside the “orange” box, here is an update the changes are in the HTML (link in message #4)
Hi,
Something like this should get you pointed in the right direction.
You can adjust the margins on the floats as you desire. I set a 25px top and bottom padding on the middle div to eliminate top margins on the floats though.
That is a pretty good head start, I noticed how you nested the classes, something I don’t quite have down yet !
Although I copied a portion of the code because I want the layout to be as follows:
image - content
content - image etc
Not to jump to far ahead in the game, but just for record when the situation arises the content box will shrink or get larger based on how much content is written in the box. I suppose the last part is something jQuery be used for ?
If you need the height to be shrink to fit, then just don’t specify it? Or if you need a height to get the background showing (even with little/no content boxes) then you could set a min-height
Hi,
The problem with your updated code is that the additional floats you just added are not nested in the same div as the previous floats. They are not being contained so the BG color does not extend with them.
Although I copied a portion of the code because I want the layout to be as follows:
image - content
content - image etc
Not to jump to far ahead in the game, but just for record when the situation arises the content box will shrink or get larger based on how much content is written in the box.
Ok, you want your floats to stagger. That can be done, but in a real world situation where the content is a dynamic height it will give varied heights that will effect the floats.
You can prevent floats from snagging on each other or rising up below the taller float one of two ways.
Nest the paired floats in their own wrapping div
Set a clearing element after each pair of floats
If you are going to have an image and a content div in each pair then there is no need to wrap the image in a div. The best way to do this is to set up some classes for left and right floats. You can then use those classes on the image and the content div as they stagger. Since the text in your content div will be unpredictable you will need to prevent float snag with one of the two methods I mentioned. I am going to use method #2 by setting clear:both on a <br> tag in the code below. That is usually frowned upon, but in this case it is either that or an empty clearing div or an extra wrapping div for the paired floats.
I have removed the height:300px; from the content div and set different amounts of text to show what is going on.
In regards to my last post and the use of the <br> tag to clear the paired floats. I think a better way to handle this would be to wrap each pair of floats in a div. Either approach has to be done at the cost an extra element and a div would be the semantic way to do it in my opinion.