I'm working on a pretty simple website right now that will serve as a sort of dictionary for some of my HTML and CSS work. I have a div for CSS terms on the page. When I shrink the browser, everything else on the page shrinks but this div moves to the far right and becomes less wide. The height stays the same but the width of the div becomes thin. The words in the div flow out and this causes there to be a scrollbar.
At the moment, my HTML looks like this:
.terms {
list-style-position: inside;
background-color: powderblue;
box-shadow: 10px 10px 15px dimgray;
padding: 20px;
margin-left: 370px;
margin-right: 370px;
}
<div class="terms">
<h2> CSS PROPERTIES: </h2>
<ul>
<li> <span class="def"> text-align </span> - left, center, right </li>
</ul>
</div>
The other elements on my page are paragraphs and they all resize. I have 2 other divs on the page for side comments but those resize with the browser too. In case it helps, this is the CSS for the div that actually resizes correctly:
.notes{
text-align: center;
padding: 20px;
font-weight: bold;
border: 10px dotted navy;
display: inline-block;
}
Does anyone have any idea why this particular div might not resize with the browser?
Issue is you have added following styles in your div:
.terms {
list-style-position: inside;
background-color: powderblue;
box-shadow: 10px 10px 15px dimgray;
padding: 20px;
/*Removing the margins from left and right
margin-left: 370px;
margin-right: 370px;*/
}
Removing theses styles will solve your problem
You can also try with max-width
.terms {
list-style-position: inside;
background-color: powderblue;
box-shadow: 10px 10px 15px dimgrey;
padding: 20px;
max-width: 1160px;
margin: 0 auto;
}
.notes {
text-align: center;
padding: 20px;
font-weight: bold;
border: 10px dotted navy;
display: inline-block;
}
<div class="terms">
<h2> CSS PROPERTIES: </h2>
<ul>
<li> <span class="def"> text-align </span> - left, center, right </li>
</ul>
</div>
Try using % or vh instead of px in your css.
A div with auto resize when changing window width\height
May not exactly match your issue but I think it is relevant to yours.I hope this helps.
You can see remove margin left and right ,and add ul tags.
Related
I have a navgiation menu with a logotype, a correpsonding name, a vertical border as a separator, as well as the actual navigation links. While the logotype and correpsonding name seem to be properly aligned, the vertical border and the navigation links are not. Instead, they are off by 5 or so pixels (i checked in Photoshop).
My question is: How do I make sure that all the navigation elements are aligned properly, meaning that they are vertically centered within the navigation bar?
body {
margin: 0;
}
/* Limit container width to 1200px */
.container {
max-width: 1200px;
margin: 0 auto;
}
nav {
background-color: #414b55;
}
.navigation {
overflow: hidden;
}
.logotype img {
margin: 10px 10px 10px 15px;
}
.logotype p {
display: inline;
vertical-align: middle;
font-weight: 700;
font-size: 24px;
}
.divider {
display: inline;
border-left: 1px solid #ffffff;
margin-left: 30px;
margin-right: 20px;
}
.navigation a {
display: inline;
color: #ffffff;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.item {
padding: 15px 15px;
font-size: 18px;
font-weight: 700;
}
.navigation .icon {
display: none;
}
<body>
<nav>
<div class="container">
<div class="navigation" id="script-target">
<a href="index.html" class="logotype">
<img src="img/logotype.svg" alt="logotype" height="40px" style="vertical-align: middle">
<p>Exception</p>
</a>
<div class="divider"></div>
Select
Select
Select
Select
<img src="img/icon.svg" alt="menu" height="26px">
</div>
</div>
</nav>
</body>
Update:
I changed the display properties and now all the navigation elements align properly. https://jsfiddle.net/MihkelPajunen/4zjbgLLk/4/
You can fix this by adding some padding to the bottom of the divider class:
https://jsfiddle.net/nb4o9p84/
.divider {
display: inline;
border-left: 1px solid #ffffff;
margin-left: 30px;
margin-right: 20px;
padding-bottom: 5px;
}
EDIT: Since you may want all the elements to align (not just the menu links) here is an updated fiddle with all elements aligned through margins and eliminating "inline":
https://jsfiddle.net/yLctgbcw/
.logotype img {
margin: 7px 10px 12px 15px;
}
.logotype p {
display: inline-block;
vertical-align: middle;
font-weight: 700;
font-size: 24px;
margin-top: -5px;
margin-bottom: 0;
}
EDIT 2: It seems like there may be a bug in fiddle or somewhere else because the horizontal distance between the menus is off by 1px - but the distance will change depending on how wide the viewport.
If you add "margin-right: -4px;" on the .item class it will leave 1px of space between 1 of the 4 and the gap will move as you resize your window:
https://jsfiddle.net/42j3e8jp/
If you add -5px the gap disappears (but there is most likely still a 1px difference):
https://jsfiddle.net/8udb4eqn/
To be honest, this is one of those problems that no one will ever notice unless you add red backgrounds to the a to really show the issue. Personally, I would either refactor your code to use the "traditional" menu setup that is used by libraries like Bootstrap:
https://getbootstrap.com/docs/3.3/examples/navbar/
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
Or, I would just forget about the 1px difference and move on as determining the issue could take much longer than refactoring the code. I've learned that there are a lot of little quirks in CSS/HTML (especially across browsers) so unless your 1px difference is noticeable it's usually not worth the effort.
I'm struggling to horizontally center three <h2> elements
#container {
margin: 0 auto;
width: 100%;
height: 3em;
}
h2 {
display: inline-block;
text-align: center;
width: 33%;
margin-left: auto;
margin-right:auto;
border-radius: 5px;
font-family: Arial;
color: Black;
font-size: 18px;
background: #FDF3E7;
padding: 10px 20px 10px 20px;
border: solid #7E8F7C 3px;
}
<div id="container">
<h2 class="header">Restaunt Name:</h2
><h2 class="header">Phone #:</h2
><h2 class="header">Star Rating:</h2>
</div>
I tried removing the white space by reformatting the HTML. I also tried using this site. I can't get the third element to sit inside the container.
Update: I followed jcuenod's advice. This seems to have solved the block level question of horizontal centering, but looking at the styling, I am now wondering why the headers are matching with their results. Here is what they look like now.
Shouldn't the h2's occupy the entirety of the container, given that they are centered across a container with 100% width?
The Problem
The problem is that you have widths that fill the horizontal space (mostly; 33%). But then your <h2> elements take up extra horizontal space because you add padding and border.
The Solution
Use box-sizing as follows:
box-sizing: border-box;
Explanation
MDN explains the border-box setting for box-sizing:
The width and height properties include the content, the padding and border, but not the margin.
MDN lists it as experimental but it has very good browser support.
#container {
width: 100%;
height: 3em;
}
h2 {
box-sizing: border-box;
display: inline-block;
text-align: center;
width: 33%;
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: Arial;
color: Black;
font-size: 18px;
background: #FDF3E7;
padding: 10px 20px 10px 20px;
border: solid #7E8F7C 3px;
}
<div id="container">
<h2 class="header">Restaunt Name:</h2
><h2 class="header">Phone #:</h2
><h2 class="header">Star Rating:</h2>
</div>
just use display: block for <h2>
Add text-align:center; to the #container element.
Because your h2 elements are set to inline-block they don't occupy the full width of their container. That's why the centering is not working.
I have the following mark up:
<ul data-role="listview" data-inset="true" class="stuff site-content lists">
<li>
<div class="nearby"> 20 </div>
<h1> name</h1>
</li>
</ul>
css is:
.nearby{width: 85px;
height: auto;
float: left;
margin-right: 10px;
font-size: 26px;
text-align: center;
padding: 15px 0;
border: 2px #c1c1c1 solid;
background: #fafafa;
}
li{padding: .7em 15px;
display: block;
}
Unfortunately, the div doesn't sit nicely in the middle as it is too tall. Anyway, the li item could also increase in height so that its padding is dependent on the div rather than the h1?
You will have to add the following for it to work:
li{overflow:hidden;}
When setting the parent of a floated element to overflow:hidden; you force it to wrap the entire floated content. This is a very useful technique and it is used alot.
set float:left for ul and li both i always have this problem try it
I'm trying to make the menu appear at the middle of 30px line but the problem is that I cannot move it from the top unless I use display: table-cell.
What is wrong here?
Style sheet file:
div.menu
{
width: 600;
height: 30px;
border: 1px solid black;
margin: 0px auto;
text-align: center;
vertical-align: bottom
}
The menu code in my html file:
<div class="space"></div>
<div class="menu">
Home
Home
Home
Home
Home
</div>
<div class="space"></div>
line-height: 100px; set the height of your menu line. But keep enough space in horizontal dimension, otherwize you will get crazy view. Look forward to min-width, width or overflow-x rules.
div.menu
{
width: 600px;
/* Use line-height instead of height */
line-height: 30px;
border: 1px solid black;
margin: 0px auto;
text-align: center;
}
div.menu a {
vertical-align: middle;
}
setting the line-height to the desired value fixes the issue but it is not a correct way to do it. It is just a hack. The correct way is to use vertical-align property (for all the anchors inside the menu div)
.menu a {
vertical-align: middle;
}
Check this fiddle. http://jsfiddle.net/sfz7d/
Tell me if it works for you.
Hey guys I am having trouble with keeping things aligned on my website. Here is an example of what the website should look like:
Now, here is where it makes unaligned.. When I resize the window to be smaller, the Text shifts over like so:
Currently these are the css attributes applied to my tag which is on the text.
#header_title_container {
width: 1000px;
margin: 0px auto;
padding-left: 85px;
padding-top: 50px;
}
#header_title {
font-size: 33px;
color: #FFFFFF;
font-weight: bold;
}
What would the proper way to approach always having "Title" aligned with the corner of the darkest gray box?
Thanks.
Because your title container has padding inside it, the text "Title" is kept at least 85px from the screen edge. Because it's left-aligned, that means its left-hand edge is always at 85px.
So, when your sidebar gets smaller than 85px, the text cannot align with it.
You could fix this by fixing the size of the sidebar, by eliminating the padding-left directive and replacing it with an element sized as the sidebar is (or replacing it with the same amount as your sidebar width!), or by setting min-width on the sidebar.
Is this the kind of result you are after?
http://jsfiddle.net/2ScZZ/5/
html
<div id="container">
<div id="header_title_container">
<div id="sub_header_title_container">
<div id="header_title">
Title
</div>
</div>
</div>
<div id="middlebit">
</div>
</div>
css
#container {
background-color: lightgray;
}
#header_title_container {
width: 100%;
background-color: black;
}
#sub_header_title_container {
width: 900px;
margin: auto;
padding-right: 20px;
}
#header_title {
font: 33px verdana;
color: white;
padding: 50px 0 10px 0;
}
#middlebit {
margin: 0px auto;
width: 900px;
height: 100px;
background-color: gray;
}