I have three div elements with writing-mode:vertical-rl. Because the writing mode is set to vertical, the block stacking context should be left to right (as opposed to top to bottom in normal horizontal flow); however, this is not the case.
CSS
.vertical{
width: 150px;
display:block;
writing-mode:vertical-rl;
}
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./styles/writingmode.css">
</head>
<body>
<div class="vertical">
<h2>Heading</h2>
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
<p>These boxes have a width.</p>
</div>
<div class="vertical">
<h2>Heading</h2>
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
<p>These boxes have a width.</p>
</div>
</body>
</html>
Expected behavior is that they would stack on top of each other (in the block direction since writing-mode is vertical) as this:
Actual Behavior (stacking in inline direction)
So I think the confusion has to do with the fact that the writing-mode is only being changed to vertical directly on your div elements. The rest of the document is still set to horizontal by default, which is why the div's parent, the body element, is adding them along the normal flow directions.
You can confirm this is the case by looking in dev tools at the computed value for writing-mode on the body element
vs the div elements
If you make the below changes, you should see the results you're expecting.
CSS
.vertical {
writing-mode: vertical-rl;
}
div {
width: 150px;
display: block;
}
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./styles/writingmode.css">
</head>
<body class="vertical">
<div>
<h2>Heading</h2>
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
<p>These boxes have a width.</p>
</div>
<div>
<h2>Heading</h2>
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
<p>These boxes have a width.</p>
</div>
</body>
</html>
Note: You mentioned stacking context in your question, but as that is only concerned with how elements stack on top of one another along the z-axis, I'm assuming you meant formatting context.
Related
This question already has an answer here:
List of HTML5 elements that can be nested inside P element?
(1 answer)
Closed 3 months ago.
I have a few questions relating to css selectors. Please help. In the following 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>
<style>
selector {
color: blue;
}
</style>
</head>
<body>
<section>
<p id="apple">apple
<div class="orange">orange</div>
</p>
<p class="mango"> mango
<div>banana</div>
</p>
</section>
</body>
</html>
If selector is section, then all section's children inherit the color property. Why is it not the case of when the selector is p?
Selector = section p, targets all p elements inside section. Why doesn't it work when selector = p div?
Selector = section #apple, targets p element with id="apple" as expected.
But Selector = section #apple .orange doesn't work. Thank you in advance!
The <div> tag can NOT be inside the <p> tag, because the paragraph will be broken at the point, where the <div> tag is entered.
To apply styles inside a paragraph use the <span> tag, which is used with inline elements.
p {
color: blue;
}
<!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>
</head>
<body>
<section>
<p id="apple">apple
<span class="orange">orange</span>
</p>
<p class="mango"> mango
<span>banana</span>
</p>
</section>
</body>
</html>
Might be a simple fix but I am wondering why my background-image for my hero section isn't showing?
according to the documentation, applying w-full and h-full with bg-cover will at least show the image. The only solution to this would be to add a position: absolute class to it. I am wondering why that is? The documentation does not say to add an absolute class but that seemed to solve it but I would like to know why (its confusing the heck out of me lol)
<!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="../dist/tailwind.css">
<title>Document</title>
</head>
<body>
<div class=" w-full h-full" style="background-image: url('https://images.unsplash.com/photo-1624542316074-5ce16f7b6d41?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80');">
<div></div>
</div>
You should give the div some height with some content like text or use the tailwind utility h-{something} dont use h-full as it is the same to css height: 100%; if you want it to fill the screen use the utility class h-screen see the snippet below
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="w-full h-screen" style="background-image: url('https://images.unsplash.com/photo-1624542316074-5ce16f7b6d41?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80');">
<div></div>
</div>
Bootstrap (using version v3.3.7) is adding 30px extra left/right padding to my browser padding and so adding a scrollbar when I use a fluid container. Normal bootstrap container is fine.
[edit]If I remove the bootstrap js file, then I do not get the padding issue.
I have read up on this and all the problems seem to step from from older versions where the following was required:
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
But this is exactly what my css says.
I have been able to 'fix' it by removing the same padding left/right that is also added to 'col-xs-12' css. But why, This is all I am doing?
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../../css/bootstrap.css" >
<link rel="stylesheet" href="../../patientApp/css/bootstrap-theme.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
layout test
<div class="container-fluid">
<div class="row">
<DIV class="col-xs-12">
<span title="">TEST</span>
</div>
</div>
</div>
</body>
</html>
If I add multiple columns to add up to 12, the same thing happens.
thanks.
I am really quite a beginner with CSS and have some problems with it. For this problem I really tried to find an answer (and read several pages about margin, padding, box system,...) but I couldn't find a solution.
I am working on a Phonegap app and now I try to make the app a bit better looking. For that I want all the elements to be centred and the grey background should be at the whole page. To achieve that I put it all in a div class which has min-width and min-height set to 100%. Now I would want the elements to have a padding on the left and right side so that they are not completely sticking to the edges of the page. My problem is that only padding-left is applied (if I make the value bigger also the padding on the left side gets larger and moves the elements out of the screen when too large) but padding-right is completely ignored.
My HTML markup:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>Home Automatization</title>
</head>
<body>
<div class="app">
<h1>Relay switch</h1>
<br>
<br>
<br>
<br>
<h2> TextTextTextTextTextTextTextTextText</h2>
<br>
<form>
<label for="relay-switch">Relay:</label>
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1" onchange="changeHandler()">
</form>
<br>
<br>
<button id="logout">Logout</button>
</div>
</body>
The relevant CSS:
.app {
background-color:#E4E4E4;
position:fixed;
min-height:100%;
min-width:100%;
padding-top:60px;
padding-left:5px;
padding-right:5px;
text-align:center;
Thank you very much in advance if anyone can help me.
Be aware that padding does not create a space outside of the element, for that use margin.
I think I've solved your issue using calc(100% - 12px) on your width:
https://jsfiddle.net/bb1yb9w2/
I've been trying to figure this out all day. Been busting my head and still can't figure it out. I'm writing up an HTML email:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=false" />
</head>
<style media="screen" type="text/css">
#headerbar {width:100%;background-color:#7FCBD8;text-align:center;color:#FFFFFF;}
#greeting {width:500px;margin:20px auto;text-align:left;padding:0 0.5em;font-size:1.4em;}
#bodytext {width:500px;margin:0px auto;text-align:left;padding:0 0.5em;font-size:1.2em}
body {margin:0;padding:0;font-family:Helvetica Neue;}
</style>
<style media="screen and (max-device-width:640px)">
#greeting {width:400px;font-size:1.2em;}
</style>
<body>
<center>
<div id="headerbar">
NewsLetter
</div>
<div id="greeting">
Hello <span style="color: #7FCBD8"><b>#{{ user.username }}</b></span>,
</div>
<div id="bodytext">
<p>
We would like to update you with news around the community.
</p>
</div>
</center>
</body>
</html>
Everything seems to be working great on all Desktop browsers. Firefox & Chrome don't have any issues. But on the native Mail app on the iPhone, the content is not 100% full width. There seems to be a blank space on the right hand side! How can I fix this?
It is not blank space on the right hand side, but your calculations are making the boundary extend beyond iPhone screen (320px width). My suggestion would be not to use static measurement values and also to take into consideration your padding and margin values when assigning width.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=false" />
</head>
<style media="screen" type="text/css">
#headerbar {width:100%;background-color:#7FCBD8;text-align:center;color:#FFFFFF;}
#greeting {text-align:left;padding:0px;font-size:1.4em;}
#bodytext {margin:20px;text-align:left;padding:0 0.5em;font-size:1.2em}
body {margin:0;padding:0;font-family:Helvetica Neue;}
</style>
<style media="screen and (max-device-width:640px)">
#greeting {width:100%;font-size:1.2em;}
</style>
<body>
<center>
<div id="headerbar">
NewsLetter
</div>
<div id="greeting">
Hello <span style="color: #7FCBD8"><b>#{{ user.username }}</b></span>,
</div>
<div id="bodytext">
<p>
We would like to update you with news around the community.
</p>
</div>
</center>
</body>
</html>
The values I have changed might effect your design, however it is a good point to start fixing the issue.