I don't know enough about positioning yet to understand why I can't get some text to float up next to a thumbnail. I'm using a wordpress plugin to create a thumbnail of an embedded youtube video, and then I want to have the text sit inline with the thumbnail, to the right.
I have created some divs and used CSS to try and position the elements how I'd like them, but no luck. I think some CSS from the plugin elements is preventing it from working perhaps? Just don't know how to find the offending property to override it.
You can see a test page here.
Thanks for taking a look!
Jon
Try this css
code {
float: left;
margin: 0 30px 0 0;
}
Have you tried floating your thumbnail to left:
thumbnail{
float: left;
margin-right: 15px; // to make things look better
}
Related
I am making a new version of the Textastic website for fun as something to put to my portfolio. I'm having an issue with getting the image to center. On the image I have the following styles:
.download {
display: block;
margin: 0 auto;
}
The image moves, but only a little bit to the right, and not in the center. Could someone take a look at the source and help me fix this problem and tell me why it's happening?
Website
Github Repo
P.S This probably will be something simple so pardon my lack of experience :)
Your last .author element has float: right; which conflicts with your image.
You can for example add a div before your image with a clear: both; it will stop .author from conflicting.
BTW, no need to set width: 100%; on block elements like div since this is their default behavior.
Floats can sometime be pains in the a**. An easier and more logical way to align your text to the right would be to set text-align: right; to .author and make them p or div.
Code :
html -> https://pastebin.com/zNekXPLQ
css -> https://pastebin.com/tifEY0A4
I want to make the instagram button 30px from the right and 30 px from the top. But when using margin-right: 30px;, nothing happens, and when using right: 30px;, it plain disappears. Can someone please explain when and how to use margin-right ect and right, left, top, bottom attributes if at all? I'm new to html/css and positioning elements seems to be the hardest bottleneck to pass.
You have position:fixed on .topbar but there is no width to it. Set a width to inherit from container, and then set position for the button, i recommend adding the class to the a tag instead of the img tag
Html:
<a href="https://www.instagram.com/majic.photography/" target="_blank" class = "instagrambutton">
<img src="instagram-logo-white.png" alt="majic.photography" />
</a>
CSS:
.topbar {
position:fixed;
width:inherit;
}
.instagrambutton {
position: absolute;
width: 50px;
background-color: black;
padding: 10px;
top:30px;
right:30px
}
The others have provided the answers you need. My answer is not the answer you really want right now, but I am providing it because you are new to HTML and CSS.
Can I strongly recommend moving away from Absolute positioning it becomes damn near impossible to manage when you start thinking about cross-browser compatibility and now cross device compatibility (30px on a desktop is far different from 30px on a mobile screen). When I was new to software development I used absolute positioning a lot and having to almost write a new CSS script for each browser/device with custom styles (maybe slightly exaggerated).
Having been out of the field and then coming back in in the last year or so, I strongly recommend learning and using bootstrap to style your web page.
I'm really new to programming and trying to customize a theme that I am using. However I am having several issues where if I fix one thing something else breaks. I've researched solutions for about 3 days and I think it's time I reach out to some more experienced with CSS for help.
I tried setting up a JSFiddle but it's not working correctly as I can't access the HTML file directly. The website is www.preethijagadeesh.com. Would it be possible to review the html/css files and provide suggestions for the following requirements?
Center the title (I believe this is found in the 'site_header'
class which is pasted below). I am using margin to change the percentage and it looks
different on various browsers.
I would also like to 'fix' the title so that when I scroll the title
goes with me. I used 'position: fixed' but it cause all the
content in the 'index' ID (pasted below) to overlay on the title/site_header.
The text in the 'About' page appears to be more on the left with
a lot of white space on the right. No matter what I am unable to get
the content to center regardless of which class I update.
The line/border_bottom that appears under the navigation items should be
the same length as the text. I tried updating it but now every time
I hover over the items the text/options move around
overlay a
black color on the thumbnails on hover. I got it to 'kind of' work.
It's just when I hover on the thumbnails, the images and the
'background color' flicker
Widen the gap between the thumbnails.
Right now, there are two columns, it would be great to just put some
space in between them.
Please let me know if there's any other information I can provide.
Change
.header_image {
float: left;
margin-top: 80px;
max-width: 100%;
}
to
.header_image {
text-align: center
margin-top: 80px;
max-width: 100%;
}
Add these to .site_header:
.site_header{
/* old css remains here... */
position: fixed;
top: 0;
left: 0;
right: 0;
}
Move the padding properties from the a to their parent instead (the .page_link div).
and 5. I can't get the thumbnails to display on your jsfiddle so I can't really give the answer. But for 4 I think something like this will help:
put a <div class="thumbnail-overlay"></div> inside your thumbnail html.
For the css:
.thumbnail-overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
/* this z-index should be higher than the thumbnails' child element. If no z-index is set for their child element leave it at 1 */
}
.thumbnail-overlay:hover{
background-color: rgba(0,0,0,0.5);
}
Hopefully this helps.
.header_image is floating, so you can't center it nicely. If you remove the float and then use text-align: center;, the image should center.
Not really sure where you are wanting the title to appear - should it be above the content or to the left of the content?
You have removed the padding from the links to resize the underline, but it's only been changed on hover. This is what is causing the "jumping" navigation links. If you add this code to .navigation a (instead of .navigation a:hover), this should work nicely:
.navigation a {
padding: 0;
margin-right: 6px;
margin-left: 7px;
}
Instead of using .thumb_image:hover, try using .thumbnail:hover .thumb_image and see if that's helps with the flickering. Also, maybe remove the background-position: 0 -30px;.
Is a plugin being used to generate and control the thumbnail images? The absolute positioning being used on the thumbnail images will make it difficult to reposition them.
You should be creating the site offline and reviewing your work before migrating the site to your host.
If your host does not allow you to migrate your site and/or denies you access to your HTML files, you need find a new web host.
I've been reading various posts on stackoverflow and a few other sites about centering images. I found this code on various sites that seems to be a general guide:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
I am trying to center an image. I can't center it with this code. I can make it move using text-align: center but read this isn't the best method of doing so. I made a jsfiddle. If anyone wouldn't mind helping me it would be appreciated. I was able to make the image move as well by adding a random width value. I don't think this is the right approach though either since I am eyeballing if it is centered or not.
Sorry, I couldn't get the actual image to display but the img logo is there as a placeholder: jsFiddle
Your code should work just fine. There's probably something more you're not showing us. Here's a demo of two methods, though.
Basically, if the img is display: block; you can use margin: 0 auto.
If it's display: inline (the default for an img tag) the parent element would need text-align: center; on it.
Here's some code to summarize: http://jsbin.com/upuzav/1/edit
I would assign your image a class rather that trying to center all images with html. This way if you want to change where its positioned, you can quickly, rather that adjusting all things with the img tag.
CSS:
.center_image {
display: block;
margin-left: auto;
margin-right: auto }
Your Image:
<img src="your_image.jpg" class="center_image">
In order for this trick to work the image must have an explicit width. See http://designshack.net/articles/css/how-to-center-anything-with-css/
I'm a beginner and I have been battling to get this site to work as desired. Thanks to advice on this forum to include an IE7 specific style sheet I am almost there, but with a couple of minor issues remaining. Some of the styles just won't work and I'm starting to despair! I have three issues and if anyone can shed some light on these I'd be super happy!
Across all browsers (both stylesheets), 'main p' text padding on the right is only appearing on pages 'studios.htm' and 'contactus.htm' - I have no idea why and have tried playing around with all the styles without success.
On the 'location.htm' page I am unable to position the footer "behind" the Google Map, like the picture rows are positioned on the other pages. I have tried changing margins, padding and z-index, but nothing seems to change it - I can manage to position the footer in the right place but the Google Map stays "behind" it so that the bottom part of it can't be seen.
On IE7 ONLY: CSS text formatting doesn't seem to change the font size at all. As a result the text is too large and on pages 'studios' and 'thingstodo', this results in the very bottom part of the text to go down too low and hide behind images. If the text was the right
The site is here: http://bit.ly/gaAthc
Main CSS: http://jsfiddle.net/ykbhd/
IE7 specific CSS: http://jsfiddle.net/bdwrY/
Thanks in advance!
1) The reason this appears correct sometimes is simply how the text breaks in your paragraphs. Your p tags are taking the full width of your main div, so putting right padding isn't doing to help. Instead, just put some padding on your image.
Line 190:
#target2
{
float: right;
padding-left: 5px;
}
2) You can use negative margins the same way you do for the picture rows.
Line 178:
#googlemap
{
margin-bottom: -130px;
}
3) Remove margin-bottom: -10px; from this rule:
#container #main #rotxt
{
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 0.8em;
margin-top: 35px;
padding-left: 1px;
}
Update
For the Google map footer issue in IE7, try adding this rule to a IE7 stylesheet (see here for info on conditional comments):
#footer
{
z-index: -1;
position: relative;
}
Add overflow: hidden; to #main p