A box within a box?

[Name Trader]

I have a particular problem. I have a webpage with a four column footer. All the footer columns are centralized, and all but the contact info column looks good. The contact info has each line of info centralized. What I'd like is to have each line lined up left justified, but the overall presentation of the whole contact info, centralized in it's box. Something like this....

-------------Contact Info--------------
-----Name...............................-----
-----Address...........................-----
-----Telephone........................-----
-----Email................................-----

The "-" represents a centralized line. Of course each line is of a different length and the Address line will wrap onto 2 lines. The header is separate to the address content lines. So, I'm imagining, the 4 address lines would be within a box which is left justified, and this box would be within another box (without any other content) which is centralized. Would this work? I'd like some sample code to achieve this, even if it isn't using a box-within-a-box concept.

Perhaps by using padding in the .css file?

 

[The New Guy]

Just make the inner box margin:auto and text-align:left; only thing to worry about is to have the inner box narrower than the outer box by a sufficient degree to have it appear centered- try width:80% and go from there.

How you do the first "contact info" line is up to you- either keep it in the main box with text-align:center (less code), or put it inside the inner box in it's own div that is centered (more code).

 

[4pm]

wrap it ina table cause not only do you need "left" and "right" columns but also you have to keep the data in "rows". so the table is what semantically fits. And it would be easy to style it then too

<table class="address-table">
<tr><td>Name</td><td>Stu</td></tr>
<tr><td>Adress</td><td>Hollywood</td></tr>
....
</table>

css (goes to your .css file):

.address-table tr td {
text-align: center; /if you want right column to be centered
*add any additional styling here like paddings/margins/fonts/etc for all table elements*
}
.address-table tr td:first-child {
text-align: left;
*everything else for the left column elements*
}

depending on your other css rules you may need to add
.address-table { }
to style the whole table too like borders/width/margins/etc
for example to have the table centered itself in a footer block and take up 80% of its width add:
margin: 0 auto;
width: 80%;

 

[The New Guy]

Tables should be reserved for data that belongs in a table, not used in lieu of proper styling with modern elements.

All he would need is something like this:
.outerbox {position:relative;text-align:center;padding:2px;margin:0 2px;border:1px solid #000;width:calc(25% - 10px);display:inline-block;vertical-align:top}
#innerbox{position:relative;text-align:left;margin:0 auto;width:80%}

 

[DomainVP]

Have the name, address, telephone, and email as separate div's and styled as a class="".

<div class="info">Name</div>
<div class="info">Address</div>
<div class="info">Tel</div>
<div class="info">eMail</div>

Then use a single definition for that class in your css including text-align:left; width:100%;

.info {
text-align:left;
width:100%;
}

This should fit to your existing column content and will allow you to customize the content as you see fit.

If you want to wrap that into a container just;

<div id="contr">
<div class="info">Name</div>
<div class="info">Address</div>
<div class="info">Tel</div>
<div class="info">eMail</div>
</div>

#contr {
text-align:left;
width:100%;
}

.info {
text-align:left;
width:100%;
}

It's always good to wrap nested divs, plus you can use other variables to position the wrap top and bottom margins to fit the spacing of the total column.

 

[Name Trader]

Thanks for your replies so far. It has taken me about 4hrs just to figure out which statements in the .css file are affecting this formatting. I know. I'm not an expert. So here is some additional information.....

Here is the entry in the footer.php file.....

<div class="col-md-3 col-sm-6" id="contactinfo">
<h5>Contact Info</h5>
<ul class="list icons list-unstyled"><ul>
<li><span class="glyphicon glyphicon-user"></span>&nbsp;My name</li>
<li><span class="glyphicon glyphicon-home"></span>&nbsp;My full address.</li>
<li><span class="glyphicon glyphicon-envelope"></span><img src="image/emailid.png" alt="" ></li>
<li><span class="glyphicon glyphicon-earphone"></span>&nbsp;&nbsp;My phone number</li>
</ul>
</div>

Here are the entries in the bootstrap.css file.....

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
text-align:left; width:100%; <----- I added this line with no effect.
}

