I want to create web app for my home automation system but i have a problem with the img of my house.
What i want is to have center (verticaly and horizontaly) image of my house, responsive and still at the image's ratio.
First i try :
body {
color: #000;
background: #3A3D50;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 100%;
margin: 0 auto;
}
.rect {
width: 100%;
height: 0;
padding-bottom: 50%;
text-align: left;
background-image: url('http://www.bashihq.com/wp-content/uploads/2015/08/3d-house-floor-plans-modern-3d-floor-plans-are-also-a-great-way-for-architects-realtors-and-at-house-floor.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position:relative;
}
<div class="container">
<div class="rect">
</div>
</div
Work great but didn't verticaly centered.
So i try to add some absolute positioning :
body {
color: #000;
background: #3A3D50;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 100%;
height: 50%;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.rect {
width: 100%;
height: 0;
padding-bottom: 50%;
text-align: left;
background-image: url('http://www.bashihq.com/wp-content/uploads/2015/08/3d-house-floor-plans-modern-3d-floor-plans-are-also-a-great-way-for-architects-realtors-and-at-house-floor.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position:relative;
}
<div class="container">
<div class="rect">
</div>
</div>
But how center .rect into .container ?
Thank a lot.
Edit :
I forget to precise, i need to place div on my image that keep location.
body {
color: #000;
background: #3A3D50;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 100%;
height: 50%;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.rect {
width: 100%;
height: 0;
padding-bottom: 50%;
text-align: left;
background-image: url('http://www.bashihq.com/wp-content/uploads/2015/08/3d-house-floor-plans-modern-3d-floor-plans-are-also-a-great-way-for-architects-realtors-and-at-house-floor.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position:relative;
}
.rect2 {
width: 3%;
padding-bottom: 3%;
position: absolute;
top: 40%;
left: 31.5%;
background-color: blueviolet;
border-radius: 100px;
}
.rect4 {
width: 3%;
padding-bottom: 3%;
position: absolute;
top: 25%;
left: 60%;
background-color:rgba(0, 0, 0, 0.6);
border-radius: 100px;
}
.rect3 {
width: 50%;
height:50%;
background-image: url('images/light.png');
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 25%;
left:32%;
}
code
<body>
<div class="container">
<div class="rect">
<div class="rect2"><div class="rect3"></div></div>
<div class="rect4"><div class="rect3"></div></div>
</div>
</div>
</body>
You can use transform:translate (CSS3)
CSS
body {
color: #000;
background: #3A3D50;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 100%;
height: 50%;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.rect {
position: relative;
display: block;
height: 350px; // Adjust your needs
width: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-image: url('http://www.bashihq.com/wp-content/uploads/2015/08/3d-house-floor-plans-modern-3d-floor-plans-are-also-a-great-way-for-architects-realtors-and-at-house-floor.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
DEMO HERE
Related
i want to use z-index for text and overlay.
https://jsfiddle.net/osm2rkbx/1/
it is my code.
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.mainArea p {
display: flex;
height: 50vh;
font-size: 1.5rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-shadow: 2px 2px 4px #000000;
z-index: 999999 !important;
}
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
top: 0;
left: 0;
z-index: 1;
}
<div class="mainArea">
<div class="container">
<div class="col-md-12 text-center ">
<p>its the text..</p>
</div>
</div>
<div class="mainAreaOverlay"></div>
</div>
when i use z-index for text, its not working. It seems pale. How can i see text with white. İf you help me i will be glad, thanks.
Put z-index:-1 in mainArea class and update z-index:-1 to mainAreaOverlay class.
Old mainArea class:
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Updated:
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index:-1;
}
Old mainAreaOverlay class:
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
top: 0;
left: 0;
z-index: 1;
}
Updated:
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
top: 0;
left: 0;
z-index: -1;
}
I am using css-sprites on a few pages of a website as navigation buttons, with a part of the image darkening when hovered over. All these buttons have text on them. Before I had just written the text onto the image and things worked fine, but I wanted to add the text to my html so that it renders better for anyone that zooms in to the page. Doing this however has now caused the images for the sprites not to appear in Firefox, Chrome and IE (still works fine in Safari).
Obviously I assumed that adding the text to the code had caused this but now even when I remove the text, the images still don't show up. I'm really having trouble figuring out why this is, especially as I have 2 other pages that use sprites and they are still working fine. The only difference is that i hadn't attempted to move the text into my code on those pages.
Any suggestions are really appreciated
Code for the broken sprites:
.row5
{
width: 940px;
height: 220px;
position: absolute;
left: 10px;
top: 1215px;
}
.box1
{
background: url(http://www.sungblue.com/Images/box1sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
}
.boxtext
{
font-family: elron;
color: rgba(255,255,255,1.00);
font-size: 18px;
width: 306px;
height: 18px;
position: absolute;
top: 175px;
left: 0px;
text-align: center;
}
.box1:hover
{
background-position: 0 -201px;
}
.box2
{
background: url(http://www.sungblue.com/Images/box2sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 317px;
}
.box2:hover
{
background-position: 0 -201px;
}
.box3
{
background: url(http://www.sungblue.com/Images/box3sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 634px;
}
.box3:hover
{
background-position: 0 -201px;
}
.row6
{
width: 940px;
height: 220px;
position: absolute;
left: 10px;
top: 1425px;
}
.box4
{
background: url(http://www.sungblue.com/Images/box4sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
}
.box4:hover
{
background-position: 0 -201px;
}
.box5
{
background: url(http://www.sungblue.com/Images/box5sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 317px;
}
.box5:hover
{
background-position: 0 -201px;
}
.box6
{
background: url(http://www.sungblue.com/Images/box6sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 634px;
}
.box6:hover
{
background-position: 0 -201px;
}
<div class='row5'>
<a href='http://www.sungblue.com/weddings.html'>
<div class='box1'>
<div class='boxtext'>WEDDINGS</div>
</div>
</a>
<a href='http://www.sungblue.com/prewedding.html'>
<div class='box2'>
<div class='boxtext'>ENGAGEMENT SHOOTS</div>
</div>
</a>
<a href='http://www.sungblue.com/contact.html'>
<div class='box3'>
<div class='boxtext'>CONTACT</div>
</div>
</a>
</div>
<div class='row6'>
<a href='http://sungbluephotography.zenfolio.com'>
<div class='box4'>
<div class='boxtext'>CLIENT AREA</div>
</div>
</a>
<a href='http://www.sungblue.com/prices.html'>
<div class='box5'>
<div class='boxtext'>PRICING</div>
</div>
</a>
<a href='http://sungbluephotography.zenfolio.com/blog/'>
<div class='box6'>
<div class='boxtext'>BLOG</div>
</div>
</a>
</div>
And here's the code from my other page where my sprites are working:
.row3
{
width: 940px;
height: 288px;
position: absolute;
left: 10px;
top: 335px;
text-align: center;
}
.box1
{
background-image: url(http://www.sungblue.com/Images/weddingbox1sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 0px;
}
.boxtext
{
width: 465px;
height: 18px;
position: absolute;
left: 0px;
top: 260px;
font-family: elron;
font-size: 18px;
color: rgba(255,255,255,1.00);
text-align: center;
}
.box1:hover
{
background-position: 0 -289px;
}
.box2
{
background-image: url(http://www.sungblue.com/Images/weddingbox2sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 475px;
}
.box2:hover
{
background-position: 0 -289px;
}
.row4
{
width: 940px;
height: 288px;
position: absolute;
left: 10px;
top: 633px;
text-align: center;
}
.box3
{
background-image: url(http://www.sungblue.com/Images/weddingbox3sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 0px;
}
.box3:hover
{
background-position: 0 -289px;
}
.box4
{
background-image: url(http://www.sungblue.com/Images/weddingbox4sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 475px;
}
.box4:hover
{
background-position: 0 -289px;
}
The problem is with the images themselves. Since they have .jpg extensions, the browsers try to treat them as JPEG files, which they are not. They are PNG files.
Solution: rename them to .png, or convert them to actual JPEG files.
Okay, so at this moment I am busy learning responsive CSS. It might be simple for you, but I don't understand how to archieve this:
I am playing with making a 'grid'. I have set all the classes to percentages in width and height, so that should not be the problem. However, when I resize the viewport (window), it's not dynamically growing or shrinking.
See: here
Currently using the following html:
<meta name="viewport" content="width=device-width" />
<div id="wrapper">
<div id="header">
</div>
<div id="presenter">
</div>
<div id="main">
</div>
Using the following CSS:
<style>
/* Theme */
html {
margin-top: 0px !important;
}
/* DO NOT EDIT OR MONKEYS WILL BITE YOU */
.frame_holder {
position: absolute;
top: 8px;
bottom: 50px;
/* left: 50px; */
right: 150px;
background: #ffffff;
}
.my_frame {
width: 149%;
height: 108%;
/* border: 1px solid #e0e0e0; */
}
body {
background-color: #f0ede9;
margin-top: 0px;
position: relative;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.clearfix {
clear: both;
}
p {
font-family: Roboto;
padding: 1px;
}
#body.layout-1 {
background: #f0ede9 url(../images/border.gif) 640px top repeat-y scroll;
background-color: #f0ede9;
background-image: url(../images/border.gif), url(../images/border-2.gif);
background-repeat: repeat-y, repeat-y;
background-position: 640px top, 0px top;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
color: #bababa;
font-family: Roboto;
}
#wrapper {
width: 965px;
margin: 0 auto;
overflow: hidden;
}
#header {
width: 100%;
height: 80px;
background: #2a2727;
margin-top: 20px;
color: #fff;
}
.top-logo-container {
display: block;
height: 100px;
width: 100px;
text-indent: -9999px;
background: url(http://favoritefm.com/wp-content/themes/FavClear/img/logo.png) 5% 50% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100px;
}
#main {
margin-left: 2px;
overflow: hidden;
}
#presenter {
margin-top: 40px;
width: 100%;
height: 40%;
overflow: hidden;
}
.presenter-one {
display: block;
height: 100%;
width: 50%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-two {
float: left;
position: relative;
display: block;
height: 50%;
width: 25%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 266px 300px;
}
.presenter-three {
position: relative;
display: block;
height: 50%;
width: 25%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 266px 310px;
}
.presenter-four {
position: relative;
display: block;
height: 52%;
width: 25%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 266px 300px;
}
.presenter-five {
position: relative;
display: block;
height: 52%;
width: 25%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 266px 300px;
}
#media screen and (max-width: 965px) {
body {
width: 50%;
}
#main {
width: 50%
}
#media screen and (max-width: 365px) {
body {
width: 100%;
}
#wrapper {
width: 100%
margin: 0 auto;
}
#header {
width: 100%;
background: #2a2727;
color: #fff;
margin-top: 0px;
height: 100px;
}
.top-logo-container {
display: block;
height: 120px;
width: 120px;
text-indent: -9999px;
background: url(http://favoritefm.com/wp-content/themes/FavClear/img/logo.png) 5% 50% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 120px;
}
#main {
margin-left: 2px;
}
#presenter {
margin-top: 40px;
width: 100%;
height: 100%;
}
.presenter-one {
display: block;
height: 100%;
width: 100%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-two {
display: block;
height: 50%;
width: 50%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-three {
position: relative;
display: block;
height: 50%;
width: 50%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-four {
position: relative;
display: block;
height: 50%;
width: 50%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-five {
position: relative;
display: block;
height: 50%!important;
width: 50%;
text-indent: -9999px;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%
}
}
You’ve missed closing your #media screen and (max-width: 965px) and setting your #wrapper to width: 100%; in this breakpoint. Then it will be responsive.
#media screen and (max-width: 965px) {
body {
width: 50%;
}
#wrapper {
width: 100%;
}
#main {
width: 50%
}
}
Additionally:
I don’t think it makes any sense to set the width of body and #main to 50 % here.
See JSFiddle
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.
This is the Lightbox CSS sheet:
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
But using it I get my pictures like this :
Pic1:
in other words - on the whole width of my page, I want to customise it in a way to get this result :
Pic2 :
I want to get 3-4 pics on each row, I tried by simply doing this:
<body style="width: 500px;">
<img src="pic/1.jpg" width="110" height="90" alt="image" />
<img src="pic/2.jpg" width="110" height="90" alt="image" />
</body>
But this leads to a bug when I go to large view for a single picture...
Thanks
Leron
use responsive image gallery plugins which display your images, when they are clicked by resizing them according to the width and height of your screen. a good one would be shadowbox or yoxview.