I am just learning CSS, ive a project for a car sales website, but im trying to position text within a div, the paragraph code goes in fine, but when i put in the H1 tag, it moves the entire div down? (See below).
https://www.dropbox.com/s/px0zv5xw8vqpvpd/Screenshot%202014-03-12%2001.38.02.png
<div id="bottom">
<h1> Welcome to JJMurray Car Sales </h1>
<p class="hometext">
"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></div>
and the CSS:
#bottom{background-color:#d6d6d6;width:100%;height: 450px;
h1
{
text-align: left;
margin-left: 20px;
margin-right: 20px;
}
p.hometext
{
font-size: 14px;
font-family: calibri;
text-align:left;
width: 600px;
float: left;
margin-left: 20px;
margin-right: 20px;
The heading tag in default occupies some margin.
And that default margin is making it appear with spaces around.
So, first try give h1 tag margin:0; then, you can see how much space it is actually taking in default.
And as it is a block element you can specify maring: top left bottom right;
Related
I've got a fairly simple CSS where I want to display a border slightly off center to the right and bottom, I'm using the pseudo-selector :after to display it.
The problem i'm having is that the border it's displaying is running to the height of the outer div that's dictated by the amount of text displayed, rather than the img itself (which is what I want it to do).
If I put another div inside to wrap around the image it doesn't seem to make a difference, the same if I make the pseudo-selector after the image and convert the image to a block.
Js Fiddle to show all you lovely smart people that might be able to help me!
If I put another div inside to wrap around the image it doesn't seem to make a difference
That’s because that div does not actually wrap around the image taking its dimensions – but is as high as your whole outer container, because that has display: grid
You’d need to wrap .projectimage into an additional div, so that that becomes the grid item that takes full height, and the .projectimage element can then gets is height from the image it contains.
.project {
width: 60%;
display: grid;
grid-template-columns: 1fr 1fr;
margin: 0 auto;
padding: 50px 0;
}
.projectimage {
position: relative;
display: inline-block;
}
.projectimage img {
position: relative;
z-index: 2;
}
.projectcontentleft {
padding-right: 50px;
}
.projectimage img {
width: 100%;
height: auto;
}
.projectimage:after {
content: " ";
position: absolute;
left: 30px;
bottom: -30px;
border: 10px solid rgba(214, 23, 71, 0.07);
display: block;
width: 100%;
height: 100%;
transition: all 300ms linear 0s;
z-index: 1;
}
<div>
<div class="project">
<div class="projectcontentleft">
<h3><strong>Header</strong></h3>
<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>
<h3><strong>Appeals</strong></h3>
<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>
</div>
<div class="projectimage-holder">
<div class="projectimage">
<img src="http://www.bbbhire.co.uk/images/services2.jpg" />
</div>
</div>
</div>
I want to make 2 responsive divs side by side, while keeping them the same height. One of them is an image, and the other div is a text. How would i make sure the image height equal, without using JavaScript. my image dimensions are 1000 × 1799.
body {
font-family: arial;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#text {
width: 50%;
text-align: left;
}
#image img {
width: 50%;
}
.box {
display: flex;
flex-direction: row;
}
<div class="container">
<div class="box">
<div id="text">
<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>
</div>
<div id="image">
<img src="lfc.png">
</div>
</div>
</div>
whats happening is that if the try to make the height a percentage then it will obviously change to fit current screen settings but i want to make it responsive and same height.
thanks in advance!
Your two columns actually are the same height already; you've just not allowed your image to expand to fill the height of the container. To allow this, simply set width: 100% and height: 100% on #image img. Be warned that in doing so you'll skew the image aspect ratio. If you want to maintain the ratio, you'll need to specify width: auto instead, though this will chop off parts of the image when there isn't room to display it all.
Note that you'll also want a width of 50% on #image, so that both the text container and image container take up half of the width.
Also note that due to the nature of text taking up a different number of lines at different widths, it will always be a different height to the image. However, the container will always be the same height. I've added a background to the container to demonstrate this.
This can be seen in the following.
body {
font-family: arial;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#text {
width: 50%;
text-align: left;
background: cyan;
}
#image {
width: 50%;
}
#image img {
width: 100%;
height: 100%;
}
.box {
display: flex;
flex-direction: row;
}
<body>
<div class="container">
<div class="box">
<div id="text">
<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>
</div>
<div id="image">
<img src="http://placehold.it/100">
</div>
</div>
</div>
</body>
You can use flexbox:
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
<div class="row">
<div class="col">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 class="col"><img src="lfc.png"></div>
</div>
Hi I am trying to format my web paragraphs so that the text is justified and the last line is centered. I found the CSS property "text-align-last" which allows me to specify the alignment for the last line.
The problem is that this property is not supported by Chrome and Safari (yet...?).
Anyone have an alternative or a trick to do that?
The W3C manual: http://www.w3schools.com/cssref/css3_pr_text-align-last.asp
Thanks
I don't think it's possible in CSS alone.
Here's a JavaScript solution, in which a clone lies behind the element. The element has text-align: justify and the clone has text-align: center.
The code then reduces the height of the original element so that only the clone's last line displays.
var p= document.getElementById('lorem'),
clone= document.createElement('p');
clone.textContent= p.textContent;
clone.className= 'clone';
p.parentNode.insertBefore(clone, p);
p.style.height= p.offsetHeight - 14 + 'px';
#lorem, .clone {
position: absolute;
line-height: 14px;
font: 14px arial;
width: 500px;
}
#lorem {
text-align: justify;
overflow: hidden;
background: white;
}
.clone {
text-align: center;
}
<p id="lorem">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>
I'm trying to create a row that spans the width of my device that the user can tap to take then to a specified link.
I've created an image that is the 'disclosure indicator' (chevron) found on table rows in iOS. I just can't figure out how I can set my multi-line text to the left of the chevron, and keep the chevron to the right of the text and centered. (see image).
Any ideas?
Thanks
You can use transform to vertically align the chevron.
Fiddle
div {
position: relative;
border: 1px solid black;
padding: 10px 40px 10px 10px;
}
div:after {
content: '›';
font-size: 40px;
color: #444;
right: 20px;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
<div>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>
Ignore whether or not this actually looks good.
I'm looking for the best way to align the top of text with an adjacent block element with a background or image in it. With the test-case snippet below, what I'm trying to [elegantly] get rid of is the red gap:
.col {
width: 40%;
min-height: 300px;
float: left;
margin-right: 4%;
}
.bg {
background: #333;
}
p,h1 {
margin: 0;
}
<div class="col bg"></div>
<div class="col">
<h1>Title</h1>
<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>
</div>
This is essentially coming from the line-height. Setting line-height to 1 solves the problem but then borks any multi-line text which I need to support. Even applying the line-height change just to the :first-line results in bad spacing on multi-line text. Right now, the best I can think of is trying to come up with some magic-number negative em margin-top value to apply to headings, paragraphs, etc., but I'm wondering if there's a better way.
The h1 itself is aligned to the simbling element, but the text inside it is not.
To verticaly align the text into a h1 tag you need to set the line height.
.col {
width: 40%;
min-height: 300px;
float: left;
margin-right: 4%;
}
.bg {
background: #333;
}
p,h1 {
margin: 0;
}
.col h1 {
line-height: 21px;
}
.col h1 span {
vertical-align:super;
}
div{
padding:0;
}
<div class="col bg"></div>
<div class="col">
<h1><span>Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title </span></h1>
<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>
</div>
EDIT:
to use it in a multi-line: put your text into a span with a vertical-align:super; The line-height property on h1 will control the space between lines.
The other answer provided right now does work but I really wanted to avoid the extra markup required to make it work. Unfortunately that led me to a magic number solution. I'm not sure there's a good solution right now that's pure-CSS. I played with the :first-line pseudo selector but to ill effect.
What I ended up with was just using a negative margin-top on the <h1> element. I think the value of of the margin more or less works out to:
-(({line-height} - 1 ) / 2)em
That assumes you're using unitless line-height values.