I have started making a grid and each row has a class ".row" and inside that are classes with .col-3-12 for the width of the div and they float left what I want to do is create a class called .centred and have that inner div that is floated centred. At the moment it centre's the div at 50% it need's a -50% somewhere to make it in the middle codepen
<div class="row">
<div class="col-3-12 centered">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
.row [class*="col-"].centred {
left: 50%;
}
.col-3-12 {
width: 23.5%;
}
Try adding a negative margin-left as below:
.row [class*="col-"].centred {
left: 50%;
}
.col-3-12 {
width: 23.5%;
margin-left:-11.75%;
}
Related
I want to place it like this:
this my code so far, but nothing of what I tried actually works:
what am I doing wrong?
#container {
text-align : center;
}
.button {
border : none;
color : rgba(93, 24, 172, 0.603);
padding : 15px 15px;
text-align : center;
text-decoration : none;
display : inline-block;
font-size : 10px;
margin : 10px 2px;
cursor : pointer;
position : absolute;
}
.button1 {
background-color : white;
}
/* added to see white text */
body { background : darkblue; }
<pre style="font-family:Calibri; color:white;text-align:left;">
Duis aute irure dolor in reprehenderit in voluptare
velit esse cillum dolore eu fugiat nulla pariatur.
Exceptur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est.
</pre>
<div text-align="center">
<button class="button button1" style="text-align:right;">READ MORE</button>
</div>
Any help is welcome. Thanks!
#container {
text-align : center;
}
.button {
border : none;
color : rgba(93, 24, 172, 0.603);
padding : 15px 15px;
text-align : center;
text-decoration : none;
display : inline-block;
font-size : 10px;
margin : 15px 10px;
cursor : pointer;
}
.button1 {
background-color : white;
}
/* added to see white text */
body { background : darkblue; }
pre{
display:inline-block;
text-align:left;
margin:0 auto;}
<div id="container">
<pre style="font-family:Calibri; color:white;border: 1px solid white;">
Duis aute irure dolor in reprehenderit in voluptare
velit esse cillum dolore eu fugiat nulla pariatur.
Exceptur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est.</pre>
<div text-align="center">
<button class="button button1" style="text-align:right;">READ MORE</button>
</div>
</div>
The main issue with your code is that button has an absolute position so it was removed from the normal document flow. Also depending on your website, you would need some sort of layout, or container around the button and text to keep them together.
I moved the button under the text and made a container for them. I also removed some unnecessary css and html you had, like the div around the button.
body {
background: #496bbe
}
.Container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: fit-content;
}
.button {
border: none;
color: rgba(93, 24, 172, 0.603);
padding: 15px 15px;
font-size: 10px;
cursor: pointer;
}
.button1 {
background-color: white;
}
pre {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
color: white;
text-align: left;
white-space: pre-wrap;
}
<section class="Container">
<pre>
Duis aute irure dolor in reprehenderit in voluptare
velit esse cillum dolore eu fugiat nulla pariatur.
Exceptur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est.</pre>
<button class="button button1" style="text-align:right;">READ MORE</button>
</section>
I'm editing a piece of html email template.
I've been trying to apply text-indent property to a text using an styling as following:
<style>
#Indent {text-indent:1em}
</style>
<p id="Indent">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
But it doesn't run properly in browser.
At the same time inline styling for this property runs perfectly well in broswer:
<p style="text-indent:1em">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
All other stylings in the document I did using id attribute and they work perfectly fine.
Is there a way to style text-indent in the similar manner so I won't have to make a single inline styling in a single document?
in IE 9 related to the browser's zoom function.
In the code below,i have a set of div (class='box', 200pixels wide)) all floating inside a large parent div(class='scrollarea',5.000 pixels wide). The visible portion of the page is controlled by the top most div (class='content',400px wide).
When user selects a link a different div is displayed (using anchor tags).
The issue occurs when you have selected the option "Scroll to div 2" and then you try to zoom out the IE browser window (lets say to 70%) The inside divs are repositioned during the zooming and the initial position is lost. Please notice that this only occurs in IE.
Is there a way to fix this?
.content
{
background-color: Yellow;
width: 400px;
overflow: scroll;
}
.scrollarea
{
width: 5000px;
}
.box
{
width: 200px;
margin-right: 200px;
background-color: gray;
float: left;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Scroll to div 1 Scroll to div 2 <a href="#area3">
Scroll to div 3</a> Scroll to div 4
<br />
<br />
<div class="content">
<div class="scrollarea">
<div id="area1" class="box">
DIV 1
<br />
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area2" class="box">
DIV 2
<br />
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area3" class="box">
DIV 3
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area4" class="box">
DIV 4
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
<head><!--[if IE]>
<meta HTTP-EQUIV="REFRESH" content="0; url=crap.html">
<![endif]-->
</head>
no needs to be IE <= 9 today
The div class="col-md-3" are created dynamically. And I want them to wrap down after four divs are created. If i delete any div I want them to wrap up again.
Is this possible?
<div class="row">
<div class="col-md-3" style="border:1px solid black; min-height:50px;">
<div class="col-md-12">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
<div class="col-md-3" style="border:1px solid black; min-height:50px;"></div>
<div class="col-md-3" style="border:1px solid black; min-height:50px;"></div>
<div class="col-md-3" style="border:1px solid black; min-height:50px;">
Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="col-md-3" style="border:1px solid black; min-height:50px;">
This should be placed under the first 4 divs.
</div>
Now It looks liks this. And that's not what I want.
You can achieve it with help of bootstrap's rows. First of all no need to give min-height:50px to a div. Secondly Boostrap is based on 12 column grid, which means if the sum of columns in a row extends 12 then the new column will go down.
For
col-md-3 + col-md-9=col-md-12 or col-md-4+col-md-4+col-md-4 = col-md-12.
If you want to have not more than 4 columns then you should write:
col-md-3 + col-md-3 + col-md-3 + col-md-3
and this will form a row.
You can make experiments here: http://jsfiddle.net/johannesMt/he3fzkhn/
In case you want to remove a certain div from a row and make others to substitute it then you can use a masonry jquery plugin which works very well with bootstrap.
A good references can be found here:
http://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/
http://www.bootply.com/123353
I searched around here and got a lot of answers but they just don't seem to be working. What I have is a div with an image filling the div (100% to make it responsive). Now I want to put some info on the image so I used an article. But my problem is that I can't get my article to remain at the center(horizontal and vertical) of the image while i shrink my page. it centers well horizontally but vertically it just goes out, disrupting the parts below (although I haven't worked on them yet). Any solutions is appreciated. Thanks.
HTML:
<div class="featuredpost">
<img src="images/forest.jpg">
<div class="featured">
<article>
<header>
<h1>Featured Post Goes Here</h1>
</header>
<footer>
<p class="postedby">Postedby User</p>
</footer>
<content>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</content>
<button type="button" onclick="alert('Hello world!')">Read More</button>
</article>
</div>
</div>
CSS:
.featuredpost{
width: 100%;
margin: 0 auto;
}
.featuredpost img{
width:100%;
height: auto;
position: relative;
}
.featured{
margin: 0 auto;
width: 80%;
background-color: rgba(0,0,0,0.5);
color: #fff;
top:50%;
position: absolute;
left: 10%;
}
.featured article{
padding: 10px 30px;
}
HTML
<div id="container">
<div id="overlay"></div>
<img id="img" />
</div>
CSS
#container {
position: relative;
}
#overlay, #img {
position: absolute:
top: 0px; left: 0px;
}
#overlay {
z-index: 5;
}
You could set the html/body to behave like one table-cell.
http://codepen.io/anon/pen/Iplbv
html {
display: table;
height: 100%;
width: 100%;
background-size: cover;
}
body {
display:table-cell;
vertical-align:middle;
}
.featured{
margin: 0 auto;
width: 80%;
background-color: rgba(0,0,0,0.5);
color: #fff;
position:relative;
}
.featuredimg {
position:absolute;
top:0;
left:0;
width:100%;
}
And even set image as a background:
http://codepen.io/anon/pen/wKrae
html {
display:table;
height:100%;
width:100%;
background:url(images/forest.jpg);
background-size:cover;
}
body {
display:table-cell;
vertical-align:middle;
}
I had the same issue as you and I'm going to go with this.
You have a div with a background image (table)
A box to hold the title (table-cell)
A box to center #2 inside of (table)
The actual content of the title (varies)
Here is a pseudo-code example so you can see the nesting
<1 table>
<3 table>
<2 cell>title</2>
</3>
</1>
Since #2 is inside of #3 and #3 is inside of #1 you get a table inside of a table so you may also need another wrapper around #3 as a table cell to center #3
article header h2:after{
content: "";
display: block;
border-bottom: 1px solid #3cc19c;
margin: 1em 45%;
}
.image-box { /* BACKGROUND FOR HEADER */
background-image: url(https://placeholdit.imgix.net/~text?txtsize=83&txt=1000%C3%97500&w=1000&h=500);
background-size: cover;
background-repeat: no-repeat;
display: table;
width: 100%;
}
.title-container-frame{ /* BOX FOR TITLE TO SIT IN */
width: 300px;
height: 300px;
background: white;
display: table;
outline: 4px double white;
margin: 100px auto;
}
.title-container{ /* HOLDS THE TITLE TO BE CENTERED */
display: table-cell;
vertical-align: middle;
}
article{
text-align:center;
}
<article>
<header>
<div class="image-box">
<div class="title-container-frame">
<div class="title-container">
<h2>Meet Shawn</h2>
<h3>A stand up guy</h3>
</div>
</div>
</div>
</header>
<div class=bit-2>
<hr>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>Candid wedding photogrpahy is my passion. I can't imagine doing anything else for a living. The best wedding photography captures raw emotional moments that words cannot capture.</p>
<p>True-to-life imagery is the new direction of wedding photography. We provides beautiful images to our clients on their wedding day while everyone is chomping at the bit to see them.</p>
<p>"Lorem derit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>Please feel free to contact me <a>email#email.com</a> I would love to answer any questions you might have.</p>
</div>
</article>
See https://jsfiddle.net/0qa2g4b5/
I would divide up the image into all the parts that have to respond to a changing screen size first and then come up with your css solution. That's what I tried to do above.
It's going to depend a little on the specifics of how you want the end result to respond to a smaller screen.
Most likely the most elegant solution is to #media css to adjust your styles when you think they stop looking good.
Some easier less elegant solutions all seem to have drawbacks, here are some you can consider and the drawbacks so you know if you can live with that:
If the background image is purely for design and can be clipped you can use background-size: cover; if you need the background width to take up 100% of the div and still show the entire image use background-size:contain cover crops your image in some cases.
You can't both contain the flexible sized background div and keep a fixed height inner container like a title box because at some point the height of your title box will be more than the background if you change from a landscape aspect ratio like 16:9 to a vertically held iphone aspect ratio 9:16.
So if you want it to completely resize so the title text resizes with the div you can do font-size:1em on a container and font-size:inherit on the text or use vh vw measurements on either the box holding the title or the text itself to resize based on screen size. The problem you'll run into there is the text will get too small to read at some point or it will look huge on a desktop. That's why I would recommend using:
#media (min-width: 50em) and (max-width: 68.75em) {/*CSS for medium screen*/}
#media (max-width: 50em) {/.../}`
Then go in and adjust the screen size and make whatever changes you need for phones and smaller screens (chrome developer mode has a tool for this)