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;"
Related
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.
I am using bootstrap. I have two columns (col-lg-6) inside container. Left side has regular text. Right side column has an image. According to design requirement, image that is inside right side column should stretch and touch the right side of screen and should not be contained inside the column. I cant use image as background. Image should be there in column so that it takes proper height inside column but it should stretch to the end of screen (viewport) to the right. How can it be achieved?
<div class="container">
<div class="row">
<div class="col-lg-6">
...text
</div>
<div class="col-lg-6">
<img>
</div>
</div>
</div>
I want to frame a div surrounding divs having higher z-index.
(The framed div will contain a slideshow with elements, animated and with wierd margins, and the masking divs are supposed to hide the the texts being animated from the side.)
I'm thinking something like:
<div class="fullwith mask"></div>
<div class="mask leftpadding"></div>
<div id="slideshow" style="width:640px;height:405px;"></div>
<div class="mask rightpadding"></div>
<div class="fullwith mask"></div>
I've created this fiddle that by no means work, please fill the gap or tell me if I'm off the mark here.
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>