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!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Anyone?

Status
Not open for further replies.
4myinfo

4myinfo

Technical User
Nov 3, 2008
20
US
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!!!
 
Sort by date Sort by votes
...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

============
============
 
Upvote 0 Downvote
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!!!!!!!
 
Upvote 0 Downvote
...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

============
============
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

doodler22
  • Locked
  • Question
Exporting table styles for CSS
Replies
3
Views
103
darryncooke
darryncooke
samjoy
  • Locked
  • Question
Help Help, anyone know anything about transparency flattening
Replies
7
Views
89
samjoy
samjoy
Piholio
  • Locked
  • Question
Would anyone ever make a Table like THIS?
Replies
6
Views
31
eugenetyson
eugenetyson
Jameechi
  • Locked
  • Question
Hi, Wondered if anyone can help me
Replies
1
Views
24
eugenetyson
eugenetyson
jaemaz
  • Locked
  • Question
Does anyone have Quark 5? Need help saving down to v4.
Replies
1
Views
14
apepp
apepp

Part and Inventory Search

Sponsor

Back
Top