I have a simple web page that contains a content div, a paragraph inside of that, and a header, text and image inside of that. The html looks like this:
<div id="content">
<p>
<img class="coverR" src="img/img.jpg">
<h1>Header</h1>
Insert description here
</p>
</div>
The css for these elements looks like this:
#content p {
width: 100%;
overflow: auto;
text-indent: 2em;
margin-bottom: 5px;
}
#content .coverR {
width: 200px;
margin: 5px;
margin-right: 8%;
float: right;
clear: left;
}
This all seems fine, but when I open the chrome inspector and look at the HTML it looks like this:
This wrecks my page flow, and I have no idea why it happens. Am I doing something incredibly stupid?
The end tag for a paragraph is optional.
A paragraph cannot contain a heading, it can only contain phrasing content.
Thus the heading implicitly ends the paragraph, so it and everything that follows are not inside it.
There is no way to write HTML so a heading is inside a paragraph
Use more appropriate elements. It's hard to tell what you should be using since your example content doesn't give any context.
Related
I am completely stuck trying to get a left chevron and a right chevron to display on either side of a date in an h1 tag. I want a user to be able to click on either chevron to move forward or backward one day. However, no matter what combination of div or img classes and position, float, display it still looks like the screenshot attached, even though I've made sure the document is updating.
How can I modify the HTML/CSS so the chevrons are placed on the same line as the date?
<div class= "dater">
<div class="chevron-left">
<img src="glyphicons-225-chevron-left.png"/>
</div>
<h2><%= #todie %></h2>
<div class="chevron-right">
<img src="glyphicons-224-chevron-right.png"/>
</div>
</div>
EDIT: My solution based on Rob's answer.
.chevron-right img {
float: right;
}
.chevron-left img {
float: left;
}
.dater {
margin-left: auto;
margin-right: auto;
width: 100%;
margin-top: 60px;
margin-bottom: 40px;
}
.dater h2 {
text-align: center;
font-weight: 400;
float: left;
}
The reason for your problem is you have the images contained within block level elements which occupy the full width of the browser viewport. Even then it won't work exactly as you wish but there are many ways to accomplish it.
First, you can put the images inside the <h2> to the left and right of the text. That's the easiest way.
Second, you can use the CSS pseudo classes ::before and ::after
You can also set the width of the <h2> and float the everything, images included but the must be set to inline to help this along.
There are more ways than just those.
Working on designing a website and am having issues getting my text to center on the page while also keeping it left justified. The section I'm trying to apply this effect to is h3. I'm missing something obvious but I'm at a loss atm. Thanks!
Below is my code:
HTML
<section id="marketing" class="section fp-section" data-anchor="thirdPage">
<img id="marketingLogo" src="images/marketing.png">
<h2 align="center"> Text goes here</h2>
<h3 align="center"> Text goes here</h3>
CSS
.fp-section h3{
font-size: 20px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
First, remove the align: center from the html, first of all it's best to keep your html and css separate and second because you don't need that in there.
Second, you need to set the css to this:
.fp-section h3{
width: 10em;
font-size: 1.25em;
margin-left: auto;
margin-right: auto;
text-align: justify;
}
This works because you've given it a definitive width, therefore, when it the line is too long or something like that it will wrap and still be in the center, and you already had the margin-left: auto; margin-right: auto; thing figured out so that's done and done.
Also, sidenote: I changed your font-size from pixels to ems just because I think that ems work better across different systems.
I think he wants to do something similar to what i want to do. Display a block of text in the center of the screen, but the block of text itself is justified
You may just need to add display: block; or display: inline-block; to your heading.
Edit: Although saying that, what you're asking seems to be conflicting. If you want it centred but left aligned, how would you see that being displayed?
It looks like you have inline style (align="center") on your elements that takes precedence over your stylesheet.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I am very new to CSS. I am creating a DIV and somehow the text is being displayed in middle of the DIV. There is a white-space appearing above the first line of the text.
I am also providing the CSS that I wrote for this DIV.
CSS Code
#CONTAINER {
float: left;
height: auto;
padding-top: 0;
border: 1px solid black;
vertical-align: top;
}
#CONTAINER p {
padding: 0;
margin: 0;
vertical-align: top;
}
Here is the Link to the page. Please refer to the last Div which says Latest News
[enter link description here][1]
In your "Latest news block," there is an h2 element outside of the div that your text is in that is pushing everything down.
<div id="block-nodeblock-21" class="block block-nodeblock">
<h2>Latest News Block</h2> <!----this guy-->
<div class="content">
The element is invisible because you set visibility:hidden, however this does not remove it from the page, so it still affects the position of everything around it. To make it truly hidden, you can
Remove it OR
Set display: none;
First off we need your HTML that goes with it, however also remember that the P tag has got its own whitespace added by default, try - values for your padding under
#CONTAINER p
It is possible, that outside the div, you have set the "text-align" property to the value "center". Out of interest, does this occur in any other browsers?
I'm trying to create a simple (ha) two column layout, where the first column is variable width and the 2nd column is fixed size.
The first column contains a table which works fine except if the td element contains a pre block. In that case, the pre block extends to the 2nd column.
Here is a simple example:
<div class="content">
<div id="Left">
<table id="q-table">
<tr><td>
<div class="q">
<p>This is some paragraph that will be fairly long and wrap.</p>
<pre>This is a very long pre tag that causes headaches.</p>
</div>
<div>
<p>Causes problems if I make class q position: absolute</p>
</div>
</td></tr>
</table>
</div>
<div id="Right">
<p>This is a paragraph on the right with fixed width</p>
</div>
</div>
Here is the CSS style I'm using for this example:
.content {
width: 95%;
position: relative;
}
#Left {
width: 50%;
float: left;
}
#Right {
float: right;
width: 200px;
}
#q-table {
width: 99%;
}
.q {
overflow: auto;
width: 99%
}
If I make the .q class position: absolute then the horizontal flow mostly behaves like I want, but the following div section moves up and messes the vertical alignment.
The pre tag is the culprit. Removing it causes the correct behavior. Unfortunately, pre tags are a necessity.
Think of a StackOverflow layout where a question with code would show up with the scrollbars on a small screen, but if I have a large monitor, the question area would extend and the scrollbars would disappear.
Anyone have any ideas?
Does CSS provide support for what I'd like to do?
This may not provide the desired result. But you can adjust the white-space property instead.
For example, setting it to normal will make it behave like, say, a p tag:
pre {
white-space: normal;
}
See it in action - http://jsfiddle.net/az85F/
Otherwise, set the width and overflow properties. That's what this very forum does for code samples. A quick example - http://jsfiddle.net/mj6Nh/1/
I have come to the conclusion that it is simply not possible to provide the behavior described.
I believe the problem is that the table and the tags conflict with each other.
The table does not enforce the proportional spacing directive when one of the cell element uses a pre tag.
I want to do something like this:
.even {
float: left;
text-align: left;
}
.even img {
float: right;
}
It's not working though. I'm hoping my problem is just a syntax one, but I can't see to figure out how to do this. I've dug around google, but I'm having trouble finding the right set of keywords.
The associated html I'd like to use should look something like ths:
<div class="linkBlock even">
<img class="linkThumbnail" src="graphics/links/thumbnail_oilcan.jpg" width="267" height="200"/>
<h2>oilcan press</h2>
<p>
oilcan press is a purveyor of handmade books & word-related artefacts.
if you'd like to commission work of a particular size or shape or theme let him
know via etsy or email: oilcanpress [!at] gmail.com
they will gladly make custom boxes as per your general requests of colors/concepts.
if you are desirous of sevral items a bundle can be arranged at reduced prices.
</p>
<p>
you can view much of his work on flickr.
</p>
</div>
I'd like for the text of that block to float and align left, and the image to float right. With the code I have written above, the image is being centered in the page above the text; it's not floating, it looks like it's still using the static layout.
I'm only a CSS dabbler but I think this should work:
div.even>img {
float: right;
}
This matches child img elements inside a div with class even.
<img> & <p> are both block-level elements and so they line-break unless other wise specified. You need to position the <img> & <p> inside the parent div, instead of trying to position the text on the parent div. You also need to specify a width for the parent div and the <p> tag. This is probably why you are seeing the text appear below the image, because it is defaulting to the width of the parent div and cannot fit side by side with the image even though it is floated. You probably want something like this:
.even {
width: 400px;
display: block; /*or inline-block*/
padding: 10px; /*just for a little visual spacing*/
}
.even img {
position: relative;
display: inline-block;
float: right;
margin-right: 25px;
}
.even p {
display: inline-block;
position: relative;
width: 250px;
float: right;
}
You should also move your <img> tag below your h2 tag as it might interfere with the float. (I'm assuming you want this to appear above the thumbnail and the text.)
Maybe you have a clear attribute defined for the paragraph or some other style sheets? Your code works fine for me.
Use Firebug to debug your css.