-
1. Re: center 5 div tags
Nancy O. May 22, 2014 1:07 PM (in response to griffij76)Is your math is correct? Are you testing in real browsers? Design View isn't accurate.
Alt-Web Demos :: 3 CSS Boxes with Floats and Margins
Nancy O.
-
2. Re: center 5 div tags
osgood_ May 22, 2014 1:07 PM (in response to griffij76)<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#imageWrapper {
text-align: center;
width: 90%;
max-width: 980px;
margin: 0 auto;
background-color:#CCC;
}
.imageBox {
width: 150px;
height: 125px;
display: inline-block;
background: red;
margin: 5px;
}
</style>
</head>
<body>
<div id="imageWrapper">
<div class="imageBox"></div>
<div class="imageBox"></div>
<div class="imageBox"></div>
<div class="imageBox"></div>
<div class="imageBox"></div>
</div>
</div>
</body>
</html>
-
-
4. Re: center 5 div tags
griffij76 May 22, 2014 4:46 PM (in response to griffij76)I am sorry if this appears long winded but I have put the code underneath. The bit I am trying to centre is the NameBar with the name tags in it I have highlight the portions I want to centre in bold.
Thanks in advance Joel
Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Countdown Timer</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container {
padding: 0px;
height: auto;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
background-color: #CCCCCC;
}
#Holder {
height: auto;
width: 980px;
margin-right: auto;
margin-left: auto;
border-style: solid;
background-color: #FFFFFF;
}
#Header {
height: 340px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
background-image:url(Website%20Images/Final%20Images/Logo/New%20disney_main_logo_large.fw .png);
background-repeat:no-repeat;
background-position:center;
}
#Banner {
height: 62px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
text-align: center;
font-size: 60px;
font-family: times Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
color: #2A3296;
}
#NameBar {
height: 51px;
width: 980px;
margin: 0px auto;
border-width: 0px;
border-style: solid;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 50%;
#In {
; text-align: center;
left: auto;
right: Auto;
vertical-align: baseline;
vertical-align: middle;
}
#In {
padding: 0px;
height: 51px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
}
#TimeRemaining {
padding: 0px;
height: 150px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
}
#Entersite {
padding: 0px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
}
#wrapper {
}
#Footer {
padding: 0px;
height: 30px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;}
#NameBar {
padding: 100x;
height: 51px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
}
#NamePaige {
padding: 0px;
height: 45px;
width: 100px;
margin-right: auto;
margin-left: auto;
border-width: 0;
border-style: 0;
float: left;
}
#NameRachel {
padding: 0px;
height: 45px;
width: 100px;
margin-right: auto;
margin-left: auto;
border-width: 0;
style: solid;
float: left;
}#NameAaron {
padding: 0px;
height: 45px;
width: 100px;
margin-right: auto;
margin-left: auto;
border-width: 0;
border-style: solid;
float: left;
}#NameKerry {
padding: 0px;
height: 45px;
width: 100px;
margin-right: auto;
margin-left: auto;
border-width: 0;
style: solid;
float: left;
}#NameJoel {
padding: 0px;
height: 45px;
width: 100px;
margin-right: auto;
left: auto;
width:0
style: solid;
float: left;
}</style>
</head><body>
<div id="container">
<div id="wrapper">
<div id="Holder">
<div id="Header"></div>
<div id="Banner"> Welcomes</div>
<div id="NameBar">
<div id="NamePaige">Paige</div>
<div id="NameRachel">Rachel</div>
<div id="NameAaron">Aaron</div>
<div id="NameKerry">Kerry</div>
<div id="NameJoel">Joel</div>
</div>
<div id="In">IN</div>
<div id="TimeRemaining">TIME REMAINING</div>
<div id="Entersite">CLICK TO ENTER</div>
</div>
<div id="Footer">COPYRIGHT INFORMATION</div>
</div>
</div>
</body>
</html> -
5. Re: center 5 div tags
osgood_ May 23, 2014 12:39 AM (in response to griffij76)Use the css below for the page. I've given you the whole list again as there was a couple of errors which needed correcting. The NEW css styles are at the bottom of the list (2 of them). I've combined the name <divs> into 1 css selector as it's easier to manage.
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container {
padding: 0px;
height: auto;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
background-color: #CCCCCC;
}
#Holder {
height: auto;
width: 980px;
margin-right: auto;
margin-left: auto;
border-style: solid;
background-color: #FFFFFF;
}
#Header {
height: 340px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
background-image:url(Website%20Images/Final%20Images/Logo/New%20disney_main_logo_large.fw .png);
background-repeat:no-repeat;
background-position:center;
}
#Banner {
height: 62px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
text-align: center;
font-size: 60px;
font-family: times Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
color: #2A3296;
}
#In {
text-align: center;
left: auto;
right: Auto;
vertical-align: baseline;
vertical-align: middle;
}
#In {
padding: 0px;
height: 51px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
}
#TimeRemaining {
padding: 0px;
height: 150px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
}
#Entersite {
padding: 0px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
}
#wrapper {
}
#Footer {
padding: 0px;
height: 30px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
}
#NameBar {
width: 100%;
text-align: center;
}
#NamePaige, #NameRachel, #NameAaron, #NameKerry, #NameJoel {
width: 100px;
height: 45px;
display: inline-block;
}
-
6. Re: center 5 div tags
griffij76 May 23, 2014 2:42 AM (in response to osgood_)Thank you Nancy
I have changed what you suggested however they have centred but one under the other without using the float? I am very new to this so I am sorry if I am asking very basic questions.
Thank you once again Joel


