i have a question about how to put my input text box in the center of the page and be responsive.
Here is the HTML code:
<body>
<div class="container container-padding50">
<input type="text" class="js-userinput container-textinput" placeholder="mySearchApp">
</div>
<div class="message">
<p>input anything you want search and press Enter</p>
</div>
<div class="js-container">
<!-- image shows here -->
</div>
<script src="javascript/main.js"></script>
</body>
and i have tried CSS with:
body {
width: 80%;
max-width: 1024px;
margin: 0 auto;
}
.container-padding50 {
padding-top: 50px;
left:50%;
}
.container-textinput {
text-aligen:center;
width: 80%;
/*display: relative;*/
left: 50%;
padding: 20px;
font-size: 16px;
font-family: Helvetica, sans-serif;
border:none;
border-bottom: 2px solid black;
}
I am intend to set my input field looks simple as only an underline with "mySearchApp", but I have tried with left:50% in order to make this in the middle of the page, could someone tell me why this does not work? Do I miss something here?
In order to use the left property, the element must be positioned.
The left CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/left
Try this:
body {
width: 80%;
max-width: 1024px;
margin: 0 auto;
}
.container-padding50 {
position: relative; /* NEW */
padding-top: 50px;
height: 80px; /* NEW */
}
.container-textinput {
position: absolute; /* NEW */
left: 50%;
transform: translateX(-50%); /* NEW; see note below */
text-align: center;
width: 80%;
padding: 20px;
font-size: 16px;
font-family: Helvetica, sans-serif;
border: none;
border-bottom: 2px solid black;
}
<div class="container container-padding50">
<input type="text" class="js-userinput container-textinput" placeholder="mySearchApp">
</div>
<div class="message">
<p>input anything you want search and press Enter</p>
</div>
<div class="js-container">
<!-- image shows here -->
</div>
Why use transform when centering:
Element will not stay centered, especially when re-sizing screen
Related
I've seen many websites have a container with a 950px width and they have a top header which contains some links and they're aligned with container's margin. Header also have a background color which fills all the area out of container and that's what I want to do too. Probably not well explained, so let's get some example:
StackOverflow has an "header" where there are links like "Questions" "Jobs" "Documentation" "Tags" "Users" and they're aligned with the container, but it also has the background color filling the area out of container. My question is how to get the same header "layout" which has text/links aligned with container and the background color which is stretched over div container.
HTML CODE
<body><div class="container">
<div class="switcher">
<div class="platform-switcher">
<div id="pc-switcher"><img src="pc-logo.png"> PC Games</div>
<div id="xbox-switcher"><img src="xbox-logo.png"> Xbox</div>
<div id="ps4-switcher"><img src="ps4-logo.png"> PS4</div>
</div>
<div class="flags">
<div class="language"></div>
<div class="currency"></div>
</div>
</div>
<div id="search">
<form id="search-form">
<input type="text" id="searchbar">
</form>
</div>
</body>
CSS CODE
.container {
width: 950px;
margin: 0 auto;
}
.platform-switcher {
background-color: black;
height: 40px;
display: inline-block;
}
#search-form {
float: right;
}
.platform-switcher div {
}
#pc-switcher {
color: #cc5a00;
height: 17px;
padding-left: 29px;
padding-top: 12px;
padding-right: 18px;
font-weight: bold;
float: left;
font-size: 11px;
position: relative;
}
#xbox-switcher {
color: #cc5a00;
height: 17px;
padding-left: 29px;
padding-top: 12px;
padding-right: 18px;
font-weight: bold;
float: left;
font-size: 11px;
position: relative;
}
#ps4-switcher {
color: #cc5a00;
height: 17px;
padding-left: 29px;
padding-top: 12px;
padding-right: 18px;
font-weight: bold;
float: left;
font-size: 11px;
position: relative;
}
What I want is to stretch the div's background color of ".platform-switcher" out of "container" and keep aligned, to the container, "platform-switcher" content (PC Games/Xbox etc...).
If I understand, you want to have full-width elements that wrap an element that defines your "container" or "viewport" or "content" width. Here's an example.
* {
margin:0;padding:0;
box-sizing:border-box;
}
header,footer {
background: black;
color: white;
}
.viewport {
width: 90%;
margin:auto;
max-width: 960px;
padding:2em 0;
}
<header>
<div class="viewport">
header
</div>
</header>
<main class="viewport">
content
</main>
<footer>
<p class="viewport">footer</p>
</footer>
I don't know if i understand but i try :D
try this: (add this to the div you want)
background-color: red;
width: 100%;
border-bottom: 1px solid grey; */ for the border */
z-index: 999;
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.
To preface: I've come across a number of other solutions but have had no luck finding one that works. I'm currently using this answer for align my text to the bottom of my divs, but without any luck.
For whatever reason, my vertical-align: bottom; property does not affect the css of the page at all. What am I doing wrong here if I want to align the text to the bottom of the image?
index.html
<body>
<div class="header">
<div class="container">
<div class="pull-left">
What's This?
</div>
<img src="http://placehold.it/75x75" />
<div class="pull-right">
About
</div>
</div>
</div>
<!-- Modules -->
<!-- Controllers -->
<!-- Services -->
</body>
main.css
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
body {
background-color: #FF3B4E;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
background-color: white;
text-align: center;
height: 125px;
}
.header img {
margin: 25px 0;
}
.header .pull-left{
border: 1px solid black;
height: 75px;
margin-top: 25px;
top: 0;
line-height: 75px;
vertical-align: bottom;
}
.header .pull-right {
border: 1px solid black;
height: 75px;
margin-top: 25px;
top: 0;
line-height: 75px;
vertical-align: bottom;
}
The reason I have boxes around pull-left and pull-right is for visual purposes when dealing with this problem. I'll remove the borders once I can get the text to align properly. Thanks for any help!
jsfiddle: https://jsfiddle.net/rtc498uk/
EDIT: My goal is to get the text to align like this:
.pull-right a, .pull-left a{
line-height: 1em;
vertical-align: bottom;
}
Just wanna ask for your help regarding my markup, I am trying to do exactly the same like this image:
http://prntscr.com/6wrpr3
Here's my markup:
<div id="two-box">
<div class="wrapper clearfix">
<div class="column blue">
<div id="circle">
<div id="content">
<h2>PARALLAX</h2>
<h1>Text</h1>
<h2>ARE COOL!</h2>
</div>
</div>
</div>
<div class="column red">
<div id="circle-red">
<h2>LET IT</h2>
<h1>Fade</h1>
<h2>RIGHT NOW!</h2>
</div>
</div>
</div>
</div>
<div id="carport">
<div class="wrapper clearfix">
<div id="starynight"></div>
<div id="car"></div>
<div id="road"></div>
</div>
</div>
ANd now for my CSS:
.wrapper {
width: 90%;
margin: 0 auto;
max-width: 1140px;
}
.two-box{
width: 100%;
}
.column{
width: 50%;
position: relative;
padding: 40px 0;
}
.blue{
background-color: #3498db;
float: left;
}
.red{
background-color: #e74c3c;
float: right;
}
#content{
margin-top: 150px;
}
.column h2{
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 3.5em;
font-weight: 300;
line-height: 1em;
text-align: center;
margin: 0;
}
.column h1{
color: #fff;
font-family: 'Pacifico', sans-serif;
font-size: 4.2em;
line-height: 0em;
text-align: center;
border-top: 4px solid #fff;
border-bottom: 4px solid #fff;
padding: 40px;
margin: 0;
}
#circle{
background-color: #3aa3e9;
border-radius: 50%;
width: 450px;
height: 450px;
margin: 0 auto;
}
#circle-red{
background-color: #f25a4a;
border-radius: 50%;
width: 450px;
height: 450px;
margin: 0 auto;
}
#road{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/road.jpg') no-repeat center;
width: 1020px;
height: 145px;
display: block;
}
#car{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/car.png') no-repeat center;
width: 325px;
height: 125;
display: block;
position: absolute;
z-index: 9999;
}
#starynight{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/starynight.jpg') no-repeat center;
width: 1012px;
height: 768px;
display: block;
}
Here's the Codepen:
Let me know if there are things on my markup and CSS that i need to fix or show me the actual codepen. Thanks!
Note: The main issue here is the positioning of elements. Let's say I want the text and circle to be align together and not have a padding. Similar thing with the background and the car image they wont just align at all.
Something like this?
http://jsfiddle.net/4kk1fyjg/
I basically set the background-position to cover, fixed the car height (missing px at the end) and set the wrapper position to relative so that the car should be absolute positioned according to the container.
let me know if this works as expected.
Not sure about the car position, but you can adjust the position changing the right or left property
EDIT
Here you are:
http://jsfiddle.net/4kk1fyjg/2/
Just wrap the content inside another div, set the circle position to relative, display as table, the new wrapping div as table-row and the #content as table-cell, then make the table cell vertically align in the middle and that should be it.
You miss <div id="content"> in circle-red.
Remove width from #starnight and add background-size: 100% do the same for #road.
To #car change position to relative and add:
float:right;
bottom:100px;
right:150px;
To #content remove margin-top and add padding-top:125px;
And finaly for .column h1 change margin to margin: 0 40px;
hope this work how expected
JSFiddle
I'm having trouble trying to get a desired page layout to work by using HTML5/CSS3 only (without needing JavaScript).
The basic concepts are...
A page with a header and body (static).
The body has several "sections" which each have a header and body (static).
The sections flow from left-to-right (you scroll the page body horizontally to see the sections if they overflow).
The sections have a fluid height and width (height adjusts to the size of the page body, width adjusts based on the contents or a min of 300px).
The fields within the section body flow from top-to-bottom. When there is overflow, the fields overflowing should move to a new column and the section body should expand dynamically. The should not be broken apart if they overflow to a new column (the label and input should be moved together).
NOTE: I'm testing in IE11 currently but ultimately the solution should be functional in the latest Chrome/FF/IE/Safari versions.
I can't seem to get the section body to expand when the fields overflow into new columns while still retaining the column behavior.
HTML:
<div class="container">
<div class="header">Header</div>
<div class="body">
<div class="section">
<div class="sectionheader">Section 1</div>
<div class="sectionbody">
<div class="field">
<label>Field 1</label>
<input type="text" />
</div>
<!-- NOTE: repeat field element to create 5 or more fields... -->
</div>
</div>
<!-- NOTE: repeat section element to create more sections... -->
</div>
</div>
CSS:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
html, body, .container {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-color: gray;
overflow: hidden;
}
.header {
height: 150px;
background-color: red;
}
.body {
position: absolute;
top: 150px;
bottom: 0;
left: 0;
right: 0;
white-space: nowrap;
vertical-align: top;
padding: 40px;
overflow-x: auto;
overflow-y: hidden;
}
.section {
min-height: 200px;
height: 100%;
border: 2px solid red;
margin-right: 40px;
display: inline-block;
min-width: 300px;
position: relative;
vertical-align: top;
}
.sectionheader {
height: 40px;
color: white;
font-size: 20pt;
padding-left: 5px;
}
.sectionbody {
white-space: normal;
border: 2px solid blue;
padding-top: 10px;
color: white;
height: calc(100% - 40px);
column-count: auto;
-webkit-column-count: auto;
column-width: 320px;
-webkit-column-width: 320px;
column-fill: auto;
-webkit-column-fill: auto;
}
.field {
margin: 0 10px 10px 10px;
width: 300px;
display: inline-block;
}
.field label {
font-size: 12px;
line-height: 20px;
display: block;
}
.field input {
width: 100%;
font-size: 16px;
line-height: 20px;
height: 40px;
padding-left: 5px;
}
Here is the fiddle: http://jsfiddle.net/t7kQ4/7/
(drag the handle to adjust the height of the result pane to trigger the field overflow)
Does this help: http://jsfiddle.net/t7kQ4/10/
You need to remove the calc you are performing and allow it to be auto.
section {
height:auto;
}
.sectionbody {
height:auto;
}