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
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.
Complete noob here with HTML/CSS.
I'm trying to get something like this : http://imgur.com/Bc72V4M
Here is my code:
<div id="topbar">
<div class="image">
<img src="images/ghwlogo.png">
</div>
<div class="text">
<h1>TEXT TEXT TEXT TEXT TEXT</h1>
</div>
</div>
I've tried floating the div topbar, then display-inline but it never displays horizontally.
I'm so confused. Following tutorials is easy-peasy, but when you need to figure out how to do this yourself, it's completely different.
I think I'm missing a step somewhere. I feel like this should be really easy but it's not.
img {
display: inline;
vertical-align: middle;
}
.subhead {
display: inline;
vertical-align: middle;
}
<div>
<img src="http://dummyimage.com/100x100/000/fff"/>
<h1 class='subhead'>
TEXT
</h1>
</div>
I removed some HTML; I only add more when I can't think of how to get the effect with just CSS. You can add some back, but you may have to set display: inline on some inner elements then.
Generally, a few different ways of putting elements horizontally:
Floating: Removes it from standard flow layout, and may interfere with the root element's total height. Was previously the preferred method of placement but I feel like there are better alternatives.
Display Inline: Treats an element a bit like text. Cannot have a custom height or various other attributes.
Display Inline-Block: Often a "fix-all" for me when I want something laid out horizontally, but to have other styling aspects like height, border, etc.
Position Absolute: You can make a higher element a "relative element" for absolute positioning by setting position: relative on it. Like floating this takes it out of layout, but it can even overlap elements; useful for certain things. Don't rely on absolute pixel amounts too much.
In my case, once things are laid out horizontally, vertical alignment is the next issue. Remember that adding content could make this block very very tall, so you can't just say "vertical-align to the bottom of the thing". Think of all elements in the div as simply letters in a paragraph; for the smaller ones, you're telling it how to align that one letter. For the biggest ones, you're telling it where that "letter" is aligned compared to the others. So, it's important to set vertical alignment how you want it on the image as well.
EDIT: updated answer per #Katana314 answer. I've maintained the OP's markup.
#topbar {
width: 100%;
overflow: hidden;
}
.image {
display: inline-block;
vertical-align: middle;
border: 5px solid black;
height: 100px;
width: 100px;
}
.text {
display: inline-block;
vertical-align: middle;
}
Fiddle: https://jsfiddle.net/dgautsch/che0dtfk/
You could make the image and the text a separate div and then have both of them under the inline-block attribute. The text div would need to have a position: absolute attribute, though, for formatting purposes.
After viewing the Fiddle, you can adjust the left position attribute accordingly to generate space. Here is the link: https://jsfiddle.net/kuLLd866/.
HTML:
<body>
<div class="image">
<img src="http://gfx2.poged.com/poged/game_logo_default_fix.png?2492">
</div>
<div class="imagetext">
<h1>Text text text</h1>
</div>
</body>
CSS:
.image {
display: inline-block;
}
.imagetext {
position: absolute;
top: 50px;
display: inline-block;
}
As you can see in thew image below, all items have different spacing between them and simply look awful.
This is what I currently have:
Here is the code (it's a mess) after trying tons of different tricks:
http://pastebin.com/D8ekkj6S
I'd be really thankful if someone could tell me how to properly do this correctly.
PS: If possible, I'd love to know how to vertically align the icon and it's corresponding text by the middle point.
Something like this should work for you:
HTML:
<div class="iconing">
<i class="icon-someIcon"></i>
<p>Your text</p>
</div>
CSS:
.iconing i, .iconing p {
display: inline-block;
vertical-align: middle;
}
[class^="icon-"],
[class*=" icon-"] {
width: 50px;
height: 50px;
line-height: 50px;
}
Replace all instances of 50px with your height.
First of all, don't use inline CSS. Try using this CSS instead:
img {
float: left;
clear: both;
margin-right: 10px;
}
p {
line-height: 45px;
}
For the whole example:
http://jsfiddle.net/VMfYa/
You could also set a bigger line height and set the icon as a background with a padding on the text to keep it away from the icon, or have an icon div and a text div, and float them both left beside each other using margin's to align them properly.
give more width to p
check this out fiddle demo
I'm trying to create info graphics / data panels on a hobby site that I'm working on. I'm wishing to display text for one of the stat totals vertically rotated with supporting text wrapping around this however I'm having great difficulty getting this aligned correctly.
Instead of pasting code I can show my work in progress page at:
http://www.footy-results.co.uk/
The info graphic panel that I can't get to work is the '148 TEAMS' ... hopefully the problem is obvious to css wizards!
Any hints or tips would be much appreciated and anyone who can help me resolve this issue will be credited on the site when I launch!
I have a solution fou you but its not 100% clean. In my opinion its just not allowed to use negative margin but I can't find another solution. And furthermore you have do define height and width of the element...
You have to place the rotaded <span> element into anothe <div>. Then you can position the <div> properly and the text is floating around it. Here the code:
HTML:
<div class="infoPanel">
<span class="infoPanelVertical">
<div class="spanwrapper">
<span class="infoNumberVertical">148 TEAMS</span>
</div> your text here...
</span>
</div>
CSS:
.spanwrapper {
float: left;
height: 157px;
position: relative;
width: 48px;
}
.infoNumberVertical {
background-color: #F5F5F5;
border: 1px dotted #DDDDDD;
color: #1A3C7B;
float: left;
font-size: 32px;
font-weight: bold;
margin-left: -56px;
margin-top: 60px;
transform: rotate(-90deg);
width: 150px;
}
The problem is that you have to give a hight and a width to the wrapping <div> or the span in it otherwise the text does not know where it should get floated. If you don't define any width or height the text is just wrapping around the rotated text which is a big rectangle.
I you use a CMS or want to fill in the content dynamicly this is a bad solution. But you could also define the width and height trough js but thats kinda hacky solution I think.
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.