Text to relocate upon maximizing window - css

Here is my problem folks, when I maximize the window, I would like the status, Due date, to be in a location which is with respect to the page, i.e in similar locations not at the same position. Upon maximizing, I want Status, Due Data, and To to always move towards the right when maximized, or when the page is expanded. I'm new to CSS. Thank you for you time, I look forward to your assistance.
NOT MAXIMIZED
MAXIMIZED
Above are the screen shots,
Here is my CSS attempt:
#center-header-status
{
position:relative;
font-family:Arial;
font-size:14;
padding:25px;
float:left;
color:#5E5E5E;
bottom:7px;
text-align:justify;
}
#center-header-duedate
{
position:relative;
font-family:Arial;
font-size:14;
padding:25px;
float:left;
color:#5E5E5E;
bottom:7px;
}
#center-header-to
{
position:relative;
font-family:Arial;
font-size:14;
padding:25px;
float:left;
color:#5E5E5E;
margin-left:5px;
bottom:7px;
}

one way to do this would be to use css3 media queries, check out
http://www.css3.info/preview/media-queries/
http://www.w3.org/TR/css3-mediaqueries/

Related

Format CSS rules to be on a single line

so im having this issue with my CSS, im trying to write my CSS code the normal way like this, but i want it vertical
.topic_row {
height:60px;
}table
.reputation {
right:0px;
position:absolute;
.topic_row {
height:60px;
}table
.reputation {
right:0px;
position:absolute;
.rep_bar {
background:#FFF;
font-size:1.1em !important;
-moz-border-radius-topleft:5px;border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
padding:0px;
right:10px;
bottom:45px;
position:absolute;
width:150px
.rep_bar
ul {
margin-top:8px;
float:left
.rep_bar ul
li {
float:left;
margin:0
2px
p.rep_highlight {
float:left;
display:inline-block;
margin:5px
10px 10px 10px;
background:#D5DEE5;
color:#1d3652;
padding:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-border-radius:5px;
font-size:0.8em;
font-weight:bold;
text-align:center
p.rep_highlight
img{
margin-bottom:4px
.reputation{
float:none;
text-align:center;
/*margin-left:10px;*/
margin-right:10px
.reputation.negative, .members
li.negative{
background:#b82929;
color:#fff
.reputation.zero{
background:#CCC;
color:#6e6e6e
But i want it vertical since my style for the forums only accepts vertical for some reason, so i need it all the code formated in a straight line like this:
.pun .fakeform{PADDING:20px 20px 15px 20px}
And i do not know how to format it like this, so if someone has the time, and effort to format all of the code above to a straight vertical line i'd appriciate it!
Thank you.
Something like stylelint with the --fix option should solve your issue. See https://stylelint.io/user-guide/rules for documentation on all stylelint rules.
Here, the following stylelint rules would be most relevant:
block-opening-brace-newline-before: never-multi-line
block-opening-brace-newline-after: never-multi-line
block-closing-brace-newline-before: never-multi-line
block-closing-brace-newline-after: never-multi-line
Relevant stylelint documentation pages:
Stylelint configuration guide
Stylelint CLI / Stylelint editor plugins
Stylelint CLI's autofix switch (--fix)

Is there any way to get rid of visual errors produced by scaling text?

Here is what I mean:
div {
background-color:rgb(240,160,100);
border-radius:4px;
font-family:arial;
font-size:15px;
width:150px;
text-align:center;
cursor:pointer;
}
div:active {
transform: scale(0.98, 0.95);
}
<div>Click Here!</div>
So when you click the button, depending on the browser, various things happen. Like the dot on the 'i' jumping around or some letters getting smushed together or sometimes the whole text moves by a pixel.
In case of small transforms like that, what happens to the text is disproportionate to what happens to the rest of the element. I think this might be caused by whatever resampling algorithm the browser is using that is designed to be quick and crisp? I'd be ok with slight blurring if there's an option for that.
So, short of transforming all the button text into bitmaps and scaling those, is there any way around these effects?
From what i understood I think you could try adding transition to smoothen the process. Or You can try using svg. if you only wanna scale the font than try changing font-size and add transition to it. I hope this helps
div {
background-color:rgb(240,160,100);
border-radius:4px;
font-family:arial;
font-size:15px;
width:150px;
text-align:center;
cursor:pointer;
transition: all 0.3s ease;
}
div:active {
font-size:14px;
}
<div>Click Here!</div>

IE, DIV, images, float and LightView

I'm trying to figure out why images seem to jumble around in IE versus Chrome.
Alas, its an ancient public school CMS (we're talking early 00's), and I'm certainly no programmer, rather just a hobbyist trying to juggle the CSS and HTML.
I hope I can get a few pointers. I assume Its about floating the right DIV containers, to get it to render right. The entire thing litteralky exploded when I went to create the overlay text.
CSS can be seen below. Page source can be viewed outside of the CMS frame-template here.
Cheers, Trin
#persongalleri
{
margin-left:5px;
overflow:hidden;
}
img.person /* til personalesiden */
{
width:80px;
height:auto;
border:1px solid #000;
}
div.personwrap
{
float:left;
position:relative;
margin:2px;
}
div.undertekstkasse
{
position:absolute;
bottom:1px;
left:0px;
width:100%;
background-color:black;
font-family: 'Verdana, Arial, Helvetica';
font-size:14px;
font-weight:bold;
color:white;
opacity:0.6;
filter:alpha(opacity=60);
}
p.undertekst
{
padding:6px;
margin:0px;
text-align:center;
}
Its very difficult to spot but all the photos are slightly different heights, so you are getting this strange looking behavour when you float them. If you put a fixed height on the .personwrap then this will solve your layout issues.
div.personwrap {
height: 105px;
margin: 2px;
position: relative;
float:left;
}
You could also remove the float, and just add display: inline-block

Button hover image not working in CSS

In my css I am using different image for hover state button but when I hover over the image, there is no change. Can you help find the fix?
.button {
background-image:url('/images/search.png');
width:73px;
height:23px;
background-repeat:no-repeat;
cursor:pointer;
border:none;
}
.button:hover {
background-image:url('/images/search_active.png');
background-repeat:no-repeat;
cursor:pointer;
border:none;
}
Make sure your image is in './images/search_active.png' and it is a correct path.

How to display a div that needs to expand in IE with no width set

<container>
<element1>
</element1>
<element2>
</element2>
</container>
#container {
position:absolute;
right:33px;
top:15px;
}
#element1 {
position:relative;
float:right;
height:31px;
background:url(../main_bg.gif) repeat-x top left;
border: 1px solid #6a6a6a;
clear:both;
}
#element2 {
position:relative;
float:left;
clear:both;
background-color:#f8f0ce;
border-left:1px solid #6a6a6a;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
}
The reason your container seems to be displayed as wide as it content in other browser is because it is out of the "body" and displayed in "nothing" (ence, as wide as its content). IE6/7 seems to treat this differently.
I do not have your issue in IE8, so I suppose you want this for IE6 or 7. It also seems you want 2 box, one under each other (clear).
From the code and the style you supplied, it seems we could simply get rid of the floating and put a text-align:right.
Would this solution work for you?
It does not work in IE6 however.
This one does however, but require a <br /> (and display:inline. Thanks #kei for the suggestion.)

Resources