I am creating one of those scroll-through websites where you just scroll down through pages. My pages alternate black and white background.
I have the following page:
<div class="row>
<div class="col-xs-9 introduction">
<p> TEXT </p>
</div>
</div>
with the following CSS:
.introduction {
height: 120%;
padding-top: 150px;
text-align: center;
background: #eee;
min-height: 800px;
}
My problem is that when I make the window of my browser narrow enough, the TEXT in my intro section overflows the white background and spills over to the black section.
How do I specify the size of the class so that all the text is always within the white background??
Thanks!
It is because you cannot read the documentation.
<div class="col-xs-9 introduction">
<p> TEXT </p>
</div>
Here in this code this class 'col-xs-9', xs is used to make sure that the column remains horizontal at all times so your responsive settings aren't properly arranged the way they should be.
I'll suggest that you read the documentation about the grid system a little.
use this instead
<div class="col-md-9 introduction">
<p> TEXT </p>
</div>
it wont give you any problem.
You can use overflow for the text parent
To hide the text or make scroll
Or you can use nicescroll vs slimscroll
Overflow MDN
you can try this css to fix:
.introduction {
height: 100vh;
padding-top: 150px;
text-align: center;
background: #eee;
max-height:100%;
}
Related
I have an image in a div next to some text in a div, and I have centred the text to some satisfaction in the desktop, but the text is not responsive. When I shrink the browser to mobile size the text is superimposed on the responsive images. You can see here: https://www.artisanbelle.com/ Scroll down to the block where the testimonials are and you'll see what I mean.
There are multiple divs of class 'pic-testimonial'. Before I added translate/transform to center the text, my text blocks were responsive in mobile but they were not centered. I need an approach that allows me to center the text within that div but which maintains the responsiveness of the overall structure. What I have doesn't do that and I am not sure what to do. The 'center' tag did not work. To clarify, without the transform, the text was sitting at the top of the large div (the size of the div is fine btw). The transform created the effect that I wanted but only at desktop level. It is wonky at mobile, as described. Does anyone have an alternative way to center text within a div block that is responsive?
Also I would prefer a solution that is not deprecated in HTML5 if possible. Thanks.
I have tried the following code: (snippet only provided)
<div class="testimonial-container">
<div class="pic-testimonial">
<div class="testimonial-imga"><figure class="photo1"><img class="testimonial-photo" src="http://www.artisanbelle.com/images/stories/amandac.jpg" alt="Amanda C"></figure> </div>
<div class="testimonial-texta"><div class="test-text">
<p>"These white topaz earrings are gorgeous. The stones catch the light and are so pretty. They can be dressed up or down and the craftsmanship is top quality. A great pair of earrings that go with everything." <br>- Amanda Coldwell</p> </div> </div>
</div>
</div>
CSS:
.test-text {
position: relative;
}
.test-text p {
margin: 0;
position: absolute;
top: 50%;
left: 25%;
transform: translate(-16%, 80%);
text-align: center;
}
.testimonial-imga, .testimonial-imgb {
float: left;
}
.testimonial-texta, .testimonial-textb {
float: left;
padding: 15px;
` background-color: #DDE1E4;
width: 50%;
text-align: center;
font-size: 1.3em;
}
.testimonial-container {
width: 80%;
border: none;
margin: auto;
}
Expected/desired output: text centred responsively across all devices
Actual output: Text only centred across desktop device at normal browser size. Text superimposed on images when browser is mobile size
Images are fine and already responsive.
Use center tags
.test-text {
position: relative;
}
.test-text p {
margin: 0;
position: absolute;
top: 50%;
left: 25%;
transform: translate(-16%, 80%);
text-align: center;
}
<center>
<div class="testimonial-container">
<div class="pic-testimonial">
<div class="testimonial-imga">
<figure class="photo1"><img class="testimonial-photo" src="http://www.artisanbelle.com/images/stories/amandac.jpg" alt="Amanda C"></figure>
</div>
<div class="testimonial-texta">
<div class="test-text">
<p>"These white topaz earrings are gorgeous. The stones catch the light and are so pretty. They can be dressed up or down and the craftsmanship is top quality. A great pair of earrings that go with everything." <br>- Amanda Coldwell</p>
</div>
</div>
</div>
</div>
</center>
read more at
Never mind. I fixed the problem. I moved the text transform to the desktop section (media queries) and made the width 100% for the .testimonial-texta, .testimonial-textb width attribute.
Looking to have an image (logo) on the left side of a div with text (a title) centered on the div. A basic question, but some caveats.
If I use position: absolute on the image, the text is centered, but when I resize the window the image covers the text. Want this to be a responsive page where the text is centered until it hits the image and the won't overlap. https://jsfiddle.net/mwqwmkdm/
If I use float: left on the image, then the text is not really perfectly centered. https://jsfiddle.net/mwqwmkdm/1/
I could create a margin-right of equal size on the other side of the text, but then I'm wasting those pixels on smaller displays and I don't want to do that. Eventually, it will be more than that one line I am centering. https://jsfiddle.net/mwqwmkdm/2/
Basically, I want:
the text centered as long as the screen is wide enough
the text to wrap around the image and not be in front of or behind it when the screen isn't wide enough
not to lose any screen space except for the image itself
Thanks
If you're willing to try an alternative to CSS float and positioning properties you can easily accomplish your task with CSS Flexbox. Code is clean, simple, efficient and easy to maintain. Also, flexbox is now supported by all major browsers.
DEMO
HTML
<div id="container">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<p>centered text</p>
</div>
CSS
#container {
display: flex;
border: 2px solid black;
background-color: aqua;
}
img {
margin: 10px;
}
p {
border: 1px dashed red;
padding: 5px;
flex-grow: 1;
text-align: center;
}
UPDATE
Here's one way to keep your text centered on the full width of the container, while not allowing the text and image to overlap on smaller screens. No flexbox, no deprecated tags. Just a very simple media query.
Wide screen
Narrow Screen
DEMO
Flex box has compability problems with some browser. Just Create BFC for the <center></center> using overflow:hidden;
Check this out! jsfiddle
You can use flexbox like this:
.wrapper{
display: flex;
}
.content{
flex-grow: 1;
text-align: center;
}
<div class="wrapper">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
Centered Text
</div>
</div>
Check this out for more info https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background
Edit:
To center it respect to the container you can use a modification of you second example using float: left but instead to set the margin to the center you would put the text in a span and set the margin-right to it like this:
img {
float: left;
}
.content {
text-align: center;
}
.content span{
margin-right: 100px;
}
<div>
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
<span>Centered Text</span>
</div>
</div>
this is what I'm trying to achieve.
I already know positioning, centering and stuff. The problem I have here, and which I want to ask you guys, is: what's the best practise to have a centered div and everything inside it to be centered while having a single one's background color exceed to the full width of the page always keeping it centered?
It's a super common layout in fact, I just don't know what's the correct way of "thinking" it.
Should I think the layout as "I make a big box with 1280px width, center it with margin: 0 auto; and then do something special for that div's background - and only the background, content should stay in place - to exceed or should I make something like a class to center every single element the same way but repeating my code?
So basically, should be all inside a single box and that div exceed in the background only or it's actually better to center everything separately by repeating the code?
Keep in mind the site is not responsive and doesn't need to adapt/scale and also that the light grey area is also the "body" colore so the dark grey area is the only special case in the page that should exceed.
My suggestion:
I would create three basic containers for the full width support. Then nest content in it!
html, body{
padding: 0;
margin: 0;
border: 0; /*ie older versions*/
}
header {
background-color: antiquewhite;
}
section{
background-color: ActiveCaption;
}
footer{
background-color: aquamarine;
}
.inner-wrapper{
max-width: 300px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
height: 80px;
text-align: center;
}
section .inner-wrapper{
height: 200px;
}
<header>
<div class="inner-wrapper">
<div>some content</div>
</div>
</header>
<section>
<div class="inner-wrapper">
<div>some content</div>
</div>
</section>
<footer>
<div class="inner-wrapper">
<div>some content</div>
</div>
</footer>
This is a absolut basic but robust layout an i used it several times. It is very easy to make it responsive with media queries or fluid with percentage settings!
In my opinion you should give to the body or to a container div the background color property and that div to be full width and height then the div that is in the middle you should give a margin:0 auto; and a specific width, this is what I would do, but it depends on what you are trying to do, what is the most common way you do it in order to you to know to how to do it the same next time, faster.
I have been through a number of similar questions, and tried to adapt the solutions to my case, but haven't had success in doing so.
I am trying to implement something of a reader, so I have a reading pane which I want to center on my page. I want to limit the size of the pane so that the user is no reading lines spanning the full width of a large browser window, but I also want to have that pane centered in the window. Above the pane I have a header which spans the full width of the page.
Originally I tried to use "span8 offset2" for the reading pane, but as the size of the window is reduced, I want the margins to disappear before the pane shrinks, and using this setup, the reading pane shrinks unnecessarily, squeezing content, as the window is made thinner.
I get the correct behavior just using "span12" with "max-width: 700px" set, in terms of the reading pane shrinking as I want it to, but I cannot get the div to center on the page.
Here is what I have that I'm working with:
<body>
<div class="container">
<div class="row-fluid">
<div class="span12 reading-pane">
<div class="row-fluid">
<div class="nav">
<div class="span6 offset3">
Main Navigation
</div>
<div class="span2 offset1">
Nav2
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="body-text">
Text Area
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The style for the reading-pane is as follows:
.reading-pane {
border: solid;
border-color: #ccc;
border-width: 3px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
min-height: 40px;
line-height: 40px;
max-width: 700px;
}
I have tried adding the following to the .reading-pane style (individually):
float: none;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
float: none;
margin: 0 auto;
I've also tried centering text in the container which centers my header text, but not the reading-pane.
So how do I get the span12 div to center on the page?
I'm assuming since you're using row-fluid that you're using bootstrap 2.0. Bootstrap 3.0 handles responsive grids a bit more cleanly, so if you can I'd recommend using 3.0.
Then move your max-width to the container:
.container {
max-width: 700px;
}
Note that 700 includes the gutters so you may want to use 730.
Or better than using max-width, you can customize (http://getbootstrap.com/customize/) your twitter bootstrap download and define your own widths there if 700 is critical to you. And you can then also remove the larger #media queries then.
There's a few other tweaks to how grids are done on 3.0, which I included in this fiddle: http://jsfiddle.net/PQM34/2/
Hard to gauge without an example of your code and Bootstrap's source...
Note, it sounds like your using the framework incorrectly though. Why not just use span10, span8, etc. and center that?
In order to center divs, using margin:0 auto a fixed width is required (%, px, em, etc.).
Try adding this css to .reading-pane:
position:relative;
margin: 0 auto;
width: 700px;
float:none!important;
I'm working on a project to better my knowledge of Spring MVC practices. To do this, I've been creating a very scaled down version of Twitter. Basically, a user can sign in and post a little blurb and also see a timeline of their previous blurbs and all their follower's blurbs.
I have a background image across the whole page and a container in the middle with a light blue background for just the post blurb box and the timeline. The light blue background only goes to the bottom of the visible page. If the timeline goes down past a single page view where you have to scroll down, the light blue background stops at the bottom of what was visible on the initial load.
I have my page defined like this:
The div class=blurb is the blurbs in the timeline.
<div id="container">
<div id="mainPanel">
<div id="timeline">
<div class="class="blurb"">
<span class="user">test</span> <span
class="displayName">Test User</span> <span class="bodytext">This is a small blurb.</span>
<span class="timestamp">1 hours ago</span>
</div>
<div class="blurb">
<span class="user">admin</span> <span
class="displayName">Test admin</span> <span class="bodytext">This is another small blurb.</span>
<span class="timestamp">1 hours ago</span>
</div>
</div>
</div>
</div>
The CSS style for the container is shown below.
#container {
width: 650px;
height: 100%;
margin: 0 auto;
padding: 10px;
background-color: #DDEEF6;
}
Can I modify that container CSS in a way to make it be as long as the timeline is? The timeline grows with every blurb post.
Screenshot with height defined to 100%
Screenshot with height undefined
UPDATE:
Okay, so it absolutely has to do with the floats. Thanks to the two commenters below. The #socialPanel is defined as such:
#socialPanel {
width: 250px;
float: right;
}
Using Chrome's developer tools, if I clear the float is drops the social panel below my blurbs/tweets and moves the light blue background all the way down the list of blurbs.
Any suggestions on what I could research to keep the socialPanel floating left at the top, but still have my light blue background use all the available height? Many thanks on helping me figure it out this far!
UPDATE TWO:
I combined the methods shown in the answer below to solve my problem. I added a div with class clearer with clear:both; and then removed the height: 100%; from the #container styling. This resolved the problem.
NOTE:
Adding the overflow: hidden; to my container's styling made the page cut off after the light blue area, it did not make the light blue area go all the way down.
Many thanks to all the help! I'm still learning and it was all very appreciated!!
Place overflow:hidden on the #container.
How does it work?
One would think placing this style on a container would hide the floats instead of containing them. What actually happens is that overflow:hidden makes the element establish a new block formatting context. This fixes the float containment of any children floating within it. This CSS fix is more practical then including an additional element in the HTML styled with clear:both and works on all modern browsers, including IE7+.
You probably just need to add a clearing div after your two inner divs. http://jsfiddle.net/c3vTU/1/
<div class="outer">
<div class="inner-left"> Stuff on the left</div>
<div class="inner-right">Stuff on the right <br/><br/></div>
<div class="clearer"> </div>
</div>
CSS
.outer {
width: 520px;
padding: 10px;
background-color: #eee;
}
.inner-left {
float: left;
width: 300px;
background-color: red;
}
.inner-right {
float: right;
width: 200px;
background-color: yellow;
}
.clearer {
clear: both;
}
As #MichaelIrigoyen noted, you can also just add overflow: hidden or overflow:auto (I think makes more sense) to your container. http://jsfiddle.net/c3vTU/4/ This is cleaner and I love it!
If you simply remove the height declaration (height: 100%;) from #container, it will expand as its children do (and the background of course, too).