anyone know how to solve this problem:
The image of the example overboard the image-wrapper that contain it.
It works correctly if it's smaller or change "max-height:40vw" to "height:40vw", but both solutions are bad for me.
What I'm trying it's to get that image responsive in different resolutions ( desktop to laptop, for mobile I have a different design ), like here: http://goo.gl/yRo5OE (deviantart)
The website where I'm trying to implement: http://goo.gl/AAF4U7
Thank you, if you have another solution for this please tell me.
.image-wrapper {
display:flex;
justify-content:center;
max-height:40vw;
background:#141414;
}
.image-wrapper img {
height:100%;
width:auto;
}
<div class="image-wrapper">
<img src="http://webbiter.com/project/tattoobiter.com/wp-content/uploads/2015/06/skull-with-rose.jpg">
</div>
just remove the height:100% from css
.image-wrapper {
display:flex;
justify-content:center;
max-height:40vw;
background:#141414;
}
.image-wrapper img {
width:auto;
}
<div class="image-wrapper">
<img src="http://webbiter.com/project/tattoobiter.com/wp-content/uploads/2015/06/skull-with-rose.jpg">
</div>
Please see if the following helps-
img{max-width:100%; width:auto; vertical-align: top;}
OR
http://jsbin.com/guwicolora/edit?output
I have this current code:
CSS:
img
{
max-width:15vw;
max-height:15vh;
position:relative;
background-color:#67615d;
display:inline-block;
text-align:justify;
}
#container
{
width:80%;
min-height:100vh;
margin:0px;
float:right;
margin:0px;
overflow:hidden;
}
#navbar
{
background-color:#67615d;
width:20%;
height:100vh;
overflow:hidden;
position:fixed;
float:left;
}
#content
{
width:100vw;
min-height:100vh;
margin:0px;
padding:0px;
overflow:hidden;
background-color:#9d948f;
}
HTML:
<html>
<body>
<div id="content">
<div id="navbar">
*stuff in the navbar*
</div>
<div id="container">
</div><img src="pic1"></img>
</div><img src="pic2"></img>
</div><img src="pic3"></img>
</div>
</div>
</body>
</html>
Anyway, with this as my current code (add a few more things) and it looks like this:
http://i.imgur.com/9WTUNtj.jpg
These pics are just random screenshots and the others are random pictures (obviously just for testing purposes, the real thing will have pictures of all resolutions) I got off of google. Anyway, what I am trying to do is automatically adjust the pictures so that they all fit within the container while being different sizes.
http://i.stack.imgur.com/TQCwW.png
The black boxes are the "pictures", this is what I am trying to do but I keep messing up here and there, does anyone know how I would change my code to display the pictures as such?
Any advice or answers would be greatly appreciated :D!
Thanks :)
I would use a javascript masonry layout for this:
http://masonry.desandro.com/
Follow the docs and it's an easy install.
So I have this picture:
http://www.kyea.org/imageuploads/MC900382613.JPG
It's of a hand with a pencil and I'd like to position it on my web page so that it looks like it's writing the content. Is there a way to do this? I've tried messing around with background-origin, background-size, background-position, and nothing seems to work.
The following css est the image position .....
img {
position:relative;
float:right;
top:-15px;
left:-198px;
}
#text {
position:relative;
color:green;
text-align:left;
top:50px;
right:-90px;
}
for demo:JSFIDDLE DEMO
http://jsfiddle.net/AmKHx/
Hello all,
I linked my code on the top. My main problem is that I have my header, content and footer perfectly set that works with all websites. It does not have a scrolling feature or anything. Everytime I try to add the Intel Logo to the screen. It does what it is up there. I move it around and tweek it and then it works for one browser and not the other... It keeps changing. I want the logo to stick to the left perfectly along with the header I made with CSS. Also I want the Mobility Group Text at that height right next to the logo, but for some reason it always messes up my header content and footer as well when I paly with it. So pretty much I want The Logo on first then Mobility Group Right next to itand make it very smooth!
Also I have just learned html css and php and if you guys see something in my code that could be done smarter please let me know. I need critical feedback so that I can progress in learning these new languages better so that I can succeed in this field of programming!
Thank you in advance for all the input and advice!!
HTML CODE:
<div id="page">
<div id="header">
<h1><img src="http://wireless.fm.intel.com/test/logo2.png">
<h2>Mobility Group</h2>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
CSS CODE:
Html, body
{
Padding:0;
Margin:0;
Height:100%;
}
#page
{
Min-height:100%;
position:relative;
height:100%;
}
#header
{
background-color:#115EA2;
height:100px;
width:97.5;
}
#main
{
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:87%;
height:auto;
height:87%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer
{
Position:fixed;
Width:100%;
Bottom:0;
Height:50px;
background-color: #115EA2;
}
#header h1
{
position:absolute;
text-align:left;
left:0px;
top:0px;
}
#header h2
{
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
}
I'm still not sure I understood the question, but here's what can you do to make it more natural looking. Close the h1 tag, don't make it absolutely positioned, but rather make it float left. The same thing goes to the h2 element. And since the original image is missing, I've put another one, and fixed its height to 60px.
It's basically this:
#header h1 {
text-align:left;
left:0px;
top:0px;
float: left;
}
#header h1 img {
height: 60px;
}
#header h2 {
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
float:left;
}
See the results here: http://jsfiddle.net/AmKHx/1/ It should look the same in every modern browser.
Also, try not to use capital letters for CSS attributes - it's a standard to use lower case, and even some browsers might not like it.
Do you have a reset sheet?
Copy this to a new css file, call it reset.css and then load it in your page before you load your main css.
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}
css:
.myim {
width:50;
height:50;
}
.mydiv {
float:right;
position:absolute;
-index:2;
}
.myim:hover {
width:50;
height:50;
position:absolute;
z-index:2;
filter:alpha(opacity=95);
filter:alpha(opacity=95) !important;
opacity: 0.98 !important;
-moz-opacity:11;
}
html:
<div class='mydiv'>
<img class='myim'>
</div>
I want that whenever the mouseover is done on the image it should have little bit of transparency.
All above coding works well in FF, but it's not working in IE at all.
Thanks in advance
Since I remember, IE doesn't identify hover for non-a tags.
hover can be applied only to anchot tags....
the better solution for your query is to use jquery. its very simple to learn and build good website.
for jquery video tutorials see this link http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/. if you are a newbee to jquery this video tutorial will be so useful..