13 replies [Last post]
bogus
bogus's picture
Offline
Regular
Last seen: 11 years 40 weeks ago
Timezone: GMT-5
Joined: 2006-12-04
Posts: 47
Points: 3

Cheers guys,

im styling on a layout for my new website and have a problem with the scaling of thumbnails:

http://hnslatest.com, in the lower part of the website i have 3 columns showing the latest post, the code for the thumbnail is:

.column_left_b img, .column_center_b img, .column_right img {
    margin: 3px 10px 5px 0px;
    padding: 0px;
 
 
    /* remove this to prevent text wrapping next to images
    float: left; */
 
    /* add in new auto width */
    width: auto;
    height: 82px;
 
    border: none;
    clear:both;
}
any hint of how i can float the text right to the thumbnail?

TIA!

bo·gus (bō'gəs)
adj.
Counterfeit or fake; not genuine: bogus money; bogus tasks.
[From obsolete bogus, a device for making counterfeit money.]

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 10 years 48 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Hey, just set the image to

Hey, just set the image to "float: left;" and it should work fine. It appears that you have that commented out in the code above? Add that back in to your CSS and your text will start to the right of the image, and wrap around under it once it gets to that point.

That is what you're trying to do correct?

bogus
bogus's picture
Offline
Regular
Last seen: 11 years 40 weeks ago
Timezone: GMT-5
Joined: 2006-12-04
Posts: 47
Points: 3

hey titan, yeah - this was

hey titan,

yeah - this was the solution, as simple as it sounds.
i dunno why it was commented out oO

anyways, another thing:

i want to have the titel in the header + navigation with a fixed margin to have it in the exact position for lower resolutions. since its inside the container box i cant get it working.
any hint?

thanks!

bo·gus (bō'gəs)
adj.
Counterfeit or fake; not genuine: bogus money; bogus tasks.
[From obsolete bogus, a device for making counterfeit money.]

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 10 years 48 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Hey bogus, sometimes it's

Hey bogus, sometimes it's the simple stuff that gives the most trouble, because it's so obvious, you just don't see it. I know how that goes!

Hmm.. I almost didn't see what you were asking about the header. It's late here, and I must be tired.. I thought you were still talking down by the thumbnail lol. Let me take a look at that real fast, and see if I can get it to work. Smile

bogus
bogus's picture
Offline
Regular
Last seen: 11 years 40 weeks ago
Timezone: GMT-5
Joined: 2006-12-04
Posts: 47
Points: 3

okay, i managed to get the

okay, i managed to get the page titel correct for lower resolutions...
but the menu thing wont work: when reducing the width to 80% (which is okay for 1280x and 1024x) it occures a horizontal scrollbar =/

bo·gus (bō'gəs)
adj.
Counterfeit or fake; not genuine: bogus money; bogus tasks.
[From obsolete bogus, a device for making counterfeit money.]

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 10 years 48 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I got it working, so that

I got it working, so that when minimized, your logo and the menu stop before they cover the logo on the 2000px wide bg image. I have it so that the distance from the left of the page to that logo, and the distance from that logo to where your header text/menu stops is the same.. it looks good.

The only problem is that when fullscreened, your logo and menu are shifted into a different position. They are shifted to the right a bit.. and the logo becomes farther right than the menu.. I'm assuming that would be a problem?

bogus
bogus's picture
Offline
Regular
Last seen: 11 years 40 weeks ago
Timezone: GMT-5
Joined: 2006-12-04
Posts: 47
Points: 3

yap, that would be a

yap, that would be a problem.

i want to have the background img as it is (its 2000px wide because of the different resolutions, especially for widescreens) and the menu at a correct position no matter at what resolution the site is been viewed.

bo·gus (bō'gəs)
adj.
Counterfeit or fake; not genuine: bogus money; bogus tasks.
[From obsolete bogus, a device for making counterfeit money.]

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 10 years 48 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

What did you change a second

What did you change a second ago on your page? Can you revert it back to the condition it was when you linked it in your first post real fast? I reloaded the page, and now the coding is different on me.

I do have one other idea that I want to try, but can't figure out what you changed to reset it to how it was.

bogus
bogus's picture
Offline
Regular
Last seen: 11 years 40 weeks ago
Timezone: GMT-5
Joined: 2006-12-04
Posts: 47
Points: 3

im trying for myself. the

im trying for myself.

the original code is

#header {
	margin: 0px auto;
	padding: 10px 0 0 0;
 
	width: 80%;
	height: 80px;
 
	text-align: left;
}
 
#menu {
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
 
	width: 100%;
	height: 30px;
}

bo·gus (bō'gəs)
adj.
Counterfeit or fake; not genuine: bogus money; bogus tasks.
[From obsolete bogus, a device for making counterfeit money.]

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 10 years 48 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Ok.. I got something that in

Ok.. I got something that in my opinion would be ok, but maybe not for you. It's actually pretty clever if you ask me lol.. but it's 1:30am, and I'm exhausted.. so I'm amazed I came up with anything at all.

There are several changes to make this work.. nothing major though.

Give this a try, and let me know if this would be ok.

Step 1: Change #header and #menu width to 980px (I'm pretty sure it was like this when you first linked it anyway)

Step 2: Create a div with left and right margins of 115px. I used inline code just to test, but mine looked like:

<div style="margin-left: 115px; margin-right: 115px;">

Step 3: Wrap that div around everything BUT your #footer. So this div starts before #header, and ends after your javascript stuff. The #footer will be the only thing in the HTML that is not contained in Step 2's div.

And, that's it. Your page will still be centered when full screen, thanks to the 115px margins on both sides.. but when your window width shrinks, your content will stop 115px away from the left edge. Everything will remain lined up correctly, and you will be able to see that icon on your 2000px banner image perfectly.

The reason that I say not to wrap the #footer in this div is so your footer background color will continue 100% width of the page.. if enclosed, there would be 115px of white space on each side.

Please Note: If this solution works for you, there are a couple more things to do!

Step 4: Remove the background color and bottom border from #submenu.

Step 5: Open a photo editing program, and re-create that background, and border, underneath your 2000px banner image. Basically, you are going to create the illusion that #submenu still has a background/border set to it.

The reason for this.. because of the wrapping div, you will notice that #submenu's background/border stops 115px from each side. Creating this faux background will complete the illusion that it is still 100% width for "most" resolutions.

Final Note: There are 2 small issues with this. Your #submenu background/border will only be the width of your 2000px banner image. If the page is wider, it will end. Although, in my opinion, it might look a little "strange" if your banner image ended, but that small gray strip under it kept going 100% of the width.. so personally, I don't think this is a huge issue.

The other issue (that I just thought of, and am a bit upset about) is that your horizontal scrollbar will now show up 115px sooner due to the margin.. which puts it at 1095px wide.. which could be a problem at 1024 resolution. Sad

If you could shrink the width of your other divs so the page is less than the current 980px wide, that could make up for the extra margin though.. and would keep it 1024 friendly!

I hope this all made sense! I am very curious what you think of this idea, and if it will work for you!

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 10 years 48 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Well, I see you playing with

Well, I see you playing with it, and would love to wait to see what you think, but I have to go to bed.. it's very late!

Just remember.. change your #header and #menu widths back to 980px, and wrap your content in this div as well. If you don't, your header/menu will stop 115px away from the edge, but your content will fall to the edge. Unless I mis-understood, I'm pretty sure you said that you wanted everything to remain lined up how it was at all times (any resolution). I assumed that meant the header/menu stayed in line with the content.

Only the #footer does not get wrapped with that new div.

EDIT:
What you have it doing right now (only the margin set to the #header and #menu) is EXACTLY what I was saying to do at first. But it shifts those elements out of line with the rest of the page content (shifts them to the right as I mentioned in a previous post), and you said that was bad lol.

Oh well, in any case, I hope you get it working to your liking, it's a very nice looking website! :thumbsup:

bogus
bogus's picture
Offline
Regular
Last seen: 11 years 40 weeks ago
Timezone: GMT-5
Joined: 2006-12-04
Posts: 47
Points: 3

Titan, I appreciate your

Titan, I appreciate your help and am very thankful that you dig so far into my problem. Not often to see someone with a that long breath Wink

As in my opening post I am a bit confused on this stuff. Right now it’s 7.30 am and I haven’t slept till yesterday morning… but you got me to the right way, even with some neat (or nasty) trick but I’m satisfied (and tired).
I used your div but only for the left screen side – and ended it right above the category menu (the #submenu). With this solution I came away from using any .jpg file as bg image or editing the existing one to close the header region.
980px as for the width was too wide, with 865px the searchbar(+button) is not being cut away. Since the former css was flexible on the proportion with the resolution I addedmargin-left:0; instead of margin-left:0 auto; to fix the #header and #menu to the left.

But this didn’t solve the problem with the horizontal scrollbar. You got the point right: with the added div of 115px the scrollbar came up sooner due to the margin. Since the layout does now fit for all resolutions of 1024 and above I’ve added overflow-x:hidden;to prevent the viewer from getting the scrollbar, horizontal only.

Once again, thank you very much for your help – I can finally take a nap because I’m satisfied with the result… the hidden overflow-x doesn’t bother me (who’s surfing with a lower resolution than 1024x768anyways) Wink

.

*EDIT
Please check if anything is messed up with the header. Over here it looks excatly the same as before, without shifted elements.
Thanks for the compliment, I have to add more content to the website and play a bit with the layout to get it the way I want to have it.
Anyhow, I'm a one-man-army so things need time Wink

bo·gus (bō'gəs)
adj.
Counterfeit or fake; not genuine: bogus money; bogus tasks.
[From obsolete bogus, a device for making counterfeit money.]

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 10 years 48 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Definitely looking good! At

Definitely looking good!

At first, I only put the div around the #header and #menu as well, but I didn't think that was ok for what you were trying to do. Personally, I like that better than wrapping the entire page, but I was trying to keep the left edge of your #header and #menu lined up with all of your page content.

Yesterday morning to 7:30 am huh.. sounds like you need sleep even more than I did! The page is looking great! :thumbsup:

bogus
bogus's picture
Offline
Regular
Last seen: 11 years 40 weeks ago
Timezone: GMT-5
Joined: 2006-12-04
Posts: 47
Points: 3

Yeah, I'm confident with the

Yeah, I'm confident with the looking of the website - thanks to your help, Titan!

One thing solved, the next problem occures: I need to work with clean urls (permalinks) in order to fire up my plugins. I've (re)coded a small extension for wordpress, similar to a CMS db, with detailed player/team information: relationships, consistency, advanced searching/filters, public form creation etc...

My hoster supports mod_rewrite, the .htaccess is in the right destination (wp root)... but it simply won't work =/

Once again thank you for your good support and wasted time on my topic Wink

bo·gus (bō'gəs)
adj.
Counterfeit or fake; not genuine: bogus money; bogus tasks.
[From obsolete bogus, a device for making counterfeit money.]