I'm really struggling with the homepage of my website.
The images saying Animation and Interactive, Web Design, Print Design and Illustration look fine on my computer, but when I look at my site on my iPad they aren't scaling properly.
Here is the CSS:
#content {
position: relative;
color: #333;
width:100%;
min-width: 900px;
border:none;
background: none;
overflow:auto;
padding-right:32px;
padding-left:32px;
padding-bottom: 86px;
}
#slideshow {
position:relative;
height:462px;
z-index:-1;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#rightholder {
float: right;
clear: left;
max-width: 639px;
width: 60%;
padding-top: 90px;
z-index:11;
}
.right {
float:right;
margin-bottom:20px;
max-width: 50%;
z-index:13;
}
.left{
float:left;
margin-bottom:20px;
max-width: 50%;
z-index:12;
}
I'm not sure exactly what you're trying to achieve but I believe your problem mainly comes from some of your min-width and max-width properties that constraint the page when resizing.
If you're using flexible units, you should try to let the layout be as fluid as possible. I'm guessing you're using these properties to prevent odd behaviors, for that you should rather use media queries to adapt your design to various resolutions.
You should also make sure you don't set fixed sizes to your images (either in your CSS or HTML documents). Instead, use img { max-width: 100%; }.
Hope it helps.
Related
I have a script for a popup which is meant to display a clickable image. My problem is I have to adjust the popup dimensions everytime I change the image. Is there a way the popup can adjust automatically based on the image dimensions?
popup.php
<?php
/** popup code **/
echo "
<div id='pop1' class='simplePopup'>
<div id='main' class='row'>
<div class='adimage' align='center'>
<a href='localhost/test/test_target.php' target='_blank'><img src='images/logo.png'></a>
</div>
</div>
</div>";
?>
CSS code:
body {
font-family: Arial;
font-size:14px;
}
.simplePopup {
display:none;
position:fixed;
border:4px solid #808080;
background:#fff;
z-index:3;
padding:12px;
width:50%;
min-width:70%;
}
.simplePopupClose {
float:right;
cursor:pointer;
margin-left:10px;
margin-bottom:10px;
}
.simplePopupBackground {
display:none;
background:#000;
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
z-index:1;
}
You can adjust the image by width or by height. If you do both you will distort the aspect ratio (assuming you have images of different sizes).
For example, to keep a fixed width, set the width of the image container. You can use any unit you like, e.g.
.adimage {
width: 400px;
}
Then force the image to fit to its container:
.adimage img {
width: 100%;
height: auto;
}
For a consistent height you would use
.adimage {
height: 400px;
}
.adimage {
height: 100%;
width: auto;
}
If you need to target the outer containers you can try giving them fixed dimensions, and then applying 100% width to the inner containers:
.simplePopup {
width: 50%;
}
.adimage {
width: 100%;
}
.adimage img {
width: 100%;
height: auto;
}
If this isn't helpful please add a fiddle to your post and I'll take a closer look.
I'm struggling to understand divs.
I want to have the 'nav' panel expand vertically as required. The second issue I have is that I can't seem to get padding to work. Any changes I make tend to end up with the 'section' div drop below the 'nav' div.
Please see below jsfiddle and code.
Thanks in advance.
https://jsfiddle.net/s59cwy9s/
<div id="container">
<div id="nav">
test
</div>
<div id="section">
test
<br><br><br><br>
test
<br><br><br><br>
test
</div>
</div>
#container
{
width: 1156px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 10px rgb(0,0,0);
position: relative;
background-color: transparent;
height: auto;
}
#header
{
background-color:black;
color:white;
text-align: center;
padding:5px;
}
#nav
{
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
float:left;
padding: 15px;
display: inline-block;
height: auto;
}
#section
{
/*float: none;*/
padding: 10px;
display: block;
/*position: absolute;*/
/*overflow: auto;*/
background-color: white;
width: auto;
height: auto;
}
This may be due to the fact that your name bar doesn't span the height of the webpage completely. Try something like height :100% for the navbar. It might do the trick.
Here is some help :
https://jsfiddle.net/6ubhyL5k/
Some advices :
Take time to really understand how the page flow works (float : left/right) so you will then understand how padding and margin work when you have floating div
Use what you really know and don't improvise :)
Don't use br to make spaces between blocks (margin and padding are what you should use)
Take a look at how bootstrap works and never forget the responsive design
First I will recommend is using box-sizing attribute
It contains any type of padding or borders within the container's width and height. Find more about it Here. So i suggest:
*
{
box-sizing:border-box;
/* Use browser prefixes if u want support for other browsers */
}
Second is add a class to the container which contains elements wit float css attribute like clearfix and add this code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
or you can just create a div after the container containing elements with float css attribute and clear it.
<div class='clear'></div>
.class
{
clear:both;
}
Using float as much as it is useful brings about a problem in layout if not properly used. https://css-tricks.com/all-about-floats/
My Solution:
html,body {height:auto; width:100%; background:red; }
* { box-sizing:border-box; margin:0; padding:0; display:block; position:relative; }
#container
{
min-width:800px;
height:auto;
margin:0 auto;
width:100%;
}
#nav
{
float:left;
width:30%;
padding: 15px;
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
background:white;
}
#section
{
float:left;
width:70%;
padding:0 100px;
background:yellow;
}
.clearfix:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Hope It Helps You. Though i recommend researching more on layouts since there's other layout which will give you less problem than floats.
Try
#section{
clear:both;
}
JSfiddle
clear:both allows floated divs to stop continuing on the same line with the other floated ones, and drop below.
Update: https://jsfiddle.net/s59cwy9s/2/
You could fix your issue by giving a margin-right to the #nav
I am trying to lay out a group of images in a table format with using div's. I have an image and then I want to put a Delete link underneath the image. But I can't get it to layout correctly. This is what I have:
<div class="container">
#foreach (var item in Model)
{
<div class="imagetiles">
<img src="#Url.Content(item.ImageURL)" alt="" width="30%" height="30%" />
<a>Delete</a>
</div>
}
</div>
My styles look like this, I copied it from the Fiddler mentioned in the comments below. The Fiddler works, but when I apply it, it doesn't work.
div.container {
width:100%;
}
div.imagetiles {
display:inline-block;
margin:10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 30%;
}
Below is how this renders. I want this to put the images next to each other with up to 3 per line. Why doesn't the Fiddler work for this here? Why is the imagetile div so big, I can't reduce it to fit the image?
If you want three per row, I would set the image container (not the main one) to be 33% and then make the width of each image to control the spacing around it (kind of like padding). Something like this:
div.container {
width:100%;
margin:0; /* make sure there is no padding or margin on container */
padding:0;
}
div.container div.imagetiles {
float:left;
width:33%;
padding:0;
}
div.container div.imagetiles img {
width: 95%;
margin: 10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 100%;
}
Demo: http://jsfiddle.net/Gd2V6/
If you are using something like LESS (recommend or SASS):
div.container {
width: 100%;
margin:0; padding:0;
div.imagetiles {
float:left;
width: 100%;
padding:0;
img {
width: 95%;
margin:10px;
}
a {
display:block;
text-align:right;
width: 100%; /* may need to tweak this */
}
}
}
There are small things we need to maintain when display is not defined.
Also we need to analyze the position: property of element that plays big role in this.
After adding the above I have added z-index to the element and that did it!!.
Have a look at this fiddle
CSS:
div.container {
display:block;
width:100%;
position:relative;
}
div.imagetiles {
display:inline-block;
margin:10px 5px;
float:left;
}
div.imagetiles img{
position:relative;
display:inline-block;
z-index:1;
}
div.imagetiles a {
height:25px;
width:50px;
position:relative;
display:inline-block;
float:right;
top:-25px;
left:-50px;
z-index:10;
}
your Implementation is all right. you just need to add width of imagetiles
like:
div.imagetiles {
display:inline-block;
width:30%;
margin:10px;
}
It will work like a charm :)
My first attempt using bootstrap on a webapp - this is how it renders on my iPhone.
Why is everything showing up under 100% width?
Example: The top of the page is called dark container, a wrapper with an image embedded, this is the css
#darkcontainer {
height:200px;
width:100%;
border: none;
background-color:whitesmoke;
text-align:center;
}
My guess is that the image beneath(part of a slider) is pushing everything under 100% because it is much larger? That slider has the following css
#slides {
height:500px;
width:1065px;
margin: 0 auto;
ul.pagination {
width:100%;
text-align: center;
li {
display:inline-block;
}
}
}
.slides_container {
width:1065px;
height:500px;
}
.slides_container div {
width:1065px;
height:500px;
display:block;
}
The mailing list looks like it would be different, because there is more of the background color there before it turns white, but that's just... a 100% width wrapper centering the child
#autoheightwrap {
height:auto;
width:100%;
background-color:whitesmoke;
}
#mailform {
height:100%;
width:600px;
margin: 0 auto;
background-color: whitesmoke;
padding: 6px 12px;
...
Feel free to look at the website in your browser here.
Any ideas why it is being rendered this way?
#slides is set at a width of 1065px. This is the culprit that is breaking your site. You'll have to restyle it with a media query targeting mobile.
For a more responsive friendly slideshow, might I suggest cycle2?
I'm try to create a side by side div that have 100% height, i manage to get the first div working but the second one is cause problem, been trying to do this for the last 3 hours.
#mainWrapper{
width: 900px;
margin:0px auto;
background:#fff;
}
/*leftColumn */
.leftColumn {
float:left;
width:250px;
height:100%;
background:#fafafa;
border-left:solid 1px #dedede;
position:fixed;
top:0px;
}
/* Content */
.mainContent {
float: left;
width: 650px;
height:100%;
background:#fff;
margin-left:252px;
padding-bottom: 50px;
}
example of how it's supposed to look like
http://i49.tinypic.com/ycef7.jpg
how it looks like at the moment.(tried everything dunno how to fix it)
http://i49.tinypic.com/2ryk5eo.png
Rather than giving explicit height to both the inner divs floated left, you should use overflow:hidden; on parent div, e-g:
#mainWrapper{
width: 900px;
margin:0px auto;
background:#fff;
overflow:hidden;
}
Add
html, body {
height: 100%;
}
(http://jsfiddle.net/zYWjJ/2/)