I am trying to center some text vertically across all browsers and I am running into issues for some particular reason with this specific case. Please see the Fiddle for the example. I want the word Tester to be centered vertically as well as the image. Thanks for your help.
http://jsfiddle.net/56jxjq69/2/
<div id="heading" style="margin: auto; display: block;">
<a href="http://www.sss.com"><img src="images/newlogo200x200.png" style="width: 50px;
height: 50px;
position: absolute;
margin-left: 2.5%;
margin-top: .5%;"/></a>
<div id="header" style="margin: 0 auto;
padding: 5px 0 0 0 !important;
width: 100% !important;
clear: both;
background-color: black;
color: white;
vertical-align: middle;
height: 70px;">
<span id="headtxt" style="font-family: ethno;
max-height: 80px;
font-size: 50px;
width: 65%;
padding: 0;
display: block;
margin: auto;
line-height: 55px; vertical-align: middle;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
color: black;">
TESTER</span>
</div></div>
Well there is a lot of stuff there. I did remove a few things without, I think, any visual impact. I ended up with :
<div id="heading" style="margin: auto; display: block;">
<div id="header" style="padding: 5px 0 0 0 !important;width: 100% !important;background-color: black;color: white;vertical-align: middle;height: 70px;">
<div style="text-align:center;">
<a href="http://www.sss.com">
<img src="images/newlogo200x200.png" style="position:relative;top:8px;width: 50px;height: 50px;"/>
</a>
<span id="headtxt" style="font-family: ethno;font-size: 50px;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;color: black;">
TESTER
</span>
</div>
</div>
</div>
Have a look at the fiddle.
Related
This question already has answers here:
Progress element html text inside
(4 answers)
Closed 2 years ago.
<div class="progress-bar-title">
Blabla - %48
</div>
<div id="progressbar" style="width:250px;background-color:#00a0b0;border-radius:6px;padding:3px;">
<div style="background-color: #ffffff;width:48%;height:10px;border-radius:4px;"></div>
</div>
I am using this code but I want this "Blabla - %48" text in the progress bar. How can I do this?
like this but no loading bar, normal progress bar.
.container{
width: 300px;
height: 20px;
background-color: #a1abb3;
border-radius: 20px;
-moz-box-shadow: inset 0 0 10px #00000060;
-webkit-box-shadow: inset 0 0 10px #00000060;
box-shadow: inset 0 0 10px #00000060;
}
.progress{
background-color: #e4c14a;
height: 20px;
border-radius: 20px;
-moz-box-shadow: inset 0 0 10px #00000060;
-webkit-box-shadow: inset 0 0 10px #00000060;
box-shadow: inset 0 0 10px #00000060;
}
.load-text{
color: gray;
font-size: 10px;
line-height: 20px;
float: right;
margin-right: 10px;
}
<div class="container">
<div class="progress" style="width:48%">
<span class="load-text">Blabla - 48%</span>
</div>
</div>
Just change the location of the text, and adjust some attributes
<div id="progressbar" style="width:250px;background-color:#00a0b0;border-radius:12px;padding:3px;">
<div style="background-color: #ffffff;width:48%;height:20px;border-radius:8px;">
<span class="progress-bar-title" style="color: black;font-size:80%"> Blabla - %48</a>
</span>
</div>
</div>
You can create two div's.
.container{
margin-top: 1rem;
width: 10rem;
background-color: #e5e5e5;
border-radius: 0.4rem;
}
.progress{
background-color: green;
height: 1rem;
padding: 0;
border-radius: 0.4rem;
display: flex;
justify-content: flex-start;
}
.progress span{
color: #fff;
filter: brightness(2);
font-weight: 700;
}
<div class="container">
<div class="progress" style="width:40%">
</div>
</div>
<div class="container">
<div class="progress" style="width:60%">
</div>
</div>
I have divs which is displaying at the left side of the page i want to display them on center of the page I have also attached the screen shot of my divs:
$array = [
'Summary' => [
'data' => '<div align="center"style="display: inline-block;width: 10%;" class="page_sum"><h1>Scan Summary:</h1></div>
<div class="page_summary"><br/>
<div><h3 style="display: inline-block;width: 10%;" class="total_found">Total Files Found: '.$totalFind.'</h3></div>
<div><h3 style="display: inline-block;width: 10%;" class="total_dir">Total Directories: '.$totalIsDir.'</h3><br/></div>
<div><h3 style="display: inline-block;width: 10%;" class="planned_sync">Planned Sync Files: '.$totalShouldFind.'</h3></div>
<div><h3 style="display: inline-block;width: 10%;" class="actual_sync">Actual Synced: '.$totalResolved.'</h3><br/></div/>
<div><h3 style="display: inline-block;width: 10%;"class="missing_sync">Missing Synced Files: '.$forOfor.'</h3><div/>',
'colspan' => 5, 'class' => array('foo', 'bar'),
],
];
and my css:
.page_sum{
width: 100px;
height: 50px;
display: inline-block;
}
.page_sum { /* Using drop shadow, should appear identical to box shadow */
-webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
background: #cccccc;
}
I have just pasted one div css, instead of making div into center it displaying the text into center which is in div. How can I make my divs into center?
Please also find my screen.
CSS:
.page_sum{
width: 100px;
height: 50px;
display: inline-block;
}
.page_sum { /* Using drop shadow, should appear identical to box shadow */
-webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
background: #cccccc;
}
.summary-center {
margin: auto;
width: 50%;
}
and html:
'<div class="summary-center" style="display: inline-block;width: 10%;" class="page_sum"><h1>Scan Summary:</h1></div>
if you add the class .summary-center in div .page_sum and in div .page_summary it should work.
.summary-center {
margin: auto;
width: 50%;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
Try this:
<div class="page_summary summary-center">
<h1>Scan Summary:</h1>
<br/>
<div>
<h3 style="display: inline-block; width: 10%;" class="total_found page_sum">Total Files Found: XX</h3>
</div>
<div>
<h3 style="display: inline-block; width: 10%;" class="total_dir page_sum">Total Directories: XX</h3>
<br/>
</div>
<div>
<h3 style="display: inline-block; width: 10%;" class="planned_sync page_sum">Planned Sync Files: XX</h3>
</div>
<div>
<h3 style="display: inline-block; width: 10%;" class="actual_sync page_sum">Actual Synced: XX</h3>
<br/>
</div>
<div>
<h3 style="display: inline-block; width: 10%;"class="missing_sync page_sum">Missing Synced Files: XX</h3>
</div>
</div>
<style>
.page_sum {
/* Using drop shadow, should appear identical to box shadow */
-webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
background: #cccccc;
}
.summary-center {
margin: auto;
width: 50%;
text-align: center;
}
</style>
This looks as follows:
Hello guys i need to do that for the UI of my game.
I need to go from this :
To this (its an editing with paint.net of the previous picture) :
<html>
<body>
<div id="hud">
<div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);"> <img src="https://i.imgur.com/7jElAfE.png"/> 0 </div>
<div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);"> <img src="https://i.imgur.com/7jElAfE.png"/> 100 500 000000 </div>
<div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);"> LSPD - Cadet de la police trop cool </div>
</div>
</body>
</html>
img {
vertical-align: middle;
}
#hud {
position: absolute;
font-family: 'Pricedown';
font-size: 25px;
color: #fff;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
text-align: center;
top: 35px;
right: 5px;
}
Help appreciated thanks.
use flexbox with margin-left: auto; and don't style your elements on the tags like that, it's considered bad practice and you're honestly just making it harder on yourself in the long run.
HTML:
<html>
<body>
<div id="hud">
<div> <img src="https://i.imgur.com/7jElAfE.png"/> 0
</div>
<div> <img src="https://i.imgur.com/7jElAfE.png"/> 100 500 000000
</div>
<div> LSPD - Cadet de la police trop cool
</div>
</div>
</body>
</html>
CSS:
img {
vertical-align: middle;
}
#hud {
position: absolute;
font-family: 'Pricedown';
font-size: 25px;
color: #fff;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
top: 35px;
right: 5px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#hud > div{
background-color:red;
border: 2px solid #000;
border-radius: 3px;
background-color: rgba(200, 200, 200, 0.40);
margin: 2px 10px;
margin-left: auto;
}
CodePen
You need to wrap every inner div inside another one and make all inner divs as display: inline-block;
Check here
<html>
<body>
<div id="hud">
<div><div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);"> <img src="https://i.imgur.com/7jElAfE.png"/> 0 </div></div>
<div><div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);"> <img src="https://i.imgur.com/7jElAfE.png"/> 100 500 000000 </div></div>
<div><div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);"> LSPD - Cadet de la police trop cool </div></div>
</div>
</body>
</html>
CSS:
#hud div div {
display: inline-block;
}
Of course to organize code better, set up CSS classes for inner divs and create proper CSS for them.
I am trying to create an app-like website, but I am struggling with having a container within a container.
As you can see when I expand the "Summary" the container doesn't stay within the other container.
How do I fix this?
This is part of my HTML:
<div class ="block" id="page2" heigth=100% style="display: block;">
<details>
<summary id="resultnaam">Sensire</summary>
<p padding=5px>MMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</p>
</details>
<div class="block" id="iframeblock">
<iframe src="secretlinkgg" width=100% heigth=100%</iframe>
</div>
</div>
And here is some of the CSS:
.block {
text-align: center;
position: relative;
margin: 5px;
height: 100%;
border-radius: 6px;
-webkit-box-shadow:
inset 0 0 10px rgba(0,0,0,0.18),
2px 3px 16px rgba(0,0,0,0.6);
-moz-box-shadow:
inset 0 0 10px rgba(0,0,0,0.18),
2px 3px 16px rgba(0,0,0,0.6);
box-shadow:
inset 0 0 10px rgba(0,0,0,0.18),
2px 3px 16px rgba(0,0,0,0.6);
background: whitesmoke;
}
#iframeblock {
padding: 10px;
display: flex;
height: 85%
}
Please help :)
It's already fixed.
The code I used is correct :P
My website is currently breaking on several pages in ie7, ie8, and ie9, and of course its breaking in different ways in each browser. I've been trying to figure this out for hours and have nothing.
The problem in ie7-8 is that my various elements are not floating correctly I believe, but I'm not entirely sure.
Here are some screencaps
Here is a link to the test page: testsite
And here is the code:
<?php include("includes/header.html");?>
<div id="content">
<div id="toolbar" class="dropshadow" style="background-color: #181818">
<h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
<h2 class="header2">Buyers Tools:<h2>
<hr noshade color = "#373737"/>
<ul>
<li>
<a href="inventory.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Showroom','','images/toolbar/carhover.png',1)">
<img src="images/toolbar/car.png" alt="Showroom" name="Showroom" width="89" height="55" border="0" id="Showroom" style="margin-left: 7px;"/>
<h3>Our Vehicles</h3>
</a>
</li>
<li>
<a href="shipping.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Shipping','','images/toolbar/shippinghover.png',1)">
<img src="images/toolbar/shipping.png" alt="Shipping" name="Shipping" width="97" height="55" border="0" id="Shipping" />
<h3>Shipping</h3>
</a>
</li>
<li>
<a href="financing.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Financing','','images/toolbar/financinghover.png',1)">
<img src="images/toolbar/financing.png" alt="Financing" name="Financing" width="89" height="55" border="0" id="Financing" />
<h3>Financing</h3>
</a>
</li>
<li>
<a href="insurance.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Insurance','','images/toolbar/insurancehover.png',1)">
<img src="images/toolbar/insurance.png" alt="Insurance" name="Insurance" width="64" height="55" border="0" id="Insurance" />
<h3>Insurance</h3>
</a>
</li>
<li>
<a href="auto-locator.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('AutoLocator','','images/toolbar/autolocatorhover.png',1)">
<img src="images/toolbar/autolocator.png" alt="AutoLocator" name="AutoLocator" width="104" height="55" border="0" id="AutoLocator" />
<h3>Auto Locator</h3>
</a>
</li>
</ul>
</div>
<div id="searchbox" class="dropshadow">
</div>
<div id="advsearch" class="dropshadow">
</div>
<div id="links" class="dropshadow" style="background-color: #181818">
</div>
</div>
</div>
<div id="bannerads" class="dropshadow">
</div>
Here is the CSS sheet specific to this page. If you need the main page for the site I can get it for you, but that style sheet works fine on other pages so I believe the problem is here.
#charset "utf-8";
/* CSS Document */
#bannerads{
margin: 9px 0px 5px 6px;
float: left;
width: 728px;
height: 90px;
padding: 6px 128px;
background-color: #e9e7e4;
}
#toolbar{
float: left;
width: 984px;
height: 150px;
position: relative;
z-index: 1;
margin: 0px 6px 0px 6px;
background-color: #181818;
background-image: url(../images/toolbar.png);
background-position:right top;
background-repeat:no-repeat;
}
#toolbar hr{
float: left;
width: 600px;
margin: 4px 300px 0px 30px
}
#toolbar ul{
list-style:none;
padding:0;
}
#toolbar li{
float: left;
margin: 10px 0px 0px 31px;
}
#toolbar a{
color: #e9e7e4;
}
#toolbar a:hover{
color:#e9e7e4;
text-decoration:underline;
}
#searchbox{
float: left;
clear: both;
width: 446px;
height: 402px;
background-color: #e9e7e4;
margin: 9px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#toolbar li h3{
color: #e9e7e4;
font-size: 13px;
margin-top: 4px;
margin-bottom: 10px;
text-align:center;
}
#advsearch{
float: left;
width: 446px;
height: 242px;
background-color: #e9e7e4;
margin: 9px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#links{
float: left;
width: 446px;
height: 132px;
background-color: #181818;
margin: 8px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#arrow{
margin-left:-93px;
width: 68px;
height: 135px;
float: left;
position: relative;
}
.header1{
color: #e9e7e4;
font-size: 28px;
margin: 8px 0px 0px 30px;
float: left;
}
.header2{
color: #e9e7e4;
font-size: 16px;
float:left;
margin: 22px 0px 0px 220px;
}
#showinvheader{
color: #e9e7e4;
font-size: 14px;
margin-bottom: -2px;
text-align:center;
}
Lastly, here is the css sheet I'm using for compatibility with ie:
/* CSS Document */
.Navigation{
border: solid #181818 1px;
margin: -15px 5px 0px 5px;
}
.bigbox{
border: solid #181818 1px;
margin: 7px 5px 0px 5px;
}
.smallbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#banner{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#headerimg{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#contentbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#bannerads{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#bannerads2{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#toolbar{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#featured{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#searchbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#advsearch{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#links{
border: solid #181818 1px;
margin: 7px 5px 0px 5px;
}
Well, for starters, your X-UA-Compatible header is messed up. You have a weird quot; value in there. This is likely preventing newer versions from rendering as IE7. However, you should probably just always render in standards mode, and make subtle changes for each browser using conditional comments.
If you must use the x-ua-compatible, then you should do it as an http header, rather than as a meta tag. PHP allows you to addheaders before it starts writing data to the client. Add the header there.
Upon further examination, your code is.. Crap. It's got 180+ validation errors, including things like putting block level elements in header elements. I would suggest making your HTML validate before anything else, as invalid code is the #1 reason for things to render differently on different browsers.
http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fspecialtysales.nfshost.com%2flookingtobuy2.php
Ok, sorry it took so long for me to write this...
The reason the code was malfunctioning was that a header tag didn't get closed.
<h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
<h2 class="header2">Buyers Tools:<h2>
So, if you're experiencing a similar problem make sure your tags are all closed.