I'm having a problem that absolutely triggers my OCD to no end and it NEEDS to be fixed.
I'm trying to adjust the .post_author/.post_content divs to be the same height as their parent div, in this case .post
At the moment there is a big ugly space if the post isn't long enough which is as I've said, ugly.
Post that's long enough:
Div structure:
<div class="post classic">
<div class="post_author"></div>
<div class="post_content">
<div class="post_head></div>
<div class="post_body></div>
</div>
</div>
Relevant CSS:
.post {
overflow: hidden;
}
.post.classic {
padding-top: 0;
min-height: 380px;
}
.post .post_author {
padding: 5px;
overflow: hidden;
color: #a1a1a1;
font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 13px;
font-style: normal;
}
.post.classic .post_author {
height: 100%;
width: 15%;
float: left;
padding: 15px 2% 15px 3%;
margin-top
font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 13px;
font-style: normal;
border-radius: 0;
/*box-shadow: 1px 0 0 #000;*/
}
.post.classic .post_content {
float: right;
width: 78%;
}
.post_content {
min-height: 321px;
background-color: rgba(255,255,255,0.04);
padding: 9px 10px 5px 0;
box-shadow: inset 1px 0 0 #000;
}
For the life of me I can't figure out how to fix this. I've tried setting the display to table, flex, inline-block, dug up many other similar stackoverflow posts but nothing's worked so far.
Just going on this info, I can only give you limited advice. I assume you're not able to reproduce this into a demo on jsFiddle because the 2 pics look like there's a lot more HTML/CSS than what you've posted. Now that I've cleared that up, I'll just concentrate on making 2 divs fit into another div at max height.
CSS
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; }
.post_content, .post_author { min-height: 380px; height: 100vh; overflow: none; }
See my answer on this post, it seems to be similar.
Try setting min-height of post-content to be 100% of the viewport
min-height: 100vh
Hope this helps.
Related
I have this problem when I collapse my webpage, the header shrinks instead of staying stretched across the entire page.
In this situation, I really have no idea what code to post along with it. I've tried various ways to fix it and nothing seems to work. Does anyone know what is going on when this happens? Here is my header HTML and CSS:
#header {
background-color: #C67171;
width: 100%;
}
#headtop {
text-align: right;
width: 1000px;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
That's pretty much it for the styling though, any help is greatly appreciated!
EDIT
Picture explaining the outcome of the code.
This is what the page looks like right now. This is how I want it to look. But for some reason, I keep getting the problem that I have in the picture above when I collapse the page. I don't want to links to stretch to the outside of my page, that does not fix my problem.
Try this Fiddle
#header {
background-color: #C67171;
display:inline-block;
}
#headtop {
text-align: right;
width: 1000px;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
The problem is when the window is showing greater than 1000px on screen you're page seems to work. When you make it smaller the header will shrink thanks to width: 100%;.
But as we get smaller the div #headtop will stay the same size width: 1000px;. So the header will get smaller but the child element (#headtop) will still be big causing the scrolling you are seeing.
#header {
background-color: #C67171;
width: 100%;
}
#headtop {
text-align: right;
width: 100%;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
}
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
Here is how you keep the links away from the sides (look at comments for more on that). Give #headertop a max width and then give it a width of 80% or however much you want the gap to have.
JSFIddle Here
I'm quite new on web development. I'm struggling with this question for a while. Now I post my question(s) here.
The souce code is as linked: Source Code
The HTML:
<div id="wrap">
<div id="main" class="clearfix">
<ul class="ranklist" id = "ranklist">
<li class="ranklistitem font-size-0">
<div class="itemnumber divinline"> <span class="helper"></span>1</div>
<div class="userprofile divinline"><img class="profileimg" src=""/></div>
<div class="nameandcredit divinline">
<div class="username">SteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteve</div>
<div class="credit">I'm description</div>
</div>
<div class="ranktitle divinline">Total:</div>
<div class="usercredit divinline">1000</div>
</li>
</ul>
</div>
</div>
The CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
html {
background: #aaaaaa;
}
body {
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
font-family: "PingHei", "Helvetica Neue", "Helvetica", Arial, "Microsoft YaHei";
font-weight: lighter;
}
#wrap {
min-height: 100%;
}
#main {
overflow-y: auto;
padding-bottom: 55px;
}
div, ul, p {
padding: 0px;
margin: 0px;
color: #ffd8d0;
}
.rewarddes
{
margin-top:10px;
display:block;
color:#ffdcc5;
overflow:hidden;
font-size:87.5%;
}
.ranklistitem {
height: 60px;
border-bottom: solid 1px #faa559;
font-size:87.5%;
}
.font-size-0 {
}
.divinline {
display: inline-block;
vertical-align: top;
padding: 0px;
margin: 0px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.itemnumber {
line-height: 60px;
height: 60px;
background:#aa8800;
width: 6%;
text-align: right;
padding-right: 5px;
}
.userprofile {
line-height: 60px;
height: 60px;
width: 14%;
text-align: center;
vertical-align: middle;
background:#228845;
}
.profileimg {
height: 36px;
width: 36px;
vertical-align: middle;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border: solid 2px #fff;
}
.nameandcredit {
height: 60px;
width: 45%;
padding-left: 5px;
background:#342389
}
.username {
height: 55%;
text-align: left;
vertical-align:bottom;
overflow:hidden;
}
.credit {
height: 25%;
font-size: 66.7%;
text-align: left;
overflow:hidden;
color:#fdff6e;
}
.username:before, .credit:after {
content:'';
height:100%;
vertical-align:middle;
display:inline-block;
}
.iconaward {
vertical-align: middle;
height: 20px;
width: 14px;
}
.ranktitle {
line-height: 60px;
height: 60px;
width: 15%;
background:#cd8912;
text-align: right;
padding-right: 0.125em;
}
.usercredit {
line-height: 60px;
height: 60px;
background:#ff0000;
width: 20%;
text-align: right;
padding-right: 0.5em;
}
I have 2 questions based on the linked(or above) code.
The 5 container div's width was set as:
.itemnumber 6%, .userprofile 14%, .nameandcredit 45%, .ranktitle 15%, .usercredit 20%. So in total they are 100%. But as you see, the last one .usercredit is not in the same line and there're margins between each div, which is not what I want.
for the .username, I have set overflow:hidden, but as you see, when there's a large string, the .username was totally disappeared. If there're spaces in the string, it will only hide the overflow part and show the front part. I want to know what's the problem?
I know it's a little bit messed up of a lot code here. But my question is as listed as above. Thanks in advance for any kind suggestion.
For the spacing, you have two problems:
Implicit spaces between inline-block elements, and
Defining widths for elements with padding.
Regarding username overflow, you have one issue:
Default word wrapping behavior is to wrap the whole word to the next line. You need to change that behavior.
Let's take a look at each of them:
Implicit Spaces
The problem is that your divs have a display: inline-block; style. Elements displayed as an inline-block have any white-space between them converted to a single space.
See the "Fighting the Space Between Inline Block Elements" article on CSS Tricks for more information on how to overcome this.
One fix, for instance, is to have the li element that is wrapping the divs to have a 0 font-size, and reset a non-zero font size to its children, e.g. in your CSS:
.font-size-0 {
font-size: 0;
}
.font-size-0 > * {
font-size: 12px;
}
Any of the links outlined in the link above would work; for example, removing spaces and newlines between your closing tag and opening tag would do the same thing, without forcing you to set and reset the font-size.
Widths for elements with padding
In CSS, a width is defined by default for an element to include only its content area (box-sizing: content-box; by default) and not the padding. Set the box-sizing to border-box and you'll be all set.
E.g.
.font-size-0 > div {
box-sizing: border-size;
}
Properly wrapping a single word without spaces
See this StackOverflow answer to see how to address the issue. You will basically need to add this to your .username rule:
.username {
...
word-wrap:break-word;
}
Final Result jsFiddle
I am trying to center two spans horizontally in a 150px div. I thought the simplest way of doing this world be to set the line-height of each of the spans to 150px, but for some reason, the text is not being centered when I try this method.
Here is my code:
HTML:
<div class="top">
<img src="/wp-content/themes/shipping/images/TV.png" />
<span class="cantstop">CAN'T STOP</span> <span class="shipping">Shipping</span>
</div>
CSS:
.top {
height: 150px;
padding: 10px 0;
}
.top img {
max-height: 100px;
padding: 0 10px;
}
.cantstop {
font-family: 'Lato', sans-serif;
font-weight: 300;
line-height: 150px;
font-size: 45px;
margin: auto 0;
text-shadow: 2px 2px 0px rgba(129,93,150,0.5);
}
.shipping {
font-family: 'Grand Hotel', cursive;
font-weight: normal;
font-size: 75px;
line-height: 150px;
margin: auto 0;
text-shadow: 4px 4px 0px rgba(217,144,178,1);
}
You can see the issue in action at cantstopshipping.com
Thank you for your time.
Add
.top img {
float:left;
}
.top span {
float:left;
}
and change
.cantstop,
.shipping {
line-height:130px;
}
The top container is actually 130px not 150px due to the padding on the top and bottom.
Hope my answer makes sense, let me know if it doesn't.
To align it vertically,
DEMO
Use vertical-align:middle
.top span {
vertical-align:middle
}
To align it horizontally,
DEMO*
Use .top { text-align:center }
I have a HTML like this:
<div id="footer">
<p> Copyright 2013 </p>
</div>
And a CSS like this:
#footer {
clear: both;
position: relative;
width: 980px;
font-size: 0.85em;
text-align: center;
margin: 0 auto;
padding: 20px 0 0 0;
border-top: 1px solid #E9E6D9;
}
I want my text in <p> to have Arial font but I would not like to add the font in the #footer but to make Arial font generic to all texts in the site (which do not have a specific font assigned).
How could I achieve that? I tried adding a * { font-family:arial; } but it did not help...
----------------- UPDATE
Here is what I have:
body {
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}
#footer {
clear: both;
position: relative;
width:980px;
font-size: 0.85em;
text-align: center;
margin: 0 auto;
padding: 20px 0 0 0;
border-top: 1px solid #E9E6D9;
}
But the footer still comes out without inheriting the body's styles... :(
Apply that rule to the body
body {
font-family: arial;
}
Then any other element can override that:
.someClass {
font-family: verdana;
}
you have a style tag in your css which is invalid.
Removing it resolves the font issue, among others.
jsfiddle
You can declare the font on the body, with something like that.
body {
font: 16px/18px Arial, sans-serif;
}
You will set up, the size, line-height, and font for all font of the site.
I'm trying to create something like yahoo.com where the content is in the middle and on the outskirts there's a grey margin (or at least something looking like a margin, not sure if it's padding). I was successful, however when the page is resized by the user I want this margin to decrease just like it is on yahoo.com but its not decreasing (go to www.yahoo.com and resize the page and their margin decreases). Anyone knows how to get this margin to decrease?
body
{
font-family: "Lucida Grande", "Lucida Sans";
background-color: #525252;
text-align: center;
margin-left: 150px;
margin-right: 150px;
margin-top: 0px;
margin-bottom: 0px;
min-width: 650px;
min-height: 685px;
color: #00008B;
}
table
{
margin:0;
padding: 0px 2px;
border-spacing: 0; /* remove the spacing between the borders. */
width: 950px;
height: 685px;
background-color: #C1CDC1;
}
The trick is to create a container div of fixed width within your body tag for the content and set the margin to auto.
body {
text-align: center;
}
div#container {
width: 960px;
text-align: left;
margin: 0 auto
}
May I also recommend firebug or something alike as a useful tool to inspect, among other this, css and html of websites?
Change your body style to:
body {
font-family: "Lucida Grande", "Lucida Sans";
background-color: #525252;
text-align: center;
margin: 0px auto 0px auto;
width: 650px;
min-height: 685px;
color: #00008B;
}