Link to home
Start Free TrialLog in
Avatar of awolarczuk
awolarczukFlag for Australia

asked on

How to i line up css containers from left to right

hi guys
I have just taken over a website from anothe company and i need some help ASAP
my css is ok but not 100% i need to do three things

1. Line the boxes up from left to right
2. change the H2 headers to white
3. put a image next to the socal media areas

thanks in advance
i have attached the cdd i have thanks

       
   	<div class="footer-black">
        
		<div class="container">

			<div class="user-menu">

				<h2>My Account</h2>
				<ul class="menu"><li class="first last leaf"><a href="/user" title="">Log In</a></li>
</ul>
			</div>
			  <div class="region region-footer">
    <div id="block-menu-menu-help-menu" class="block block-menu">

    <h2>Help</h2>
  
  <div class="content">
    <ul class="menu"><li class="first leaf"><a href="/help?page=Retu" title="">Return Policy</a></li>
<li class="leaf"><a href="/contact-us" title="">Contact Us</a></li>
<li class="leaf"><a href="/help?page=Priv" title="">Privacy Policy</a></li>
<li class="leaf"><a href="/about-us">About Us</a></li>
<li class="leaf"><a href="/help?page=Ship" title="">Shipping</a></li>

</ul>  </div>
</div>
<div id="block-menu-menu-more-menu" class="block block-menu">

    <h2>More NavahGrey at</h2>
  
  <div class="content">
    <ul class="menu"><li class="first leaf"><a href="http://www.facebook.com/pages/Alterior-Motif/25503515529" class="facebook">Facebook</a></li>
<li class="leaf"><a href="http://www.alteriormotif.com.au/instagram" class="instagram">Instagram</a></li>

<li class="last leaf"><a href="http://twitter.com/alteriormotif2" class="twitter">Twitter</a></li>
</ul>  </div>
</div>
  </div>
			
			
			<div class="clear">&nbsp;</div>
			<p class="copyright">Navah Grey copyright &copy; 2014 All Rights Reserved</p>

		</div>
                
	</div>
        

Open in new window


Css

.footer-black
{
background: #000000;

}

.container {
background: #000000;

}



.user-menu {
color: #FFFFFF;
font-size: 12px;
font-weight: bold;



}

.menu  {
color: #FFFFFF;

   

 
   
}

ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 2em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFFF;
text-decoration: none;
background-color: #0000;
text-indent: 5px;
list-style-position: outside;
'list-style-image: url(arrow.gif);
list-style-type: square;
padding: 6px;
margin: 2px;

}

ul li a { 
color: white; 
} ]

Open in new window

Avatar of Edwin Hoffer
Edwin Hoffer
Flag of United States of America image

Hello awolarczuk,

Please share the link so I can check and solve the problem

Thanks
Edwin
Avatar of Scott Fell
http://jsbin.com/qabixa/1/edit
/*
 H2 white
*/
h2{color:white;}

.footer-black
{
background: #000000;

}

.container {
background: #000000;

}



.user-menu {
color: #FFFFFF;
font-size: 12px;
font-weight: bold;



}

.menu  {
color: #FFFFFF;

   

 
   
}

ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 2em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFFF;
text-decoration: none;
background-color: #0000;
text-indent: 5px;
list-style-position: outside;
'list-style-image: url(arrow.gif);
list-style-type: square;
padding: 6px;
margin: 2px;

}

li{
  /*  
  ******************** 
  display inline-block to go horizontal
  try adding margin-right or padding-right
  ******************** 
  */
  display:inline-block;
}


/* ********  ADD ICON ******** */
a.facebook:after {
    content: url('/images/facebook.jpg');
}
a.instagram:after {
    content: url('/images/instagram.jpg');
}
 a.twitter:after {
    content: url('/images/twitter.jpg'); 
  
 } 

ul li a { 
color: white; 
} ]

Open in new window

Avatar of awolarczuk

ASKER

Scott mate i think we are almost there

the issues is that it is only showing on top of each other no left to right, it was the same on the sample page you showed me as well

