8 replies [Last post]
The Intellects
The Intellects's picture
Offline
newbie
Canada
Last seen: 1 year 34 weeks ago
Canada
Timezone: GMT-8
Joined: 2011-11-28
Posts: 10
Points: 14

Hi,

I've been having problems trying to center unordered list elements (the images with "PORTFOLIO TESTING" under them) over at http://technewsgalore.com/Jay

I was able to center them earlier but I'm unable to center them in a way where if I resize the browser window it'll be in the same place. Looking for possible solutions.

HTML:

	<ul class="portfolio">
		<li>
			<a href="#" class="thumb"><span><img src="img/sushiandrobots_thumb.gif" alt=""/>                 </span></a>
			<h2><a href="#">Portfolio testing</a></h2>
		</li>
		<li>
			<a href="#" class="thumb"><span><img src="img/heyindy_thumb.gif" alt=""/></span></a>
			<h2><a href="#">Portfolio testing</a></h2>
		</li>
		<li>
			<a href="#" class="thumb"><span><img src="img/ryankeiser_thumb.gif" alt=""/></span></a>
			<h2><a href="#">Portfolio testing</a></h2>
		</li>
	</ul>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 50 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9171
Points: 3161

First, get rid of the fixed

First, get rid of the fixed and absolute positioning, and their associated properties. Don't float the list items, make them {display: inline-block;}. Set the text-align to center in the ul element. Set the ul's margin {margin: 0 auto;}. Keep in mind that at a sane browser width there's room for only two images across.

Get that done and we can look at other issues.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

The Intellects
The Intellects's picture
Offline
newbie
Canada
Last seen: 1 year 34 weeks ago
Canada
Timezone: GMT-8
Joined: 2011-11-28
Posts: 10
Points: 14

Thanks! That was frustrating

Thanks! That was frustrating me for so long. Can you explain to me why a sane browser width would not be able to contain 3 images across?

Would this also apply for any text/items I will be adding onto the page in the near future?

Also, it seems the social icons right above the navigation bar collide with the navigation bar on smaller screens. Anyway I can make those icons a fixed distance from the navigation bar?

P.S The icons and navigation bar are fixed positioning (intended) so they can scroll along with the page when more content is added.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 50 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9171
Points: 3161

The Intellects wrote: Thanks!

The Intellects wrote:

Thanks! That was frustrating me for so long. Can you explain to me why a sane browser width would not be able to contain 3 images across?

By sane, I mean a width that provides optimal or near optimal column widths for comfortable reading. It means also that the browser window does not take up an unreasonable amount of space on today's larger monitors. Consider the desktop metaphor; when you get a bigger desk, you don't demand that the various papers, books, and folders be enlarged to cover the desk. The larger desk allows you to have more things in view.

In this case, your ul is 50% of the page's width, and the li elements are about 224px plus padding, borders and margins. 50% of 1000px (approximate width of a browser viewport where the window is 1024px wide) is 500px; space for only two images. Your latest iteration sets the ul at 450px, which is just shy of enough for two images.

Quote:

Would this also apply for any text/items I will be adding onto the page in the near future?

I can't answer that. I suspect you're making the common error among graphic designers and newcomers to web development; you're thinking about the "look" you want before deciding on and implementing the content.

Quote:

Also, it seems the social icons right above the navigation bar collide with the navigation bar on smaller screens. Anyway I can make those icons a fixed distance from the navigation bar?

Do not use the position property. The property has its uses, but is best left off.

Quote:

P.S The icons and navigation bar are fixed positioning (intended) so they can scroll along with the page when more content is added.

That's not the way fixed position works. A fixed position element will never move nor scroll. It is fixed relative to the browser's viewport.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

The Intellects
The Intellects's picture
Offline
newbie
Canada
Last seen: 1 year 34 weeks ago
Canada
Timezone: GMT-8
Joined: 2011-11-28
Posts: 10
Points: 14

That's not the way fixed

Quote:

That's not the way fixed position works. A fixed position element will never move nor scroll. It is fixed relative to the browser's viewport.

That's what I meant, terrible phrasing.

Also, if I were to remove the position: fixed from the icons, they would no longer be fixed "relative to the browser's viewport". So how would I go about ensuring the icons and navigation bar are both fixed but also that the icons are a set distance from the navigation bar such that they don't collide?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 50 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9171
Points: 3161

Blech! Fixed position

Blech! Fixed position elements reduce the available screen space. Users know how and when to scroll, so there is no enhancement of the visitor experience; only the opportunity for annoyance. But, it's your site.

If you're gong to do such a thing, then do it to the container, that is #stayonpage, not the individual parts. Here are some edits that will do what you wish.

div#container {
    margin: 0 auto;
    padding-bottom: 100px;
    width: 80%;
}
 
ul.portfolio {
    list-style: none outside none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
 
ul.portfolio li {
    border-radius: 3px 3px 3px 3px;
    bottom: 15%;
    display: inline-block;
    margin: 1%;
    padding: 0;
}
 
#stayonpage {
    background-color: #ADDFFF;
    bottom: 0;
    height: 100px;
    position: fixed;
    text-align: center;
    width: 80%;
}
 
.social {
    list-style: none outside none;
}
 
.social li {
    background-repeat: no-repeat;
    display: inline-block;
}
 
.social li a {
    display: block;
    height: 32px;
    margin: 3px 3px 3px 35px;
    text-decoration: none;
}
 
.social li a strong {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-size: 0.9em;
    font-weight: normal;
    padding: 2px;
}
 
#navMenu {
    background: url("../img/menubg.png") no-repeat scroll 0 0 transparent;
    font-family: Arial,"Times New Roman",sans-serif;
    height: 60px;
    margin: 0 auto;
    padding: 10px 0 0;
    width: 438px;
}
 
#navMenu ul {
    list-style: none outside none;
    margin: 0 0 0 100px;
    padding: 1px 0 0;
}

I think that does it. I may have missed a change, so apply my edits exactly, so if it doesn't work right, I can find the missing bit easily.

Notice there is only one positioned element.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

The Intellects
The Intellects's picture
Offline
newbie
Canada
Last seen: 1 year 34 weeks ago
Canada
Timezone: GMT-8
Joined: 2011-11-28
Posts: 10
Points: 14

That seems to have worked,

That seems to have worked, however there's a slightly bigger gap between the icons and bar than I would like and I can't seem to fix it by modifying the margins/paddings.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 50 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9171
Points: 3161

They abut one another, there

They abut one another, there is nothing to remove. You could reduce the height of one or the other ….

When fixing things, and having questions about the fix, be sure that you have applied the suggestions exactly. If need be for your own peace of mind, create a new page with the corrections and save to your server. Partial applications may miss some important bit.

For a best case, install and use a version control system (vcs, also called a concurrent versioning system, cvs). A vcs will allow you to modify your files and revert to any previous version without hoo-hah. I'd suggest Git. A good editor, like Emacs, will interface directly with your vcs of choice.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

flyingspider
flyingspider's picture
Offline
newbie
Korea
Last seen: 2 years 37 weeks ago
Korea
Timezone: GMT+8
Joined: 2011-12-01
Posts: 2
Points: 2

expert

gary.turner you are really an expert Smile and a learned a lot from you,thanks

my dream:Travelling aroud the world ,enjoying my life,climbing the moutain!wish you all happiness or good luck

.blog: R4R4i R4 3DS wish you all happiness or good luck:
Cool