How can I give margin to #more so it will be always at the same distance from #logo when resizing the window?
Look at the code down here in fullscreen and resize the window you'll see that the distance from 1 to 2 changes.
Thanks for the help.
body {
font-size: 5vw;
font-family: Arial;
letter-spacing: 1px;
}
#logo {
top: 10px;
left: 10px;
position: fixed;
}
#more {
top: 10px;
left: 50px;
position: fixed;
}
<div id=logo>1</div>
<div id=more>23456789</div>
You want to use the same unit you use for your font-size: which is vh.
2 important side notes:
dont use position: fixed if you want to really be responsive
don't use id's in css, you are not allowed re-use these in html.
body {
font-size: 5vw;
font-family: Arial;
letter-spacing: 1px;
}
#logo {
display:inline;
}
#more {
display:inline;
padding-left: 2vw;
}
<div id=logo>1</div>
<div id=more>23456789</div>
Actually I can float:left both div and it works aswell.
body {
font-size: 5vw;
font-family: Arial;
letter-spacing: 1px;
}
#logo,#more {
float:left;
}
<div id=logo>1</div>
<div id=more>23456789</div>
Related
This is piece of bigger project but what happens is that use of negative margin on one element (.pag) takes the other element (#ar_wr_in) out from floated box (#ar_wr)?
It works fine in Firefox but does not in Chrome or IE.
HTML:
<body>
<div id="ar_wr">
<div class="pag">pagination</div>
<div id="ar_wr_in">
<section class="ar">isdjs fjs odifj</section>
</div>
</div>
</body>
CSS:
body {
color: #f00;
background: #191919;
font-family: LucidaGrande, Helvetica, Arial, sans;
}
section {
display: block;
float: left;
}
section {
margin: 0px;
}
#ar_wr {
width: 59%;
padding: 1%;
background: #ffddff;
border-radius: 5px;
margin-right: 1.5%;
}
#ar_wr {
float: left;
margin-top: 80px;
}
#ar_wr_in {
width 100%;
float: left;
margin-top: 17px;
}
.pag {
font-size: 12px;
margin-top: -77px;
/* background: #ddffff; */
position: relative;
}
.ar {
width: 100%;
margin-bottom: 40px;
position: relative;
background: #ddffff;
}
Here is JSFiddle
Is there some fix or hack for this to make it look as in Firefox?
Thank you
If you make your pagination element have absolute positioning then it can happily sit outside it's parent without affecting other non-absolute elements that come after it:
.pag {
font-size: 12px;
margin-top: -77px;
/* background: #ddffff; */
position: absolute;
}
Strange that Firefox treats it differently, but I would actually expect the result that you see in Chrome from using relative positioning like that.
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
On my site, I was expecting to find the text in the snippet below, centered, on top of the image of the musicians.
<div class="brand">
<h1>Looking for a musician at short notice?</h1>
<div class="line-spacer"></div>
<p><span>We can help</span></p>
</div>
It's currently not displaying. I think it's a z-index issue, but I'm not sure of the solution.
Any ideas?
EDIT
Relevant CSS:
#intro .brand
{
margin-top: 40px;
}
.line-spacer
{
width: 20%;
margin:0 auto;
margin-top: 20px;
margin-bottom: 25px;
border-bottom:1px solid #fff;
}
h1
{
font-size: 36px;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6
{
color: #3a3a3a;
font-weight: 700;
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
}
Remove overflow from #intro
#intro {
overflow-y: hidden;
}
you have issue with both positioning and z-index
As of now it is position below the artists image and not above it, and since it is behind layers of other displays no text can be seen!
Try reducing the top-margin and adding z-index:1
I am trying to add text to center of the page. Even if a user try to resize the page, text in the page should be aligned to center. I am close to the solution but missing some position in the code. Here is my code. Any help would be highly appreciated.
html code
<div class="errorMessageContainer">
<div class="errorMessageIcon">
:(
</div>
<div class="errorMessageHeaderContainer">
<div class="errorMessageHeader">
I am trying to center me in a page.
</div>
<div class="errorMessageText">
<span class="errorMessageSubHeader">I want to float.</span>Even if page is restored or forced minimized. <span class="errorContact">Please </span> help me on this.
</div>
</div>
</div>
css code
body {
background-color: #666666;
}
.errorMessageContainer {
width: 620px;
margin: 200px 0 0 300px;
}
.errorMessageIcon {
font-family: Segoe UI Semibold;
font-size: 72px;
color: #29abe0;
display: inline-block;
vertical-align: top;
}
.errorMessageHeaderContainer {
display: inline-block;
width: 500px;
padding: 20px 0 0 30px;
}
.errorMessageHeader {
font-family: Segoe UI Light;
font-size: 28px;
color: #ffffff;
}
.errorMessageSubHeader {
font-weight: bold;
}
.errorMessageText {
font-family: Segoe UI;
font-size: 13px;
color: #ffffff;
width: 450px;
}
.errorContact a {
color: #ffffff;
text-decoration: underline;
}
this will put your message container in center of the page :
.errorMessageContainer {
width: 620px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -310px;
margin-top: -50px;
}
see the fiddle
Try this:
.errorMessageContainer {
width: 620px;
margin: 200px auto 0;
}
You can use margin: 200px auto 0 auto; for the .errorMessageContainer see fiddle here: http://jsfiddle.net/DSATE/
.errorMessageContainer{
position: absolute;
height: 200px;
width: 400px;
margin: -100px 0 0 -200px;
top: 50%;
left: 50%;
}
The best approach is to set up your display and margins correctly. Do not set values for this otherwise it will fail if the div changes in size. heres an example I made up using a div wrapper and the value display:table-cell
DEMO http://jsfiddle.net/kevinPHPkevin/DSATE/1/
I am trying to move the box by giving CSS selector for <div> a relative position attribute and some distance from left and top edge. Problem is it's not working.
Selector is clearly working because if I uncomment visibility attribute, the image is hidden. What's wrong here?
HTML:
<body>
<div id="test_logo">
<img src="http://uselessproducts.weebly.com/uploads/5/2/5/5/5255421/_6517253_orig.jpg" height="100" width="100"/>
<span id="test_logo_title">test</span>
</div>
</body>
CSS:
* { margin:0px; padding:0px; }
html {
font-family: Verdana, "Lucida Sans Unicode", Arial;
font-size: 9px;
}
body {
margin: 9px 0 0;
background-color: #f37062;
font-size: 100%;
}
#test_logo {
/*visibility: hidden;*/
position: relative;
left: 100 px;
top: 200 px;
}
jsFiddle link
You just need to remove the spaces before px:
#test_logo {
position: relative;
left: 100px;
top: 200px;
}
Take the spaces out of the left: and top: specs in #test_logo, and you should be right as rain.
Here is the modified CSS, I think this should fix your problem, you can adjust the padding of the #logo to meet your space needs from the top and sides.
* {margin:0px; padding:0px;}
html{
font-family: Verdana, "Lucida Sans Unicode", Arial;
font-size: 9px;
}
body{
margin: 0 auto;
background-color: #a37062;
font-size: 100%;
}
#logo{
padding: 5px;
}
Heres the link to my fiddle http://jsfiddle.net/r9x5A/3/
But as the others stated, the problem you're having is the space between the numbers and 'px' in your css.