Images and copy won't align - html

Please take a look at this website: http://jlwingert.com/seametrics.html
I didn't post the source code because it's quite lengthy. The problem is the lower half of the page.
I'm supposed to clean up this website and noticed that the bottom half of the page has unaligned images and copy. I've gone through the coding and I'm having the hardest time finding the problem.
I'd be appreciative if anyone could view the source & see if they could provide assistance to this novice!
Thank you!
Jen

You start a new table # WMX Series rather than continuing the existing one that has a 150px padding column. That's the problem. Also be ready for the "don't use tables" crowd to flame you.

Related

Wordpress: how to use custom CSS to align logo with adjacent text and tagline

I am helping a colleague with new Wordpress site. She has purchased a theme, Hive and we are trying to position a logo and line it up with text to the right. This, so far has been successful however we want to have a "minor tagline" underneath the main title
I have been modifying the CSS but I don't think I can modify the HTML. The problem I am finding is trying to position the tagline underneath the main title. I have been using flex-box with some success but please see the image which describes the problem better than I can explain it.
Everything is contained in a "site-branding". I thought I could add a line break or a create another line below "The Weld Hotwire" but you cannot alter the HTML.
Please see the CSS to the left.
I fully understand that this is an unusual manner to pose a question but would be really grateful for any guidance on how to get the tagline "Engineering, Society, Policy" on its own line below the main title.
Thanks for reading.
if you want to find it fast, please go save it and open in chrome/firefox.
and go developer tools with detect it very fast.
find 'right class or id' with inspect and make your changes.
https://i.stack.imgur.com/1N510.png

Code for Reddit style image Carousel that's on home page

Has anyone got any idea on how to implement this carousel into my website? I am using WordPress and I am not sure how to go about this. I was told to use 'foo gallery' to achieve the same look however, it doesn't really feel the same and also didn't work on my site (for some reason).
I have tried to code some of this but I am awful at coding and I am mainly just spending my time watching youtube help videos if I am being honest!
I'll explain my neeed for this and what I would like it to do and then, if you could help me that would be great!
So like on reddit, I would like to implement this feature on my home screen to show off some of the 'Hot topics of the day'. Preferably, some code could automatically update the images and text each day depending on the comments/views left on a page - so the top 4 most viewed pages would be automatically added to the front page with a custom image (which I have created). However, that seems quite hard. So just the layout/template of the images (like the photo provided) AND there is a way for me to manually change the images and names each day would suffice. I would also like to have 4 photos which also act as buttons with the curved boarders.(again, like the image I have attached)
Just so it's clear, I do not want these images to be able to move off like a slideshow, I just want them to stay in place and be able to change either manually or automatically.
Maybe this is called something other than a carousel and would be easy to do... i dont know! So if you do, please let me know.
Furthermore, I appreciate this is a place mainly for code to be posted however, I won't post my code as it is useless! If anyone wants to share any code or contact me privately then that would be very much appreciated.
Thank you

Simple text slider in HTML w/ CSS

Good morning, everyone!
I have realised (just now) that i have never ever done sliders before, so i am a little confused on how to implement them into my project.
I need to have my text in the middle, two arrows (left and right) and balls below (so you can jump to wanted slide). There are no images.
The thing is that after a brief Googling session i saw a lot of suggestions to use special libraries, etc. I am sure it can be done in pure HTML & CSS.
The desired look:
I would really appreciate any kind of related literature and/or examples (jsfiddle, etc).
Thank you!

Baisic table layout background or container issue mainly on Apple device's

So the title pretty much say's it all, In case anyone is interested I'm self thought so please don't be so hasty to say I did no research or put any effort into this because I've messed around with a lot of various things on this somewhat BS page and searched using Google Yahoo and Bing looking for a similar issue. Basically the table layout seems to to get like a default transparent overlay, I noticed its only directly on the table because the background images are clearly visible when scrolling past the top of the page and its visible in each table cell.
Like I said I've tried various things with no luck but if this is just some common newbie mistake please point me to some reading material or even a good book for web design as I could really use the know how and wouldn't mind learning something as apposed to shooting in the dark with random bits of HTML, CSS and JavaScript in the little free time I do have..
*Also I was doing all this using blogger as my "host" mainly because I plan to ingrate the blogger framework or whatever into the page after I know its good to go. Find a link to the page below, If you need the raw HTML not formatted to blogger just let me know.
https://layout-dev.blogspot.com
Turns out the image host for the body background-image wasn't loading in the image on apple device's, still not sure why but after relocating the image to my personal Dropbox and directly linking to it that solved the problem. *As weird as that may sound the original url was http://subtlepatterns.com/patterns/binding_dark.png and simply replacing it with https://dl.dropbox.com/s/njcu65h90cmsbp8/binding_dark.png solved the problem. -Figured I should post the answer just in case someone ever has a similar issue.

Any ideas on how to create a flying tile 3D transition just via script/classes?

Right guys,
I have been looking all over the internet for a tutorial to which will show me how to re-create this effect on images...
http://flash-effects.com/tutorial-image-transition-flying-tile-3d/
I dont want to install these 3rd party components, because the project I am working on at present, may in future need to be edited by other designers/developers.
Is there anyway to do this just via scripting???
Any feedback would be appreciated, im ideally looking for a tutorial...
Most of what you're looking for is here. Then download the Bitmap.zip example and look through it. Although I will reiterate what the page says, you really should buy the book. It's quite good and teaches a lot about Flash in general, not just game programming.
You'd still have to figure out how to randomize the height and width of the pieces, add an onClickListener, and then move the pieces. From the example you provided it looks like they're just moving them back and forth in a z-dimension.
Hope this helps.