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;
}
————————————————
Related
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' ?
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
I've been having an enormous amount of trouble for what I thought would be easy, but it's turning out to be much more difficult than I had anticipated.
I have an image alt="home" that I want to center in my footer, with text underneath it, but margin-left and margin-right: auto don't work, margin: 0 auto doesn't work either. Are there other options to center something?
And for the address, it's being pushed down because the width of the copyright and "home" img have a width the size of the footer. When I try to apply a width percentage to the div containing the home img and the copyright text, it disappears for some reason?
This is the result I want to achieve: http://i.imgur.com/khjrZow.jpg
jsfiddle (with complete html and css): http://jsfiddle.net/A2H3n/
If anyone knows what's going on, and can let me know, that would make me so happy... but really, I've spent 4 hours trying to fix this(I've just started learning CSS). Any help would be appreciated!
Relevant HTML:
<footer>
<div id="sociallinks">
<img class="sociallogo" src="images/facebooklogo.jpg" alt="Facebook">
<img class="sociallogo" src="images/Twitterlogo.jpg" alt="Twitter">
</div>
<div id="logoandtext">
<img id="footerlogo" src="images/blackbeltinverse.png" alt="home">
<p>© Hsien-Jin Martial Arts Studio<p>
</div>
<div id="contactinfo">
<p>7548 Mahogany Rd</p>
<p>Los Angeles, CA 97789</p>
<p>(444) 123-4567 </p>
</div>
</footer>
Relevant CSS:
footer{
overflow: hidden;
display: block;
margin: 0 auto;
color: #FFFFFF;
}
#sociallinks{
float: left;
margin: 0;
display: block;
width: 20%;
height: 100%;
}
.sociallogo{
width: 3em;
height: 3em;
}
#footerlogo {
width: 4em;
height: 4em;
margin: 0 auto;
}
#contactinfo {
line-height: 1.25em;
text-align: right;
}
display:inline-block; may be the answer:
footer{
text-align:center;
}
#sociallinks, #logoandtext, #contactinfo{
display:inline-block;
}
#contactinfo{
float:right;
}
Fiddle : http://jsfiddle.net/bonatoc/PLbae/1/
CSS overwrites are at the very bottom.
You can do it like this
Move the #contactinfo div above the #logoandtext
HTML
<div id="sociallinks">/*Some thing here*/</div>
<div id="contactinfo">/*Some thing here*/</div>
<div id="logoandtext">/*Some thing here*/</div>
CSS
#logoandtext {
margin: 0 140px;
text-align: center;
}
#contactinfo {
float: right
}
Below are screeshots of what I have got at the moment and what I want to achieve. The second image I have been able to do by increasing the height with pixels manually just for illustration purposes, but I would like this to be achieved automatically from the size of the content within the container...
Image1:
Image2:
HTML:
<div id="top-body" style="clear:both">
<div id="info">
<p>Dixon Woods School of Dance was established 25 years ago in Newbold Verdon. Although lessons still take place in Newbold Verdon the main activities of the school now take place in their purpose built studios in Oadby.
All lessons are given under the personal supervision of the principal Michelle Dixon-Woods. The school is recognised as having exceptionally high standards, which is reflected in examination and festival results achieved by the pupils.</p>
</div>
</div>
<div id="footer1">
<div id="footer-image">
</div>
</div>
CSS:
top-body {
margin: 0 auto;
background-color: #ffffff;
height: auto;
overflow: hidden;
position: absolute;
top: 197px;
width: 960px;
padding-top: 7px;
}
info {
width: 327px;
float: right;
margin-right: 39px;
margin-top: 14px;
}
#info p {
font-size: 15px;
font-family: "myriad pro";
line-height: 15px;
text-align: justify;
}
#footer1 {
width: 960px;
height: 23px;
}
#footer-image {
width: 100%;
background-image: url('../images/footer-border1.png');
height: 23px;
}
try to put div
#info
{
clip:auto;
}
I know tables suck and all, but a quick and dirty way is to replace the top-divs with table cells with 100% height, like so:
<table height="100%">
<tr><td height="100%" id="top-body">
<div id="info">
<p>...</p>
</div>
</td></tr>
<tr><td id="footer1">
<div id="footer-image">
</div>
</td></tr></table>
Remember to also set the height of the body element to 100%
In CSS3 you can calculate the height to 100% minus something.
See CSS How to set div height 100% minus nPx