when i change resolution of my display text on my top bar is changing
Can somebody help me to fix it?
Normaly:
http://funedit.com/imgedit/soubory/small_10348459921396544905.jpg?x
With changed resolution, or with smaller borowser window:
http://funedit.com/imgedit/soubory/small_19550755301396544822.jpg
My Html:
<body>
<div class="top-panel">
<div id="center"> <a class="top-button" href="#"></a>
<span class="text">Prave hraje <b>5000</b> hracov na <b>150</b> serveroch!</span>
<span class="panel">Registruj sa zdarma nebo</span>
<input type="text">
<input type="text">
<input type="image" id="login-button" src="images/login_button.png" alt="Submit">
<div class="warningimg"></div><div class="warning"> NIGHT CUP 2014 - Sledujte priamy prenos! </div>
<div class="main">
<div class="logobg">
<a class="logo" href="#"></a>
<input class="searchinput" type="text">
<input class="searchsubmit" type="image">
<div class="news"></div>
</div>
</div>
</div>
</div>
</body>
My CSS:
body {
background-image:url('images/background.png');
background-repeat: no-repeat;
background-color:#cccccc;
background-size 100%;
margin: 0 auto;
font-family: Arial;
font-size: 13px;
position: relative;
background-position: 50% 0;
background-attachment: fixed;
}
#center {
width: 1030px;
margin: 0 auto;
/*display: inline-block; */
}
.top-panel {
background-image: url("images/top_panel.png");
background-repeat: repeat-x;
background-position: center;
height: 43px;
padding-top:5px;
display: block;
}
a.top-button {
background-image: url("images/top_button.png");
height: 37px;
width: 141px;
background-repeat: no-repeat;
display: inline-block;
margin-left: 20px;
}
.text {
color: #9c9c9c;
padding: 0px 10px;
}
.panel {
color: #6ab1ed;
padding: 0px 390px;
}
input{
vertical-align:top;
display: inline-block;
height: 21px;
width: 97px;
line-height: 25px;
text-align: center;
position: relative; left: 550px; top: 4px;
}
span{
position: absolute;
display: inline-block;
height: 35px;
line-height: 35px;
text-align: center;
}
span b{
font-weight:bold;
}
#login-button{
/*background-image: url("images/login_button.png"); uz je to v HTML*/
height: 27px;
width: 81px;
line-height: 27px;
display: inline-block;
position: relative; left: 550px; top: 4px;
}
If somebody want to see the site LIVE its here: funedit.com/andurit/new/
Thank you all for reading this:)
a quick fix would be:
.panel {
color: #6AB1ED;
line-height: 1;
padding: 0 390px;
width: 150px;
}
span {line-height: 35px} is the reason for the big line spacing; and an absence of white-space: nowrap; is why it's breaking into lines. However, the main problem is that, when resized, there simply isn't enough space for all that stuff. This is due to the massive padding left and right of the .panel. Rather than use padding to position the item, you should try to arrange your nav items through floated divs, or text-align.
Set the min-width to something like:
.panel {
color: #6ab1ed;
padding: 0px 390px;
min-width: 160px;
}
Fiddle
.panel {
color: #6AB1ED;
padding: 0 350px;
width: 200px;
}
U can decide font size for different window size.Actually problem is when u resize size of text is remaining same and hence overflowing hence u can change below font-size: parameter according to ur need.This also works for mobile screen also.
#media all and (min-width: 400px) {
.panel {
font-size: 8px;
}
}
#media all and (min-width: 600px) {
.panel {
font-size: 16px;
}
}
Or
u can use jquery resize function for whole page refer this auto resize text (font size) when resizing window?
OR
Directly use inbuilt jQuery plugin like FitText (http://fittextjs.com/). It automatically sizes text to fit the width of the parent element.
Another jQuery plugin with the same goal is BigText(http://www.zachleat.com/web/bigtext-makes-text-big/).
DEMO bigtext
<div id="bigtext" style="width: 300px">
<div>The elusive</div>
<div>BIGTEXT</div>
<div>plugin exclusively</div>
<div>captured on film</div>
</div>
$('#bigtext').bigtext();
As u can see u just have to call a small function full implementation is in there website its just small snippet there are lot of use of that.
Related
I changed some left padding in the ::placeholder pseudo-element and am experiencing some trouble getting the input text aligned with the placeholder.
The problem: The distance from the icon needs to be identical on both input text and placeholder text. The input text is flush up against the icon but the placeholder is in the correct position.
A demonstration of the problem and my code is below:
A link to my fiddle: https://jsfiddle.net/4jh52b18/1/
Source code:
CSS:
#search-overlay {
position:absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
.search-overlay__wrapper {
max-width: 752px;
margin: 0 auto;
margin-top: 160px;
}
.search-overlay__search-bar {
width: 720px;
margin: 0 auto;
font-size: 35px;
font-family: sans-serif;
color: black;
padding: 20px;
border: none;
border-bottom: 1px solid gray;
background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/28403-200.png") left no-repeat;
background-size: 20px;
&::placeholder {
padding-left: 25px;
}
#media (max-width: 980px) {
width: 100%;
margin: 0 auto
}
}
.search-overlay__close {
display: inline;
vertical-align: middle;
#media (max-width: 980px;) {
position: absolute;
top: 0;
right: 0;
padding: 24px;
}
}
}
HTML:
<div id="search-overlay">
<div class="search-overlay__wrapper">
<input type="text" name="search" placeholder="Search" class="search-overlay__search-bar" value="">
<a class="search-overlay__close" href="#"> <img src="images/overlay-close.png" alt=""> </a>
</div>
</div>
In the live jsfiddle example, you'll see that the input text doesn't align with the placeholder when they need to be aligned in the same spot. What is the attribute to be able to do this? I tried adding a padding-left directly on the input but that didn't work as expected.
In your SCSS (line 23-25), modify/remove the following:
&::placeholder {
padding-left: 25px;
}
The reason why it didn't work is because & in SCSS replaces the current selector. Therefore &::placeholder translates into:
#search-overlay .search-overlay__search-bar::placeholder {...}
Most likely, you used a weaker selector and it didn't apply.
This is my HTML code:
<img class="centeredimage" src="BLACK.jpg"><br><br>
<p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
<span class = "a2017">Welcome to 2017</span><br><br>
<span class="coming_soon">Coming Soon</span></p><br><br>
This is my CSS code:
.centeredimage {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
}
.new{
color:#FFFFFF;
}
.main_text{
font-size:20px;
letter-spacing: 8px;
}
.a2017{
font-size:15px ;
letter-spacing:2px ;
}
.coming_soon{
letter-spacing: 1px;
}
The image is aligned at center of the screen but the text instead of getting displayed after the image is displayed coinciding with the image.How do I make it come after the image so that both are aligned at middle of the screen at center?
Try this
.centeredimage {
display : block;
width: 200px;
margin: auto;
...
I use this code to center things in the middle of the screen, for example, a loader. It can have multiple parts, it doesn't matter. You just put all the parts into one div. I used to use the "margin" trick, and still do here and there, but these days I'm using the table/tablecell thing to get the job done. It works everywhere, phones etc. (note I don't deal with 10-year-old browsers). Below is some code straight from an instructional sample:
<style>
.app_style {
width: 100%;
height: 100%;
display: table;
}
.loader_style {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.loader_icon_style {
border: 2px solid lightgray;
border-radius: 5px 5px 5px 5px;
}
.loader_bar_padding {
padding-top: 10px;
}
.loader_blurb {
width: inherit;
text-align: center;
font-size: 14px;
font-weight: bold;
color: yellow;
font-style: italic;
}
</style>
</head>
<body>
<sample-app class="app_style">
<div class="loader_style">
<img class="loader_icon_style" src="assets/images/r2-d2.jpg" />
<div class="loader_blurb loader_bar_padding">
May the force be with you...
</div>
<img class="loader_bar_padding" src="assets/images/loader-bar.gif" />
</div>
</sample-app>
</body>
If you want center the image and the text, not align only the image otherwise the text follow an other logic on the DOM, mostly if you use the absolute position for the image and not for the text.
You can use a wrapper div aligned to the center and put all content in it.
body {
background-color:#ff00ff;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -100px;
width: 200px;
height: 300px;
}
.your_image {
width: 200px;
height: 200px;
}
.new {
color: #FFFFFF;
}
.main_text {
font-size: 20px;
letter-spacing: 8px;
}
.a2017 {
font-size: 15px;
letter-spacing: 2px;
}
.coming_soon {
letter-spacing: 1px;
}
<div class="wrapper">
<img class="your_image" src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png"><br><br>
<p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
<span class="a2017">Welcome to 2017</span><br><br>
<span class="coming_soon">Coming Soon</span></p><br><br>
</div>
I prefer to use Flexbox. It simplifies a lot of the coding you need to do.
In your situation, just wrap your HTMl code in a div and make this your CSS:
div{
display: flex;
flex-direction: column;
justify-content: center;
}
.centeredimage {
display: block;
margin: 0 auto;
width: 200px;
height: 200px;
}
I have a header with a picture in it, and I'd like to have a navigation menu below that that matches the width as I narrow my window. Currently, my header and picture scale fine, but my menu buttons do not. At an early point, the window becomes too narrow and the menu buttons go onto a separate line. How can I make the menu match the image width? Below are the relevant code and an image to show the issue.
http://imgur.com/a/go2Of
HTML for header and menu:
<div id="wrapper1">
<div id="header">
<div id="logo">
<img src="Images/logolow.jpeg"/>
</picture>
</div>
<div id="login">
<fieldset>
<Legend>Login</Legend>
Username <input type="text" name="username"/>
Password <input type="password" name="password"/>
<input type="submit" value="Login">
<div id="register">
Not a member? Click here to register!
</div>
</fieldset>
</div>
</div>
<div id="sidebar">
Home Search All Profs Submit Contact
</div>
</div>
CSS:
#wrapper1{
width: 85%;
margin-left: auto;
margin-right: auto;
font-family: Helvetica, Verdana, Arial;
}
#header {
width: 100%;
position: relative;
}
#logo {
height: 450px;
width: 100%;
}
#logo img {
height: 100%;
width: 100%;
}
#login {
bottom: 0px;
right: 0px;
width: 15%;
color: white;
position: absolute;
}
#login a {
color: inherit
}
#register {
font-size: 14px;
}
#login fieldset {
display: block;
border: 2px solid white;
}
#sidebar {
margin: 14px;
width: 100%;
}
#sidebar a {
height: 40px;
padding-top: 10px;
padding-left: 6.55%;
padding-right: 6.55%;
text-align: center;
font-size: 12pt;
font-weight: bold;
background-color: black;
color: white;
border-style: outset;
border-width: 1px;
text-decoration: none;
}
Here is one solution.
Use percentage widths on your links that add up to 100%. Make sure not to use display: inline-block; on those links as extra whitespace is added to inline elements and would make their total size over 100% of the parent element.
header img {
display: block;
max-width: 100%;
}
nav {
margin-left: -5px;
margin-right: -5px;
}
nav a {
box-sizing: border-box;
display: block;
float: left;
width: calc( 25% - 10px );
margin: 0 5px;
padding: 0.5rem 1rem;
color: white;
text-align: center;
background-color: #999;
}
<header>
<img src="http://placehold.it/1600x400?text=hero-image">
<nav>
One
Two
Three
Four
</nav>
</header>
For larger screens you'll need:
A larger image, or
A larger image and/or switch max-width: 100%; to width: 100%; (careful, if image is stretched beyond it's native size it will pixelate), or
Restrain the max width of the navigation links.
This is probably really simple thing but I just don't know how to do it without using something like padding or margin with negative values, my site looks like:
and it should looks like:
So I need to display that text which is below atm, in the same line as the button
My CSS is:
.center {
width: 1030px;
margin: 0 auto;
}
.top-panel {
background-image: url("images/top_panel.png");
background-repeat: repeat-x;
background-position: center;
height: 43px;
padding-top:5px;
}
a.top-button{
background: url("images/top_button.png");
height: 37px;
width: 141px;
background-repeat: no-repeat;
display: block;
}
.text {
color: #9c9c9c;
padding: 0px 160px;
line-height: 43px;
position: relative;
}
.panel {
color: #6ab1ed;
}
My HTML is:
<body>
<div class="top-panel">
<div class="center">
<a class="top-button" href="#"></a>
<div class="text">Prave hraje 5000 hracov na 150 serveroch!
<div class="panel">Registruj sa zdarma nebo</div></div>
</div>
</div>
</body>
Can somebody explain me how to fix it?
I guess this is what you want:
see fiddle
HTML
<body>
<div class="top-panel">
<div class="center"> <a class="top-button" href="#"></a>
<span class="text">Prave hraje 5000 hracov na 150 serveroch!</span>
<span class="panel">Registruj sa zdarma nebo</span>
</div>
</div>
</body>
CSS
.center {
width: 1030px;
margin: 0 auto;
display: inline-block;
}
.top-panel {
background-color: black;
background-repeat: repeat-x;
background-position: center;
height: 43px;
padding-top:5px;
display: block;
}
a.top-button {
background-color: blue;
height: 37px;
width: 141px;
background-repeat: no-repeat;
display: inline-block;
}
.text {
color: #9c9c9c;
padding: 0px 160px;
line-height: 43px;
}
.panel {
color: #6ab1ed;
}
There are a few problems with this.
1. You have all of your text in multiple block elements.
Block elements, like <div>s are on their own line. Replacing that with inline-block fixes that problem:
div.top-panel
{
display:block;
}
div
{
display: inline-block;
}
2. Your button is also a block element
So it cannot share the same line with your text.
Here is a very ugly fiddle, but at least all of the elements are on the same line.
Below is a simple html web page that is responsive except for one div (goplay) that over lays other parts of the page when screen size is reduced, instead of dropping below the image.
Styling Sheet external
#wrapperlp {
width: 100%;
margin: auto;
}
#media screen and (max-width: 800px) {
#wrapperlp {
width: 90%;
min-width: 100px;
}
}
#headerlp {
font-size: 30px;
color: white;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
#para {
font-size: 20px;
color: white;
text-align: center;
}
#game_img {
height: 250px;
width: auto;
margin-bottom: -30px;
position: relative;
display: inline-block;
float: left;
margin-top:-30px;
padding-top: 5px;
max-width: 100%;
}
#goplay {
position: relative;
display: inline-block;
float: right;
margin-top:-250px;
margin-left:80px
}
#spacer {
height: 40px;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 900px;
padding-top:20px;
}
Html which is set to call the above css
<div id="wrapperlp">
<div style="background-image: url(https://.jpg); height: 430px; width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%;">
<div id="headerlp">Some Text</div>
<div id="para">More Text</div>
<div id="game_img"><a href="//www.youtube.com/" target="_blank"><br />
<img src="https://.png" height="auto"/></a></div>
</div>
</div>
<div id="goplay">----form----/div>
<div id="spacer">
<div style="position: relative; float: left">Text</div>
</div>
margin-top and left should in %. thats y its overlay becoz of px
First off, it looks like you're missing a couple of divs.
The goplay div doesn't have a closing tag, (well it's got one but not that works)
Also your bottom spacer looks like it's missing a closing tag as well. Not sure if it's supposed to wrap anything or what.
Perhaps you had some copy/paste errors?
Normally if you set a negative margin it will overwrite other divs. You should, for the most part, not have to use negative margins.