I'm doing homework for my html class. And the book makes us insert some css. So I copy pasted it. Here it is.
body {
font-family: Arial, Verdana, Garamond;
font-size: 11pt;
}
a {
text-decoration: none;
color: #122973;
}
table {
width: 65%;
margin-left: auto;
margin-right: auto;
border-spacing:10px;
}
.menu {
text-align: left;
width: 20%;
}
.content {
width: 80%;
}
But I don't understand what .content is. Or .menu.
When I googled content, it showed me things like
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;
Here's the solution image to my homework.
What part of that picture uses the .menu and .content rule?
In my homework it never said to give anything a class called content or menu.
.content is just a class selector - it selects any element on the page that has a class of 'content'.
Identifiers preceeded by a dot (.) are class selectors. They refer to the value of a class attribute of an HTML elmement.
The page creator can make up these names themselves, so googling them is pointless. 'content' probably refers to the content section on the page, but you would have to check the HTML to be sure. Judging by the image you added, this seems about right, there is a menu which is about 20% wide and a content section that occupies the rest of the space.
So if your assignment is to write the HTML, you just have to apply the right styles to the right elements by adding class="content" to the proper elements.
.content targets to a class selector.
HTML markup for:
<div class="content"></div>
This can be used many times inside of a page, unlike id which should be unique per page.
content and menu are the names of classes of elements within the HTML code of the page. Class names are prepended with a dot (.) when referenced in CSS.
This is a good resource for CSS selectors: http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
the ".content" references to the class "content", where you have all that text, and you are defining in that class that you want the content box to be 80% of the size of the website.
Related
I want the header of a paragraph to be centered, but I can´t get it working.
The whole and the paragraph have the property text-align:left and the header has text-align:center but still it´s not centered.
body{
text-align:center;
}
main{
text-align:left;
}
b{
text-align:center !important;
}
<main>
<b>Header:</b>
</main>
Can somone give me some advice what I´m doing wrong or missing?
Put a div around it. The <b> tag cannot be centered.
body {
text-align: center;
}
main {
text-align: left;
}
.header {
text-align: center !important;
}
<main>
<div class="header">
<b>Header:</b>
</div>
</main>
A <b> element is display: inline by default.
The text-align property says: Applies to: block containers.
It therefore has no effect on a <b> element by default.
You need to apply it to a block container instead. There are three ways to do this:
Find (or add) an ancestor element which is a block container
Change the <b> (using the CSS display property) so that it is a block
Replace the <b> with a different element which is a block.
In this case, the apropriate thing to do is to replace the <b>.
You should select markup based that describes what content is and not how it should look. (This has been true since CSS 1 was released in 1996 and began the process of separating style from structure in webpages).
You have been calling the element "the header". HTML provides elements specifically for that purpose.
Aside from the <header> element itself, there are the <h1> - <h6> heading elements.
You content makes it look like an <h1> would be appropriate.
h1 {
text-align: center;
}
<main>
<h1>Header</h1>
</main>
You can also remove the !important flag. It is usually more trouble than it is worth and provides no benefit here.
header seems a better tag to group "introductory or navigational aids...heading elements but also other elements like a logo, a search form, and so on.", documentation at MDN.
main would be better suited for "content...unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless the document's main function is as a search form).", documentation at MDN.
To be clear, text-align property is inherited by child elements, documentation at MDN.
That said, consider the following code:
body{
text-align: center;
}
header{
text-align: left;
}
h1{
text-align: center;
}
<header>
<h1>Header:</h1>
<p>Content in a paragraph (should be left aligned, inheriting from `header`)</p>
</header>
A easy solution may be using positioning. Something like this:
body {
text-align:center;
position: relative;
}
main {
text-align:left;
}
b {
position: absolute;
left: 45%;
}
Another solution would be to just
display: block
the b element.
You can not align b tag content.
Just change in your jsfidle like this.
html
<main>
<p><b>Header:</b></p>
</main>
and css
p{
text-align:center !important;
}
In the process of making a single page website, the css for my form is interfering with the rest of my page. Can the div be specified without going one by one through the css and specifying the div. Any help appreciated.
I recommend you to read up on CSS Selectors, which are different ways in CSS that you can select specific parts of your HTML elements.
The most basic ones are:
The Element Selector
p { color: #ff0000; }
This selects any element in your HTML that match the CSS rule. In this case it would match all <p>.
The ID Selector
#paragraph { color: #ff0000; }
This selects the element that got a unique ID set to "paragraph". In this case it would select any of the following elements:
<div id="paragraph"></div>
<p id="paragraph"></p>
<span id="paragraph"></span>
Note that ID's are suppose to be unique. You are not suppose to have multiple elements with the same ID in your HTML.
The Class Selector
.paragraph { color: #ff0000; }
The class selector selects all element with a class name that match the CSS rule. Note that class names do not need to be unique, unlike ID's, many elements can share the same class name.
The rule above match all of the following elements
<div class="paragraph"></div>
<p class="paragraph header"></p>
<span class="image paragraph"></span>
You can also combine these (and other CSS selectors) to be more specific of what you want to select and style with your rule. For example, if you only want to select all <p> with the class name paragraph, but no other elements with the same class. You would write the following:
p.paragraph { color: #ff0000; }
Fix your problem
With the knowledge above you can easily fix the issue you are having. The CSS of your form is very generic and it uses Element Selectors to select all elements on the page. You can fix this by setting classes and ID's on your HTML elements, and then adjusting your CSS rules to select the specific elements that you want to change.
The form you are trying to use includes some very generic CSS - it styles the <body> and <header> elements, for starters, as well as all <input> elements. If you want to limit the impact of the CSS from the form on the rest of your site, you will need to make it more specific. For example, if you change
header {
position: relative;
margin: 100px 0 25px 0;
font-size: 2.3em;
text-align: center;
letter-spacing: 7px;
}
to
#form header {
position: relative;
margin: 100px 0 25px 0;
font-size: 2.3em;
text-align: center;
letter-spacing: 7px;
}
it will only be applied to <header> elements that are inside of an element with the id="form" attribute (in this case, that's the ID on the form you are trying to use). You may have to add this more specific selector to several of the CSS selectors from the form that are impacting other parts of your page.
I want to create a navigation bar like this:
How would I structure such a thing? Obviously there should be one external div with a blue background. But what about the child elements? How should they be structured? Thanks.
There is no generalized answer on how to structure a page properly. There are general standards for using technologies, but over all getting your page to present properly is more important then how many or which type of elements you use.
For example if you want your page to auto re-size then you might want to use Divs or Tables. If you want your text to wrap without crossing the entire page, you might want to use a table, or spans...
I can show you some references to floating for CSS... But even in this type of example you could create divs within divs, that are styles appropriately to "taste"; or you could use spans within spans.
http://www.w3schools.com/css/css_float.asp
The major caveat to this explination is that corporate environments will normally have a style guide generated by advertising or marketing that will dictate how the eccomerse or client present sites, and data is represented. This will normally force you to use as an ex: Divs vs Spans.
Each element has a different default display property so I think in this case it depends of the element.
The display property of the span is Inline
– The inline elements line up horizontally as like
Inline Inline Inline
The display property of the div is block
https://iamarunkumar.wordpress.com/2010/02/10/what-is-the-default-display-property-for-span-and-div/
To create a navigation bar, you'll need something like so
* {
margin: 0;
padding: 0;
}
nav {
background-color: blue;
color: white;
font-family: Arial;
padding: 30px 40px;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
width: 49%;
text-align: right;
}
li.title {
text-align: left;
}
<nav>
<ul>
<li class="title">Welcome to Our World</li>
<li>We Work Best</li>
</ul>
</nav>
This would generally be considered the most common way to structure a nav bar.
currently i have
<div class="rightBoxesTop">
<h3>My Pages</h3>
<h3 style="line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;">
show in-active <input id="show-in" type="checkbox"></h3>
</div>
I would like to move the inline style to the css. Is this only way to the second H3 an id or is there a way to reference the class rightBoxesTop and use some thing like second something? Also if you could tell me what this kind of styling is so i could search for keywords on how to use it correctly
Thanks
You can try this to style 2nd, 3rd and other following h3 tags:
.rightBoxesTop h3 + h3
{
line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;
}
Also you can use CSS3 selector to style only the second h3:
.rightBoxesTop h3:nth-child(2)
{
line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;
}
if you are able to remove the inline styles, then you can also add a class for it.
This gives you the option to style it easily by its class in the CSS.
UPDATE: Because you must remove the inline styles, you can not override them in your CSS.
You can use the selector div.rightBoxesTop h3 + h3. It will style only h3 elements that are preceded by another h3 element. This does mean, that if you got more of them, they will all be styled, except the first one.
But in this case, I would consider adding a class (rather than an id) to the second h3.
You can use .rightBoxesTop h3+h3{} as people suggested, but be careful, if you add another h3 the last 2 h3's will have that styling, or if you create another div inside .rightBoxesTop that has more than h3's they will get the styling as well, so a precise way would be:
.rightBoxesTop>h3:first-child+h3{
//your css here
}
Which would mean "The first children's( ">" means direct child, so if there are more nested levels they won't count) next h3, will get the css"
I want to make my entire div a link like the a tag. Of course this may be possible with js, but I'm interested in seeing if this is possible to do with only css.
I have this:
#my_div {
width: 200px;
background-color: #090;
}
#my_div:hover {
background-color: #0f0;
}
Where the page structure is:
<div id="my_div">link</div>
You can make inline elements act as block level elements by setting their display property to block:
/* Make all a tags that are decedents of the
element with an id of `my_div` be displayed as block level elements */
#my_div a {
display: block;
width: 200px;
height: 100px;
text-align: center;
background-color: #090;
}
/* Handle the color change on hover */
#my_div a:hover { background-color: #0f0; }
You don't actually need the wrapping div - you can just target the particular a tag directly if you give it a class or id.
You can't make an element with CSS, but you can wrap your div with an a tag instead. It would look like this:
<div id="my_div"></div>
That makes the entire div a link to whatever your href is.
CSS3 does have the content property now, but I don't think you can put raw HTML into it. That would be pretty bad security wise if anyone had access to your .css files...
Anyways, I think the above solution is the simplest way to achieve what you asked.
Try this:
#my_div a {
display: block;
width: 100%;
}
You need to set your pseude class to the a tag not to the div:
#my_div a:hover {
background-color: #0f0;
}
That should do it's work :-)
I think you should check out this question that was posted to stack overflow.
Make a div into a link
It was the first result on Google for how to make a div a link.
Please:
HTML adds structure to content (e.g. chapters of a book, what is emphasized ...)
CSS adds what colors/fonts/placement for those items
Javascript adds makes it interactive.
You weren't clear whether you meant without "a href" or without using the "<a" tag.
If, on the offchance you meant the latter, the only other way I can think to make something clickable go someplace is to make it a form submit button.