I have a <h2 class="landing-panel-title> with a <span class="landing-panel-icon-right ion-ios-search-strong> nested inside. The second class on the span comes from a custom icons font called ionicons and is probably not relevant.
This is a header accompanied by an icon. I want to put a margin between the icon and the title (I want the icon on the far right when after text, and the text on the far right when the icon is on the left of the text), that auto expands as much as it can. I tried achieving this with text-align, but so far haven't been able to get it to work.
http://jsfiddle.net/eakfsLr3/
HTML:
<div class="landing-panel">
<h2 class="landing-panel-title">Site Reviews<span class="landing-panel-icon-right ion-ios-search-strong"></span></h2>
<p class="landing-panel-text">I have been searching for different PTC sites, collecting knowledge and data, testing the theories, and made a general collection of what I found useful and relevant.</p>
</div>
<div class="landing-panel">
<h2 class="landing-panel-title"><span class="landing-panel-icon-left ion-erlenmeyer-flask"></span>Methodical Approach</h2>
<p class="landing-panel-text">We have collected data and tested the relevant info through my partner in crime, and he's using our guides and the knowledge to build his career in PTCs.</p>
</div>
<div class="landing-panel">
<h2 class="landing-panel-title">Results<span class="landing-panel-icon-right ion-clipboard"></span></h2>
<p class="landing-panel-text">We won't serve you bullshit, we give you relevant information that our staff has deemed legit and working. Enjoy the read!</p>
</div>
CSS:
.landing-panel {
background-color: #d5f5e3;
padding: 0.5em;
margin-bottom: 0.5em;
}
.landing-panel-title {
width: 100%;
}
.landing-panel-icon-right, .landing-panel-icon-left {
color: #913D88;
font-size: 3em;
}
.landing-panel-icon-right {
text-align: right;
}
.landing-panel-icon-left {
text-align: left;
}
.landing-panel-title, .landing-panel-icon, .landing-panel-text {
margin: 0;
padding: 0;
}
Any help is appreciated.
If I understood correctly, you want this? http://jsfiddle.net/sergdenisov/yv2xazjh/1/
.landing-panel {
background-color: #d5f5e3;
padding: 0.5em;
margin-bottom: 0.5em;
}
.landing-panel-title {
display: table-cell;
width: 100%;
}
.landing-panel-icon {
display: table-cell;
color: #913D88;
font-size: 3em;
}
.landing-panel-title, .landing-panel-icon, .landing-panel-text {
margin: 0;
padding: 0;
}
.landing-panel-icon + .landing-panel-title {
text-align: right;
}
<div class="landing-panel">
<h2 class="landing-panel-title">Site Reviews</h2>
<span class="landing-panel-icon ion-ios-search-strong">Icon</span>
<p class="landing-panel-text">I have been searching for different PTC sites, collecting knowledge and data, testing the theories, and made a general collection of what I found useful and relevant.</p>
</div>
<div class="landing-panel">
<span class="landing-panel-icon ion-erlenmeyer-flask">Icon</span>
<h2 class="landing-panel-title">Methodical Approach</h2>
<p class="landing-panel-text">We have collected data and tested the relevant info through my partner in crime, and he's using our guides and the knowledge to build his career in PTCs.</p>
</div>
<div class="landing-panel">
<h2 class="landing-panel-title">Results</h2>
<span class="landing-panel-icon ion-clipboard">Icon</span>
<p class="landing-panel-text">We won't serve you bullshit, we give you relevant information that our staff has deemed legit and working. Enjoy the read!</p>
</div>
Make your span class as display:inline-block
span {
display:inline-block; /*this enables margins to work*/
margin: 0 10px;
}
Try
.landing-panel-title>span{
width:..px /*set as much required */
display:inline-block;
text-align:center;/* left/right */
}
or if You just want a small margin between them, then put before span element
or if you just want icon to be on the right of the header then-
.landing-panel-title>span{
position:absolute;
right:0;
/* This would make icon always at right */
}
Related
I'm taking the Free Code Camp course thing and the first project is to create a tribute page to whoever. Mine is on J Dilla, my favorite hip hop producer. God rest his soul. Anyways I'm trying to use a bootstrap thumbnail around a picture of him, with the text/caption also inside the thumbnail. My problem is that it messes up the centering and aligns the thumbnail to the left and I have no idea how to fix it. Here's the relevant code:
<style>
.cool-text {
font-family: Lobster;
font-size: 20px;
}
.image-centering {
display: block;
margin-left: auto;
margin-right: auto;
}
.vertical-centering {
margin-top: auto;
margin-bottom: auto;
}
.gray-background {
background-color: lightgray;
margin: 20px 100px 20px 100px;
border-radius: 5px;
}
.white-background {
background-color: white;
margin: 10px 560px 10px 10px;
}
</style>
<div class="gray-background">
<br>
<h1 class="cool-text text-center">J Dilla</h1>
<h2 class="text-center"><i>The one and only</i></h2>
<br>
<div class="span8 offset2">
<div class="img-thumbnail thumbnails">
<img class="image-centering" src="http://media.lessthan3.com/wp-content/uploads/2014/02/j-dilla-lessthan3.jpg" alt="The man himself."</img>
<p class="text-center">Dilla working on something ill, I presume</p>
</div>
</div>
<br>
</div>
</div>
Also if there's anything glaringly terrible about my code, I'd love some input on how to reformat it. This is my first time asking a question on stack overflow so forgive me if this is the wrong way to do so.
ETA: Thanks for all the help, everyone! These all worked beautifully. Thanks so much for your time!
I'm coding a newsletter (live preview here and my goal for it here) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. When I try top-margin in the navButtons class I'm not seeing any success. I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help.
<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>
<style>
div
{
display: inline;
}
a
{
text-decoration: none;
}
p
{
text-align:left;
margin-left: 130px;
margin-right: 130px;
max-width: 600px;
}
#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
position:relative;
}
#navButtons
{
position:relative;
right:-240px;
}
#announcementImage
{
margin-left: 120px;
margin-right: 120px;
}
a.joinButton
{
margin-left:40%;
color:white;
background-color: #f7853e;
font-size: 30px;
}
a.navButton
{
color:#494541;
font-size: 22px;
}
</style>
</head>
<body>
<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>
<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url"> Meet </a>
<a class = "navButton" href="url">Learn </a>
<a class = "navButton" href="url">Support </a>
</div>
<br>
<br>
<br>
<br>
<br>
<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>
<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by
showing how making art and making money don't have to conflict.
Have a comment on a workshop you've attended or a session you'd like to see in our remaining
Design and Launch weeks? Galen would love to hear from you!</p>
</div>
</body>
Try this
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I think what your looking for is:
#logo {
vertical-align: middle;
}
Try adding bottom of something like 60px to div with id nav buttons.
Since this element is position: relative, it's placement can be controlled with left, right, top, bottom, like so:
#nav#buttons {
bottom: 50px;
}
Floating the logo left, and adding margin to the #nav will do the trick.
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
You're almost there. Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on.
Then try this:
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}
When I resize the window text from multiple divs overlaps onto another.
I believe it is maybe because my height values apply for percent of the screen, not percent of the div as I would like. What I would like for now (unless someone has a better idea) is instead of vertical div size decreasing have it stay fixed, therefore preventing the text from being pushed onto another div.
I've seen similar posts but none of them seemed to specifically address my issue.
Any help would be greatly appreciated!
EDIT: I want the div height to stay the same despite reducing window size.
FINAL EDIT: I will deal with this issue when I finish my computer-compatible site and then work on making it mobile-compatible.
JsFiddle:
http://jsfiddle.net/v5aobbp3/
<div id="moreinfo" class="wrapperdiv">
<div id="topquote">
<br> <br>
<p id="quote"> “ Musical activity involves nearly every region of the brain that we know about, and nearly every neural subsystem ” </p>
<p id="quote2"> — Daniel Levitin, <em> This is Your Brain on Music, </em> p.299 </p>
</div>
<div id="benefits-main">
<div id="top-row">
<div id="leftfact">
<p class="benefits-title"> express yourself</p> <br>
<p id="bodytext"> Music is the best way for you to express yourself, unleash your creativity, and get inspired. Immerse yourself or your children in the world of music through musical education to produce an enhanced appreciation and understanding of this art </p>
</div>
<div id="centrefact">
<p class="benefits-title"> improved cognitive abilities </p> <br>
<p id="bodytext"> The auditory precision required in music study results in dramatic improvements in language abilities. Musically trained children are able to distinguish subtleties of speech, resulting in increased verbal, comprehension, reading, and communication skills. Students of music have better information processing, stronger neural connections, improved memory, and bigger brains in general.
</div>
<div id="rightfact">
<p class="benefits-title"> increased focus and academics</p>
<p id="bodytext"> Music gives its learners an increased attention span and stronger focus as well as self-discpline. Children who learn music have higher IQs and better motor coordination. Studies have found that music students significantly outperform academically compared to other students and are more motivated.
</div>
</div>
<div id="bottom-row">
<div id="leftfact2">
<p class="benefits-title"> empathy and social awareness </p> <br>
<p id="bodytext"> Musical education increases empathy in children as well as improves their emotional intelligence and interpretation of nuances of speech. Music is emotional and through this art students learn to connect with others on an emotional level. While performing with other musicians students increase their cooperation skills. </p>
</div>
<div id="centrefact2">
<p class="benefits-title"> self-confidence </p>
<p id="bodytext"> Performing as well as self-discipline give students a high level of confidence </p>
</div>
<div id="rightfact2">
<div id="button2">
<p class="button2text"> Learn More </p>
</div>
</div>
</div>
</div>
<div id="bottomquote">
<br>
<p id="musicquote" class="Einstein"> "The theory of relativity occurred to me by intuition, and music is the driving force behind this intuition. My parents had me study the violin from the time I was six. My new discovery is the result of musical perception.” </p> <br>
<p id="quote2" class="Einstein"> — Albert Einstein </p>
</div>
</div>
And some of the pertinent css:
div #moreinfo {
background-color: #F1F1F1;
/* #d3dfed; original colour */
color: black;
height: 150%;
margin-top: 0%;
/* position: relative; */
}
#moreinfo #benefits-main {
background-color: #d3dfed;
height: 60%;
width: 100%;
}
#benefits-main #top-row { height: 50%; } #benefits-main #bottom-row { height: 50%; }
#benefits-main .benefits-title { margin-top: 2%;}
#benefits-main #leftfact { height: 100%; width: 33%; float: left; background- color: #b7cbe2; } #benefits-main #leftfact2 { height: 100%; width: 33%; float: left;
background-color: #c5d5e7; /*background-color: white;*/}
#benefits-main #centrefact { height: 100%; width: 33%; float: left; background-color: #c5d5e7; /* background-color: white;*/} #benefits-main #centrefact2 {height: 100%; width: 33%; float: left;
background-color: #b7cbe2;}
#benefits-main #rightfact { height: 100%; width: 33%; float: left; background-color: #b7cbe2; /* #e1e9f3; */} #benefits-main #rightfact2 {height: 100%; width: 33%; float: left;
background-color: #c5d5e7; /* background-color: white;*/ }
#button2 {
height: 20%;
width: 40%;
background-color: #4a79b1;
margin-top: 28%;
margin-right: auto;
margin-left: auto;
font-weight: 300;}
#button2 p {
font-family: Avenir Next, sans-serif !important;
color: #FFFFFF !important;
font-weight: 200 !important;
padding-top: 7%;
}
.button2text {
color: white;
}
a.rcmlink:link { color: #EEEEEE; } a.rcmlink:visited { color: #EEEEEE; } a.rcmlink:active {color: #EEEEEE;}
#benefits-main #bodytext {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
#moreinfo p {
margin-left: 10%;
margin-right: 10%;
color: #22384f;
font-size: 25px;
font-family: Montserrat , sans-serif;
}
div #topquote {
background-color: #d3dfed; /* #9bb7d6; */
height: 20%;
}
#topquote #quote {
/* position: absolute; /* top: 5%; */
text-align: center;
}
#topquote #quote2 {
text-align: center;
font-size: 20px;
font-family: Roboto;
bottom: 2%;
}
/* #topquote2 { background-color: #d3dfed; height: 10%; } */
div #bottomquote {
text-align: center;
height: 20%;
}
#quote2 {
font-size: 15px;
font-family: Roboto !important;
}
div #musicquote {
/* position: absolute; bottom: 2.5%; */
}
Putting heights on divs forces the text to overflow once they are too small to contain the text. If you let the divs height stay auto and controlled spacing around them with padding top/bottom then they would automatically get longer to fit the text as you resize the window.
Not sure if this really answers your question but I'm not exactly sure what you are asking?
I've pulled out just that row into a stripped down example. The most important CSS is this:
.row {
display: table;
table-layout: fixed;
width: 100%;
}
.fact {
display: table-cell;
}
html {
color: #22384F;
font-size: 12px;
font-family: sans-serif;
}
.row {
display: table;
table-layout: fixed;
width: 100%;
}
.fact {
display: table-cell;
padding: 20px;
background-color: #B7CBE2;
}
.fact:nth-child(even) {
background-color: #C5D5E7;
}
.benefits-title {
font-size: 25px;
font-family: Montserrat , sans-serif;
margin: 0;
}
<div class="row">
<div class="fact">
<p class="benefits-title"> express yourself</p> <br>
<p> Music is the best way for you to express yourself, unleash your creativity, and get inspired. Immerse yourself or your children in the world of music through musical education to produce an enhanced appreciation and understanding of this art </p>
</div>
<div class="fact">
<p class="benefits-title"> improved cognitive abilities </p> <br>
<p> The auditory precision required in music study results in dramatic improvements in language abilities. Musically trained children are able to distinguish subtleties of speech, resulting in increased verbal, comprehension, reading, and communication skills. Students of music have better information processing, stronger neural connections, improved memory, and bigger brains in general.
</p></div>
<div class="fact">
<p class="benefits-title"> increased focus and academics</p>
<p> Music gives its learners an increased attention span and stronger focus as well as self-discpline. Children who learn music have higher IQs and better motor coordination. Studies have found that music students significantly outperform academically compared to other students and are more motivated.
</p></div>
</div>
Using display: table-cell means that each div in your row will always have the same height. You want to avoid assigning your HTML elements heights at all unless you really know what you're doing: things can get messy very quickly.
You'll notice I've also changed things up a bit, removing your IDs and replacing them with classes. There's good reason for that: it keeps the specificity of your selectors low, which will make things much easier to maintain in the long run. It also lets you re-use styles and avoid having to come up with unique IDs (such as #leftfact2) when they aren't required.
Having the same ID repeated multiple times is also wrong, and will cause headaches if you want the page to validate or - more importantly - start adding JavaScript. I would recommend avoiding the use of IDs for styling altogether (that's somewhat controversial, but smarter people than me say the same thing).
In Zurb Foundation 4 I want to underline all below text except "Shipping International" for which I've tried various css to set as text decoration "none" but I can't seem to figure out what the correct CSS to resolve this is:
<div class="row">
<p class="buy-button">Add to cart</p><br>
<p class="small-font">usually leaves our warehouse in 1 business day.<br>
Available for Pick Up NYC <br>
<span class="overview">Shipping: International</span> (See Terms & Conditions) </p>
</div>
I did a span with a class but it's not working.
The HTML and CSS can be seen in this fiddle http://jsfiddle.net/setbon/f8p62/
Any help to resolve is much appreciated.
Remove text-decoration:underline; from your .small-font styling.
Here's the full CSS:
.medium.button.buy {
background-color: green;
/* margin-right: 0.5em;
margin-left: 0.5em;*/
padding-left: 4em;
padding-right: 4em;
}
.small-font {
font-size: 0.75em;
}
.panel p.buy-button {
margin-bottom: 0.1em;
}
And the jsFiddle.
At the top of a page I've got two divs, one floated to the left and one to the right. I can place text with a border between them, however, I now need to stack two such areas of text between them.
Here's a Fiddle illustrating my problem: http://jsfiddle.net/TcRxp/
I need the orange box under the green box, with each center aligned with the other. The "legend" (floated to the right) used to be at the same level but is shifted down now.
I tried adding another table to the mix but that didn't help.
Excuse the markup - it's not real slick, I know. A few people have touched this over time and none of us are gurus at this.
And yes, I have lobbied for a designer to be added to the team but it hasn't happened yet.
Thanks,
Paul
UPDATE: Incorporating #Jeremy B's suggestion
Does it have to be via CSS changes? When dealing with scenarios like this, you need to be careful of the order in which the HTML elements are defined.
Look at the modification here: http://jsfiddle.net/TcRxp/8/
I was able to acheive what you needed by changing the order of the three DIVs and using the CSS suggesion from #Jeremy B
Essentially, the logic for the layout is
Draw the float-right content
Draw the float-left content
Draw the content in the middle (as it will now render to the right of the float-left content.
First make your top span a block element to stack them:
<span class="color status active bold" style="display:block">Status:</span>
then float the middle div left as well:
add float:left to #headmiddle in your css
It's always going to be difficult to get the desired results when you're combining CSS and tables-for-layout.
I would suggest simplifying your HTML:
<div id="headleft">a little search form here</div>
<div id="headmiddle">
<div class="active"><strong>Status:</strong> Active</div>
<div class="search">Search results displayed</div>
</div>
<div id="headright">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
and your CSS:
div { padding: 2px; }
strong { font-weight: bold; }
#headleft { float: left; font-size: 0.8em; }
#headmiddle { float: left; font-size: 0.8em; }
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; }
.search { background: orange; }
.active { background: #8ed200; }
#headright { float: right; font-size: 0.8em; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
The result is semantically correct HTML, easier to read and therefore easier to modify in the future. Supporting fiddle.
If you need to do it with CSS, see my changes: Fiddle
I added the following:
#headmiddle span.status { display: block }
This will cause your spans to "stack".
I got it by putting together many different sources. Alex Coles' solution was closest right off the bat but the middle wasn't centered. It was much cleaner than my mess too. I started with the code from this post:
<style type="text/css">
.leftit {
float: left;
}
.rightit {
float: right;
}
.centerit {
width: 30%;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.centerpage {
width: 80%;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="centerpage">
<div class="leftit">Hello Left</div>
<div class="rightit">Hello Right</div>
<div class="centerit">Hello Middle</div>
</div>
(fiddle for above)
I took the elements Alex cleaned up which got me even closer to my goal, but the center color blocks were way too wide. From this question I learned about "max-width", which ended up being the final piece I needed...or so I thought.
Edit: max-width doesn't work in IE7 quirks mode (which I have to support) so from this page I learned how to tweak my css to work in IE7 quirks mode, IE8, and FF.
The final code (fiddle):
.leftit {
float: left;
font-size: 0.8em;
}
.rightit {
float: right;
font-size: 0.8em;
}
.centerit {
width:220px;
margin-right: auto;
margin-left: auto;
font-size: 0.8em;
}
#headmiddle div {
border: 1px solid #000;
margin-bottom: 3px;
}
.centerpage {
margin-right: auto;
margin-left: auto;
text-align: center;
}
strong { font-weight: bold; }
.search { background: orange; }
.active { background: #8ed200; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
<div class="centerpage">
<div class="leftit">a little search form here</div>
<div class="rightit">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
<div class="centerit" id="headmiddle">
<div class="active"><strong>Status:</strong>
Active</div>
<div class="search">Search results displayed</div>
</div>
</div>
Thanks to all the great answers - I learned a lot from this question.
Paul