Hey guys i am trying to move my submit button to a input field, but its like mission impossible. Only way i can do is with position: absolute or relative and it looks horrible when i change resolution.
You can find live version on:
http://funedit.com/andurit/try1/
My CSS:
body{
margin: 0 auto;
padding: 0 auto;
background-image:url('images/background.png');
background-repeat: no-repeat;
background-size 100%;
background-position: 50% 0;
margin: 0 auto;
font-size: 13px;
font-family: Arial;
min-width: 1160px;
}
.center {
width: 1030px;
margin: 0 auto;
}
#top-panel{
background-image:url('images/top_panel.png');
background-repeat: repeat-x;
position: fixed;
min-width: 1160px;
background-size: 100%;
width: 100%;
height: 48px;
line-height: 48px;
background-position: 50% 0;
padding: 0 auto;
}
#top-button{
background-image:url('images/top_button.png');
background-repeat: no-repeat;
display: inline-block;
width: 141px;
height: 38px;
margin: 5px auto 5px 20px;
}
#top-panel #text{
color: #9c9c9c;
vertical-align:top;
}
#top-panel #text b{
font-weight: bold;
vertical-align:top;
}
#top-panel #text2{
color: #6ab1ed;
vertical-align:top;
white-space: nowrap;
margin-left: 50px; /* Horny panel, medzera medzi textami */
}
#top-panel #text3{
color: #9c9c9c;
vertical-align:top;
}
#top-panel input{
height: 22px;
line-height: 22px;
text-align: center;
vertical-align:top;
margin-top: 10px;
}
#top-panel #login-button{
height: 27px;
width:81px;
display: inline-block;
margin-top: 9px;
margin-left: 2px;
vertical-align:top;
}
#warningimg{
background-image: url("images/warning.png");
background-repeat: no-repeat;
position: relative;
left: 720px;
top: 50px;
width: 37px;
height: 35px;
}
a #warning{
color: #d4d4d4;
height:35px;
display: block;
text-align: right;
margin-top: 30px;
margin-right: 15px;
text-decoration:none;
}
#warning #underline{
text-decoration:underline;
}
#container{
width: 1027px;
height: 1456px;
background-color:#d4d4d4;
display:inline-block;
}
#logobg{
background-image: url("images/logobg.png");
background-repeat: repeat-x;
height:84px;
margin: 9px 22px;
}
#logo{
background-image: url("images/logo.png");
background-repeat: no-repeat;
width: 285px;
height: 74px;
display: inline-block;
margin: 5px 0 0 10px;
line-height: 74px;
}
#logobg input[type="text"]{
width: 273px;
height: 39px;
line-height: 39px;
border: 2px;
border-color: #d4d4d4;
vertical-align:middle;
position: relative;
left: 350px;
bottom: 35px;
display: table-cell;
}
/*
#search-submit{
background-image: url("images/search_submit.png");
background-repeat: no-repeat;
width:48px;
height: 41px;
display: inline-block;
margin-left: 900px;
margin-bottom: 10px;
}
*/
#logobg .search-submit input {
background:url(images/search_submit.png) no-repeat;
cursor:pointer;
width: 48px;
height: 41px;
border: none;
display:inline-block;
margin-left: 700px;
margin-bottom: 700px;
}
HTML:
<body>
<div id="top-panel">
<div class="center">
<span id="top-button"></span>
<span id="text"> Právě hraje <b>5000</b> hráčů na <b>150</b> serverech</span>
<span id="text2"> Registruj se zdarma </span> <span id="text3"> nebo </span>
<input type="text">
<input type="password">
<span id="login-button"><img src="images/login_button.png"></span>
</div>
</div>
<div class="center">
<div id="warningimg"></div>
<span id="warning"><span id="underline">NIGHT CUP 2014</span>- Sledujte přímý přenos</span>
</div>
<div class="center">
<div id="container">
<div id="logobg">
</span>
<input type="text">
<div class="search-submit"><INPUT type="submit" name="" value=""></div>
</div>
</div>
</div>
</body>
So please is here anybody who can fix it for me?
p.s. I think its on different line of block or something because i cant move it even with high margin , pading values
Hi your problem is that you have the submit in a div. May I ask why your text input is not in a <form>?
Try this css.
#logobg .search-submit input {
background: url("images/search_submit.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
border: medium none;
cursor: pointer;
display: inline-block;
height: 41px;
line-height: 39px;
margin-right: 20px;
margin-top: 20px;
width: 48px;
}
.search-submit {
display: inline;
float: right;
}
This jsFiddle should solve your problem. I have tried resizing it on a few screens and it has stayed in the right place. I changed and added some so styles to the search submit class.
#logobg .search-submit{
width: 48px;
height: 41px;
display: inline-block;
margin-left: 350px;
margin-top: 20px;
position: absolute;
}
#logobg .search-submit input {
background: url(http://funedit.com/andurit/try1/images/search_submit.png) no-repeat;
cursor: pointer;
width: 48px;
height: 41px;
border: none;
}
Related
I have split my navigation bar and header into two separate react components. Although, my Logo lies in the navigation bar and I am trying to make it overlap the header component.
This is how it looks on my website
The logo is the circle on the top left and the header is the cream white colour
This is how my code looks:
This is my Header HTML (I named it main-container-three)
<div className="main-container-three">
<div className="admin-container">
<p className="admin-heading">The Oilixate Shop: Oil Spells</p>
</div>
This is my Header CSS
.main-container-three{
position: relative;
width: 1440px;
height: 770px;
left: 0px;
top: 78px;
background: #ECE8DF;
z-index: 1;
border-radius: 0px 0px 37px 37px;
}
This is my Navigation Bar HTML
<div className="nav-bar">
<div className="nav-logo"></div>
<p className="nav-home">Home</p>
<p className="nav-product">Products</p>
<p className="nav-checkout">Checkout</p>
<p className="nav-admin">Admin</p>
<input type={"text"} placeholder={'Search'} className="search-box"></input>
<button className="search-btn"></button>
<div className="shopping-cart">
{/* <div className="modal"></div> */}
</div>
<div className="numb-items">
<p className="one-item">1</p>
</div>
</div>
Now this is my Navigation Bar CSS
.nav-bar{
width: 100%;
height: 82px;
background: #2B4447;
float: left;
}
.nav-logo{
width: 80px;
height: 80px;
z-index: 2;
margin-top: 27px;
margin-left: 31px;
background: grey;
border-radius: 100%;
float: left;
}
.nav-home{
font-family: 'Inter';
margin-top: 40px;
margin-left: 324px;
font-weight: 300;
color: #DAEFDE;
font-size: 20px;
float: left;
}
.nav-home:hover{
color: #FFFFFF;
}
.nav-product{
font-family: 'Inter';
margin-top: 40px;
margin-left: 71px;
font-weight: 300;
color: #DAEFDE;
font-size: 20px;
float: left;
}
.nav-product:hover{
color: #FFFFFF;
}
.nav-checkout{
font-family: 'Inter';
margin-top: 40px;
margin-left: 71px;
font-weight: 300;
color: #DAEFDE;
font-size: 20px;
float: left;
}
.nav-checkout:hover{
color: #FFFFFF;
}
.nav-admin{
font-family: 'Inter';
margin-top: 40px;
margin-left: 71px;
font-weight: 300;
color: #DAEFDE;
font-size: 20px;
float: left;
}
.nav-admin:hover{
color: #FFFFFF;
}
.search-box{
width: 225px;
height: 43px;
margin-top: 29px;
margin-left: 91px;
padding-left: 1%;
background: #ECE8DF;
border: 1px solid #000000;
border-radius: 8px;
float: left;
}
::placeholder{
color: #000000;
}
.search-btn{
border-style: none;
width: 36px;
height: 35px;
margin-top: 35px;
margin-left: -41px;
background: #EBA182;
border-radius: 5px;
background-image: url("../src/assets/Search.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 21px 21px;
float: left;
}
.shopping-cart{
width: 35px;
height: 35px;
margin-top: 33px;
margin-left: 74px;
background: #ECE8DF;
background-image: url("../src/assets/Trolley.svg");
background-repeat: no-repeat;
background-position: 7px 10px;
background-size: 20px 20px;
border-radius: 6px;
float: left;
}
Difficult to provide solution without knowing how you are writing it. Trying to give a generalized suggestion here -
Use style={{zIndex: 2}} for navigation bar and style={{zIndex: 1}} for header component
Alternatively, you can use CSS and in that case replace zIndex with z-index
You may want to use position attribute (relative/absolute) for zIndex to work (https://www.w3schools.com/cssref/pr_pos_z-index.asp)
I have an relative button
button {
width: 305.4px;
height: 60px;
background: #E43B40;
margin-top: 109.5px;
margin-left: auto;
margin-right: auto;
display: inline-block;
cursor: pointer;
border: 0px;
outline: none;
font-family: Roboto Bold;
font-size: 16px;
color: #FFFFFF;
position: relative
}
I am trying to center it in the middle of screen. But it is stuck on the same place , the margins does not affect it. Parent element of this button is div with styles as follows:
parent {
width: 100%;
height: 100%;
margin-top: 504px;
background-repeat: no-repeat;
background-color: #F8F8F8;
padding-bottom: 250px;
overflow: auto;
display: block;
}
What could possibly cause this? Demo is here
html,
body {
height: 100%;
}
body {
margin: 0;
}
.button {
width: 305.4px;
height: 60px;
background: #E43B40;
display: inline-block;
cursor: pointer;
border: 0px;
outline: none;
font-family: Roboto Bold;
font-size: 16px;
color: #FFFFFF;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.parent{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-color: #F8F8F8;
text-align: center;
}
<div class="parent">
<button class="button" type="button">Button</button>
</div>
button {
width: 305.4px;
height: 60px;
background: #E43B40;
margin-top: 109.5px;
margin-left: auto;
margin-right: auto;
display: inline-block;
cursor: pointer;
border: 0px;
outline: none;
font-family: Roboto Bold;
font-size: 16px;
color: #FFFFFF;
position: relative;
display:inline-block;
float:none;
}
parent{
width: 100%;
height: 100%;
margin-top: 504px;
background-repeat: no-repeat;
background-color: #F8F8F8;
padding-bottom: 250px;
overflow: auto;
display: block;
text-align:center;
}
i have updated both classes. apply it in your css.
I currently have this HTML:
#circle {
background-color: orange;
max-width: 40px;
margin-right: 20px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float:left;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv{
float:left;
}
<div id="circle"><span id='innerContent'>123</span></div><div id='pointerDiv'>text goes here</div>
I'm trying to achieve this effect:
Basically, a line that goes from the border to point to an element I can fill with text that explains the number. How do I do this?
The below is one sample method to achieve this by using a pseudo-element and then positioning it absolutely as required.
The reason for the left: -58px is because the margin-right (I had modified it from the 20px in question to 50px in answer just for illustration) is 50px + the border of the box is a few px inside the circle and so that also had to be considered. The width of the line is made smaller than the left value so as to make the line end just before the pointerDiv.
Note that I have also added a clear: both to the #circle just in-case you want to add more such entries one below the other. If not required, it can be removed.
#circle {
background-color: orange;
max-width: 40px;
margin-right: 50px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float: left;
clear: both;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv {
float: left;
position: relative;
height: 40px;
line-height: 40px;
}
#pointerDiv:before {
content: '';
position: absolute;
border: 1px solid black;
top: 50%;
left: -58px;
width: 55px;
}
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>text goes here</div>
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>some lengthy text goes here</div>
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>short txt</div>
You can either use a CSS border or a SVG to draw a line (may not be compatible with some browser)
#circle {
background-color: orange;
max-width: 40px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float: left;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv {
float: left;
line-height: 40px;
}
#line-svg {
float: left;
margin-top: 20px;
margin-left: -6px;
width: 100px;
}
<div id="circle"><span id='innerContent'>123</span>
</div>
<svg id="line-svg">
<line x1="0" y1="0" x2="100%" y2="0" style="stroke:rgb(0,0,0);stroke-width:4" />
</svg>
<div id='pointerDiv'>text goes here</div>
You could always use pseudo elements? I've created a basic mockup below:
.circle {
height: 55px;
width: 55px;
border-radius: 50%;
background: orange;
position: relative;
display: inline-block;
}
.circle:before {
position: absolute;
content: "hi";
height: 60%;
top: 20%;
left: 20%;
width: 60%;
border: 2px solid black;
}
.circle:after {
position: absolute;
content: "";
width: 100%;
right: -85%;
top: 50%;
border-bottom: 1px solid black;
}
.tooltip {
display: inline-block;
margin-left: 55px;
height: 60px;
width:60px;
}
.wrapper{
display:block;
}
<div class="wrapper">
<div class="circle"></div>
<div class="tooltip">text goes here</div>
</div>
i'm attempting to recreate a webpage as part of my HTML/CSS training. The webpage in question is this:
, the UEI website (it's old and doesn't look like that anymore).
Below is my code, CSS is rolled into the HTML since it's a single project. Here are a few things i'm having trouble with, any help is greatly appreciated!
1.) How do I get my main div, the center of the body containing all the paragraphs and whatnot, to "spill" over into the footer just like in the original? I've tried the z-indexes but that doesn't seem to do anything.
2.) How come the second box, and the "Start" div will not show up at all? Am I doing something wrong with positioning?
3.) For the right arrow in the orange bar, how do I resize it so it's not cutting off the bottom quarter of the arrows?
4.) How do I get the nav bar UL to have the orange background not just around the words, but as it shows in the original?
5.) How do I resize the bottom UEI logo so it appears smaller like in the original?
Thank you so much for any help! Below is the code I have so far. I'm pretty new to this, but please don't hesitate to critisize anything you see:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrapper {
width: 960px;
margin: 0 auto;
background: #D6D6D7;
}
#topbanner {
background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
height: 131px;
margin-top: -20px;
}
.menu {
float: left;
display: inline-block;
margin-top: 14px;
margin-left: 50px;
color: white;
}
ul {
background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
height: 40px;
margin-left: 266px;
margin-right: 100px;
margin-top: 34px;
width: 560px;
position: relative;
}
li:hover {
background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
}
#main {
background: white;
width: 788px;
height: 650px;
z-index: 10;
margin-left: 78px;
position: relative;
padding-top: 20px;
}
#blackbar {
background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#whitepeople{
background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
background-size: contain;
width: 50%;
height: 250px;
margin-top: -190px;
}
#orangebar {
background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
margin-top: -22px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#arrow {
background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
position: relative;
height: 35px;
width: 100%;
margin-left: 375px;
margin-top: -48px;
}
#box1 {
background: #CCC;
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -488px;
margin-right: 70px;
z-index: 5;
}
#start {
background: url(https://i.imgur.com/rp7lJrE.png) contain;
height: 75px;
width: 275px;
position: relative;
float: right;
margin: 0 auto;
}
#box2 {
background: #0C3
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -475px;
margin-right: 50px;
z-index: 1;
}
#bottom {
background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
height: 200px;
z-index: 1;
position: relative;
}
#ueilogo {
background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
float: left;
height: 131px;
width: 131px;
padding-left: 45px;
padding-right: 55px;
margin-left: 35px;
margin-right: 35px;
}
#botlogo {
background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
background-size: contain;
height: 150px;
width: 960px;
z-index: 5;
margin: 0 auto;
position: relative;
}
h2 {
color: white;
size: 16px;
font-family: Times New Roman;
margin-left: 25%;
padding-top: 35px;
position: relative;
}
.banner1{
color: white;
font-size: 14px;
margin-top: -145px;
margin-left: 65px;
}
.banner2 {
color: white;
margin-top: -150px;
margin-left: 70px;
padding-top: 9px;
font-size: 18px;
}
</style>
<title>UEI Mockup</title>
</head>
<body>
<div id="wrapper">
<div id="topbanner">
<div id="ueilogo">
</div>
<h2>Student Success is Our Success</h2>
<ul>
<li class="menu">ABOUT UEI COLLEGE</li>
<li class="menu">OVERVIEW</li>
<li class="menu">FINANCIAL AID</li>
</ul>
</div>
<div id="main">
<div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p> </div>
<div id="whitepeople"></div>
<div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>
<div id="box1"><div id="start"></div></div><div id="box2"></div>
</div>
<div id="bottom"><div id="botlogo"></div></div>
</div>
</body>
</html>
equal to the image.
<div id="wrapper">
<div id="topbanner">
<div id="ueilogo"></div>
<h2>Student Success is Our Success</h2>
<ul>
<li class="menu">ABOUT UEI COLLEGE</li>
<li class="menu"> OVERVIEW </li>
<li class="menu">FINANCIAL AID</li>
</ul>
</div>
<div id="main">
<div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p> </div>
<div id="whitepeople"></div>
<div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>
<div id="box1"><div id="start"></div></div><div id="box2"></div>
</div>
<div id="bottom"><div id="botlogo"></div></div>
</div>
css
*{
margin: 0;
padding: 0;
}
#wrapper {
display: table;
width: 960px;
margin: 0 auto;
background: #D6D6D7;
}
#topbanner {
background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
width: 100%;
height: 131px;
}
#ueilogo {
background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
float: left;
height: 131px;
width: 131px;
padding-left: 45px;
padding-right: 55px;
margin-left: 35px;
margin-right: 35px;
}
ul {
background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
height: 40px;
list-style: none;
margin-left: 266px;
margin-top: 34px;
width: 600px;
}
.menu {
padding: 1px 20px;
margin-top: 13px;
float: left;
color: white;
}
li:hover {
padding: 1px 20px;
background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
background-size: 100% 100%;
}
#main {
background: white;
width: 788px;
height: 650px;
z-index: 10;
margin-left: 78px;
position: absolute;
padding-top: 20px;
border-bottom-right-radius:6px;
border-bottom-left-radius:6px;
}
#blackbar {
background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
position: relative;
padding: 150px 21px 0 25px;
left: -23px;
}
#whitepeople{
background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
background-size: contain;
width: 50%;
height: 250px;
margin-top: -190px;
}
#orangebar {
background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
margin-top: -22px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#arrow {
background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
position: relative;
height: 35px;
width: 100%;
margin-left: 375px;
margin-top: -30px;
}
#box1 {
background: #CCC;
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -490px;
margin-right: 70px;
border-radius: 5px;
z-index: 5;
}
#start {
background: url(https://i.imgur.com/rp7lJrE.png) no-repeat;
background-size: 100% 100%;
position: absolute;
height: 32px;
width: 292px;
}
#box2 {
background: #8dc73f;
height: 441px;
width: 275px;
position: relative;
float: right;
margin-top: -470px;
margin-right: 61px;
border-radius: 5px;
z-index: 1;
}
#bottom {
background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
margin-top: 620px;
height: 200px;
position: relative;
}
#botlogo {
background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
background-size: contain;
position: absolute;
height: 150px;
width: 788px;
z-index: 5;
margin-left: 78px;
bottom: 0;
}
h2 {
color: white;
size: 16px;
font-family: Times New Roman;
margin-left: 25%;
padding-top: 35px;
position: relative;
}
.banner1{
color: white;
font-size: 14px;
margin-top: -145px;
margin-left: 65px;
}
.banner2 {
color: white;
margin-top: -150px;
margin-left: 70px;
padding-top: 9px;
font-size: 18px;
}
Keep in mind I'm a complete css noob. If I understood some of the questions correctly...
Replace
background: url(https://i.imgur.com/rp7lJrE.png) contain;
with
background: url('https://i.imgur.com/rp7lJrE.png') no-repeat;
Also, you forgot to close the statement
background: #0C3;
when styling box2
And to fit the arrow make the font smaller, change the margin, or use the font they are. Theirs seems big enough but shrunk horizontally.
Here is the updated code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrapper {
width: 960px;
margin: 0 auto;
background: #D6D6D7;
}
#topbanner {
background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
height: 131px;
margin-top: -20px;
}
.menu {
float: left;
display: inline-block;
margin-top: 14px;
margin-left: 50px;
color: white;
}
ul {
background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
height: 40px;
margin-left: 266px;
margin-right: 100px;
margin-top: 34px;
width: 560px;
position: relative;
}
li:hover {
background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
}
#main {
background: white;
width: 788px;
height: 650px;
z-index: 10;
margin-left: 78px;
position: relative;
padding-top: 20px;
}
#blackbar {
background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#whitepeople{
background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
background-size: contain;
width: 50%;
height: 250px;
margin-top: -190px;
}
#orangebar {
background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
margin-top: -22px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#arrow {
background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
position: relative;
height: 35px;
width: 100%;
margin-left: 340px;
margin-top: -46px;
}
#box1 {
background: #CCC;
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -488px;
margin-right: 70px;
z-index: 5;
}
#start {
background: url('https://i.imgur.com/rp7lJrE.png') no-repeat;
height: 75px;
width: 275px;
position: relative;
float: right;
margin: 0 auto;
}
#box2 {
background: #0C3;
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -475px;
margin-right: 50px;
z-index: 1;
}
#bottom {
background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
height: 200px;
z-index: 1;
position: relative;
}
#ueilogo {
background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
float: left;
height: 131px;
width: 131px;
padding-left: 45px;
padding-right: 55px;
margin-left: 35px;
margin-right: 35px;
}
#botlogo {
background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
background-size: contain;
height: 150px;
width: 960px;
z-index: 5;
margin: 0 auto;
position: relative;
}
h2 {
color: white;
size: 16px;
font-family: Times New Roman;
margin-left: 25%;
padding-top: 35px;
position: relative;
}
.banner1{
color: white;
font-size: 14px;
margin-top: -145px;
margin-left: 65px;
}
.banner2 {
color: white;
margin-top: -150px;
margin-left: 65px;
padding-top: 9px;
font-size: 17px;
}
</style>
<title>UEI Mockup</title>
</head>
<body>
<div id="wrapper">
<div id="topbanner">
<div id="ueilogo">
</div>
<h2>Student Success is Our Success</h2>
<ul>
<li class="menu">ABOUT UEI COLLEGE</li>
<li class="menu">OVERVIEW</li>
<li class="menu">FINANCIAL AID</li>
</ul>
</div>
<div id="main">
<div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p> </div>
<div id="whitepeople"></div>
<div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>
<div id="box1"><div id="start"></div></div>
<div id="box2"></div>
</div>
<div id="bottom"><div id="botlogo"></div></div>
</div>
</body>
</html>
Also, nice job naming a div white people. lol.
I have a page that is 1600px wide. The main area though is only 900px wide. I have a navigation that is suppose to be fixed in the center of the page ( which it is ). My problem is when I open the page, the page is fixed left instead of being centered when opened. What do I need to do to center everything within the 900px when a user visits the site?
The code isn't exact because it's detailed but it basically goes like this: http://jsfiddle.net/wznQk/
<body>
<div class="container">
<div class="header">
<div class="subheader">
<div class="navigation">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="logo"><img src="images/ogsystemslogo.png" /></li>
<li>CAREERS</li>
<li>CONTACT</li>
</ul>
</div>
<div class="undernav">
<div class="short">
<img src="images/bluemark.png" />
<div class="top">TOP OGS NEWS:</div>
</div>
</div>
</div>
</div>
<div class="content">
</div>
</div>
</body>
CSS
.body {
width: 1600px;
height: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
position: relative;
text-align: center;
}
.container {
width: 1600px;
height: 100%;
position: relative;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
}
.header {
width: 1600px;
height: 150px;
margin: 0 10% 0 10%;
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
.subheader {
width: 1600px;
height: 100px;
margin: 0 auto;
position: fixed;
background-color: white;
top: 0px;
}
.navigation {
font-family: 'Champagne & Limousines';
font-size: 20px;
text-align: left;
width: 1600px;
height: 100px;
padding: 0px;
margin-left: 0 auto;
border: 0px;
list-style: none;
text-decoration: none;
display: table-cell;
vertical-align: middle;
color: #006699;
background-color: white;
}
.navigation ul {
width: 590px;
height: 20px;
list-style: none;
text-decoration: none;
position: relative;
line-height: 55px;
margin: 0 auto;
background-color: white;
padding: 0px;
border: 0px;
}
.navigation ul li {
width: 70px;
height: 15px;
float: left;
padding-left: 35px;
background-color: white;
}
Please try to add this CSS instead of yours. In your CSS I found lot of unwanted CSS tags but I keep them as it is.
body {
width: 1600px;
height: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
position: relative;
text-align: center;
}
.container {
width: 900px;
height: 100%;
position: relative;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
}
.header {
width: 1600px;
height: 150px;
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
.subheader {
width: 900px;
height: 100px;
position: fixed;
background-color: white;
top: 0px;
}
.navigation {
font-family: 'Champagne & Limousines';
font-size: 20px;
text-align: left;
width: 590px;
height: 100px;
padding: 0px;
margin: 0 auto;
border: 0px;
list-style: none;
text-decoration: none;
vertical-align: middle;
color: #006699;
background-color: white;
}
.navigation ul {
width: auto;
height: 20px;
list-style: none;
text-decoration: none;
position: relative;
line-height: 55px;
background-color: white;
padding: 0px;
border: 0px;
}
.navigation ul li {
width: 70px;
height: 15px;
float: left;
padding-left: 35px;
background-color: white;
}
Css:
.header {
width: 1600px;
height: 150px;
left: 50%;
margin-left: -800px;/*half of your total width*/
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
Added left: 50%; margin-left: -800px;/*half of your total width*/ to your .header class
Fiddle : http://jsfiddle.net/avinvarghese/wznQk/3/show/