I will be the first to admit that I am new to this so please forgive me if this question has been answered before. Perhaps I am not wording my question correctly to find the answer I am looking for.
I have a child container with quick reference links on the left and the text it is to reference should be in the parent on the right. How do I get the text in the parent to wrap in the green viewable area and not across the whole parent container (behind the child)?
Text Wrapping Problem
<div class="ministry1"><div class="ministry2">
<ol id="sidebar1">
<li>The Scripture</li>
<li>God
<ul id="side1">
<li>God the Father</li>
<li><a href="#002">God the Son</li>
<li><a href="#003">God the Holy Spirit</li>
</ul>
</li>
<li>Man</li>
<li>Salvation</li>
<li>God's Purpose of Grace</li><!--'-->
<li>The Church</li>
<li>Baptism and the Lord's Supper</li><!--'-->
<li>The Lord's Day</li><!--'-->
<li>The Kingdom</li>
<li>Last Things</li>
<li>Evangelism and Missions</li>
<li>Education</li>
<li>Stewardship</li>
<li>Cooperation</li>
<li>The Christian and the Social Order</li>
<li>Peace and War</li>
<li>Religious Liberty</li>
<li>The Family</li>
</ol></div>
<h1>Baptist Faith and Message</h1>
<p id="box">
<h3 id="01"><u>I. The Scriptures</u></h3>
(with LOTS more text below...)
And they are styled as follows...
div.ministry1 {
display: block;
margin: auto;
background-color: #99ff99;
border: 2px solid #660066;
width: 1070px;
height: 446px;
overflow: auto;
font-family: 'Ubuntu', sans-serif;
opacity: 0.90;
}
div.ministry2 {
display: block;
position: fixed;
float: left;
background-color: lightblue;
border-right: 2px solid #660066;
width: 225px;
height: 446px;
overflow: auto;
font-family: 'Ubuntu', sans-serif;
opacity: 0.90;
}
#box {
float: right;
padding: 8px 10px 10px 10px;
opacity: 1.0;
}
If you want everything to be fixed width, the easiest possible solution will be making sidebar1 fixed and wrapping content on the right with div container with satisfying padding-left (or margin-left, it should make no difference here).
Using your containers (although I swapped box to be div, I need this element to be display: block, and it's default display for div).
div.ministry2 {
position: fixed;
}
.box {
padding-left: 250px;
}
You can check how this solution looks here: http://codepen.io/anon/pen/oLyEmV
Related
I'm trying to get 2 items to display inline-block within a div but nothing I've tried is working.
The html I've used is
<div class="quotation">
<ul>
<li><img src="images/quotes.png" alt="" class="quotemarks"></li>
<li><p class="words">All honour to the Enderbies, therefore, whose house, I think, exists to the present day; though doubtless the original Samuel must long ago have slipped his cable for the great South Sea of the other world.</p></li>
</ul>
</div>
Whilst my CSS at the moment is as follows:
.quotation {
position: absolute;
margin: 20% 5% 10% 5%;
width: 88.2%;
max-height: 100px;
padding: 0.5%;
background-color: red;
color: #bdc3c7;
}
.quotation ul li {
position: relative;
display: inline-block;
text-decoration: none;
font-family: 'PT Sans', sans-serif;
font-weight: 100;
}
.quotemarks {
max-width: 20%;
}
.words {
width: 60%;
}
I cannot understand why .quotemarks and .words won't a) stay within .quotation and b) won't render inline.
You have quite some things wrong in your code and understanding of how css layout works.
You tell your list items to be display: inline-block. This tells them to be just as wide as their content.
You tell the content of your list items - the img and the paragraph - to have their width based on % - which refers to % of the width of the parent element - which happens to be the list item.
So basically the list item asks its content "How wide am I needed to be?" - while the content asks the parent list item "How wide are you? I'll be xy % of that."
It's easy to see that each element needs an answer before it can give one, creating an infinite loop of unanswered questions.
Apart from that, as soon as there is any whitespace (even a linebreak only) between two or more inline-block elements whose summed up width is 100% will make (at least) the last element wrap to a new line.
How to solve the inline-block whitespace issue: Either make your list-items float: left; (which has its own pitfalls!) or set font-size: 0; on the parent element (in this case the ul) , and re-set it on children as needed.
Also, put the width-controlling classes on the list items.
.quotation {
position: absolute;
margin: 20% 5% 10% 5%;
width: 88.2%;
max-height: 100px;
padding: 0.5%;
background-color: red;
color: #bdc3c7;
}
.quotation ul {
/*set this to avoid linebreak due to whitespace */
font-size: 0;
}
.quotation ul li {
display: inline-block;
text-decoration: none;
font-family: 'PT Sans', sans-serif;
/* re-set font-size here to what you need */
font-size: 14px;
font-weight: 100;
vertical-align: text-top;
}
.quotemarks {
max-width: 20%;
}
.words {
width: 60%;
}
.quotemarks img {
max-width: 100%;
}
<div class="quotation">
<ul>
<li class="quotemarks">
<img src="http://placekitten.com/g/200/300" alt="" />
</li>
<li class="words">
<p>All honour to the Enderbies, therefore, whose house, I think, exists to the present day; though doubtless the original Samuel must long ago have slipped his cable for the great South Sea of the other world.</p>
</li>
</ul>
</div>
Move your classes .quotemark and words to parent elements
<div class="quotation">
<ul>
<li class="quotemarks"><img src="images/quotes.png" alt=""></li>
<li class="words"><p>All honour to the Enderbies, therefore, whose house, I think, exists to the present day; though doubtless the original Samuel must long ago have slipped his cable for the great South Sea of the other world.</p></li>
</ul>
</div>
Make sure that you added necessary vertical-align rule (top, middle or bottom... ) to your list items.
Check out demo
I hope this will help.
Thanks guys, your solutions worked and, whilst my CSS is still ugly as sin, everything fits in the box and I was able to change the size of the quotemarks too.
<div class="quotation">
<ul>
<li class="quotemarks"><img src="images/quotes.png" alt=""></li>
<li class="words"><p>All honour to the Enderbies, therefore, whose house, I think, exists to the present day</p></li>
</div>
And the CSS
.quotation {
position: absolute;
margin: 20% 5% 200px 5%;
width: 88.2%;
max-height: 100px;
padding: 0.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
.quotation ul li {
position: relative;
display: inline-block;
text-decoration: none;
font-family: 'PT Sans', sans-serif;
font-weight: 100;
vertical-align: middle;
}
.quotemarks {
max-width: 20%;
margin: 0 10px 0 0;
}
.quotemarks img {
height: 40px;
}
.words {
width: 80%;
line-height: 15px;
font-size: 20px;
}
I need to save some real estate on a page I'm working on so I wanted to simply be able to hover over the topics and have the sub-topics then accessible from a "drop-down" (actually a div that eases out) div.
Here is a fiddle for the effect I want:
https://jsfiddle.net/170z6pj1/
However I can't seem to get my brain around how to make it work with this, whereby I want the text "How to..." to be the trigger to cause the ease-out:
https://jsfiddle.net/170z6pj1/3/
I've tried various ways to try and get the id="menu" onto the "How to..." or "titleB" divs but they never work if I do it that way. I realise my base CSS isn't correct for that to work, but I just can't wrap my head around what I need to change - first time trying transitions.
Thanks for any and all responses.
p.s. As far as I know I have to use the "max-height workaround" to get it to dynamically adjust to the correct length of the list items.
HTML:
<div id="titleA">
<div id="titleB"></div>How to...</div>
<div id="menu">
<a>Hover to expand</a>
<ul id="list">
<li>How to book a meeting room</li>
<li>How to book catering</li>
<li>How to report extra cleaning requirement</li>
<li>How to report a fault</li>
<li>How to report a H&S issue</li>
<li>How to book a hot desk</li>
<li>What happens if I get locked in</li>
<li>How to request consumables - for kitchens, photocopiers, etc.</li>
<li>Out of hours issues affecting buildings / How to make contact in an emergency</li>
<li>Recycling guide</li>
<li>Complaints and feedback</li>
</ul>
</div>
CSS:
#menu #list {
max-height: 0;
transition: max-height 1.5s ease-out;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 15px;
width: 99%;
border: 1px solid #c8ced0;
padding: 5px;
font-size: 14px;
display: inline-block;
}
#menu:hover #list {
max-height: 500px;
transition: max-height 1.5s ease-in;
}
#titleA {
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #5bc0de;
padding-top: 14px;
padding-left: 22px;
height: 54px;
width: calc(100% - 35px);
margin-bottom: 5px;
margin-top: 19px;
font-size: 25px;
color: white;
font-family: 'Open Sans';
font-weight: bold;
}
#titleB {
position: absolute;
top: 0px;
right: -20px;
height: 100%;
width: 50px;
background: #5bc0de;
transform: skew(30deg);
}
After some playing around, I've got a step closer to the design I want by cutting out "non-essentials". Still looking for a solution to keep my original design (second fiddle) though!
https://jsfiddle.net/170z6pj1/4/
Yes, it's because you apply padding and border to : ul id="list"
I am trying to make this exact box with borders lines. you can see after H2 there is new border line and then a paragraph. Please tell me how do I make this? as when I do it with border-bottom:1px solid it just makes a lines but doesn't touch the edges of the main border. here I am attaching the image so you can better understand this here you can see image
my code
<div class="col-sm-8 col-sm-offset-2" id="house">
<h3 class="text">Our house packages include:</h3>
<ul class="lead text" id="list">
<li>Standard site costs (based on 500mm fall to site & ‘M’ Class slab)</li>
<li>Rainwater Tank or connection to recycled water where available.</li>
<li>Concrete driveway (up to 55sqm)</li>
<li>Tiled Front Porch</li>
<li> Internal Floor Coverings</li>
<li> 5+ star gas instantaneous HWS</li>
<li>Wall & Ceiling insulation</li>
<li>‘Classic’ range of inclusions</li>
</ul>
<img src="images/landing.jpg" alt="landing Image">
<p class="note">NB. Please note that all packages are subject to developer and/or council and statutory authorities’ approvals.</p>
</div>
</div>
CSS
#house {
border: 1px solid black;
background:white;
}
#house h3 {
border-bottom:1px solid;
font-size:28px;
font-weight:bold;
margin:10px;
}
#list {
font-size:15px;
margin:15px;
padding:15px;
position:relative;
right:20px;
text-align:left;
}
#house img {
width:40%;
position:relative;
left:500px;
bottom:260px;
}
please tell me how do I make border lines after heading and after list. please take a look into image. It should be responsive.
thank you all
I think your code is missing one div tag on the top, so I'm not able to debug. :/
But this is how I'd solve it if I had to do the same thing:
<style>
html {
background: #EEE;
width: 100%;
height: 100%;
border: 0;
text-align: center;
padding: 40px;
box-sizing: border-box;
color: #AAA;
font-family: calibri;
}
.box{
background: #FFF;
border: 2px solid #DDD;
width: 80%; /*SPECIFY WIDTH HERE*/
display: inline-block;
}
.heading {
border-bottom: 2px solid #DDD;
width: 100%;
padding: 20px;
text-size: 30px;
font-size: 30px;
box-sizing: border-box;
display: inline-block;
}
.content {
border-bottom: 2px solid #DDD;
width: 100%;
padding: 20px;
box-sizing: border-box;
display: inline-block;
}
.footer {
width: 100%;
padding: 20px;
box-sizing: border-box;
display: inline-block;
}
.myList {
display: inline-block;
text-align: left;
padding: 10px;
}
li {
margin: 10px 0;
}
.myImg {
display: inline-block;
padding: 10px;
}
.houseImg {
width: 300px;
}
</style>
<div class='box'>
<div class='heading'>
Our house packages include:
</div>
<div class='content'>
<div class='myList'>
<ul class="lead text" id="list">
<li>Standard site costs (based on 500mm fall to site & 'M' Class slab)</li>
<li>Rainwater Tank or connection to recycled water where available.</li>
<li>Concrete driveway (up to 55sqm)</li>
<li>Tiled Front Porch</li>
<li> Internal Floor Coverings</li>
<li> 5+ star gas instantaneous HWS</li>
<li>Wall & Ceiling insulation</li>
<li>'Classic' range of inclusions</li>
</ul>
</div>
<div class='myImg'>
<img src='http://www.simplyeleganthomedesigns.com/hudson%20cottage%20FL.jpg' class='houseImg'>
</div>
</div>
<div class='footer'>
Some Footer text here
</div>
</div>
The reason h3 is not working the way you want is because you assigned it a margin: 10px; This is going to push the h3 border 10px away from its parent on all sides. If you don't assign it a margin, border-bottom will work fine.
It may be good practice for you to add borders to all elements so you can see how each css rule affects an elements box.
Refer to box model for further information
W3C Box Model
MDN Box Model
1- the border is inside the margin that's img why there is spaces .
try use the padding for h3
padding: 20px;
I fix the list for you as well .
check
jsfiddle
I need help in fixing a 2-column list.
The problem is that the right column intrudes into the left one if more than single line used.
Another trouble is that if left column has more than one line, the content inside of the right column will appear at the bottom.
The separating line between columns also acts strange with more than 1 line (see the examples below).
Please note, I'd like to keep "Title" and "Description" columns in separate HTML-tags (at least one of them inside a tag), because I need this for Responsive CSS layout.
ul {
list-style: none!important;
}
ul.my-list>li {
width: 550px!important;
position: relative;
padding-left: 30px;
padding-right: 15px;
background: 0 0;
border-radius: 0!important;
margin: 0;
box-sizing: border-box;
background: #EEE;
}
ul.my-list>li span {
width: 140px;
border-right: 1px solid #E0E0E0;
display: inline-block;
padding: 3px 0;
line-height: 38px;
margin-right: 15px;
}
<ul class="my-list">
<li><span>Title</span>Description. Not too many words – displays well.</li>
</ul>
<br>
<br>
<ul class="my-list">
<li><span>Title</span>Description. More words – this goes wrong. Really wrong. Seriously...At least the "Description" column should not intrude into the "Title" column.</li>
</ul>
<br>
<br>
<ul class="my-list">
<li><span>Title with many words acts weird too</span>Description. How to fix the "Description" column, so it would start from the top side, not from the bottom?</li>
</ul>
<br>
<br>
try this
ul.my-list>li span {
float:left;
}
ul.my-list>li {
min-height: 80px;
}
I've solved the problem, mostly by creating two separated <span> tags for each of the columns and using display: inline-flex; for the whole <li> tag.
The solution is CSS Responsive Layout friendly and works with all window sizes.
JSFiddle: http://jsfiddle.net/tay06de4/4/
Following simple list, where in every h4, there is a span at the end.
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus <span class="goto">o</span>
</h4>
</li>
<li>
<h4>Digital Signage <span class="goto">o</span></h4>
…
</ul>
Screenshot of the page's source:
The CSS for the span looks like this …
.items .goto {
font-family: 'QuaySans-Icons';
font-size: 1.6em;
position: relative;
float: right;
}
The final thing looks like this:
The problem I have with this is that when decreasing the width of the browser window (I'm working on a responsive webdesign) the span-icon is breaking into the next line.
Do you have any creative solution or idea on how to prevent this from happening?
Kind regards and thank you in advance,
Matt
If you want the icon to keep inline with the last word in your text line, you can simply do:
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus<span class="goto">o</span></h4>
</li>
<li>
<h4>Digital Signage<span class="goto">o</span></h4>
</li>
</ul>
and the CSS might be:
.items {
list-style: none;
margin: 0;
padding: 0;
}
.items li {
border-bottom: 1px solid gray;
margin: 0;
padding: 0;
}
.items h4 {
margin: 0;
}
.items .goto {
background-color: gray;
font-size: 1.6em;
margin-left: 10px; /* optional */
}
If there is no white space between your work and the span, the motif will simply follow the word if the li element is forced to flow into a second line.
You can use margin-left to create visual spacing or insert a   entity before the span, quite a few ways to do. The details depend a bit on what effect you want.
Fiddle: http://jsfiddle.net/audetwebdesign/VsBet/ (two examples of how to do it)
Keeping Icon Right Justified
Here is one approach to pinning the icon to the right of the h4 element:
.ex2.items h4 {
position: relative;
line-height: 1.5;
outline: 1px dotted blue;
padding-right: 2.00em;
}
.ex2.items .goto {
background-color: wheat;
line-height: 1.00;
font-size: 1.6em;
position: absolute;
right: 0;
bottom: 0.0em;
height: 1.00em;
width: 1.00em;
outline: 1px dotted red;
}
Use absolute positioning of the span to keep it to the right and bottom of h4. If h4 forms to line, the icon will follow the second line. You may need to adjust the positioning depending on the icon size. If you allow the icon to grow in size, you may get other issue in extreme cases. I might fix the icon to a px height or width (or a max value). Finally, set some padding-right in h4 to prevent the icon from overlapping the text as the window gets smaller.
Note I explicitly specified line-height values to accentuate the issue around not knowing the height of the icon. You may need to adjust these to vertically position the icon.
Decrease your font-size when you have less space. I guess you have the problem in media with max-width:480px. I found decreasing the font-size a good alternative to keep the design consistent in responsive sites
I've mocked it up on the demo, however it is a bit raw.
.items {
padding:0;
margin:0;
/*width:180px;*/
}
.items li {
border: 1px solid red;
list-style-type: none;
position: relative;
}
.items h4 {
margin:0; padding:0; font-size:16px; padding-right:10px;
}
.items .goto {
margin-top: -10px;
position: absolute;
right: 0;
top: 50%;
}
DEMO
Check the following link and decrease the width of browser.
RESULT