why is this css not working ? want to put to left - html

I am really stuck in this silly issue. i am spending 4 hours now only on this problem.
I have a page: http://bibago.de/test.html. If you resize the page to 320px width (iphone size), it should come to this state: http://imagebin.org/267953
but what not working is that input field is not in the middle in iphone size.
this is my css:
.newsletter{
width: 300px;
padding-top: 40px;
padding-bottom: 40px;
clear: both;
}
html
<div class="newsletter">
<p class="overinput">zu bibago auf dem laufenden bleiben</p>
<div class="input-group newsletter1">
<input type="text" class="form-control" id="email" placeholder="Hier Ihre E-Mail-Adresse eintragen..">
<span class="input-group-btn">
<button class="btn btn-default" style="background-color: #156ac6;color: #ffffff" type="button" onclick="senden()">Senden</button>
</span>
</div>
</div>
what is causing this? please help, i need to put that input field with its title in center as shown in image.

You have a relative margin (.newsletter {margin-left: 30%;} in the non-320px version) and an absolute negative margin (.newsletter1 {margin-left:-15px}).
30% of 300px is 96px, -15px results in a left margin of 81px for the input element, which is simply too much. (Also, relative and absolute values shouldn't be mixed, as those will most likely result in such behaviour).
If you want to center a fixed-width element, better use an automatically deduced margin:
.newsletter{
width: /* ... */
margin: auto;
}

Related

HTML CSS Header images not floating correctly

Afternoon all,
I'm trying to create a basic header
White space at top with an image that floats left and an image that floats right.
Then below this a grey background with some options and a button on left and some nav buttons on right.
The requirements are that the header will always be 100% width and that when you scroll down the page the header always stays at the top.
I have this working fine with my current HTML and CSS however when I reduce screen size e.g. snap right on my laptop 1368x768 resolution on laptop the image on the right floats below the buttons on the right hand side but inside the grey border?!
Left image size = 480x80
Right image size = 264x80
HTML
<div id="banner">
<img src="/images/img1.png" style="float:left"/>
<img src="/images/img2.png" style="float:right"/>
</div>
<div id="header">
<div id="header_left">
<form action= "<?php echo $_SERVER['PHP_SELF']; ?>" method ="POST">
<select name=dbselector>
<?php
echo '<option value="1"';
if ($_COOKIE[$cookie] == "x") {
echo ' selected="selected"';}
echo '>1</option>';
echo '<option value="2"';
if ($_COOKIE[$cookie] == "y")
{echo ' selected="selected"';}
echo '>2</option>';
?>
</select>
<input name="submit_button" type="submit" value="Submit"/>
</form>
</div>
<div id="header_right">
<?php date_default_timezone_set('Europe/London'); echo date('h:i:s');?>
<input type="button" value="Back" onclick="history.go(-1)">
<a href="www.google.co.uk" style="text-decoration: none">
<input type="button" value="Home">
</a>
<input type="button" value="Refresh" onClick="history.go(0)" >
<input type="button" value="Forward" onclick="history.go(1)">
</div>
</div>
CSS
#header
{
width: 100%;
position: fixed;
background:#58575b;
padding-top: 0px;
padding-bottom:0.5em;
margin: 0px
}
#banner
{
background:#fff;
width:100%;
height: 5em;
}
#header_left
{
float: left;
padding: 0em;
padding-left: 0.5em;
margin: 0em;
}
#header_right
{
float: right;
padding: 0em;
margin: 0em;
padding-right: 0.5em;
}
Any ideas why it is behaving like this?!
Thanks in advance
In a few comments of the starting post you say something about it not working properly in Internet explorer or Firefox.
It works in chrome right?
So it may be such a thing something isn't compatible with firefox or IE.
Not many use IE for the fact it is decommissioned by microsoft.
So, now let's focus just on Firefox and smaller screens as that also seems to be a issue.
Solution for small screens: Use viewports or media queries (either or should fix it)
<meta name="viewport" content="width=device-width, initial-scale=1">
For the issues with FireFox can you explain what it does? You just mention the issue for small screens exactly what it is doing but didn't explain the issues with Firefox (IE)
Thanks!
Solution was very basic...
The only thing different between the jsfiddle and my live code were the images.
I have checked the images and they have loads of whitespace in them hence why it moves down!
Took the images straight of our corporate site so I didn't even both to check for whitespace in the image itself.....
Argh!

Color of background div not stretching when browser is resized

I am trying to create an opt-in area that stretches to hold its contents when the browser is resized (less width). I am trying to duplicate the orange picture area of this theme: http://anpsthemes.com/demo/?theme=constructo (Classic demo) where it says "FAST AND RELIABLE SERVICE FOR YOUR PROJECT..." Note that the background image doesn't stretch, but when you resize the browser it shows more of the image. This is what I would like.
I had no luck with the image, so tried background color, and the same thing happened, the background image or color doesn't "stretch" behind the content. Here is my code so far:
.oi {
/*background:url(opt-bg.jpg);*/
background-color:#f46a68;
width:100%;
min-height: 100px;
}
.oi-container{
max-width: 1310px;
margin: 0 auto 0 auto;
padding-top:22px;
}
.left{
max-width:670px;
float:left;
}
.right{
max-width:570px;
margin-left:30px;
float:left;
}
<div class="oi">
<div class="oi-container">
<div class="left">
<div class="txt-top">GET FREE TIPS TO CREATE THE LIFE YOU LOVE</div>
<div class="txt-bot">+ BONUS Why most health businesses fail and how to avoid it</div>
</div>
<div class="right">
<form action="#" method="post" id="oi">
<input type="text" class="input" value="first name" />
<input type="text" class="input" value="email address" />
<input type="button" onclick="document.getElementById('oi').submit();" value"get it" class="btn-get-it" />
</form>
</div>
</div>
</div>
I did inspect the theme's code, but can't really duplicate it, I'm not good with position divs within each other. You can see the code live here: http://itlive.ca/oi
Any help or a point in the right direction would be greatly appreciated.
.left and .right are floated, and therefore the containing elements, .oi for example, won't contain them, which is why they spill over when the window is resized.
Clearing those floats somehow (adding another element below and applying the clear CSS property, or using the clearfix method) might be a solution.

Making a Search bar Responsive

I am working on a new homepage at http://www.bkd.com/new-test-2.htm
We have a search bar that was previously built by a different developer who is no longer here.
I am trying to make the search bar further to the right of the screen but also still be responsive. I am not sure what I am doing wrong. I have tried a lot of different things and when I make the browser smaller it just jumps below the navigation. This is what I do not want to happen.
Here is the coding for the whole light grey bar:
<div class="clear"></div>
<div class="span-8">
<a class="left" style="padding: 0px 0px 0px 0px; margin-left: 80px;" href="/">
<img src="/images/common/header/logo.png" border="0"></a> </div>
<div style="margin-top:25px;" class="span-0 last">
<form action="/search/">
<input type="image" src="/images/common/search/search-icon-new.png" style="margin-left: 220px; float:left; outline:none" alt="Search">
<input type="text" name="zoom_query" value="Search" style=" background- image:url(/images/common/search/search-field-new.png); background-repeat: repeat-x; margin: 0; line-height:26px; height: 26px; width:200px; color:#666; background-color:#fff; border:none; outline:hidden; border-radius: 7px; float:right; padding: 0px 0px 0 10px; margin-left: 0px;" onFocus="this.value=this.value.replace(/^Search$/, '')">
</form>
</div>
Can anyone tell me what I am doing wrong or a better way to achieve what I am trying to do. Please let me know if I need to provide any more information.
Thank you in advance!
-Marcy-
The search bar is breaking down because the marker icon beside it has an unnecessary margin of 220px, giving the whole search div a width of 462px which causes it to break down on lower screen size.. change the following
<input type="image" src="/images/common/search/search-icon-new.png" style="margin-left: 220px; float:left; outline:none" alt="Search">
to
<input type="image" src="/images/common/search/search-icon-new.png" style=" float:left; outline:none" alt="Search">
to move the search bar to the right, apply float:right to the container div as follows:
<div style="margin-top:25px; float:right" class="span-0 last">
i suggest using external stylesheets instead of applying inline style, external stylesheets are likely to be cached, hence loading might become faster on consecutive visits. Also it makes your html more readable as well.

Input box alignment and text effects on alignments

I have the following fiddle:
http://jsfiddle.net/neGJF/
The HTML code is as follows:
<div class="loginbarGrad">
<div style="position:relative; float:right; padding: 11px 65px 0 0;">
<input type="text" placeholder="EMAIL" value="EMAIL" class="singleField" name="kp_email" id="kp_email">
<input type="password" placeholder="PASSWORD" value="PASSWORD" class="singleField" name="kp_password" id="kp_password">
<a class="signIn">Sign In</a>
</div>
</div>
You can see the CSS at the fiddle.
I am trying to increase the box size of the inputs, and also trying to increase the size of the "sign in". I was wondering if someone could explain why when I increase the size of the font, it's not centered vertically within the login bar, and also, why it impacts the alignment of the login/password box? I'd like to be able to have it so that the boxes and sign in are not impacting each other. This may be a basic CSS function but it's eluding me, so I am hoping someone with more experience than I can help explain it.
Thank you!
Why don't you try:
.loginbarGrad > div > * {
vertical-align: middle;
}
The elements within the div within .loginbarGrad will all align to the middle of each other.
you can also float left the inputs and space them out with a bit of margin from the sides
and than you're free to increase the font-size of the .signin text just make sure to add line-height with the same height as the inputs
.signIn { font-size: 24px; line-height: 18px; }
#kp_password , #kp_email { float:left; margin: 0 5px;}

How to position this using only CSS and no tables

I want to position this HTML snippet
<div id="D1">
<div id="D1.1">HeaderText</div>
<div id="D1.2"> From
<input id="from" name="from" value=""/>
</div>
<div id="D1.3"> To
<input id="To" name="To" value=""/>
</div>
</div>
this way
+-(D1)-------------------------------------------------------------------------+
|+-(D1.1)---------------------------++-(D1.2)-------------++-(D1.3)-----------+|
|| || +-(from)-------+|| +-(to)---------+||
|| HeaderText ||From| |||To| |||
|| || +--------------+|| +--------------+||
|+----------------------------------++--------------------++------------------+|
+------------------------------------------------------------------------------+
using CSS
Things I need:
D1.1 must be left aligned and D1.2 y D1.3 must take only the space they need and must be right aligned.
Even though I represented here the width of D1.1 to take all the remaining horizontal space, it's not required to do that.
D1 should grow vertically to contain D1.1, D1.2, D1.3 completely. (No overflow, all divs completely visible)
The design must be fluid (i.e. if I change the font sizes of the text inside the divs, the layout adjust itself accordingly.
Is it possible to do all of this using only CSS and no tables? How?
Yanko,
Your ID names have periods in them and that'll be a problem in CSS since period is reserved. Best thing is to not use reserved characters in names but if you must have them, then you have to escape the periods with a backward slash. Markup can stay as is.
Here is the CSS:
#D1 {
background-color: gold;
padding: 10px;
overflow: auto;
}
#D1\.1 , #D1\.2 , #D1\.3 {
float: left;
padding: 10px;
}
If you need help understanding overflow property, here's a tutorial that discusses it.
===
Layout Gala is a pretty good reference for CSS based layouts.
You might want to take a look at this layout, or possibly this layout since they both look roughly like what you're asking for.
Good luck, and hope this helps some.
#D1 {
background-color: gold;
padding: 10px;
overflow: auto;
}
#D1\.1 {
float: left;
padding: 10px;
}
#D1\.2 , #D1\.3 {
float: right;
padding: 10px;
}
</style>
</head>
<body>
<div id="D1">
<div id="D1.1">HeaderText</div>
<div id="D1.3"> To
<input id="To" name="To" value=""/>
</div>
<div id="D1.2"> From
<input id="from" name="from" value=""/>
</div>
</div>
</body>
</html>