I am trying to display some text and an image next to it in one row.
I am using Tailwind Css as much as possible and I would like to add and offset of 1/8 of the width so that there is some margin between the text and the image
<div class="grid section">
<div class="w-full">
<div class="w-5/8">
<p> Whatever text ...</p>
</div>
<div class="w-2/8">
<img src="whatever.png"/>
</div>
</div>
</div>
What would be the name of the offset class in Tailwind to add a left offset of w-1/8 to the img div wrapper, if there is one?
Thank you in advance guys!
You almost answered your own question:
... so that there is some margin between the text and the image
You need to add margin to the image. In this case you would add mt-20 (or possibly a different size) to image's div, which means margin top. Other margin classes exist and they are well documented.
Live example here.
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?
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 position some text within a div which contains a background image. How do I go about with this. The site has to be responsive. Something like the right section on this site. http://loveandluxesf.com/
So this is the following code.
<div class="row">
<div class="six columns" id="signup-section">
<div id="bg-img">
<div class="offset-by-two">
<h2>Random text which should go in here</h2>
<form>
<input type="email">
<span class="button">Register</span>
</form>
</div>
</div>
</div>
bg-img contains a background image which is centered. I want the text and the form to fit exactly inside the image. And this should work across multiple resolutions.
If you relatively position your containing div, then absolutely position the text element (h1), you can use top left right bottom positioning to put the text where you like relative to the containing div. If you need more specifics just ask.
try to set style="float:left;"
I have the following HTML:
<div class="wrapper">
<div class="label">
foor bar baz
</div>
<img src="...">
</div>
Yes, I know that div with class "label" should be a label.
The simple question is: how do I ensure that the label is always exactly as wide as the picture and never wider?
The width of the picture and the content of the label are unknown. When the content of the label is longer than the width of the image, it should break to the next line.
Right now, I have "display: inline-block" for the wrapper and everything looks fine when the text fits in the label. When the text is longer, it doesn't break, though, but makes the label longer than the image.
I guess there's a simple solution for this but I'm just not seeing it.
Any help appreciated!
an element can't be larger than it's parent so if you put the img tag inside the div it will never be larger.
<div class="wrapper">
<div class="label">
foor bar baz
<img src="...">
</div>
</div>
Give both elements a width:50%; (or width:49%;, just to be safe) attribute, that should do the trick.
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>