I'm confused about what I should edit to achieve my desired effect. Have I left any info out that you need to know?

 

[The New Guy]

Do you have the ability to scrap the current footer and use your own? One of the things I don't like about pre-rolled html and css is that it's almost always filled with things you don't need because it's designed to be multi-use - you end up with a bunch of things in it that might be used by someone else but not you.

Your .glyphicon spans don't have anything in them and I don't see any background image set in the styling so I'm not sure what it's supposed to be displaying other than some styled output that doesn't seem to be included anywhere in your posted css info.

 

[DomainVP]

I am not at my computer at the moment, so I will follow up later on; but here is some helpful info.

Replace everything from <ul to </ul>

Then insert the code I gave you. Add the css to the stylesheet and you should get your desired result.

If you want to keep the icons in then just copy each <span> and copy it to each new div row.

 

[DomainVP]

- duplicate -

 

[carob]

Hi you have got a lot of good advice here but only in your latest post can we see you are using Bootstrap, so look at this http://getbootstrap.com/css/#grid

Think carefully before replacing everything because Bootstrap is what is making your site responsive, and if you take away the code that says glyphicon you lose the icons.

 

[DomainVP]

FOOTER:
*note there is an open <ul> in this code. Have you edited it already? Try this, see how it goes.

<div class="col-md-3 col-sm-6" id="contactinfo">
<h5>Contact Info</h5>
<ul class="list icons list-unstyled"><ul>
<div id="contr">
<div class="info"><span class="glyphicon glyphicon-user"></span>Name</div>
<div class="info"><span class="glyphicon glyphicon-home"></span>Address</div>
<div class="info"><span class="glyphicon glyphicon-envelope"></span>Tel</div>
<div class="info"><span class="glyphicon glyphicon-earphone"></span>eMail</div>
</div>
</ul>
</div>

CSS:

#contr {
text-align:left;
width:100%;
}

.info {
float:left;
text-align:left;
width:100%;
}

Tip: When dealing with css the hashtag '#' applies to ID and period '.' applies to CLASS. You want to use class when you have multiple elements with the same attributes.

So <span class="glyphicon glyphicon-earphone"></span> is saying that you have a SPAN that will follow the css rules of .glyphicon and .glyphicon-earphone. Without looking at that I know that .glyphicon will most likely be formatting rules and .glyphicon-earphone will be a css call to an image.

You may need to go into .glyphicon and tweak the position as well if you are going to use it as in this example.

text-align:left; width:100%; <----- I added this line with no effect.

If you want to maintain your code its not .glyphicon you will need to edit, it should be :

.list icons list-unstyled li

Look for something like that. You want to style the line item LI tag, not the SPAN tag with the glyphicon CLASS.

It's a pain... welcome to responsive css editing. Takes a good solid month of tinkering, but you will get it after a while.

 

[Name Trader]

@The New Guy - I'd really like to keep the footer. It's working great apart from this formatting of my contact info. Also those glyphicon spans seem to be working. I get the icon displayed at the front of each line. I'm not sure what you mean by the background image. There isn't one, I only have a dark gray background set, which seems to be working fine.

I just noticed this message was created whilst you were posting your last post. I haven't read or digested your last post yet.
@DomainVP - Isn't <ul class="list icons list-unstyled"><ul> line, one too many <ul> statements? My head is spinning at the moment. I try again in the morning to try to understand what you want me to replace with what? As I understand it you want me to delete the following lines...

<ul class="list icons list-unstyled"><ul>
<li><span class="glyphicon glyphicon-user"></span>&nbsp;My name</li>
<li><span class="glyphicon glyphicon-home"></span>&nbsp;My full address.</li>
<li><span class="glyphicon glyphicon-envelope"></span><img src="image/emailid.png" alt="" ></li>
<li><span class="glyphicon glyphicon-earphone"></span>&nbsp;&nbsp;My phone number</li>
</ul>

and replace it with...

