I have a div which contains five img tags.
Here is the html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<div class="container">
<img src="Images/1.jpg"/>
<img src="Images/2.jpg"/>
<img src="Images/3.jpg"/>
<img src="Images/4.jpg"/>
</div>
</body>
</html>
Here is the stylesheet:
img
{
position:relative;
border:1px solid red;
width: 250px;
height: 150px;
margin-left:auto;
margin-right: auto;
}
.container
{
position:relative;
margin: 0 auto;
width: 80%;
border:1px solid red;
border-radius:10px;
padding:10px;
}
When I'm resizing the browser window everything got messed up.
This is the normal form
This is the form after resizing
I want pictures to stay in their places.
How can i fix this?
Add white-space:nowrap; to your .container div:
.container {
position:relative;
margin: 0 auto;
width: 80%;
border:1px solid red;
border-radius:10px;
padding:10px;
white-space:nowrap;
}
Remove position:relative and try using float:left or center
Give width of .container as pixels not as %. If you have 4 div give width(.container) as 1000px(4*250).
Related
I've seen there are a couple questions similar to this one but none of them seem to solve my problem.
I want a very simple design:
Two or more divs stacked on top of each other, each of them docked to the right. I'm practicing for a test on which using the float property is not allowed.
body{
width:900px;
height:850px;
margin-left:auto;
margin-right:auto;
}
#header{
width:900px;
height: 225px;
position: absolute;
right:0px;
border:1px solid black;
}
#cen{
width: 900px;
height: 240px;
position: absolute;
right:0px;
border:1px solid orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="header">
</div>
<div id="cen">
</div>
</body>
</html>
Now, when I only had one div (header), this worked, it was docked right. But when I add the 'cen' div it is also docked right but, instead of going underneath the 'header' div, it just goes over it.
Any ideas how to fix this?
Thanks.
Absolute elements won't behave in a decent manner they won't bother any blocks in their ways.
Since the element header has a height you can add the cen element under it by giving top:"whatever the height the header is"
Here the height of the header is 225px
Stack the cen in a position of top: 255px so it will be below the header.
Try this...
*{box-sizing:border-box;}
body{
width:900px;
height:850px;
margin-left:auto;
margin-right:auto;
}
#header{
width:900px;
height: 225px;
position: absolute;
right:0px;
border:1px solid black;
top:0;
}
#cen{
width: 900px;
height: 240px;
position: absolute;
right:0px;
top:225px;
border:1px solid orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="header">
</div>
<div id="cen">
</div>
</body>
</html>
Statically positioned block elements (divs) will stack like you describe by default. So there is no need for absolute positioning.
Also, there is no need to set a width because:
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
body {
width: 900px;
margin-left: auto;
margin-right: 0;
}
#header {
height: 225px;
border: 1px solid black;
}
#cen {
height: 240px;
border: 1px solid orange;
}
<div id="header">
</div>
<div id="cen">
</div>
You can use flexbox for something like this:
.container {
width:100vw;
display:flex;
justify-content: flex-end;
}
.column {
display: flex;
flex-direction:column;
flex-basis:33%;
}
.row {
display: flex;
background-color: red;
width: 100%;
flex-grow: 1;
height: 100px; /* can be whatever you like */
margin: .25rem;
}
<div class="container">
<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
</div>
CSS Grid would probable work even better, but I haven't worked with it enough.
I am beginner in this field.I want the logo(image used) to appear on the strip itself but when I use this code it appears below that strip.Basically, I want a strip with background colour black and a heading/title in the centre with a logo at the rightmost corner of that coloured strip.
Here's my code:-
<html>
<head>
<title>MIT PULSE-Home</title>
<style>
.topbar{
color:white;
background-color:black;
height:125px;
width=100%;
text-align: cente
border-bottom:solid 2px red;
}
#Shift{
margin-top:10px;
font-size:100px;
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="topbar">
<p align="center" style="font-size:100px">MIT Pulse</p>
<img src="logo.jpg" align="right" height="75">
</div>
</body>
</html>
Are you looking for something like this? I corrected a few mistakes in your CSS code, added position: relative; to your class .topbar and created a new class .logo which I added to the <img>-Tag.
Also, keep in mind the comment from ThisGuyHasTwoThumbs, you shouldn't use inline CSS
For further reading on relative/absolute positioning, I recommend the MDN articles: https://developer.mozilla.org/en-US/docs/Web/CSS/position
<html>
<head>
<title>MIT PULSE-Home</title>
<style>
.topbar{
color:white;
background-color:black;
height:125px;
width: 100%;
text-align: center;
border-bottom:solid 2px red;
/* Position the element relative */
position: relative;
}
#Shift{
margin-top:10px;
font-size:100px;
}
.logo {
/* Absolute position for this element */
position: absolute;
/* Distance from the right side */
right: 0;
/* Center image vertically */
top: 50%;
transform: translateY(-50%);
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="topbar">
<p align="center" style="font-size:100px">MIT Pulse</p>
<img class="logo" src="http://via.placeholder.com/75x75" align="right" height="75">
</div>
</body>
</html>
The logo is appearing below the title because <p> is a block-level element -- that is, it will force the next element to appear on the next line.
By making the title a span with inline-block display you can achieve something like this snippet. (As with other replies I've fixed some typos and removed unused CSS. Also, I second the comment regarding inline CSS.)
EDIT: more on layouts & block vs. inline at this MDN tutorial
<html>
<head>
<title>MIT PULSE-Home</title>
<style>
.topbar{
color:white;
background-color:black;
height:125px;
width:100%;
text-align: center;
border-bottom:solid 2px red;
}
.right {
float: right;
}
.title {
font-size: 100px;
display:inline-block;
margin: 0 auto;
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="topbar">
<span class="title">MIT Pulse</span>
<img src="logo.jpg" class="right" height="75" >
</div>
</body>
</html>
* {
padding:0;
margin:0;
}
div.header{
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
}
<div class="header">
<span>header</span>
<div class="header_inside">header_inside</div>
</div>
The text header is in the span label,it is a inline element,why it can't be displayed at the same line (or say,at the same height) with div header_inside?
To add margin-top:-20px; in css of div.header_inside can make text in span displayed at the same line with div header_inside,it is not my problem.
A div is, by default, display: block so it generates a block box with line breaks before and after it.
If you want it on the same line as some inline content, you'll need to change it to display: inline, display: inline-block, etc.
A div is a block element and need all the space. So no other element can be placed beside a block element. So you have to change the display of the div to inline or inline-block. You can change your code to the following:
* {
padding:0;
margin:0;
}
div.header {
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
display:inline-block;
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
}
<div class="header">
<span>header</span>
<div class="header_inside">header_inside</div>
</div>
You can use the "inline-block" property, so still a inline element but u can add width and height
<!DOCTYPE html>
<html>
<style type="text/css">
*{
padding:0;
margin:0;
}
div.header{
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
display: inline-block;
}
</style>
<body>
<div class="header"><span>header</span>
<div class="header_inside">header_inside
</div>
</div>
</body>
</html>
I am trying to do a dynamic grid layout with links to other pages, consisting of a picture and a text.
The problem is that I don't seem to find any way of introducing a whitespace (padding/margin) after the grid layout. In other words, The page ends exactly where the main div ends.
Here is the code. Any help is greatly appreciated, as I have tried a lot of methods, and neither one of them worked. Thanks a lot.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="resources/index.css" />
</head>
<body>
<div class="header"></div>
<div class="body">
<!-- this is the standard link to each category, which will be inserted n times .. the problem is visible after inserting it a min of 12 times-->
<a href="" class="categorie">
<img src="imgs/asd.png" class="imagine"/>
<div class="nume"> </div>
</a>
</div>
</body>
</html>
CSS :
html
{
background-color:Grey;
height:auto;
}
body
{
display: table;
padding:20px;
margin: 0 auto;
height:100%;
}
.header
{
background-color:white;
width:700px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:75px;
}
.body, .body>html
{
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
position:absolute;
display:block;
height:auto;
}
.categorie
{
background-color:white;
margin-left:20px;
float:left;
margin-top:20px;
height:180px;
width:150px;
}
.imagine
{
width:150px;
height:150px;
}
.nume
{
background-color:green;
width:150px;
height:30px;
margin-top:-5px;
}
I'm not sure exactly why there was a display: table on the body element, you said:
"Because I use position:absolute in the .body class.. otherwise, the .body will not extend to encapsulate all of the links."
So I was able to remedy both problems by removing both the display: table from the body element and position: absolute from the body class, then added overflow: auto to the body class.
The CSS:
body{
padding:20px;
margin: 0 auto;
height:100%;
}
.body, .body>html {
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
display:block;
height:auto;
overflow: auto;
}
The JSFiddle:
http://jsfiddle.net/Artsen/VhSdg/
Here is a working fix, in case for some reason, you'd want to keep the body table display.
http://jsbin.com/agucar/2/edit
First change
.body, .body>html
{
position:absolute;
}
to
.body /* removing .body>html didn't change a thing, meaning it was useless */
{
float: left;
}
That way you will be able to clear the floats with a clearfix div (as if correctly relatively positioned) and if you keep your clearfix div transparent, the height you give it will serve as "margin".
Add <div id="clearfix"></div> after <div class="body"></div>, and give the clearfix this CSS:
#clearfix {
height: 20px;
width: 100%;
position: relative;
clear: both;
}
EDIT: Artsen's answer works too, and if you don't need to keep the .body {display: table}, his answer is more suited.
Hi how do I get div 'one' and div 'three' auto adjusted to screen side whilst keeping div 'two' width static in css? all three divs should be in the same row
my HTML goes as this;
<html>
<header<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="x">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div><!-- close div 'x' -->
</body>
</html>
and the CSS done so far is as follows;
#x {height:34px; border:1px solid gray;}
#one {height:30px; border:1px solid red;; width:auto; float:left;}
#two {height:30px; border:1px solid green; width:660px; float:left;}
#thr {height:30px; border:1px solid blue; width:auto; float:left;}
any suggestions greatly appreciated. Thanks for looking
You can do it like this My Fiddle
HTML
<div class="container">
<div class="first"></div>
<div class="static"></div>
<div class="third"></div>
</div>
CSS
.container {
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align:stretch;
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-align:stretch;
display:box;
box-orient:horizontal;
box-align:stretch;
color: #ffffff;
}
div {
height: auto;
}
.first {
background-color: #546547;
}
.static {
background-color: #154d67;
width: 660px;
}
.third {
background-color: #c00000;
}
.first, .third {
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
First of all, make sure you match the ids.
thr is not the same as three.
The changes I've done to the css:
Indent it. It's good practice.
Declare widths of the divs in percentage of the parent div's size. You hadn't declared the widths at all.
Added a little padding, so that the 3 inner divs stay at the center of the outer div
Here's the CSS:
#x
{
position:relative;
padding:1.5px;
height:34px;
border:1px solid gray;
}
#one
{
height:30px;
border:1px solid red;
width:33%;
float:left;
}
#two
{
height:30px;
border:1px solid green;
width:33%;
float:left;
}
#three
{
height:30px;
border:1px solid blue;
width:33%;
float:left;
}