This is my very first post to this forum. I have made a few small web sites but just using html. Now I am venturing into CSS and want to learn more
I read on one post that you like to answer questions so I will probably have a few of them for you.
I am following the Site point build your web site the right way, 2nd edition. I have gone through the book twice up to the point of starting chapter 6 I did not think I understood it good enough the first time so I wanted to get a better grasp of things.
I want to make a page with as many images that can go across the page till it if full but I do not want to use tables as I have in the past.
In the book we use images but it does not help me to figure out how to get mine to be horizontal as in the photo gallery page we use images but
they run vertical centered on the page with only one in the middle going down so I don’t know how to put them side by side.
I am understanding a lot about css but I have to admit I am still pretty mixed up with the positioning and layout part.
I think this is probably a hard thing to lay out graphics in this order using css but maybe there is an easier way than I think there is.
I hope I have explained this so someone can understand what I am talking about. I would appreciate if anyone has any good advice about putting
these images as I would like to do.
Yes indeed, we love to answer questions. The most common way to do what you are describing is to use a list, since this is really a list of images. So the basic HTML is this:
Thank you for your reply. I actually have not started the site I want to make yet. I did not want to use tables for the images so that is why I have been reading and working through this book to see if I could see how to use the my images without putting in a table.
Thank you for your reply. I was not aware that you could use images in a list. I have always just used it for list items. I see so many websites that use tables for
laying out there images and I know now that tables are suppose to be only for tabular data by reading these books.
If only some other authors would do the same as the site point book and actually make a site while your working through the book. It is kind of hard to read a 400
page book and then say ok now go make a site, how can you retain all that in your head when you are a beginner. There is no better way than doing it to learn.
I am sure when I get started I will come to more things I need help with and it is nice that you are here for some help.
You can put pretty much anything into a list, and lists are considered the most meaningful way to mark up a lot of things like this, which are basically a list of items. So here you really have a list of images. A menu is basically a list of links, so ULs are normally used for menus as well. There are several ways to get them to display horizontally, but float: left is possibly the most reliable way.
I thought of another question last night, what if I want a small border to go around each image and I want a small space between them so that they don’t but up against each other on the page. I have taken a lot of Paint Shop Pro lessons so I am good to go on that part, now I just want to style my site using css.
I finished the book last night build your web site the right way, there was one part I hoped he would cover more was about folder stucture but otherwise it was laid out in very
easy to follow chapters. I have to go over it again as the layout and positioning is the hardest part for me to get.
I accounted for that in my sample code by giving each LI a left and bottom margin of 5px. Don’t try to put these margins into images. Let it be handled by CSS.
there was one part I hoped he would cover more was about folder stucture
It’s pretty intuitive, really, but feel free to ask questions.
Well I decided to try and work through another site point book as I found the first one very helpful and I want to have more experience before doing the site I want to make.
Well when I got to page 37-- in Everything you know about css is wrong I came to a part that is just what I want to do on my site. The author is making a photo gallery, the
section is called making a perfect grid. Now they are using a bunch of div classes and putting the images in these.
Do you think it is better to make this with the list or is it also a good way to do what this author is doing in this example. I can see how they are doing it except I don’t why
they are using so many div’s.
They have a div class of “grid” then a div class of “row” then a div class of “image”. Then I assume that you have to have every div closed at the end and have the same
amount of closing div’s as there are for opening ones.
I do not understand why there is so many div’s at the beginning. I also found that I did not understand that part in the first book I did, I will ask you that later, I don’t want to confuse you.
The basic point of that book is to highlight the use of display: table, which wasn’t available in IE7 and under so has generally been underused on the web so far. That said, it’s often not the best method to use anyway. All those divs are needed for using display: table, but that’s not really the ideal method to use for a gallery like this. (The book is just showing how to do it with display: table all the same.)
I’d still say using list items and float: left is a better method. Where it tends to fail is in a case like this, where the amount of content in each list item varies. In that case, floats will break down, as some taller list items will prevent some other list items from floating beneath them, creating a mess. In this situation, display: table can be very handy, but there’s still a better way, in my view. This is to use list items still, BUT, instead of using float: left, use display: inline-block. It has the same effect, but makes the gallery a lot more flexible and requires less code. The only rider is that you need a small fix for early versions of IE (7 and under) which don’t recognize display: inline-block. However, if you serve them with display: inline instead, they work just the same as good browsers.
Thanks again for your reply. I will use the list way and when I start I probably will have more questions. I looked over the address you gave me and will look at it more detail later.
I wanted to ask you what text editor you use for writing your css. The reason I want to know is I was using Word Pad and everything was fine and then I decided to try
Microsoft Word.
Here is what I found, when I used Word and I saved the file as a (example: main.css) and saved it as a text file it would not work. When you would go and look at it in your documents and hold the mouse over it it would say text file.
When you save it the same way in Word Pad and hold the mouse over it in your documents it says it is a CSS file and it works just fine.
I tried this a whole bunch of times and could not get it to work in Microsoft word. Some things to me just seem so strange why when your saving it as a text document why it will not show up as a css when you name it and save it as a css file.
Thank you for your input I will stay away from word for writing css. I have a question now that you mention Linux. I just installed Zorin 5 on one of my machines and I really
do like it very much. I know a bit about Linux and I see the software center has lots of stuff.
The thing I don’t know anything about is installing software from outside sources as I have never used a terminal before for commands. Do you know anything about
crossover for Linux where it will let you use some of your windows programs. I am not sure I will know what to do with the file or how to get crossover set up but I was
thinking I would like to try it.
The 2 programs I want to use are Paint Shop Pro and HTML Kit for writing web pages. I still code all the stuff myself with Kit the reason I like it so much is it has a preview that you can just switch back and forth and don’t have to keep opening your browser. I have gotten used to it and kind of hate to switch for that reason.
Does bluefish have a preview? I tried Kompozer and I did not like it. I guess it is what you get used to. I also know you can use the Gimp in Linux but I know paint shop so well now I have taken a lot of lessons and don’t want to have to learn another new program, it takes a long time to get to know a program really well and then when you
switch you feel lost.
I’ve just looked up Zorin, as it’s not a distro I’ve come across before, and apparently it’s based on Ubuntu, which is what I’m running. Ubuntu has an excellent forum for all kinds of questions - hopefully Zorin has something similar. If you’re not comfortable with using the terminal, try to install packages using Synaptic Package Manager, as far as possible. In Ubuntu, I believe you can double-click .deb packages and they will just run, but it’s a long time since I needed to do anything like that. I’m sure Stomme poes also runs Ubuntu, and there will be other Linux users about, so if you get stuck, you can post a question in the “Computer Hardware and Software” section of the forums.
I tried Kompozer briefly, to try to help somebody else who was using it, and I didn’t like it either. Bluefish doesn’t have a preview as such; what it has is a “preview in browser” option, which I like much better. That way, you know how it’s being rendered by a browser, rather than an editor - which is, after all, how your visitors will view your site. You can set one browser as the default, accessible from a toolbar icon, and any number of others which are accessible from a menu.
Another possibility in Linux is Geany, which I’ve also used. It’s just a case of finding the one that best suits your method of working. I like the auto-suggestions for tags in Bluefish - they help to cut down on typos.
First I have to ask you do you know if it is ok to ask these questions here, this is off topic and just want to make sure it is allowed. I am new here so just wondering as
I don’t want to break any rules.
I downloaded the Bluefish and it looks pretty good. I looked it all over but have a couple questions. Where do you tell it which browser you want to do your preview in?
I see there is a blue ball on the top with the tools.
My next question is when I go and want to insert an image I get the window I want to get the image from, when I go and get the image I get the image
plus all the info as to where the file is on my computer. How do I just get the image src and not all the other info I don’t want on my page.
Here is the example below to show you what I mean.
Your questions are perfectly fine! Let the conversation flow as necessary.
My next question is when I go and want to insert an image …
Before proceeding any further, my worry here is that you are going about this in a less than ideal way. Ideally, learn to design web pages by writing the code in a good code editor. So, rather than “inserting an image”, simply write your code, something like this:
<img scr="images/myimage.jpg" alt="some alt text">
It sounds like you are using WYSIWYG functions to create a bage, which is not a good idea.
In terms of browser testing, I don’t know about the editor you are using, but you can always go to the page file on your computer and right click “open with …” to check it in each browser you have installed.
Yes, that’s the shortcut for your default browser. If you go to Edit > Preferences on the top menu, that will bring up a box where you can set all kinds of preferences. One of these is “External Commands”, which brings up a list of browsers (not all necessarily installed on your machine). The column on the far right has a tick box to select the default browser, although you may have to drag the window to enlarge it so that you can see this option. You can also add browsers to the list. (Bear in mind that I’m using the Linux version; the Windows version may be slightly different.)
OK. I’m guessing that your site is called “Head First Lounge” and you have the images for the site inside the “images” folder - right? If you have the “Head First Lounge” folder selected in the left panel of Bluefish, you can click the arrow next to the images folder to open it, then click on the image you want to use, which should insert it correctly. Or, as ralph.m says, you can just type the img tag. (I prefer clicking on the image - anything that helps prevent typos. ) It should also work just the same using the Dialogues menu. (Dialogues > General > Insert Image) That requires more steps, but has the advantage that it automatically inserts the width and height attributes along with the image.
I agree that isn’t a good idea, but don’t worry - Bluefish isn’t a WYSIWYG editor. It is:
An open-source editor for experienced web designers and programmers, supporting many programming and markup languages, but focusing on creating dynamic and interactive websites.
or so it says.
This example is from the book I worked through called Head First with CSS and HTML. Yes the image is in the images folder in a folder called Head First Lounge.
I tried that again and just clicked on the image I wanted to insert and it still puts all the other info in like before like where it is located on my computer.
I want it to be inserted like this. <img src=“chai.gif” width=“50” height=“100” alt=“drinks” />
I do know how to insert images as I have done some of that but just curious now why this will not work like I want it to. Even when I use HTML Kit I do almost all the
inserting by hand except for maybe the paragraph and a few thing to save on some typing.
I have gone to external commands and set it to firefox 32 bit and have a check mark there but when I click on the blue ball nothing happens, I have also clicked apply and ok.
