I'm having a problem lining up some icons and am new enough to css that I'm not exactly sure how to explain this. So I've attached a picture of what the out put is rendering like. I've also included what the css and html code is. Hopefully someone can help point me in the right direction to help fix this.
I want the "edit", "archive", "delete" icons to all line up in the right side exactly the same as the first row in the picture.
Here is the html:
<ul id="nav">
<li>California
<div class="portf_edit">
<span>
<img src="../images/edit.png">
</span>
</div>
<div class="portf_archive">
<span>
<img src="../images/archive.png">
</span>
</div>
<div class="portf_delete">
<span>
<img src="../images/delete.png">
</span>
</div>
</li>
<li>Hyrum
<div class="portf_edit">
<span>
<img src="../images/edit.png">
</span>
</div>
<div class="portf_archive">
<span>
<img src="../images/archive.png">
</span>
</div>
<div class="portf_delete">
<span>
<img src="../images/delete.png">
</span>
</div>
</li>
Here is the css:
li {
list-style-type:none;
vertical-align: bottom;
list-style-image: none;
left:0px;
text-align:left;
}
ul {
list-style-type: none;
vertical-align: bottom;
list-style-image: none;
left:0px;
}
ul#nav{
margin-left:0;
padding-left:0px;
text-indent:15px;
}
.portf_edit{
float:right;
position: relative;
right:50px;
display:block;
}
.portf_archive{
float:right;
position: relative;
right:-5px;
display:block;
}
.portf_delete{
float:right;
position: relative;
right: -60px;
display:block;
}
Here's what is being output:alt text http://www.redsandstech.com/css_layout_problem.jpg
Any ideas where to start? Thanks.
The easiest way to fix this is to turn off the float by adding a clear to the LI style as shown below.
li {
list-style-type:none;
vertical-align: bottom;
list-style-image: none;
left:0px;
text-align:left;
clear: both;
}
Add this to your CSS:
ul#nav div{
overflow: hidden;
}
The gist of it is that your floating elements reduce the height of your divs to 0. If you add overflow: hidden to the div then the element will be forced to contain the floating elements and thus have a positive height.
Related
<div align="center">
<div class="se" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div>
<div class="uk" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div>
<div class="de" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div></div>
<div> i dont want this menu div to jump up and down when hover</div>
css file:
.se {margin-top:-30px;}
.se:hover {margin-top:-15px;}
.uk {margin-top:-60px; margin-left:-150px;}
.uk:hover {margin-top:-45px;}
.de{margin-top:-60px; margin-left:150px;}
.de:hover {margin-top:-45px;}
I just want the flags to slide down when hover. As you see in my fiddle, it's acting strange depending on with flag i hover first.
This could probably be solved in an easier way? http://jsfiddle.net/XScjm/1/
I think you are in the wrong way to acomplish what you want, first you can't offset the image with margin because that affects all arround the element. And the way you are trying to position each <div> with margin is unrecommended.
Try to do it this way:
.center {
text-align:center;
}
.se, .uk, .de {
position:relative;
display:inline-block;
cursor:pointer;
}
.se:hover, .uk:hover, .de:hover {
top:15px;
}
Check this Demo
Have a look at this one :-
DEMO
<div align="center" class="one"></div>
.one{ height: 60px; }
try this:
.se, .uk, .de {
float: left;
margin-right: 5px;
margin-top: -40px;
}
.se:hover img, .uk:hover img, .de:hover img {
margin-top: 20px;
}
This will work. JSFiddle.
HTML
<div id="center" align="center">
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
</div>
<div> i dont want this menu div to jump up and down when hover</div>
CSS
.flag {margin-top:-30px; position:relative; display:inline-block;}
.flag:hover { top:15px; }
#center { height: 50px; }
Hi im trying to set some divs inline and i dont know what else to do.
.menuboton{
display:inline;
padding:0.7em;
border-radius: 4px;
background-color: #093;
}
.menu{
display:inline;
margin-right:4em;
}
There are two classes, first are 4 divs and the another is one div with an <img> inside. Those divs are inside another div:
#elmenu{
margin:auto;
margin-bottom:10px;
width:100%;
border-top:1px solid black;
border-bottom:1px solid black;
}
This is my problem: the 4 divs always are slightly below the one with the <img> inside and cross over the container div (elmenu). For fix that I tried setting it display:inline-block and fix the problem of exceds the container limit but still below the one with <img> inside.
Here the html code:
<div id="elmenu">
<div class="menu" id="logo"><img id="imglogo" src="psds/logo.png" /></div>
<div class="menuboton">Inicio</div>
<div class="menuboton">Posts</div>
<div class="menuboton">Login</div>
<div class="menuboton">Usuario</div>
</div>
Pics:
Using display:inline;
Using display:inline-block;
I want all divs stay at the same level!
Some guess?
Place the Knowit image in left and the menu in right and edit widths accordingly.
HTML:
<div class='container'>
<div class='left'></div>
<div class='right'></div>
</div>
CSS:
.container { overflow: hidden; margin:0; padding:0; }
.left{ float: left; width: 150px; }
.right { float: right; width: 150px; text-align:left; }
Edit on OP request:
To center object within div class use:
text-align:center;
to center align the div container use:
margin: 0 auto;
All this information can be found at http://w3schools.com/
You should try to use span instead of div. Also use float:left
vertical-align: middle on #elmenu should do the trick along with display: inline-block; on the logo and menu items.
first you should build your menu from a list or a nav tag.
Inline-block is a good idea, you can easily size and align your elements.
To build your menu you need:
inline-boxes
text-align:center.
line-height
float (just once)
First element (holding logo for instance) can float left.
set a line-height to size (min-)height of the nav bar.
here we come to this : http://jsfiddle.net/GCyrillus/CaR7a/
.menuboton {
display:inline-block;
padding:0.7em;
border-radius: 4px;
background-color: #093;
line-height:1.2em;
}
.menu {
float: left;/* logo */
}
#elmenu {
padding:0;
margin:0;
list-style-type:none;
line-height:48px;/* logo's height */
text-align:center;
border-top:1px solid black;
border-bottom:1px solid black;
}
a {
color:white;
text-decoration:none;
}
<ul id="elmenu">
<li class="menu" id="logo"><img id="imglogo" src="http://placehold.it/1&1" /></li>
<li class="menuboton">Inicio</li>
<li class="menuboton">Posts</li>
<li class="menuboton">Login</li>
<li class="menuboton">Usuario</li>
</ul>
I hope it is useful
Like my comment, the Css should like this
.menuboton{
float: left;
padding:0.7em;
border-radius: 4px;
background-color: #093;
}
.menu{
float: left;
margin-right:4em;
}
UPDATE:
HTML:
<div id="elmenu">
<div class="menu" id="logo"><img id="imglogo" src="http://www.winphoneviet.com/forum/data/avatars/l/35/35914.jpg?1370081753" /></div>
<div class="menuboton">Inicio</div>
<div class="menuboton">Posts</div>
<div class="menuboton">Login</div>
<div class="menuboton">Usuario</div>
<div style="clear: both;"></div>
</div>
This's Fiddle
In creating a custom tree, I am using a image followed by a label. The issue is when the label overflows it goes under the image, rather I need it to be aligned with the starting point of text. How do I do that with css.
Sample code:
<html>
<body>
<div class="maindivclass">
<ul>
<li id="TR_239984" class="liclass">
<img src="http://dummyimage.com/32x16" class="imgclass" />
<label class="labelclass">This is a long text to show wrapping of the text from the box edge</label>
</li>
<li id="TR_239985" class="liclass">
<img src="http://dummyimage.com/32x16" class="imgclass" />
<label class="labelclass">This is another long text to show wrapping of the text from the box edge</label>
</li>
</ul>
</div>
</body>
</html>
Please check a sample here
I need to make it look like : http://imgur.com/Yp9hC
I need image and text seperate because clicking either does 2 different things, so cant use background image for list style, unless its possible using that also.
Thanks
Try this - DEMO
li {
position: relative;
list-style: none;
}
li img {
position: absolute;
}
li label.labelclass {
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
margin-left: 32px;
display: block;
}
This would be a perfect time to use CSS floats. Float both the image and the label to the left and give them defined widths. Make sure to "clear" the float on the .liclass
See http://codepen.io/imjared/pen/EDgHc
Try this:
.maindivclass {
width: 300px;
}
li {
float: left;
position: relative;
list-style: none;
}
.img_container {
float: left;
width: 40px;
padding: 0px;
}
li label.labelclass {
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
float: left;
width: 250px;
}
HTML
<li id="TR_239984" class="liclass">
<div class="img_container">
<img src="img.png" class="imgclass" />
</div>
<label class="labelclass">
This is a long text to show wrapping of the text from the box edge
</label>
</li>
I added a class .img_container because it just simplified setting the width without skewing the img.
Fiddle here
Hear I give you the best code for it.
HTML:
<div class="wrapper">
<div class="box-one">
<img src="http://dummyimage.com/32x16" />
</div>
<div class="box-two">
This is a long text to show wrapping of the text from the box edge. This is a long text to show wrapping of the text from the box edgeThis is a long text to show wrapping of the text from the box edge.
</div>
<div class="clear"></div>
<div class="box-one">
<img src="http://dummyimage.com/32x16" />
</div>
<div class="box-two">
This is a long text to show wrapping of the text from the box edge. This is a long text to show wrapping of the text from the box edgeThis is a long text to show wrapping of the text from the box edge.
</div>
<div class="clear"></div>
</div>
CSS:
.clear{
clear:both;
}
.wrapper{
width:800px;
background:#E6E6E6;
}
.box-one{
float:left;
width:50px;
margin-bottom:30px;
}
.box-two{
float:right;
width:750px;
}
Hope this definitely helps you. Cheer.
I'm experiencing some strange behavior with OL numbering in Chrome, here's my markup:
<ol>
<li>
<div class="block left">
<span class="block">Main Title<span class="alert">!</span></span>
<input type='text' name='title-1' />
</div>
<div class="block left">
<span class="block">Subtitle<span class="alert">!</span></span>
<input type='text' name='title-2' />
</div>
<div class="block left">
<span class="block">Add Image<span class="alert">!</span></span>
<input type='file' name='image' size='30' />
</div>
</li>
<ol>
The classes used are:
.block { display:block; }
.left { float:left; }
.alert { color:red; }
The problem I'm having is that I need the number of my OL to appear to the LEFT of the LI's contents, but Chrome seems to attribute some kind of float property to the numbers, making it appear on the right.
Can anyone provide any assistance on this matter? Thanks in advance.
ol li { margin-left: 60px; list-style-type: decimal; }
will make the numbers visible.
Wrapping the tags inside li-elements with <div class="wrap"> and apply this css to it:
.wrap { display: inline-block; position: relative; top: 12px; }
will fix your problem --> http://jsfiddle.net/GpfYk/2/
position: relative; top: 12px; makes the position nicer.
The problem is that you have a span with a class of "block" inside the li, and both are being floated. If you remove the class of block from the span, it should fix the issue.
Or, if you wish to keep the elements inline, try setting them to display: inline-block and remove the "left" class to float them as in this example: http://jsfiddle.net/jglovier/zshPr/
hello i am make like this example which i get from www.xxxxxx.com
http://s1172.photobucket.com/albums/r568/novikoraharja/?action=view¤t=justanimage.png
i wanted too learn that so can you help me?
<div class="panjang">
<ul>
<li class="bungkus">
<div class="kiri"><img src="http://i1172.photobucket.com/albums/r568/novikoraharja/3.jpg"/> </div>
<div class="kanan">Very loooooong </div>
</li>
<li class="bungkus">
<div class="kiri"><img src="http://i1172.photobucket.com/albums/r568/novikoraharja/3.jpg"/></div>
<div class="kanan">Very loooooong text sooo lonngg </div>
</li>
</ul>
</div>
here the style
.panjang{width:400px;height;100px;}
.bungkus{width:200px; height:50px; background:yellow;}
.bungkus img { width:60px; height:40px; margin:5px 10px;}
.kiri { float:left; background:red; width:80px; height:50px; }
.kanan{vertical-align:middle; background:cyan; float:left;width:120px;height:50px;font-size:12px;vertical-align:middle;
}
here my works http://jsfiddle.net/76E4w/11/
i already add line-align:middle; or line weight but not work;
See working jsFiddle here:
Add display: table; to .bungkus.
Remove float: left; from .kanan.
Add display: table-cell; to .kanan.
When you find a web site doing it as you like,
the easiest thing is to run firefox with firebug
and to look which css applies.
centering could be done in different ways.
one is
text-align: center
An other approach is to set right/left margin to auto
margin: 0 auto;