some div questions, photo alignment

  • iochinome
  • Beginner
  • Beginner
  • iochinome
  • Posts: 42

Post 3+ Months Ago

so i am making a pretty simple website, but i want it to be viewable and not an eyesore. what i want is to have a photo on the main page that takes up half of the middle column- this is in a three coloumn layout, a middle and two sidebars. so far what i have is two <div>s in the main column, each set to float:left and taking up 50% of the width,so it gives a bit of a middle-division look. i am just trying to figure out how to make it so the photo always fits in the right <div>. i am guessing the solution probably lies in manipulating the user's screen width in pixels, but how do i get that number using php? is there some function? thanks guys, i appreciate it.
  • iochinome
  • Beginner
  • Beginner
  • iochinome
  • Posts: 42

Post 3+ Months Ago

apparently you cant really do this with php... well, its server-side, so that makes sense. i know i can get these values in javascript, but how do i pass that value on to php so i can insert it into something like

<img src="[source page]" width="<?PHP echo "$width" ?>">

thanks
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9092
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I am a little confused on what you are trying to do. Are you wanting the photo width to change depending on the size of the browser which affects your columns?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

[offtopic]Oh, by the way, this reminds me... how does this site changes the width of the images as you resize the window? Is it possible if I get a hold of that code? :P[/offtopic]
  • iochinome
  • Beginner
  • Beginner
  • iochinome
  • Posts: 42

Post 3+ Months Ago

well that is the point of my question, bogey. yes, bigwebmaster, i would like the image width to change based on the screensize, not necessarily the browser window size, but that may be necessary too. thx
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

Oh, ok. Than I wasn't offtopic :) I hope to find out the same thing if at all, possible.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9092
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

The only way to get the width and height of the browser is using Javascript. So if you wanted to use it with PHP, you would still need Javascript to pass that information. You could create some kind of Javascript code to do what you want, but I think overall its not going to be that user friendly. I would probably recommend against anything like this.

Have you ever consider just putting the width to 100% such as:

Code: [ Select ]
<img src="yourimage.jpg" width="100%">


I just did a test with 3 divs, with two floated left all set at 33% and the image that was set to 100% gets resized dynamically as the width of the browser changes. It basically takes up the width of the div that its in. If I put the width of the image to 50% it takes up half of the div that its in.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

I assumed this was going to be a simple percentage after Bogey explained what he was looking for...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

:lol: ok. Didn't think about width set to 100%. Should have known though, but I haven't. Thanks Bigweb for that.
  • iochinome
  • Beginner
  • Beginner
  • iochinome
  • Posts: 42

Post 3+ Months Ago

wow, thanks, that was much simpler than i thought. now my problem is getting a video in an <embed> tag to do the same. tried the width="x%", didnt work, however pixels did seem to work. anyway i can do the same with embed? thanks
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

For embed, you probably need to have Javascript for that thing...
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9092
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Yeah embed is going to be much trickier, especially since IE uses object, and browsers like Firefox use embed I believe (you can tweak object in a way so that FF uses it fine too so that your code will completely validate). Anyway because of all of this it would be more complicated to do compared to static images I am thinking. I would suggest experimenting around.

Here are a good link that I remember reading before which discusses how to completely avoid using the embed tag for standards purposes:

http://www.alistapart.com/articles/flashsatay/

You are most likely going to have to resort to using some kind of JavaScript as Bogey mentioned to accomplish what you want.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

Bigwebmaster wrote:
Yeah embed is going to be much trickier, especially since IE uses object, and browsers like Firefox use embed I believe (you can tweak object in a way so that FF uses it fine too so that your code will completely validate). Anyway because of all of this it would be more complicated to do compared to static images I am thinking. I would suggest experimenting around.

Here are a good link that I remember reading before which discusses how to completely avoid using the embed tag for standards purposes:

http://www.alistapart.com/articles/flashsatay/

You are most likely going to have to resort to using some kind of JavaScript as Bogey mentioned to accomplish what you want.

Nice post. Thanks :)
  • iochinome
  • Beginner
  • Beginner
  • iochinome
  • Posts: 42

Post 3+ Months Ago

k thx ill try that out
  • iochinome
  • Beginner
  • Beginner
  • iochinome
  • Posts: 42

Post 3+ Months Ago

okay, cool, the object thing seems like it might work, but what does the classid attribute mean? all i have seen is a bunch of ridiculously long strings of numbers... thanks
  • iochinome
  • Beginner
  • Beginner
  • iochinome
  • Posts: 42

Post 3+ Months Ago

also i have been thinking about this whole three-column thing. it seems that on most other sites like this, the columns on either side are adjustable, but the main-body one in the middle stays the same size. how do you do this such that everything is in proportion to your screen size? thanks
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

I've actually seen it more often the other way around for sites with 3 column layouts - sides are fixed and the center column is elastic. Here's a tutorial for that. If you really wanted content in the two outer columns and for them to be elastic, you can just switch the code around.
  • iochinome
  • Beginner
  • Beginner
  • iochinome
  • Posts: 42

Post 3+ Months Ago

so how do you make a thing of divs such that when you resize the window, they dont just go to the bottom? like they just stay where they are and the window just does not show them? thanks
  • iochinome
  • Beginner
  • Beginner
  • iochinome
  • Posts: 42

Post 3+ Months Ago

okay, so now i am thinking: what i really would like is a layout where there is a div that is always in the center of the page, and inside that would be all three of my columns, all of a fixed width, then when you make the page so small that the blank margins on the sides disappear, the columns dont realign or anything, the page just does not show the whole thing. i know i have seen this somewhere... any ideas? thanks
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Something like this?

HTML:
Code: [ Select ]
<div id="container">
    <div id="leftcol">left</div>
    <div id="midcol">middle</div>
    <div id="rightcol">right</div>
</div>
  1. <div id="container">
  2.     <div id="leftcol">left</div>
  3.     <div id="midcol">middle</div>
  4.     <div id="rightcol">right</div>
  5. </div>

CSS:
Code: [ Select ]
#container{
    border:1px solid black;
    position:relative;
    margin:0 auto;
    width:760px;
    height:400px;
    }
    
#leftcol{
    position:absolute;
    left:2px;
    top:10px;
    width:250px;
    height:350px;
    border:1px solid black;
    }
    
#midcol{
    position:absolute;
    left:253px;
    top:10px;
    width:250px;
    height:350px;
    border:1px solid black;
    }
    
#rightcol{
    position:absolute;
    left:504px;
    top:10px;
    width:250px;
    height:350px;
    border:1px solid black;
    }
  1. #container{
  2.     border:1px solid black;
  3.     position:relative;
  4.     margin:0 auto;
  5.     width:760px;
  6.     height:400px;
  7.     }
  8.     
  9. #leftcol{
  10.     position:absolute;
  11.     left:2px;
  12.     top:10px;
  13.     width:250px;
  14.     height:350px;
  15.     border:1px solid black;
  16.     }
  17.     
  18. #midcol{
  19.     position:absolute;
  20.     left:253px;
  21.     top:10px;
  22.     width:250px;
  23.     height:350px;
  24.     border:1px solid black;
  25.     }
  26.     
  27. #rightcol{
  28.     position:absolute;
  29.     left:504px;
  30.     top:10px;
  31.     width:250px;
  32.     height:350px;
  33.     border:1px solid black;
  34.     }

Post Information

  • Total Posts in this topic: 20 posts
  • Users browsing this forum: No registered users and 52 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.