I'm working on this site: http://www.bedriftsdesign.no and got two things I'm struggling with:
First the floating social icons on the left in the header won't allign vertically. I'm using display:block and a bit unsure what I'm doing wrong?
Secondly (optional) I'd prefer them to be on the background element just outside the wrapper, but unsure how to make that work?
Any suggestion on how to solve this would be really welcome.
Thanks
Ans of Question 1 just remove float:left;from here #social li its working as per your requirement :- see the attached image
CSS
#social li {
display: block;
list-style-type: none;
}
Ans of Question 2
I think you are looking this :-
CSS
#social {
background: none repeat scroll 0 0 transparent;
left: 177px;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
z-index: 12;
}
You are floating the list elements li and trying to undo it by setting display: block for the containing anchors a.
You shouldn't set li to be float: left; in the first place.
Find this rule
#social li { float: left; list-style-type: none; display:block; }
and remove float:left; This will align the icons vertically.
In order to align them along the header image, I would use negative margin. Find this rule:
#social{ background: transparent; margin: 0; }
and change the margin to margin: -35px;
Not sure what you mean by align them vertically. To what do you want them to align?
If you want them from up to down change:
#social li { float: none; }
Related
Hi im having trouble with centering the nav on this draft im making for a client.
Here is the link http://cjdrafts.info/germanserviceshop/
Please help thanks.
I'm not a professional, still learning coding and found a way to fix your issue.
What I did is commented the float left for .menu-wrapper
#Top_bar .menu_wrapper {
/* float: left;
z-index: 201;*/
}
Then defined 650px width and set the left and right margin to auto
.header-stack #Top_bar .menu_wrapper {
clear: both;
margin: 0 auto;
width: 650px;
}
Set width for menu_wrapper
#Top_bar .menu_wrapper {
z-index: 201;
width: 650px;
margin: auto;
}
remove float, set fixed width and set margin: auto.
Use display: inline-block instead of float for li
#Top_bar .menu > li {
margin: 0;
z-index: 203;
display: block;
display: inline-block;
}
and:
#Top_bar .menu_wrapper {
float: left;
z-index: 201;
width: 100%;
text-align: center;
}
set 100% width for parent and use text-align: center.
thanks for the help.
Doing the edits on a browser it does work but for some reason when i placed the css codes in the theme style sheet. Nothing work, i tried both solutions.
What seems to be the problem? I have been on this for atleast 7 days now.
I actually have a solution which is to use a menu plugin but this will be my last option.
#main #home_banner {
position: relative;
}
#main ul li {
position: relative;
display: inline-block;
overflow: hidden;
}
#container {
width: 950px;
background-color: red;
padding: 0;
margin: 0 auto;
}
#container #main {
margin: 0;
padding: 0;
width: 100%;
height: 950px;
background-color: blue;
border-bottom: #adde64 solid 1px;
}
they both have relative positioning and aren't positioned anywhere except the default, and they're both inside main(except the list is created -after- the image in the html).
However the list doesn't appear all the way to the left, instead it appears outwards quite a bit
Theres two things that I can think of the first is ul's have padding by default so
ul
{
padding:0px;
}
The second is that display:inline-block adds a small white-space between objects so to get raid of that:
ul
{
font-size:0px;
padding:0px;
}
Based on the picture you posted, I'm assuming you're referring to the indented images at the bottom. If you aren't using CSS resets you'll need to set the margins for the ul and li elements. You may also need to adjust the padding of the div that the ul is in.
By default, any ul has a margin and a padding value. Set the ul to {margin:0; padding:0;} and it will be top left aligned
IF you want the list all the way to the left, look into padding-start attributes. I think this is what you are asking.
Try setting your lists with the following css:
-moz-padding-start: 0px;
-webkit-padding-start: 0px;
-o-padding-start: 0px;
padding-start: 0px;
padding-left:-0px'
I've been trying a few different ways to position 6 different elements in this way:
I've tried using two separate unordered lists stacked on top of each other but I couldn't get them to scale with page stretch properly. I also tried using a table but I can't seem to get the elements to all position in the center of their individual tds.
Here is my css from my unordered lists:
.button ul {
height: auto;
list-style: none;
}
.button li {
display: inline-block;
list-style: none;
margin: 0 18% 0 0;
padding: 0;
vertical-align: top;
}
and these are contained within this:
.newfooterright {
float: left;
width: 33.333333%;
top: 0%;
left: 0%;
height: 250px;
padding: 0 0 0 0;
margin: 0;
font-family: RobotoLight;
text-decoration: none;
text-transform: none;
font-size: 1.5em;
text-align: center;
color: #ffffff;
vertical-align: middle;
}
here's a jsfiddle with this method:
jsFiddle for unordered list
I think an unordered list is probably the way to go... I'm just not sure how to get all of the elements to align in the center of each li. The elements on the bottom seemed to be stuck in the bottom right corner of the li. The bottom elements are also widgets from google+, twitter, and facebook, so I'm not sure if that is affecting their position.
Basically the elements need to be able to do this:
Scale with window width in terms of their spacing (to a point, I don't need an uber small phone layout or something. Something like padding-right or margin-right?)
When the elements scale the bottom element needs to stay aligned with the top element in the center
positioned like in the picture!
Any suggestions on how to get this positioned cleanly would be appreciated!
Thank you so much!
Here is one way you might do it, I am proposing the following HTML scaffolding:
<div class="newfooterleft">
<ul class="button">
<li><a class="twitterbutton" href="#"></a></li>
<li><a class="facebookbutton" href="#"></a></li>
<li><a class="googleplusbutton" href="#"></a></li>
</ul>
<ul class="widget">
<li>(I put the corresponding widget here)</li>
<li>(I put the corresponding widget here)</li>
<li>(I put the corresponding widget here)</li>
</ul>
</div>
and the following CSS:
.newfooterleft {
width: 40%;
border: 1px solid red;
overflow: auto;
}
.twitterbutton {
background: url("http://www.placekitten.com/100/100") no-repeat;
background-size: 100%;
}
.twitterbutton:hover {
}
.facebookbutton {
background: url("http://www.placekitten.com/100/100") no-repeat;
background-size: 100%;
}
.facebookbutton:hover {
}
.googleplusbutton {
background-image: url("http://www.placekitten.com/100/100");
background-size: 100%;
}
.googleplusbutton:hover {
}
.newfooterleft ul {
display: table;
width: 100%;
margin: 0;
padding: 0;
}
.newfooterleft ul li {
display: table-cell;
width: 33.3333%;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
border-left: 1px solid red;
}
.newfooterleft ul li:first-child {
border-left: none;
}
ul.button li {
height: 100px;
}
.button li a {
display: inline-block;
width: 62px;
height: 62px;
}
.button {
border-bottom: 1px solid red;
}
ul.widget li {
background-color: white;
height: 150px;
}
In this case, I am adjusting the unordered lists to behave like tables and table cells.
It works reasonably well except if the width gets too narrow, but this may be okay depending on your application.
You could use a min-width to constrain it.
You could also try some variations with display: table-row.
Demo Fiddle: http://jsfiddle.net/audetwebdesign/2U3D9/
In general, if you want to select every 3 elements, you have to use :nth-child(). In the parenthesis, you can put any combination of n and a digit. There are also some keywords, such as odd and even. So in this case, you are going to have 3 different :nth-child() selectors. It will look like this
li:nth-child(6n+1), li:nth-child(6n+2), li:nth-child(6n+3) {
color:red;
}
The 6n selects every sixth element, and the +1 adds that number. So if you plug in 1, you will get back 7 for the first selector, 8 for the second, and 9 for the third.
Here is a fiddle demonstrating this in use
Here is an article explaining nth-child in more depth
It looks like your li's should be all ready to collapse.You could give your li's a fixed height and width (creating boxes if you will), then add a style for each image to have a relative position and use top and left to get them into position (remember, percentages can scale for you). I've dropped hints on how to accomplish this as you wanted to learn by doing, but let me know if you need the CSS!
I know there have been many questions about ul auto indents, I've tried with no success many of those answers and I have the additional problem of when adding a container with padding, it seems to only pad one side.
Basically I'm trying to get a ul bar fixed to the bottom of the window. This bar is inside a container (main) to give it padding from either side of the window). It is designed to auto expand with the width of the window (liquidish) so there is no defined width beyond the initial width=device width.
When written by itself, I get a small auto indention on the left side of the ul. I've tried adding 0 padding and margins to the ul and li elements and that seems to have no effect as well as others. When I add in the container it seems to pad only the side with the indent problem. I'm sure its something simple and stupid, but I appreciate any help.
As an aside.. the width of the li elements being 33.3% is due to using a spacing box hack found on stackoverflow. The use of it doesn't change/help/hurt anything in this problem, so I omitted it to keep this a little more simple.
JSFiddle Link http://jsfiddle.net/XdHXf/1/
HTML
<div class="main">
<nav>
<ul>
<li>Main</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
</div>
CSS
.main{
width: 100%;
padding: 0 1em;
}
nav{
position: fixed;
bottom: 0px;
background: #455868;
width: 100%;
z-index: 1000;
}
nav ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
}
nav li{
position: relative;
float: left;
width: 33.3%;
text-align: center;
background: #455868;
padding: 0;
margin: 0;
}
nav li a{
text-decoration: none;
display: inline-block;
width: 100%;
padding: 15px 0;
}
This comes from the browser's builtin stylesheet. If you add
body {
margin: 0;
}
the small extra space goes away.
As an alternative, you get similar results, when you check Normalized CSS under Fiddle Options.
I have a template which has 3 equally spaced boxes, the problem is that i am unable to get the last box to align correctly the first two elements.
how do i add a 3 block equally spaced box in css without tables?
my attempt http://khine.3b1.org/activities/activities.html
any advise much appreciated.
thanks
Make all three boxes float left:
.box ul.supports-list li.last {
width: 200px;
position: relative;
float: left;
}
And provide more width overall:
.box .holder .frame {
background: url(./box-b.gif) no-repeat 0 100%;
width: 620px;
padding: 18px 4px 42px 16px;
}
try to change the next CSS rules to:
.box ul.supports-list {
font-size: 11px;
list-style: none outside none;
margin: 7px 0 0;
overflow: hidden;
padding: 0;
}
.box ul.supports-list li.supports-list-item {
display: list-item;
float: left;
outline-style: none;
width: 200px;
}
.box ul.supports-list li.last {
float: left;
width: 200px;
}
My guess would be to put each box into a div, and then adjust each div's margin-left and margin-top properties to get them to all line up. You'd also want to set the float property of all of the boxes to left. It might not be the most-widely-accepted way of doing things, but that's how I usually solve problems like this.
You can take a look at this example jsFiddle I did for you here: http://jsfiddle.net/Cwca22/g8x5E/ - Hope this helps!