hi I am trying to have a thumbnail at the button of my picture, but it goes out of the whole span that I have here is my code here is the whole code http://jsfiddle.net/dP4eL/
I am using twitter bootstrap
<div class="tab-content">
<div class="tab-pane fade in active" id="home"><div class="container">
<div class="row">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="Hydrangeas.jpg" alt="product 1">
<div class="caption">
<h5>Product detail</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<br>
<div class="span1">
<div class="thumbnail"><img src="Hydrangeas.jpg" alt="image">
fav
</div>
</br>
</div>
</p>
</div>
</div>
</li>
Thank you
Your question is kinda hard to understand - i guess you do want that little "image / Favbutton"-Box to remain in its parent-div?!
Bootstrap should use the floats in the right way so, try to add to your .thumbnail-class:
.thumbnail { overflow: hidden; }
If that´s what you want to achieve.
It's hard to tell from the limited code you have there, but if you would like a div to cut off extra content you can set a width and height for it and set it's overflow to hidden like so:
.span1 {
width: 100px;
height: 100px;
overflow:hidden;
}
Just change the width and height to your specifications.
Your problem is that the class span has the property float: left. Float removes the element from the float of the document.
[class*="span"] {
float: left;
}
You have multiple instances of this css in your .. css declarations. The way I see it, you have two options.
Either delete float: left from all instances, or apply a clearfix css class to your elements. This will ensure your div remains in the flow of your document, and your parent div expands to contain it.
I would create a demo for you, but there is so much css in your js fiddle that js fiddle cannot parse it at a reasonable speed.
remove your float:left setting for your span. If you aren't happy about that then try using table :D
Related
I'm using the Bulma navbar, and the function of it is really great! My question is: on smaller screens, when the navbar-menu is shown as a dropdown via clicking the burger menu - how can I style that?
It shows up as full-width, but I'd really like to be able to have it narrower, or maybe adjust to the width of the contents.
Here's how it looks currently:
Closed:
Open:
For the burger menu dropdown, all of the examples on the Bulma page seem to reach the full width of the Navbar. (Though not so for dropdowns within the navbar).
Does anyone know how I can make it not full-width? I mean, I can easily add max-width: 50%; etc on the .navbar-menu, but I don't know how to then make the menu div 'stick' to the right-hand side of the navbar, since it doesn't look very nice aligned to the left:
I feel like I'm missing the obvious here, if anyone can put me on the right path I'd appreciate it so much!
code stuff
My HTML looks basically exactly like the Bulma docs, but I'll add it here just in case:
<nav class="navbar" role="navigation">
<div class="navbar-brand">
<div class="navbar-item">
<p class="title"><span>title here</span></p>
</div>
<div class="button navbar-burger is-active">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu is-active">
<div class="navbar-end">
<div class="navbar-item">
<div>menu item 1</div>
</div>
<div class="navbar-item">
<div>menu item 2</div>
</div>
</div>
</div>
</nav>
And just to be clear, because it's a common question, I don't have any problems with the functionality of the navbar - just wanting styling advice.
Update
Below, #sol wrote about adding max-width: 50%; and float: right; as a solution. Visually though, it isn't quite right:
Closed (looking normal):
Open (uh oh alignment):
You can create this layout by applying some flexbox properties to .navbar-menu and its container.
You'll need to wrap these rules in a media query to ensure it doesn't affect the menu at larger screen sizes.
fiddle
#media screen and (max-width: 1023px) {
.navbar {
display: flex;
flex-wrap: wrap;
}
.navbar-brand {
min-width: 100%;
}
.navbar-menu {
margin-left: auto;
min-width: 50%;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
<nav class="navbar" role="navigation">
<div class="navbar-brand">
<div class="navbar-item">
<p class="title"><span>title here</span></p>
</div>
<div class="button navbar-burger is-active">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu is-active">
<div class="navbar-end">
<div class="navbar-item">
<div>menu item 1</div>
</div>
<div class="navbar-item">
<div>menu item 2</div>
</div>
</div>
</div>
</nav>
<div class="section content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, provident quasi nulla fugiat libero nemo tempora adipisci quisquam voluptatibus blanditiis suscipit cupiditate obcaecati numquam, odio eligendi repellendus! Commodi, mollitia, modi!</p>
</div>
You can try the styling below:
.navbar {
position:relative;
}
.navbar-end {
position:absolute;
left:50%;
}
.navbar-menu {
max-width:50%;
}
This way ".navbar" will be positioned relative to its current position which will allow ".navbar-end" to be positioned in relation to ".navbar" as one of its descending children elements ("position:absolute" positions the element in relation to its nearest positioned ancestor). You may have to tweak the left % if it doesn't fit exactly and also specify either top or bottom offsets if the menu items get displaced vertically.
https://jsfiddle.net/537wen91/
I am using Bootstrap, and in the example, if you make html view wide, scrollbars disappear, when the view is narrow scrollbars show up. That is what I want. The problem starts when I am in the "narrow view": scroll down to the gray box, now expand html view, see how scrollbars are gone (good), but I also lost my text at the top (not good). Why is my text at the top gone?
Edited to clarify
This way it works: On page load - don't scroll anywhere and stretch the screen so that you see all colored columns on one row. You see some text at top, columns at the bottom, no scrollbar. This is how it should be.
This way it doesn't: Refresh page. Scroll down to the pink column. Now stretch it so that all colored columns appear on one row. See that my text at the top is gone? Why?
If this is still not clear, I would have to make a screen recording...
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<h2>title</h2>
</div>
<div class="col-md-4">
<h2>title</h2>
<p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et ultrices neque, vel vestibulum turpis. In ex nunc, vulputate at quam vitae, ultrices vestibulum velit. Phasellus lorem orci, maximus vitae tristique a, sollicitudin sed mauris. Donec ipsum nibh, pulvinar quis nulla at, cursus congue odio. Cras accumsan sem erat, volutpat elementum ante accumsan sed.</p>
</div>
<div class="col-md-4">
<h2>title</h2>
<p>bbb</p>
</div>
<div class="col-md-2">
<h2>title</h2>
<p>bbb</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>title</h2>
</div>
</div>
<div id="see" class="row">
<div class="col-md-2" style="background-color: #FFC;">...</div>
<div class="col-md-2" style="background-color: #CCC;">...</div>
<div class="col-md-2" style="background-color: #CCC;">...</div>
<div class="col-md-2" style="background-color: #FC9;">...</div>
<div class="col-md-2" style="background-color: #CCF;">...</div>
<div class="col-md-2" style="background-color: #CCF;">...</div>
</div>
</div>
<nav class="navbar navbar-fixed-bottom">
<p>Place sticky footer content here.</p>
</nav>
CSS
html {
/*position: relative;
min-height: 100%;*/
height: 100%;
}
body {
overflow: hidden;
}
#see > div {
height: 1200px;
}
.navbar {
margin-bottom: 0;
min-height: inherit;
}
nav {
background-color: #222;
color: #666;
}
#media (max-width: 992px) {
body {
overflow: auto;
}
#see > div {
height: 500px;
}
}
JS
$(window).bind('resize load', function () {
if ($(this).width() <= 992) {
$('nav').removeClass('navbar-fixed-bottom');
} else {
$('nav').addClass('navbar-fixed-bottom');
}
});
As mentioned above, the issue is that #see div changes width but not height, and as the page was scrolled, the scrolling remains, leaving the text out of the viewport. Something like this (excuse my poor MSPaint skills):
One possible solution for that would be to scroll to the top of the page right before that change is made, so the text is always visible. You can achieve that just by adding a line of code:
$(window).scrollTop(0);
You can see it working here: https://jsfiddle.net/537wen91/12/
One possible CSS-only solution would be to, if the text height is constant, for the #see div add a height of calc(100% - HEIGHT_OF_TEXT). But I haven't tried this.
Try replacing:
body { overflow: hidden; }
with
body { overflow: auto; }
More info on Overflow values: http://www.w3schools.com/cssref/pr_pos_overflow.asp
You may have to define what happens in different view sizes, using Bootstrap's grid layout: http://getbootstrap.com/css/#grid
In your class, define grid sizes for these:
.col-xs- .col-sm- .col-md- .col-lg-
Add hidden-xs to your class to hide in extra-small, or hidden-md in medium views, and so on (in the Fiddle below, if you make the width of the result window narrow enough, you will see this happen,
When you go to a smaller screen size, let's say you want to display two "title" elements instead of four, you would change your HTML to this:
<div class="row">
<div class="hidden-xs col-md-2">
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4">
<div class="hidden-xs col-md-2">
</div>
This makes it so that on smaller screens, the only middle two elements will display as they will take up all 12 columns of the grid. Or you could make it so that on smaller views. Here is a Fiddle: https://jsfiddle.net/1dtnd59s/1/
Basically the column options for different display sizes have to be tweaked, and if you're ok with hiding certain elements on small displays, that will make it easier.
To my understanding all you need for margin: 0 auto; to center the content is:
display: block;
No floats
No absolute positioning
And a set width
Any ideas on why this isn't working?
I can apply text-align: center, and this will center is, however I just want to center with the margins. Any ideas.
Here is the pen: http://codepen.io/anon/pen/JovwoJ
It is working, you just don't have another element wrapped around it to see that it is centered and its width is set to 100% so you can't see that it is centered because it takes up the full width.
HTML & CSS:
.wrapper
{
width: 80%;
margin: 0 auto;
display: block;
}
<div style="width:100%">
<div class="wrapper">
<div class="nav-bg">
<div class="nav">
Solar Panel Kits
Solar Water & Pool
Portable Solar
Solar Panels
Solar System Parts
Emergency Solar
Sale
</div>
</div>
<div class="info1-bg">
<div class="info">
<div class="inner2">
<b>Free Delivery Wordwide</b>
<b>At vero eos et accusamus et iusto odio dignis</b>
</div>
</div>
<div class="info2">
<div class="inner2">
<b>Free Return For 90 Days</b>
<b>At vero eos et accusamus et iusto odio dignis</b>
</div>
</div>
<div class="info3">
<div class="inner2">
<b>Discount On Order Gift</b>
<b>At vero eos et accusamus et iusto odio dignis</b>
</div>
</div>
<div class="slider">
<img src="">
</div>
<div class="learnSolar">
<div class="learn1">
<b>Get Insight On</b>
<b>Solar Basics</b>
</div>
<div class="learn1">
<b>Get Insight On</b>
<b>Solar Rebates</b>
</div>
<div class="learn1">
<b>Schedule A Free</b>
<b>Solar Analysis</b>
</div>
</div>
<div class="footer-bg">
<div class="footer">
Customer Service
Contact Us
Blog
Links
Learn More
FAQ
About Us
</div>
</div>
</div>
</div>
</div>
text-align is just centering the display:inline elements that are inside of your wrapper div.
You have the wrapper set to 100% width. With that, Margin: 0 auto; will automatically center the wrapper by giving it left and right margins of 0, since it's already taking up the entire page. You could set the wrapper to width: 90%;, or anything besides 100% to have it center correctly.
Further, the divs that are inside of your wrapper are all block elements, meaning they will take up the entire width of your wrapper. Which is why, even when it's centered correctly with Alex W's answer, it isn't centered by our standards.
Edit: I posted this because the previous answer didn't mention the wrapper width problem before it was edited, and I'm not able to make comments yet.
i like to width: 100% for my text div. But i don't know why this not working.
So if i have small description text i have not full width by my list div and if i have long description text so i have 100% width div.
Here my screeny Problem:
DEMO SITE
Here my HTML:
<div class="columns events_list_even margin_padding_clean">
<div class="event_list_abstand">
<div class="two columns padding_right_left_clean">
<div class="date-list"><i class="fa fa-calendar fa-lg" style="margin-right: 10px"></i>Mo. 14.04.2014 </div>
<img src="http://www.davis-design.de/marktadresse/files/floh_troedel_jahrmarkt.png" class="category_icon">
<img src="http://www.davis-design.de/marktadresse/layout/images/veranstaltung_halbwegs_ueberdachung.png" class="roof">
</div>
<div class="ten columns margin_bottom_clean padding_right_left_clean">
<h2 class="date-ueberschrift" style="border-bottom: none;">Abendmarkt Osnabrueck</h2>
<div class="date-info"> Albrechtstraße 15 | 49076 Osnabrück |
Floh-, Trödel- & Jahrmarkt</div>
<p class="margin_bottom_clean">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...</p></div></div></div>
Add "width:100%" in your class(event_list_abstand).
Add this to your css
div.columns.events_list_even.margin_padding_clean {
width: 100%;
}
columns {
-moz-box-sizing: border-box;
width: 100%;
}
Make the above mentioned changes in the responsive.css at line number 5,to get the div with full width
According to your CSS, to target only the white and grey boxes, try:
.loop-posts .events_list_even{
width:100%;
}
------------------------
h1
tab1 tab2 tab3
------------------------
text text | photo
text text | photo
text text | photo
text text | photo
text text | photo
text text |
text text text text text
text text text text text
In the above two column layout the text is floating around the right panel. This is easily achieved by right floating the right column, however this requires that the right column and its images are placed before the left column and the text in the html.
Given the possibility (who knows really but I'm not up for taking a chance) of losing page rank due to text content being lower down the page, how can I achieve the same result with the left column before the right in the html?
Related question on webmasters
I read in that referenced thread that these images are a slideshow, does that mean you know the width and height of the right "floated" block?
IF so the following fiddle example may be an option, if not I don't think it's possible without keeping the images first in source.
IF so, it means inserting one empty div first in source, dimensioning it to match the images/slideshow area and floating it right for a "placeholder".. then add position relative to your main content area, and absolutely position the actual images/slideshow over the placeholder:
example fiddle : HERE
full code as per comments :
HTML:
<div id="wrapper">
<div id="header"><h1>Header</h1></div>
<div id="tabs">Tabs</div>
<div id="main">
<div id="ssholder"></div>
<div id="left">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<p> add loads more content!</p>
</div>
<div id="sshow">
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
</div>
</div>
</div>
CSS:
#wrapper {
width: 600px;
border: 1px solid #000;
}
#main {
position: relative;
border: 1px solid red;
}
#ssholder {
float: right;
width: 200px;
height: 300px;
}
#sshow {
position: absolute;
width: 200px;
height: 300px;
top: 0;
right: 0;
background: #eee;
}
#sshow img {
display: block;
}
jQuery to detect heights if not explicitly set on #sshow:
$(function() {
var sshowHeight = $('#sshow').height();
$('#ssholder').height(sshowHeight);
});
This works from IE6 on. Float it left and set width to it. Your sidebar part gets margin-left that has to be same ammount as total width of floated part (take care with margins, borders and paddings as they count to total width too).
JSfiddle: http://jsfiddle.net/easwee/reXaT/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.content {width:800px;margin:0 auto;background:#ccc;}
.content-text {float:left;width:500px;background:green;}
.content-sidebar {margin-left:500px;background:red;}
.clear {clear:both;height:1px;line-height:1px;font-size:1px;}
</style>
</head>
<body>
<div class="content">
<h1>Winrar text</h1>
<div class="content-text">
Texte
</div>
<div class="content-sidebar">
asdfasdf
</div>
<div class="clear"></div>
</div>
</body>
</html>
Updated:
I moved the image div after the text div. If the size of the image is dynamic you can use jQuery to set it dynamically
jsFiddle link
If you don't know the width and height of your image element
Having text content wrap around an element can only be done using float, and since the width and height of your images are not known in advance we'll have to use javascript. I think the easiest way would be to:
Serve the HTML with the text before the image.
Using Javascript move the image before the text.
Use a simple float: right; to position the image.
This way you wont lose page rank (search engine will see the proper HTML) and users will have the desired layout.
The javascript would be as simple as
var image = document.bodocument.getElementById('imageContainer')
var text = document.getElementById('textContainer')
text.parentNode.insertBefore(image, text)
If width and height are always the same
We can fake it using CSS pretty easily by using a pseudo-element
#wrapper{
position: relative;
}
#textContainer:before {
content: '';
display: block;
width: 200px;
height: 200px;
float: right;
margin: 0 0 1em 1em;
}
#imageContainer{
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
}
Here we create a fake 200x200 element before the textContainer and use it to save space for the imageContainer we put over using absolute positioning. For the absolute positioning to work you'll need a wrapper div around your textContainer and ImageContainer with position: relative;
Why not write your html in such a way that all the text occurs before all the images.
Something like :
<div id="MainWrapper">
<div id="LeftFloatedText">
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<div>
<div id="LeftFloatedImages">
<img src="http://placekitten.com/150/150">
<img src="http://placekitten.com/150/150">
<img src="http://placekitten.com/150/150">
<img src="http://placekitten.com/150/150">
<img src="http://placekitten.com/150/150">
</div>
</div>