- This topic is empty.
-
AuthorPosts
-
June 17, 2013 at 11:43 am #45595expo703Participant
This is the site : http://www.kaehler1920.com
June 17, 2013 at 11:50 am #138645Paulie_DMemberInstead of using floats, try inline-block and text-align:center.
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
June 17, 2013 at 1:48 pm #139058expo703ParticipantThank you Paulie! that worked with the top nav…I’m having issues with the footer though.. I’m going to want to add more stuff to it in the future so I think I would like to have it in columns like : Company Info : with about us links and a few more ul links.. Social Media: links… Customer Service: links.. and little text right up.. whats the best way to tackeling that so it stills doesn’t look like crap when the browser is re-sized?
June 17, 2013 at 1:57 pm #139060Paulie_DMemberIf they are separate lists then do it that way.
Unless you are using % based widths though you will always run into problems.
Assuming that you are using media queries you should be fine. Remember thhe **vast** majority of viewers won’t be re-sizing, it’s only us developers who do that with any regularity.
June 17, 2013 at 2:04 pm #139062expo703Participant.
June 17, 2013 at 2:22 pm #139067Paulie_DMemberThat will be the divs.
I would lay it out something like this…you’d just have to change it for the 960 classes etc.
June 18, 2013 at 6:17 pm #139253expo703ParticipantDamn – almost got it! just need to position it correctly..they are just vertical and want to have them next to each other like you have it above..I have all the links and ul/li items setup correctly and its displaying under the div tag f-gray class grid3 for width .f-gray-links
kaehler1920.com
June 18, 2013 at 6:34 pm #139254lschoen114ParticipantCreate a class for your <"ul"> such as “navigation”, then set a float to the class.
ul.navigation{
width:33%;
float:left;
}Then just start a new ul for each of the three sections.
Then, when you use @media, all you need to do is change the width of the footer container (such as 95%), and the lists will update automatically.
June 19, 2013 at 11:42 am #139368expo703ParticipantThanks for the reply.. I have a ul class already
Css for these two are :
f-gray-links li {
background: none repeat scroll 0 0 transparent;
line-height: 180%;.f-gray {
padding: 1px;
margin: 0 auto;
text-align: left !important;
}.grid_3 { width:208px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }
/* form elements */
.f-gray .grid_3 {width:228px;}where would I add width:33%; float;left;
June 19, 2013 at 1:38 pm #139392expo703Participant.
June 19, 2013 at 1:41 pm #139063Paulie_DMemberPlease use codepen…we need to see it working (or not).
June 19, 2013 at 1:52 pm #139399expo703Participanthttp://codepen.io/anon/pen/Eapgf
but it doesn’t look like that live.. i’m not sure why
June 19, 2013 at 1:56 pm #139393Paulie_DMemberProbably because you haven’t included enough CSS.
June 19, 2013 at 2:21 pm #139400expo703ParticipantJune 19, 2013 at 2:39 pm #139403JohnMac4MemberWhy don’t you just create a CSS class that encapsulates the unordered list. You can then apply the float, width, and inline-block properties to that.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.