HTML/CSS Help

Well, I guess I see someone already helped you fix your issue.

Looking at your CSS, it seems to me that you could minimize your CSS code by combining and including CSS declarations with commas and inclusion.

You can specify the same style for a bunch of different elements, and only add the variation within that element. Also, use the short-hand code for double-lettered colors, like Red is FF0000 but you can write it as F00.

For example, if all your ULs, OLs, LIs, Ps, and Bs will have the same style, just use commas:

Code:

/* Same declaration for all UL OL LI P and B tags */
ul, ol, li, p, b { 
	color: #F00;
}

OR, if you wil have a declaration for a B inside a P and only that should have a green color, use the "within" combined declaration of an element separated by a space with another element:

Code:

p b {
	color: #0F0;
}

Code like that will help you shorten your document and organize it.

 

Also, I hate to keep spamming this thread, but your code is terrible.

You are adding classes to the {strong} element and wrapping {h1} inside {strong}

This makes your code look novice at best. The correct way to do this is:

Code:

{h1 class="ribbon-content"}

{strong}Test Ribbon{/strong}

{/h1}

 

^ Nice catch. Also, isn't H1 "strong" by default?

Still can't reach your site, Lil Pun.

 

Not really sure if it does or it doesn't, mainly because I use bootstrap which resets the html elements beforehand and applies their own stylesheets to them.

I've never used native html before. :grin:

 

You have an empty div for ribbon-stitches-top that doesn't make any sense which you didn't add that to the "ribbon" css and avoid a non-standard approach to html if you can.

The other thing is that you are adding WAY to much css to 1 css class. If you need a width, you are just adding that to a class and going on.

This is why people are telling you to use bootstrap, because your code is already terribly organized and you haven't even done nothing yet.

I couldn't image you creating an entire website this way. But go ahead and do it.

 

And, I apologize, Lil Pun, but you didn't "repeat" code like I thought you had before. You have some stuff specified with different numbers in size, points, location, etc.

I don't know what "bootstrap" is... all my code is original. I hardly ever use someone else's code. Maybe I'm too "old school" to be using new plugins, jquery, bootstraps, etc., etc.

What is that, anyway?

 

Front-end responsive, mobile-friendly framework, developed by Twitter. You can use the kitchen sink to plug and play in components, buttons etc.

Basically saves me a lot of time, and I don't have to worry about optimizing the amount of media queries and etc.

It's especially great for back-end people who are too busy debugging fires in the back to customize CSS.

http://getbootstrap.com/

Myself, I personally prefer http://foundation.zurb.com/, but for bread & butter stuff I want up quick, Bootstrap and its' variants are a godsend.

 

Oh come on how can you write JavaScript code and not know jQuery. You might be OK like 10 years ago.

(Unless you use some other Frameworks like Angular or w/e)

 

^ I didn't say I don't know it. I said I don't use them. I take that back, I may have... because someone has asked to include it in their site. They'll say: "Oh, I like how these images flip! Can you please add this JQuery on my site?!?!" And I will... but... for me to write jQuery or to use it... it would take too much $money$ or time.

But I do write my own JavaScript and my own "framework" or whatever that means. What is "bootstrap" (second time I ask)?

 

You actually do use somebody else's code (unless you apply your own resets) it's called html.

 

Bootstrap is a collection of css code in the form of a stylesheet. At its basic.

 

^ Thanks. Seems like an "easy way out" to write code. I will stick to my own methods. They seem to work just fine.

I write it all or select it from elements all on my own. I don't copy it from other pages or use their style... but I know what you mean.

 

plenty of web developers bang on bootstrap to no end and call it cookie cutter, etc, but bootstrap, like anything, is just a tool. You can create any website any way that you want FASTER with bootstrap.

To be honest, a lot of bootstrap sites DO like the same, but it doesn't have to be that way. I can start with boostrap and copy ANY website with it.

It's all about how much customization you want to do.

 

I understand what you are saying pun, but I think you are going about it the wrong way.

If you want to know the difference between absolute positioning vs. relative positioning vs fixed positioning, I can understand that, and I could point you to articles that might help.

However, your code includes pseudo classes, which, in my mind (and from the level I see you are at) is simply over-complicating the entire process.

Now, you can take my advise, or you can just say that I am an idiot and move on. Either way I don't care, however I am going to make 1 more stab at trying to point you in the right direction.

My recommendation for positioning elements is this:

You need to create a structure on your webpage that first contains a container class. The container class should be the very first div element after the body tag. Within the container class you should include a max-width in by % or by px. You also want to include any margins or padding within this class.

One of the tricks to centering elements within a container is to add this code to the container class:

Code:

css stylesheet

.container{
margin: 0 auto;
max-width:960px
}

You can also add a percentage to max width like this:
.container{
margin: 0 auto;
max-width:100%
}

finally, say you want two elements to line up side by side, you could create a .row class like this:

Code:

.row5{
width:45%
}
or
.row5{
width 465px

By using row 45% as opposed to 50%, you allow yourself a 10% gutter.

Finally, the idea of a clearfix will help you to keep elements from running over one another. But that, in itself, is a long subject.

 

All this talk of CSS and organization of it, I cannot stress this enough:

USE LESS: http://lesscss.org/

Nesting, variables, mixins, oh my! People who still write regular CSS make me shake my head.

 

Even for object selection, you should use jQuery for browser compatibility reasons. Navigating the DOM can vary from browser to browser and jQuery simply abstracts this away from you. This is becoming less of a problem as the browsers come to a common standard, but is still an issue today. For example, jQuery 2 is much smaller than jQuery 1 because it dumped a lot of the IE 8 and below compatibility.

Bootstrap is a bunch of css/js utilities that you can use if you like. I don't like a lot of the features and generally write my own styles for layout, but it's useful for button and form styles, along with things like navbars, tabs, pills, and modals. To use it correctly, it requires a ton of customization, though. Bootstrap 2 had more customized styles, but Bootstrap 3 went with more basic styles and stress customization.

 

The problem with less is that it really is just a way to code faster, but unless you are designing websites for a living, the hassle of trying to learn it isn't really worth your time, when the end result is simply a stylesheet.

But I do agree that if you code for a living that it can be a lifesaver.

 

There's nothing to learn. It's CSS plus useful features. If you write straight CSS, it'll still work. It's not ClojureScript or anything.