PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Thu Oct 22, 2020 4:10 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 19 posts ]  Go to page 1, 2  Next
Author Message
PostPosted: Thu Aug 28, 2014 9:08 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
I am adjusting some responsive web sites.
On Desktop on I have something like this:

Syntax: [ Download ] [ Hide ]
<style>
.leftbox
{
float: left; width: 400px;
}
.rightbox
{
float: right; width: 400px;
}
</style>

<div class='leftbox'>
video here
</div>

<div class='rightbox'>
content here
</div>

 


But when the screenis viewed at 500 pixels, I Want the leftbox to appear at the top of the screen, but right now it comes at the bottom.
So is there a way to give a DIV priority, or do changing the ordering of the DIVs, but still make them appear as required?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Thu Aug 28, 2014 10:55 am 
Offline
Forum Newbie

Joined: Tue Aug 12, 2014 7:33 am
Posts: 18
I cannot duplicate in Firefox or Chrome, at least not with the information given. Video appears on top in both.


Top
 Profile  
 
PostPosted: Thu Sep 11, 2014 4:39 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
How would I do this for multiple DIVs?
Say, for a mobile optimized responsive site. so when it crushes down to narrow, the DIVs all change order.

I'm guessing it is with parent and child, but how do you specify the order of the child DIVs? If you have 10 for example..?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Thu Sep 11, 2014 5:27 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
They don't typically all change order. Left to right generally becomes top to bottom. Do you have an example of what you're trying to accomplish?

_________________


Top
 Profile  
 
PostPosted: Thu Sep 11, 2014 5:33 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Not yet.
We will have a product page with two columns. In each other is information. Left column has photo, then description, then some other stuff.
Right column has price. any reduced price, ratings, and then other stuff.

I want so that if it goes mobile, Price appears below description... as one example.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Thu Sep 11, 2014 5:38 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
What happens to what's currently below description?

_________________


Top
 Profile  
 
PostPosted: Thu Sep 11, 2014 5:44 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Right now you would have (not yet built) something like this:

Syntax: [ Download ] [ Hide ]
<div class='rightbox'>
<div class='price'>text here</div>
<div class='pricedrop'>text here</div>
<div class='ratings'>text here</div>
</div>

<div class='leftbox'>
<div class='description'>text here</div>
<div class='boxforotherstuff'>text here</div>
</div>
 

The Right box is floated right, the left box is floated left.

I would of course display the float, And looking at it now, I don't think I can even move Price to be in the leftbox div.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Thu Sep 11, 2014 6:16 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
Perhaps not. What about .boxforotherstuff? If that gets hidden, say, then the whole thing is moot and it will display how you want.

_________________


Top
 Profile  
 
PostPosted: Thu Sep 11, 2014 6:26 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
But that may be needed.

The issue is, as far as I know, you cannot have one box float left, and then several boxes floating right. The 'several' have to be in a box... accomodating them, that's floating right.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Thu Sep 11, 2014 6:38 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
Depends. You can certainly have something like this: http://codepen.io/anon/pen/aElxk

_________________


Top
 Profile  
 
PostPosted: Thu Sep 11, 2014 6:43 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Oh I didnt' realise that.
So with that in mind, is there a way to 'order' those divs via CSS?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Thu Sep 11, 2014 6:49 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
Again, depends. The order in the markup should be meaningful. What did you have in mind?

_________________


Top
 Profile  
 
PostPosted: Thu Sep 11, 2014 6:54 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
well lets say on a product page, the product name is on the right, below that is the price in the other 'right' div, and the photo is in the left div.
But when on mobile, the product name div is at the top, then the photo div, then the other 'right' div.

How would you achieve that?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Thu Sep 11, 2014 6:58 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
Same way as above. Just move the first right block above the left.

_________________


Top
 Profile  
 
PostPosted: Thu Sep 11, 2014 6:59 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
Couldn't edit the pen, but like so: http://codepen.io/anon/pen/jiryh

_________________


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 19 posts ]  Go to page 1, 2  Next

All times are UTC - 5 hours


Who is online

Users browsing this forum: Bing [Bot] and 5 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group