Learning Bootstrap (and frontend-stuff in general) recently and am stuck at one particular problem. I have a navbar that scales across the whole pagewidth with a logo aligning to the left and then a followup of 5 items in an unordererd list, floating to the right. Works great as long as the responsiveness doesn't kick in. The general behavior showing when entering a certain min/max width - ordering the list-items underneath each other - is great, however, the right floating is lost somewhere down the road then. While skimming through the bootstrap-responsive.css I have trouble spotting the line responsible for this behavior.
Does anybody have any idea where I should start looking?
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#"><img src="img/logo.png" alt="horizontal-ad"></a>
<ul class="nav" style="float: right;">
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
</ul>
</div>
</div>
Besides the inline-styling of the unordered list, the only rule I override is .navbar-inner from the main bootstrap.css to adjust the coloring.
Regards!
::edit: I just realized that this has nothing to do with the bootstrap-responsive.css, since I removed it but the behavior remains the same. However, the problem still exists. ::
html
<ul class="nav" id="nav_ul">
CSS
#nav_ul{
float:right!important;
}
Try Boostrap helper class pull-right:
<ul class="nav pull-right">
or try to display in block:
<ul style="display:block" class="nav pull-right">
Try this
<div class="navbar">
<div class="navbar-inner clearfix">
<a class="brand pull-left" href="#"><img src="img/logo.png" alt="horizontal-ad"></a>
<ul class="nav pull-right">
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
</ul>
</div>
</div>
Try using:
float: right!important;
clear: right;
text-align: right;
Also to kepp it on the same line though if the screen gets too small it will disappear so won't work well on mobile devices use this line of css:
white-space: nowrap;
http://jsfiddle.net/hive7/b9cgn/4
Related
In CSS, how would I select the .button element? I have tried just .button but it is not working at all. The only way I can get it to hide is by hardcoding style="display: none;
<div id="navBar">
<nav>
<li><a class="button">☰</a>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Schedule</li>
<li>Media</li>
<li>Sponsors</li>
<li>Contact Us</li>
<li><img src="images/fbicon.png"></li>
<li><img src="images/ticon.png"></li>
</ul>
</nav>
</div>
You could do something like creating a css class called .only-mobile like this
.only-mobile {
display: none;
}
And then using media queries you can change .only-mobile to display in block etc.
I'm using Thymeleaf (Spring Boot project). I have the code:
<div class="single_product_thumbnails">
<ul>
<li class="active"><img th:src="${product.mainImage}" alt="" data-image="${product.mainImage}"/></li>
<li><img th:src="${product.imageSecond}" alt="" data-image="${product.imageSecond}"/></li>
<li><img th:src="${product.imageThird}" alt="" data-image="${product.imageThird}"/></li>
</ul>
</div>
Th:src load image thumbnail in left panel (EL code works). Data-image load image on the center of screen - code not work i.e. if I use data-image="http://image.png" or data-image="images/single_2.jpg" it works but my EL expression doesn't work.
Original code (fully works - from https://colorlib.com/etc/coloshop/single.html):
<div class="single_product_thumbnails">
<ul>
<li><img src="images/single_1_thumb.jpg" alt="" data-image="images/single_1.jpg"></li>
<li class="active"><img src="images/single_2_thumb.jpg" alt="" data-image="images/single_2.jpg"></li>
<li><img src="images/single_3_thumb.jpg" alt="" data-image="images/single_3.jpg"></li>
</ul>
</div>
How to use EL properly in this data-image example? Thank you in advance for your help.
Thymeleaf only evaluates attributes that are prefixed with th:. You should be able to use:
<div class="single_product_thumbnails">
<ul>
<li><img src="images/single_1_thumb.jpg" alt="" th:data-image="${product.mainImage}" /></li>
<li class="active"><img src="images/single_2_thumb.jpg" alt="" th:data-image="${product.imageSecond}" /></li>
<li><img src="images/single_3_thumb.jpg" alt="" th:data-image="${product.imageThird}" /></li>
</ul>
</div>
The other option would be to use th:attr, to dynamically generate the attribute you want. Like this:
<img src="images/single_1_thumb.jpg" alt="" th:attr="data-image=${product.mainImage}">
I am currently working on a portfolio for my website. I added my picture in it, but the picture does not show.
<div id="wrap">
<h1>Portfolio/CV</h1>
<ul id="gallery">
<li>
<a href="#">
<img src="logo.png"> <!-- doesn't show -->
<div>These are coming soon!</div>
</a>
</li>
</ul>
</div>
You can see above html live on my portfolio.
I have uploaded the image to my server.
Does somebody understand what I'm doing wrong?
this is how your HTML looks, when you are able to access those links your site will work. Seems your images are uploaded to a different folder or maybe permission to read is not there.
http://www.anika.nl/logo.png
<body>
<div id="wrap">
<h1>Portfolio/CV</h1>
<ul id="gallery">
<li><img src="logo.png"><div>These are coming soon!</div></li>
<li><img src="lights2.jpg"><div>I am working on it!</div></li>
<li><img src="flo3.jpg"><div>Why are you even reading this?</div></li>
<li><img src="lights1.jpg"><div>Humans are always so curious</div></li>
<li><img src="flo2.jpg"><div>LOL </div></li>
<li><img src="lights3.jpg"><div>Can't stop?</div></li>
</ul>
</div>
</body>
</html>
So I got this header, I want the logo in the middle, and then 2 links on the left and 2 links on the right. I guess I know how to do this but not what the best way is. Got what I think that works below. Edit: Obviously no css applied yet, gotta get the html straight first.
So here's the header
<header>
<div id="head-wrap">
<nav>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</nav>
</div>
</header>
What might work
<header>
<div id="head-wrap">
<nav>
<div id="nav-left>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
</ul>
</div>
<img src="logo.png" alt="Logo" height="42" width="42">
<div id="nav-right">
<ul>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</div>
</nav>
</div>
</header>
Is this the best way or should I do it differently?
Regards
Your example has a lot of superfluous HTML elements in it. Instead of multiple div containers, try something like this:
<nav>
<ul>
<li>
Smartphones
</li>
<li>
Tablets
</li>
<li>
<img src="logo.png" alt="Logo" height="42" width="42" />
</li>
<li>
Laptops
</li>
<li>
Desktops
</li>
</ul>
</nav>
Then display the li elements inline:
li{
display:inline;
}
Example
Obviously you'll need to edit this more to fit your own needs, but a simple structure is the start of a good design.
I am having a stacked list where I want to float an img (icon) and the text. However, I feel its a pain to clear after each list item. What's the solution here? Any tips how to make it more clean?
<ul>
<li><img src="#" /> Home</li>
<div class="clear"></div>
<li><img src="#" /> About</li>
<div class="clear"></div>
</ul>
You could make the li elements to clear..
<ul>
<li class="clear"><img src="#" /> Home</li>
<li class="clear"><img src="#" /> About</li>
</ul>
If you only float the contents of the li (the img and the a) then you can just set the overflow of the li to auto or hidden and it will work as expected.
li{overflow:auto;}
Demo at http://jsfiddle.net/SqWHB/
Yes, use a class for the clearfix:
and add this css:
.clearfix:before, .clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
You need the clear only one time and that is after the ul.
<ul>
<li><img src="#" /> Home</li>
<li><img src="#" /> About</li>
</ul>
<div class="clear"></div>