Curtis Thompson
Forum Replies Created
-
glad it worked! and feel free to come back with any other questions you might have…
-
hello…
i don’t mind the questions – fire away! glad you got the logo in there…
so you have three options:
1. add space in the logo file itself – so currently your logo is 771×306 (see below for more on that, btw) – so you could open it in photoshop or some other editor and make the canvas slightly larger so that space was created around it.
2. you can add a br tag after the headshot image and before the logo image tag to create one line of space. so like this:
3. you can get into your css file and add custom margins for that image. the easiest way to do that would be to alter the image tag to include an id:
and then open up your style sheet file in a text editor and add something like this anywhere in it (logically you might put it near the styles for the parent "picture" div, but it really doesn't matter):
#offsecpic {
margin: 10px 0 0 0;
}that means that the element with the id "offsecpic" (your picture) has a margin of 10px at the top and zero on the right, bottom and left. if you wanted to make it 10xpx on both the top and bottom for any reason, you would do "margin: 10px 0 10px 0;"
then upload the style sheet and the html and you're good to go.
wrt the image size - you have it at the original size, which is pretty large. typically in web land you don't want your image to be any larger than it is displayed, because then the file is larger in file size than you really need. not the end of the world at all, but just thought i'd mention it.
congrats on your official selection, btw - that's pretty cool!
sitruc
-
hello…
[Neil Orman] ” You mentioned I should paste my ‘logo html.’ What does that mean exactly”
i meant the img tag snippet that i put in that first response there, although going back and looking, it seems that it got converted and eaten by the system. let’s try this again…if you view the raw html of your current file, you’ll see your div with your picture in it:
<div id="picture"><img src="Neilheadshot.jpg" height="277" width="277"></div>so then you can add the html image tag for your new logo file (naturally swapping in your stuff instead of my holder vars here):
<div id="picture">
<img src="Neilheadshot.jpg" height="277" width="277">
<img src="[YOURIMGNAME]" height="[WHATEVERHEIGHT]" width="[WHATEVERWIDTH]">
</div>then re-upload that file and your logo file to the server and it should show up!
sitruc
-
hello…
unfortunately i’ve never heard of nvu until now – it looks like a standard drag-n-drop authoring tool, but as to how specifically add or interact with it, i would be of no use… :-/
that said – looking at your html and css, i think you could just do it by hand relatively easily, and it might be a route you’d want to consider going forward, as it will make small changes much easier to do.
if you open up your html file in a local text editor, you will see this snippet:
that’s your picture, and the div that contains it. according to your styles (style.css – again easily openable in a text editor), i see that there are no height settings on the div, meaning that it will host more content w/o clipping it…so i’d just paste your logo html right in there beneath it like this:
as the images will be right up next to each other vertically, you have 2 choices at that point to adjust the spacing and placement of the logo:
1. do it in the logo file – make the canvas size of the logo file large enough to fit the space and allow padding around it.
2. adjust the css. this is not as easy, but still easy enough if you want to learn css. you can control alignment and margin with values easily enough to get it placed nicely.
then upload that logo file and your new html file via cyberduck and you should be good to go!
sorry to not be able to offer up how to do it in your specific tool there, but don’t be afraid to just work with the html anyway – it’s amazingly simple and if you get used to it, you’ll find that you have a lot more power and control that way.
let me know if you need any additional guidance!
sitruc
-
hello…
since it’s not clear how the movie is embedded on their site, it’s hard to provide detailed suggestions, but you might want to look at this page:
hope that helps!
sitruc
-
-
hello…
viewing source says that they use wordpress, so i’d start by searching those themes on their site…they could have heavily customized an existing one, though, so there’s no promise that you’ll find that exact one.
but always better to do your own thing anyway…
sitruc
-
hello…
hmm – i really don’t know of a lot of video tutorials for html/css, just because what you’re learning is how to write code…in those types of cases, video can be a rough way to learn, because ultimately you’ll learn by creating the content…
that said, lynda.com (a good training resource) has some:
https://www.lynda.com/CSS-training-tutorials/447-0.html
but they are somewhat focused on specific types of things. but again, different people learn differently, however i think you’ll find that video tutorials for fx/ae/video/etc. work much better than for ones where you’re writing code…that said, give them a shot!
hope that helps…
sitruc
-
hello…
well – ya – learning css and html would be something easier done outside of wordpress docs, but if you want to focus on wordpress and its functionality, have you tried their docs?
https://codex.wordpress.org/Main_Page
they are quite through and good, imho, and you can learn a lot there…
(how people learn varies, so it’s hard to recommend a single solution, but their stuff is a pretty good start)
sitruc
-
hello…
did you read their docs/support page on this, perchance?
https://foundation.zurb.com/docs/support.html
“Want IE8 Grid Support? We know it can be hard to get clients to ditch support for IE8. We’re hoping with the auto-update to IE10 release from Microsoft, we won’t need to worry about it anymore. Until then, here’s a gist with a grid that will work in IE8, just like it did in Foundation 3.”
this might do what you need…
sitruc