thanks so much for the help so far
User generated image
Hi Guys this is how i need it to look just did this up in a design program
edwin
I am building this internal so i can show you sorry
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I like the image you are showing.  That looks good.
thans scott be good if u can help me make it look like that :)
Scott
Mate sorry i think  i didnt explan correctly i would like the menus to look like hte image not the next in the menus so sorry about that
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ok mate thanks

I have played with it two things

i have put it all in a div container

so i can easy for it all to the left and make the background to black whAT have i done wrong
.row{width:630px; 
}
.col{
     width:200px;
     margin-right:140px;  /****   ( 200 * 3=600) +  (10 * 3 =30) = 630px  *** */
    float:left


}

.container{	background: #FFFFFF;
}

Open in new window


     <div id="container">  
<div id="row">
    <div class="col">
          <h2>My Account</h2>
          <hr>
           <ul>
               <li><a href="/user" title="">Log In</a></li>
           </ul>
   </div>

    <div class="col">
          <h2>Help</h2>
          <hr>
           <ul>
               <li><a href="/help?page=Retu" title="">Return Policy</a></li>
               <li><a href="/contact-us" title="">Contact Us</a></li>
               <li><a href="/help?page=Priv" title="">Privacy Policy</a></li>
               <li><a href="/about-us">About Us</a></li>
               <li><a href="/help?page=Ship" title="">Shipping</a></li>
           </ul>
   </div>
    <div class="col">
          <h2>More NavahGrey at</h2>
          <hr>
           <ul>
               <li><a href="http://www.facebook.com/pages/Alterior-Motif/25503515529" class="facebook">Facebook</a></li>
               <li><a href="http://www.alteriormotif.com.au/instagram" class="instagram">Instagram</a></li>
               <li><a href="http://twitter.com/alteriormotif2" class="twitter">Twitter</a></li>
               
           </ul>
   </div>

</div>
</div>

Open in new window


and also how do i make the facebook ect just images and not text


thanks so much for everythung so far
and also remove the dot points
Update the jsbin I created with your own code first.
sorry scott you lost me
On this link http://jsbin.com/qabixa/3/edit you can fill in whatever html  you have ended up with as well as css.   Once you do that, copy the new url and paste that back.  It will probably change to http://jsbin.com/qabixa/4/edit on it's own.    Each time you make a change, it should save automatically and change the url.
ok so i have done that now what

http://jsbin.com/sejelenu/1/edit
Scott mate i have been working on this for a the past few hours trying to get it to work correctly with the div in it and cant seem to get it can you please help me out
ok, I will look at it.
thanks mate i have pulling it down and building back step by step to see where it is wrong
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You should check out http://getbootstrap.com/ as that is how I based the row, col classes.  Bootstrap is a responsive css grid+
thanks mate i will but i would really just like to get this working as i working remotly at the moment and dont have a lot of download data
thanks mate

can you share the JS again that was great to test your code with
thanks amte i have got it here

http://jsbin.com/dakoturo/1/edit

i have move the stuff in to the css area
and created a footer area as i wanted that to have a black background its not working mate where am i going wrong
mate thanks for all the work we are almost there just one issues with the socal media

http://navahgrey.adbydesigns.com.au/
would really love if you could please help on this mate i am about to head to bed but will working on this when i get up
There are some forces at play from your current site css/js.   Just close out this question and make a new one focusing on the social icons on your site.
hi scott dont worry i am very happy to give you all the points maybe at this stage just help me change it from icons to just a list
>change it from icons to just a list
Get rid of <img src="..."> and replace with Some_Text
<ul class="social">
               <li><a href="http://www.facebook.com/pages/Alterior-Motif/25503515529" class="facebook">facebook</a></li>
               <li><a href="http://www.alteriormotif.com.au/instagram" class="instagram">instagram</a></li>
               <li><a href="http://twitter.com/alteriormotif2" class="twitter">twitter</a></li>
               
           </ul>

Open in new window

sorry to be a pain mate i did that and its still shows little boxes and facebook ect in them

sorry mate