I need some help with this page: http://www.sarahpollock.com/new/x.php
I stole much of this layout from "A List Apart," but I'm no CSS guru
and I desperately need some help with the finishing details because
everything I've tried so far has flopped. I would really appreciate
your insight on the following items:
1 - I would like to get the four images across the top to be in the
overall center of the page (Like most everything else on the page is).
How can I do this with CSS and not resort back to HTML tables?
2 - In Firefox, I am not getting enough space between the bottoms of
the four images and their respective captions (Right now, the captions
appear crunched right up into the bottom edges of the paintings). I've
tried the CSS "padding-top" and even "margin-top" routes, but I'm only
seeing the benefit in IE. Any ideas?
3 - Is there any reasonable CSS way to move the bottom three links up,
closer to the four images? I don't like the vertical distance that
exists right now.
Thank you so much for your time in replying,
-M 11 4215 me*********@yah oo.com wrote: I need some help with this page: http://www.sarahpollock.com/new/x.php
1 - I would like to get the four images across the top to be in the overall center of the page (Like most everything else on the page is). How can I do this with CSS and not resort back to HTML tables?
Use a table. Set the table's width to 100%. AKAIK [X]HTML provides no
way to place a caption with an image so there is no other effective way to
align the captions with a set of images. 3 - Is there any reasonable CSS way to move the bottom three links up, closer to the four images? I don't like the vertical distance that exists right now.
No.
(Wait for it...)
But you could do this:
1. Remove class="float" from the DIV that wraps the images. No need to
float it anyway.
2. Remove the " " from the spacer DIV.
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Re: I would like to get the four images across the top to be in the
overall center of the page
check out the points on photo cards at http://www.wellstyled.com/css-photo-cards.html
and http://www.456bereastreet.com/archiv...tricks_part_2/
for wrap and centering
I made a layout with .content in the css stylesheet to have TRBL margins
(margin: 20 175px 10px 155px;). This .content class is in addition to the
BODY css features.
The float left image class was put inside the content class and I used a
margin on that float left( margin: 0 5px 5px 4px;) so the image was not
butting up against the edge of the content div. By adjusting the Left margin
the images were centered in the middle section of a 3 column page. (Top
Right Bottom Left =TRBL as a reminder for margins)
If you check out the description in the wellstyled.com site it contains
reference to lining up photos in a row and with some fiddling with margins
it could work.
Rose
Jim Moe wrote: Use a table. Set the table's width to 100%. AKAIK [X]HTML provides no way to place a caption with an image so there is no other effective way to align the captions with a set of images.
Maybe (X)HTML doesn't provide this (natively), but it's not all that
difficult to do in CSS. Somebody else already provided links to some
examples.
This subject has come up in the past often enough, too, and other
samples have been provided. If you searched the newsgroup archives, you
could probably find them in a couple minutes.
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
kchayka wrote: Use a table. Set the table's width to 100%. AKAIK [X]HTML provides no way to place a caption with an image so there is no other effective way to align the captions with a set of images.
Maybe (X)HTML doesn't provide this (natively), but it's not all that difficult to do in CSS. Somebody else already provided links to some examples.
There a few layouts that are simply a lot easier when done with tables.
This is one of them. It is, really, tabular data with the "headings" at
the bottom.
It is a layout that, AFAICT, has no smooth non-table solution,
especially if it is to be browser neutral. "Smooth" in the sense of a
fluid design. A table centers its objects automatically by default. When
the viewport becomes too small, the images are clipped on the right. Nice,
predictable behavior.
The best non-table solution I could find applies a percentage width for
the image container. That percentage is calculated from number of image
containers and any applied margin or padding. In this case its percentage is:
(100% - 2*padding) / 4 = 21%
The images are centered nicely in the viewport. In Mozilla when the
view shrinks, the images overlap each other. IE6's behavior is to wrap the
images (<sigh>). Smooth, but not browser neutral.
And it's a bit of a maintenance hassle. Add or remove an image and the
width must be recalculated.
So, in this instance, a table is a superior choice for presenting that
data. If there is a equally valid non-table solution, please demonstrate
it or provide a link to its description.
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
kchayka wrote: This subject has come up in the past often enough, too, and other samples have been provided. If you searched the newsgroup archives, you could probably find them in a couple minutes.
Well, a query through Google Groups on "center images captions
group:*styleshe ets*" yields only 4 results from this group, one of
which is now this thread. Through the others I've already seen
references to examples on these sites: http://webdesign.about.com/library/l...otogallery.htm http://www.fingerlakesbmw.org/visual/flmgshow.php http://css.maxdesign.com.au/floatuto...torial0407.htm
*However*, none of these examples centers the images within the overall
page -- you'll note that they are all pinned over to the left margin.
As I stated in my original post, I am not a CSS guru. Furthermore, I've
already tried web searches and other hacks to get this to work; I'm not
interested in wasting more time and I'm fed up that this has to be so
obscure to implement. Can anyone help me with this, or I am stuck
resorting to tables to get this as I want it to appear?
Thank you,
-M
Jim Moe <jm************ ***@sohnen-moe.com> wrote:
[centered image gallery with captions] So, in this instance, a table is a superior choice for presenting that data. If there is a equally valid non-table solution, please demonstrate it or provide a link to its description. http://homepage.ntlworld.com/spartanicus/temp.htm
--
Spartanicus
in comp.infosystem s. www.authoring.stylesheets, me*********@yah oo.com
wrote: kchayka wrote: This subject has come up in the past often enough, too, and other samples have been provided. If you searched the newsgroup archives, you could probably find them in a couple minutes. Well, a query through Google Groups on "center images captions group:*styleshe ets*" yields only 4 results from this group, one of which is now this thread. Through the others I've already seen references to examples on these sites:
Really. Bad luck I, I assume, try
"center image captions group:*styleshe ets"
^
instead, and you get lots. Add "raittila" on query and it will make it
easier.
There should be at least 3 recent threads with discussion http://webdesign.about.com/library/l...otogallery.htm http://www.fingerlakesbmw.org/visual/flmgshow.php http://css.maxdesign.com.au/floatuto...torial0407.htm
*However*, none of these examples centers the images within the overall page -- you'll note that they are all pinned over to the left margin.
There is no way that works in all browser, as Gecko has not enough
support for CSS. Simple answer:
body {text-align:center}
div {display:inline ;display:inline-block;display:i nline-table}
if you want same width, you can use -moz-inline-block, IIRC, otherwise
use float:left for it.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera: https://secure.bmtmicro.com/opera/bu...tml?AID=882173
Spartanicus wrote: [centered image gallery with captions]
So, in this instance, a table is a superior choice for presenting that data. If there is a equally valid non-table solution, please demonstrate it or provide a link to its description.
http://homepage.ntlworld.com/spartanicus/temp.htm
Brilliant! Thank you. I'll get a grip on CSS someday.
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jim Moe wrote: Spartanicus wrote: http://homepage.ntlworld.com/spartanicus/temp.htm
Brilliant! Thank you. I'll get a grip on CSS someday.
It looks great and in a pinch I'll take it (thank you), but the W3C CSS
validator is complaining about the display directive in the CSS:
"Line: 10 Context : #gallery span
Invalid number : display inline-block is not a display value :
inline-block "
Any additional ideas? Or, perhaps more importantly, how does this
repetition of the CSS "display" directive deceive the browsers?
Thanks,
-M This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Tony Vasquez |
last post by:
Can somoene give me an example of how to center a div, according to it's
image size... I am using different images, and so I have to resize it in a
functino according to the image's size. So I use a h and w vairable that
give me the height and width of the current image, but I can't seem to come
up with a simple freaking formula to center the image vertically and
horozontally. Thanks guys.
fnFullView = function () {
var h
var w
|
by: The Plankmeister |
last post by:
Hi...
What's an equivalent of doing:
<center>hello!</center>
in 4.01 strict? I'm using stylesheets and am telling the various selectors I
want to be centred to "text-align : center;" but they only align textual
objects, not image objects:
|
by: |
last post by:
How do you center, like I am trying to do, below the group of images? Why
does it not work?
Example:
<div><h2>The Title</h2><img src="images/BigPicture.jpg" height="150px"
width="250px"></div>
</div>
<div align="center">
<div style="float:left; height:121px; width:180px; border: solid
yellow"><img src="images/1.jpg"></div>
|
by: PayPal |
last post by:
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft DHTML Editing Control">
<TITLE></TITLE>
</HEAD>
<BODY>
<STYLE type=text/css>
..dummy {}
BODY, TD {font-family: verdana,arial,helvetica,sans-serif;font-size:
12px;color: #000000;}
|
by: Speed |
last post by:
Hi,
Could you please tell me what is the most efficient way of finding the
center of mass of the area enclosed by a closed contour.
I have a considerable circular region with streaks coming out of it in
either direction. Basically i want to find the center of the circular
region but it is getting offset due to the presence of connected
outlier segments.
| |
by: judacris |
last post by:
I've seen the threads here about molding 2 divs in a centered fashion. but I can't seem to solve this thing.
my blogger blog is functioning well on my site for now, but the blog feed (left) and the sidebar (right) doesn't center
here's the css i'm modifying to center it. i apologise for the mess.
<html>
<head>
<title>cris-kun's 'Blog - www.puff-x.com</title>
<$BlogMetaData$>
|
by: GloStix |
last post by:
I'm trying to center this banner, it's in a div that has the same width so it's not exactly "centering" but it's screwed up, It works in safari but in Firefox it's messed up. I uploaded a Video to show what I'm talking about.
http://screencast.com/t/i5SLg3cAczH
(*WARNING, TAKES A WHILE TO LOAD*)
*HTML*
<html>
<head>
<title>James Mann - Portfolio</title>
|
by: jerrygadd |
last post by:
Can some body help me vertically center an image using CSS?
The customer only uses IE, and so the code is not debugged for other browsers!
The image in question is found on line 1075 : "div.layout_img img"
The image size is unknown
I have tried to use the "margin:0px auto;" method with no success.
I include the code here
|
by: gaijinco |
last post by:
I was a hobbist web coder for years but I had to sidestep for a while.
Now I'm trying to return to it and I'm trying to clarify how am I
supposed to do somethings with CSS v.s. HTML and I'm specially having
difficulties with center alignment of elements like images and tables.
How is the "right" way to do it? (books that I have checked seemed to
dodge the issue)
I also have a doubt. html-atributes width and height are preferred
over...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
| |
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |