Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to create a blog page full of images that have text appear over them when hovered over. I'm using blogger.com.
I'd like to have it appear like the Tiger (Image Hover Overlay) in this post: http://www.corelangs.com/css/box/hover.html
or the Waterfall (Displaying Text) in this post: http://www.gadgetronicx.com/p/blog-page_9.html
I'm not very good with html but is there a way I don't have to repeat
the same code for every image?
How can I center the image on the page?
How can I get two images on the same line?
I'm not very good with html but is there a way I don't have to repeat the same code for every image?
How can I center the image on the page?
How can I get two images on the same line?
For simple answers for the above questions:
Yes. No need to write for every image. You can use like below. Assume all your images comes under the div with id called "divmainid".
#divmainid img
{
#image styles are goes here.
}
You can use "text-align:center" or "margin:0px auto" for the div area.
Many ways you can do. Simple way is assign "display:inline-block" for the div around your images.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am converting an Illustrator design into HTML and CSS using Bootstrap framework. I am stuck on the part of design shown below:
I want the text surrounded by image as shown above.I can have these images separately and also one single image as I can export these from Illustrator according to the requirements. I can also export SVG image if required.What would be the best approach to achieve this task.
Using CSS, you can display the image as a background-image of a <div> and tailor the positioning of the heading and title within the same <div>.
Markup:
<div>
<h2>We Only Work With the Best</h2>
<p>We screen our coders' social profiles like LinkedIn, GitHub and StackOverflow. After that, we only expose them to smaller tasks until they build up their reputation.</p>
</div>
Styles:
div {
text-align: center;
background-image: url('/work-with-the-best.png') no-repeat;
}
div h2 {
margin-top: 200px;
}
Maybe position the text with relative and add a z-index to have it above the image.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to create a html page (blog post style) with Responsive table with images on left and Text on right . I want a blue background. and text will have links to the post page. I want to have the css inside the html head.
Any ideas how I can achieve it?
I wanna create something like this
http://www.bucaillelegacy.com/light/blog.html
Just place the image at the beginning of the text, align it to the left and the text after it will wrap around the image, give it a slight margin-right to increase the space between image and text, resulting in:
<img src="image.png" align="left" style="margin-right:10px;">Text here.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'm not very expert in html, but i would like to know where it is possible to understand if an item is close to another element. For instance a div to another div or if a table is adjacent to an image or an another table.
With jQuery you can use closest to find this out. http://api.jquery.com/closest/
Add borders to the elements you want like so:
<p style="border: 1px solid black;">A paragraph</p>
Firefox has a neat trick to check elements.
Go to your page > Right click on it > Inspect element (a layout will appear at the bottom of the page). Top right of this layout in the gray area you have a 3d cube (it's the second item). Click on it and it will give you a 3d view of your page.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have yet another alignment issue that needs to be solved. I'm no CSS expert, so I need the experts' help. I have tried playing around in Firebug but I couldn't figure it out.
Site where this issue is present: http://bit.ly/13KG6dz
(Using bit.ly because IP addresses are not allowed - don't worry its not a virus)
Note that I CAN change any CSS file being called in this page, but I CANNOT change the HTML code of the page itself, because the HTML code is server generated.
The issue is this:
Shown in red in the picture below:
Anyone know how to fix this ?
You should float it like the rest of fields in the group
#option-231{
float:left;
}
label is basically block element.
use any css display property for desired result.
like
.classNameOfLabel {
display: inline
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
1) I have a header JPEG image that spans a width of 996px that has a square logo to the left of this header.
My question is that I would like to use this square logo section only and place a href tag so that when the user hover's over this section only, the cursor changes to a hand pointer and the user will be redirected back to the landing page.
2) On this same image, I would also like to place two buttons with rollover effects, so when the user hovers over the buttons, the rollover effect takes control and then would like these buttons to also point to a href url.
If you're using an <img> tag to display the image, you can use a simple image map to make only a section of the image a link.
As for number 2, I'm not clear on what effect you're trying to achieve.