Here in the footer I have kept one image. But I could not adjust it's top and bottom margin.
Image should be in exactly middle of the footer. Which class reflect it?
CODEPEN DEMO: Demo
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><img class="img-brand" src="http://shayariwallpapers.files.wordpress.com/2013/03/sher-shayari.jpg" height="25" width="20"></img></li>
<li class="active">What is facebook?</li>
<li>How does it work?</li>
<li>Feedback</li>
<li>Contact us</li>
</ul>
</div><!--/.nav-collapse -->
I want to adjust share-shayri.jpg image in middle of the footer.
UPDATE
Note: in header also I have one image. I dont want changing the stlye into footer to be affected in header.
You could wrap the image inside a set of two divs:
<li>
<div id="wrapper">
<div align="center" id="wrapper-inner">
<a href="#" class="navbar-brand scroll-top">
<img class="img-brand" src="http://shayariwallpapers.files.wordpress.com/2013/03/sher-shayari.jpg" height="25" width="20"></img>
</a>
</div>
</div>
</li>
And set the css:
#wrapper
{
display:table;
width:100%;
height:100%;
}
#wrapper-inner
{
display:table-cell;
width:100%;
height:100%;
vertical-align: middle;
}
This should center it both horizontal and verticaly
Your css is bit messed up to study...plus...reference link url are not answered, still :
Since, your image is inside a tag, its overflow:hidden set somewhere...identify it and then add this in your css
a.my_custom_a{
display:inline-block;
border:1px solid red;
vertical-align: middle; /*key*/
}
for markup
<a href="#" class="navbar-brand scroll-top my_custom_a">
<img class="img-brand" src="http://shayariwallpapers.files.wordpress.com/2013/03/sher-shayari.jpg" height="25" width="20"></img>
</a>
this would solve your problem!
Related
I cant seem to move the image inside a div. It can only be moved with absolute positioning, which I am not okay with. Can someone point out why the below given code isnt working. I want all 3 divs to be in one line . Image seems to be stuck in the top left corner. Applying padding doesnt change anything either.Please help
<div class="container" style="display:table">
<div style="display:table-cell">
<div class="emblem" style="padding:0 0 0 20px ;display:table-cell"></div>
<div class="logo" style="display:table-cell" Software Solutions</div>
</div>
<div class="header" style="">
<nav>
<ul style="display:flex;justify-content">
<li> Home</li>
<li>
<a href="{% url 'aboutus' %}" target="ifr" onclick="setTitle2()">
<title>RCE-About</title>About Us</a>
</li>
<li>Products</li>
<li>Solutions</li>
<li>Support</li>
</ul>
</nav>
</div>
</div>
It's maybe something like this you need to do..
EDIT:edited snippet code, navbar is under logo but take 100% width
.container{
display:flex;
justify-content: flex-start;
flex-wrap:wrap;
background:gray;
padding:5px;
}
.navbar-container{
width:100%
}
.container > div{
display:block;
height: 50px;
background: red;
margin-right: 15px;
padding:15px;
text-align:center;
}
ul{
margin:0;
padding:0;
}
ul li{
display:inline-block;
}
<div class="container">
<div class="1">Some text</div>
<div class="logo">LOGO</div>
<div class="navbar-container">
<div class="navbar">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
</div>
</div>
Used this code around every image
<div class="side-by-side"> <a href="http://example.com ....> (include ALL the code for the image here) </div>
This is the CSS snippet
.side-by-side { float: left; margin-right: 5px }
It works... I mean images are on one line
But unfortunately the images align left, and I want them centered, all together.
Wrap your images in a div and set the text-align:center; then you dont need the extra div to wrap your a tags in you can just style the a tag itself. Like so:
<div class="centered-content">
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
</div>
And Css:
.centered-content{
text-align:center;
}
.side-by-side{
margin-right:5px;
display:inline-block;
}
I would use Flexbox to do it. Wrap your div in a container
<div class="container">
<div class="side-by-side">
</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
I've created this content with drupal. Below the image you have a next page button.
I also set a button for next image on top of the image (pager) so if the visitor clicks on the image it would go next page.
How can i stretch the link over my image, drupal generated 2 divs and the images are variable in height.
<div class="view-content">
<div class="container12">
<div class="pagerfoto column12">
<h2 class="element-invisible">Pagina's</h2>
<div class="item-list">
<ul class="pager">
<li class="pager-next first">
›
</li>
<li class="pager-last last">
</ul>
</div>
</div>
</div>
<div class="container12">
<ul>
<li class="views-row views-row-1 column12">
<div>
<div class="views-field views-field-field-image">
<div class="field-content">
<img width="900" height="675" alt="" src="http://www.logicaarchitectuur.be/test/sites/default/files/styles/gallery_large/public/desert.jpg?itok=J6D4TAEL" typeof="foaf:Image">
</div>
</div>
</li>
</ul>
</div>
site
.pagerfoto{
z-index:1;
position:absolute;
padding-top:1.71429em;
display:block;
}
.pagerfoto ul li.pager-next a{
display:block;
margin:0 auto;
padding:0;
text-indent: -9999px;
}
This is the current css i use for ma a label.
Try giving this css:
.view-project11 {
position: relative;
}
.item-list {
left: 50%;
position: absolute;
top: 50%;
}
If I understand your question correctly you would like the user to click on the image and then the page will go to the next image.
wrapping your image in the tag will allow you to do that.
example
<a width="900" height="675" href="/test/project11?page=1">
<img width="900" height="675" alt="" src="http://www.logicaarchitectuur.be/test/sites/default/files/styles/gallery_large/public/desert.jpg?itok=J6D4TAEL" typeof="foaf:Image">
</a>
For each list item, I want an image with text below the image.
I read on this technique, but it is not supported in IE. Instead, I'm floating the list items to the left. It does the trick except the content below the list wraps to the right. How do I prevent the content from wrapping this way?
Here is my code:
<style>
.horizlist{
list-style:none;
text-align:center;
}
#menulist ul{
width:360px;
}
#menulist li{
float:left;
padding-right:50px;
}
#menulist li img{
display:block;
}
</style>
<div id="container" style="">
<div id="top">
<img src="joblove.jpg" style="float:right;">
<div id="title" style="width:500px;text-align:center;">
<h1>"THE TOUGHEST JOB YOU'LL EVER LOVE:"</h1>
<p style="font-size: 1.6em;">A RESOURCE FOR THOSE THINKING ABOUT A CAREER IN DIRECT CARE</p>
</div>
</div>
<div id="menulist">
<ul class="horizlist" >
<li>
<img src="images/purplestyle_11_home.png"></img><span>Home</span>
</li>
<li>
<img src="images/purplestyle_01_heart.png"><span>Brochure</span>
</li>
<li>
<img src="images/purplestyle_05_cut.png"><span>Video</span>
</li>
<li>
<img src="images/purplestyle_15_buddies.png"><span>Personality</span>
</li>
<li>
<img src="images/purplestyle_03_folder.png"><span>Resources</span>
</li>
<li>
<img src="images/purplestyle_02_talk.png"><span>FAQ</span>
</li>
</ul>
</div>
<img src="phone.jpg">
<ul class="horizlist">
<li><button type="button">Click </li>
<li></li>
</ul>
</div>
Add an height to #menulist in css :
#menulist ul{
width:360px;
height:100px;
}
Use CSS backgrounds. They give you more control over image positioning and require less mark-up.
HTML:
<a class="home" href="home">Home</a>
CSS:
.horizlist a {
display:block;
background-repeat:no-repeat;
padding-top: 20px;
padding-left: 20px
background-position: 10px 10px;
a.home {
background-image:url(/images/purplestyle_11_home.png);
}
Can can adjust the padding and background-position values to suit. Repeat as needed.
I've tried a few option but i can't manage to get 4 links to span across the navbar. I thought it would be quite easy to add the span3 class to each <li>.
Here's my HTML:
<div class="navbar center">
<div class="navbar-inner">
<div class="container row">
<ul class="nav span12">
<li class="active span3">
Home
</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
</ul>
</div>
</div>
</div>
To center the links I've used the solution described here: Modify twitter bootstrap navbar
Here's the CSS:
.navbar-inner {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
}
All I've managed to get is this:
How can I get those four links spanned on the same row?
Using spanX is not the best solution here (unless you're using bootstrap-resonsive.css, see below). You can uses percentages, as long as you're willing to modify you CSS when the number of items in the navbar changes.
You can make this work with default navbar markup:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
And two CSS rules. The first removes the margin on the <ul class="nav">, removes the float and sets its width to be 100% of its container (in this case, the <div class="container"> within <div class="navbar-inner">.
The second rule sets the width of each <li> to be a certain percentage of the width of the <ul>. If you have four items, then set it to 25%. If you have five, it'd be 20%, and so on.
.navbar-inner ul.nav {
margin-right: 0;
float: none;
width: 100%;
}
.navbar-inner ul.nav li {
width: 33%;
text-align: center;
}
jsFiddle DEMO
UPDATE
If you are using the responsive bootstrap CSS, you CAN use the built-in spanX classes, like so:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav row-fluid">
<li class="span4">Home</li>
<li class="span4">Link</li>
<li class="span4">Link</li>
</ul>
</div>
</div>
</div>
Then, all the CSS you need is:
.navbar-inner ul.nav li {
text-align: center;
}
jsFiddle DEMO
You did a good start but your markup doesn't reflect the real grid :
You don't put .spanX in a .span12
.container and .row might have conflicting properties
It seems to work with this :
<div class="navbar center">
<div class="navbar-inner">
<div class="container">
<div class="row">
<ul class="nav">
<li class="active span3">
Home
</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
</ul>
</div>
</div>
</div>
</div>
Demo (jsfiddle) and fullscreen