I have this css code:
.post {
margin-top: 0.5em;
margin-left: 2em;
margin-right: 2em;
text-align: center;
}
.post p{
max-width: 1200px;
padding: .5em;
text-align: justify;
margin: 0;
top: 1.25em;
}
.post h1{
text-align: center;
}
and have this in html:
<div class="post">
<h1>Title of Sample Work 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus id nisl ut suscipit. Nullam vel justo tellus. Suspendisse vehicula rhoncus nunc sed accumsan. In hac habitasse platea dictumst. Mauris vel dolor velit. Phasellus finibus massa mauris, at interdum nisl luctus at. Etiam porttitor, metus non dapibus pretium, orci arcu pretium nulla, eget congue augue libero at lectus. Mauris pretium urna tristique, laoreet enim rhoncus, euismod tortor.</p>
</div>
And this is what I see:
Why there is so much margin at the top and the text title is so down?
You can see an example of the actual page on the web here:
http://www.nanogomo.com/sample1.html
It is interesting that if I add more content to it, it pushes the text up.
Because the #wrapper has display:flex and has a before. You should you remove the following:
#wrapper::before {
content: '';
display: block;
}
The flex container contained 3 elements home-back, post and before. Before is absolutely positioned so it is removed from the normal flow (doesn't take space). Before (with no width) and post are positioned on the main ax (vertical because direction is flex column) with justify-items: space-between (main ax is vertical).
use margin top and give value according to the need.
.post h1{
text-align: center;
margin-top: -7px;
}
Try setting a value to margin and padding:
.post h1{
text-align: center;
margin: 0px;
padding: 0px;
}
Related
I've been working on a website and I'm trying to show some text when my mouse is hovering an image. This is a pretty common thing on website today I believe. However for some reasons when I hover my image the text goes "out of bonds" of the image. (I will attach a screenshot you'll understand)
As you can see not only it goes below the image at the bottom, but also it goes through on the right of the image. I am not sure how to fix this? Is this because of the font size? I don't think so
div className='image_section'>
<h1 className='section_title-top'>SERVICES </h1>
<div className='img-container'>
<div class="image">
<img class="image__img" src={bdh1Img} alt="Bricks" />
<div class="image__overlay image__overlay--primary">
<div class="image__title">This is my title and I want three same image</div>
<p class="image__description">
this is some random text
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor,
orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl
sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
Ut velit mauris, egestas sed,
gravida nec, ornare ut, mi. Aenean
ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam,
nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque
</p>
</div>
</div>
</div>
</div>
.image_section {
width: 100%;
background: #eee;
display: flex;
flex-direction: column;
padding: 2rem 0;
}
.section_title-top{
text-align: center;
color: #000;
padding: 2.5rem 0;
}
.img-container {
max-width: 1140px;
margin: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.image {
position: relative;
}
.image p, h2{
font-size: 14px;
}
.image__img {
display: block;
max-width: 100%;
height: auto;
}
.image__overlay {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.75);
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s;
}
.image__overlay > * {
transform: translateY(20px);
transition: transform 0.25s;
}
.image__overlay:hover {
opacity: 1;
}
.image__overlay:hover > * {
transform: translateY(0);
}
.image__title {
font-size: 1.5em;
text-align: center;
font-weight: bold;
}
.image__description {
text-align: center;
font-size: 1.15em;
margin-top: 0.35em;
}
#media screen and (max-width: 980px) {
.img-container {
max-width: 90%;
margin: auto;
grid-template-columns: 1fr;
}
}
Thanks for any help
I think this is too much text to be on an image
you can use ellipsis property like this
for example:
.image__description {
text-align: center;
font-size: 1.15em;
margin-top: 0.35em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* this set the number of rows to show*/
-webkit-box-orient: vertical;
}
then if want the user to display the full text u can make a modal to show the full text or something
I saw that in the hover div (class name: image__overlay image__overlay--primary) you use position absulate so that it renders aspect of the main body. Add a width, it will be solved.
I have this fixed right side bar layout working perfectly for me for a long time, it works in most of the browsers and devices too.
But the recent chrome update to 45 which happened few days ago, broke the layout by adding a horizontal scrollbar.
There are different ways to achieve the fixed right side bar layout, but this layout needs to extend the background color of main and side columns to the browser width extent with fixed max-width container(marked in red) and with shadow between columns.
And this below code was the best way I could achieve it.
Now all I need is no scrollbar in Chrome 45, I tried different ways to avoid it but none works. I know this wont be a easy fix, but any help on this would be appreciated.
http://jsfiddle.net/chetanjk/ptuxn2dq/
HTML
<div class="container" style="background:#000; color:#fff; text-align:center">
------page content max width for reference ----
</div>
<div class="page-cols">
<div class="container ">
<div class="cols-wrap">
<section class="main-col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ipsum sapien, tincidunt ac augue sodales, consequat sodales elit. Nunc pharetra eget velit sed pharetra.
</section>
<aside class="aside-col">
<div class="pack">
Sed luctus nisl ut ipsum scelerisque semper. Nullam euismod eros vitae odio viverra tristique. Nam pulvinar massa at diam congue, vitae fringilla neque varius. In molestie quis neque luctus facilisis.
Vestibulum sit amet mi ut odio condimentum dictum vel a metus. Morbi ultrices enim ut accumsan lacinia. Praesent augue purus, bibendum in odio in, pharetra consectetur mi. Vivamus ac arcu dignissim, placerat ipsum eu, tempor magna. Integer nec ipsum dui. Quisque at diam est. Aliquam ut placerat ligula, eu venenatis turpis. Sed nec eros vel ante ornare eleifend. Suspendisse aliquam nulla consectetur tellus molestie efficitur.
</div>
</aside>
</div>
</div>
</div>
CSS
body{
font-family: arial;
font-size: 14px;
color: #333;
line-height: 1.5;
overflow-y: scroll;
margin:0;
padding: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
.container:after,
.cols-wrap:after,
.page-cols:after{
clear: both;
content: "";
display:table;
}
.container{
margin: 0 auto;
max-width: 1200px;
min-width: 300px;
padding:0 10px;
position: relative;
}
.page-cols{
background-color: #999;
}
.cols-wrap{
width: 100%;
position: relative;
background-color: #ccc; /*this can be #fff too to match body bg*/
box-shadow: 10px 10px 10px -10px #000;
right: 320px;
}
.cols-wrap .main-col{
float: left;
left: 320px;
position: relative;
width: 100%;
padding-right: 340px;
}
.cols-wrap .aside-col{
float: right;
position: relative;
width: 320px;
margin-right: -320px;
padding-left: 20px
}
I am learning CSS flexbox and was doing a simple layout where I wanted the first flex child to displayed with 100% width of the parent and rest flex items wrapping below. Also, the wrapped flex items should occupy width in a specific ratio (easy to set with 'flex' property).
To do this I set "flex-basis" property of first flex item to 100% and set flex property of next 2 to the ratio I want. Here is what the pertinent CSS looks like (link to complete fiddle is below):
.main{
max-width: 1000px;
margin: 100px auto;
display: flex;
flex-flow: row wrap;
}
/*using ususal shorthand notation*/
.flex-item:nth-child(1) {
flex:1 100%;
}
.flex-item:nth-child(2) {
flex:2;
}
.flex-item:nth-child(3) {
flex:3;
}
This should set the first item's width to 1000px and for the next two as 400px and 600px respectively; wrapped and displayed below the first child.
But for some reason the CSS breaks, and the 2nd and 3rd items are pushed outside main container.
What more strange is that adding margin to the flex items fixes the whole thing and I don't understand how this is happening (I must be doing something stupid). Even addding some border or padding to the '.flex-item' rule works.
.flex-item{
margin: 5px;
}
Here is the JS Fiddle. You can try un-commenting the '.flex-item' rule in CSS to see what is going on.
I was lazy not to add the any prefixes (since almost every new browser supports it) ,but the problem is same across latest FF, IE and chrome.
The second and third elements have 0 width, so they can fit in any place ..
That's way they stay in the first line.
just set 1px for basis, and they will be in the second row
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
font-family: 'Raleway', Helvetica, sans-serif;
font-size: 14px;
font-weight: 300;
color: #555;
}
.main{
max-width: 1000px;
margin: 20px auto;
border: 1px dotted #999;
padding: 20px;
display: flex;
flex-flow: row wrap;
}
/* adding any border, margin, padding rules here fixes it */
.flex-item:nth-child(2) {
flex:2 1px;
background-color: lightyellow;
}
.flex-item:nth-child(3) {
flex:3 1px;
}
.flex-item:nth-child(1) {
flex:1 100%;
}
<div class="main">
<p class="flex-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non consequat lorem. In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit amet, imperdiet eget mi.
</p>
<p class="flex-item">
In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit amet, imperdiet eget mi.
</p>
<p class="flex-item">
In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit
.flex-item:nth-child(2) {
flex:2 1px;
}
.flex-item:nth-child(3) {
flex:3 1px;
}
In advance, thank you all.
I'm learning. So I messed up my layout, and can't figure out to solve it.
I basically have a container who contains 3 divs (some blocks of text).
The main container should be <div id="main">. It has 1024px width and 500px height.
It should contain the 3 articles or 3 divs. They should spread horizontal.
The first "article" should be 67px from the left of the "main div".
The third "article" should also be 67px from the right of the "main div".
Between the articles there should be around 55px space, or around that value.
I read that I need to nest those articles into another div (<div class=artcontainer">) and do margin: 0 auto
I did it but not so good.
Here is the jsfiddle
<div id="main">
<div class="artcontainer">
<article class="pulllft">
<h2>Adipiscing elit</h2>
<br>
<p>Mauris malesuada dapibus ornare. Aenean molestie, lorem vitae eleifend tincidunt, ipsum nibh cursus libero, ac molestie magna sem in eros. Interdum et malesfaucibus. Integer at id nulla congue. Praesent quis dolor mattis, vitae feugiat erat commodo.Read More</p>
</article>
<article class="pulllft">
<h2>Lorem Ipsun</h2>
<br>
<p>Suspendisse id varius enim. Nulla facilisi. Pellentesque dapibus, ut luctus faucibus, erat metus tempor sem, a fringilla lacus diam a massa. Praesent porta, augue vel suscipit convallis, augue velit ultricies mauris, ut tempor massa ipsum ut magna.</p>
</article>
<article class="pulllft">
<h2>Lorem Ipsun</h2>
<br>
<p>Aliquam in mauris nulla. Cras neque mauris, congue vitae dignissim eu, euismod sit amet dolor. Etiam luctus tempor interdumEtiam in mi feugiat, rutrum nulla eget, posuere nibh. Mauris rhoncus velit nec leo luctus, ut dictum dolor laoreet. In consequat risus lectus.</p></article>
</div>
Also I'm interested if I used right properties, in a desperate attempt, I clicked what I need to and don't need. And is the use of article tag ok for this, or should I use some other tag.
The Css:
#main {
width: 1024px;
float: left;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1em;
color: rgba(51,51,51,1);
z-index: 99;
height: 500px;
position: static;
/* [disabled]visibility: inherit; */
background-color: #f3f2f1;
clear: both;
overflow: hidden;
text-align: center;
}
.pulllft {
width: 274px;
text-align: justify;
line-height: 1.3em;
float: left;
color: rgba(79,30,31,.8);
font-family: "Exo 2", "sans-serif;";
font-weight: 400;
font-size: 1.3em;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
height: 300px;
margin-top: 100px;
}
.artcontainer {
width: 895px;
position: relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: rgba(0,153,102,1);
}
Is this what you are looking for?
What I changed:
So first off, you had the wrong width of the inner div; you wanted it to have 67px margins on each side in a 1024px width div.
1024 - 2(67) = 890
You had 895.
Secondly, you wanted 55px between the three articles, so subtract that from the width of the container:
890 - 2(55) = 780
Divide it by 3 for the 3 articles:
780 / 3 = 260
There's your width.
Then apply the padding to the right side of the articles:
.pulllft
{
padding-right: 55px;
}
And don't apply to the last child:
.pulllft:last-child
{
padding-right: 0;
}
I'm working on a website design (relearning HTML and CSS, as I haven't used them for several years), and I've come across what appears to be a rather simple problem, and one I'm sure I've come across before, but can't remember how to fix.
In my design, I have the main content to the left of the page, and a sidebar to the right: jsfiddle. The sidebar is float: right;, and the content container is float: right;. The problem is, which ever element appears first pushes down the other element. I want them to sit side by side next to each other.
HTML:
...
<div id='page-container'>
<aside id='sidebar'>
<div class='sidebar-item'>
<p>Sidebar</p>
</div>
</aside>
<main id='body-container'>
<h1 id='main-title'>Welcome to WebsiteName!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut erat
volutpat, semper metus id, suscipit justo. Maecenas ut lacus sit amet lacus
elementum tempus. Suspendisse sit amet sem venenatis, mollis enim vel,
vehicula nisi. Phasellus sed condimentum ligula. Curabitur vehicula sem in
volutpat vulputate. Maecenas feugiat ipsum quis quam euismod lacinia. In
congue vel dui ac dignissim. Maecenas iaculis, odio fermentum tincidunt
aliquam, elit massa tristique nisl, quis fringilla nisl purus sed risus.
Cras malesuada posuere elit sed auctor. Phasellus hendrerit adipiscing
commodo.</p>
<img id='image' src='logo.svg' alt='PollardNET | Home' />
</main>
<div class='clearer'>
<!--Needed to ensure floats work correctly!-->
</div>
</div>
...
CSS:
...
#sidebar {
float: right;
margin: 100px;
margin-left: 50px;
margin-top: 50px;
width: 250px;
padding: 5px;
padding-left: 20px;
border-left-style: solid;
border-left-width: 2px;
border-left-color: #a4a4a4;
}
#body-container {
float: left;
position: relative;
margin: 100px;
margin-right: 427px;
margin-top: 50px;
}
...
.clearer {
clear: both;
}
...
If I remove any text (p tags) from the content section, the problem seems goes away. For some reason this does not work in jsfiddle, but shows in Chrome. Does anyone know how I can fix this?
Remove float: left; from your #body-container. Generally speaking you don't need to specify two floats for each side, only one float is enough. See updated JSFiddle.
You can use position: absolute and set a width for both division.
#sidebar {
...
position: absolute;
}
#body-container {
...
position: absolute;
}
Put it in span instead of p or use float on p
p {
float:left;
};
If you don't want to remove the float, you can also take the margin-right off body-container and give it a width.
Floating an element makes it display:block. By default, a block element in HTML will have a full line width. That's why the body-container pushes the sidebar down if it doesn't have a set width or if it doesn't have display: inline