InnerText div doesnt fit to the outer div Text if i give a top offset to the InnerText div it fits perfectly but i cant hardcord this as entire html is created in Runtime using C# application, i cant find the reason why is this happening.
Please bear with me as i am totally noob in html and Css.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Title</title>
<meta http-equiv='X-UA-Compatible' content='IE=9'/>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<style type='text/css'>body {background-color:#d4c3d4 ; overflow: hidden; }</style>
</head>
<body>
<div id='text' style='height:110px;'>
<div id='innerText' style='position:relative; left: 0px; top: 0px; white-space: nowrap'>
<span class='article' style='padding-left:4px;'>
<span style="font-size:110px">
<span style="color:#FF8C00">
<span style="font-family:times new roman,times,serif">[Title] - [date] - [description]</span>
</span>
</span>
</span>
</div>
</div>
</body>
Output:
Edited:
I Cant change the height of div as it plays in LED every Pixel matters and increasing its height change an entire resoltion
Note that the height: 110px for outer div and the font-size:110px in the span this makes one parent div smaller than the text it contains,
the solution :
1- change the height to bigger value or delete it from style. or
2- change the font-size to smaller value
as for automatic creation for html , I recommend shrinking the size of the innertext to: say 80px.
Method 1: Only Remove style=height:110px; I added a border for you see Result :
body {background-color:#d4c3d4 ; overflow: hidden; }
<div id='text' style='border: 1px solid red;'>
<div id='innerText' style='position:relative; left: 0px; top: 0px; white-space: nowrap'>
<span class='article' style='padding-left:4px;'>
<span style="font-size:110px">
<span style="color:#FF8C00">
<span style="font-family:times new roman,times,serif">[Title] - [date] - [description]</span>
</span>
</span>
</span>
</div>
</div>
Method 2 : use min-height instead of height :
body {background-color:#d4c3d4 ; overflow: hidden; }
<div id='text' style='min-height:110px;border: 1px solid red;'>
<div id='innerText' style='position:relative; left: 0px; top: 0px; white-space: nowrap'>
<span class='article' style='padding-left:4px;'>
<span style="font-size:110px">
<span style="color:#FF8C00">
<span style="font-family:times new roman,times,serif">[Title] - [date] - [description]</span>
</span>
</span>
</span>
</div>
</div>
body {background-color:#d4c3d4 ; overflow: hidden; }
#text {
border:thin black solid;
width:auto;
}
<div id='text' >
<div id='innerText' style='position:relative; left: 0px; top: 0px;'>
<span class='article' style='padding-left:4px;'>
<span style="font-size:110px">
<span style="color:#FF8C00">
<span style="font-family:times new roman,times,serif">[Title] - [date] - [description]</span>
</span>
</span>
</span>
</div>
</div>
Is this the same that you want?
I have removed white-space : nowrap;
You can use white-space : break-word so that the extra contents will be in new line if it doesn't fit on the same line.
Related
I would like set width of 3rd column of to maximum width to the end of the page. However, I cannot set to width: 100%. If I set width: 100%, if too long word will go to the next line. I don't want put into next line for long sentence.
May I know how can I set the width of third above to the end of the page if sentence is too long and not go to the next line at all.
Here is my css code
.harbor {
min-width: 7.5em;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Here is my html code
<div class="gangway-header-container">
<div>
<h1 class="gangway-header-text" data-bind="text: gateLocation, attr: { 'title': gateLocation}">
</h1>
</div>
<div class="gangway-configurarion-reposition">
<div class="gangway-configuration-layout oj-flex">
<div class="gate-type-wrapper oj-flex">
<oj-label id="typeLbl" for="gateType">
<span data-bind='text: pageLabels().type'></span> :
</oj-label>
<oj-label
class="gate-type-label"
id="gateType">
<span>
<oj-bind-text value="{{gateTypeLabel}}"></oj-bind-text>
</span>
</oj-label>
</div>
<div class="traffic-direction-wrapper oj-flex">
<oj-label id="directionLbl" for="trafficDirection" >
<span data-bind='text: pageLabels().direction'></span> :
</oj-label>
<oj-select-one
id="trafficDirection"
class="traffic-direction-selection"
options="[[trafficDirectionArray]]"
value="{{selectedTrafficDirection}}"
on-value-changed="[[trafficDirectionChanged.bind($data)]]">
</oj-select-one>
</div>
<!-- Add new Harbor display here -->
<div class="harbor oj-flex">
<oj-label id="harborLbl" for="harborType">
<span data-bind='text: pageLabels().harbor'></span> :
</oj-label>
<oj-label class="harbor-type-label" :title="[[gateTypeLabel]]" id="harborType">
<span>
<oj-bind-text value="{{harborLabel}}"></oj-bind-text>
</span>
</oj-label>
</div>
</div>
</div>
</div>
If you're using flexbox, you can set a property of "flex-wrap" to "nowrap" so that the children elements do not "go to the next line":
.parent-flex-container {
flex-wrap: nowrap
}
I am creating a website in html & css through Django. But I am having some difficulties. Here is my code for the buggy element of the code:
detail.html
<div class="contact-info" style="float: right!important; position: sticky!important; margin-right: 25px!important; margin-left: 750px!important; width: 30%!important; height: 50px!important; padding-bottom: 195px!important; margin-top: -2200px!important;">
<div class="elements" style=" margin-bottom: 200px!important; padding-bottom: 20px!important;">
<div class="address">
<span class="icon-map-marker"></span>
<p> <a style="color:grey!important; border:none!important;" href="{{restraunt.address_link}}">{{restraunt.address}}</a></p>
</div>
<div class="address" >
<span class="icon-mobile-phone"></span>
<p style="color: grey!important; border: none!important;"><a style="color:grey!important; border: none!important;" href="tel:{{restraunt.phone}}" style="color: grey!important;">+{{restraunt.phone|phonenumber}}</a> </p>
</div>
<div class="address">
<span class="icon-link"></span>
<p><a style="color:grey!important; border: none!important;" href="{{restraunt.website}}">{{restraunt.website}}</a></p>
</div>
<div class="address">
<span style="" class="icon-time"></span>
<p>Mon - Sun, {{restraunt.opening_hour}} - {{restraunt.closing_hour}} <br>
</div>
</div>
</div>
The code seems to work fine until I enter a new review. Then, the element jumps down and keeps jumping as a new review is added. I don't know how to fix this as I tried postion: relative, postition: absolute and position: sticky but all seem to have failed. I will put some screenshots to explain it better.
Before new Review:
After a new Review:
I have been unable to solve this problem for a long time now. I would really appreciate any help. Thank you
Good day.
I need help in options Google maps.
My site has block with Google maps. The map has options to display avatar user if he registered in Google+ (gmail). The avatar has circle form with diametr about 32px (how in the example: https://developers.google.com/maps/documentation/javascript/examples/map-coordinates?hl=ru).
I want that avatar has square form with size 60x60px and margin-right 70px.
How do it?
Thank you advance!
The code avatar on Google maps:
<iframe src="https://www.google.com/maps/api/js/widget?pb=!1m2!1u22!2s12a!2sru#WzEsMTUxXQ.."
frameborder="0" allowtransparency="true" scrolling="no"
style="border: 0px; overflow: hidden; position: absolute; right: 0px; visibility: visible; width: 37px; height: 37px;">
<html jstcache="0">
<head>
<link id="__2__" type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<style>div.login-control{color:white;font-family:Roboto,Arial;font-size:11px;font-weight:500}div.login{border-radius:2px;background-color:#5f84f2;padding:4px 8px 4px 8px;cursor:pointer}.login-control .tooltip-anchor{color:#5B5B5B;display:inline;font-family:Roboto,Arial;font-size:13px;font-weight:normal;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;width:50%}.login-control .tooltip-content{background-color:white;font-weight:normal;right:0px}div.login a:link{text-decoration:none;color:inherit}div.login a:visited{color:inherit}div.login a:hover{text-decoration:underline}div.profile-photo{border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,0.2);width:32px;height:32px;overflow:hidden}div.profile-photo-light{background-color:white}div.profile-photo-light div{color:black}div.profile-photo-dark{background-color:black}div.profile-photo-dark:hover{background-color:white;color:black}div.profile-photo img{float:right;width:32px;height:32px}.tooltip-anchor{width:100%;position:relative;float:right;z-index:1}.tooltip-anchor>.tooltip-tip-inner{background-color:transparent;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid white;height:0;left:-8px;position:absolute;top:5px;width:0;z-index:1}.tooltip-content{border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.2);display:inline-block;line-height:100%;padding:10px 11px 9px 11px;position:absolute;margin:0;top:10px;white-space:nowrap}.tooltip-content a{color:#3a84df;text-decoration:none}.tooltip-content a:hover{text-decoration:underline}.tooltip-content .user-email,.tooltip-content .user-name{padding-right:12px}.sign-in-explanatory-text{margin-bottom:6px}.tooltip-content a{overflow:hidden}.g-logo{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/white_google_icon.png);background-size:14px 12px;display:inline-block;height:12px;padding-right:6px;vertical-align:middle;width:8px}.gm-china .g-logo{background-image:url(http://maps.gstatic.cn/mapfiles/api-3/images/white_google_icon.png)}#media (-webkit-min-device-pixel-ratio:1.2),(min-resolution:1.2dppx),(min-resolution:116dpi){.g-logo{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/white_google_icon_hdpi.png)}.gm-china .g-logo{background-image:url(http://maps.gstatic.cn/mapfiles/api-3/images/white_google_icon_hdpi.png)}}.sprite-sheet{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/signed_in_api_icons2.png);background-size:100px 50px}.gm-china .sprite-sheet{background-image:url(http://maps.gstatic.cn/mapfiles/embed/images/signed_in_api_icons2.png)}#media (-webkit-min-device-pixel-ratio:1.2),(min-resolution:1.2dppx),(min-resolution:116dpi){.sprite-sheet{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/signed_in_api_icons2_hdpi.png);background-size:100px 50px}.gm-china .sprite-sheet{background-image:url(http://maps.gstatic.cn/mapfiles/embed/images/signed_in_api_icons2_hdpi.png)}}</style>
</head>
<body jstcache="0" style="overflow: hidden;">
<script>
window.parent.frames['gm-master'].initWidget(window);
</script>
<div jstcache="0" style="position: absolute; top: 0px; right: 0px; width: 500px; height: 500px;">
<div jstcache="0" style="position: absolute; top: 0px; right: 4px;">
<div jstcache="69" class="login-control" jsaction="mouseenter:loginControl.resize;mouseleave:loginControl.resize;loginControl.resize">
<div jstcache="2" jsaction="loginControl.login" class="login" style="display: none">
<a jstcache="3"> <span class="g-logo"> </span><span>Войти</span></a>
</div>
<div jstcache="4" class="profile-photo-light profile-photo" jsan="7.profile-photo-light,7.profile-photo">
<img jstcache="5" src="https://lh5.googleusercontent.com/-R_xY89bx5Ss/AAAAAAAAAAI/AAAAAAAAABg/xx_czODJ35o/s32-c/photo.jpg">
</div>
<div class="tooltip-anchor">
<div class="tooltip-tip-inner"></div>
<div class="tooltip-content">
<div jstcache="6" class="sign-in-explanatory-text" style="display: none">Войдите в свой аккаунт, и Google Карты станут ещё удобнее</div>
<div>
<a jstcache="7" class="" style="display: none"></a>
<a target="_blank" jstcache="8" href="https://plus.google.com/113092786366482147078?socpid=238&socfid=maps_api_v3:logincontrol" class="user-name" jsan="7.user-name,8.href,0.target">+aleksandr</a>
<a target="blank_" jstcache="9" href="https://support.google.com/maps/?p=thirdpartymaps&hl=ru" jsaction="mouseup:loginControl.learnMore">Подробнее...</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
tag:
<img jstcache="5" src="https://lh5.googleusercontent.com/-R_xY89bx5Ss/AAAAAAAAAAI/AAAAAAAAABg/xx_czODJ35o/s32-c/photo.jpg">
It's currently not possible to customize the UI for the Signed In experience. I'd recommend opening a feature request on the Google Maps API Issue Tracker describing your use case so the team can start tracking interest in it.
I know this is 2 months old question and already chosen an answer, but if anyone else if looking for this. you can achieve the margin thing applying css directly to the iframe element.
This is the code i'm using
iframe[src^="https://www.google.com/maps/api/js/widget?"] {
margin-top: 50px;
margin-right: 52px;
}
How it looks
I'm trying to get an asterix "*" to appear directly above the "pp", however if I try to insert this in a span adjacent to the span containing the "pp" or directly after the price, it does not sit above as desired..
Can somebody please help? My html is below
<div class="fist-div">
<span>
<span data-bind="text: '£' + price">£731*</span>
<small>pp</small>
</span>
</div>
You can use sup tag to do this. Try this.
CSS & HTML
sup{color:red}
<div class="fist-div">
<span>
<span data-bind="text: '£' + price">£731</span>
<small>pp<sup>*</sup></small>
</span>
</div>
You can rearrange it wherever you want * to appear. Hope this help.
If you want * directly above pp, you need to adjust the position.
.first-div small {
position: relative;
left: -10px;
top: 2px;
}
<div class="first-div">
<span>
<span data-bind="text: '£' + price">£731*</span>
<small>pp</small>
</span>
</div>
You can do like this..
sup {
color: green;
position: relative;
left: 10px;
}
<div class="fist-div">
<span>
<span data-bind="text: '£' + price">£731<sup>*</sup></span>
<small>pp</small>
</span>
</div>
I'm trying to emulate a tab bar with HTML.
I'd like the width of each tab to be set according to the text length (that is, no fixed width) and to word wrap in case it exceeds the screen width.
I've almost achieved it:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
But, there's a very annoying space between the opening tab image and the closing one.
As you can see, I've tried with padding, spacing, and border, with no luck.
EDIT:
I tried replacing the spans with a small table (one row, three <td>s), but it's the same, only the space between is smaller.
Another way besides njbair's one is to add font-size: 0 to parent element.
I prefer this one because it's aesthetically better for tab designing.
Instead of this:
<div id="tabs">
<span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>
...we can use this:
<div id="tabs" style="font-size: 0;">
<span id="mytab1">Tab 1</span>
<span id="mytab2">Tab 2</span>
<span id="mytab3">Tab 3</span>
</div>
...which looks better :)
Of course, don't forget to define your real font size for tabs.
EDIT:
There's one more way to get rid of spaces: by adding comments.
Example:
<div id="tabs">
<span id="mytab1">Tab 1</span><!--
--><span id="mytab2">Tab 2</span><!--
--><span id="mytab3">Tab 3</span>
</div>
Get rid of the newlines between the spans. Example:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
Newlines are counted as a space in HTML.
Another option is to use nagative letter-spacing:-10px - that has a lighter impact on formatting.
<div id="tabs" style="letter-spacing:-10px;">
<span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
<span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
<span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>
Got this idea thanks to this answer
hard to test without the images but I added background color and display:inline to the root tabs. Please try this:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
display:inline;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab' style="background-color:Red;">
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab' style="background-color:Green;">
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
Tab middle, left and right also need to float left.
njbair’s response is correct.
Another option was to use a table, with the border-collapse: collapse; property.
Another gotcha: in Internet Explorer 6.0, the first approach (spans) doesn’t work as expected. When resizing the window, IE wordwraps the span, breaking the tab, while with the table approach even IE sends down the whole tab.