/    Sign up×
Community /Pin to ProfileBookmark

Some help with getting items to line up properly

Copy linkTweet thisAlerts:
Oct 20.2015

Hi all. Hope this is in the right forum; if not, please move.

I am trying to align some items (just blank image files for now), and I have gotten as far as I can.

[url]www.jeffreyhayat.com/cd1.htm[/url]

If I really try hard enough, I could probably figure out how to center them, but that’s not the issue. What I really need to do is add some more items (two, maybe three) to that same row. But when I try and do this, the fifth item winds up underneath the four that already exist, and I can not for the life of me figure out how to get five (least of all six or seven) in that same one row.

Please be gentle here :p as I am far from an expert at this stuff. In fact, a friend of mine started this for me, and I am kinda picking this up and trying to take this further. I do not feel like bugging him.

So, the page references a stylesheet, and at this point, I am a little in the dark as to where the issue lies – is it in my code, or do I need to change something in the .css file? If so, is there a way to find out what part of the .css to look at?

If any other info is required, please ask.

Thanks for the help on advance. ?

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@heikeOct 21.2015 — Hi!

At least someone today, who gives us link to their site ?

I might be sometimes a bit harsh, but it is necessary.

Your code is messy.

A lot.

Unfinished ul tags, images right inside of <ul> tags, without list elements..

Inline CSS..

Absolute URLs to imgs.

Unfinished divs, which end up in parent elements..and therefore the whole structure is messed up, as normally, those divs should be siblings to one another.

I would recommend using a CMS such as wordpress, as it is much easier for someone with little to no technical skills to set up such a website.

And then you can outsource the job, such as theme styling to countries like India.

Is this what you head in mind?

I did not use best practices, as now I only need to know, whether or not this is what you want to accomplish.

https://jsfiddle.net/unybLdb9/
Copy linkTweet thisAlerts:
@JHayatauthorOct 21.2015 — I might be sometimes a bit harsh, but it is necessary.[/QUOTE]

Cool with me!

Your code is messy. A lot. Unfinished ul tags, images right inside of <ul> tags, without list elements. Inline CSS..

Absolute URLs to imgs. Unfinished divs, which end up in parent elements..and therefore the whole structure is messed up, as normally, those divs should be siblings to one another.[/QUOTE]

Yeah - that pretty much sums up my skill level :/

Is this what you head in mind?

https://jsfiddle.net/unybLdb9/[/QUOTE]

Yes! Yeah - that's pretty much it. What, if I may ask, in the css you provided to the right, references the width of the boxes?

Thanks so much! ?
Copy linkTweet thisAlerts:
@heikeOct 22.2015 — Well, the only thing that you should care about is this piece of code
[code=html]<div id="rectangles" class="row">
...
</div>[/code]

I have put the total of 6 rectangles into the rectangles div.

I have added few lines of CSS code, which DEFINITELY goes against the used framework, but as I said, it was just a quick fix.

Instead of large-2, I'd prefer to create new large-6 class which you would assign to the divs inside of rectangle div.

In the end, your html code could look like this:
[code=html]<div id="rectangles" class="row">
<div class="large-6 columns"><img src="http://www.jeffreyhayat.com/posters/1.png"> </a></div>

<div class="large-6 columns"><img src="http://www.jeffreyhayat.com/posters/2.png"> </a></div>

<div class="large-6 columns"><img src="http://www.jeffreyhayat.com/posters/1.png"> </a></div>

<div class="large-6 columns"><img src="http://www.jeffreyhayat.com/posters/2.png"> </a></div>
<div class="large-6 columns"><img src="http://www.jeffreyhayat.com/posters/1.png"> </a></div>

<div class="large-6 columns"><img src="http://www.jeffreyhayat.com/posters/2.png"> </a></div>
</div>[/code]

And here is the CSS
[CODE]#rectangles .large-2 {
width:16.666667% !important;
float:left;
}
#rectangles .large-2 img {
width:100%;
}[/CODE]

Keep in mind that

a) I did not go through your entire css file, which for some reason has around 8000 lines.

b) It's just a quick fix, that should not (but might) mess up a different part of your site.

c) Using Wordpress is definitely better! It's much more user friendly and you need like 0 coding skills, some plugins have really awesome user interface.
Copy linkTweet thisAlerts:
@JHayatauthorOct 22.2015 — Ok, that helps - thanks!

One final thing - creating a 2nd row, so more rect. appear underneath what I already have. If I simply add more lines of code, a 2nd row of rect. does appear, but they are butted up against the first, with no space between them. I tried adding a <br>, and a <p> but to no avail. Should I try [I]margin-bottom:Xpx[/I] somewhere, or, something else?
Copy linkTweet thisAlerts:
@heikeOct 23.2015 — DO not use any br, p tags - instead look all the code that I have put into my previous post - the css styles are not applied, because you have different classes in your divs. Instead of large-2 use large-6.
×

Success!

Help @JHayat spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...