Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to build a responsive website using javascript and css, but I don't understand how because I am a new programmer.
This is what the website should look like:
I have 9 pictures, and I want to display them as follows:
The header picture will always be 100% of the original browser width no matter if the window is resized.
The two logo pictures should always be in their positions even if the window is resized.
6 of the pictures have to be arranged in 2 lines in such a way that if the window is resized, you will always see all the pictures fit to the window width and height.
This is what I have done till now, but it doesn't give the result I wanted.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
</style>
<div style="position:relative">
<img src="header.png" style="width:100%; position:absolute;">
<img src="logo1.png" style="left:30px; position:absolute;">
<img src="logo2.png" alt="" style="right:30px; position:absolute;">
</div>
<img src="1.jpg" style="position:relative; top:100px;">
<img src="2.jpg" style="position:relative; left:30px;">
<img src="3.jpg" style="position:relative; left:30px;">
<br>
<img src="4.jpg" style="position:relative; left:30px;">
<img src="5.jpg" style="position:relative; left:30px;">
<img src="6.jpg" style="position:relative;left:30px;">
</body>
</html>
How should I do this with Javascript code (using window.resize) and CSS positioning?
Thanks for your help.
Maybe try and check the frameworks:
Bootstrap,
Zurb Foundation
They both have explanations for deeper investigation.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have two divs that are col-xs-12 wide. There is no margin between them so they touch. I would like to add a border between them, like the image on the right (what I have currently is on the left).
I tried adding a 1 px height 11-wide column and centering it, but of course you can see a gap between the two rows on each side of the border.
Here's a jfiddle of the whole thing.
<div class="row top-buffer-10">
<div class="col-xs-12">
<div class="header-text">
<p style="font-size:130%"><b>%REGION%</b></p>
<p style="padding-bottom:15px;">(currently selected)</p>
</div>
</div>
</div>
<div class="row top-buffer-10">
<div class="col-xs-12">
<div class="img-with-text">
<img style="margin-top:5px;" src="img/gsd_list_contact.png" alt="itscl" />
<p style="font-size:90%;padding-left:0px;"><b>PHONE:</b> %LOCAL_PHONE%<br>
<b>TOLL FREE:</b> %TOLL_FREE%<br>
<b>LANGUAGE:</b> %LANGUAGE%
</p>
</div>
</div>
</div>
These are the two relevant divs to look out for.
There seems to be a little confusion, I want the border to be small than the div, as in, not just adding border top or border bottom.
See how the border doesn't quite reach the edges of the div. Thanks.
Here is a possible solution: https://jsfiddle.net/yjtrk00o/4/
EDIT:
add a css called division as shown below
In your HTML, add the line <hr class="division"/> just above the <div class="img-with-text">
CSS
.division{
border-top:1px solid #D3D3D3;
margin-top:0px;
margin-bottom:0px;
margin-left:10px;
margin-right:10px;
}
HTML
<div class="col-xs-12">
<hr class="division"/>
<div class="img-with-text">
I'm not sure if it's the desired effect you're after, but have you tried the following:
<div class="img-with-text" style="border-top: 1px solid black;">
Obviously you can fiddle with colour etc, or add that into the css class.
EDIT:
perhaps this then:
<div class="col-xs-12">
<div style="margin: 0 10px; display: block; height: 1px; background: #000;"></div>
<div class="img-with-text">
You can play with the margin to give you the offset from the edges you want. Probably not the most elegant solution, but seems to get the visual result you're after?
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to get this to work, I found this.
Instead of 4 columns, I want to keep the same height for 3 columns. How can I do this?
This is how it looks on my frontend:
x http://imagizer.imageshack.us/v2/150x100q90/661/TS8KVU.png
And it should be at 100% of the screen side by side images.
like this? or you want the image fill the div?:
<div class="col-md-4 no-pad">
<img class="img-responsive" src="//placehold.it/1280x640/eee">
</div>
<div class="col-md-4 no-pad">
<img class="img-responsive" src="//placehold.it/1280x640/eee">
</div>
<div class="col-md-4 no-pad">
<img class="img-responsive" src="//placehold.it/1280x640/eee">
</div>
.no-pad{
padding-left:0px;
padding-right:0px;
height:381px;
}
.no-pad img{
width:100%;
height:100%;
}
i have been pulling my hair out over this and cant figure it out for days, would REALLY appreciate some help :(
I am using Drupal (and Views) to display a page of images. The Images are laid out using a Grid format. (I am willing to change it from Grid to another format if it will help achieve what i need easier).
What I have is 6 images going across and each image has a set width of 150px, the height of the image is set automatically.
The effect i want to achieve is to have the images sit ON TOP of each other, currently the height of the table the images sit on is all the same and there is a gap under each image, i want the images to site exactly under each other with just maybe 1px apart, similar to how they do it on Tumblr.
The code of how the table and images is printed is below, can someone help me? pleaseeee. From my search i THINK that im unable to do this using Tables. is that correct? If so then how would i do it so that i can keep a similar grid effect so images sit 6 next to each other on each row, and then fit nicely on top of each other ?
Thank you so much
<table id="container" class="views-view-grid cols-6">
<tbody>
<tr class="block">
<td class="col-1 col-first">
<div class="views-field views-field-field-image-pin">
<div class="field-content ptpageimg"><div data-edit-id="node/3643/field_image_pin/und/_custom_views">
<div class="field-item"><div class="domeimageo">
<a href="/members/ptarticle/woolie-003-0">
<img class="pthover" src="/files/styles/150x200/public/images/pinpage/760_w2.jpg?itok=_ux-EGvz" width="150" height="200" alt="" /></a>
<a href="/ptarticle/woolie-003-0" target="_self">
<p class="pttext">Woolie 003
</p>
</a>
</div></div></div></div> </div> </td>
<td class="col-2">
<div class="views-field views-field-field-image-pin">
<div class="field-content ptpageimg"><div data-edit-id="node/3642/field_image_pin/und/_custom_views">
<div class="field-item"><div class="domeimageo">
<img class="pthover" src="/default/files/styles/150x200/public/images/pinpage/tumblr_mohhz9Ce001sor33mo1_1280.jpg?itok=4wFQzr_h" width="150" height="200" alt="" />
<a href="/ptarticle/085" target="_self">
<p class="pttext">085
</p>
</a>
</div></div></div></div>
</div>
</td>
As answered in comments:
Aside from a plugin like isotope.js, elements sitting next to each other will go under no matter how high your row is. Unless using lots of floats and/or absolute positioning, this will happen. By default, a is meant to go under its preceding no matter the height. It's a 's nature.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have 4 images which are links, I want to create a border but instead of creating it around each image (which automatically CSS does) I want to create it around the 4 images as a whole.
Place the images in a div and then make the border on the div
something like this:
<style>
.image-div{
border:1px #000;
}
</style>
<div class="image-div">
<img src="">
<img src="">
<img src="">
<img src="">
</div>
Check this JSFiddle: http://jsfiddle.net/RXmb9/4/
Wrap your images in a span or a div and then apply the border.
CSS
.cool { border:1px solid red; }
img { width:50px; height:50px; }
.one { /* Apply specific borders for images if you want */ }
HTML
<div class="cool">
<img src="" class="one" />
<img src="" class="two" />
<img src="" class="three" />
<img src="" class="four" />
</div>
This question already has an answer here:
Closed 11 years ago.
Possible Duplicate:
Aligning image to center inside a smaller div
I have a problem which points to CSS 3. Please see the part of my HTML code:
<div id="main" style="width: 320px; height: 400px;">
<img src="test.jpg" height="400" />
</div>
I don't know the real sizes of the test.jpg file (width can be different - the file is dynamic). I want to have the image in the middle of id="main" (I don't care, that the left & right part of the image will be out of range - it's even better). How can I do that ?
As long as you specify any width, you can center by adding margin:auto; . This isn't CSS3.
<img src="test.jpg" style="margin:auto; width:200px;display:block" />
this will do the work
<div id="main" style="width: 320px; height: 400px;background-position:center;background-repeat:no-repeat;background-image:url('test.jpg')">
</div>