What is the best way to create a responsive text box like this?

Hi guys,

What is the best way to create the text book responsive?

This is the website that I'm referring to - http://www.olivegarden.com/home

I've tried the following -

1. Insert Span within a paragraph and styled it.

However, the problem is that it's pretty difficult to position it to fit exactly at the bottom of the image. And even more difficult to make it mobile responsive.

HTML

<div class="main-box-row">
<div class="main-box-left"><a href="outlets.com"><img draggable="false" src="/img/6.jpg" alt="photo" />
<p><span>OUTLETS</span></p></a>

</div><div class="main-box-right"><a href="pricing.com"><img draggable="false" src="/img/6.jpg" alt="photo" />
<p><span>PRICING</span></p></a></div></div>

CSS
.main-box-left p {
position: absolute;
width: 100%;
}

.main-box-right p {
position: absolute;
width: 100%;
}

p span{
position: absolute;
z-index: 100;
line-height: 30px;
background: #FF9656;
color: white;
}

 

As I said in your other thread, this is why such art faygelah BS really has no business on a website in the first damned place. It's what I like to call "Not viable for web deployment" in concept alone, and reeks of the type of thing some ignorant PSD jockey would vomit up, and refuse to accept that their artsy-fartsy "gee ain't it neat" BULL has nothing to do with sane and rational web design.

That said, you are using WAY too much APO to try and implement it.... and really that looks like something I'd gracefully degrade to being a LIST since it seems to be a list of choices. Also I very much doubt that a single word is a grammatical paragraph, so why the devil are you putting a paragraph in there?!?

If I were to implement that (which I wouldn't) the markup would likely read:

<div id="discoverChoices">
	<h2>Discover the Ketchup passed off as Sauce</h2>
	<ul>
		<li>
			<a href="/ourStory">
				<img src="images/ourStory.jpg" alt="Some people eating" />
				<span>Our Story</span>
			</a>
		</li><li>
			<a href="/cullinary">
				<img src="images/cullinary.jpg" alt="frozen chicken patties with burnt vegetables" />
				<span>Cullinary Innovation</span>
			</a>
		</li><li>
			<a href="/wines">
				<img src="images/wines.jpg" alt="box wine in fancy glasses" />
				<span>Our Wines</span>
			</a>
		</li><li>
			<a href="Nutrition">
				<img src="images/nutrition.jpg" alt="Artichokes to distract you from how we drown everything in foul smelling oils" />
				<span>Nutrition</span>
			</a>
		</li>
	</ul>
<!-- #discoverChoices --></div>

Code (markup):

The CSS (for the list) would then go something like this:

#discoverChoices ul {
	list-style:none; /* kill bullets */
	overflow:hidden; /* wrap floats */
	zoom:1; /* trip haslayout, wrap floats legacy IE */
}

#discoverChoices li {
	position:relative; /* so child IMG positions based off this */
	float:left;
	width:50%;
	overflow:hidden; /* in case images are too wide */
	text-align:center;
}

#discoverChoices ul img {
	display:block; /* prevents all sorts of oddball alignment issues */
}

#discoverChoices ul span {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	padding:0.25em 0;
	color:#654;
	background:#EEE; /* for legacy browsers that don't know RGBA */
	background:rgba(255,255,255,0.9);
}

Code (markup):

That SHOULD do the trick... NOT that I would <jericho>EVARRRR, and I mean EVARRR</jericho> deploy something like that in a web design.

 

Wow you make it so very clear to understand. Thanks for your comments within the css codes too, makes it REALLY easy to understand.

I just have two questions though.

1. If I were to change the height of the image, I should be doing it under #discoverChoice li, right?
2. When I reduce my window size, the image isn't responsive. Is there anyway I can do it? I think the manual way is to create different dimensions of the image and set a media query at multiple sizes with max-width 1000px, 700px, 500px,etc etc. Is that correct?

 

I look at a lot of books and tutorials out there and just shake my head in digust -- it's like people TRY to make this stuff hard on purpose.

The images should be uniform size for this, the size of the images being as set to your outermost wrapper -- making this a very fragile fixed size construct and part of why I wouldn't put this crap on a website in the first place.

That's because it's images. Images are inherently NOT responsive. You could let the browser resize the image by setting width:100%; and height:auto on IMG in the CSS, but that's

I would first change the number of columns to one or three based on width without resizing the images, with a max-width of 100% and height:auto on said images. This way they will adjust to the available space without the browser resizing them on larger displays, and have the browser shrink them when a single column that's too narrow for the display. The shrinking may or may not look like ass (cottage cheese please don't wear that thong ass, not hot playboy airbrushed ass) depending on the images or the device -- THOUGH said images -- at least on thier site -- are too damned big to have any business on the homepage of a website which is why their site is inaccessible halfwit bull that I wouldn't be trying to emulate any aspect of.

It's very pretty, but as a VISITOR to websites it's useless space-wasting crap that gets in the way of me actually doing whatever it is I went to that site to do. I really laugh how most "designers" these days and a lot of developers treat visitors to websites like they were alien lizard monsters... all this crap being flash without substance, and on the whole a waste of bandwidth and time. Problem is most "sophisticated Internet investors" don't know enough about functionality and usability and are wowed by nothing more than flashy artsy fartsy bull -- and it most always ends up a miserable useless failure of a website... Olive Garden's site being a poster child for such useless bloated slow loading painful to use bounce-generating CRAP!

Again, it's artsy fartsy bull that just makes their website user hostile. Type of thing that when a "designer" comes in the door with the appropriate response is a good swift kick to the junk. ... and yes, I made air quotes Dr. Evil style... "Laser"

 

Thanks for your very clear reply again... I'm building this site to learn the fundamentals. I've used bootstrap but it's a lazy man framework that doesn't help me understand anything about css other than its grid system.

Ah I see... I'm seeing how it's done more clearly now. I have had problems grasping the concept of positioning, floats, etc.

Are there resources you would recommend at this juncture?