<div id="contr">
<div class="info"><span class="glyphicon glyphicon-user"></span>Name</div>
<div class="info"><span class="glyphicon glyphicon-home"></span>Address</div>
<div class="info"><span class="glyphicon glyphicon-envelope"></span>Tel</div>
<div class="info"><span class="glyphicon glyphicon-envelope"></span><img src="image/emailid.png" alt="" >eMail</div>
</div>

and put these in the bootstrap.css file

#contr {
text-align:left;
width:100%;
}

.info {
text-align:left;
width:100%;
}

Is that correct? I'm not clear what the #contr is doing, but if it works, then I'll be happy.

 

[DomainVP]

Isn't <ul class="list icons list-unstyled"><ul> line, one too many <ul> statements? My head is spinning at the moment. I try again in the morning to try to understand what you want me to replace with what? As I understand it you want me to delete the following lines...

Yes it is, however that was in your code sample so I assumed it had a purpose. You can remove "<ul>", give it a shot. It's hard to work with snippets without seeing the entirety of the code, as you know

Is that correct? I'm not clear what the #contr is doing, but if it works, then I'll be happy.

This is just a container for the new divs. It's always nice to add a container to new elements. You can add margins to that container and it will position the grouping of divs as a contained group, you can also add line heights and text css to the divs to style your text.

Good luck, you'll get it with some fresh eyes in the morning.

 

[Name Trader]

@DomainVP - Again you answered my question before I even posted the question. You must be psychic. Yeah! I get the disadvantages of working with snippets of code

 

[Name Trader]

@DomainVP - OK. This is what I've done....

deleted the whole <div class="col-md-3 col-sm-6" id="contactinfo"> statement, and replaced it with...

<div class="col-md-3 col-sm-6" id="contactinfo">
<h5>Contact Info</h5>
<div id="contr">
<div class="info"><span class="glyphicon glyphicon-user"></span> Name</div>
<div class="info"><span class="glyphicon glyphicon-home"></span> Address</div>
<div class="info"><span class="glyphicon glyphicon-envelope"></span><img src="image/emailid.png" alt="" >eMail</div>
<div class="info"><span class="glyphicon glyphicon-earphone"></span> Telephone</div>
</div>
</div>

Added this to the bootstrap.css...

#contr {
text-align:left;
width:100%;
}

.info {
text-align:left;
width:100%;
}

The result is the each line starts under the other (as I wanted), but each line starts way, way over to the right, instead of being centralized in the contact info column. It's so far right that the icons start to the right of the Contact Info heading.

 

[Name Trader]

OK. I found the culprit. I found

#contactinfo div{
margin-left:35%; text-align: left;width:100%

in another .css file, heroic-features.css. Reducing that 35% to 10% dragged the whole box to approximately the position I wanted it

I have all these .css files in my css folder....

bootstrap.css
bootstrap.min.css
font-awsome.min.css
heroic-features.css
skel.css
style-mobile.css
style-narrow.css
style-normal.css
style-wide.css
style.css

It's no wonder I took so long figuring which .css to edit

 

[Catfish]

Don't forget your schema microdata. Great for SEO and enforcing citation listings.

If you keep having issues, PM me.

 

[carob]

I have all these .css files in my css folder....

bootstrap.css
bootstrap.min.css
font-awsome.min.css
heroic-features.css
skel.css
style-mobile.css
style-narrow.css
style-normal.css
style-wide.css
style.css

It's no wonder I took so long figuring which .css to edit

I don't know if your theme came with instructions or is a typical case of Bootstrap, but typically there can be one central file to edit to override the base theme - in your case style.css would be the likely candidate. It's worth checking.

The idea being all your changes are recorded and findable in one place, and do not get overwritten by updates or other changes.

 

[Name Trader]

That's what I thought also. But the guy who did these pages for me was a bit of an amateur, imho. I realize this is a theme of some sort, but I don't know which one. If I ever find out, I'll compare the original files line by line, and move changed stuff to the style.css, and see if it still works. But I have some time now, thanks to DomainVP (to move onto other things) now I have the pages working to my satisfaction.

 

[webm]

Where did you find this coder?

Sorry, but can't stop laughing at this Sup Dawg meme:

 

[gatekeeper72]

I am feeling blonder by the moment reading all this!...lol