I am trying to put text on this webpage http://www.freethemind.biz/
Where it says On a physical level, meditation: and everything listed as benefits
AND
On a mental level, meditation: and everything listed as benefits
side by side, almost like a table
I have tried
float:left and float:right in CSS
Code below:
h12{float:left;}
h13{float:right;}
But it does not work! I am very new to web page creation and all, so any direction is appreciated!
I also tried wrapping the text to be put side to side in tags <h12> and <h13> if it makes it any easier (didn't for me =[ )
Without modifying your HTML, you can achieve this with the following CSS:
h12, h13 {
float: left;
width: 50%;
}
Note that heading tags only go up to h6! h12 and h13 are not standard tags, and will be unsupported in many browsers. As such, you should look into using <div> tags instead, and apply a unique class to separate out this behaviour to only a few, specific elements.
.floating {
float: left;
width: 50%;
}
<div class="floating">
<strong>On a physical level...</strong>
<p>Paragraph</p>
</div>
<div class="floating">
<strong>On a mental level...</strong>
<p>Paragraph</p>
</div>
Hope this helps! :)
First of all, h12 and h13 are non-existing HTML tags and thus invalid.
The following however works:
<div>
<div style="float:left;width:50%">
<strong>On a physical level, meditation:</strong><p></p>
<p>· Lowers high blood pressure</p>
<p>· Lowers the levels of blood lactate, reducing anxiety attacks</p>
<p>· Decreases tension-related ailments such as headaches, insomnia, and muscle & joint pain</p>
<p>· Increases serotonin production that improves mood and behavior</p>
</div>
<div style="float:right;width:50%"><strong>On a mental level, meditation:</strong><p></p>
<p>· Helps decrease anxiety</p>
<p>· Leads to a calmer mind which in turn results in more concentration and clarity</p>
<p>· Improves emotional stability</p>
<p>· Increases creativity and Develops Intuition</p>
</div>
</div>
It is also a better practice to use <ul></ul> or <ol></ol> to make lists instead of using <p></p>.
All you have to do is wrap your 2 DIVs in another DIV.
You should consider cleaning up your markup though. Take a look at "HTML Document Outline".
Related
I try to redo the markup of a one pager incorporating html5 elements. The key element of the page is a graph with logarithmic curves per country on the left and on the right the view controls to alter what and how things are displayed in the graph on the left. My initial thought was:
<main>
<article></article>
<aside></aside>
</main>
main wrapping the key content of the page - the graph and its view controls. I chose article for the graph cuz it is a self contained composition and the aside for the view controls cuz its content is indirectly related to the main content. The choice of the aside is due to the lack of some sort of dedicated element for a view control in html5 (at least I am not aware of any proper).
Problem with this solution is that Wave Tools pointed out that wrapping an aside inside the main element isn't recommended best practice and should be avoided if possible. My second choice then was:
<div>
<main></main>
<aside></aside>
</div>
Then I got the objection and feedback that aside is only suited for additional related information and not in the context of view controls. So I am a bit out of ideas what would be the cleanest and semantic proper way to markup that setup? Maybe that way?
<main>
<article></article>
<div></div>
</main>
From a purely HTML perspective (i.e. not including WAI-ARIA) you are over complicating this problem for yourself.
The controls are related so an <aside> is not appropriate. Changing a control changes the graph.
In this case all you need is <section> elements.
However although the HTML may be simple, the WAI-ARIA and associated focus management etc. is a little bit more involved. I have added a decent amount of information below to get you started but it is by no means a complete example.
Rough example of appropriate HTML and WAI-ARIA
/*styling is just for demonstration, it is not relevant to the functionality*/
section.left{
width: 58%;
float: left;
padding: 1%;
}
section.right{
width: 38%;
float: left;
padding: 1%;
}
#graph{
width: 100%;
min-height: 25vw;
background-color: #666;
outline: 2px solid red;
}
label, input{
display: block;
padding: 0.5rem;
}
section{
outline: 1px solid #333;
}
<main>
<!--without seeing your actual page it is hard to know whether you should use role="figure" so you will need to research that yourself.-->
<!--it should also be noted that if your site supports IE8 you should use `aria-label="heading 2 title"` instead of `aria-labelledby`.-->
<section class="left" role="figure" aria-labelledby="graph-title">
<h2 id="graph-title">Graph of country information</h2>
<div id="graph"></div>
</section>
<!--toolbar is the best fit for explaining what the controls are. You should also use `aria-controls="IDofElement"` to associate it to your graph (you will need to double check this in a screen reader as it is intended for use on textareas but I don't see why it won't work for an accessible graph / chart.).-->
<section class="right" role="toolbar" aria-controls="graph" aria-labelledby="controls-section" aria-orientation="vertical">
<h2 id="controls-section">Graph Controls</h2>
<label for="input1">graph x value</label>
<input id="input1"/>
<label for="input2">graph y value</label>
<input id="input2"/>
</section>
</main>
Explanation of example
You will notice that the HTML itself is very simple.
Just two regions with appropriate headings.
This will make it pretty accessible by itself as the headings indicate clearly what each section is for.
However we can add some WAI-ARIA attributes to improve things in screen readers that support them.
First we label the sections.
This is useful as some screen reader users prefer to navigate / explore a page via sections.
Other users prefer to explore a page via headings (majority of users actually).
By using aria-labelledby and pointing to the heading we cover both of these bases. (for maximum backwards compatibility you should actually use aria-label="same text as the heading" and role="contentinfo" on a region for it to work on IE8 and below but I only support to IE9 and up).
Next we add appropriate WAI-ARIA roles to each section. I have assumed the figure role is appropriate for the graph. but you will have to decide that based on your use case.
For the controls for the graph we give that section the role of "toolbar". We then make it clear that the controls in that section are related to the graph with aria-controls.
Now yet again I cannot see your graph so it may be (and is quite likely) more appropriate to use aria-owns on your toolbar.
Finally we add aria-orientation="vertical" as that is a attribute that is applicable to role="toolbar" when controls are stacked.
Please note that you will probably have to add focus management etc. yourself. See the W3C toolbar example for ideas on how to implement this.
I want to place the text below the image.But when i add a paragraph, it is set behind the image. How to fix this please ???
<div style="width:96%;"><img src="../Images/2.jpg" height="640" style="position: absolute; left: 0px; top: 0px; width: 1200px; height: 700px; float: left; z-index: 0;"/></div>
<div><p>Vision defines the optimal desired future state and the conceptual image of what an organization wants to achieve over time. It provides guidance and inspiration to what an organization is focused on achieving in some time. It is written briefly in an inspirational manner that makes it easy for all employees to repeat it at any given time. “All Sri Lankans seamlessly connected with world-class information, communication and entertainment services" is the vision of SLT.</p><</div>
You positioned the picture absolute, thats why it is in a layer above the text.
simply drop the style and the text follows vertically after the block element div.
body{
margin:0;
}
<div style="width:96%;">
<img src="http://i.imgur.com/0nJG7lN.png" />
</div>
<p>Vision defines the optimal desired future state and the conceptual image of what an organization wants to achieve over time. It provides guidance and inspiration to what an organization is focused on achieving in some time. It is written briefly in an inspirational manner that makes it easy for all employees to repeat it at any given time. “All Sri Lankans seamlessly connected with world-class information, communication and entertainment services" is the vision of SLT.</p>
Since the DIV is positioned absolute
place the <p> tag inside that DIV right after the <img> tag.
Hope it will work.
I have two divs floating left. I dont really want to use position absolute though, is there another way to keep the side by side without using position absolute? or is this the only way?
<div class="moreinfo" id="darkgray">
<p>
Today, hate speech continues to profilerate throughout the Internet, normalized in the form of YouTube comments, animated GIFs, and tweets. Online anonymity affords users a sense of security that fosters a culture of cruelty and bigotry. Our goal is to create a conversation about the consequences of hateful speech that rethinks how we communicate online. Social media is full of positive potential; we can tap into it by holding each other accountable.
</p>
</div>
<div class="moreinfo" id="lightgray">
<h2>
"WE NEED TO TEACH OUR CHILDREN NOT TO STAND SILENTLY BY WHILE OTHERS ARE BEING TORMENTED. IN THE END, THEY WILL BE SAFER ONLINE & OFFLINE."
READ ARTICLE BY WIRED SAFETY
</h2>
</div>
<div class="clear"></div>
css
.moreinfo{
width:715px;
height:250px;
float:left;
color:white;
}
You can use display: inline-block to have them side by side.
Here is an example: http://jsfiddle.net/2sZCb/
.moreinfo {
display: inline-block;
}
Here is a good article on the same issue you're having:
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
the best way i noticed was to use percent 50% for the width of both
the css you have written is work correctly for keeping div side by side, but you have to take precaution about the width of the inner floating divs, it should not be greater than the parent's width.
try this (reduce the width of the moreinfo just for demo.):
.moreinfo{
width:150px;
height:300px;
float:left;
color:black;}
the best solution is using display:table and display:table-cell for being sure that they are side by side
Set the containing element to a width large enough to contain both the way you want.
body {
min-width: 1450px;
}
Here's a fiddle
Lately I'm using a CSS structure that makes HTML much cleaner but I don't know if there's something wrong with this.
Instead of using:
.top { //properties }
.top-wrapper { //properties }
.top-logo { //properties }
And for HTML:
<div class="top">
<div class="top-wrapper">
Logo
</div>
</div>
I'm actually coding like this:
.top { //properties }
.top .wrapper { //properties }
.top .wrapper .logo { //properties }
And for HTML:
<div class="top">
<div class="wrapper">
Logo
</div>
</div>
Is it wrong to do this?
It is not wrong, but the more selectors you have, the higher the resulting specifity of your style. For more information about specifity see http://www.w3.org/TR/CSS21/cascade.html#specificity.
Imagine your example
.top .wrapper .logo { font-size: 10px; }
followed by this:
.logo { font-size: 20px; }
The <a class="logo"> will have a font-size of 10px, even though you specified it to be 20px for the second declaration.
It isn't necessarily "wrong" to do this, it works and if you find it easy to use I'd say go for it!
However - there are some drawbacks to this approach, for example your CSS file will end up larger, which will mean longer download times for anybody viewing the website (granted this effect may be negligible)
There's also the issue that, if you want to re-use the styles of top-wrapper on another element, you have to place that element inside a div with a top class, this ends up cluttering your HTML.
(For more information on the above point see OOCSS)
At the end of the day there are benefits and drawbacks to any approach, if you feel really comfortable with this approach, and it is working for you - then stick with it!
EDIT:
It should also be noted that you're second approach will take longer for the browser to render than you're first approach (the browser has to check multiple conditions instead of just one) for more info see this question
Nope.
What your second code is doing is saying, "target all the elements inside elements that have class top, that have the class wrapper and apply such and such properties"
On the other hand, your first code is only targeting the elements that have the class top-wrapper (or whatever) regardless of their parents class.
Depends how you will use that specified class
.logo { //general properties }
.top .wrapper .logo { //specific propery to top wrapper properties that overrides .logo }
.bottom .wrapper .logo { //specific property to bottom wrapper that overrides .logo }
HTML
<div class="top">
<div class="wrapper>
Logo
</div>
</div>
<div class="bottom">
<div class="wrapper>
Logo
</div>
</div>
Generally, it is better
It's not wrong, but it may get verbose and a little slower if you are have 10 levels of nesting. The result may also be harder to debug if both .logo and .wrapper .logo are styled.
On the other hand it may be nice to have a .button looking different in .content or in .menu. In general, use what makes sense in a specific use case.
No right and wrong here: everything depends on the site you are building, if you are in a team and what makes sense to you.
Personally I don't think the html is any cleaner now than it was previously (in this small example) but your CSS specificity has increased and that could have a detrimental knock on effect.
I now ask myself 'why do I want this element styled in this way?'. Sometimes it's because of inheritance, sometimes because it's a specific case that happens to be in a certain area. The example you use seem a good candidate for inheritance, but looking at the rest of the site might lead to a different conclusion.
Adding longer class names doesn't, to my knowledge, greatly decrease performance. I suspect the only effect would be marginal and is unlikely to be noticeable. Really dependant on the implementation
Additionally if you were 'reading' the html it may make more sense to read have class names like top-logo, other wise you need to look for the appropriate ancestor (bearing in mind there may be more than one that could be applicable).
I'm busy moving toward an OOCSS / BEM method (google these for more, so many resources out there...) myself because I believe it will make maintenance easier in the future, plus I find it makes more sense within a team environment. These are approaches that could lead to 'classitis' or otherwise 'messy' html. I don't mind that though and think the larger the site the more sense this makes. If you're making a 4 page site, maybe don't bother.
But this works for me and may not for you. So I go back to my original statement, there's no right or wrong here :)
I have long wanted to be able to include one style class within another. For example
med-font {
font-size:12px;
}
#message a {
style: med-font;
color: blue;
...
}
/* lots of other styles, some of which use med-font */
Obviously this is a stripped down example, but the key point is that all those anchor tags within #message shouldn't need explicit classes or ids. For now I either duplicate the font-size in each class that needs it or add classes to things that wouldn't otherwise require it. And since I want to easily control the font-size from one place, I usually start adding classes.
Another solution is to split up the definition of "#message a" in this example (below). This works ok for small projects, but for larger projects this is actually my least favoured solution. It makes site maintenance very difficult if you have many classes split apart and scattered around large style files.
med-font, #message a {
font-size:12px;
}
#message a {
color: blue;
...
}
So my question is two parts: 1. Does this annoy other people? 2. Does anyone know if this feature is/was being considered for CSS3?
Edit: Adding example of html body and more details...
The main point is that adding a class attribute to the 20 anchors below to set their font size is tedious.
<div id="username" class="med-font">schickb</div>
<div id="message">
<div id="part1">
text
<!--lots more tags and say 6 anchors -->
</div>
<div id="part2">
text
<!--lots more tags and say 8 anchors -->
</div>
</div>
<div id="footer"> <!-- footer anchors should be a smaller font-size -->
lala
<p class="med-font">Company Name</p>
<!-- other tags and 3 more anchors -->
</div>
Remember, an important goal is to have one place where "med-font" is declared so that it is easy to adjust. In my actual project, there are small, medium, and large font styles. I only want one declaration for each so that I don't have to search through the css to say change 12px to 11px.
The best solution currently is to add the "med-font" class to all the anchors in the body, and the "small-font" class to all the anchors in the footer. But I'd much rather do what I showed originally, and simply include the desired font in the styles for "#message a" and "#footer a".
Summary: I want CSS to be more DRY
No, it does not annoy me, because you can use multiple classes for an element and BOTH will match:
.idiot {
color:pink;
text-decoration:underline;
}
.annoying {
font-weight:bold;
}
/* and if you want to get REALLY specific... */
.annoying.idiot {
background-image('ann.jpg');
}
...
<div class="annoying idiot">
Ann Coulter
</div>
Personally, I find this a much more versatile solution to the problem. For example, in jQuery (or in another framework), you can add and remove these classes -- most commonly, you'll add a "selected" class or something that might do something like highlight a table cell, and when someone clicks to toggle it off, you just remove the "selected" class. Uber-elegant IMO.
In response to your edits, all you would have to do to remove the CSS from all of your A links would be to do something like this:
#message > div > a {
font-size:12px;
}
#footer > a {
font-size:10px;
}
Where the > symbol means "is a child of"
or, more generally (but this would also match an A directly inside #message and anything deeper -- the space means "is any descendant of")
#message a {
font-size:12px;
}
#footer a {
font-size:10px;
}
This is exactly what the Compass framework is good at. Sass allows variables, which makes coding/maintaining stylesheets very easy and a pleasant experience.
Have a look at SASS, which might do what you want. It allows for nested CSS structures, which can then be converted to CSS. I think.
In my opinion, the fact that you can't do this is perfectly OK because your CSS should remain as straightfoward as possible. On of the greatest advantage of CSS, as mention in Micheal Kay's XSLT reference (yeah xstl... I know), is that CSS is very simple and incredibly easy to understand.
I don't have to look at multiple places to know the styling effects of putting a class on a tag (well maybe but still).
So for me it would be a no for number 1. And as for 2, it has been discussed and I don't think it will be part of the standard.
css is not a programming language, it was never meant to be and (at this stage) never will be. what you're talking about has been discussed plenty of times before in W3C and WHATWG
oh and to answer 1) it doesn't annoy me
No, It doesnt annoy me, IE6 annoys me :)
It would be a useful feature to have, especially in a css framework, however, are we not being encouraged to lump all our css into one file now for "optimisation". I havent heard any rumours about such a feature in css3, but there is still a way to go on that spec yet, so who knows, it could make it in if you make enough noise now!