Hello! I am a graphic designer and I normally try to stay on the designing end of websites, but I am trying to start learning CSS since you still need it even with InDesign. I have created a layered page with apdivs. For some reason it all of the sudden went to flush left in the browser and I have tried and tried and can't figure out what I need to do to get it centered again, would you mind taking a look at it and giving me some guidance on what I need to do to get it centered? I would GREATLY appreciate it!!!
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
CSS Anyone?
- Thread starter 4myinfo
- Start date
...you'll have to redo the structure of your div layouts really...
...i would do it but it would mean time to fix the layout, currently i charge for work like this at approx $90.00 per page, assuming no fancy stuff like jquery is being used...
andrew
============
============
...i would do it but it would mean time to fix the layout, currently i charge for work like this at approx $90.00 per page, assuming no fancy stuff like jquery is being used...
andrew
============
============
...i can point you in the rough direction though, basically you will need a wrapper, like i have done here:
...doing so also affects everything else...
...don't use absolute positioning for everything...
andrew
============
============
...doing so also affects everything else...
...don't use absolute positioning for everything...
andrew
============
============
- Thread starter
- #4
Thank you so much! I totally understand about the time and cost. I am just learning coding and am still at the baby step stage. My brain is spinning! I found a work around and everything is centered, but I can't get my background image centered. Would you please show me how to do that? Thanks so much for being so nice and helpful, you are a life saver!
The page with everything centered except the background (It dropped my border when I changed the css file):
My css file with the border but not centered:
@charset "UTF-8";
body {
padding: 0;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #004CA9;
background-image: url(images/bkgls.png);
background-repeat: no-repeat;
text-align: center;
display: block;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.logo {
display: block;
width: 648px;
margin-right: auto;
margin-left: auto;
}
header {
color: #FFF;
}
#apDiv3 div h1 .h1 {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-align: center;
display: block;
width: 942px;
margin-right: auto;
margin-left: auto;
}
.sign {
background-image: url(images/sign.png);
background-repeat: no-repeat;
text-align: center;
display: block;
width: 864px;
margin-right: auto;
margin-left: auto;
}
#apDiv6 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
.locations {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
display: block;
width: 170px;
margin-right: auto;
margin-left: auto;
font-size: 20px;
}
#apDiv9 .heading2 {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv9 .heading2 {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv7 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv8 .locations {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.heading2 strong {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
#apDiv7 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv7 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
}
My .css centered but no background:
@charset "UTF-8";
body {
padding: 0;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #004CA9;
background-image: url(file:///Macintosh%20HD/Work/Terry%20Cornelius/hallmarkauto_html/images/bkgls.png);
background-repeat: no-repeat;
text-align: center;
display: block;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.logo {
display: block;
width: 648px;
margin-right: auto;
margin-left: auto;
}
header {
color: #FFF;
}
#apDiv3 div h1 .h1 {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-align: center;
display: block;
width: 942px;
margin-right: auto;
margin-left: auto;
}
.sign {
background-image: url(file:///Macintosh%20HD/Work/Terry%20Cornelius/hallmarkauto_html/images/sign.png);
background-repeat: no-repeat;
text-align: center;
display: block;
width: 864px;
margin-right: auto;
margin-left: auto;
}
#apDiv6 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
.locations {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
display: block;
width: 170px;
margin-right: auto;
margin-left: auto;
font-size: 20px;
}
#apDiv9 .heading2 {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv9 .heading2 {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv7 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv8 .locations {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.heading2 strong {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
#apDiv7 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv7 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
}
Thank you sooooo much! You are so kind to do help me!!!!!!!
The page with everything centered except the background (It dropped my border when I changed the css file):
My css file with the border but not centered:
@charset "UTF-8";
body {
padding: 0;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #004CA9;
background-image: url(images/bkgls.png);
background-repeat: no-repeat;
text-align: center;
display: block;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.logo {
display: block;
width: 648px;
margin-right: auto;
margin-left: auto;
}
header {
color: #FFF;
}
#apDiv3 div h1 .h1 {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-align: center;
display: block;
width: 942px;
margin-right: auto;
margin-left: auto;
}
.sign {
background-image: url(images/sign.png);
background-repeat: no-repeat;
text-align: center;
display: block;
width: 864px;
margin-right: auto;
margin-left: auto;
}
#apDiv6 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
.locations {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
display: block;
width: 170px;
margin-right: auto;
margin-left: auto;
font-size: 20px;
}
#apDiv9 .heading2 {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv9 .heading2 {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv7 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv8 .locations {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.heading2 strong {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
#apDiv7 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv7 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
}
My .css centered but no background:
@charset "UTF-8";
body {
padding: 0;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #004CA9;
background-image: url(file:///Macintosh%20HD/Work/Terry%20Cornelius/hallmarkauto_html/images/bkgls.png);
background-repeat: no-repeat;
text-align: center;
display: block;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.logo {
display: block;
width: 648px;
margin-right: auto;
margin-left: auto;
}
header {
color: #FFF;
}
#apDiv3 div h1 .h1 {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-align: center;
display: block;
width: 942px;
margin-right: auto;
margin-left: auto;
}
.sign {
background-image: url(file:///Macintosh%20HD/Work/Terry%20Cornelius/hallmarkauto_html/images/sign.png);
background-repeat: no-repeat;
text-align: center;
display: block;
width: 864px;
margin-right: auto;
margin-left: auto;
}
#apDiv6 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
.locations {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
display: block;
width: 170px;
margin-right: auto;
margin-left: auto;
font-size: 20px;
}
#apDiv9 .heading2 {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv9 .heading2 {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv7 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv8 .locations {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.heading2 strong {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
#apDiv7 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
}
#apDiv7 .heading2 strong {
font-family: Arial, Helvetica, sans-serif;
}
Thank you sooooo much! You are so kind to do help me!!!!!!!
...couldn't get the posted link to work unfortunately the address seems to be unavailable...
...the background image in your case could do with being part of the wrapper div, which is centred and holding all the other content...
...here you can download a fixed version:
...i would also recommend using the FREE firebug plugin as part of the firefox browser to help learn how sites are built, you can dig into the code of sites easier:
...you can also use the developer tools built into safari or chrome that work similar to firebug allowing you to target areas of a page and make temporary edits before implementing them into your final CSS...
andrew
============
============
...the background image in your case could do with being part of the wrapper div, which is centred and holding all the other content...
...here you can download a fixed version:
...i would also recommend using the FREE firebug plugin as part of the firefox browser to help learn how sites are built, you can dig into the code of sites easier:
...you can also use the developer tools built into safari or chrome that work similar to firebug allowing you to target areas of a page and make temporary edits before implementing them into your final CSS...
andrew
============
============
...another good source to help out is CSS tricks, Chris has many videos to help out with the basics:
andrew
============
============
andrew
============
============
- Thread starter
- #7
- Status
Similar threads
- Locked
- Question