awolarczuk
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
Css
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"> </div>
<p class="copyright">Navah Grey copyright © 2014 All Rights Reserved</p>
</div>
</div>
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;
} ]
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;
} ]
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
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
ASKER
edwin
I am building this internal so i can show you sorry
I am building this internal so i can show you sorry
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I like the image you are showing. That looks good.
ASKER
thans scott be good if u can help me make it look like that :)
ASKER
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
and also how do i make the facebook ect just images and not text
thanks so much for everythung so far
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;
}
<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>
and also how do i make the facebook ect just images and not text
thanks so much for everythung so far
ASKER
and also remove the dot points
Update the jsbin I created with your own code first.
ASKER
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.
ASKER
ASKER
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.
ASKER
thanks mate i have pulling it down and building back step by step to see where it is wrong
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You should check out http://getbootstrap.com/ as that is how I based the row, col classes. Bootstrap is a responsive css grid+
ASKER
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
ASKER
thanks mate
can you share the JS again that was great to test your code with
can you share the JS again that was great to test your code with
ASKER
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
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
ASKER
mate thanks for all the work we are almost there just one issues with the socal media
http://navahgrey.adbydesigns.com.au/
http://navahgrey.adbydesigns.com.au/
ASKER
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.
ASKER
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
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>
ASKER
sorry to be a pain mate i did that and its still shows little boxes and facebook ect in them
sorry mate
sorry mate
Please share the link so I can check and solve the problem
Thanks
Edwin