How to move buttons to the middle of the 1st text column? - html

I'd like to move facebook and twitter buttons and make them more visible on my temporary site:
gaberivers.com
Now they are below the footer and no one can see them. I'd like to move it next to the 1st text column. Outside of that text box...that way people would see it much better.
Demo:
http://jsfiddle.net/ZWq8g/

Okay, so if I understand correctly, you're trying to move your Facebook and Twitter images to the left of your columns. So lets make a new column, called columnSocial and in the CSS:
#columnSocial {
line-height:120px;
background-color:#394046;/*background: url(black.jpg) no-repeat 0 0;*/
width:64px;
height:250px;
float:left;
position:relative;}
I copied most of that from your existing columns -- be sure to edit one of the other columns width down to accommodate (your column container only allows 900px, so you need to shave off 36px somewhere else) this new column. The line-height attribute is useful to get some vertical spacing, since we can't use vertical-align on div elements.
In your HTML, you will need to add:
<div id="columnSocial">
...
</div>
After your container begins and before column1 begins. Feel free to toggle any of the numbers as you like, but that should get something similar to what you were asking for.
As a general design note, having good structure (like a container for your columns) takes a lot of the work out of changes like this -- it ended up being trivial to move the images, since all we had to do was make a new column.

Here is what you need:-
your footer should be like
<div id="footer" style="text-align: center;">
<p>© 2012 Angloesfera. Todos los derechos reservados.</p>
<div id="snetworks">
<a class="show" href="https://www.facebook.com/pages/Academ%C3%ADa-AngloEsfera/190496871000029"> <!--a http-vel kell a link...vagy kulonben az en oldalamon belul fogja keresni a linket-->
<img width="36" height="36" rel="" title="" alt="facebook" src="images/facebook.png"></a>
<a class="show" href="https://twitter.com/GoE_Shop">
<img width="36" height="36" rel="" title="" alt="facebook" src="images/twitter.png"></a>
</div>
</div>
and css for #snetworks
#snetworks {
left: 100px;
position: absolute;
top: 2px;
}

Related

How to add another image to the right of an image in column with HTML

I want to add an image (img src="~/img/logo2.jpg) next to below image in a different column.
<header class="header overlay"
id="core_view_Header_0"
style="display: block;">
<!-- visible bar -->
<div class="col-md-12">
<table style="width: 100%">
<table style="display: <inline-block>;">
<table style="float: left;">
<tr>
<td>
<a class="logo" href="#" target="" tabindex="12">
<img src="~/img/logo1.png">
</a>
</td>
To fix this problem, you could put the image in its own paragraph with nothing to its left or right (except maybe another image):
The other option is to tell the web browser to push the graphic all the way to the left or right and make the text fill in NEXT to it, as the cat graphic to the right is doing here.
This is the code you need to align an image to the right:
**<img src="http://www.example.com/graphic.jpg" style="float: right;** margin-left: 5px; margin-bottom: 5px;"**>**
(The parts without ** are optional.)
What's all that gobbledygook mean? Let's break it down.
<img ... > is the placeholder for an image.
src="..." tells the web browser where the image's data is stored or uploaded (its location, its URL).
style="..." style tells the web browser to expect a special set of codes called CSS (never mind what that is) which explain how you want the image to be displayed: its size, its layout, whether it has a border, and so on. Styles can also be added to set text colors, sizes and fonts. If HTML is the main chassis of the car, styles tells the web browser about the car's paint job and whether it comes equipped with bluetooth or cup holders.
float: right; means push the image as far to the right as it will go. If there's already something there (the sidebar, another floated image), then this image will squeeze in just to the left of that. This is how you tile images side by side. You can also float: left; to make images behave just like the letters of this paragraph: they'll start at the left-hand margin, then tile from left to right across the column until they run out of room, then they flow onto the next line.
margin-left and margin-bottom are optional. They add a little bit of an empty border (px means "pixels") to the left and under the image so things aren't mashed right up against it. If you have floated an image to the left, you should probably include a margin-right to add padding there.
VERY IMPORTANT: TO TURN OFF "FLOAT", use the following command:
<p style="clear: both;">
Why would you want to do that? Well, if an image is floated all the way to the right or left, whatever you write after that will attempt to fill in around it. For example, the text above filled in around that cat picture.
If you don't want the following paragraph to fill in next to the floated object, then you need to use the clear command to draw an invisible horizontal line across the page that says "everything after this has to start on a new paragraph, below the floated image(s)."
Add another img tag within the same <td></td>.
Try adding some external CSS styles to your rather than inline-CSS (Looks better and clear). Also make sure to give style for your image size.
If you would like your imges to be vertical aligned, try: display:flex and flex-flow:column
See snippet below:
header {
display: block;
}
table {
width: 100%;
display: inline-block;
float: left;
}
td {
display: flex;
flex-flow: column;
}
<header class="header overlay" id="core_view_Header_0">
<!-- visible bar -->
<div class="col-md-12">
<table>
<tr>
<td>
<a class="logo" href="#" target="" tabindex="12">
<img src="~/img/logo1.png">
</a>
<a class="second-img" href="#" target="" tabindex="12">
<img src="~/img/logo2.png">
</a>
</td>
</tr>
</table>
</div>
</header>

Adding gaps in between sprite image

I have this image: http://fs5.directupload.net/images/160602/xfrddbfa.png
and I would like to add it into my website. But, I'd also like to add a small gap in between each and every flag.
Is that somehow possible? Here is the HTML where I'd like to place it as a pseudo element before the class "headline":
<div class="bottom_dual">
<a title="title" href="#">
<span class="headline">Lorem ipsum</span>
</a>
<span class="caption">Lorem ipsum.</span>
<span class="more">
<a class="teaser_link" href="#">more</a>
</span>
</div>
Thanks for your help!
Image editing isout of the scope of HTML/CSS and I would really suggest just making separate images using image editing software for each flag if this is what you intend to do, but I will provide an ugly work around if you truly wish to do this.
Also, I'm not sure you're using pseudo element correctly.
Place the image tag 5 times - 1 for each flag.
<img id="flag1" src="example.com" />
<img id="flag2" src="example.com" />
<img id="flag3" src="example.com" />
<img id="flag4" src="example.com" />
<img id="flag5" src="example.com" />
Use CSS to crop each image to each flag.
#flag1{
position: absolute;
clip:(rect, 0px, 30px, 20px, 0px); // Position of the flag
}
etc..
I hate myself for even giving that answer. Seriously, just edit the image.
The best way to solve this problem is to use photoshop..
Cut your 5 flags out from that one single image
Then move them (space them )...
Links which You could refer to:
https://www.youtube.com/watch?v=6aMbMk9IGoM
https://www.youtube.com/watch?v=VTHudF4fo2I
The above links explain you on how to cut (crop ) an image and to move them..
Hope this helps you..
use this style :
.headline:before{
padding-left:30px;
background:url(http://fs5.directupload.net/images/160602/xfrddbfa.png) no-repeat -66px 0px;
content:" ";
}

Image-button with css

I would like to learn how to do 'nice buttons' where the picture is added with css. For instance suppose that I want something like the following
(that is, the picture and the text are together and the whole picture is the link. You may see http://www.geogebra.org/team for something with the same spirit). The question is to do so as follows
HTML
<a class="modern_art" href="...">Modern Art</a>
CSS
.modern_art{
background-image: url(/pictures/modern_art.jpg)
/* or something similar */
/* more instructions */
}
By now, the best I have done is to place the picture and afterwards the name with ::before, but this is not enough to get a nice button. What would you recommend me?
try this one.
In this fiddle you can find something similar to what you ask. Just make an anchor tag as a thumbnail and then put your content inside it. Something like this one:
<a href="#" class="thumbnail">
<figure>
<img src="http://i.stack.imgur.com/g1Ce8.png" alt="bg" />
<figcaption>
<div>
Caption here
</div>
</figcaption>
</figure>
</a>
Then I'm using positioning and CSS3 transitions to hide and show the caption.
UPDATE
I have updated the code to transition back to the normal state, rather than instantly getting back to it. Fiddle here
Found this, might help you out.
https://css-tricks.com/design-considerations-text-images/
Well, you're very close with your CSS. All it needs is an explicit width and height, and some padding.
.modern_art{
display:inline-block;
width: 252px; height:20px;
background: #a9a9a9 url(http://i.stack.imgur.com/s2ZG0.png) no-repeat center 40px;
padding: 318px 60px 30px;
text-align:center; /* oh well, and some styling to make the text look similar to the example */
color:black;
text-decoration:none;
font-size:20px;
letter-spacing:.1em;
}
<a class="modern_art" href="...">Modern Art</a>

Twitter Bootstrap Mediagrid/Thumbnails & empty space

I'm trying to make a movie manager to get me back working with rails again. I'm reading the movies from a database, and trying to present their covers in a responsive grid.
I'm new to using Twitter Bootstrap, and having some weird issues with weird spacing. All my images are the same height and width, so that shouldn't be an issue.
To see the issue, go here: http://jsfiddle.net/32AcT/ (Due to the responsive grid, you may have to make the view window bigger, so they're not all in a single column.) I'm simply doing:
<ul class="thumbnails">
<li>
<a href="#">
<div class="caption">2 Fast 2 Furious</div>
<img alt="2 Fast 2 Furious" class="thumbnail" height="111" src="http://cf2.imgobject.com/t/p/w500/4rDV8TgaILHRfX1IRgpysjkD9A0.jpg" width="74" />
</a>
</li>
...
</ul>
Here is an example of what it looks like (weird spacing highlighted with pink box):
I understand why the widths are off, due to the caption lengths being longer than the image's width (although I'd like to fix that somehow too). Why is this happening, and is there any good method to prevent it?
try this one i think it will solve your prblem
http://jsfiddle.net/32AcT/1/
.thumbnails > li { width:100px; }
.thumbnails .caption{ overflow :hidden; text-overflow:ellipsis; white-space:nowrap; }
.thumbnails img{ height:111px; width:74px}
main issue with bootstrap-combined.min.css line no 23 height:auto;
img {
max-width: 100%;
width: auto 9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
If I get the problem right, the caption is causing it. What would you say to a solution like this: http://jsfiddle.net/32AcT/4/
The difference from your solution is that the Caption is inside the thumbnail (seen in code 1) div and thus is limited in the width (seen in code 2). It could be that you have to play a round with the height of the div but I guess that would be the "best" solution for this.
Code 1:
<li class="span4">
<div class="thumbnail">
<img src="http://cf2.imgobject.com/t/p/w500/1ZjDmPKMUtout8hR77qmK1llgls.jpg">
<div class="caption">
<h3>Along Came a Spider</h3>
<p>Action Action</p>
</div>
</div>
</li>
Code 2:
.thumbnail{
height:650px!important;
}

L-shaped border using HTML and CSS

I need to populate data in the white space of the box shown in the picture. The Red portion will be an image,
But still data has to be shown continuously in the white space. How can i achieve this using HTML and CSS ?
Updated with code :
<div id="Content" runat="server">
<img id="ad" src="images/sandbox.gif"
style="float:right; height: 200px; width: 150px;" alt="{alt}" />
</div>
#Anuya take a look at this http://jsfiddle.net/TfXNf/
Its better if you define a class in you css style in order to toggle all pictures that needs to have the same layout so
HTML
<img src="http://link.to/image.jpg" class="className" alt="Image"/>
CSS
.className{
float: right;
margin-right:2px; /*change these based on your layout*/
margin-bottom: 2px; /*change these based on your layout*/
}
Margins are needed to push the text a little bit away from the picture so you can create the illusion of the border
Just put a float onto your image:
<img src="{imageLocation}" alt="{alt}" style="float:right;" />
Ideally you would want to keep the styling separate from the content but this will give you the idea. Hope that helps