I have a photo gallery and my photos are diplayed as thumbnails.
When I resize the browser they move as I want them to but instead of getting evenly pushed down on to the next line they instead go down but overlap oeach other.
When the browser is full, the images display fine. Here is a screenshot showing the images moved and overlapping when the browser is smaller:
I currently use this code if it helps.
div.photoimg
{
margin:2px;
padding: 5px;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img photoimg
{
display:inline;
margin:3px;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:200px;
margin:2px;
}
Many thanks for any help.
I am not sure, but try instead of
div.img photoimg { display:inline; }
use
div.img photoimg { display:block; }
Related
I was looking at Android developer's website and I wanted to copy how they designed the article's animation when someone hovered on top of it. As such I tried to make something similar in plain HTML/CSS. However, I am running into an issue.
I used float expecting that the div tags would seperate from one another and apply the appropriate margins. However, It seems that the div tags are stacking on top of each other instead of being spread out.
I wanted them to look like this
but it ended up looking like this
https://codepen.io/alfielytorres/project/full/XYxPVO
I provided my files below.
HTML
<div class="new"><div>
<div class="new"><div>
<div class="new"><div>
CSS
body {
background: white;
font-family:courier;
padding:20px 100px 20px 100px;
}
.new {
width:100px;
height:100px;
background-color:white;
position: relative;
border:2px solid black;
float:left;
padding:15px;
border-radius:5%;
}
.new::before {
content:"";
width:100px;
height:100px;
padding:15px;
background-color:black;
position:absolute;
transform:translate(-6px,-6px);
border-radius:5%;
z-index: -1;
}
.new:hover:before{
animation-name:click;
animation-duration:500ms;
animation-fill-mode:forwards;
}
#keyframes click {
0% {
transform:translate(-6px,-6px);
}
100% {
transform:translate(-10px,-10px);
}
}
Thank you for your help!
You need to close your div tags like so </div>, then you could put these 3 div in a flex container and space them evenly.
hope this helps
Switching from tables to divs for layout purposes sounds an attractive decision, yet it's very painful. I haven't still been able to use float and oveflow properly to get divs aligned properly. Here are I have the following html and css:
HTML
<div class="div-row">
<div id="divOfficers" class="div-column">DIVOFFICERS</div>
<div id="divTasks">DIVTASKS</div>
CSS
.div-row {
width:100%;
overflow:clear;
margin-bottom:5px;
}
.div-column {
margin-right:3px;
float:left;
}
#divOfficers {
border:3px solid red;
height:80px;
width:200px;
color:red;
}
#divTasks{
width:300px;
height:80px;
border:10px solid orange;
color:orange;
}
Basically, I need the divTasks to stand right to the divOfficers, but without stretching over it. But here's what I get:
I've cleared the overflow in the parent div but as you can see that does not help. What else do I have to do?
just give a float:right to divtasks as well as you did float:left with divofficers. if it is what you want than your problem solved or let me know if you need something else to do and put your code on jsfiddle please as it will help a lot
Try use CSS3 code, If you use float maybe have problem with long content
.div-row {
width:100%;
overflow:clear;
margin-bottom:5px;
display: table;
}
.div-column {
margin-right:3px;
}
#divOfficers {
border:3px solid red;
height:80px;
width:200px;
color:red;
display: table-cell;
}
#divTasks{
width:300px;
height:80px;
border:10px solid orange;
color:orange;
display: table-cell;
}
Demo: http://jsfiddle.net/vsok/dqmdv7oa/
I have a page that I am trying to write. I want a header, footer three columns that are 20% 60% 20%. I am trying to use html5. This code works with firefox but IE the div tag is way at the bottom. andriod the left over laps, chrome shows the div at the bottom. I cannot figure out what I am doing wrong. The example is here.
<html>
<header>...</header>
<section>
<nav>buttons below the header not to exceed 20% align left
</nav>
<div>
</div>
<style>
header {
background-color:#744626;
color:#41200b;
text-align:center;
padding:0px;
height:186px;
}
nav {
line-height:30px;
background-color:#fbf2dc;
height:1947px;
width:200px;
float:left;
padding:10px;
}
section {
width:600px;
float:left;
padding:10px;
background-color:#fbf2dc;
height:2000px;
vertical-align:top;
}
aside{
width:300px;
float:right;
padding:0px;
background-color:#fbf2dc;
height:2000px;
}
footer {
background-color:#fbf2dc;
color:#41200b;
clear:both;
text-align:center;
padding:5px;
}
body {
background-color:#fbf2dc;
color:#41200b;
}
img {
display: block
}
.Normal-C17
{
font-family:"Trebuchet MS", sans-serif; font-weight:700;
font-size:15.0px; line-height:30px; color:#0000ff;
text-align:center;
}
table{
border-collapse: collapse;
}
table, th, td{
border: 1px solid #744626;
}
</style>
</section>
<aside>s</aside>
<footer>be centered and be the bottom 10% of page</footer>
</html>
You can try out Fluid Layout feature. Link below CSS files which are highly customizable. It is having a good feature in which the web page can adjust in mobile, tablet or a desktop i.e. responsive.
Try them out and customize, I just uploaded them. (If you have not used fluid feature in Adobe Dreamweaver before.)
link to styles.css file : https://www.dropbox.com/s/8r5pb2uvexf0nw9/styles.css?dl=0
link to boilerplate.css file : https://www.dropbox.com/s/rzy6w848s0ndedi/boilerplate.css?dl=0
I hope above steps helps you
Yeah, my titles suck :p
So I have a container, which contains <div>s. Dotted in this container are <span>s that mark off labels. These <span>s have position:absolute to make them not interfere with the layout of the <div>s.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
In Internet Explorer, this works fine.
In Chrome, it does not. The label falls out of the box.
I understand why this happens - it's because the <span> has zero width and height within the flow of the document, allowing it to squeeze into the zero remaining space.
But I'm wondering if there's any other way to achieve the effect I want here?
EDIT: Desired effect, Chrome's bad effect
don't really quite get where you want them, something like this ? added display block to the span.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
display:block;
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><div></div><span>Marker</span><div></div><div></div></div>
strong text
Borrowing ideas from #Billy and with help from #JacobGray in the comments, the following solution applies display:block to <span>s, but only if the immediately follow an Nth <div>, N being the number of columns.
It works, but I'm not too happy with it being dependent on a constant number of columns - not great for responsive design ;) Better solutions are of course welcome.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
#container>div:nth-of-type(3n)+span {
display:block;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
Adding display:block to the span is what I'd suggest, or putting a marker span inside every div you want to label.
If I understand well, try this. Put tags <span> into each <div> that you want have a "label". Add position:relative to all <div> and set the properties top and left for the span.
Ps. I've modified your code below, but you should use classes
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
position: relative;/* added */
}
#container>div>span {/* modified */
position:absolute;
background:#ccf;
top:-5px;/* added */
left:-5px;/* added */
}
<div id="container"><div><span>Marker</span></div><div></div><div><span>Marker</span></div><div><span>Marker</span></div><div></div></div>
Im trying to make a Tumblr theme, and trying to make text go away from the border 20px, but it is also pushing the photos, videos, and other elements that are not text over, which is IS supposed to do, is there a way to only align the text?
.posts {
border:solid 1px #333333;
border-radius:15px 15px 15px 15px;
color:black;
margin-bottom:20px;
min-height:120px;
padding-left:20px;
text-align:left;
}
Thats my code.
http://puu.sh/83iTL.jpg
Thats what is happening, but I want to only align the text. Is this possible?
Thanks :)
EDIT: The entire code: http://pastebin.com/6q4hFyZL and the page is em202020.tumblr.com
<edit>
From your page : http://em202020.tumblr.com/
You could do:
.posts a:first-of-type img,
.posts iframe {
margin-left:-80px;
}
Or if you like it better :
.posts a:first-of-type img {
margin-left:-80px;
}
.posts iframe {
margin-left:-20px;
}
.</edit>
first guess answer irrelevant.
you can do :
.posts img:first-child {/* it will only select the first-child if it is an img tag */
margin-left:-20px;/* swallow that padding-left:20px; */
}
could you add css rules for .post img?
.posts {
border:solid 1px #333333;
border-radius:15px 15px 15px 15px;
color:black;
margin-bottom:20px;
min-height:120px;
padding-left:20px;
text-align:left;
}
#add this?#
.posts img {
padding:0px;