Hi,
I just joined your site after talking to one of the admins. They said that this forum should be a good fit for me.
I have done HTML a long time but never CSS, Just a couple sites designed a long time ago (circa 2000) but still active.
Anyway I was wondering if I make my template available on line if anyone would be willing to look it over and let me know if there are any fundamental issues with my writing or if I am good to go before building my HTML pages and filling them up.
I still need to set up media queries once I know rate table size and add a menu and photo gallery but for the most part it is complete.
Absolutely @Ohnoo! That’s what we’re here for, and the CSS/HTML enthusiasts around here are particularly friendly. I look forward to seeing your layout. And don’t worry, we won’t bite.
Thank You for replying, I joined another site and felt that it’s members were headstrong and petty questions were beneath them.
Anyway here is my site template and nearly ready. Still missing a nav menu, trying to find a css responsive that does not use java. Still needs an image gallery, possibly a table that will drop from horizontal to vertical and some media queries. Just want to make sure what I have is solid first.
Ha! Don’t worry about that here. We like simple questions.
There are far more expert people who’ll no doubt jump in too, but while I’m here, I’ll get things started.
Firstly, many people who describe your situation start off by posting pretty ancient-looking code, so congratulations to you on being quite different. On first glance, you have a nice, cleanly coded layout there.
I can only really suggest some very minor things to look at:
I would remove the <br> elements in the code—especially between block elements like section and div, where I’m pretty sure they are invalid anyway. But even those within your content are better avoided. CSS is much better for creating visual spaces, so we’ll walk you through that if need be. (Think placing margin and/or padding on elements to get the spacing you want, though.)
There’s nothing particularly wrong with the <hr> element, but again, CSS gives you much better options for creating a visual line, so it’s the same situation here. We can walk you though that. Here’s a simple example of CSS for a visual border:
in terms of design, this is a tricky one, as beauty is in the eye of the beholder, of course. I’d say the background image on the body element looks a bit dated in this era of flat design etc, but that’s really up to you. I draw my inspiration from studying sites I really like visually.
perhaps the only other observation I’d make at this stage is that section, header and footer elements are likely to be used more than once in an HTML5 layout, so you might want to add classes to the ones you currently have (or ARIA roles etc.) so that you can target them specifically in your CSS.
As you say, there are some things to add, including @media etc. Feel free to ask questions about what I’ve said above, or about anything at all. As I said, we are a friendly bunch here and will be happy to walk you through any aspect of this.
Thank You for your response, I am so glad you did not find any major issues. I know this is my first CSS layout but I did spend days looking at templates, css turtorials, and reading every section of the CSS Guides on W3CSchools which I think helped get the code fairly clean on first try.
Let me explain a bit about my template.
The breaks <br> in the page are simply for me to show visually what the page will look like to the person who will ultimately approve the look and will most likely all be gone or mostly gone once I get all pages created. I am simply including every element on one page so I can to make it easier to just create a copy delete unneeded content areas and then copy and paste in the content from the original website.
The HR’s will not be present in the final layout either. This again was just a way to break up content for the sample layout.
I believe that I have a plain section and a section with a class already attached which is the one above the footer. I only intend to have two sections for each page. If I need a third different type of section I can add a class when I create it.
The one thing you were not sure about was the look. Let me state what I am trying to achieve and maybe you can shed a bit of light on the subject.
First lets state that this is an RV Resort, my mobile traffic is nearing 40% which is why I needed to go responsive, along with the fact that Windows XP is a year retired so I am not worried about supporting below IE9 and the company just changed colors brings me to a good time to do a complete rebuild.
Most of my visitors are retirees as I am in Florida and I am trying to gear the page to them.
The reason for the background I used is as follows. The body background is basically an image of the wall of our store trimmed to make a background. The nav background is the same but of the trim.
What I am trying to accomplish is making sure that when the screen gets too large I don’t end up with a lot of blank space the same color as the content area. Do you think going solid on the background with a similar color is a better way to go?
If you look at the page again but then cut the url back to the .com part you will see the website I am trying to replace which was designed back in 2002. I don’t want to put that address here because I don’t believe in gratuitous links for not reason.
So there is what I am trying to accomplish. I will listen to any color or design ideas as well as any bugs anyone sees. Please be sure that I will check in for help if spacing becomes an issue once I remove the br’s and hr’s.
At this stage you’ve kept it nice and simple, and personally, I think that’s a great approach. So many people go for a lot of complexity these days and get themselves into trouble, but really, from an end-user point of view, simple is better, I feel. (Things like sidebars, for example, often just create a lot of noise and clutter.)
Ah right, I see. It was mainly something like this that I was concerned about:
<section><br>
<div class="center_text">
That’s where you can get into trouble. Even for the purposes of a quick demo, I would be removing the <br> and doing something like this instead:
.center_text {
padding-top: 1px;
}
That sort of thing is good practice anyway, as it reminds you how to deal with things like collapsing margins (the issue the <br> was helping with, as the first paragraph margins were pushing out of the container).
Ah right, I see. A blank color would probably look a bit more modern, or you could even go for a full-size background image of the resort, as an alternative. There are lots of spiffy design options these days.
Hi, Thank you for your valuable feed back, I really appreciate it.
I actually have the exact color codes of the paint used to paint the building, I got them from the paint company website by downloading a sample swatch of the color we used. Then simply taking a color sample with the photo editor told me the colors. Will give it a try and see what you think.
As for a full background I was not sure how well that works and did not know if it was being too over the top.
OH! That break, I thought maybe you meant line breaks in the text of a paragraph where I may have a reason to break before the natural line break.
Let me tell you why that is there and which brings us to the main reason in the first place that I went looking for help in the first place. If you look at my html and simply remove the break I then get a gap between the nav and section areas. I tried the break and it worked to pull them together. I had another previous solution which was to put a negative top boarder of -20 pixels in the section and that also worked but was not sure how well accepted a - pixel is.
So that is what I was trying to accomplish and if there is a much better way to fix that issue I can remove the br from the code.
Here is my ultimate goal:
Simple layout like the original page.
All sections centered in the page which is why the sections are only 80% of the container.
I do not want the sections to stretch (flow) beyond 1200px as max width.
I want the text, to be left aligned but centered between the margins of the 80% container with a max width of 700 px for the reading area to keep lines from getting too long.
Anything else like headings will be self centered in the page as a normal center meaning if one line is longer that the other it will be equal on each side of the other centered lines.
All of the above can be seen on the original website.
Heh, probably is, but it’s a popular choice these days, and can work quite well—even if just a full background for a header, with a logo over the top.
Yep, the code I suggested above is one of the better ways to deal with it. I added a tiny bit of padding to stop the margin collapse, but a top border would work too.
Yep, all that sounds pretty straightforward. If you’d like help with any of that, I’d suggest making one or two changes at a time and posting a question if there’s something you’re not sure about.
I will now change the code mentioned to correct the spacing issue and remove the break and div. Which from what I understands will fix the issue I was trying to repair.
Then for now I will do some solid color backgrounds to see how it goes because I can always change the solid backgrounds to a full image background at a later time if it seems that it would be a better choice. May even make two copies one of each for comparison.
I will work on a new logo, the red logo shown is not a final logo just a trial and is a red version of the old. Maybe a flat logo of some kind will be better as well.
So with plans in place I will work on the page, do the other chores I have with the reservation system and post back after I get a little further down the line.
Also I noticed a way somewhere of a way to mention someone to give them credit for their efforts in the forum. Can you tell me how to do that?
Two things you can do. If you want to get their attention, you can type their username with an @ at the beginning, and that will both link to their profile and alert them that you’ve mentioned them. And to say thanks, and good way is to click the heart icon at the bottom right of their post(s), which indicated that their offering was appreciated in some way.
Just one last question to understand what I have learned in this thred so I don’t go there again.
In the css code where I have the break that I am fixing with tne new code, what is it that causes the top boarder to shrink leaving the gap between sections? Understanding is a form of prevention.
Also I assume that when ready for a second look I should move to the css/html forum to continueâť“
One thing that’s good to learn to use is your browser’s developer tools. For example, right click anywhere on your web page and select Inspect Element. That opens the developer tools, and when you hover over elements, you get to see how all of the styles affect the page, including default styles. Here’s an example of how you can see the margins hanging out of your container:
Yep, that would be a good idea. Feel free to post in this thread, too, although you’ll probably get more attention from the experts by posting a new topic. Don’t hesitate to call upon people you’d like to get help from, like @ralphm and @PaulOB (Paul is our super duper expert here, and a very friendly chap as well!)
Very good article, you know before I came here I actually came back that issue several times doing Google Searches to try to find a solution. Maybe I was not using the correct search words but that is an article that I will not only bookmark but print and have on hand for quick reference.
All along I thought I did something wrong which broke the code. Actually I thought I was missing something in inheritance which in a way I was.
So when I first tried to fix the issue my instincts however misplaced to place a negative margin in the code would have worked as noted in the article.
And as far as putting a boarder or padding in the code I am guessing what that does is give the text and its relative space a ceiling to press up against and eliminate the issue.
I was thinking in the physical world in the manner of gravity, take a stack of bricks, pull out the middle one and the pile naturally comes together.
Holly Cow Batman there be a lot to make your mind go in circles with this stuff.@!#@!
Back to work will come back for the sequel when ready to present.
Sure is, but if you just deal with things as they arise, you get to know the field pretty quickly. I do recommend reading a book on CSS, as that gives a comprehensive overview of the subject and makes sure there are no gaps. There are lots of books available, so just pick one that looks good to you.
I will buy a book for the reference. Are there any on the market that you or most writers would consider the holly grail of books on this subject? Kind of hard to find time to read these days with having to work for multiple companies all part time with the way business do things now but even if can’t read every page will have for a good reference. Like I do my OS Books.
Never need a book for plain old HTML but I guess that is the past and time to reeducate. The hardest part is the websites I do are just an extension of my normal duties so becoming a full fledged pro is out of the question but I will be happy with an intermediate level.
Next time when I bring back the sequel hopefully you can see what I do with the logo. (Not an artist but will give it a shot).
The books I learned with are a bit our of date now—only because some new features have come along of late, and browsers have gotten better.
There are some great books and courses at Learnable, though—the sister site to SitePoint, so I recommend you check out some titles there: https://learnable.com/topics/htmlcss
They have some great deals at the moment, too, including partnered learning for this month … although I’m not certain that option is still open.
Yes, neither am I, which has led me to keep things really simple, because it’s hard to do branding very well without good training (at least in my experience).
I joined another site and felt that it’s members were headstrong and petty questions were beneath them
Some of us may be a little headstrong; but we can be yelled at and told to be good if we aren’t exhibiting appropriately friendly behavior
Easy or simple questions are definitely not bad! Speaking for myself, I love throwing out a quick solution to someone else’s quick problem in a second I take away from my workday. I feel good for having helped, they get their problem answered, and it only took a minute or two of our time. What’s not to like? Definitely don’t worry about that.
Welcome aboard, and good to know @ralphm had you well taken care of on your first post?
@ralphm
Hi, I was not gonna come back to this post because I was going to make a new one when I have real pages ready.
However I noticed that for some reason the two test tables I have on my template are picking up two different fonts when I only have one group on the website. Was wondering if you could explain why?
Also I have tested a few menus but can not seem to get one that will nicely sit in the reserved space. Would like horizontal with ability to drop one level, fill the width of the area and shrink like the images but when gets to a too small size then to revert to a hidden menu with the menu icon and when clicked or touched then open as a single row drop down. I will build it out but just wondering if you know of anything that might fit the bill.
By the way, I have a new test logo and have fixed the padding setting.
I look forward to seeing your layout. And don’t worry, we won’t bite. 
