I have an image that I am trying to break up so that I can add the text as text instead of all images but I’m strugling to find out how best to do it.
this is the image but should I split it up into 3 images and add the text ontop and how do i add text ontop of an image like that? Or how do I do a simple light hover with the text onto, make the text bigger on hover or something like that?
It’s a sim[ple question but I’ve not had to do it before and so I’m not quite sure.
Try this:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>3 cells with centered + middled text</title>
<!--
http://www.sitepoint.com/community/t/turning-images-into-css/197940
hantaah
-->
<style>
.outer {
width:80%;
position:relative;
margin:0 auto;
}
.outer img {
display:block;
width:100%;
height:auto;
}
/* This absolutely positioned container fits over the above container exactly */
.twrap {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
/* this element is the table that holds table-cells in which the text can be middled and centered */
nav {
display:table;
width:100%;
height:100%; /* 100% height works because this element is inside an absolutely positioned box */
table-layout:fixed; /* by default, creates 3 cells of equal width regardless of content */
}
/* default anchor styles. the achor element is set to display:table-cell so the entire cell area is clickable */
a {
display:table-cell;
vertical-align:middle; /* vertically middles the text */
text-align:center; /* horizontally centers the text */
color:#fff;
font-size:1.25em;
letter-spacing:3px;
text-transform:uppercase;
outline:1px dotted blue; /* TEST Outline. To Be DELETED */
}
/* a container around the text within which to frame the pale white lines above and below the text */
span {
display:inline-block;
outline:1px dotted yellow; /* TEST Outline. To Be DELETED */
}
/* the pale white lines */
span:before,
span:after {
content:"";
display:block;
height:2px;
width:60%;
margin:0 auto;
background:rgba(255,255,255,.75);
}
span:after {
width:auto;
min-width:100%;
margin:.125em -1em 0;
}
</style>
</head>
<body>
<div class="outer">
<img src="images/jimage.png" alt="" width="1429" height="428">
<div class="twrap">
<nav>
<a href="#"><span>Journal</span></a>
<a href="#"><span>About Us</span></a>
<a href="#"><span>Delivery</span></a>
</nav>
</div>
</div>
</body>
</html>
I see, so you absolutely position it and then have them as a nav to align them.
Great stuff thanks @ronpat
@ronpat now I know you’re very good with responsiveness, how should I set the size? say the image is 1900px wide should I set it at that or smaller?
The actual dimensions of the image should be shown in the img attributes, width=“1900” height=“nnn”.
The CSS styles, img {width:100%; height:auto;} will cause the image to display within the confines of its parent container which of course depends on the width of the viewport, so you should be all set already.
You DO realize that .outer {width:80%} was just for demonstration purposes. You should pick the percent width that you need (if it is less than that of the parent container) or not use it. In other words, you should not assign a width of 100% to .outer… it’s a block object and will extend to the available width of its parent container.
Ok got it.
I put the correct width in, but the text on the right and the left are not possitioned right, how do I control that?
I cannot tell what you are doing. You will have to supply your code and the real image and text (assuming that it’s different from the example) or a link to your site.
I found a link to your site in another thread.
Why did you add <br> tags between the <a> anchors? The anchors are table-cells (as I explained in my example). NOTHING can go between them. Delete the <br> tags and the arrangement will work.
Creative code.
If you want to experiment with “creative code”, then copy my (or anyone’s) working page to a file (or create a simple working page of your own) and open it in your browser and see what happens when you add your break tags or whatever you wish to try. In other words, experiment in a controlled environment first… a simple working page.
Yes, please.
br tags have a purpose, but they should not be used to Style any more than h tags should be used to get large bold etc. .
mark-up != CSS
Ok great advice. I’m going to go ahead an experiment with some variations see how it goes. Thamk you very much, you’re always a great source!
ok how exactly does the table thing work? For example what should I do If I don’t want the list to display horizontally but vertically? i tried to play with the table but not successfully.
Like one block 615x519 and the text is
Journal ( with a border above and below )
View Now
See here: http://www.williamandcooper.com
You didn’t explain in your original post that you wanted the objects to stack vertically at narrow widths, which would necessarily mean that they image needs to be divided into three parts.
Throw away the code that I gave you. That was wasted time and effort.
I have to go out now. Perhaps someone else will pick this up and do it for you.
oh no not a waste of time at all, I’m learning and trying different things otherwise I won’t learn.
Not sure if this is what you are asking but based on the drawing in post one and based on Rons work you could apply the images as backgrounds to each cell and then set then to display:block for smaller screens.
I would approach it something like this.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>3 cells with centered + middled text</title>
<!--
http://www.sitepoint.com/community/t/turning-images-into-css/197940
hantaah
-->
<style>
.outer {
width:80%;
position:relative;
margin:0 auto;
}
.outer img {
display:block;
width:100%;
height:auto;
}
/* this element is the table that holds table-cells in which the text can be middled and centered */
nav {
display:table;
width:100%;
height:100%; /* 100% height works because this element is inside an absolutely positioned box */
table-layout:fixed; /* by default, creates 3 cells of equal width regardless of content */
border-spacing:10px;
}
.twrap a {
display:table;
padding:3px 10px;
margin:auto;
color:#fff;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
text-decoration:none;
}
.twrap a + a {
margin-top:50px;
}
.tc {
display:table-cell;
vertical-align:middle; /* vertically middles the text */
text-align:center; /* horizontally centers the text */
color:#fff;
font-size:1.25em;
letter-spacing:3px;
text-transform:uppercase;
height:340px;
background:#666 url(http://www.pmob.co.uk/temp/images/zimg1.jpg) no-repeat 0 0;
background-size:cover;
}
.pic1 {background-image:url(http://www.pmob.co.uk/temp/images/zimg1.jpg)}
.pic2 {background-image:url(http://www.pmob.co.uk/temp/images/zimg2.jpg)}
.pic3 {background-image:url(http://www.pmob.co.uk/temp/images/zimg3.jpg)}
@media screen and (max-width:800px) {
.tc{display:block;display:block;height:auto;padding:1px;margin:0 0 10px;}
.twrap a{margin:50px auto}
}
</style>
</head>
<body>
<div class="outer">
<div class="twrap">
<nav>
<div class="tc pic1"><a href="#"><span>Journal</span></a> <a href="#"><span>View Now</span></a></div>
<div class="tc pic2"><a href="#"><span>Journal</span></a> <a href="#"><span>View Now</span></a></div>
<div class="tc pic3"><a href="#"><span>Journal</span></a> <a href="#"><span>View Now</span></a></div>
</nav>
</div>
</div>
</body>
</html>
@PaulOB I like it and love the images.
I’m trying to understand the tables though.
Why would we use tables and not divs?
You’re not using tables. You’re using a layout technique similar to tables.
The table behavior is extremely nice and useful. The HTML tables though aren’t semantic for most situations though. So taht’s why the CSS version of tables is nice since it removes the semantics issue of things.
Yes I like it.
The only problem I’m having is finding how to get it all in one cell
I changes the sizes / pictures etc but I see it’s the display: table-cell, that’s cutting of the image. If I remove the table-cell it shows image but I loose the text possitioning.
What’s the correct thing to do here?
You haven’t added the display:table to the nav.
.twrap nav {
border-spacing: 10px;
display: table;
height: 100%;
table-layout: fixed;
width: 100%;
}
Ah ok, so even with one cell I can use the fixed table display?
I can’t quite work out how to control the borders. .
1 - How do I make the top one bigger and the bottom one smaller? I’ve had a look around but it seems that can’t be done?
like here:
I’m back briefly.
EXACTLY what do you want the borders to look like when horizontal and when columnar?
And how does that bowtie fit in (at the last minute)?
