This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 6 years ago.
I have a paragraph inside a container. The container is inside a div which has a max-width of 900px. At the moment,when I open the browser,I see that max-width works but the content is shifted to the left and there is a space on the right due to the max-width.
Here my html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<style>
.wrap{
max-width:900px;
}
</style>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrap" style="text-align:justify">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi soluta rerum aliquid voluptates, enim reiciendis. Laboriosam, voluptas itaque quis soluta dignissimos, blanditiis, nemo esse deserunt, cumque perferendis nesciunt voluptates magnam.</p>
</div>
<img src="Post1.jpg" alt="">
</div>
</body>
</html>
How can I put the container in the center?
Also, is there a way that I can keep the image inside the container but make the width full bleed?
Try this:
.wrap{
width:900px;
margin: 0px auto;
max-width:900px;
}
The container will be centered. And the image will be larger than the parent.
Related
I have an 2 HTMLs 1st with viewport tag which is in comments 2nd is without it: `
<html>
<head>
<meta charset="utf-8" />
<title>Civil War History</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> it is in the first -->
<link href="cssfile.css" rel="stylesheet" />
</head>
<body>
<div> Large Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Asperiores
at deleniti exercitationem expedita laboriosam
laborum laudantium tempora ullam.
Delectus deserunt ducimus error esse
incidunt minus necessitatibus nihil,
obcaecati quaerat recusandae?
</div>
</body>
</html>`
cssfile for that htmls are same (no changes):
div {
font-size :16px;
}
When i checked it in Iphone X 's viewport both of them weird behaviour. First with viewport tag has 375px dimensions with 16px font size have more words than Second one without viewport tag which has an 980 px wide and 16 px for font size . How come ?
Is not it The bigger the space the more the words ? Please explain what is happening . Thanks in advance)
Browsers use text inflation algorithm which causes this effect . This algorithm by default enlarges text font size when it is too small and in touchable anchors in some small width devices.
To prevent this use: -webkit-text-size-adjustment: 100%;.
I use the cursor style in .css file in style and using inline style, but it doesn't work.
This is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./../css/index.css"> -->
</head>
<body style="cursor: url('./../images/AppStarting.ani');">
<!-- 一个术语的解释: -->
<div>
<dl>
<dt>luoyang</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro harum facilis placeat quis, assumenda autem ad adipisci quasi dicta sint eaque veritatis omnis incidunt sequi non doloribus vero, maxime consequuntur.</dd>
</dl>
</div>
</body>
</html>
I found the .ani on another cursor website. Actually, I use lots of pics, but it still doesn't work and the inspector said:
I don't know what's wrong.
Animated images like .ani, .cur file formats are not supported anymore MDN.
I found that the following points are must be met when you link your image.
Image should be in the same folder as your .html file
Image should be less than or equal 32x32 pixels
You must enclosed your CSS in <style></style> tags or use separate CSS style file
You must have any content within your tag if not the CSS will not trigger.
URL(...) must be followed by one of the fallback keywords defined in the CSS specification, such as auto or pointer
I tried .png, .jpg files it is working by following those points. Your CSS looks fine therefor I assume your images are larger than 32x32 pixel. Reduce the image pixel to 32x32 and check. Hope its helps you.
LIMITATIONS
In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.
(Due to a bug in Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 on Windows limits to 32×32px. This is fixed in later versions.)
UPDATE
Working code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<title>Test</title>
<style>
body {
background-color: powderblue;
cursor: url(cursor.png), auto;
}
</style>
</head>
<body>
<div>
<dl>
<dt>luoyang</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro harum facilis placeat quis, assumenda autem ad
adipisci quasi dicta sint eaque veritatis omnis incidunt sequi non doloribus vero, maxime consequuntur.</dd>
</dl>
</div>
</body>
</html>
.feature {
position:relative;
left:50%;
}
<p class="feature">This is super cool feature..</p>
The above code causes the following: text gets centered, but the scrollbar appears horizontally. This makes me think that the width of feature paragraph still stays the same and that's why it goes beyond the viewport.
If I change the position to absolute, it doesn't go beyond the viewport anymore.
Why does this happen ? If we say that absolute positioning means that it's not part of the flow anymore, this answer wouldn't be enough. It mightn't be part , but still, width is the same, so it should be going beyond the viewport too as it happens for relative.
I think your problem might be resolved, if you add border to the ".feature" element. in the below you could see that when we set "position:absolute" to ".feature" tag, the width of it reduces to its content:
.feature {
position:absolute;
left:50%;
border: 3px solid #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>positions</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="feature">This is super cool feature..</p>
</body>
</html>
but you may say that if we have a longer text inside the ".feature" tag, it also does not go beyond the viewport. like this:
.feature {
position:absolute;
left:50%;
border: 3px solid #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>positions</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="feature">This is super cool feature.. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, perspiciatis aliquam deleniti atque sunt labore modi aperiam accusantium et, tempore quibusdam, nemo dolores necessitatibus nobis rerum accusamus illum asperiores quam nesciunt tenetur velit ipsa vel mollitia at assumenda? Recusandae et, molestiae totam officiis labore ab temporibus fugit odit corporis cum.</p>
</body>
</html>
in response to that I think the tag with the "position:absolut" is limited to the boundaries of its nearest parent with non-static position. so if we add a ".parent" to the html file you could understand that the ".feature" tag is always limited to it. and if the ".parent" goes beyond the view the ".feature" also goes beyond the view.
.feature {
position:absolute;
left:50%;
border: 3px solid #000;
}
.parent {
position: relative;
left: 50%;
border: 2px solid #f21;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>positions</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<p class="feature">This is super cool feature.. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, perspiciatis aliquam deleniti atque sunt labore modi aperiam accusantium et, tempore quibusdam, nemo dolores necessitatibus nobis rerum accusamus illum asperiores quam nesciunt tenetur velit ipsa vel mollitia at assumenda? Recusandae et, molestiae totam officiis labore ab temporibus fugit odit corporis cum.</p>
</div>
</body>
</html>
“Absolute positioning” is just like relative positioning, but the offset is relative to the entire browser window instead of the original position of the element. Since there’s no longer any relationship with the static flow of the page, please look at normal flow
Normally, block-level elements per default take up the full available width of their container element. However, when you set position: fixed or absolute the element isn't displayed in the same sense as with the rest of the elements.
according to MDN:
A block-level element occupies the entire space of its parent element (container), thereby creating a "block."
As such, the meaning of the container for a block-level element makes alters when refering to absolute or fixed positioned elements. It makes more sense to rather call it the parent.
Since there is no container element to inherit its width, you're seeing it behave more like an inline-block-type element if you inspect it you will see my explanation coming into hand.
EDIT:
if you want to see how absolutely positioned element's width is calculated
Look at W3C
paragraph default is display:block and take 100% width. Change to position absolute or change width of this .feature
The parent of .feature has a set position in css?
I have written style for my div element and div element at body section. When the code runs I see two div element at screen. Even when the body section is empty, the div seems at screen. I write on Visual Code. Please help me..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 400px;
height: 400px;
border: 1px solid black;
text-align: center;
}
p {
letter-spacing: 1px;
}
span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<h1>article 1</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi sit, omnis voluptatibus quasi exercitationem cupiditate reprehenderit quidem distinctio. Omnis <span>temporibus</span> necessitatibus illo deleniti quia reprehenderit aspernatur molestias
rerum veniam quam!
</p>
</div>
</body>
</html>
It might be a cache related issue. Press "ctrl + shift + i", right click on the reload icon at the top left corner and select "Empty cache and hard reload". This MIGHT solve the issue.
Can you suggest how to do the following layout without CSS grid, in Bootstrap or IE compatible CSS grid.
In large screen
head, body on left stacking and image on right covering height of head and body.
[— layout in large screen]
In small screen
Head, image and body stacking, full width; image in middle.
[— layout in small screen]
Do you mean you need bootstrap grid which is compatible with IE browser?
If yes, than try to refer an example below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.div
{
height:100px;
}
.div2
{
height:200px;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Grid</h1>
<p>In large screen : head, body on left stacking and image on right covering height of head and body.</p>
<p>In small screen : Head, image and body stacking, full width; image in middle.</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-lg-6 col-sm-12 div" style="background-color:orange;">
Heading-<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="col-lg-6 col-sm-12 div2 pull-right" style="background-color:green;">
Image-<br> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
</div>
<div class="row">
<div class="col-lg-6 col-sm-12 div" style="background-color:yellow;">
Body-<br> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
</div>
</div>
</div>
</div>
</body>
</html>
Try to run the code in browser instead of code snippet to get the actual result.
Output in large screen:
Output in small screen:
Further, you can modify the code as per your own requirement.
If we misunderstood anything from your above description than let us know about that. We will try to correct our self and try to provide further suggestions.