I have this situation where the mouse hover shows the complete text but it's jumping on hover.
DEMO: https://jsfiddle.net/xeongtha/
img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
}
.modal__grey--name {
width: 105px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
line-height: 1.1;
}
.modal__grey--name:hover {
overflow: inherit;
}
<label class="checkbox">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Ccircle cx='50' cy='50' r='50' fill='%23F8F8F8'/%3E %3Cpath fill='%23DDD' fill-rule='nonzero' d='M100 50c0-27.57-22.43-50-50-50S0 22.43 0 50c0 14.562 6.262 27.687 16.23 36.833l-.048.042 1.622 1.367c.105.089.22.162.325.249.862.714 1.755 1.393 2.664 2.049.294.213.589.425.889.633.97.669 1.967 1.303 2.985 1.905.222.131.446.258.67.386 1.114.634 2.252 1.232 3.418 1.781.085.04.172.077.258.117 3.798 1.765 7.852 3.062 12.092 3.827l.335.06c1.316.227 2.647.41 3.995.531.163.015.327.024.492.038 1.342.111 2.698.182 4.073.182 1.362 0 2.705-.07 4.04-.178.17-.015.338-.024.507-.038 1.337-.122 2.657-.299 3.96-.522.113-.02.228-.04.34-.062 4.177-.75 8.173-2.016 11.922-3.736.138-.064.278-.124.416-.19 1.122-.527 2.219-1.096 3.293-1.701.267-.151.533-.304.798-.46.979-.577 1.94-1.178 2.875-1.818.336-.23.665-.471.998-.711.798-.575 1.582-1.168 2.344-1.788.169-.136.35-.254.516-.394l1.664-1.39-.05-.041C93.679 77.82 100 64.636 100 50zM3.636 50C3.636 24.435 24.435 3.636 50 3.636c25.565 0 46.364 20.799 46.364 46.364 0 13.776-6.046 26.162-15.617 34.66-.534-.37-1.072-.7-1.623-.976l-15.395-7.697c-1.382-.69-2.24-2.08-2.24-3.623v-5.377c.356-.44.733-.938 1.122-1.485 1.993-2.815 3.59-5.946 4.756-9.315 2.304-1.094 3.791-3.389 3.791-5.98v-6.445c0-1.577-.578-3.106-1.613-4.307v-8.486c.095-.944.43-6.269-3.423-10.662-3.351-3.825-8.775-5.762-16.122-5.762-7.347 0-12.77 1.937-16.122 5.76-3.853 4.393-3.518 9.719-3.423 10.662v8.486c-1.033 1.202-1.613 2.73-1.613 4.307v6.445c0 2.002.898 3.87 2.436 5.13 1.473 5.769 4.504 10.136 5.624 11.616v5.262c0 1.483-.81 2.847-2.113 3.56l-14.376 7.842c-.458.249-.913.54-1.368.865C9.593 75.985 3.636 63.676 3.636 50zm73.562 37.513c-.636.462-1.283.909-1.94 1.336-.302.196-.602.393-.909.584-.858.53-1.73 1.036-2.622 1.509-.196.103-.394.202-.592.303-2.048 1.05-4.166 1.951-6.342 2.684-.077.026-.153.053-.231.078-1.14.378-2.295.715-3.462 1.004l-.01.002c-1.18.29-2.372.532-3.572.73l-.098.019c-1.13.183-2.267.316-3.41.416-.2.018-.403.031-.606.046-1.13.085-2.264.14-3.404.14-1.153 0-2.302-.057-3.445-.142-.199-.015-.397-.027-.593-.046-1.153-.101-2.3-.238-3.437-.423l-.152-.028c-2.404-.401-4.77-.992-7.073-1.765-.07-.024-.144-.05-.215-.073-1.143-.389-2.274-.82-3.385-1.296l-.024-.011c-1.05-.453-2.081-.955-3.1-1.484-.132-.069-.267-.134-.398-.205-.929-.496-1.838-1.033-2.734-1.593-.266-.167-.53-.336-.791-.507-.826-.54-1.64-1.102-2.433-1.696-.082-.062-.16-.128-.242-.19l.175-.098 14.376-7.842c2.473-1.349 4.01-3.936 4.01-6.752l-.003-6.55-.418-.505c-.04-.045-3.97-4.827-5.456-11.302l-.166-.72-.62-.401c-.874-.566-1.398-1.511-1.398-2.531v-6.446c0-.845.358-1.633 1.013-2.223l.6-.542V30.865l-.016-.238c-.006-.043-.542-4.416 2.538-7.927 2.629-2.996 7.134-4.518 13.387-4.518 6.23 0 10.72 1.509 13.356 4.483 3.077 3.475 2.573 7.93 2.57 7.966l-.017 10.365.6.542c.653.59 1.013 1.378 1.013 2.224v6.445c0 1.297-.882 2.473-2.147 2.864l-.904.278-.291.9c-1.073 3.333-2.6 6.411-4.538 9.15-.477.672-.94 1.268-1.338 1.725l-.451.514v6.726c0 2.93 1.629 5.567 4.25 6.876l15.395 7.696c.098.05.195.1.291.151-.194.148-.394.284-.59.426z'/%3E %3C/g%3E %3C/svg%3E" class="dropdown__static--profile">
<span class="modal__grey--name">This is a long text that needs to be cut</span>
<span class="checkmark" style="padding-left: 4px;"></span>
</label>
You can make your label a flexbox and it won't jump anymore:
label {
display: flex;
}
Try this. Remove line-height: 1.1; and add vertical-align: middle;
img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
}
.modal__grey--name {
width: 105px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
}
.modal__grey--name:hover {
overflow: inherit;
}
https://jsfiddle.net/h7mfagb9/7/
Related
I cannot make the inside div to get the whole available space. The idea is to have a "tile" at the middle of the screen and all the content inside, taking all available space minus the padding, no matter the size of the screen, scrolled if necessary. The title is displayed vertically at the side of the tile. I cannot make it work - either the content is small and does not take all available space or takes to much space and does not scroll on small screen but overflow the tile. Adding "overflow: scroll" to the "wrapper" class hides the title. I am going in rounds.
<div class="block block_tile">
<section>
<div class="wrapper">
<h3 class="title">My Service</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.0.0 by #fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z"/></svg>
<div class="content">
<h1>Welcome to Our page. Please log in.</h1>
<button type="submit" name="_continue" class="btn btn-primary">Login</button>
<p>
You can register here.
</p>
</div>
</div>
</section>
</div>
css:
.wrapper {
display: flex;
flex-direction: column;
background-color: $white;
margin: auto;
min-width: 72rem;
max-height: 85vh;
width: 72rem;
min-height: 60rem;
position: absolute;
top: 20%;
border: 4px solid $primary;
padding: 6rem 8rem 6rem 8rem;
color: $dark;
font-size: small;
.content {
display: flex;
flex-direction: column;
justify-content: space-around;
max-height: 100%;
overflow: scroll;
overflow-x: hidden;
h1+p {
margin-top: -2.5rem;
margin-bottom: 5rem;
}
&::-webkit-scrollbar {
display: none;
}
h2 {
margin-bottom: 2rem;
font-style: normal;
font-weight: normal;
font-size: 1.6rem;
line-height: 3rem;
text-align: justify;
}
}
.title {
font-weight: 600;
font-size: 2.5rem;
line-height: 3.8rem;
color: $white;
position: absolute;
bottom: -.5rem;
left: 0;
transform: rotate(270deg);
transform-origin: 0 4rem;
}
I am begginer in web-developing. Nevertheless I hope for aid.
I have one layout that has to be performed as webpage by me. It has header, footer, main. There are one static image in main, one menu and content part in main. All elements situates in correct position if the user does not change the scale in own browser. There's one requirement: footer, header and menu must be painted with some colors, but all content of them must contain in rectangles width of which is 1000px. And don't forget about padding-left and padding-right 10px. If the scale is increased there's horizontal scrollbar and some elements occur in right side.
My requirements:
all components must fit in the first 100% of width. There must not be any need to scroll horizontally.
this vertical scrollbar must disappear
body
{
font-family: PT Sans;
font-size: 14px;
line-height: 22px;
color: grey;
max-width: 100%;/*
overflow-x: hidden;*/
}
#correct_width_header_footer
{
background-color: #D3D3D3;
width: 100%;
clear: left;
}
#internal_width
{
width: 1000px;
margin: auto;
padding-right: 10px;
padding-left: 10px;
}
.header_sect
{
padding-bottom: 65px;
padding-top: 65px;
box-sizing: inherit;
}
#Left_header
{
height: 100px;
}
.phones
{
text-align: right;
font-size: 2em;
}
.menu_width
{
width: 100%;
background-color: grey;
}
.menu
{
color: white;
font-size: 20px;
text-align: center;
padding-bottom: 15px;
padding-top: 15px;
}
.menu a
{
text-decoration: none;
cursor: pointer;
}
.slider
{
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.NewsBlock
{
width: 350px;
color: white;
background-color: grey;
padding-left: 35px;
padding-top: 20px;
padding-bottom: 100px;
margin-right: 60px;
float: left;
}
.article_right
{
width: 510px;/*
border: 1px solid;*/
float: left;
}
.height_lowerSect
{
/*display: inline-block;*/
/*margin-bottom: 700px;*/
}
.footer_sect
{
/*background-color: black;*/
position: relative;
}
#left_footer
{
float: left;
}
#left_footer li
{
list-style-type: none;
}
footer
{
background-color: grey;
width: 100%;
height: 160px;/*
margin-top: 65px;*/
}
.Underline li
{
text-decoration: underline;
}
.Underline
{
/*margin: auto;*/
/*display: block;
margin-left: auto;
margin-right: auto;*/
position: absolute;
left: 350px;
}
.Last
{
position: absolute;
right: 0%;
top: 15px;
}
<body>
<header id="correct_width_header_footer">
<section id="internal_width" class="header_sect">
<img src="logo.png" alt="logo" title="логтотип компании" id="Left_header" style="float: left;">
<section class="phones">
<br>+7(499)777-77-77</br>
<br>+7(499)777-77-77</br>
</section>
</section>
</header>
<main>
<section class="menu_width">
<div id="internal_width" class="menu">
<a>Главная</a> |
<a>Каталог</a> |
<a>Доставка и оплата</a> |
<a>Прайс-лист</a> |
<a>Контакты</a>
</div>
</section>
<img src="slider.jpg" class="slider" alt="slider">
<section class="height_lowerSect" id="internal_width">
<div class="NewsBlock">
<h1>Новости</h1>
<div>
<p>14 сентября 2013 г.
<br>Редизайн веб-сайта архитектурного бюро.
</div>
<div>
<p>14 сентября 2013 г.
<br>Раскрутка интернет-магазина декоративных стикеров и виниловых наклеек.
</div>
<div>
<p>14 сентября 2013 г.
<br>SEO-продвижение сайта поставщика дизельных генераторов.
</div>
<div>
<p>14 сентября 2013 г.
<br>Поисковое продвижение веб-сайта поставщика гидрооборудывания.
</div>
</div>
<section class="article_right">
<h1>Компания "Пиксель-Плюс"</h1>
<p>
Найстарішим з них є перший варіант. До початку вестернізації Японії у середині 19 століття ним позначали будь-який одяг. Ще у 16 столітті португальські місіонери-єзуїти повідомляли у звітах до Європи, що японці називають одяг словом «кімоно» (Kimono). Ця назва перекочувала у більшість іноземних мов, і в українську зокрема. Хоча у домодерній Японії «кімоно» було аналогом універсального поняття «одяг», у Європі та Америці воно стало асоціюватися саме з японським вбранням.
</p>
<p>
Наприкінці 19 століття у Японії збільшилась кількість тих, хто заходився носити західний стрій. Відмінність західного і японського костюму змушувала японців виокремити останній з загального поняття «кімоно». Виник неологізм для позначення традиційного одягу — «вафуку»[3] . До кінця Другої світової війни це слово стало основним для означення японського вбрання. Однак у післявоєнні часи, під впливом американського «розуміння» японської дійсності, універсальний термін «кімоно» почали застосовувати як один з синонімів «вафуку».
</p>
<p>
Відповідно, у сучасній японській мові «кімоно» отримало два значення. У широкому розумінні — це загальний термін для окреслення будь-якого одягу, а вузькому — різновид вафуку.
</p>
</section>
</section>
</main>
<footer id="correct_width_header_footer">
<section id="internal_width" class="footer_sect">
<div id="left_footer">
<ul>
<li>2012-2013 ЗАО "Комания"</li>
<li>info#name.ru</li>
</ul>
</div>
<div id="left_footer" class="Underline">
<ul>
<li>Главная</li>
<li>Каталог</li>
<li>Доставка и оплата</li>
<li>Прайс-лист</li>
<li>Контакты</li>
</ul>
</div>
<div id="left_footer" class="Last">
<u>Разработка сайта</u> -
<br> компания "Пиксель-Плюс"
</div>
</section>
</footer>
</body>
Adding CSS media queries would really help in your case. I would create a media query where your 1000px width's will be set to 100% if the resolution becomes to small. Here's a quick example on how to approach it:
/* Screens that are less then 1020px wide */
#media screen and (max-width: 1020px) {
#internal_width {
width: 100%;
}
}
I think you also need to lose some of the other hardcode widths and make them percentage based or give them an automatic width by using flexbox in combination with flex-grow. This would make them smaller when the screen width is smaller. But it will keep the aspect ratio of your content. I would also remove the floats in your code. For example if you want to have more flexibility in the main content you can do it like this:
#internal_width {
display: flex;
width: 1000px;
margin: auto;
padding-right: 10px;
padding-left: 10px;
}
.NewsBlock {
width: 350px;
color: white;
background-color: grey;
padding: 20px 0 100px 35px;
margin-right: 60px;
}
.article_right {
flex-grow: 1;
}
It set's the .NewsBlock content to 350px and the .article_right element next to it will just take up the space that it can have (until the combined value reaches 1000px). You can also apply this approach to your other elements as well.
Here I'm trying to position an SVG icon over a CSS border, but I'm facing a problem with the CSS border. As per the design, the border should be in the background, and the icon will be in front. I'm trying to solve using z-index!
Design
Output
.se-venue-cta {
width: 300px;
text-align: center;
margin: 5% auto;
background: #000;
background: #FFF1EA;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
padding: 20px;
position: relative;
z-index: 2;
}
.se-venue-cta-text p {
color: #FE6F48;
text-align: center;
}
.se-venue-cta-text {
border: 2px solid #FE6F48;
border-radius: 10px;
margin-bottom: 30px;
}
.se-venue-cta-btn {
height: 44px;
}
.se-venue-cta-btn a {
transition: all 0.3s ease-in-out;
display: flex;
background: #FE6F48;
border-radius: 6px;
height: 100%;
justify-content: center;
align-items: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 16px;
}
span {
display: block;
position: absolute;
left: 50%;
top: 8px;
transform: translateX(-50%);
z-index: 999;
overflow: hidden;
}
<div class="se-venue-cta">
<div class="se-venue-cta-text">
<p> The average wedding costs $33,900. Get a quote now and let us plan you a beautiful elopement, while saving you over $28,000</p>
</div>
<div class="se-venue-cta-btn">
Get a Quote
</div>
<!-- svg icon -->
<span>
<svg width="20" height="27" viewBox="0 0 20 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7889 15.4035C12.6086 15.6051 12.4191 15.798 12.2211 15.9818C11.6767 15.1346 11.5056 13.9309 11.8133 12.8475C12.0244 12.1027 12.5644 11.1263 13.39 10.8225C14.1 10.5615 14.6111 11.1791 14.6856 11.8305C14.8344 13.1242 12.79 15.4035 12.79 15.4035H12.7889ZM13.1056 18.3938C13.9133 18.7054 14.7944 18.7301 15.7156 18.4556C16.3041 18.2729 16.8621 18.0017 17.3711 17.6512C14.41 22.5911 10 27 10 27C10 27 5.66778 22.6688 2.70556 17.7806C3.57333 17.4521 4.46778 16.5656 5.37333 15.129C5.97556 14.175 6.55889 13.0028 7.03889 11.8046L7.1 11.9216C7.16667 12.0566 7.23556 12.1916 7.30444 12.3266C7.82667 13.3571 8.36778 14.4214 8.47111 15.4991C8.53444 16.1764 8.26444 16.3913 8.17445 16.4621C7.71889 16.8221 6.70778 16.8435 5.71222 16.5139C5.57924 16.4695 5.43609 16.4669 5.30162 16.5064C5.16715 16.546 5.04767 16.6259 4.95889 16.7355C4.87133 16.8441 4.81936 16.9777 4.8102 17.1176C4.80104 17.2575 4.83515 17.3969 4.90778 17.5163C5.63 18.6997 6.97444 19.1677 8.27222 19.1677C8.76111 19.1677 9.24333 19.1014 9.68333 18.9821C10.51 18.7571 11.3322 18.3622 12.1011 17.8301H12.1033C12.4105 18.063 12.7477 18.2523 13.1056 18.3926V18.3938ZM10 0C15.5222 0 20 3.49537 20 10.2487C20 10.8934 19.9089 11.5673 19.7444 12.2591C19.2233 14.1401 17.2956 16.5578 15.3222 17.1461C15.0599 17.2262 14.7883 17.2705 14.5144 17.2778C14.2898 17.283 14.0654 17.2569 13.8478 17.2001C13.6313 17.1424 13.4235 17.0554 13.23 16.9414L13.2122 16.9301C13.42 16.7355 13.6211 16.5296 13.8144 16.3136L13.8678 16.2551C14.9367 15.0626 16.2678 13.5776 16.05 11.6764C15.9544 10.8371 15.5111 10.1014 14.8644 9.70537C14.2844 9.34987 13.5922 9.29138 12.9133 9.54113C11.6067 10.0215 10.8056 11.3715 10.4911 12.4751C10.0611 13.9894 10.3244 15.6442 11.1378 16.8289C10.5778 17.2 9.96466 17.4815 9.32 17.6636C9.09778 17.7232 8.86556 17.7649 8.62889 17.7874C8.77111 17.7154 8.90445 17.6299 9.02889 17.532C9.46 17.1911 9.94889 16.5409 9.83778 15.372C9.71111 14.0355 9.08333 12.8003 8.53 11.7101L8.33 11.313C8.29087 11.2375 8.25086 11.1625 8.21 11.088C7.98778 10.6684 7.81 10.3151 7.67111 10.017L7.72667 9.86737C7.93778 9.30937 8.29 8.37337 7.66 7.70625C7.52713 7.56253 7.35976 7.4561 7.17419 7.39735C6.98862 7.3386 6.79118 7.32952 6.60111 7.371C6.44788 7.40464 6.30451 7.47403 6.18241 7.57363C6.06031 7.67323 5.96285 7.80031 5.89778 7.94475C5.68667 8.40825 5.77 9.0585 6.20333 10.0935C5.11 13.4179 3.13444 16.47 2.00222 16.5566C0.825556 14.3955 0 12.1882 0 10.2487C0 3.49537 4.47778 0 10 0Z" fill="#FF4816"/>
</svg>
</span>
</div>
Add background in span same as the background and add padding in it:
.se-venue-cta {
width: 300px;
text-align: center;
margin: 5% auto;
background: #000;
background: #FFF1EA;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
padding: 20px;
position: relative;
z-index: 2;
}
.se-venue-cta-text p {
color: #FE6F48;
text-align: center;
}
.se-venue-cta-text {
border: 2px solid #FE6F48;
border-radius: 10px;
margin-bottom: 30px;
}
.se-venue-cta-btn {
height: 44px;
}
.se-venue-cta-btn a {
transition: all 0.3s ease-in-out;
display: flex;
background: #FE6F48;
border-radius: 6px;
height: 100%;
justify-content: center;
align-items: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 16px;
}
span {
display: block;
position: absolute;
left: 50%;
top: 8px;
transform: translateX(-50%);
z-indix: 999;
overflow: hidden;
background
}
.svg-wrap {
background: #FFF1EA;
padding: 0 10px;
}
<div class="se-venue-cta">
<div class="se-venue-cta-text">
<p> The average wedding costs $33,900. Get a quote now and let us plan you a beautiful elopement, while saving you over $28,000</p>
</div>
<div class="se-venue-cta-btn">
Get a Quote
</div>
<!-- svg icon -->
<span class="svg-wrap">
<svg width="20" height="27" viewBox="0 0 20 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7889 15.4035C12.6086 15.6051 12.4191 15.798 12.2211 15.9818C11.6767 15.1346 11.5056 13.9309 11.8133 12.8475C12.0244 12.1027 12.5644 11.1263 13.39 10.8225C14.1 10.5615 14.6111 11.1791 14.6856 11.8305C14.8344 13.1242 12.79 15.4035 12.79 15.4035H12.7889ZM13.1056 18.3938C13.9133 18.7054 14.7944 18.7301 15.7156 18.4556C16.3041 18.2729 16.8621 18.0017 17.3711 17.6512C14.41 22.5911 10 27 10 27C10 27 5.66778 22.6688 2.70556 17.7806C3.57333 17.4521 4.46778 16.5656 5.37333 15.129C5.97556 14.175 6.55889 13.0028 7.03889 11.8046L7.1 11.9216C7.16667 12.0566 7.23556 12.1916 7.30444 12.3266C7.82667 13.3571 8.36778 14.4214 8.47111 15.4991C8.53444 16.1764 8.26444 16.3913 8.17445 16.4621C7.71889 16.8221 6.70778 16.8435 5.71222 16.5139C5.57924 16.4695 5.43609 16.4669 5.30162 16.5064C5.16715 16.546 5.04767 16.6259 4.95889 16.7355C4.87133 16.8441 4.81936 16.9777 4.8102 17.1176C4.80104 17.2575 4.83515 17.3969 4.90778 17.5163C5.63 18.6997 6.97444 19.1677 8.27222 19.1677C8.76111 19.1677 9.24333 19.1014 9.68333 18.9821C10.51 18.7571 11.3322 18.3622 12.1011 17.8301H12.1033C12.4105 18.063 12.7477 18.2523 13.1056 18.3926V18.3938ZM10 0C15.5222 0 20 3.49537 20 10.2487C20 10.8934 19.9089 11.5673 19.7444 12.2591C19.2233 14.1401 17.2956 16.5578 15.3222 17.1461C15.0599 17.2262 14.7883 17.2705 14.5144 17.2778C14.2898 17.283 14.0654 17.2569 13.8478 17.2001C13.6313 17.1424 13.4235 17.0554 13.23 16.9414L13.2122 16.9301C13.42 16.7355 13.6211 16.5296 13.8144 16.3136L13.8678 16.2551C14.9367 15.0626 16.2678 13.5776 16.05 11.6764C15.9544 10.8371 15.5111 10.1014 14.8644 9.70537C14.2844 9.34987 13.5922 9.29138 12.9133 9.54113C11.6067 10.0215 10.8056 11.3715 10.4911 12.4751C10.0611 13.9894 10.3244 15.6442 11.1378 16.8289C10.5778 17.2 9.96466 17.4815 9.32 17.6636C9.09778 17.7232 8.86556 17.7649 8.62889 17.7874C8.77111 17.7154 8.90445 17.6299 9.02889 17.532C9.46 17.1911 9.94889 16.5409 9.83778 15.372C9.71111 14.0355 9.08333 12.8003 8.53 11.7101L8.33 11.313C8.29087 11.2375 8.25086 11.1625 8.21 11.088C7.98778 10.6684 7.81 10.3151 7.67111 10.017L7.72667 9.86737C7.93778 9.30937 8.29 8.37337 7.66 7.70625C7.52713 7.56253 7.35976 7.4561 7.17419 7.39735C6.98862 7.3386 6.79118 7.32952 6.60111 7.371C6.44788 7.40464 6.30451 7.47403 6.18241 7.57363C6.06031 7.67323 5.96285 7.80031 5.89778 7.94475C5.68667 8.40825 5.77 9.0585 6.20333 10.0935C5.11 13.4179 3.13444 16.47 2.00222 16.5566C0.825556 14.3955 0 12.1882 0 10.2487C0 3.49537 4.47778 0 10 0Z" fill="#FF4816"/>
</svg>
</span>
</div>
Html code:
<div class="CorpPerformance">
<div class="row">
<div class="DashboardTitle">
3 Month
</div>
<div class="DashboardScore" style="font-weight:bold">
<a class="redirectLink" data-criteria-corporatesummarycategory="none" data-criteria-corporatesummaryexpand="0" data-criteria-customerpay="" data-criteria-expressservice="" data-criteria-maintenanceplan="" data-criteria-modelname="" data-criteria-rspenddate="" data-criteria-rspstartdate="" data-criteria-warrantypay="" data-criteria-yearmodel="" data-criteria-department="Sales" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&[October 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/OFSSurveySummary">950</a>
</div>
<div class="DashboardIcon">
<a class="bootstrap-modal" data-criteria-chartcustomerpay="" data-criteria-chartexpressservice="" data-criteria-chartmaintenanceplan="" data-criteria-chartmodelname="" data-criteria-chartmodelyear="" data-criteria-chartwarrantypay="" data-criteria-chartdepartment="SALES" data-criteria-chartmeasurename="Response Default Computation" data-criteria-chartmeasuretype="score" data-criteria-chartorganization="" data-criteria-chartpagetitle="NSSI Trend" data-criteria-chartreportperiod="[Collection Date].[Calendar].[Calendar Month].&[October 2014]" data-criteria-chartsummaryperiod="3MONTH" data-criteria-charttitle="NSSI" data-criteria-chartwheretuple="[Questionnaire].[Questionnaire].[Question].&[OFSP]&[OFSP13011]" href="/Trend" modal-no-resize="True" upper="NSSI Trend"><span>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHxSURBVFhH7Zg9SEJRFMcdW4QmcRI3xclNcYiGBocGB4dqMQTXdHdoFRqsoCAtJEiMKCpCHkHkECFJUNQgNqgEIQ19DIFBw8n/8SkUPft66n31fnBArnLh/O69556roQHp8WEYSOctuhgFhBdTLN5RLndN2WxZHukNQoopFGrk9W6S1Zogu32FhofXyeFI0cBAnHy+HUqlLunh4Vn+dWfq9RcWG4+f0sjIBnk8aZ5vcHC+kfgMz/URQolBspHIIdlsyxSLnVCl8ih/0wRJbm9f0eSkREbjHJlMC5wkYmIiS4GAxEJbY2bzIsvEZ8w7O3vKkhCfiRVGDFYOuwMr+1Vqtad2oonEOU1NHZAkldtj78V+h76LyedvWIjfv8uJikLfxGA1x8b2yO1O8+qKRs/FYFeMjm5xHclkivKoePRMTKuw4qaZnj7mQioyPRETDjeFoLCKLqRF18XgGh0f3/ty3yEKXRODnYGeQqmBEp2uiMHuQIeKnkKrqC6mVLqnoaGMpqUAVcXg+rVYlrht1zqqiMHRwfsFDZvWiqwSvxaTTF5wS6/VIqvEj8Wcnd3yq9XlWqNq9eePNVHpKAZvGCSPY4JuFREK7fMOcTpXhXzjqEVHMQDJ45hASjR6RMGgxP+q/XU+FfNf0cUo0Bajx/sw0CuzQYKdi8e4ggAAAABJRU5ErkJggg==">
</span></a> </div>
<div class="CvalNational">
<span style="color:#fff;font-weight:bold;">
National
</span>
</div>
<br>
</div>
</div>
JSfiddle link :
http://jsfiddle.net/8nbyc9m7/
Output without zoom :
if i zoom to 110% or 150% or 60% zooming it gives different output. that means last section is not aligned properly.
with zoom:
how to maintain the same output for all levels of zooming in all browsers.
Setting the container to have a width equals to the parent container does the trick for me
http://jsfiddle.net/kursion/8nbyc9m7/2/
Btw... you should probably concider doing a simple table ?
.CorpPerformance {
padding-left: 5px; <----------- changed
display: table;
border: 2px solid gray;
border-radius: 5px;
vertical-align: middle;
line-height: 30px;
width: 340px; <----------- changed
}
.CorpPerformance .DashboardTitle {
width: 80px; <----------- changed
}
.CorpPerformance .DashboardScore {
width: 40px; <----------- changed
}
.CorpPerformance .DashboardIcon {
width: 100px; <----------- changed
}
.CorpPerformance .CvalNational {
width: 119px; <----------- changed
text-align: center;
border-left: 1px dotted black;
background-color: gray;
}
80px + 40px + 100px + 119px + 1px(border) = 340px
And I removed the padding
.CorpPerformance .row > div {}
Edit: with a table... it's much more easier and zoom works ! Check the link in my comment
http://jsfiddle.net/victor_007/8nbyc9m7/3/
* {
box-sizing:border-box;
}
use box-sizing:border-box; which gives border and padding from inside and set the width exactly which you want
Here is your solution.
What I did is to correct your table and remove the width of the last cell so that it can be flexible. I have used table and tr and td instead of div as it will make your css lighter.
If you can't or don't want to change your div for table, tr and td, you can always add the following css on your div: display: table; to replace table, display: table-row; to replace tr, and display: table-cell; to replace td. The result will be the same.
.CorpPerformance {
border: 2px solid gray;
border-radius: 5px;
vertical-align: middle; /* it's defined for the whole table so you don't need to write it again */
line-height: 30px;
max-width: 343px;
border-spacing: 0; /* important for Chrome browser that add spacing */
}
img {
max-width: 100%;
vertical-align: middle;
border: 0;
}
.CorpPerformance > td {
padding: 0 5px 3px; /* I've just simplified the writing */
}
.CorpPerformance .DashboardTitle {
width: 110px;
}
.CorpPerformance .DashboardScore {
width: 25px;
}
.CorpPerformance .DashboardIcon {
width: 75px;
}
.CorpPerformance .CvalNational { /* no width anymore */
text-align: center;
border-left: 2px dotted black;
background-color: gray;
color: #fff; /* I've remove your span to put the css here, if you can do this it's best to keep html free of css */
font-weight: bold;
}
<table class="CorpPerformance">
<tr>
<td class="DashboardTitle">3 Month</td>
<td class="DashboardScore" style="font-weight:bold"> <a class="redirectLink" data-criteria-corporatesummarycategory="none" data-criteria-corporatesummaryexpand="0" data-criteria-customerpay="" data-criteria-expressservice="" data-criteria-maintenanceplan="" data-criteria-modelname="" data-criteria-rspenddate=""
data-criteria-rspstartdate="" data-criteria-warrantypay="" data-criteria-yearmodel="" data-criteria-department="Sales" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&[October 2014]" data-criteria-summaryperiod="3MONTH"
href="/Corporate/OFSSurveySummary">950</a>
</td>
<td class="DashboardIcon">
<a class="bootstrap-modal" data-criteria-chartcustomerpay="" data-criteria-chartexpressservice="" data-criteria-chartmaintenanceplan="" data-criteria-chartmodelname="" data-criteria-chartmodelyear="" data-criteria-chartwarrantypay="" data-criteria-chartdepartment="SALES"
data-criteria-chartmeasurename="Response Default Computation" data-criteria-chartmeasuretype="score" data-criteria-chartorganization="" data-criteria-chartpagetitle="NSSI Trend" data-criteria-chartreportperiod="[Collection Date].[Calendar].[Calendar Month].&[October 2014]"
data-criteria-chartsummaryperiod="3MONTH" data-criteria-charttitle="NSSI" data-criteria-chartwheretuple="[Questionnaire].[Questionnaire].[Question].&[OFSP]&[OFSP13011]" href="/Trend" modal-no-resize="True" upper="NSSI Trend"><span>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHxSURBVFhH7Zg9SEJRFMcdW4QmcRI3xclNcYiGBocGB4dqMQTXdHdoFRqsoCAtJEiMKCpCHkHkECFJUNQgNqgEIQ19DIFBw8n/8SkUPft66n31fnBArnLh/O69556roQHp8WEYSOctuhgFhBdTLN5RLndN2WxZHukNQoopFGrk9W6S1Zogu32FhofXyeFI0cBAnHy+HUqlLunh4Vn+dWfq9RcWG4+f0sjIBnk8aZ5vcHC+kfgMz/URQolBspHIIdlsyxSLnVCl8ih/0wRJbm9f0eSkREbjHJlMC5wkYmIiS4GAxEJbY2bzIsvEZ8w7O3vKkhCfiRVGDFYOuwMr+1Vqtad2oonEOU1NHZAkldtj78V+h76LyedvWIjfv8uJikLfxGA1x8b2yO1O8+qKRs/FYFeMjm5xHclkivKoePRMTKuw4qaZnj7mQioyPRETDjeFoLCKLqRF18XgGh0f3/ty3yEKXRODnYGeQqmBEp2uiMHuQIeKnkKrqC6mVLqnoaGMpqUAVcXg+rVYlrht1zqqiMHRwfsFDZvWiqwSvxaTTF5wS6/VIqvEj8Wcnd3yq9XlWqNq9eePNVHpKAZvGCSPY4JuFREK7fMOcTpXhXzjqEVHMQDJ45hASjR6RMGgxP+q/XU+FfNf0cUo0Bajx/sw0CuzQYKdi8e4ggAAAABJRU5ErkJggg==" /></span></a>
</td>
<td class="CvalNational">Test National</td>
</tr>
</table>
I have problem with floating in IE6. The HTML code:
<div id="stran">
<img src="../Slike/prejsnja.png" alt="Prejšnja" onclick="prejsnja();" onmouseover="this.style.cursor='pointer';" id="prejsnja" />
STRAN <?php dobiStran(); ?>
<img src="../Slike/naslednja.png" alt="Naslednja" onclick="naslednja();" onmouseover="this.style.cursor='pointer';" id="naslednja" />
</div>
CSS:
#prejsnja {
float: left;
}
#naslednja {
float: right;
}
#stran {
position: relative;
width: 400px;
border: 2px black solid;
margin: 0 auto;
font-family: "Comic Sans MS"; /*Izberemo drugo pisavo, kot pa tista ki je definirana v body.*/
color: #599cd4;
text-align: center; /*Postavimo na center.*/
font-size: 30px; /*Vecja pisava, ker gre za naslov.*/
}
The left image floats to the left, as it should, the text is centered, the right image also floats to the right as it should, but has for some reason some kind of margin-top, that only appears in IE6. Here is example in other browsers:
And in IE6:
Try moving your HTML elements around a bit, like this:
<div id="stran">
<img src="../Slike/prejsnja.png" alt="Prejšnja" onclick="prejsnja();" onmouseover="this.style.cursor='pointer';" id="prejsnja" />
<img src="../Slike/naslednja.png" alt="Naslednja" onclick="naslednja();" onmouseover="this.style.cursor='pointer';" id="naslednja" />
STRAN <?php dobiStran(); ?>
</div>
And then your styles become:
#prejsnja {
float: left;
width: 100px;
}
#naslednja {
float: right;
width: 100px;
}
#stran {
position: relative;
width: auto;
border: 2px black solid;
margin: 0 auto;
font-family: "Comic Sans MS"; /*Izberemo drugo pisavo, kot pa tista ki je definirana v body.*/
color: #599cd4;
text-align: center; /*Postavimo na center.*/
font-size: 30px; /*Vecja pisava, ker gre za naslov.*/
}
I've assumed your arrow images are 100px, but just change these to whatever it is they actually are.