With the following code below I thought that the text would wrap within its container, but the text wraps to the beginning of the line.
How do I get the text to wrap within its own container?
Thank you
.recsubsection {
font-weight: bold;
font-size: 16px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
/*text-shadow: 1px 1px #0000FF;*/
}
.recquantity {
float: left;
width: 20%;
}
.recdescript {
/*float: left;*/
width: 75%;
}
<li class="recsubsection">
<span class="recquantity">1 Kg</span>
<span class="recdescript">
Apples, 2/3 Spies, 1/3 Empires, peeled, cut into 1 cm pieces,
lightly Salted, add 1 Lime Juice, mix well, cover, set aside for 1 hour
</span>
</li>
You can perhaps use flex-box and add the next line to recsubsection selector in your CSS code:
display: flex;
This way you wrap each span within its own container.
(You should also change your HTML code and use more semantically meaningful tags)
Instead float try flex:
.recsubsection { display: flex; font-weight: bold;
font-size: 16px; }
.recquantity { width: 25%;}
<li class="recsubsection">
<span class="recquantity">1 Kg</span>
<span class="recdescript">
Apples, 2/3 Spies, 1/3 Empires, peeled, cut into 1 cm pieces,
lightly Salted, add 1 Lime Juice, mix well, cover, set aside for 1 hour
</span>
</li>
<span> are not containers, they are tags to apply styles to text inline, they do not create a new DOM element. You need to use elements that do function as containers or style your elements to behave in that way.
Here, I changed your <span> tags to <div> tags, and applied flexbox to the <li> to get the flow you wanted.
.recsubsection {
font-weight: bold;
font-size: 16px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
display: flex;
}
.recquantity {
width: 20%;
}
.recdescript {
width: 75%;
}
<li class="recsubsection">
<div class="recquantity">1 Kg</div>
<div class="recdescript">
Apples, 2/3 Spies, 1/3 Empires, peeled, cut into 1 cm pieces,
lightly Salted, add 1 Lime Juice, mix well, cover, set aside for 1 hour
</div>
</li>
Related
I've tried to make my website responsive but I am running into two major issues.
I have a right aligned text that disappears off the screen when I reduce the width of the window instead of remaining aligned. I've tried margin-right: auto; but it doesn't work. This right aligned text I want to make responsive is also on the same line as a <li> item
<li><h3>Kid's menu<span class="tabbed_text">25,50 lei</span></h3> </li>
<li><h3>Menu #1<span class="tabbed_text">25,50 lei</span></h3> </li>
<li><h3>Menu #2<span class="tabbed_text">25,50 lei</span></h3></li>
<li><h3>Menu #3<span class="tabbed_text">25,50 lei</span></h3></li>
This is the html I used
.tabbed_text{
display:inline-block;
font-family: "caveat";
font-size: 30px;
position:absolute;
left:1750px;
}
li{
font-family: "cattie";
font-weight: bold;
font-size: 25px;
}
this is the css use for them
This is how they look like on screen
The second issue is related to an image:
This it how it looks like on fullscreen but when I shrink the window it ends up like this:
this is the css I used for the image:
.small_logo{
width: 150px;
height: auto;
position:absolute;
top:3%;
left:34%;
}
Issue 1: You set span tag is position:absolute;left:1750px;
=> so you can not make it responsively when you shink.
HTML:
<ol>
<li>
<div>
Kid's menu
<span class="tabbed_text">25,50 lei</span>
</div>
</li>
</ol>
CSS:
div {
font-family: "caveat";
font-size: 30px;
display: flex;
justify-content: space-between;
}
a {
font-family: "caveat";
font-size: 30px;
}
li {
font-family: "cattie";
font-weight: bold;
font-size: 25px;
}
You can see the sample here:
Issue 2: I will help when you clear your question!
I'm building a "We the People" website section inspired by the U.S. Constitution, and I'm listing names of "signers" supporting my project. The names have different sizes, and I'm trying to get them to show up nicely on the page. Strangely, the font is consistently offset from the spans containing the names. Here's what I have:
As you can see, the names overlap, which I'd like to avoid. What I find odd is that the text is outside of the span outlines:
The same is true of all the names. Here's my HTML:
<div id="names">
<span class="order ten CalifornyaA-Bold" id="o3">Eric So</span>
<span class="order twenty-five CalifornyaB-Bold" id="o5">Sierra Hansen</span>
<span class="order ten CalifornyaB-Bold" id="o6">Eleanor Collier</span>
...
<span class="order twenty-five CalifornyaC-Bold" id="o69">Maeve McCarty</span>
</div>
... and CSS:
#names {
text-align: center;
padding-bottom: 10%;
}
.hancock, .five-hundred, .two-hundred, .one-hundred, .fifty, .twenty-five, .ten {
line-height: 1.5em;
white-space: nowrap;
}
.hancock {
font-size: 5.5em;
}
.five-hundred {
font-size: 4em;
}
.two-hundred {
font-size: 3.4em;
}
.one-hundred {
font-size: 2.8em;
}
.fifty {
font-size: 2.2em;
}
.twenty-five {
font-size: 1.6em;
}
.ten {
font-size: 1em;
}
Any help would be very much appreciated!
its your line-height since they are inline elements an no block elements, try modifying the value:
.hancock, .five-hundred, .two-hundred, .one-hundred, .fifty, .twenty-five, .ten {
line-height: 110%;//percent would be good
white-space: nowrap;
}
or add individual CSS rules for each one, instead of all being set to1.5em
Edit:
Remember to set a font-size to the parent element since you are using em, check how i wrapped a text and added a font-size in em in the page of the font and its not overlapping:
you can use
span {line-height: 1.2;}
It seems that display: inline-block and then setting margin-top works fairly well. I think that's a bit of a hack solution, but it more or less works.
I have a site that I am working on for a competition through school, and I am having an issue with clearing floating elements.
The site is hosted at http://www.serbinprinting.com/corey/development/
The area I am referring to is the list of ingredients toward the bottom of the page. I want the div it is contained in to adjust its height based on the content in the box, however I am going to have to columns that are currently floated, so the content is not sitting in the flow of the div.
I have tried adding an :after element with clear:both and display: block to the lists as well as the div it is contained in with no success. Can I achieve the two column layout without floating? Is there something I am doing incorrectly with the clears?
Here is the code surrounding the issue...
HTML
<section id="monthly_recipe">
<div class="content_container">
<div class="centered">
<img src="images/icons/bread41.png">
<h1>Gluten-Free Bread That Doesn't Suck</h1>
</div>
<div class="col-1">
<ul>
<li>4 cups Brown Rice Flour Blend </li>
<li>1 tablespoon xanthan gum</li>
<li>1 tablespoon gluten-free egg replacer</li>
<li>2 teaspoons salt</li>
<li>½ cup powdered milk</li>
<li>3 large eggs at room temperature</li>
<li>¼ cup butter at room temperature</li>
<li>2 teaspoons cider vinegar</li>
<li>? cup honey</li>
<li>1 package (2¼ teaspoons) active dry yeast (not INSTANT dry yeast)</li>
<li>2 cups warm water</li>
</ul>
</div>
<div class="col-2">
</div>
</div>
</section>
CSS
#welcome {
position: relative;
width: 100%; min-height: 500px;
background:url(../images/welcome.jpg);
background-size: cover;
}
#welcome h1 {
display: inline-block;
background: rgba(0,0,0,0.4);
color: #fff;
font-size: 4em;
font-weight: lighter;
font-family: 'Bitter', serif;
text-transform: uppercase;
margin: 60px 0 10px 0;
padding: 5px 10px 5px 10px;
}
#monthly_recipe {
position: relative; left: 0;
width: 100%; height: 500px;
background: #fff;
}
#monthly_recipe h1 {
font-size: 4em;
}
#monthly_recipe ul li {
list-style: none;
font-size: 1.5em;
color: #333;
}
Misread the question, I edited my answer
Remove the fixed height and add a :after pseudo class to your #monthly_recipe with these rules:
#monthly_recipe:after {
content: "";
display: block;
clear: both;
}
It seems that you are limiting the #monthly_recipe div from showing the full list by giving it a fixed height of 500px,
try this:
#monthly_recipe {
position: relative;
left: 0;
width: 100%;
background: #fff; }
I refered ur site.
sry, there are many mistakes u have to refer html basics and its classes thoroughly and use css reset to finish it quick and correct.
anyway use:
col-1 {
float: left
}
col-2 {
float: left
}
and refer clearfix.
use clearfix for the col-1 and col-2 parent with another class [not in content-container].
I have html something like this http://jsfiddle.net/nLt9unxa/5/ and I want to place 3 block .number__label, .text__label, and .from__input in one line. .form__input must be align to the right side of form and all 3 elements must be vertical align in one line. How to do this? And I don't want use display: table-cell
And also if you know very good tutorial or book about alignment, where described all possible alignment and receipts how to do it, like cheatsheet, please share link.
you forgot to put : after max-width and min-width in .number__label
DEMO
.number__label {
display: inline-block;
background-color: #ffffff;
border: solid 1px;
max-width:20%;
min-width:20%;
}
Use vertical-align: middle (or top, or bottom). Here is the fiddle: http://jsfiddle.net/1ddewjxd/
.class
{
vertical-align: middle;
}
to align elements to right set the parent element to text-align: right, and the child elements to text-align: left. You could also float: right, but that can complicate things.
.item__label {
text-align: right;
}
.number__label, text__label, form__input {
text-align: left;
}
Run this code snippet to check whether all your requirements are done or not? also check fiddle
Check CSS Layout or learn from W3School
form {
width:70%;
background-color: #dddddd;
font-size: 20px;
}
.itme__label {
display: block;
}
.form__item {
display: block;
padding: 3px 5px;
}
.number__label {
display: inline-block;
background-color: #ffffff;
border: solid 1px;
max-width 20%;
min-width 20%;
}
.text__label {
display: inline-block;
background-color: #888888;
max-width: 50%;
}
.form__input {
display: block;
min-width: 20%;
max-width: 20%;
font-size: 1em;
margin-left:120px;
}
<form>
<div class="form__item">
<p>
<label class="item__label">
<span class="number__label">
01 12 31 23 123 2452 34534 5345
</span>
<span class="text__label">
text label long long long very long long for two or more lines ong very long long for two or more linesong very long long for two or more lines
</span>
<input type="text" class="form__input" value="input text">
</input>
</label>
</p>
<div class="errors">
<p class="error">
some error
</p>
</div>
</div>
</form>
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