I have a template which has 4 list items for some links. I minimized them to 2 and want to put country flags to both sides. Here's a screenshot:
When I grow the page the flag seems left part of the item:
Here's my code:
<li><a class="active">Türkçe<img style="position: absolute; height: 23px; width: 34px; top: 0.15em; margin-left: 12%; margin-right: auto;" src="./images/turkey-flag2.jpg" /></a></li>
How can I put the flag to the right side of the item?
Related
I'm trying to make a header bar that contains an image followed by a title and the a menu car.
The bar is displayed after 50px and I want the image to be moved up slightly so that its over the top of the wrapping div and showing a bit in the 50px above.
Using position absolute on the wrapping div and position relative with the image then moving it up by 20px works fine but when I do this the rest of the elements in the div stay below it. Is there a way to move those other elements up to they are inline with the image?
I've made a simple jsfiddle of what I'm trying to do here: http://jsfiddle.net/67sTt/
HTML:
<div class='headerContainer'>
<div class='logoContainer'>
</div>
<div class='title'>
<h2>Header</h2>
</div>
<nav class='menu'>
<ul>
<li>first</li>
<li>second</li>
</ul>
</nav>
</div>
CSS:
.headerContainer {
top: 50px;
background-color: green;
position: absolute;
width: 100%;
}
.logoContainer {
height: 120px;
width: 120px;
background-color: red;
display: inline-block;
position: relative;
top: -20px;
}
.title {
font-style: italic;
display: inline-block;
position: relative;
padding: 0;
}
.menu {
display: inline-block;
position: relative;
}
I need the title and the menu to line up in the middle of the image(the red box).
Using position: absolute moves them to the top which is fine but the title and the menu layer on the top of each other.
I know I could use this and give the menu some padding to the left so that it sits next to the title but when the page size is reduces the menu moves below the image and title so I don't want the padding shown then, and I'd rather not come up with some hacky jquery way of managing that if it can be done in css only.
like this? http://jsfiddle.net/67sTt/1/
add:
vertical-align: top
to menu and title
I'm having some lines of text on the left hand side of my webpage and want to mark some lines by different colors using bars on the right hand side of the web page.
Essentially, the layout should look something like this:
the position of the bars correspond to a given line range.
I tried to model this with css see this fiddle:
// html
<ul>
<li style="top: 1em; height: 4em; background: brown;">1</li>
<li style="top: 2em; height: 2em; background: red;">2</li>
<li style="top: 3em; height: 3em; background: green;">3</li>
<li style="top: 5em; height: 1em; background: blue; clear: left;">4</li>
</ul>
// css
li {
list-style: none;
display: inline-block;
position: relative;
}
However the last bar (the blue one) never wraps to a new "line" but is just appended to the right.
Is there any possibility to solve this in css?
Depending on your requirements..you can use absolute positioning:
Demo Fiddle
<ul>
<li style="top: 1em; height: 4em; background: brown;left:1em;">1</li>
<li style="top: 2em; height: 2em; background: red;left:2em;">2</li>
<li style="top: 3em; height: 3em; background: green;left:3em;">3</li>
<li style="top: 5em; height: 1em; background: blue;left:1em;">4</li>
</ul>
nb. although -take your styles out of being inline!
The above fiddle uses nth-child, which you can use to perform rudimentary pattern matching if these elements follow some sort of predictable ordering.
Or you can use CSS columns depending on your requirements...if the elements appear in dedicated vertical 'lanes'
Note that without using one of the above, you will need to resort to either your own JS for layout management or a pre-existing library like masonry or isotope as vanilla CSS and HTML does not allow for vertically nested row ordering of elements.
Here is my code.
The HTML:
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic1.jpg" title="Bottle in the mirror"><img src="images/250-width/pic1.jpg" alt="" width="250px" height="250px" id="Bottleinthemirrorpic"></a>
<span id="Bottleinthemirror" class="spanlink"><p>Bottle in the mirror<p></span>
</div>
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic9.jpg" title="The empty glass"><img src="images/250-width/pic9.jpg" alt="" width="250px" height="250px"></a>
</div>
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic10.jpg" title="The last drop"><img src="images/250-width/pic10.jpg" alt="" width="250px" height="250px"></a>
</div>
The CSS:
#Bottleinthemirror {
width: 250px;
height: 90px;
position: absolute;
background-color: rgba(0,0,0,.55);
margin-top: 10px;
color: white;
line-height: 20px;
font-size: 12px;
}
.column1of4 {
margin: 50px;
float: left;
}
The Javascript:
$('#Bottleinthemirror').hide();
$('#Bottleinthemirrorpic, #Bottleinthemirror').hover(function(){
//in
$('#Bottleinthemirror').show();
},function(){
//out
$('#Bottleinthemirror').hide();
});
Basically, I have three pictures, two of them beside each other and the third one is below the first one. Which I hover over the first picture, I want the #bottleinthemirror span to appear, which it does. The problem is, even when the span is hidden, it still rearranges the layout of the website and moves the picture below it to another place even though it's position is set to absolute. Any idea why? When I remove the span, the website layout is normal. It changes when I put in the span even though the spans position is absolute.
Probably the problem is that span can not contain p, and in your code there are technically 2 p elements in the span (both p tags are opening). When browsers fix this incorrect markup, part of the last p may appear outside the span. If there is a need to have p inside .spanlink, it's better to use div instead of span. But is the p really necessary here?
Add
display: block;
to
#Bottleinthemirror
I set this up in a jsfiddle: http://jsfiddle.net/r2XG2/1/ and it appears to be working for me in Chrome. What browser are you in? I would try the following if it's still not working for you:
Set z-index: 100 to see if that will force it to appear over the other elements. You could also try setting the top or left values in css, that may also force it to appear in the correct place. Adding display: block; couldn't hurt either.
Edit: Updated fiddle with latest update from asker it also appears that IE won't load jsfiddle. I added position: relative to the parent div to see if that helps.
#Bottleinthemirror {
width: 250px;
height: 90px;
position: absolute;
background-color: rgba(0,0,0,.55);
margin-top: 10px;
color: white;
line-height: 20px;
font-size: 12px;
z-index: 100;
display: block;
}
.column1of4 {
margin: 50px;
float: left;
position: relative;
}
Before you read further, I am utilizing the OneByOne Jquery Slider plugin, the plugin content is what I am attempting to snap to the top of its container div. To read more about OneByOne, here is a link: http://codecanyon.net/item/jquery-onebyone-slider-plugin/684613
I am attempting to snap an inside div to the top of its container div, here is my (what I think is anyway), the related CSS:
#banner{
position: absolute;
}
.oneByOne1{
margin-right: auto;
margin-left: auto;
width: 960px;
height: 420px;
position: relative;
overflow: hidden;
}
#banner .oneByOne_item{
position: absolute;
width: 960px;
height: 420px;
overflow: hidden;
display: none;
}
The div I am attempting to snap to the top is the "banner" div, and the container div is "content", but with the OneByOne plugin, it's recognized as the oneByOne div block coded above, here is my relevant HTML:
<div id="content">
<div id="banner">
<div class="oneByOne_item">
<img src="img/storefront.jpg" class="item_1_1" />
</div>
<div class="oneByOne_item">
<img src="img/livemusic.jpg" class="item_1_2" />
</div>
<div class="oneByOne_item">
<img src="img/brokerecord.jpg" class="item_1_3" />
</div>
</div>
</div>
Here is a link to my current site: http://raider.grcc.edu/~ryanduffing/recordstore/
<div class="search_line"> has position:relative and top: -100px. The image inside has a height of 61px, so the div around it does too.
Because you have it positioned relatively, it is still taking up space in the DOM where it naturally would appear, but your top value is "pulling" it up to where it appears visually. Because it's still taking up space in the DOM, it's pushing your #content down the 61px.
I can't see a good reason to leave it how you've done it, so if you can alter it without breaking anything else, I'd recommend changing it to
.main_header .search_line {
position: absolute;
top: 39px;
right: 0;
}
I want to create a content page in jQuery mobile in which I have 2 divs one on top the other within the content area in jquery mobile. The issue is that when the screen size changes the lower div goes on top of the upper div. What I want is that when the screen size changes it maintains the same div structure of one on top the other. I am wondering if I can use a grid but am not sure grids work for 1 column but 2 rows?
My code is below:
CSS
#songName {
text-align:center;
width: 100%;
height: 20px;
}
#songPicture {
text-align:center;
width: 100%;
height: 50%;
}
HTML
<div data-role="content" style="height: 100%">
<div id="songName"></div>
<div id="songPicture"></div>
</div>
Please note the content of the divs comes from JSON and while the id songName is plain text the id songPicture content looks like this :
<img src='"image url+"' style='position: absolute; left: 50%; margin-left: -128px; top: 50%; margin-top: -171px; width: 256px; height: 256px;' />
Use ui-grid-solo class for each div.
<div class='ui-grid-solo'>
Contents
</div>
Reference: http://jquerymobile.com/demos/1.2.0-beta.1/docs/content/content-grids.html