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.
Related
I know what the offending element is, but I have no idea how to adjust the code to make it work. I have tried negative margins which did succeed in bringing the text up and making the box smaller, however past -150px and the text overlaps itself. Also it just isn't good practice for making a responsive website.
It's as if there is padding above the text in the .row class. But there isn't. Any suggestions?
https://jsfiddle.net/7r2wzp2m/
enter code here
For your .page-footer element, delete the top: 340px; attribute and instead put
.page-footer{
position: relative;
margin-top: 550px;
}
Hope it helps!
I would restructure your HTML to have a header, main, and footer sections. More wrappers for more flexibility.
Don't put tags in the middle of the HTML either, keep them in the header or, even better, in a separate CSS file.
The issue is from an element above it, if you add the rule
.container-staff::before, .container-staff::after {
clear: both;
display: table;
content: ' ';
}
That should fix it. I agree with others though that you should restructure your html if possible, it is very hard to maintain as is right now.
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
}
I have two divs inside a main container. One is floating left (youtube video), and the other one on the right (soundcloud player).
When I zoom in (110%) the div container on the right collapses underneath, onto the next line.
How can I stop this from happening? Am I missing something in the CSS?
.youtube {
float: left;
width: 640px;
height: 360px;
}
.maincontainer {
position:relative;
margin-top: 1%;
margin-right: auto;
margin-left: auto;
max-width: 1900px;
height: 1000px;
padding-right: 10px;
padding-left: 10px;
}
.soundcloud {
float:right;
height:388px;
width:580px;
padding-right:50px;
}
jsfiddle : http://jsfiddle.net/richirich/nZgw5/1/
Thanks!
EDIT: Figured it out. I was using "max-width" in the .maincontainer div. I changed it and used "width" instead and now the soundcloud player doesn't drop down to the next line anymore. So that's solved.
This leads me to another question though: how am I supposed to know whether to use % or px to define the dimensions of a div? People have given me conflicting answers and it just confuses me...
I personally found that using pixels helps the boxes to stay in place and not drift apart when zooming in or zooming out..
Add a CSS Reset, which involves putting:
* {
margin:0;
padding 0;
}
at the top of your CSS file. This resets all margins and padding.
If that doesn't work try making the div that contains the whole middle section of the site (The youtube video and text and the soundcloud box), I think you've called it main container, a little bigger. Add maybe 10-15 pixels to the width. It could be running out of space.
Hope this helps. Next time try posting a little more info and in particular some code :)
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've searched google and SO for a solution to this problem but have not found it, perhaps this is due to my uncertainty as to how to word it best.
Here is the issue:
I have a 3 column page using divs. The divs are as follow, left, middle and right container divs, with various content inside. What I need them to do is align horizontally from the top. What they are currently doing is some jigsaw jagged aligning. I believe this is because of the content inside (as I've altered everything else without result), which varies from titles with padding around it, to text, fb like buttons, etc. As you can see here, http://sunnahspace.com the temporary double line on the page is what I am trying to align them against. I can post all the code you need but as it is a lot I would prefer not to bog everyone down with a lot of reading, I will post the css and if you ask for something specific I will post it, otherwise it can be viewed from the source for the index page linked above. And please go easy on me, I'm a bit of an idiot when it comes to developing, and I'm sure you've all been noobs before. Thanks in advance.
Here is the css for the 3 divs:
#middle_container {
float: right;
width: 60%;
padding: 5px;
margin:auto;
}
#right_container {
float: right;
width: 20%;
padding: 5px;
margin: auto;
}
#left_container {
float: right;
width: auto;
min-width: 200px;
padding: 5px;
margin: auto;
}
FIrst of all you need to take off the first spacer above the first column_middle_temp1.
Second you need to remove margin-bottom: 20px from the top_container.
Lastly you need to add a at the bottom of:
<div id="left_container">...</div><br clear="all" />
This is what I saw right away, if this still doesn't work let me know.