As I have already stated in the title, I would like to know, if it is possible to make a text container that is made up of multiple rectangles in html and css.
For example, if I make a div and put the text in there, it will always be a single rectangle, but I want mine to be made up of two rectangles, through which the text can freely flow.
Here is an image of what I mean:
The darker part is the one, where I want text to be. It is supposed to be like a card with a title, a description and a call to action button, but I want the description to go over and then beside the button. I created this prototype with two separate rectangles, and I want to know if this is possible in html and css, and if it will count as one single container, so that I dont have to split the text into two separate parts.
Thanks in advance!
Related
I'm trying to figure out a way to have two href's attached to a single image, sort of like an old school image map, but just using CSS. Is this even possible?
Currently the HTML looks like this. But I'm being ask to have two URL's attached based on where the user is hovering their mouse.
<div id="logo-wide">
<img src="BIG-Logo_FINAL.png" alt="url-name">
</div>
Philip
You'll have to either
Use an image map
Slice the image in half and wrap each half in a link
Use z-index to hover two absolutely positioned links over the images (this would be really hackish and ugly)
Option 1 or 2 is best.
Here's the case: I have a series of thumbnails in a page, and I would like to display several keywords over each image when the user hovers with the cursor. Each of those keywords are anchor tags that point to a search query. And each thumbnail (the image) should also be clickable (through the empty spaces that the keywords leave) and point to a specific page.
I have everything already coded, I'm just missing a way to display the keyword anchors over the image anchors. I already tried with an onclick="window.location.href=..." but when the user clicks the keyword, the onclick is also triggered (for instance: if I ctrl+click on a keyword, i get the keyword search on a different window, but the main window content changes as well).
Any help will be much appreciated. Thanks!
This is quite common and can definitely be done with plain HTML and CSS. You can also do it with JavaScript, but I prefer to avoid doing so if possible.
This example is perfectly valid HTML/CSS and should have no weird browser rendering issues (even as far back as IE 6).
http://jsfiddle.net/2JD76/1/
Basically you have a containing element, in this case a div, which has your linked thumbnail and linked keywords. They're hidden by default and only shown when the containing div is hovered.
The linked thumbnail is absolutely positioned so that it's taken out of the page flow which then allows the linked keywords to appear on top. I then use z-indexes to make sure that the keywords are always on a layer that is higher than that of the linked thumbnail.
You can not. It is illegal html.
Attach a click handler that changes the current location instead of the "greater ".
I was going to answer with a long reply but, well check out my Jsfiddle here. I was trying to solve something before and well...check it out.
http://jsfiddle.net/somdow/KSt6a/
If you look at the code, its doing exactly what you are describing.
On my Jsfiddle, theres a div box with space for an image(this is wher YOUR image would go), The image is on the code but not on the jsfiddle so youll see the alt tag....Anyways so, on mouse-over, it brings up another div with text dynamically created inside of it.
All you have to do is replace the image content with your own image, then Insert the links/keywords links you want into this line
.prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');
and stick your words in between the <div class="portSecInner"> **YOUR WORDS HERE** </div> line
And change the CSS to fit your needs.
oh AND ps, DELETE this line (below) which is the one that dynamically appends text inside of "portSecInner", since your going to insert your own words, then you dont need this line.
$(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr("alt") + "</h3>");
I'm currently developing out a blog page with a 3 X 3 grid layout for content to fall into the different boxes (see attached example).
http://imageshack.us/photo/my-images/337/cssex.jpg/
The content blocks in the lighter gray are meant to be stationary, so any updated, recently added, etc. content will not affect these boxes, only the black ones. I'm trying to figure out the best approach with keeping the gray boxes stationary, but allowing the black boxes to be populated dynamically (WordPress blog entries) and floating naturally through the layout.
As of now, I'm thinking that each individual black box will query the recent post that aligns to it. So, the first black box would query the most recent post, the second black box would query the second recent post and so on.
A big order!
Here is the general idea to help get you going:
You need to make those blocks a <div> or <section> with an ID tag like this:
<section id=brief1>
(BTW, you can also use a "table" & merge cells to get that layout, just ensure you use an ID)
Then you need find a script to update the innerHTML using straight JavaScript, or a JS library like jQuery, MooTools, etc. This will allow you to inject text &/or an image inside those boxes. Example search: http://duckduckgo.com/?q=javascript+update+innerHTML+div
Once you have 1 spot updated with text, it is time to edit that script. Make an array of our ID tags, then loop though all of them to insert new content one at a time.
Good luck! If I see something pre-rolled on my travels, I'll update this thread.
I have sliced an image making an HTML file with tables. I centered it with tag and then I put the background image which repeats which I want it to repeat. and now I want to put some text on the field which I had specified for putting text.( I want to put text on an image which is there in table format) I don't know how to put text on that text field(table)with image. Please answer in detail as much as possible as I am new to the technology.
Thanks for reading and replying.
Are you looking to have your text be embedded in the image or keep it as html text that can be selected and spidered?
If it's the latter, I've always exported my sliced up image and html then opened it up in dreamweaver. I then go to the section I want text to appear and I set the image occupying the space as the background image for that table cell (<td background="/path/to/myslice_1.jpg">some text</td>). You can then put whatever you like inside the cell such as text. You just have to keep in mind the size and amount of text you want to fill the space as your slicing up the image, because anything that takes up more space than you've allowed will break your slices apart.
Hope that helps.
You might want to add some STYLE to your table cell(s), because html works with css just fine.
AsWuLongTi mentioned above, you can write:
<td>text</td>
and then use css option 'style' on it:
<td style ="background: red;">text</td>
then in place of 'red' set path to your image:
<td style="background-image: url("/path/to/myslice.jpg");">text</td>
Is there any possibility of me hyperlinking a specific part in a html page.
Suppose i have a big image, When i click on the left side i would like to hyperlink it to a partcular image and when i click in the middle to another and on the right. I want to do this without cropping the image into 3 parts.
any idea how this can be done ?
The easiest way would be to use an Image Map.
Yea, it's pretty easy, so it shouldn't take you long. The idea is to create an image map over the image. This way you can specify various coordinates in the map which reflect the coordinates on the image and choose what parts link where. Here are some links to help you out.
Image map: http://www.w3schools.com/tags/tag_map.asp
I've never tried this way: http://www.ehow.com/how_4499356_make-image-map-using-photoshop.html
I usually do it through dreamweaver: http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7c13a.html
You can do it by hand the way the first link shows, and get the coordinates in photoshop
If you have it in a background image in your css (I'm assuming you have your content in a div) put your content in a instead and wrap the span in an tag Example: <span>CONTENT</span>
You can do this using anchor tags: First cut the image into 3 parts, then put all the parts next to each other on the page (Use <nobr> tags around them to ensure they don't get out of line). Next put <a name='spot-on-page'></a> Where you want it it jump to, then put <a href='#spot-on-page'><img src='picture1'></a> As the link to that spot. Then repeat the second part with the other 2 images.