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.
Related
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;
}
I added CSS Sprites for Social Media icons on my website but it is not working properly on Firefox where as the view is accurate on Safari and Chrome.
CSS:
#social-icons {
margin: 4px auto 0;
padding: 0 0 15px;
border-bottom: 1px dotted #222;
text-align: right;
font-size: .9em;
float: right;
width: 80%;
}
#social-icons .facebook {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position-x: 289px;
background-position-y: 0px;
}
#social-icons .twitter {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position-x: 193px;
background-position-y: -32px;
margin-left: 10px;
}
#social-icons .youtube {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position-x: 386px;
background-position-y: -161px;
margin-left: 10px;
}
HTML
<div id="social-icons">
<div class="youtube"></div>
<div class="twitter"></div>
<div class="facebook"></div>
</div>
On Firefox it is only showing Facebook`s icon repeatedly. What could be the problem?
Firefox does not support the background-position-y and background-position-x CSS properties. It was pulled from the spec at some point, as it was a carryover from an IE implementation.
Use the standard background-position: x y; property instead and this will work:
#social-icons .facebook {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position: 289px 0px;
}
#social-icons .twitter {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position: 193px -32px;
margin-left: 10px;
}
#social-icons .youtube {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position: 386px -161px;
margin-left: 10px;
}
#social-icons .facebook {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position: 289px 0px;
}
#social-icons .twitter {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position: 193px -32px;
margin-left: 10px;
}
#social-icons .youtube {
width: 30px;
height: 30px;
background: url(../img/social_media_icons.png);
float: right;
background-position: 386px -161px;
margin-left: 10px;
}
Im working on website (from psd. to HTML/CSS).
How i can auto match website to resolution of people who watch my website?
PSD template has 1600px width and I set this same width for HTML.
My personal reolution of screen is 1920 x 1080 px, so website for me is not displayed corretly. (browser doesnt stretch website to my resolution)
My HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Szablon HTML5</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
</div>
<div id="slider">
<div id="stripe">pasek</div>
<div id="mainpic">obrazek
<div id="podpis">podpis obrazka</div>
</div>
</div>
<div id="content">
<div id="boxes">
<div class="box">
<h2>Perfect Logic</h2>
<h3>All you want your website to do.</h3>
<img src="pictures/minibox.png" class="boxPicture">
<p>Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe</p>
<img src="pictures/przycisk.png" class="przycisk">
</div>
<div class="box">b</div>
<div id="box_c">c</div>
</div>
</div>
<div id="przerywnik"></div>
<footer></footer>
</div>
</body>
</html>
My CSS file:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 1600px;
height: auto;
}
#wrapper{
width: 1600px;
height: auto;
}
#header{
height: 137px;
width: 1600px;
background-image:url('pictures/headerbg.png');
background-repeat:repeat-x;
}
#logo{
background-image:url('pictures/logo.png');
width: 320px;
height: 137px;
margin-left: 330px;
}
#slider{
height: 426px;
z-index: 2;
}
#stripe{
height: 335px;
background: grey;
z-index: 1;
position: absolute;
background-image:url('pictures/stripe.png');
background-repeat:repeat-x;
}
#mainpic{
position: absolute;
z-index: 3;
width: 940px;
height: 343px;
margin-top:22px;
margin-left: 330px;
background-image:url('pictures/slider.jpg');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#podpis{
margin-top: 338px;
margin-left: 104px;
font-size: 36px;
width: 700px;
position: absolute;
}
/* Część z boxami */
#boxes{
height: 469px;
width: 940px;
margin-left: 330px;
background: #234f31;
}
.box{
float: left;
height: 469px;
width: 320px;
background: #ffffff;
}
.box h2{
font-size: 18px;
margin-top: 21px;
font-family: Georgia;
color: #11719e;
float:left;
}
.box h3{
font-size: 12px;
margin-top: 2px;
font-family: Helvetica;
color: #8c8c8c;
float:left;
}
.box p{
margin-top: 12px;
margin-left: 2px;
font-size: 13px;
color: #3e3e3e;
width: 299px;
float: left;
}
.przycisk{
margin-top: 20px;
margin-left: 2px;
float: left;
width: 163px;
height: 35px;
}
.boxPicture{
margin-top: 15px;
float: left;
height: 198px;
width: 299px;
}
#box_c{
float: left;
height: 469px;
width: 300px;
background: yellow;
}
/* Footer */
#przerywnik{
height: 10px;
width: 1600px;
background: #4c4c4c;
}
footer{
height: 173px;
width: 1600px;
background: #333333;
}
How i can fix this?
Edit all
width:1600px;
in your css code to
width:100%;
Edit this on your code:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 1600px;
height: auto;
}
#wrapper{
width: 1600px;
height: auto;
}
By:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 100%;
height: auto;
}
#wrapper{
width: 100%;
height: auto;
}
EDIT:
Here are the code:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 100%;
height: auto;
}
#wrapper{
width: 100%;
height: auto;
}
#header{
height: 137px;
width: 100%;
background-image:url('pictures/headerbg.png');
background-repeat:repeat-x;
}
#logo{
background-image:url('pictures/logo.png');
width: 320px;
height: 137px;
margin-left: 330px;
}
#slider{
height: 426px;
z-index: 2;
}
#stripe{
height: 335px;
background: grey;
z-index: 1;
position: absolute;
background-image:url('pictures/stripe.png');
background-repeat:repeat-x;
}
#mainpic{
position: absolute;
z-index: 3;
width: 60%;
min-width:940px;
height: 343px;
margin-top:22px;
margin-left:-30%;
left:50%;
background-image:url('pictures/slider.jpg');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#podpis{
margin-top: 338px;
margin-left: 104px;
font-size: 36px;
width: 700px;
position: absolute;
}
/* Część z boxami */
#boxes{
height: 469px;
width: 940px;
margin-left: 330px;
background: #234f31;
}
.box{
float: left;
height: 469px;
width: 320px;
background: #ffffff;
}
.box h2{
font-size: 18px;
margin-top: 21px;
font-family: Georgia;
color: #11719e;
float:left;
}
.box h3{
font-size: 12px;
margin-top: 2px;
font-family: Helvetica;
color: #8c8c8c;
float:left;
}
.box p{
margin-top: 12px;
margin-left: 2px;
font-size: 13px;
color: #3e3e3e;
width: 299px;
float: left;
}
.przycisk{
margin-top: 20px;
margin-left: 2px;
float: left;
width: 163px;
height: 35px;
}
.boxPicture{
margin-top: 15px;
float: left;
height: 198px;
width: 299px;
}
#box_c{
float: left;
height: 469px;
width: 300px;
background: yellow;
}
/* Footer */
#przerywnik{
height: 10px;
width: 100%;
background: #4c4c4c;
}
footer{
height: 173px;
width: 100%;
background: #333333;
}
I think would best be suited to the answer here with a given explanation to your problems: How to fit your website for all or at lest most screen resolutions?
I have a DIV who's borders are made up of images. What I'm trying to do is have this DIV auto expand (in height only) whenever the content does not fit the content area. Otherwise it should just use the min-height. Here is my markup:
XHTML:
<div id="alerts">
<div id="alerts-top"></div>
<div id="alerts-left"></div>
<div id="alerts-content">
<div id="alerts-header">
<p>Alerts</p>
</div>
<div id="alerts-main">
<!-- content in here -->
</div>
</div>
<div id="alerts-right"></div>
<div id="alerts-bottom"></div>
</div>
CSS:
#alerts { float: left; width: 267px; height: 200px; }
#alerts #alerts-top { float: left; background: url(../images/alerts-top.png) no-repeat; height: 12px; min-width: 257px; }
#alerts #alerts-left { float: left; background: url(../images/alerts-left.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-content { float: left; min-width: 239px; height: 206px; min-height: 206px; }
#alerts #alerts-content #alerts-header { background: url(../images/alerts-bell.png) no-repeat; height: 20px; width: auto; padding: 10px; }
#alerts #alerts-content #alerts-main { background-color: #FFFFFF; height: auto; }
#alerts #alerts-right { float: left; background: url(../images/alerts-right.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-bottom { float: left; background: url(../images/alerts-bottom.png) no-repeat; height: 11px; width: 258px; }
This isn't working for me - there is a gap between the bottom border and the left and right borders. The content area is #alerts-main.
Try this for #alerts-bottom:
#alerts #alerts-bottom {
float: left;
background: url(../images/alerts-bottom.png) no-repeat;
height: 11px;
width: 258px;
margin-top: -9px;
}
With a negative value for margin-top property you control how the div will be displayed (in this case you'll force the #alerts-bottom div to be rendered 9px above the default display).
Hope it helps.
After a "five minutes" consideration I've wrote this code and it will do what you want. Just change the styles to add the images as backgrounds. First the CSS:
#wrapper { position: relative; width: 500px; min-height: 350px; }
#alerts { position: relative; height: 50px; background-color: red; width: 90%; text-align: center; margin: auto; margin-top: 10px; margin-bottom: 10px; }
#top-margin { position: absolute; height: 10px; top: 0; background-color: gray; width: 100%; }
#right-margin { position: absolute; width: 10px; right: 0; background-color: gray; height: 100%; }
#bottom-margin { position: absolute; height: 10px; bottom: 0; background-color: gray; width: 100%; }
#left-margin { position: absolute; width: 10px; left: 0; background-color: gray; height: 100%; }
#content { text-align: justify; padding: 65px 20px 20px 20px; }
And the HTML:
<div id="wrapper">
<div id="top-margin">
<div id="alerts">Alerts alerts alerts</div>
</div>
<div id="right-margin"></div>
<div id="bottom-margin"></div>
<div id="left-margin"></div>
<div id="content">Lorem ipsum dolor sit amet etc...</div>
</div>
The #wrapper's height will expand as more text is added. Sorry that I've changed the names of the Ids and justified the text. But that can easily be remedied.
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.