I am looking a way to center my texts.
I just have a problem with my texts for now. How to align correctly my texts please? The solution exists sur stackoverflow but I don't get the desired result.
I would like to use a simple way beacause I am a beginner.
Here is my codes below, I hope my code is correct overall.
Thank you very much for your help.
.wrapper {
display:flex;
flex-wrap: nowrap;
}
.image-wrapper{
margin: 10px;
text-align: center;
width: 90%;
}
/* All of these styles are shared by the .img element */
.img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
margin-top: 50px;
border: 3px solid red;
height: 197px;
width: 90%;
}
.img.img-01 {
background-image: url("https://zupimages.net/up/19/51/vn88.jpg");
}
.img.img-02 {
background-image: url("https://zupimages.net/up/19/51/9fik.jpg");
}
.img.img-03 {
background-image: url("https://zupimages.net/up/19/51/dwq9.jpg");
}
.img-title{
font-size: 20px;
line-height: 1.4;
color: #cd2122;
margin-top: 10px;
margin-left: 20px;
float: left;
font-weight: 700;
font-family: Open Sans;
}
.img-text{
font-family: Open Sans;
font-size: 13px;
line-height: 19px;
color: #535353;
margin-bottom: 20px;
margin-left: 20px;
float: left;
}
<div class="wrapper">
<div class="image-wrapper">
<img class="img-01 img">
<div class="img-title">Trust Management</div>
<div class="img-text">Assets trust management represents one of the most popular operation methods in the world stock markets for companies as well as individuals. Among the advantages of assets trust management we may mention many.</div>
</div>
<div class="image-wrapper">
<img class="img-02 img">
<div class="img-title">Well Documented</div>
<div class="img-text">Assets trust management represents one of the most popular operation methods in the world stock markets for companies as well as individuals. Among the advantages of assets trust management we may mention many.</div>
</div>
<div class="image-wrapper">
<img class="img-03 img">
<div class="img-title">Great Support</div>
<div class="img-text">Assets trust management represents one of the most popular operation methods in the world stock markets for companies as well as individuals. Among the advantages of assets trust management we may mention many.</div>
</div>
</div>
Related
I'm trying to keep my footer down no matter the size of the page. But it gets thrown about when about div encroaches. I want it to display over the about content but for the about content to be scrollable it's too big to display.
Here's the code
fiddle
.footer {
background-color:#FFF;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px;
display: block;
.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width:100%;
min-height: 100%;
margin-bottom: -140px;
}
You need to clear the float. Add clear:both; to the .footer.
(function() {
var img = document.getElementById('container').firstChild;
img.onload = function() {
if (img.height > img.width) {
img.height = '100%';
img.width = 'auto';
}
};
}());
* {
margin: 0;
}
html,
body {
height: 100%;
}
.footer,
{
height: 140px;
display: block;
}
p {
font-family: HindRegular;
font-size: 13px;
font-weight: normal;
display: block;
margin-top: 1.5em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
.article {
float: left;
font-family: HindRegular;
width: 21%;
padding-right: 4%;
color: #999;
}
.article-right {
float: left;
font-family: HindRegular;
width: 21%;
padding-left: 4%;
color: #999;
}
.article-centre {
float: left;
font-family: HindRegular;
width: 21%;
padding-left: 2%;
padding-right: 2%;
color: #999;
}
.blurb {
font-family: HindMedium;
font-size: 24px;
padding-bottom: 100px;
color: #999;
}
.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width: 100%;
min-height: 100%;
/* equal to footer height */
margin-bottom: -140px;
}
.heading {
font-family: HindMedium;
font-size: 24px;
color: #666;
margin-top: 1em;
}
.copyright {
float: left;
}
.contact {
float: right;
font-family: HindRegular;
color: #999;
}
#container {
width: 100%;
}
#container img {
width: 100%;
}
h8 {
font-family: HindRegular;
color: #999;
padding-right: 5px;
font-style: normal;
}
.footer {
clear: both;
background-color: #FFF;
height: 120px;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
}
a {
border-bottom: 1px solid #219edf;
padding: 0;
margin: 0 0 2px 0;
clear: both;
color: #666;
text-decoration: none;
font-weight: normal;
outline: none;
transition: all .15s ease;
}
.services {
width: 100%;
}
a:hover {
text-decoration: none;
color: #999;
border-bottom: 1px solid #999;
}
#details {
color: #666
}
#header {
color: #999;
}
<div class="about">
<div class="blurb">Stunning Imagery and resourceful imaging
</div>
<div class="article">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/OMA%20cctv%20building_.jpg" alt="CCTV building in Beijing By Rem Koolhaas's OMA" />
</div>
<div class="heading">Architectural Photography
</div>
<p>Since 2011 Nathaniel has been scaling China's highs and lows documenting it's varied architectural manifestations for a range of western and Local clients. Often a lone cameraman amongst a sea of Chinese hard hats, part of the job has been to negotiate
sites with little more than a grid reference and reference pictures in inhospitable new cities on the fringes of boom or bust development. Scrambling his way up a half finished sky scrapper fire escapes with little more than a telephone number and
the name of a contractor called Zhou. In the summer of 2017 he relocated to London. He looks forward to shooting a very different type of architecture back home.
</p>
</div>
<div class="article">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/Aerial_drone_photography-.jpg" alt="Aerial Photography with UAV drone" />
</div>
<div class="heading"> Aerial Services
</div>
<p>Large range of services utilizing our fleet of custom built UAS (Unmanned Aerial Systems - AKA drones)</p>
<p>Registered CAA pilot with commercial flight permissons</p>
<p>Up to High resolution stills at 42mp and rich 4k full frame video</p>
<p>Photogrametry - Developing accurately positioned 3D site models up to a 10cm level accuracy</p>
<p>Agronomy - Crop analysis, multispectral imaging</p>
<p> </p>
</div>
<div class="article-centre">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/blank.jpg" alt="Verified View image of existing site with proposed building outline." />
</div>
<div class="heading">Verified Views
</div>
<p>We provide AVR's (Accurate Visual Representations) aka verified views to back up your project proposals with accurate siting in the current landscape.</p>
<p>We don't outsource the photography or site survey whole process is in house</p>
<p>Levels of representation from AVR0 - outlining of proposed project to AVR3 - description of architectural form and materials.</p>
</div>
<div class="article-right">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/Rhizome_logo_square.jpg" alt="Architectural Services by Rhizome" />
</div>
<div class="heading">Rhizome
</div>
<P>Company started in London 2017 to explore and provide bespoke services to small and mid sized architectural firms and developers utilsing emerging technologies in architectural and related fields.</P>
<P>Comming Soon</P>
</div>
<br style="clear: left;" />
</div>
<footer class="footer">
<div class="article"><span id="header">Contact Details</span>
</div>
<div class="article">
<span id="header">Address</span>
<br /><span id="details">Nathaniel McMahon Photography<br />
Maynards Farmhouse<br />
A21, Lamberhurst QTR<br />
Kent<br />
TN3 8AL</span>
</div>
<div class="article-centre">
<span id="header">Mobile</span> <span>+44 (0)7377673765
</span><br/>
<span id="header">Email </span>
nathaniel.mcmahon#gmail.com
</div>
<div class="article-right"> Website and all images <br /><span id="details">© 2017 Nathaniel McMahon Photography</span>
</div>
</footer>
Remove these from your .about class. You should practice some with margin. It doesn't work the way you're trying to use it.
min-height: 100%;
margin-bottom: -140px;
Add clear:both; to your footer declaration.
Also change your body style from height to min-height, so that your body can be larger than the browser.
You can use overflow: hidden on .about and .footer so the floats will stay contained within those containers. You don't need the negative margin on the .about. If you are trying to make the footer stay at the bottom of the page even when the content is very little, you could try positioning the footer absolutely. Here's an example below. You'll need to wrap everything in .wrapper or whatever name you want to use.
.wrapper { min-height: 100%; position: relative; }
.article { overflow: hidden; }
.footer { overflow: hidden; position: absolute; bottom: 0; }
With less content, footer is at the bottom:
https://jsfiddle.net/suefeng/u4coohpp/1/
With more content, footer is still at the bottom:
https://jsfiddle.net/suefeng/u4coohpp/3/
If you want elements to stick out of the .article and .footer containers, or just another option, here's an alternative solution to clearing floats:
You could remove floats on your article and footer containers, but use display: inline-block; with vertical-align: top; instead. You'll need * { box-sizing: border-box; } or change your padding into margin.
https://jsfiddle.net/suefeng/u4coohpp/4/
Also added this to the footer so the email address wouldn't run into the next column:
.footer a[href*="mailto"] {
word-break: break-all;
}
Here's an example of having a fixed footer:
https://jsfiddle.net/suefeng/gv7Lg3e0/1/
.footer {
position: fixed;
bottom: 0;
}
If you are simply trying to pin an element to stay at the bottom of the page and have content scroll under it. You should use position:fixed.
If you update your footer content like so:
.footer {
background-color: #FFF;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px;
display: block;
overflow: hidden;
position: fixed;
left:0;
right:0;
bottom:0;
clear:both;
}
The footer will pin to the bottom. You will also need a spacer after your footer to ensure your scroll bar is sufficient to scroll all content into view.
HTML:
<div class='footer-spacer'></div>
CSS:
.footer-spacer {
height: 160px;
}
Remove these from your .about class. Negative margins will cause odd behavior when it moves an element off page.
min-height: 100%;
margin-bottom: -140px;
I am trying to place some text underneath a picture with a variable height (absolute positioned) I tried setting it to 'relative' but then it won't have the effect of the variable height which I really want for my site.
CSS
header{
background-color: #f49b42;
}
body{
font-family: Lora;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: auto;
clip: rect(0px,10000px,400px,0px);
position: absolute;
}
h1{
font-family: Pacifico;
margin: 0 20px;
}
p#feelgood{
position: absolute;
color: wheat;
margin: 80px 0;
text-align: center;
width: 100%;
text-shadow: 0px 1px #4c2816;
}
p{
margin: 20px;
text-align: justify;
}
span{
font-family: Pacifico;
}
<body>
<header>
<h1> Music </h1>
<img src="https://images.pexels.com/photos/542515/pexels-photo-542515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
<p id="feelgood"> makes me feel good</p>
</header>
<div class="music-quotes">
<p> One good thing about music, when it hits you, you feel no pain.<br>
<span>Bob Marley</span> </p>
<p> If music be the food of love, play on. <br><span>William Shakespeare</span></p>
<p> Where words fail, music speaks. <br><span>Hans Christian Andersen</span></p>
<p> Music is the movement of sound to reach the soul for the education of its virtue. <br><span>Plato</span>
</p>
<p>Music can change the world because it can change people. <br><span>Bono</span></p>
</div>
</body>
here is my jsfiddle (you might not see the effect of the difference of absolute positioning to relative because you can't get it wide enough)
https://jsfiddle.net/goblincake/htgq07pb/
I think this is what you were going for...
https://jsfiddle.net/htgq07pb/5/
header{
background-color: #f49b42;
}
body{
font-family: Lora;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: auto;
clip: rect(0px,10000px,400px,0px);
position: relative;
}
h1{
font-family: Pacifico;
margin: 0 20px;
}
p#feelgood {
position: absolute;
display: inline-block;
color: wheat;
margin: -40% 0;
text-align: center;
width: 100%;
text-shadow: 0px 1px #4c2816;
}
p{
margin: 20px;
text-align: justify;
}
span{
font-family: Pacifico;
}
<body>
<header>
<h1> Music </h1>
<img src="https://images.pexels.com/photos/542515/pexels-photo-542515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
<p id="feelgood"> makes me feel good</p>
</header>
<p> One good thing about music, when it hits you, you feel no pain.<br>
<span>Bob Marley</span></p>
<p> If music be the food of love, play on. <br><span>William Shakespeare</span></p>
<p> Where words fail, music speaks. <br><span>Hans Christian Andersen</span></p>
<p> Music is the movement of sound to reach the soul for the education of its virtue. <br><span>Plato</span>
</p>
<p>Music can change the world because it can change people. <br><span>Bono</span></p>
</body>
I'm not the best at CSS and cannot figure out what's wrong. Think it might be the tags I'm using in my sidebar. I would like the nav element with the "vert" id and the div element with the "text-container" id to be NEXT to each other, but the way it is going, it's sending my stuff in the "text-container" into the footer, which is unacceptable.
I'm baffled as to how to get them next to each other. I know elements can be next to each other as it worked in my nav element with the "hor" id with all the a elements next to each other with no problem.
I think it might be the tags, but don't know what I can do about it. I could just axe the navbar as I already have that in the header, but I just spent a lot of time on the navbar to now have to kill it and wish I could keep it.
<html>
<head>
<title> The Resorts </title>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<style>
h1
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 40px;
}
h2
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}
#text-container
{
width: 1045px;
height: 690px; */
zoom: 1;
margin: 0;
display: inline-block
}
#text-container:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility:hidden;
}
#text-container > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
</style>
<div id="content">
<div id="logo">
<img src="./logo.png"></img>
</div>
<div id="container">
<nav id="hor">
<div> Home </div>
<div> The Mountains </div>
<div> The Resorts </div>
<div> Snow Reports </div>
<div> Events & Activities </div>
<div> Plan A Trip </div>
</nav>
<div id="middle">
<nav id="vert">
Home <br/>
The Mountains <br/>
The Resorts <br/>
Snow Reports <br/>
Events & Activities <br/>
Plan A Trip
</nav>
<div id="text-container">
<h1> The Resorts </h1>
<h2> The West Resort </h2>
<p>
The West Resort has everything from wide-open beginner areas to challenging terrain parks to gladed tree skiing hideaways. It has a young, energetic feel, but there's more to it than just jumps and jibs. West is
home to the Children's Sports Center, the Bullwheel Bar and Grill and the Foggy Goggle where fashion shows, movie premieres and live performances are held on a regular basis.
</p>
<h2> The East Resort </h2>
<p>
The East Resort boasts the longest trails in the region serviced by a single high-speed quad. Its long, groomed, cruising trails make it perfect for carving, but it is also home to the Olympic Bowl, the longest,
steepest bump run in the region. After a quick ascent on the Diamond Peaks Express, you'll find an additional 20 acres of beginner terrain up top. With 1,600 vertical feet of uninterrupted corduroy, the East
Resort offers traditional skiers and snowboarders a true alpine experience without having to journey far from home.
</p>
<h2> The North Resort </h2>
<p>
The North Resort is the perfect family-friendly ski resort with 70 acres of gently rolling terrain and historic, log cabins that are terrific for exploring. It is big enough to offer a true winter experience but small
enough to maintain its historical warmth and charm. Spend the afternoon shushing down the slopes or warm up by the fireplace with a cup of hot chocolate at the North Lodge. It is one of the region’s oldest
base lodges with ties that go back to the Big Pines ski clubs of the 1940s.
</p>
</div>
</div>
</div>
<div id="footercontainer">
<footer>
© 2016
</footer>
</div>
</div>
</body>
</html>
==main.css==
#logo
{
border: 1px dashed purple;
width: 1050;
height: 75;
}
#logo > img
{
width: 1050;
height: 75;
}
#content
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 960px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 500;
}
nav
{
border: 10px solid transparent;
padding: 15px;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 170%;
}
nav#vert
{
width: 220;;
height: 540;
margin: 0;
}
body {
color: #000000;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
background-color: #422520;
background-image: url(./image8.jpg);
background-repeat:no-repeat;
background-size:cover;
text-align: center;
background-attachment: fixed;
background-position: center;
}
#footerContainer
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 980px;
background-color: #ffffff;
background-repeat: repeat-y;
}
footer
{
border: 10px solid transparent;
padding: 15px;
text-align: left;
margin: 0 auto;
width: 1000px;
background-repeat: repeat-y;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 170%;
}
#container
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 1045px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 690px;
}
nav > a
{
color: #ccccff;
}
nav#hor > div
{
border: 1px solid white;
float: left;
padding: 10px;
}
nav#hor
{
width: 1000px;
height: 50px;
margin: 0;
}
nav#hor > div > a
{
color: #ccccff;
}
nav#hor>div:hover
{
background-color: #01ff02;
}
Here you go...
https://jsfiddle.net/og9wpLmw/
I coloured the two blocks green and red to make them obvious
I fixed & amp; by putting ; on the ends
I fixed by making it
I made boxes next to each other using display:table-cell;
I put all the CSS into the css file
I fixed the widths in nav#vert by including px in the measurement.
Here is the css that makes the difference:
#text-container {
width: 1045px;
height: 690px;
*/ zoom: 1;
margin: 0;
display: table-cell;
background-color:red;
}
nav#vert {
background-color:green;
width: 220px;
height: 540px;
margin: 0px;
display:table-cell;
}
it might be because your "vert" and/or your "text-container" have too big of widths.
You have a fixed width nav - the width is set to 220px, but then you've got padding / margin etc. so it ends up being 270px wide (nb. If you're not familiar, right click on an element in a modern web browser and select "inspect" you can easily measure elements and check out their properties in CSS).
So to fit your other text-container to the right of it you need to reduce it's width to allow for the width of your nav. This can be achieved easily by using calc
width: calc(100% - 270px);
Add that CSS to your text-container (and remove other width declarations) and it'll work. It's not best practice, but you can enforce this declaration to take precedence by adding !important giving you:
#text-container {
width: calc(100% - 270px) !important;
}
You just need to add that in, or amend your existing CSS and you're good to go.
That works, but the problem I noticed later down the line is that if I have an iframe as the first element in "text-container" and don't have something before that iframe, then the nav bar is messed up again.
Is there another display thing I could use?
As stated, I'm trying to use the faux column approach to having matching-height columns. I've followed the approach listed in CSS: The Missing Manual, which matches everything I've seen on ALA and other online resources. The problem I'm having is that the faux column image never appears on the screen. Here is the HTML I'm using:
<div id="contentWrapper">
<div id="reports">
<h2>yyyy</h2>
<p>xxxxx</p>
</div>
<div id="webApps">
<h2>yyyy</h2>
<p>xxxxx</p>
</div>
<div id="resources">
<h2>yyyy</h2>
<p>xxxx</p>
</div>
<div id="footer">
<hr style="text-decoration:dotted" />
<p> xxxx </p>
</div>
</div>
And the CSS:
#contentWrapper {
background: url(fauxcolumn.png) repeat-y left top;
}
#reports {
width: 300px;
float: left;
font-size: 11px;
}
#webApps {
width: 150px;
float:left;
margin: 21px 100px 0px 80px;
}
#resources {
width: 210px;
float: left;
text-align:left;
margin-top: 21px;
}
#footer {
clear:both;
text-align: center;
font-size: smaller;
color: darkgray;
}
Pulled from comment: Are you sure you have the correct link to the image? make sure the fauxcolumn.png is located in the same directory level as your page/stylesheet.
I'm currently learning HTML/CSS and have come across a challenge around text columns. I'm trying to recreate www.campaignmonitor.com as a practice exercise.
Here's the challenge:
I have a text area using a two column layout, featuring 4 paragraphs of text. I'd like to keep the top two paragraphs aligned on the top edge, and the lower two paragraphs also aligned on their top edges. In other words, if either of the top paragraphs increase in height, the lower two paragraphs will both move down together.
I appreciate this may be a basic question for you CSS pro's, but I'm stumpted with this one and online resources, tutorials and other sites have given me no success.
All help is appreciated!
Tom
Here's the code I'm using:
<div class="content">
<div class="row1">
<div class="col1a">
<h4>Create & send beautiful emails</h4>
<p>Design great looking emails using your own tools, or create templates and let your clients send their own.</p>
</div><!-- /end #col1a -->
<div class="col2a">
<h4>Manage lists & subscribers</h4>
<p>We handle signups, unsubscribes and bounces automatically. Easily create targeted segments of subscribers.</p>
</div><!-- /end #col2a -->
</div><!-- /end #row1 -->
<div class="row2">
<div class="col1b">
<h4>Powerful Analytics</h4>
<p>Actionable reports that go beyond opens and clicks. Track your email related conversions and sales.</p>
</div><!-- /end #col1b -->
<div class="col2b">
<h4>Mark-up, Resell and Profit</h4>
<p>White-label and rebrandable, you set the price your clients pay and we’ll send through your profit each month.</p>
</div><!-- /end #col2b -->
</div><!-- /end #row2 -->
</div>
And the CSS:
.content {
width: 1024px;
margin: auto;
position: relative;
margin-top: 20px;
color: #333;
background-color: #666;
}
.col1a {
width: 225px;
margin-right: 20px;
display: block;
float: left;
}
.col2a {
width: 225px;
margin-right: 20px;
display: block;
float: left;
}
.col1b {
width: 225px;
margin-right: 20px;
display: block;
float: left;
}
.col2b {
width: 225px;
margin-right: 20px;
display: block;
float: left;
}
.row1 {
position: relative;
width: 490px;
background-color: orange;
}
.row2 {
position: relative;
width: 490px;
background-color: green;
}
.content h4 {
margin-top: 25px;
margin-bottom: 7px;
line-height: 22px;
font-weight: normal;
font-style: normal;
font-size: 17px;
}
.content p {
font-size: 13px;
line-height: 18px;
}
Add clear: both to the row elements.
Your element naming is quite redundant, col1a, col1b, col2a and col2b do the same thing so they can all be named simply as col. Same goes with row elements, which are borderline useless as well.
http://jsfiddle.net/yTJTp/1/