How can I make my paragraph not clustering all the text up when there's a line break?
I'd like to still have a line break. But it should be in a more orderly fashion.
I attached an image to show.
<div class='se'>
<p>Aerospace/Defense - Major Diversified</p>
<p>Aerospace/Defense Products & Services</p>
<p>Cement</p>
<p>Diversified Machinery</p>
</div>
.sector3 {
position: absolute;
width: 33%;
height: 100%;
padding-left: 15px;
line-height: 40%;
}
Remove line-height: 40%; that change the height of each line.
To change the space between p use margin:5px 0; for the p of your parent.
If you want to know more about line-height read this.
Working DEMO.
.one {
width: 33%;
height: 100%;
padding-left: 15px;
line-height: 40%;
}
.two {
width: 33%;
height: 100%;
padding-left: 15px;
}
.two p {
margin:5px 0;
}
<h2>
Yours:
</h2>
<div class="one">
<p>Aerospace/Defense - Major Diversified</p>
<p>Aerospace/Defense Products Services</p>
<p>Cement</p>
<p>Diversified Machinery</p>
</div>
<h2>
Without 'line-height: 40%':
</h2>
<div class="two">
<p>Aerospace/Defense - Major Diversified</p>
<p>Aerospace/Defense Products Services</p>
<p>Cement</p>
<p>Diversified Machinery</p>
</div>
You can use a line height in percent of the current font size. Have you defined a font-size of the parent of this element 'sector3' ?
Related
This is the code for my page:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 18px;
}
h1, h2, h3, h4, h5 {
font-family: Helvetica, Arial, sans-serif;
}
header {
display: block;
background-color: #B22222;
color: #FFFFFF;
padding: 30px;
margin: 20px;
}
div.sidebar {
display: table-row;
padding: 30px;
margin-left: 5px;
float:left;
width: 110px;
height: 400px;
background-color: yellow;
}
article {
display: block;
margin: 20px;
}
article.at1 {
background-color: #FFFFFF;
position: relative;
margin-left: 200px;
margin-right: 200px;
top: 10px;
border: 2px solid;
border-radius: 12px;
height: auto;
width: 900px;
}
.flex-container {
display: flex;
}
.flex-container > div {
margin: 10px;
padding: 20px;
font-size: 16px;
align-content: space-around;
margin-top: -10px;
}
.flex-container > div img {
width: 230px;
margin-left: -10px;
margin-top: 20px;
margin-bottom: 6px;
}
.flex-container > div:nth-child(2) {
margin-left: -20px;
}
.flex-container > div:nth-child(3) {
float: right;
display: table;
}
<body>
<header>
<h1>PREMIER CAR SALES</h1>
<h3>Great Western Road, Glasgow</h3>
<h2>Tel: 0141 496 0000</h2>
</header>
<div class="sidebar">
It works
</div>
<article class="at1">
<div class="flex-container">
<div><img src="https://parkers-images.bauersecure.com/Scale/pagefiles/200868/cut-out/900x600/toyota_avensis_saloon.jpg"></div>
<div><h3>2017 67 TOYOTA AVENSIS 1.8 VVT-i BUSINESS EDITION 4dr</h3>
<p>blue, 28,000 miles </p></div>
<div><h3>POA</h3></div>
</div>
</article>
<article class="at1">
<div class="flex-container">
<div><img src="https://i.imgur.com/ZiTeHos.jpg"></div>
<div><h3>2016 66 ELDDIS AUTOQUEST 196 2.0 HDi</h3>
<p>6 berth, 6 belted seats, 7.34m long, 2017 model year but produced in November 2016, white, There’s certainly seating for six – and more! The front settee will take two, with four more in the dinette around a wall-mounted table. Meanwhile, the rear lounge will accommodate another four (at least) and has a free-standing table plus a flip-up surface on the rear wall. There’s a television point and wall-mounting in the rear lounge’s front corner.>
Kitchen facilities include generous worktop space, three-burner gas hob and good-sized sink. Beneath are the separate oven and grill and 80-litre three-way fridge with removable freezer compartment. Four overhead lockers, four lower drawers and a pan store provide excellent storage.</p></div>
<div><h3>£46,950</h3></div>
</div>
</article>
<article class="at1">
<div class="flex-container">
<div><img src="upload/6203342.jpg"></div>
<div><h3>1998 S FORD</h3>
<p>blue</p></div>
<div><h3>POA</h3></div>
</div>
</article>
</body>
</html>
The flex-container works; the main problem is the third tag in this page where the third div in isn't aligning with the other two as it should be; it's a bit too close to 1998 FORD in the example above.
I've tried doing margin-left and margin-right with various values of 20px, 40px etc. but it did not work.
Any help in trying to fix this flex-container part works; the template works quite well, apart from this small part.
I think the problem happens because the width size of the information product was not fixed. You only set the size for image. But information product and price follow width of the content.
Here I try to solve your problem.
First, we need to put specific selector on information product with some class name. Do it the same way for price.
Second, you the style like you do to div img, but this time we will add for next div which is contain the information product and the price.
Third, an easy way copy paste the style properties for img as property for information product and price. Then, give fixed width for information product.
Here is the last two step.
Give 500px or you use some percentage for information product width value.
Give value auto for your price width.
Then, you will solve this problem.
Here is the code I made to solve your problem
Part of the HTML
————————————————
<div class="info">
<h3>1998 S FORD</h3>
<p>blue</p>
</div>
<div class="price">
<h3>POA</h3>
</div>
————————————————
Part of CSS
————————————————
.flex-container > div img {
width: 230px;
margin-left: -10px;
margin-top: 20px;
margin-bottom: 6px;
}
.flex-container > div.info {
width: 500px;
margin-left: -10px;
margin-top: 20px;
margin-bottom: 6px;
}
.flex-container > div.price {
width: auto;
margin-left: -10px;
margin-top: 20px;
margin-bottom: 6px;
}
————————————————
I'm having a tough time keeping my content centered within a certain width on my personal website. I have tried many methods such as setting body to a fix width and my wrapper container to a percentage of that. I have attached a picture of my website here and highlighted where I want my content to be contained in the picture shown
.
I want my content of my website centered within that highlighted area, while at the same time keeping the background to be the full size of the screen.
I realize this may be a simple question for many, but I have spent all day looking for and trying out different methods to do this with no avail.
body {
background-color: #F0f0f0;
text-align: center;
margin-right: 0px;
margin-left: 0px;
}
.wrapper {
text-align: center;
}
.topSection {
height: 300px;
border: solid 5px;
}
.mainAbout {
padding-left: 50px;
padding-right: 50px;
vertical-align: middle;
}
.mainAbout h1 {
font-size: 60px;
font-family: arvo, sans-serif;
margin-bottom: 5px;
}
#leftBrace {
vertical-align: middle;
}
#rightBrace {
vertical-align: middle;
}
.projects {
height: 864px;
border: solid 5px;
margin-top: 2px;
background: #0F1217;
}
.projects h2 {
color: #e6e6e6;
font-family: arvo, sans-serif;
font-size: 50px;
}
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<div class="wrapper">
<!---- Wrapper Starts Here --->
<div class="topSection" style="display:block" ;>
<!---- Name Section Starts Here --->
<div id="leftBrace" style="display: inline-block" ;>
<img src="leftbrace.png">
</div>
<div class="mainAbout" style="display: inline-block" ;>
<!--- Main Name and About me Section ---->
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
<!--- End mainAbout --->
<div id="rightBrace" style="display: inline-block" ;>
<img src="rightbrace.png">
</div>
</div>
<!--- Wrapper Ends Here --->
<div class="projects">
<h2> Projects </h2>
</div>
<div class="contact">
</div>
</div>
<!--- Wrapper Ends Here --->
<footer>
</footer>
Instead of using background you could style curly-braces using pseudo selector :before and :after, thus it works like font styling, you could use transform:translate to center your intro text container, check below codes.
#box {
width: 100%;
height: 300px;
overflow: hidden;
background: #ccc;
}
#box > .cnt {
width:50%;
text-align: center;
top: 50%;
left: 50%;
position: relative;
transform: translate(-50%, -50%);
}
#box:before {
content:"{";
font-size: 250px;
position: absolute;
top: 0;
left:10%;
}
#box:after {
content: "}";
font-size: 250px;
position: absolute;
top: 0;
right:10%;
}
<div id="box">
<div class="cnt">
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
</div>
Apply margin: 0 auto; to your content class. This will work.
You need to make sure add an inner class inside each wrapper and define your desired width. And need to apply margin: 0 auto to the inner. I added demo snippet.If u want specific wrapper full width just remove innerclass that's enough you will get full width. I hope it will help you.
.wrapper {
height: 300px;
width: 100%;
background: orange;
margin-bottom: 20px;
}
.inner {
width: 70%;
margin: 0 auto;
background: pink;
height: 100%;
}
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
Im trying to use margin: auto; at the same time as i'm using the display: inline-block; css. Before i'm putting in the inline-block code it worked fine and the div was centered using margin auto. But now its not working anymore.
I want the Divs logo and contact_info to be inline and the div .inner to be centered.
.inner {
width: 80%;
display: inline-block;
margin: auto;
padding-top: 40px;
padding-bottom: 40px;
}
.logo {
float: left;
}
.contact_info {
float: right;
}
HTML CODE
<div class="inner"> <!-- Top header -->
<div class="logo">
Logga här
</div>
<div class="contact_info">
<h4> Vikbo Bil & Motor AB </h4>
<p> Ekkällavägen 6 </p>
<p> 610 24 Vikbolandet </p>
<p> 0125 500 71 </p>
</div>
</div>
Remove inline-block from .inner class.
display: inline-block;
makes an element well..inline. meaning it only takes as much space as it's width, and allows other inline elements to take the remaining space in the page if they can fit in.
what you want, is to create the .inner div a block element, which, even though there might be extra space after the div has taken the space for it's own width, won't let any other element take up that space. meaning, it'll be the only element in that row.
so you can use margin: auto to make it center.
I see you've used float placement on logo and contact_info meaning they'll not be fitting in the div.inner. you should use display: inline-block on these divs, so they inline and inside the div.inner.
see if this fiddle satisfies all your needs?
Just remove the inline-block property on your "inner" div :
.inner {
width: 80%;
margin: auto;
padding-top: 0;
padding-bottom: 40px;
background: blue;
}
.logo {
float: left;
background: red;
}
.contact_info {
float: right;
background: green;
}
<div class="container">
<div class="logo">logo</div>
<div class="contact_info">contact_info</div>
<div class="inner">inner</div>
</div>
You can do problem solve using this code
.inner{
width:100%
margin:0 auto;
display: block;
height: 100px;
}
.logo{
display:inline-block;
width:auto;
}
.contact_info{
display:inline-block;
width:auto;
}
I have this issue where the second image is slightly smaller then it's counter parts, even though all the attributes (as far as I can tell) are exactly the same?
http://staging-triteamglos.transitiongraphics.co.uk/
Members sections, three circular images, the middle one isa different size?
/*--- Member Benifits
--------------------------------------------*/
.header-white {
text-align: center;
color: #fff;
}
.par-white {
text-align: center;
}
p.upper {
text-transform: uppercase;
font-weight: 800;
}
.mymember1 {
text-align: center;
float: left;
width: 33.3%;
box-sizing: border-box;
padding-right: 15px;
}
.mymember1 img,
.mymember2 img,
.mymember3 img {
border-radius: 50%;
width: 50%;
}
.mymember2 {
text-align: center;
float: left;
width: 33.3%;
box-sizing: border-box;
padding-left: 15px;
padding-right: 15px;
}
.mymember3 {
text-align: center;
float: right;
width: 33.3%;
box-sizing: border-box;
padding-left: 15px;
margin-bottom: 0!important;
}
.member {
margin: 15px auto!important;
}
<h1 class="header-white">Member Benefits</h1>
<p class="par-white">Thinking of joining TTG? Have a look at some of the member benefits below</p>
<div class="mymember1">
<p>
<a href="/membership/">
<img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/member-swimmer.jpg" height="185">
</a>
</p>
<p class="upper">Advice from experienced triathletes</p>
<p class="my_content">Our club benefits from a membership of very experience triathletes who have competed across all variations of the sport and they are more then to share their experiences.</p>
</div>
<div class="mymember2">
<p>
<a href="/membership/">
<img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/member-cyclist.jpg" height="185">
</a>
</p>
<p class="upper">Opportunity to train with others</p>
<p class="my_content">Motivation is key in training, training with others will help you achieve your goals what ever they are.</p>
</div>
<div class="mymember3">
<p>
<a href="/membership/">
<img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/member-runner.jpg" height="185">
</a>
</p>
<p class="upper">Comradeship from a big team</p>
<p class="my_content">We all want to achieve our personally goals, however when your surrounded by friends with the same mindset, the goals soon become secondary.</p>
</div>
<div class="clear"></div>
<div class="container member">
<a class="btn" href="#">FIND OUT MORE</a>
</div>
.mymember1 img, .mymember2 img, .mymember3 img {
border-radius: 50%;
width: 250px;
height: 250px;
max-width: 100%;
}
Actually you were using padding from both sides in mymember2 class. That's why its creating the problem. Also the above code fine and define the width and
height for all the images.
It is because your second image size is 180x180 while the other two were 187x187. they wont have the same size because your using border radius 50% on all of them.
To solve. its either u set a same sizes for the images or fixed ur 2nd image size to 187x187, or the 1st and 3rd img to 180x180 to make them all the same.
The reason why the 2nd image is smaller is because in its parent div, mymember2 was given an extra 15px padding.
I suggest you change all padding css for your .mymember# classes to margins and decrease their width to fit the page.
also, I would suggest putting all common css in 1 class called memember
.mymember {
text-align: center;
float: left;
width: 31%;
box-sizing: border-box;
margin: 0 15px;
}
And for every specific css give it to the corresponding div
In my assignment, I've been having a lot of issues lately with height:x%; it's not accurate when used in some parts of my code, such as this:
My <a> element, a child of <div>, has a child <img>. <a> has padding of %1, and 100 - 2(to make up for the added height from padding) = 98% height of <div>. Since I want the entire picture to be clickable as a link, I nest the <img> in the <a> element with 100% height and width to fit right in. So I'm thinking at this point, I should see a picture of a dog that at least fits in vertically. However I get this:
https://gyazo.com/0b36f8c7efa70d7dc2b6155c821e1b1e
As you can see, the padding is correct, the width is, but the height is not. It extends by twice the padding of <a>. I tried also subtracting twice the padding from the height yet it makes a very small difference. It's still outside.
div#top {
width: 100%;
height: 20vh;
background-color: black;
color: limegreen;
}
a#homeiconlink {
width: 13%;
height: 98%;
padding: 1%;
float: left;
}
img#homeicon {
width: 100%;
height: 100%;
}
h2#title {
width: 85%;
height: 100%;
float: left;
}
h2 {
margin: 0;
font-family: Arial;
font-variant: small-caps;
}
body {
background-color: yellow;
}
div#sidebar {
width: 15%;
height: 60vh;
background-color: green;
float: left;
}
a {
text-decoration: none;
color: inherit;
}
a.sidebar:hover {
background-color: limegreen;
color: white;
}
a.sidebar {
display: block;
background-color: green;
color: limegreen;
padding: 2.5%;
}
div#contentspace {
width: 85%;
height: 60vh;
margin: 0px;
background-color: limegreen;
color: white;
float: left;
}
div#content {
padding: 2.5%;
}
div#footerspace {
width: 100%;
height: 20vh;
}
footer {
padding: 2.5%;
clear: both;
background-color: darkgreen;
color: limegreen;
margin: 0;
text-align: center;
}
div#testedwith {
font-style: italic;
color: lightgray;
text-align: right;
}
<div id="top">
<a href="home.html" id="homeiconlink">
<img src="dog.png" alt="logo" id="homeicon">
</a>
<h2 id="title">
Adopt a dog or cat Foundation
</h2>
</div>
<div id="sidebar">
<a class="sidebar" href="home.html">Home page</a>
<a class="sidebar" href="browse.html">Browse available pets</a>
<a class="sidebar" href="find.html">Find a dog/cat</a>
<a class="sidebar" href="dogcare.html">Dog Care</a>
<a class="sidebar" href="catcare.html">Cat Care</a>
<a class="sidebar" href="giveaway.html">Have a pet to give away</a>
<a class="sidebar" href="contact.html">Contact us</a>
</div>
<div id="contentspace">
<div id="content">
<h2>
Welcome!
</h2>
<br>
<p>
At Adopt a dog or cat foundation (TM), we strive to save as many endangered dogs and cats lives as possible from the animal pound. We invite all who are loving towards animals to adopt and care for a dog or cat of your choice from somebody who can no
longer give them the care they deserve. We strive to maintain a good community, and have a good reputation for that. Any dog or cat you adopt will most certainly be a good companion and are well trained and disease free. Thank you for helping us
shape the world into a more hospitable one!
<br>
<br>-AADOCF
</p>
</div>
</div>
<div id="footerspace">
<footer>
View disclaimer
<div id="testedwith">tested with Google Chrome</div>
</footer>
</div>
In your CSS, add box-sizing: border-box; a#homeiconlink {...}.
By default, when you specify a height, it does not take margins, padding, or borders into account. Specifying border-box changes this so that the height you specify is total height. More info at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model and https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing