I'm trying to float span and ul next to each other but without fixed width it wont float to each other horizontal but instead act like float wasen´t applied and stack vertical. When i set fixed width and remove display:inline-block from updates-documents-holder-inside it will appear to act as intended in first place. http://jsfiddle.net/Jx3dv/ to show the problem.
<div class="updates-documents-holder">
<div class="updates-documents-holder-inside">
<span><div></div></span>
<ul>
<li>Flytt av sopor.doc</li>
<li>5FSE 0000 000</li>
<li>Har blivit uppdaterad</li>
<li>2014-28-15</li>
</ul>
</div>
Css
.updates-documents-holder{
float:left;
width:23.8em;
height:5em;
text-align:center;
}
.updates-documents-holder-inside{
display:inline-block;
}
.updates-documents-holder-inside > span{
display:block;
float:left;
background:green;
}
.updates-documents-holder-inside > span > div{
display:block;
height:50px;
width:50px;
}
.updates-documents-holder-inside > ul{
display:block;
float:left;
text-align:left;
list-style:inside;
padding-left:1em;
background:red;
}
http://jsfiddle.net/aibrean/jSZyh/3/
Here's a fiddle. Mixing floats and block elements is the cause of the problem. They don't play nice together.
Updated CSS code:
.updates-documents-holder-inside > span{
display:inline-block;
background:green;
}
.updates-documents-holder-inside > span > div{
display:inline-block;
height:50px;
width:50px;
}
.updates-documents-holder-inside > ul{
display:inline-block;
text-align:left;
padding-left:1.5em;
background:red;
}
You don't have to apply any fixed width. Just remove display:inline-block from the container div.updates-documents-holder-inside,
So that both the elements have enough space to sit next to each other.
Updated Fiddle
Related
I have a undefined list with 6 items. I want to organize these items in 2 columns, odd in left, even in right side, regardless the item content height.
CSS basically:
ul li
{
list-style:none;
width:270px;
background:#eee;
margin-bottom:10px;
padding:10px;
display:inline;
}
ul li:nth-child(odd)
{
float:left;
}
ul li:nth-child(even)
{
float:right;
clear:right;
}
Here's the example: http://jsfiddle.net/cbacelar/x9jLdg8k/
You can simply use display: inline-block without float. Just make your LI width: 50%.
http://jsfiddle.net/x9jLdg8k/2/
Changed your ul li rules to the following: Added width:50% as well.
ul li
{
list-style:none;
width:50%;
background:#eee;
margin-bottom:10px;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
clear:both;
}
I am trying to put a title in a div toolbar next to some pictures. The problem is that my text is not well placed, it should be at least on top of the toolbar but instead it is at bottom and doesn't move.
I would like it to be in the vertical middle at left near the pictures.
Here is a codepen : http://codepen.io/anon/pen/fDojK
And a picture :
Here is the html part of the title bar:
<div id="bar" >
<div id="picturesmenu">
<img src='images/back.jpg' alt='back' />
<img src='images/home.jpg' alt='home' />
<img src='images/reload.jpg' alt='reload' />
</div>
<div id="titlemenu">Main</div>
</div>
<div id="body">
...
And style :
#bar
{
width:100%;
height:50px;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
vertical-align:top;
}
#picturesmenu
{
margin:0;
padding:0;
display:inline;
}
#bar img
{
border:3px solid white;
width:40px;
margin:2px;
}
#titlemenu
{
margin:0;
padding-left:20px;
height:100%;
display:inline;
font-size:20pt;
font-weight:bold;
color:white;
}
#bar span
{
margin-left:20px;
margin-top:200px;
font-size:20pt;
font-weight:bold;
color:white;
}
I tried vertical align and margin but the "Main" text doesn't move...
Thanks in advance before I change anything into tables ;)
[EDIT]
Thank you all for your answers ! I didn't thought about handling the alignment of the content (#titlemenu) instead of the container (#bar), it's not very logical...
You need to work the vertical align for both #picturesmenu and #titlemenu and remove the padding left for that title if you want it to the left. Then work with inline-block elements. Like this:
EDITED WITH CROSS-BROWSER CODE
html, body {
height:100%;
width:auto;
padding:0;
margin:0;
background-color:black;
}
#bar {
width:100%;
height:auto;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
display:block;
}
#picturesmenu {
margin:0;
padding:0;
}
#bar img {
border:3px solid white;
width:40px;
margin:2px;
display:inline-block;
vertical-align:middle;
width:40px;
height:50px;
}
#titlemenu {
margin:0;
padding-left:0px;
display:inline-block;
vertical-align:middle;
font-size:20pt;
font-weight:bold;
color:white;
}
.item {
float:left;
width:120px;
height:120px;
border:2px solid white;
text-align:center;
margin:20px;
padding:20px;
}
.picitem {
height:70%;
margin-bottom:25px;
border:2px solid white;
}
.textitem {
underline:none;
color:black;
font-size:16pt;
color:white;
}
I have forked your CodePen
However, a way better approach would be to give #bar a display:block property and then add inline-block to everything inside, but if you want it to work as in your description, there you go
Add these lines to the #titlemenu in CSS
padding:10px;
display:inline-block;
vertical-align:top;
By vertical-align:top, the block gets aligned to the top of the parentdiv and you set padding to fit the height of the block to the height of the parent div
Demo
In my last question I asked how could I add text onto the gray area of the picture, some guys suggested using <span>, I ended up with all the text (because it is a span after all, inline) on top of each other in a single line (left picture), even though it was set to display:block. How can I break it into seperate lines as seen in the picture on the right?
and does it make sense using h4/h5 for the styling or I should use different div's or something?
HTML:
<div class="rightCol1">
<img src="pic1.png"><span><h4>2014 02 16</h4><h5>po pirmojo etapo <br> naudingiausi - osvaldas <br> sarpalius ir lukas šukutis</h5></span>
<img src="pic2.png"><span><h4>2014 02 16</h4><h5>geriausias sezono <br> startas per visą klubo <br> istoriją </h5></span>
</div>
CSS:
.rightCol1{
float:right;
margin-right:150px;
margin-top:10px;
}
.rightCol1 a {
background:green;
display: block;
position:relative;
height:200px;
width:100px;
margin-bottom: 160px
}
.rightCol1 a span {
line-height:0px;
display:block;
margin-left:15px;
width:234px;
height:70px;
position:absolute;
bottom:-80;
left:0;
z-index:1;
}
h4{
padding:0;
margin:0;
font-style:;
color:#e6540c;
font-weight:bold;
font-size:14;
}
h5{
padding:0;
text-transform:uppercase;
color:rgb(193,193,193);
}
It's because your span has no line height, so each on the lines will come out ontop of each other. I suggest removing line-height from your span CSS:
.rightCol1 a span {
display:block;
margin-left:15px;
width:234px;
height:70px;
position:absolute;
bottom:-80px;
left:0;
z-index:1;
}
Trying to vertically align text for the buttons in the middle, however i want entire button are to be a link (not just text) so i stretched the anchor tag, now i cannot vertically align text anymore even if i wrap it in another tag still does not work for some reason.
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
border-spacing:15px;
width:100%;
display:table;
}
li {
display:table-cell;
background-color:#ccc;
height:75px;
text-align:center;
}
a {
width:100%;
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
}
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
ABOUT<HR/>US
</li>
<li>
NEW<hr/>EVENTS
</li>
</ul>
Key points:
I like to keep buttons auto stretch to the page width like it is now.
I like to have entire button area to be click able not just text.
I like to keep unordered list for menu structure as its semantically correct for menu
http://jsfiddle.net/vWrE8/
Final Result Should look like this http://i.stack.imgur.com/kKEc8.png
In my opinion wrapping text inside anchor tag with div is a way to go and then valign-middle, however i cannot make it work.
Here is one solution that may work for you:
Demo Fiddle
You need to remove the disiplay:block from the anchor tags, and vertically align them throught he li element.
CSS
li {
// other styles here
vertical-align: middle;
background-color:#FCF; //<-move the bg to here
}
a {
// other styles here
// display:block;
// background-color:#ccc;
}
I don't think this is achievable without wrapping the multi-line texts in another element, but once that's done, it's quite straightforward. Assuming that wrapper element is a div, just add
a div {
display:inline-block;
width:100%;
vertical-align:middle;
}
a:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
As per http://jsfiddle.net/vWrE8/9/
BadAdviceGuy's solution is good, but given you want whole block to be clickable, you can try fluid padding for the anchor tags. Fiddle
CSS:
a {
width:100%;
height:100%;
display:block;
padding: 50% 0;
text-decoration:none;
opacity:0.5;
}
This is as close as I can get to what you want: http://jsfiddle.net/vWrE8/6/
Only works for one line break, after that it falls apart... =/
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
width:100%;
list-style:none;
}
li {
display:inline-block;
vertical-align:top;
background-color:#ccc;
min-width:110px;
height:75px;
text-align:center;
margin:0px 10px;
}
a {
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
line-height:2em;
}
a span {
position:relative;
display:block;
line-height:1em;
top:30%;
}
<ul>
<li> <span>HOME<span></li>
<li><span>ABOUT<span></li>
<li><span>ABOUT <HR/>US<span></li>
<li><span>NEW <HR/>EVENTS<span></li>
</ul>
I have an unordered list used for navigation tabs. I want them to have space between them but I also want the beginning of the list to line up with the rest of the text to the left.
I know this is simple but I can't figure it out.
http://jsfiddle.net/29g9S/3/
<body>
<div class="page-box">
<p>I am trying to get the ul's li's to line up with the "My Blog" text and still flow with the document</p>
<h1>My Blog</h1>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</body>
CSS
.page-box{
position:relative;
left:50px;
}
ul{
position:relative;
left:0px;
}
ul>li{
float:left;
position:relative;
margin-left:100px;
list-style-type:none;
}
The key is killing the margin / padding on the ul:
.page-box{
position:relative;
left:50px;
}
ul{
position:relative;
margin:0;
padding:0;
}
ul>li{
display:inline-block;
position:relative;
margin:0 100px 0 0;
list-style-type:none;
}
Here is an updated jsFiddle. Notice the use of display:inline-block; instead of float:left;. Floats are a one way ticket to old webville! Embrace the wonder that is display:inline-block! :D
If i understood correctly css can be modified as follows,
http://jsfiddle.net/fTdHH/
ul{
position:relative;
left:0px;
padding:0px;
}
ul>li{
float:left;
position:relative;
/* margin-left:100px; */
margin-right:100px;
list-style-type:none;
}
Set
ul {
margin: 0;
padding: 0;
}
ul>li {
// no margin-left
margin-right: 100px;
}
http://jsfiddle.net/beautifulcoder/29g9S/8/
PlantTheldea is right about the margin/padding on the ul. If you want to keep the list items floated with margin-left, just remove the margin-left from the first list-item by using li:first-child:
.page-box {
position:relative;
left:50px;
}
ul {
margin:0;
padding:0;
position:relative;
left:0px;
}
ul>li {
float:left;
position:relative;
margin-left:100px;
list-style-type:none;
}
ul>li:first-child {
margin-left:0;
}
Also, is there are reason you're using position:relative on everything rather than just adding margin or padding to .page-box?