|
Post by Debbie @ TDK on Jul 1, 2020 23:18:45 GMT -5
Hi all,
Ive spent the last three days intensively working on my new website, and utilizing CSS since apparently most old HTML doesn't work on everything (plus i want to learn basic CSS).
Anyway, does anyone have any good basic CSS tutorial sites? I checked the sticky and they seem really outdated and not related to CSS.
I'm so overwhelmed and just about ready to give up on webdesign. I might just forego a Petz site at this point. I tried Google and most sites are like "here's a basic setup for CSS but you should alter it to your needs", but no explanation on how to alter it so you can do things like add iframes, etc.
|
|
|
Post by stancymckatt on Jul 2, 2020 10:16:06 GMT -5
Disclamer: I haven't built a website from scratch in awhile, so you'll probably have to tinker with this a bit to get it working. If you like videos look at www.khanacademy.org/computing/computer-programming/html-css . The HTML course is very good, and so is the Javascript. I haven't tried the CSS yet, but I'm sure it will be good as well. www.w3schools.com/ is what I always used to look things up. has step by steps it. was my go to resource when I was coding from scratch.
If on windows you can save a Notepad file as a .css and dump all your css stuff into it. It makes things a lot easier. No making changes to a color on all 20 pages of your site. Change it in the CSS file and boom the color is tweaked on every page that has that div class.
If you're trying to separate CSS inside of the iframe, different from the regular CSS outside of the frame, I think you'll need what's called a custom class... See here: www.w3schools.com/cssref/sel_class.aspIt would probably be best to put the entire 'inside the frame' html files with this in them. Inside of the body tags: <div class" your class name here" > inside the iframe stuff </div> Then put this in an external CSS file like so. .whatever { your css here} www.w3schools.com/tags/tag_iframe.asp has some info on styling the look of the frame itself.
I hope you can work it out. Maybe step away from it for a couple of days and come back to it? That always helped me :-) EDITED TO ADD: If you get stuck, maybe I could help you? I'm rusty, but I'll try. :-)
|
|
|
Post by Debbie @ TDK on Jul 4, 2020 21:01:07 GMT -5
Heyy... I ended up getting frustrated and redoing the entire site start to finish which fixed 90% of my problems with spacing etc on my image map and some of my basic CSS issues. Now Im trying to get a few things tweaked with css, but mostly the site works. I couldn't figure out how to link the iframe to a spot on a page (relative to image) so had to manually align it, which means it'll look like crap in any other browser size..which sucks. I actually relied heavily on w3schools (thank you!) and stackoverflow.com/ (awesome resource since a lot of folks ask same questions any newbie would and you can use their virtual environment to see code effects real time). It's surprising how little info is out there for CSS beginners. I understood the basics and what they are for, but once it came to developing there's no information like HTML with a breakdown of what the instructions do. So, it was a lot of trial and error figuring out how to set up CSS from absolute scratch while simultaneously figuring out what changing a value does to the site. Anyway, you are wonderful for sending links and explaining stuff to me. <3 Honestly, I owe you!
EDIT: Tried for hours to get link color to change via CSS but zero results (both by using .whatever AND creating a new style sheet - new style sheet let me change the font at least), ended up having to do HTML which is frustrating. CSS seems really useless since it doesn't support more than a few changes.
|
|
|
Post by stancymckatt on Jul 6, 2020 14:30:36 GMT -5
Sometimes scrapping it is the only way. I like the layout! The blue is wonderful! All you owe me is to Pay it forward and help someone else ;-)
This is how I learned, by folks helping me out. I'm just trying to pass along what I know.
|
|
|
Post by Debbie @ TDK on Jul 15, 2020 19:22:44 GMT -5
Sometimes scrapping it is the only way. I like the layout! The blue is wonderful! All you owe me is to Pay it forward and help someone else ;-)
This is how I learned, by folks helping me out. I'm just trying to pass along what I know.
You're awesome And thank you for the compliment!
Did you ever figure out how to anchor an iframe so it doesnt move when the screen resizes or different dimensions? Right now it just floats around:
index.html - main page: <iframe class = "inner" name="inner" src ="http://teardrop.silk-serif.com/home.html"></iframe>
CSS .inner { position: relative; left: 15px; top: -800px; width:740px; height:489px; }
I understand from research that I'd have to set my whole site as divs and then set my iframe inside a back grounded div (yikes) - but hoping I dont have to?
|
|
|
Post by stancymckatt on Jul 16, 2020 7:13:19 GMT -5
I don't know. I always went with more dynamic layouts.
Could you post the link's your reading here? I'll try to see what I'll make of it.
|
|
|
Post by Thor on Jul 16, 2020 10:04:52 GMT -5
I usually don't use absolute positions when I do CSS/HTML-- sometimes I start with a template that I like and modify it from there-- I rarely create my own from scratch. I don't like using iframes and I use divs and math.
If you ever want help, I usually don't mind trying to make a template from something out of a photo of what you want the site to look like.
|
|
|
Post by Debbie @ TDK on Jul 18, 2020 12:51:28 GMT -5
Yeah, I used to use a lot of divs way back when..and iframes, but I've forgotten how I made those layouts. I have to basically relearn HTML and completely learn CSS so its a bit of a hill right now figuring out how to get my site to do what I want.
I definitely want to write from scratch - its the only way I'll learn. It's crazy difficult, but eventually I'll be able to do more than stress and be be confused. I also want to eventually develop my own layout for my book blog so..learning JS is something I also need to tackle..eventually. Ugh.
Thank you both! Thor gave me an idea for why my coding for the iframe might not be working, so I need to further research that hunch. If I figure it out, ill post here so if anyone has same issues they can find the answer..
You're both lovely. <3
|
|
|
Post by stancymckatt on Jul 18, 2020 14:25:44 GMT -5
I hope you figure it out soon! I'm looking forward to seeing what you come up with.
|
|
|
Post by Debbie @ TDK on Jul 21, 2020 20:59:40 GMT -5
Well I figured it out after hours and hours of research and trying everything under the sun..and its such a newbie mistake that it's embarrassing.
The problem wasn't the iframe, but the layout image itself moving..I thought about what Thor said and checked out my site on different platforms before realizing that the iframe wasn't moving at all, but the image in the background WAS.
Long story short..I put the whole thing in a div, set its location and no more issues. So..thats just embarrassing.
And the CSS issues were linked to a styling error my hosting plan's editor kept automatically doing as a "fix".
Thank you both, stancymckatt and Thor - you guys helped so much with my little, silly mistake. <3
|
|
|
Post by stancymckatt on Jul 22, 2020 9:21:10 GMT -5
That sounds like something that I would do! Don't be embarrassed. You stuck with it and figured it out, that's the accomplishment you should focus on!
I learned a lot from reading about how you were sorting though it, thanks for sharing your step by step. :-)
|
|
|
Post by Debbie @ TDK on Jul 26, 2020 16:07:22 GMT -5
That sounds like something that I would do! Don't be embarrassed. You stuck with it and figured it out, that's the accomplishment you should focus on! I learned a lot from reading about how you were sorting though it, thanks for sharing your step by step. :-) Aw I'm glad it helped someone! It was nice to figure it out at least. I feel like I am making a lot of the mistakes I made when I was new to HTML as well (eg: not putting layout in div) so I assume im on the right track to learning..
Thank you for always being so supportive
|
|