Here is my jsFiddle with full code example.
I am trying to achieve the following to no avail:
I want the glyphicon-globe to appear centered and above the "Community" label (<h1>), and I want all three elements (the glyphicon, the <h1> heading and <h3> subheading) to be horizontally-centered in the middle of the screen
I want the "Community" label to appear with the correct font (see what happens when you remove the glyphicon...)
I have a feeling that the glyphicon is causing both problems:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1><span class="glyphicon glyphicon-globe"/>Community</h1>
<h3>A free online community to all new fizz-comers.</h3>
</div>
</div>
</div>
Perhaps this is malformed somehow or causing weird CSS rules to fire. Any ideas?
span tags shouldn't be self-closing. Here's a better explanation.
This updated example should style the heading and icon the way you want. By center aligning the text in the H1, the span inside it will also center (if set to display: block). The H1 will take the full width of the container element - setting it to display:inline-block is to make this example look better.
<h1 style="text-align: center; display: inline-block;"><span class="glyphicon glyphicon-globe" style="display: block"></span>Community</h1>
Related
I'm making a box based layout and I'm having issues with the gutters in bootstrap 3. Since they've been changed to be padded since bootstrap 2, every time I want to add padding to a box it completely destroys the gutter. I can't seem to find a way of remedying the problem.
I use a .box class to highlight the box from it's gutter and give them background colours and images. I want padding inside the box for the text so it's not right on the edge of the box walls, so I made a .box-inner class, but I can't just apply padding to it :/
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div class="box">
<div class="box-inner">
<h1>Test2</h1>
</div>
</div>
</div>
</div>
</div>
Any help would be very appreciated! I've been banging my head against the wall for hours.
Fiddle here, I highlighted the problem areas with a comment:
http://jsfiddle.net/kbj8dd0e/6/
Sure you can add padding. Just add it to the .box.
Have a look at this:
http://jsfiddle.net/kbj8dd0e/5/
(note that I changed the col-md to col-xs to make it show better in that small fiddle pane, but the same should work for any col class.)
All I did was move the padding to the .box class to be able to remove the redundant .box-inner. I also removed all your instances of <div class="row"><div class="col-md-12">...</div></div> as this just adds markup and serves no purpose whatsoever.
Or am I missing something here?
What is required to make links in bootstrap grids work throughout all the media breakpoints ?
In my case, the links work only as long as the grid is not stacked.
This is what the grid looks like:
<div class="row">
<div class="col-md-6">
<a href="#" class="room" style="height: 155.60px; width: calc(25.0% - 4px);"> <span>Item 1</span>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-12">
<p>This is another row</p>
</div>
</div>
</div>
</div>
The working fiddle is here:
http://jsfiddle.net/pTw2j/8/
Edit Thanks for the fast answer. I chose overflow:hidden; at the end to avoid scrollbars while still fixing the issue.
The problem is that the links are floated, resulting in a height of 0 for the parent .storey container.
Setting overflow: auto on the container will fix the problem.
http://jsfiddle.net/pTw2j/13/
.storey {
overflow: auto;
}
This is referred to as "clearfixing." If you're interested in learning more, here are two good articles:
CSS Tricks: Force Element to Self-Clear its Children
David Walsh: CSS Clear Fix
I had the same problem. In my case a better solution was to add the class of "clearfix" to the containing div. Bootstrap has this class built in so you don't have to do anything with your CSS.
Adding overflow:auto will result in a horizontal scroll bar. Best to use clearfix class which resolves the issue.
I have a pre-code page coded as follows:
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video"></div>
<div class="content"></div>
</div>
</div>
Where linearBg is a gradient background, the back board of the website.
Wrapper is the container for the inner div's, and the rest are content oriented.
So I've already implemented this with styles and all sorts, but the thing is I want to add:
<div class="watermark"></div>
Underneath/behind both the content and video div, sort of like a reverse watermark,
I've tried z-indexing but I'm not an expert. Could you guide me on to do make this possible?
http://jsfiddle.net/nEWCP
All I need is to get the watermark behind both the video and content div's.
Something like this?
http://jsfiddle.net/yXTYM/3/
The trick is:
position: relative on the video and content div
position: absolute on the watermark div and no positioning, so that it starts where the previous element (nav) ended
height: 100% on the watermark so that it spans to the bottom of the wrapper
overflow: hidden on the containing div so that the watermark doesn't extend below it
Let me know if this is what you had in mind.
From your description, I don't think that you would even need a new HTML element. If you want a "reverse watermark" as you've described it, it sounds like you want a different background behind the content and video elements. Something different from the gradient.
Really all you need to do is define a class in your CSS that adds the watermark when you need it.
Here's a basic example. The orange color simulates your watermark behind only the video and content.
.watermark { background: url('/path/to/watermark.png'); }
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video watermark"></div>
<div class="content watermark"></div>
</div>
</div>
http://jsfiddle.net/82saE/
I think I have what you're after - a wrapping element that mirrors the dimensions of linearBg - giving you a gradient background with a repeating image as well.
I am trying to insert an image along with text. when i insert the div, it puts the image on the next line. the div has a background image set to it. here is my code:
Chat Rooms <div class="dot"></div>
the text is aligned by center.
Use float with right or left options
Chat Rooms <div class="dot" style="float: right;"></div>
Browsers always place a line break before and after the element.
http://www.w3schools.com/tags/tag_div.asp
So you have to use the float attribute to get the desired result:
<div class="dot" style="float: left"></div>
Alternatively, you can do:
<p>Chat Rooms <img src="link to your image" alt="altext" /> </p>
you can do this way-
<div><span style="float:left;">chat room</span> <span class="dot"></span>
<div style="clear:both;"></div></div>
If I understand your problem correctly, your <div> goes to a new line because div tags, by default, have a display: block; property which tells them, put simply, to go on their own line and leave anything that is around them above or below themselves.
To correct this issue, you can either apply this bit of CSS to your document:
.dot {
display: inline;
}
Setting the div's display property to inline (and giving it a width and height alongside) should allow it to sit on the same line as the content that is around it. However, I suggest that you instead use an <img> tag, which already presents the correct behavior for cases such as yours.
For reference about the <img> tag, visit this link:
https://developer.mozilla.org/En/HTML/Element/Img
I am creating a web page with 3 columns. The middle column is where all the content goes. The content I want to enter has to be in the format of left aligned image, followed by some text next to the image. And this flows throughout the column with different images and corresponding text. Since my layout is a div based layout, I have put a main div (page_content )for the column. Then the heading (h4) and below the heading I have entered another div. This div in turn contains individual divs that are nested with div (class photo) for image and div (class lat_art) for text. The HTML code and CSS code has been given below. My issue is that the first image and text comes up, but subsequent get lined up vertically below the first text i.e occupies only the 50% of the div and floats right, pushing its corresponding text below it in the same 50% space. Should I specify a height for individual divs, probably the image is bigger than the text. But if I do that won’t my code become static. I want it to be dynamic. Please help.
HTML Code
<div id="page_content">
<h4 class="center_cap">LATEST ARTISTS</h4>
<!--Div for the content begins here-->
<div>
<!--Individual div begins here-->
<div >
<div class="photo">
<img src="Images/guitar.jpg" alt="guitar"/>
</div>
<div class="lat_art">
<span class="artist">ROCK ON</span>
<p>
Good news to all the fans of 'Rock On'. Concerts all around the world.
</p>
</div>
</div>
<!--Individual div ends here-->
<!--Individual div begins here-->
<div >
<div class="photo">
<img src="Images/guitar.jpg" alt="guitar"/>
</div>
<div class="lat_art">
<span class="artist">ROCK ON</span>
<p>
Good news to all the fans of 'Rock On'. Concerts all around the world.
</p>
</div>
</div>
</div>
<!--Div for the content ends here-->
</div>
Code from external Stylesheet
.photo{
width:48%;
float:left;
padding-left:2px;
}
.lat_art{
width:50%;
float:right;
}
It is really hard to follow because you are describing very much every other word is 'div'. Anyhow you described that you have three columns but If I understood correctly it is just the middle one you are asking about.
You want this format:
picture to the left
Right of the picture you have a header
Under the header you have a lot of text that wraps around the picture
Correct?
You problem is that you float, but you don't clear the float. This means that all content under it will be align according to the picture. What you need is to set clear:both after you don't want the content to wrap anymore.
I wroted a little example and tested it. CSS is inline to make the example short and simple.
<div>
<img src="pircture.png" style="float:left;height:400px;width:400px" />
<h4>My header</h4>
<p> A little content</p>
<div style="clear:both"></div>
</div>
You can probably save yourself a lot of time and aggrevation by using the YUI Grids CSS from Yahoo!
I'm not 100% sure that I understand the question. If you actually want what you are calling individual divs to have a picture on the left and text on the right, you can accomplish this by floating both the photo and the lat_art div left. If you actually want the text to be on the right and to flow under the picture if it is longer, do not float the 'lat_art' at all.
There is no need to specify a height on the individual divs, or to clear floats on them as they will fall one below the other by default (divs are blocks).
You are falling victim to divitis here as well - <span class="artist">ROCK ON</span>
could likely be something more meaningful like <h5 class="artist">ROCK ON</h5> or a paragraph or something else styled accordingly.
The img could just as easily be:
<img src="Images/guitar.jpg" alt="guitar" class="photo"/>
rather than:
<div class="photo">
<img src="Images/guitar.jpg" alt="guitar"/>
</div>