We've got an odd request from a client. They want a particular <ul>'s content to be centered with the icons. Centering isn't a problem in and of itself, neither are the icons.
The issue is that I can't find a way to center the <li>s at a variable width without the icon being left aligned.
So we're trying to achieve something like you see in http://jsfiddle.net/MBEKW/, with the exception that the icons should float normally to the left of the <li>, as it would if it were left-aligned.
Any ideas on how to achieve this? FWIW, we are using TWBS 2.1.1, but this seems so vanilla that bootstrap shouldn't even be a factor.
You should add this
li {
border: 1px dotted green;
list-style-position: inside;
}
jsfiddle
OR you can do the image icon like this
http://jsfiddle.net/MBEKW/3/
Related
Here is a nice tutorial on how to create a web layout with a main section and a lateral bar. I´m focusing on the float example.
My question is: is it possible to properly move the position of the lateral bar from the left to the right side? I have changed the lines float: right; with float: left;, margin-right: 170px; with margin-left: 170px; and border-right: 1px solid gray; with border-left: 1px solid gray;.
By doing this the bar shifts to the right side but if I increase the number of the line´s text inside the lateral bar (for example by replicating several times <li>London</li> inside the <ul> tags) the content of the lateral bar overlaps the footer! If I do the same with the bar on the left side (as in the example), the footer correctly shifts to the bottom of the page to accommodate the extra data but than there is a problem with the vertical grey bar that separate the main section to the lateral bar.
How this can be solved? How can the layout be modified to have 2 bars (one on the left and one on the right) with undefined lines of text that do not overlap the footer section?
Use this as your CSS
#left-bar{
float:left;
width:100px;
height:100%;
border-right:1px solid black;
}
#right-bar{
float:right;
width:100px;
height:100%;
border-left:1px solid black;
}
Your HTML will look like this
<div id="left-bar">This is on the left</div>
<div id="right-bar">This is on the right</div>
You have to imagine yourself how a html file is build and how it will be displayed. All containers you have are listed below each other in plain html. With css you can define a floating structure by asigning component dimensions and margins and paddings. To align components horizontally you need to have a wrapping container (r.g. the body or a div within the body) with a fixed pixel size. Then you can define e.g. 3 components, a left side bar, an article middle field an a right side bar. These containers will be childcontainers of the wrapper, so they are defined within. These subcontainers you asign a size, normally by % and fineposition them with margins. In chrome and firefox you can see the margins and paddings in the dev console (press F12) under Box-Model.
Css can be quite frustrating. When I teached it myself by building my own website, I lost plenty of ours with this.
You can check out my website for reference. It's a plain Html/Css website, no positioning by JS or php.
It isn't the most beautiful website but the structure framework works as it should. See here: http://richardrudolph.com/
i am not sure if this is what you want . the navigation is on the right.
<https://jsfiddle.net/zpupster/v659zpod/>
Maybe you want to read more about CSS grids, they make such a work you may find tedious easy.
As for the time being I really did not get your question very well, but I believe if you wrapped every section of your HTML in its proper tag you will be able to just use the CSS float property to put them wherever you want. So the lateral bar I believe this is the aside section which would be in an aside tag
<aside>
<ul>
<li>
this is a dummy link
</li>
</ul>
You would just float the whole aside tag to the right as it will by default be floated to the left, so the CSS
aside{float:right;}
I have some unexplainable image margin/Space below img when including images in my wordpress theme. You can see it here: http://www.wlanradios.net/logitech-squeezebox-radio/
See the Amazon logo image inside the content or scroll down and have a look in the "Ähnliche WLAN Radios" sidebar widget with the small thumbnails. The images seem to have a little margin-bottom / Space below it I can not get rid off. I discovered the html/css with firebug but don't get the it where this margins comes from. I in fact tried to
img {
margin:0!important;
padding:0!important;
border:0!important;
}
to overwrite every possible causes for the margin, with no success.
Where is the margin coming from and how to remove it?
Just put to those imgs :
display: block;
UPDATE:
Some explanations: img is an inline element, so it has to deal with white-space, line-height, etc., as all inline elements. I guess the space you're seeing is actually caused by the line-height. So another solution if you want to keep your img as inline elements is to set its parent line-height: 0;.
Have you tried: vertical-align: middle
I have Deeply inspected the Issue, its a bit of haystick needle kind of thing.
1) Amazon Image box - Issue is with the td tag which creates a all sides padding of 6.71667px , This is FORCEFULLY created by the td,th padding which is set to 0.5em
th, td {
border-spacing: 3px;
//Tweak this Padding of 0.5em and you should destroy Amazon Extra Space
padding: 0.5em;
border: 1px solid #CCC;
}
You should be able to find and edit from line 183 of the above css theme from wp-content/themes/ar2-2-b-2-fixed/styles.css
2) Coming to the second issue with WLAN Radios Pic , This image is pushed in due to the DIV tags Padding all set to 4px which is acting on the WLAN Radio pics.
Here are the Issue Pics:
Amazon Image Issue Solved Pic
Hope this Helps :)
Check for your line-height on the img elements, and set it to 1. You must have a line height > 1 on a parent element.
You can also change the display of those img to 'block' (to avoid line spacing).
I have a UL element containing 4 icons within a div that is using absolute positioning to pull it to the bottom of the screen. That div is contained within a fixed sidebar.
I have used display: inline on the list items to give me a horizontal list.
Here is my code running on bootply to demonstrate the problem I'm having. The 4 icons are offset to the right slightly when they should be central:
http://bootply.com/76539
Other content put in the sidebar has no issues with being central. It's just this list.
I have tried quite a lot of methods of trying to get the icons central within the sidebar and none of them seem to be working. I have tried inline-block and float:left on the list items and seem to be getting the same result.
Can anyone see the mistake here? I'm sure there's something simple I've missed.
#social-icons ul {
list-style: none;
margin: 0;
padding: 0;
}
Also you wrote text-align: c instead of text-align: center
I also edited your example: link
Im trying to create a three column layout with a fluid center and fixed sides. Here's a jsfiddle. It seems as though the clearfixes for the nav is pushing the main content below the sidebars. Without the clearfixes, the content in general begins to be displayed incorrectly. Anyone know how to fix this?
Define your .nav-tabs div as inline-block to contain it within its boundaries properly, like so:
.nav-tabs {
display: inline-block;
width:100%;
}
demo: http://jsfiddle.net/6vPqA/15/show/
edit: http://jsfiddle.net/6vPqA/15/
edit: added width so the menu will adapt better.
Specifying a height for the nav class seems to pull the content up between the sidebars.
Something like:
.nav {height:50px}
The scenario is that the client wants a floating div (the gray box) with text that wraps around it. However some of that text includes ul's and ol's, which hide behind the floating div in IE6.
I tried wrapping the ul's/ol's in a div to see if that would help, but have been unsuccessful. Has anyone experienced this problem before and found a suitable solution?
(note: This is an old site with limited ability to be able to modify much else within the layout)
I think you can modify the li's to display their bullets inside instead of outside and that should help you...
ul {
list-style-position: inside;
}
However some of that text includes ul's and ol's, which hide behind the floating div in IE6.
If we're talking something as simple as this:
<div style="border: dotted red 1px; float: left; width: 100px; height: 100px">foo</div>
<p>bar</p>
<ol style="border: dotted blue 1px;">
<li>potato</li>
<li>yoghurt</li>
</ol>
Then what happens here happens on all browsers, not just IE. You can see it from the borders on this example: the left-padding of the list occurs behind the float, not pushing the list content further to the right. This is because floats only repel items in a line box, not block elements.
If you want a quick hack workaround, wrap the <ul> in a <div> with style ‘display: inline-block’.
Floating + IE6 is always a causes some unintentional pain and suffering. Some simple fixes:
Add more margin to the floating box
Add some left margin to your ul/ol