Sorry if everyone has already seen this over and over, I'm sure I've done it before but can't remember or find how!
I've got a parent div tag containing a series of span tags to position a series of elements in line with each other - to clarify, the 'in line' is critical and this is just a single row, multiple sequential rows are a requirement. Using position:relative or block level elements forces it onto a new line, which isn't any use. For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Positioning testing</title>
</head>
<body>
<div style="position: relative; padding-top: 2px; padding-bottom: 2px;
background-color: Fuchsia;">
Hello world
<span style="position:relative; left: 80px;">
<input type="text" id="Test"/>
</span>
<span style="position: absolute; top: 2px; left: 350px; width:250px;
background-color:Lime;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus. </span>
</div>
</body>
</html>
I promise those colours are just for testing to make things show up (and ditto the inline styling I promise) :-)
Unfortunately, the fuschia box won't size to fit around the lime. Ugly with one line, a major problem when you need two of these in sequence.
I've tried setting overflow on the parent div, which just hides all but the first line of the span. I've tried setting elements to clear in all sorts of places but none had any visible effect.
Could anyone tell me what I'm missing please? Thanks.
How about this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Positioning testing</title>
<style type="text/css" media="screen">
#container {
position: relative;
padding-top: 2px;
padding-bottom: 2px;
background-color: Fuchsia;
float:left;
width: 100%;
}
#container > span {
float:left;
}
#greenbox {
width: 250px;
background-color:Lime;
}
</style>
</head>
<body>
<div id="container">
<span id="helloworld">Hello world</span>
<span id="inputbox">
<input type="text" id="Test"/>
</span>
<span id="greenbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus. </span>
</div>
</body>
</html>
Try:
<div style="overflow: hidden; background-color: Fuchsia;">
<div style="float: left; margin-left: 10px;">Hello world,/div>
<div style="float: left; margin-left: 10px;">
<input type="text" id="Test"/>
</div>
<div style="float: left; width:250px; background-color:Lime;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus.
</div>
</div>
Change the margins and widths as necessary
Because the lime box is position: absolute, it is completely ignored when performing the layout. Therefore, the fuchsia box is sized as though the lime box didn't exist.
You need to change the fuchsia box to position: relative to make included in the layout logic, and add display: block to force its width. (Although it would be better to change it to a <div>, which already is display: block)
your "Lime" SPAN is absolutely positioned, so it is taken out of the page flow.
Try using float: left; instead.
Try changing the SPAN to display as a block element and position it relative to the container. It's the absolute positioning of the span that causes it to be removed from the rendering order and keeps the container from resizing around it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Positioning testing</title>
</head>
<body>
<div style="position: relative; padding-top: 2px; padding-bottom: 2px;
background-color: Fuchsia;">
Hello world
<span style="position:relative; left: 80px;">
<input type="text" id="Test"/>
</span>
<span style="margin-top: 2px; margin-left: 350px; width:250px;
background-color:Lime; display: block;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus. </span>
</div>
</body>
</html>
Oh, and by the way, I hope you're going to do this with stylesheets and classes once you get it nailed down. Also, you may need to give it a negative top margin to move it up relative to the top of the container.
I think you need is the fuchsia div to be "display: inline" to wrap around the inner content. ¿isn't that?
Related
This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 16 days ago.
I am trying to make a listing website. I am using the Jekyll Moonwalk theme as a base and heavily adapting it to my needs.
This is my first website project, so I am figuring it out as I go. Right now, I am trying to make my HTML button elements "pin" to the bottom of their container, instead of being at the bottom of the text, so they all are in line. Right now it looks like this:
Image
The red line is roughly where I want the bottom of all the buttons to me.
I have tried ChatGPT's suggestion, but it didn't work.
<div style="position: relative;">
<button style="position: absolute; bottom: 0;">Click Me</button>
</div>
You can use display flex for the boxes to arrange them like this, justify the content using space-between will always keep the buttons at the end.
here box is your card
.box{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 280px;
height: 320px;
border: 1px solid #000000;
}
<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor egestas sem.
</p>
</div>
<div class"bottom">
<!--button-->
<button> Tell me more</button>
</div>
</div>
style parent div of button position:relative
syle button position: absolute; bottom:0
.container{
display:flex;
}
.box{
position:relative;
outline: 1px solid black;
height: 300px;
margin:5px;
padding:5px;
display:flex;
flex-direction: column;
align-items: center;
}
button{
position:absolute;
bottom: 10px
}
<div class="container">
<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis
libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor
egestas sem.
</p>
</div>
<div class"bottom">
<!--button-->
<button> Tell me more</button>
</div>
</div>
<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis
libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor
egestas sem.
</p>
</div>
<!--button-->
<button> Tell me more</button>
</div>
</div>
I have set a fixed font-size for the "p" and "h4" elements in my footer but I keep experiencing different font-size while using desktop mode on my mobile. I get the expected result while using firefox, and safari but a weird result while using chrome.
Here is the reference website, link to the website.
Attached below are images to visually illustrate the issue.
Here's the HTML
<div class="container-item details">
<h2>travelaja</h2>
<p class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisisleo, vel.
</p>
</div>
<div class="container-item contact">
<h3>Contact</h3>
<h4>Address: Jl.Codelaras No.205A Kediri, Pare AG17</h4>
...
</div>
and this is the CSS I use to style it.
footer .container .container-item p.content {
font-size: 1.6rem;
}
footer .container .contact h4 {
margin-bottom: 15px;
font-weight: 400;
font-size: 1.6rem;
}
I reduced the fonts to 1.0rem but it was not looking good on safari and then it was quite normal in chrome.
I also ensured that I have this meta tag,
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I am trying to make the text appear below the image but it is not budging at all. My goal is it make the text appear below the image in the container
.left-col p {
text-align: justify;
width: 300px;
}
.left-col img {
margin: 0 auto;
left: 5%;
width: 300px;
height: 130px;
position: absolute;
text-align: center;
}
</head>
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium
</p>
Instead of using position absolute, remove it. Reason is that the element is positioned relative to its first positioned (not static) ancestor element. So, you could of course mess with top, right and left values to make it work but it would not be responsive at all.
Read more about it here: MDN Position CSS
The default value of position is static, this way the elements renders in a specific order(its what you want, render img and p after).
This is the pen if you need:
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="https://via.placeholder.com/200x150" width="200" height="150" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</div>
</div>
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
width:300px;
height: 130px;
}
Also, instead of setting width 300px to paragraph and img, you could set only one time to your .left-col div. I have also removed other properties that you were not using.
another note is that you forgot the " on height attribute.
In css there is use [ position absolute ] For the image and is not used in the text You must set the position in the image and the text or leave it to the default setting I deleted it from the image properties in css
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
margin: 0 auto;
left: 5%;
width:300px;
height: 130px;
text-align:center;
}
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</body>
Remove the line 'position: absolute;' from CSS. Complete (close) the DIV and P tags. You may introduce '.container{...}' where you may position (or whatever) the image-and-text together. You may wish to use 'margin: 0;' to glue the text to the image. Good luck!
I'm creating email template with variables in it. The variables will be replaced at run-time with one of two different sets of values as show below. The first set has an extra paragraph in the middle with a link embedded in it. The problem I'm having is getting the second and third paragraphs to have the correct spacing when they are combined. Is there some way to create a bottom margin from p3 to create that space between the second and third paragraphs?
Here is the template I am using.
Template
<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
background-color: #f5f5f5;
}
.body-div{
width: 560px;
background-color: #ffffff;
padding: 10px 20px;
margin: 0 auto;
}
.below-spacing, .p3{
padding-bottom: 20px;
}
.above-spacing{
padding-top: 10px;
}
.p1:empty, .p2:empty, .p3:empty{
display:none;
}
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">{{FirstParagraph}}</div>
<div><span class= "p1">{{MidParagraphPart1}}</span><span class="p2">{{MidParagraphPart2}}</span><span class="p3">{{MidParagraphPart3}}</span></div>
<div>{{LastParagraph}}</div>
</div>
</body>
</html>
Example 1
In this example I've inserted values into all the variables showing all three paragraphs and the link with text in it. Notice how paragraphs two and three do not space correctly in a browser. The CSS is the same as above.
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">Section of text #1 Lorem ipsum dolor sit amet, dolor porta wisi, sed et dui lacinia facilisi tincidunt hendrerit, risus sodales ipsum semper nulla sit, sed cursus sapiente, aliquam tincidunt sed leo arcu in.</div>
<div><span class= "p1">Section of Text #2, Part #1. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </span><span class="p2">(Part #2) Link text</span><span class="p3"> Part #3 Lorem ipsum dolor sit amet, et eget. Lorem ipsum dolor sit amet, et eget.</span></div>
<div>Section of text #3 Lorem ipsum dolor sit amett, at consectetuer id sollicitudin amet posuere. </div>
</div>
</body>
</html>
Example 2
In this example I've replaced only the first and last variables with text. The middle paragraph is hidden and both paragraphs are spaced correctly. The CSS is the same as above.
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">Section of text #1 Lorem ipsum dolor sit amet, dolor porta wisi, sed et dui lacinia facilisi tincidunt hendrerit, risus sodales ipsum semper nulla sit, sed cursus sapiente, aliquam tincidunt sed leo arcu in.</div>
<div><span class= "p1"></span><span class="p2"></span><span class="p3"></span></div>
<div>Section of text #3 Lorem ipsum dolor sit amett, at consectetuer id sollicitudin amet posuere. </div>
</div>
</body>
</html>
Try this:
Add this to the end of your css.
.hidden{
display: none;
}
Then add the injectable variable Hidden to any element you want to hide on demand.
<div class="below-spacing {{Hidden}}"><span>{{Paragraph2}}</span><span>{{Paragraph3}}</span><span>{{Paragraph4}}</span></div>
Inject "hidden" (no double quotes) for the variable {{Hidden}}. That will hide the paragraph with the correct spacing.
You can remove the p1, p2, and p3 classes.
The span is inline tag. We can not set margin for it. You should set span to display: inline-block.
.p1,
.p2,
.p3 {
display: inline-block;
}
To hide second span you should add class empty for it:
<span class="p2 empty></span>
CSS:
.p1.empty,
.p2.empty,
.p3.empty {
display: none;
}
I saw some error in your HTML code.
your first span is missing " before the class name.
Your second span doesn't have a class. Maybe add p2 like you want.
I'm not sure to understand the whole question here, but why did you put a
display: none;
to your span?
Try
display: inline-block;
Another solution could be to remove span and add
<p>
instead and add that in your css
p{
margin-bottom:20px; //can add a class p3 to your p.
}
This is a problem with the website as a whole, not just one div or section.
To make my website responsive, I am using media queries. To help me with responsive styling, I am using Grids.css. I set a media query as follows:
#media only screen and (max-width: 850px) {
.section-web-projects {
height: 290vh;
}
.skills div.col {
width: 100%;
}
.skills-div {
width: 100%;
height: auto;
padding-bottom: -20px;
text-align:center;
margin-right: 50px;
margin-left: - 50px;
font-size: 100%;
}
}
This corresponds to the following in html :
<div class="row">
<h2 class="section-header"></h2>
</div>
<div class="row">
<h2 class="hireme-web"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </h2>
<div class="skills">
<div class="col span-1-of-4">
<div class="skills-div">
<h3> <i class="ion-iphone skills-div-icon"></i> <i class="ion-ios-monitor-outline skills-div-icon"></i> <i class="ion-ipad skills-div-icon"></i> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et diam volutpat, eleifend ex vel, rutrum nisl. Morbi gravida, libero a imperdiet vehicula, ante erat pretium metus, in scelerisque velit elit tincidunt eros <br> <br> </h3>
</div>
</div>
<div class="col span-1-of-4">
<div class="skills-div">
<h3> <i class="ion-ios-locked-outline skills-div-icon"></i> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et diam volutpat, eleifend ex vel, rutrum nisl. Morbi gravida, libero a imperdiet vehicula, ante erat pretium metus, in scelerisque velit elit tincidunt eros <br> <br> </h3>
</div>
</div>
</div> <!-- end of skills -->
</div> <!-- end of row -->
</section>
And this is the corresponding styling without any media queries:
* {
box-sizing:border-box;
}
.row {
max-width: 80%;
margin: 0 auto;
}
.skills {
width: 100%;
float: left;
background-color: antiquewhite;
}
.skills-div {
padding: 10px;
background-color: #1abc9c;
opacity: 0.8;
text-align:left;
margin-bottom: 30px;
border-radius: 50px;
width: 200px;
height: auto;
margin-top: 10px;
margin-left: 10px;
margin-right: 5px;
font-size: 90%;
}
Here is what it looks like on Google Nexus 4 at 384 px:
Here is what it looks like on chrome window at 400px . This is the effect I want and have encoded into the media query; but its not working.
You have not posted your full source code.
But I 'll bet you've forgotten the viewport meta tag
Just put this inside your html <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
For more infos check this site:
http://www.w3schools.com/css/css_rwd_viewport.asp
Try removing "only" from your media query. Also make sure you've added the viewport meta tag to the head of your webpage <meta name="viewport" content="width=device-width, initial-scale=1">