I am doing a Web Software develop with HTML, Javascript and CSS. Now I have several div s, each one is a interface of a functionality. Some of them are quite same, maybe only titles are different. So my question is here: Should I change the existing div with some code, or a new div with all elements repeat there. Which is a better design. I knew there is a principle named DIY, and I want to follow it.
The best practice is to repeat your html...
<div class="module">
<h1>Title</h1>
<p>...</p>
</div>
<div class="module">
<h1>Another title</h1>
<p>...</p>
</div>
But not your css:
.module {
width: 300;
float: left;
}
.module h1 {
font-size: 18px;
}
HTML is a markup language, and as such it's meant to be repeated. In fact, it's a sign that you are modularizing right. If things start to get complex ("damn, I need to put an h2 below every h1 in every div.module!") you can look into a programming language for the web, then the DRY principle applies.
Related
This question already has answers here:
Justify text to fill a div
(4 answers)
Closed 7 years ago.
Is it possible to shorten a container (preferably div) so that the dynamically inserted text within becomes a "perfect" rectangle without increasing the height?
<div style="width:800px;">
<div>I'd like these words to look like below, but I'd like to "automatically" set it with a few lines of CSS rather than with jQuery or some other computationally intensive alternative.</div>
</div>
<br>
<div style="width:800px;">
<div style="width:530px;">I'd like these words to look like below, but I'd like to "automatically" set it with a few lines of CSS rather than with jQuery or some other computationally intensive alternative.</div>
</div>
http://jsfiddle.net/Q7gcb/
I'd like to do this with a single CSS setting if possible, but I can't find one. I'd also like to avoid a loop in javascript to do this because I have to do this to a lot of divs, and I don't want performance to suffer.
white-space doesn't seem to help unless if I'm using it wrong.
Many thanks in advance!
text-align:justify;
By itself doesn't help: http://jsfiddle.net/Q7gcb/4/
max-width + text-align:justify;
Doesn't work either: http://jsfiddle.net/Q7gcb/5/
I believe that what you are looking for can be found Here
"In DTP and word processing applications, this option is known as 'force justify'. Unfortunately, this is not an option in CSS."
div {text-align: justify;}
And you should set width value as well.
Set the max-width and text-align to justify.
div {
max-width: 500px;
text-align: justify;
}
Demo
Try this.
HTML
<div style="width:800px;">
<div>I'd like these words to look like below, but I'd like to "automatically" set it with a few lines of CSS rather than with jQuery or some other computationally intensive alternative.</div>
</div>
<br>
<div style="width:800px;">
<div style="width:530px;">I'd like these words to look like below, but I'd like to "automatically" set it with a few lines of CSS rather than with jQuery or some other computationally intensive alternative.</div>
</div>
<br>
<div style="width:800px;">
<div class="justify">I'd like these words to look like below, but I'd like to "automatically" set it with a few lines of CSS rather than with jQuery or some other computationally intensive alternative.</div>
</div>
CSS
.justify{
text-align: justify;
text-align-last: justify;
}
.justify:after {
content: "";
display: inline-block;
width: 100%;
}
http://jsfiddle.net/Q7gcb/7/
Is there a common CSS layout technique for controlling the vertical source order of a page?
For example, can I change this...
<container>
<header></header>
<content></content>
<footer></footer>
</container>
...to this...
<container>
<content></content>
<header></header>
<footer></footer>
</container>
...while still having the <header> appear at the top of the page, above the <content>?
In other words, I'd like to apply the techniques used for controlling horizontal source order, such as "One True Layout" and "Holy Grail", to the vertical source order of the page.
This question asks essentially the same thing, but the responders didn't seem to get what was being asked and the asker's solution seems cumbersome.
I might get criticism for micro-optimizing, but Mega Menus and responsive design keep pushing my page content down further and further.
Littlefool's answer works well if you know the height of the block you are moving (if you are swapping two blocks, it's sufficient for either of them to have a fixed height).
However it doesn't help if the blocks all have flexible height. In that case you can try the technique from http://tanalin.com/en/articles/css-block-order/:
<div class="container">
<div class="block-1">1st block</div>
<div class="block-2">2nd block</div>
<div class="block-3">3rd block</div>
</div>
<style>
.container { display: table; width: 100%; }
.block-1 { display: table-footer-group; } /* Will display at the bottom. */
.block-2 { display: table-row-group; } /* Will display in the middle. */
.block-3 { display: table-header-group; } /* Will display at the top. */
</style>
(see demo: http://jsbin.com/etujad/11/edit)
Caveats:
It only works for up to 3 blocks (you may be able to achieve more by nesting).
It doesn't work in IE6/7, and there are some wrinkles in IE8.
Many browsers (except Firefox?) don't allow replaced elements like images to be given these display values (testcase), so you'd have to wrap them in a div and reorder the div instead.
You could either supplement this with JavaScript for old IE, or depending on the design it might be acceptable to just leave the blocks in the wrong order in old IE (note that very few smartphones run old versions of IE, as even Windows Phone 7.5 runs IE9, so this is a good option if you're only swapping the source order on mobile devices).
You cannot alter the source of a page with CSS. You can, to some mild degree, alter the HTML output, but not in this way.
The order of elements in an HTML document has meaning. So typically it won't make sense for your source to have a heading which comes after its related content. It is the order which defines that relationship in many cases.
What you can do is use CSS techniques to lay out these elements visually so that they appear to be in different order.
But their vertical order in HTML should be semantically logical.
You should know that searching for "the holy grail" is quite useless. Although I can understand why you want to have the content section in front. Usually search engines index the pages on the content as they appear in html. Having first a bunch of headers and other things won't do any good.
I haven't had time to look into HTML5 and CSS3 yet, but it is quite possible to alter your layout with only css. I'm a developer so my css and html skills are less then real web producer but you can play around with the position properties in CSS.
<div id="content">this is your content</div>
<div id="header">this is the header</div>
<div id="footer">this is your footer</div>
This html can still show the header tag on top of your page with the following css.
#header
{
height:100px;
width:100%;
background-color:Red;
position:absolute;
top:0;
}
#content
{
margin-top:100px;
height:500px;
background-color:Green;
}
#footer
{
height:100px;
background-color:Blue;
}
I hope it gives you an idea of what is possible. (since you mention HTML5 I suppose you don't need to worry about older browsers but only the latest releases).
You can use the old friend display:table to re order your element.
Lets say this is your source.
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
In order to reorder try this.
#container{
display: table;
}
#content{
display: table-header-group;
}
#header{
display: table-row-group;
}
#footer{
display: table-footer-group;
}
bam. you got it. Here is the proof of concept. http://jsfiddle.net/k0La8egp/1/
how can one create a css layout as seen on google wave that resizes automatically according to window size without the need for scrolling (apart from the specific elements on each page which are using scrollbars) with each div positioned in a similar fashion as seen on the website? i really love this interface and have been trying to create it on dreamweaver (web programming is a hobby) without using tables as practice.
i am learning css from scratch.
i have included an image for reference.
many thanks!
The columns can be achieved using CSS floats. Simply create three div tags and apply float: left and assign a width to each one.
The 100% height can be achieved through CSS, but in Wave's case javascript is probably being used. The particular logic depends on the site's design, since you need to take into account other elements on the page, such as a header bar.
If you were interested, you could use Firebug/Developer console to inspect how Google Wave's basic layout is setup tag-wise. One wrapper div, 3 column divs, and a div or two within each column for the panels.
I made a lil example about how you could try to start achieving that kind of layout: http://jsfiddle.net/steweb/A77gy/
Working with widths is pretty simple because you set floating columns, % widths/margins and opla' you get the fluid width layout.
Working with heights is very hard I think, because if you want a 'fluid' behavior that also affects heights, without using abs positioning (good for setting % height, but you lose the % width powerful), you should do something with JS too (even if I would avoid to do something that concerns the pure layout by JS) - I apologize for this complicated sentence :D.
By dealing with this kinds of layout 'problems' you will also notice that some browsers (...IE?...) sometimes behave in a weird way... so you will need some kinds of tricks to make everything working in EVERY browser (this is the main challenge IMO)
markup:
<div id="header">
link 1
|
link 2
|
link 3
|
link 4
<!-- or a <ul> -->
</div>
<div class="column" id="first-column">
<div class="window" id="window-1"></div>
<div class="window" id="window-2"></div>
</div>
<div class="column" id="second-column">
<div class="window" id="window-3"></div>
</div>
<div class="column" id="third-column">
<div class="window" id="window-4"></div>
</div>
css:
body, html{
height:100%;
}
#header{
width:100%;
height:30px;
background:black;
}
.column{
float:left;
margin:1%
}
#first-column{
width:10%;
}
#second-column{
width:30%;
}
#third-column{
width:50%;
}
.window{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #CECECE;
width:100%;
}
#window-1{
height:100px;
}
#window-2{
margin-top:10px;
height:200px;
}
#window-3{
height:310px;
}
#window-4{
height:310px;
}
I have been debating using css with div's and laying out elements, and really am looking to see if the practice i've been using would be considered the best practice, or if there is something different that i'm over looking that would be better.
Lets say we were placing two images on the same line, on on the left one on the right then an text in the ad below it. I might do something like:
#container{
width:800px;
height:300px;
}
.fleft{
float:left;
}
#left_img_container{
float:left;
width:150px;
}
#right_img_container{
float:right;
width:150px;
text-align:right;
}
#textArea{
margin-top:5px;
width:100%;
}
<div id='container'>
<div class='fleft'>
<div id='left_img_container'>FOO IMAGE 1</div>
<div id='right_img_container'>FOO IMAGE 2</div>
</div>
<div class='fleft' id='textArea'>this is my text</div>
</div>
Simple example but illistrates the float kind of layout style. Is this the better practice? or would using clear be better?
Thanks in advance
fleft as a class name is not good practice.
What if your client/boss says, "alright, we want that div on the right?"
You have 2 options... change the fleft class to be float: right, or make a new class and change it in the HTML. CSS classes should be titled by their meaning or description without using descriptive words which include position/colour/size etc.
The only exception I've found to the rule are images in an article. Since they generally float to the left and right, I do use class names image-left and image-right.
Examples
(from a bad name to a better name)
top => header
left-side-bar => menu
bottom-menu => footer
Of course, these are only examples. It's also good practice, because when HTML5 comes along, you'll actually define <header>, <footer>, etc
You can probably clean up your HTML code a bit, and use less classes in your CSS, like so:
<div id="container">
<img id="foo1" src="foo1" />
<img id="foo2" src="foo2" />
<p>This is my text</p>
</div>
#container {
width:800px;
height:300px;
}
#foo1 {
float:left;
}
#foo2 {
float:right;
}
#container p {
margin-top:5px;
clear:both;
}
It all depends on the implementation... But I do agree with Alex... You need to follow a more appropriate naming standard.... which would serve you better for the future...
In code we got from a "psd2html"-service, I see a lot of spans surrounding the contents of div-tags.
I know the difference between spans and divs, but I cant figure out why the code looks like this:
<div class="forgot-password">
<span>Forgot password?</span>
</div>
...
<div>
<span>Sign in</span>
</div>
Instead of just:
<div class="forgot-password">
Forgot password?
</div>
...
<div>
Sign in
</div>
I'm guessing its either some kind of cross-browser fix, or perhaps to "prepare" for the future if we want to put more stuff into the divs?
Edit:
Here is the CSS for the forgot-password part:
div.forgot-password
{
float: left;
width: 145px;
height: 22px;
margin-left: 3px;
}
div.forgot-password span
{
display: block;
float: left;
padding-top: 3px;
padding-left: 0px;
}
div.forgot-password span a
{
color: #C5C5C5;
text-decoration: none;
}
Although plain text can be "naked" in a div, some consider it good practice to wrap text content with an inline tag such as a span. This means you can separate out inline styles from block styling. With respect to your psd2html service, what you are seeing is an artefact of the conversion algorithm. Any algo is only going to have a finite set of rules. In this case I am guessing there is a rule like "wrap text in a span", and a rule like "wrap links in an a". In your example above, all your text content is a link, so you are seeing
<span><a..>text content</a></span>
From an HTML perspective, in this case the outer span is unnecessary. However it doesn't do any harm, and for styling purposes - unless you want to change the css - you need to keep them in.
To me it looks like overly complicated code. It would make sense if the code was:
<div class="forgot-password">
<span> some text </span> Forgot password?
</div>
So that you can discriminate text and links in CSS or jQuery.
Here we should look at the CSS to see what is done, but my first impression is that the span's could be removed since they add no semantic nor operational meaning.
To me, span has always been a way of quickly formatting text in a css compliant way. So I would suppose that they add spans to prepare for further formatting, but as no formatting is given, they don't apply any stylesheets, thus the span is "empty".
I'd say that these spans could as well be removed. They don't hurt in that case, but they don't have any use here.
It looks like these are buttons being marked up here, so it might be used for the Sliding Doors technique, so you can have two background images, so that if the content grows, you'll still have nice corners. It's probably just something they do on all things which look like buttons, but they might not use it to its full potential everywhere.