Hi I m having trouble with a tumblr theme code that I want to use.
The problem I'm having with it is that some posts with images are overflowing and also it seems the page is slow for some reason? (I am not a coder in the slightest and any help would be amazing!)
The pastebin is here
#entries {
position: relative;
padding: 15px;
border: 1px {select:border} {color:border};
width: {select:post size};
margin: 30px 5px 20px 650px;
background: {color:post bg};
and here is a [link][2] to a page that has an example of what I am talking about
Put this in your css:
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
This should make images maintain their aspect ratio, and also fit inside the parent element.
Related
My img won't integrate down into the page.
css for img:
dee {
display: block;
float: right;
border: 6px double grey;
width: 210px;
height: auto;
overflow-x:hidden;
background-color: #cad3de;
}
Img is nested within a section is this the problem?
Img of Problem
set margin: 0; on the img .. or your section has padding maybe.
here is my unfinished web design:
my web design
so as i said before i want to make the outer border little tighter. it's like i can make it tighter in the height by throwing them 's, but i can't really do it for the width so if you experience with that sort of thing please give me the write code to write i will appreciate that.
here is my html code if you wanted to help me out :
https://hastebin.com/emebozihez.xml
again thanks alot if you make it till here
Haven't you tried these ? doesn't it work the way you want it to ? Just added : margin: auto; width: 70%;
#example3 {
border: 3px solid black;
margin: auto;
width: 70%;
background: #FFFFFF;
background-size: 10px 10px;
background-position: 50% -15px;
}
What about setting the width as a percentage and centering it. Perhaps something like this:
#example3 {
width: 75%;
display: block;
margin-left: auto;
margin-right: auto;
}
I would like to have a image on the left with a heading on the right. I want both of them to scale in size and spacing as the page is shrunk. I have used this code: width: 10%; height: auto; margin: 2% 0px; to have the image on the top left of my page and scale in both spacing and size to the page when the browser is shrunk (I have also included media queries which wouldn't think would make a difference). I have tried using positioning: absolute which doesn't work. I am a novice to using HTML5 and CSS3. This is my first project and second post on Stack Overflow.
I think this is what you are trying to do
HTML
<div class="wrapper"><img src="yourimage.jpg"/><h1>my Heading Goes here</h1></div>
CSS
div.wrapper {
width: 100%;
height: auto;
max-width: 600px;
border: thin solid #333;
}
div.wrapper:after {
content: '';
display: block;
clear: both;
}
div.wrapper img {
display: block;
float: left; width: 40%;
height: auto;
margin-right: 5%;
}
div.h1 {
display: inline-block;
line-height: 20px;
margin: 0px;
padding: 0px;
}
You can check it here
jsfidlle
Could you make a http://jsfiddle.net/?
It's kinda hard to understand what you're after based on our description alone.
I am very new to CSS, so excuse my naive mistakes.
Goal: Trying to make a simple and responsive layout. I am able to make the #container and #content responsive, but the fixed #header remains in-place and overflows when resizing the browser window. If you resize the browser window by pushing it to the left, you will see what I am talking about.
Also, side question: If I were to add an Image in the header, would the same (potential) solution apply? If you're curious about this kind of lay-out, I am trying to edit my "Tumblr" layout and I want to make it responsive (it's a private tumblr blog that I experiment on, I am not trying to make it responsive on cell phones / tablets – yet.)
Here is this JSFIDDLE: http://jsfiddle.net/yrbvw473/2/
HTML
<div id="container">
<div id="header">This Is The Header</div>
<div id="content">
<div class="post">A</div>
<div class="post">A</div>
<div class="post">A</div>
</div>
</div>
CSS
#container {
border: 0px solid;
max-width: 640px;
padding-left: 50px;
padding-right: 50px;
margin: auto;
display: block;
overflow-x: hidden;
}
#header {
margin-top: 0px;
margin-bottom: 0px;
position: fixed;
background-color: grey;
width: 640px;
z-index: 1;
text-align: center;
display: block;
}
#content {
width: 100%;
overflow-x: hidden;
clear: both;
border: 1px solid;
margin-top: 50px;
}
.post {
margin-bottom: 45px;
width: 100%;
border: 1px solid;
margin-top: 50px;
text-align: center;
}
Thank you for all the help! Again, I am new too this...
Comment or remove this position: fixed; on #header. And change width to max-width: 563px;
bcause u put the value of header width, that's why the header cannot flexible following browser width. use width:100% instead
SEE FIDDLE
//sorry for the bad formating, i am on my phone...
When someone asks how to center a page, then the response is like:
margin-left:50%;
left:(-1/2 width);
I used this code on a site with a width of 1000px,so it comes to screens, where this site does not fit.
Now the site gets centered on the smaller screen and gets equaly pushet to left and right.
So lets say, our screen is 600px wide:
200px are left
600px are on screen
200px are right
You can scroll to the right, but the pixels on the left are unreachable...
How can i solve this to control, how much of my site gets dragged to the left in case of smaller screens?
This is especially important for mobile phones...
If you are worried about different screen sizes then I highly suggest using Media Queries but this is also a useful way of setting up centered elements. Just use a % width instead of a set width and followed by margin: 0 auto;
Look at fiddle for visual aid. (If this answer does not suit your needs at all then I'll gladly remove it)
div {
margin: 0 auto;
width: 80%;
height: 500px;
background: mediumSeaGreen;
}
JSFIDDLE
Your best bet (Ignore the CSS it's from my portfolio.
.subMenu {
display: none;
float: none;
width: 100%;
background: rgba(254, 126, 1, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
font-size: 20px;
padding-left: 60%;
position: relative;
left: 0;
top: 3.85em;
list-style-type: none;
padding: 1.5em 0;
margin: 0;
overflow: hidden;
}
#media only screen and (max-width: 680px) {
.subMenu {
top: 4.9em;
font-size: 10px;
min-height: 100% !important;
padding: 0;
background: rgba(0, 0, 0, 0.5);
}
}
You can also use jQuery to dynamically find the width.
var width = $('div').width();
$('div').text(width);
You could try using margin: auto
http://jsfiddle.net/56N9w/
As you see there if you make the window too small for the content to fit it will left align by default
Use this:
margin: 0 auto;
width: 400px;
alternative:
margin: 0 auto;
width: 50%;
another alternative:
#outer-div {
margin: 0 auto;
width: 50%;
}
#inner div {
/* insert any CSS you want here */
}
NOTE 1: When using margin: 0 auto, you need to define the width otherwise it won't center.
NOTE 2: You should really put it inside another box, or make the page width 100% (or a width larger than the box).
NOTE 3: You can't center vertically with margin: auto auto. This simply won't work. See below for the solution to this:
Centered box both horizontally and vertically:
Working in jsbin:
http://jsbin.com/OSUViFi/1/
The code (same as the jsbin above):
page.html
<div id="outer-container">
<div id="inner-container">
<div id="centered-box">
</div>
</div>
</div>
style.css
#outer-container {
width: 100%;
height: 100%;
display: table;
position:absolute;
overflow: hidden;
}
#inner-container {
display: table-cell;
vertical-align: middle;
}
#centered-box {
margin: 0 auto;
height: 400px;
width: 400px;
background: #000;
}
Specific for your needs (not including vertical alignment which it looks like you don't need):
jsbin example:
http://jsbin.com/axEZOTo/2
The code (same as the jsbin above):
page.html
<div id="container">
<div id="centered-box">
</div>
</div>
style.css
#container {
width: 1000px;
margin: 0 auto;
height: 100%;
background: #999;
}
#centered-box {
max-width: 70%;
min-width: 200px;
height: 500px;
margin: 0 auto;
background: #000;
}
Here, the smallest it can go is 200px, this number you can change to the smallest amount that you want to allow your box to have.
NOTE:
I finally figured out what you were trying to say in your question, which was poorly worded.
You only used 600px as an example, but you really just want to have it be a fluid layout that changes with screen size.