|
How can I make my images in a div container line up like so?:
The Layout
The code I've been trying to manipulate is:
<br />
<style><br />
<br />
#content {<br />
width: 612px;<br />
float:right;<br />
}<br />
<br />
<br />
.contentObj {<br />
padding: 0px 0px 10px 10px;<br />
float:left;<br />
}<br />
<br />
</style><br />
<br />
<div id="content"> <br />
<div class="contentObj"><img src="images/welcome_1x4.jpg" alt="I am a square!" border="0"></div><br />
<div class="contentObj"><img src="images/PromoWindow_1.25x4.jpg" alt="I am a square!" border="0"></div><br />
<div class="contentObj"><img src="images/forhim_1x2.jpg" alt="I am a square!" border="0"></div><br />
<div class="contentObj"><img src="images/forher_1x2.jpg" alt="I am a square!" border="0"></div> <br />
<div class="contentObj"><img src="images/specialoffer_1x1.jpg" alt="I am a square!" border="0"></div> <br />
<div class="contentObj"><img src="images/specialoffer_1x1.jpg" alt="I am a square!" border="0"></div> <br />
<div class="contentObj"><img src="images/Itemofmonth_2x2.jpg" alt="I am a square!" border="0"></div> <br />
<div class="contentObj"><img src="images/specialoffer_1x1.jpg" alt="I am a square!" border="0"></div> <br />
<div class="contentObj"><img src="images/specialoffer_1x1.jpg" alt="I am a square!" border="0"></div> <br />
<div class="contentObj"><img src="images/specialoffer_1x1.jpg" alt="I am a square!" border="0"></div> <br />
<div class="contentObj"><img src="images/specialoffer_1x1.jpg" alt="I am a square!" border="0"></div> <br />
<div class="contentObj"><img src="images/Itemofmonth_2x2.jpg" alt="I am a square!" border="0"></div> <br />
<div class="contentObj"><img src="images/specialoffer_1x1.jpg" alt="I am a square!" border="0"></div> <br />
<div class="contentObj"><img src="images/specialoffer_1x1.jpg" alt="I am a square!" border="0"></div> <br />
</div> <br />
I thought float was meant to work horizontally then vertically. The trouble is I am getting gaps.
N.B. I won't neccessarily know which order the images will arrive in!
Many thanks for any help!
-- modified at 8:23 Wednesday 19th October, 2005
|
|
|
|
|
You should start by using <style> instead of <script>
|
|
|
|
|
I know!
Sorry copied a chunk and then pasted and cut away. Now edited.
In page I am using the STYLE tags...
So do you reckon you'd know the answer?
|
|
|
|
|
Not sure what you're trying for. The code you have, assuming the images are all the same size, will arrange them from left-right, top-bottom, with a 10px gap between columns. As many columns as fit in a 612px box on the right side of the page.
|
|
|
|
|
Shog9 wrote: The code you have, assuming the images are all the same size
Nope. If you follow the link posted (The Layout) you can get a better idea of what I mean.
There are 3 different 'types' of image:
1 x 1
2 x 1
2 x 2
They are all proportional to each other i.e. first would be 100px x 100px, second 200px by 200px, third 200px by 200px.
I could get them to line up nicely if they were all in rows of the same type. However if I wanted a 2x2 square flanked ether side by two 1x1 square's it wasn't possible.
Ideally I'd like to apply one class to any of the incoming images and they'd sort themselves out. I don't want to have to go down putting images inside div's to get the positioning correct - I may as well go down the absolute positioning route instead.
|
|
|
|
|
Unfortunately, it's not quite that simple. Think about float as telling the layout "put this element to the [left|right] of, or below, what comes after". So, looking at the first five images:
- (top left) Floats to the left of #2
- (right of #1) Floats to the left of #3
- (right of #2) Would float to the left of #4, but there's no room for #4 left of #3 on the line, so #4 wraps to a new line
- (2nd from top, left) Floats to the left of #5
- (2nd from top, 2nd from left) Floats to the left of #6...
You see why #4 & #5 won't appear next to #3 in this layout, right? Now, if you can change #3 to float right, it'll work: the first two would float left of it, while it would float right of the next two. Of course, if the containing box became narrower or wider, this wouldn't look right either.
So what do you do? In my experience, once your layout needs get to this level of complexity you need to write a custom layout manager in javascript. Call it every time an element is added or deleted, and when the container resizes. Failing that, accept the anomalies or make your images identical in size.
|
|
|
|
|
I had a feeling I'd have to go down that route. It is a shame that there isn't a tetris style 'plugging the gaps' method. Oh well. :->
Thank you for your knowledge and time. Saves me continung down a dead end.
Cheers Shog!
|
|
|
|
|
I've coded a simple ws that receives an array of bytes and saves them into a file. On my PC (localhost) it works fine.
So I've copied it to the server (IIS 6 on Win 2k3, shared hosting plan) and when I call the method nothing happens: no exceptions no nothing. The output folder has the correct rights (another web app writes to that dir).
The only issue I can notice is that the 'client' program seems to be trying to send the data, but it locks.
The array is never longer than a few KiloBytes.
I use a DSL connection with 32 KiloBytes/sec upload, so the process should spend a couple of seconds to send the data, but it never ends.
Please help...
___________________________________
Tozzi is right: Gaia is getting rid of us.
My Blog [ITA]
|
|
|
|
|
There are no firewall issues here?
Rob Philpott
|
|
|
|
|
No...
Because the client actually connects to the server! Simply the transaction seems to be somehow locked...
___________________________________
Tozzi is right: Gaia is getting rid of us.
My Blog [ITA]
|
|
|
|
|
Tricky.
The fact that the client locks up suggests to me some sort of network problem - does a timeout occur eventually? Also, can you invoke the webservice by pointing your web-browser at it?
The SOAP toolkit has a trace utility which may be of some help - this can show HTTP request and response.
Rob Philpott.
|
|
|
|
|
[sorry for the mail, now this works...]
I can reach the ws through the browser, but I cannot invoke that specific method because it requires as the input an array of bytes.
no timeouts occur, even after 2 minutes.
the netstat command shows an open connection to the server.
Is the server kidding me?
___________________________________
Tozzi is right: Gaia is getting rid of us.
My Blog [ITA]
|
|
|
|
|
Hi,
when I try to create a new web application using visual studio .net 2003, the error msg is :
unable to creat web project.... The file path 'c:\iinetpub\wwwroot\webapplications1' does not correspond to the URL 'http://localhost/webapplication1'. The two need to mapa to the same server location. HTTP Error 404: not found
The problem will persist even after I have unistall and reisntall IIS and visual studio. any way I can resolve the issue?
|
|
|
|
|
|
The filepath directory and the localhost directory should be one and the same. On your file path webapplication is plural and your localhost it is not.
Also on most systems the directory is C:\inetpub not C:\iinetpub.
Do you have a c:\inetpub\wwwroot\webapplication1 directory? If you do check your webapplication1.vbproj.webinfo and see if it looks like this...
<visualstudiouncweb>
<web urlpath="http://localhost/Webapplication1/WebApplication1.vbproj">
...but then again on most systems it probably reads
<visualstudiouncweb>
<web urlpath="http://localhost/WebProject1/WebProject1.vbproj">
|
|
|
|
|
Thanks, Kumar and Manuel for replying. Sorry, Manuel, I make a typo error. It is c:\inetpub\wwwroot and not iinetpub.
After I run aspnet_regiis.exe, I can create web application only if I specify //127.0.0.1/webapplication instead of //localhost/webapplication. The problem will reoccurs if I use localhost. In c:\windows\system32\drivers\etc there is a hosts file. So I don't know why the localhost cannot be use.
|
|
|
|
|
How can I make the script only give me results where if the first character matches the field in the database (access)? I use this code:
If request("postcode") <> "" then
tpostcode = LEFT(request("postcode"),4)
strsql = "SELECT * FROM ledenlijstoverzicht WHERE ( PostcodeBezoekadres LIKE '%" & tpostcode & "%') ORDER BY PostcodeBezoekadres"
set Rs = db.Execute(strsql)
I am not a programmer obviously, but I would appreciate any help.
Thanks,
Yvette
The Netherlands
|
|
|
|
|
Remove the % at the beginning of the search string.
---
b { font-weight: normal; }
|
|
|
|
|
Thank you, thank you, thank you 
-- modified at 9:53 Sunday 16th October, 2005
Another "simple" one for you (but not for me:
In the same style, how do I create a search string where an exact match is required?
|
|
|
|
|
If you want an exact match, use a normal comparison (=) instead of like. Then you don't use any wildcards (%).
If you want a more relaxed match (case insensetive) but still match all the characters, simpy remove the wildcards.
---
b { font-weight: normal; }
|
|
|
|
|
I am coding a new site and want to add a facility where I can click on a
link with the text "show example" and when I click the link, it expands a previously hidden <DIV> which follows a <A> hyperlink. When I click the link again, the DIV disappears.
Ideally I would use the CSS :before class attribute and automatically prepend a hyperlink to the start of any DIV with a specific class. Unfortunately IE doesn't support this, so this is how I would like it to appear in my html code:
<a href="javascript:"toggleDiv(this)"> Show example </a>
<div class="SHOWHIDE">this text will show/hide when the link above is
clicked</div>
I know its wrong, but that's the basic idea I'm trying to achieve. Basically what I want to do is, when the link is clicked, the _next_ DIV element is shown/hidden. I know I need to write a function called "toggleDiv" - and the usual code that I see on the internet requires that I give the DIV an "id", and use this id when I call the javascript toggleDiv function.
What I want to do is, pass a "this" reference (or something similar) which basically says, "this" is the ID of the <A> tag that was clicked on....and in the toggleDiv function, I locate the next element (which will be the DIV), and show/hide it using HTML.
in other words, I want to avoid having to give each DIV in my document a unique ID - is it possible to find a solution for this?
thanks,
James
<font size="1" face="Verdana"><a href="http://www.catch22.net"TARGET="_blank"><br>http://www.catch22.net</a></font>
-- modified at 16:59 Saturday 15th October, 2005
|
|
|
|
|
If you can place the link and the div inside another div, it would be quite easy. Something like:
<div class="ToggleHidden">
<a href="javascript:toggleDiv(this);">show></a>
<div class="Info">Some text...</div>
</div>
Then you could get the parent element of the link and change the className property. Use two css classes where one will hide the Info tag inside it:
.ToggleHidden .Info { display: none; }
.ToggleShown .Info {}
---
b { font-weight: normal; }
|
|
|
|
|
hi all..
I use 'try and catch blok' to report errors in asp(with jscript). But I could not find a way that show the error row number in the report. I could only take error message.
is there any way.
karanba
|
|
|
|
|
Hi,
How can I achieve image rollover in Javascript?
I've tried something like this:
function ImageSwap( index, imageID )
{
document.getElementById( imageID ).src = myimages[index].src;
}
function GetImages()
{
for( i = 0; i < myimages.length; i++ )
{
img = new Image();
img.src = "WebForm1.aspx?pointIndex=" + i;
myimages[i] = img;
}
}
But, this line:
img.src = "WebForm1.aspx?pointIndex=" + i;
"i" is the index of the image.
Is this correct line?
How can I get the file name?
Thank you beforehand.
Goran
|
|
|
|
|
What file name is it that you are trying to get? Where are the images?
---
b { font-weight: normal; }
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
