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.
Related
I was trying to create a button using CSS. The html code looks like
<div class="content">
<img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ width="20" height="20">
<span class="fon">Google</span>
</div>
And CSS is
.content {
width: 120px;
overflow: hidden;
color: #f5f5f5;
background: #2d3f51;
}
.content img {
margin: 5px;
float: left;
}
.fon{
position:relative;top:5px;
}
I'm getting output as expected, but I wanted to reduce repetitive html code and move them to CSS, so that I just need to write code similar to below code and should show same output :
<span class="mybutton">Google</span>
Here is my JSFiddle
http://jsfiddle.net/WW4N6/678/
html
<p class="mybutton">Google</p>
css
.mybutton {
background: #2d3f51;
color: #f5f5f5;
display: flex;
align-items: center;
height: 30px;
width: 100px;
padding: 0 5px;
}
.mybutton:before {
content: '';
background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png');
background-size: cover;
width: 20px;
height: 20px;
display: inline-block
}
JSFiddle: http://jsfiddle.net/WW4N6/681/
css
.mybutton {
width: 90px;
height: 30px;
overflow: hidden;
color: #f5f5f5;
background: #2d3f51;
background-image: url(http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png);
background-size: 20px, 20px;
background-repeat: no-repeat;
background-position: 5px;
padding-top: 10px;
padding-left: 30px;
}
jsFiddle link
http://jsfiddle.net/joshchurning/9sysby5f/
you could use css's background property for your button:
.mybutton {
....
background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png') no-repeat center center #2d3f51
....
}
If you want to get rid of the HTML code (the width and length of img, I'm assuming), you could just put the width and height in your .content img CSS class
.content img {
margin: 5px;
float: left;
width: 20px;
height: 20px;
}
Since a few days I am trying to make this work. I have a design with an image with a text over it, I just finally could set the text over the image, but I want to give a top position to the image but too much space at the bottom and I don't know how to fix it!
This is what I have: I know I have to fix some padding things on the texts.
and this is my markup, by the way I am using bootstrap.
<div class="row-color clearfix">
<div class="container">
<div class="col-lg-12 no-padding wrapper">
<img class="img-responsive" src="http://s12.postimg.org/mu9u7nzvx/header_ml_02.png" alt="">
<div id="bg-text">
<div class="text-overimg">Child Education Planner</div>
</div>
</div>
<div class="texto_cursos">Face courses, distance and on-line</div>
</div>
</div>
.row-color {
background: #575756 none repeat scroll 0 0;
color: #fff;
font-size: 18px;
line-height: 1.5em;
position: relative;
z-index: 9;
padding-bottom: 20px;
}
.no-padding {
padding:0px;
}
.wrapper {
padding-left: 10px;
padding-right: 10px;
text-align:center;
position:relative;
}
.wrapper .img-responsive {
display:inline;
}
.wrapper #bg-text {
color: white;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
text-align:center;
padding-left:10px;
padding-right:10px;
}
.text-overimg{
position:relative;
font-size:3.1em;
color:#FFF;
font-weight:500;
text-shadow: 0.08em 0.08em 0.05em #333;
padding-top: 20%;
}
.texto_cursos{
padding-bottom: 10px;
font-size:2.5em;
color:#FFF;
font-weight:400;
text-align:center;
}
I would like to have this, I have to say that I want to make it responsive for most of the devices, this is one of the things I use bootstrap.
This is what I really want to have but don't know how to do it. Specially the white background behind the image without too much space between the last text and the image.
Thanks again!
** UPDATE I Accidently said if you want to move the image up a little. I meant down**
If you want to move the image down a little you can add a margin-top to it:
.wrapper .img-responsive {
display:inline;
margin-top:50px;
}
Please see JSFiddle here
try something like that:
.imagebox-container {
width: 100%;
padding-top: 30px;
background: linear-gradient(0, gray 50%, transparent 50%);
}
.imagebox img {
max-width: 100%;
display: block;
}
.imagebox-caption {
width: 100%;
text-align: center;
padding: 5px;
line-height: 1;
}
.imagebox {
position: relative;
width: 400px;
margin: 0 auto;
}
.imagebox-caption-overlay {
position: absolute;
bottom: 10px;
transition: 500ms all linear;
width: 100%;
text-align: center;
background: transparent;
color: white;
}
.imagebox:hover .imagebox-caption-overlay {
background: white;
color: black;
}
<div class="imagebox-container">
<div class="imagebox">
<img src="https://www.drupal.org/files/issues/header_1.png" />
<div class="imagebox-caption-overlay">ANOTHER BLA BLA BLA</div>
</div>
<div class="imagebox-caption">
bla bla bla
</div>
</div>
may be you need this. please see .
.imagebox-container {
width: 100%;
padding-top: 30px;
background: linear-gradient(0, gray 50%, transparent 50%);
}
.imagebox img {
max-width: 100%;
width: 400px;
margin: 0 auto;
display: block;
}
.imagebox-caption {
width: 100%;
text-align: center;
padding: 5px;
line-height: 1;
}
<div class="imagebox-container">
<div class="imagebox">
<img class="img-responsive" src="http://s12.postimg.org/mu9u7nzvx/header_ml_02.png" alt="">
</div>
<div class="imagebox-caption">
Face courses, distance and on-line
</div>
</div>
Well, I'm back to doing front-end stuff -- which is really not my forté -- and I'm stumped.
I have a div with a logo, and I need to put some text in-line with it, vertically centered within the div. Every time I try to float the element right, it seems to end up outside of the div (somehow?).
Relevant HTML:
<div id="wrapper-header">
<div id="wrapper-nav-header">
<div id="header-logo">
<span id="header-logo-span"><img src="mylogo.png" /></span>
<span id="header-customer-name">Customer Name</span>
</div>
</div>
...
</div>
Relevant CSS:
#wrapper-header {
background-color: #fff;
position: fixed;
z-index: 999;
width: 100%;
padding: 0;
white-space: nowrap;
font-size: 13px;
line-height: 1
}
#wrapper-header #header-logo {
margin-left: 20px;
padding: 10px 0;
}
#wrapper-header #header-logo img {
max-height: 40px;
vertical-align: middle;
}
#wrapper-header #header-customer-name {
vertical-align: middle;
}
What do I need to do to get this header-customer-name element to float right?
You can try using flex box:
html, body{
margin: 0;
padding: 0;
}
#wrapper-header {
background-color: #fff;
position: fixed;
z-index: 999;
width: 100%;
padding: 0;
white-space: nowrap;
font-size: 13px;
line-height: 1
}
#header-logo {
margin-left: 20px;
padding: 10px 0;
display: flex;
align-items: center;
}
#header-logo img {
max-height: 40px;
vertical-align: middle;
}
#header-customer-name {
flex-grow: 1;
text-align: right;
}
<div id="wrapper-header">
<div id="wrapper-nav-header">
<div id="header-logo">
<span id="header-logo-span"><img src=http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" /></span>
<span id="header-customer-name">Customer Name</span>
</div>
</div>
</div>
or you can calculate an appropriate padding to your header-customer-name like this:
html, body{
margin: 0;
padding: 0;
}
#wrapper-header {
background-color: #fff;
position: fixed;
z-index: 999;
width: 100%;
padding: 0;
white-space: nowrap;
font-size: 13px;
line-height: 1
}
#header-logo {
margin-left: 20px;
padding: 10px 0;
}
#header-logo img {
max-height: 40px;
vertical-align: middle;
}
#header-customer-name {
float: right;
padding: 12px 0; /*you can change for a more precise value*/
}
<div id="wrapper-header">
<div id="wrapper-nav-header">
<div id="header-logo">
<span id="header-logo-span"><img src=http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" /></span>
<span id="header-customer-name">Customer Name</span>
</div>
</div>
</div>
Anyway if you're referring that the header-customer-name is outing on the right of the #wrapper-header that is probably because it has position: fixed and width: 100%, that's why I add the style:
html, body{
margin: 0;
padding: 0;
}
Check my answer here to better understanding White Space Appears Right of Browser Window When at Full Screen
This has no relation with the question but can help you
Don’t Overqualify
As a general rule, don’t supply more information than is necessary.
// bad
ul#someid {..}
.menu#otherid{..}
#id1 #id2{...}
// good
#someid {..}
#otherid {..}
#id2{...}
Try in fiddle
Change style to this way..
#wrapper-header #header-customer-name {
vertical-align: middle;
float: right;
padding-top: 15px; /*value suits to your logo */
}
Do you have CSS reset code in CSS files which is linked with this page. After the is below css reset added, the problem was solved. Demo
html, body {
margin:0;
padding:0;
}
I have a user name and photograph that appears side by side and middle aligned, as shown below.
I am now trying to change the css so that the photo is dynamically floated to the left and the user name is dynamically floated to the right.
I have tried adding float: right and float left to the css but this only makes the photograph appear under the user name.
I have read several similar threads and tried many things, but I cannot solve this. It is really frustrating. It may be a simple fix, but I cannot see it.
Using CSS, how do I display the username on the right and the photo on the left and still have the user name and photo vertical-align: middle with a width of 100%? The photo that the user uploads can be different height, so I cannot use line-height.
Here is my HTML code:
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17">
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
{# image has max-height: 149px & max-width: 149px; assigned in the css file #}
<img class="name_details_photograph_preview_dimensions" src="{{ image_url }}" />
</div>
</div>
</div>
</div>
Here is my css code:
.resumeStyleResumeTitleWrapper17 {
display: table-cell;
width: 100%;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
direction: ltr;
display: table-cell;
float: left;
text-align: left;
width: 100%;
}
.resumeStyleResumeTitleInner17 {
background-color: #000;
color: #fff;
direction: ltr;
display: table-cell;
max-height: 149px;
padding: 2px;
text-align: left;
vertical-align: middle;
width: 100%;
}
.resumeStyleResumeTitleFontChange17 {
direction: ltr;
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
width: 100%;
}
.resumeStyleResumeTitlePhotograph17 {
background-color: #000;
color: #fff;
direction: ltr;
display: table-cell;
max-height: 149px;
max-width: 149px;
padding: 2px;
text-align: right;
vertical-align: middle;
}
.resumeStyleResumeTitlePhotographInner17 {
display: inline-block;
vertical-align: middle;
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
Here is one way of doing it using CSS3 transforms to take care of the vertical alignment of the name/title element.
I defined two classes, .flipLeft and .flipRight to control the placement of the name/title and the image elements.
I assumed that the image height will be as tall or taller than the height of the name/title, otherwise, things get more complicated.
The trick is to use the text-align property to place the image to the left or to the right of the parent block.
I then use absolute positioning to take the name/title element out of the content flow and pin it to the opposite edge of the parent block and adjust the top offset to 50% to get approximate vertical centering.
Finally, I use CSS3 transforms to adjust for the height of the name/title element.
Note: In the snippet below, scroll vertically to see both examples.
.resumeStyleResumeTitleWrapper17 {
display: block;
width: auto;
border: 1px dotted blue;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
position: relative;
}
.resumeStyleResumeTitleFontChange17 {
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
}
.resumeStyleResumeTitlePhotograph17 {
border: 1px dotted yellow;
display: inline-block;
vertical-align: top;
}
.resumeStyleResumeTitlePhotographInner17 {
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
display: block;
}
.flipLeft.resumeStyleResumeTitle17 {
text-align: left;
}
.flipLeft .resumeStyleResumeTitleInner17 {
border: 1px dotted yellow;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.flipRight.resumeStyleResumeTitle17 {
text-align: right;
}
.flipRight .resumeStyleResumeTitleInner17 {
border: 1px dotted yellow;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
<h2>Flip Image to Left</h2>
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17 flipLeft">
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
<img class="name_details_photograph_preview_dimensions" src="http://placehold.it/140x100" />
</div>
</div>
</div>
</div>
<h2>Flip Image to Right</h2>
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17 flipRight">
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
<img class="name_details_photograph_preview_dimensions" src="http://placehold.it/140x100" />
</div>
</div>
</div>
</div>
Couldn't achieve it with float but I got the desired layout using display: flex;
JS Fiddle
div.container {
display: flex;
width: 100%;
align-items: center;
background-color: black;
height: 100px;
padding: 20px 0;
}
div.user_name {
display: flex;
font-size: 32px;
font-family: Helvetica;
color: white;
width: 50%;
padding-left: 20px;
}
div.user_img {
display: flex;
justify-content: flex-end;
width: 50%;
height: 100%;
padding-right: 20px;
}
div.user_img > img {
height: 100%!important;
width: auto;
}
<div class="container">
<div class="user_name">User Name</div>
<div class="user_img">
<img src="http://www.lessons4living.com/images/penclchk.gif"/>
</div>
</div>
Found a fix for this problem, update your HTML to following,
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17">
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
<img class="name_details_photograph_preview_dimensions" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTWd99Qkjbg4ZVu-XHvaIo4LX1MittAmD0CvsiN6QcYeuv4XOQm" />
</div>
</div>
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
</div>
</div>
In CSS,
.resumeStyleResumeTitleWrapper17 {
width: 100%;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
direction: ltr;
float: left;
text-align: left;
width: 100%;
height: 150px;
}
.resumeStyleResumeTitleInner17 {
background-color: #000;
color: #fff;
direction: ltr;
max-height: 149px;
padding: 2px;
text-align: left;
display: inline-block;
vertical-align: middle;
}
.resumeStyleResumeTitleFontChange17 {
direction: ltr;
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
width: 100%;
}
.resumeStyleResumeTitlePhotograph17 {
background-color: #000;
color: #fff;
direction: ltr;
max-height: 149px;
max-width: 149px;
text-align: right;
vertical-align: middle;
display: inline-block;
}
.resumeStyleResumeTitlePhotographInner17 {
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
.resumeStyleResumeTitle17:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -2px;
}
Basically I added a .resumeStyleResumeTitle17:before element which acts like a ghost element and takes the full height and allows each adjacent elements to be aligned by display:inline-block and now vertical-align:middle property is applicable.
Ok, this is to point you in the right direction, but it is obvious that you don't really understand what is going on. You have way too many div's there and really bad naming structure on the classes. Here is how I got it working somewhat in the direction you want without removing the divs and starting over (which is what I would do otherwise): ( Here is the live jsfiddle for it).
<!DOCTYPE HTML>
<style>
.resumeStyleResumeTitleWrapper17 {
position:relative;
width: 100%;
display:block;
background-color: #000;
height:175px;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
direction: ltr;
text-align: left;
width: 100%;
}
.resumeStyleResumeTitleInner17 {
background-color: #000;
color: #fff;
direction: ltr;
float:right;
width: 100%;
}
.resumeStyleResumeTitleFontChange17 {
font-size: 32px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
float:right;
}
.resumeStyleResumeTitlePhotograph17 {
background-color: #000;
color: #fff;
direction: ltr;
}
.resumeStyleResumeTitlePhotographInner17 {
float:left;
height:175px;
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
</style>
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17">
<div class="resumeStyleResumeTitleInner17">
<span class="resumeStyleResumeTitleFontChange17">User Name</span>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<!-- image has max-height: 149px & max-width: 149px; assigned in the css file -->
<img class="name_details_photograph_preview_dimensions" src="http://www.lessons4living.com/images/penclchk.gif" />
</div>
</div>
</div>
</html>
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.