Im currently trying to get my window in sharepoint to auto-resize when the user changes the size of their window. im using a web version of sharepoint at work. not allowed to use designer.
<style type="text/css">
#dgwrap {
HEIGHT: 1000px; BACKGROUND-IMAGE: url(PublishingImages/graybk.png); BACKGROUND-REPEAT: repeat-y; MARGIN-TOP: 75px; WIDTH: 1325px
}
.dgtopbox {
FONT-SIZE: 9pt; HEIGHT: 200px; FLOAT: left; TEXT-ALIGN: center; MARGIN-LEFT: 350px; MARGIN-TOP: 110px; WIDTH: 700px
}
#dgtopboxleft {
HEIGHT: 50px; FLOAT: left; MARGIN-LEFT: 350px; MARGIN-TOP: 25px; WIDTH: 200px
}
#dgtopboxright {
HEIGHT: 50px; FLOAT: right; MARGIN-TOP: 25px; WIDTH: 200px; MARGIN-RIGHT: 300px
}
#dgtopboxother {
FLOAT: left; MARGIN-RIGHT: 25px
}
#otherbutton {
HEIGHT: 35px; BACKGROUND-IMAGE: url(PublishingImages/otherbutton.png); BACKGROUND-REPEAT: no-repeat; MARGIN-TOP: 70px; DISPLAY: block; WIDTH: 160px
}
#clmbutton {
BORDER-TOP: #838b8b 1pt solid; HEIGHT: 40px; BORDER-RIGHT: #838b8b 1pt solid; BACKGROUND-IMAGE: url(PublishingImages/CLMbutton.png); BORDER-BOTTOM: #838b8b 1pt solid; BORDER-LEFT: #838b8b 1pt solid; DISPLAY: block
}
#clmbutton:hover {
BACKGROUND-IMAGE: url(/Operations/ProviderOperations/SpecialOps/PublishingImages/CLMbutton2.png)
}
#confbutton {
BORDER-TOP: #838b8b 1pt solid; HEIGHT: 40px; BORDER-RIGHT: #838b8b 1pt solid; BACKGROUND-IMAGE: url(/PublishingImages/CONFbutton.png); BORDER-BOTTOM: #838b8b 1pt solid; BORDER-LEFT: #838b8b 1pt solid; DISPLAY: block
}
#confbutton:hover {
BACKGROUND-IMAGE: url(/PublishingImages/CONFbutton2.png)
}
</style>
<div id="dgwrap">
<div id="dgtopboxleft"><a title="1box" id="CLMbutton" href="####.html"></a></div>
<div id="dgtopboxright"><a title="2box" id="CONFbutton" href="####.html"></a></div>
<div id="dgtopboxother"><a title="3box" id="otherbutton" href="####.html"></a></div>
<div class="dgtopbox">
<h3>Request Policy</h3>
<p style="text-align: left">1.text here.</p>
<p style="text-align: left">2.text.</p>
</div>
</div>
if you are trying to make page responsive you should put all the values in %, give max-width and max-height instead of height and width, try to remove Display:Block as much as possible
Regards
Arjun
Related
I would like div#alpha1 and div#alpha2 inside the div#alpha placed side by side.
CODE
#alpha {
position: relative;
padding-top: 4px;
margin-top: 8px;
margin-left: 2%;
margin-right: 2%;
width: 96%;
height: 100px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
}
#alpha1 {
position: relative;
width: 94px;
height: 94px;
border: 1px solid black;
margin-left: 2%;
}
#alpha2 {
position: relative;
margin-top: 0px;
height: 40px;
border-top: 1px;
border-bottom: 1px solid black;
margin-left: 94px;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="img/jenny.jpg" width="94px" height="94px">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
you can use flexbox for that by using display:flex in parent and then flex:1 in #alpha2 to make it grow according to screen size
Don't use HTML width/height tags, instead use CSS for styling it.
Note I did a few tweaks to your code.
#alpha {
padding-top: 4px;
margin: 8px 2% 0;
width: 96%;
height: 100px;
border: solid black;
border-width: 1px 0;
display: flex
}
#alpha1 {
width: 94px;
height: 94px;
border: 1px solid black;
margin: 0 2%;
}
#alpha2 {
flex: 1
}
#alpha2 h1 {
border-bottom: 1px solid black;
height: 40px
}
<div id="alpha">
<div id="alpha1">
<img src="//lorempixel.com/94/94" />
</div>
<div id="alpha2">
<h1 id="patientname">Jenny Thomas</h1>
</div>
</div>
The easiest/fastest solution is to assign display: flex to the container #alpha
http://codepen.io/anon/pen/mPgaJP
(I also erased some unneccesary settings in there)
You just needed to set the float property of your div. Here you are :-
#alpha{
position:relative;
padding-top:4px;
margin-top:8px;
margin-left:2%;
margin-right:2%;
width:96%;
height:100px;
border-top:1px solid black;
border-bottom:1px solid black;
float: none;
}
#alpha1{
position:relative;
width:94px;
height:94px;
border:1px solid black;
margin-left:2%;
margin-right: 0px;
float: left;
}
#alpha2{
position:relative;
margin-top:0px;
height:40px;
border-top:1px;
border-bottom:1px solid black;
margin-left:9%;
float: next;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTvU-f_zys67Kv6hdqJcmSN5n_dfe2igiq9lLZYpcXAyVXEBNQ6" width="94" height="94" alt="IMAGE">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
I edited your margin in alpha2 for correct display of bottom line. It is displayed correct in browser. Here it is not. You can check it here. Mark the problem solved if it helps.
JS Fiddle is here.
I found the CSS and HTML for a bracket generator. The problem is that when you zoom out the lines break. I've tried to convert the widths from specific sizes (e.g. 149px) to percentages (e.g. 15%) but to no avail.
Any idea?
CSS
.tournament4-wrap, .tournament8-wrap, .tournament16-wrap, .tournament32-wrap {
text-align: center;
}
/****** round 1 ******/
.round1-top, .round1-bottom {
float: left;
width: 150px;
height: 2em;
}
.round1-top {
line-height: 2.5em;
}
.round2-topwrap .round1-bottom {
width: 149px;
border-top: 1px solid #000;
border-right: 1px solid #000;
}
.round2-bottomwrap .round1-top {
width: 149px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
/****** round 2 ******/
.round2-top, .round2-bottom {
float: right;
width: 150px;
height: 4em;
}
.round2-top {
line-height: 6.5em;
}
.round3-topwrap .round2-bottom {
width: 149px;
border-top: 1px solid #000;
border-right: 1px solid #000;
}
.round3-bottomwrap .round2-top {
width: 149px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
.tournament4-wrap .round2-top {
border-bottom: 1px solid #000;
}
.round2-topwrap, .round2-bottomwrap {
float: left;
width: 300px;
height: 4em;
}
/****** round 3 ******/
.round3-top, .round3-bottom {
float: right;
width: 150px;
height: 8em;
}
.round3-top {
line-height: 14.5em;
}
.round4-topwrap .round3-bottom {
width: 149px;
border-top: 1px solid #000;
border-right: 1px solid #000;
}
.round4-bottomwrap .round3-top {
width: 149px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
.tournament8-wrap .round3-top {
border-bottom: 1px solid #000;
}
.round3-topwrap, .round3-bottomwrap, .tournament4-wrap {
float: left;
width: 450px;
height: 8em;
}
/****** round 4 ******/
.round4-top, .round4-bottom {
float: right;
width: 150px;
height: 16em;
}
.round4-top {
line-height: 30.5em;
}
.round5-topwrap .round4-bottom {
width: 149px;
border-top: 1px solid #000;
border-right: 1px solid #000;
}
.round5-bottomwrap .round4-top {
width: 149px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
.round4-topwrap, .round4-bottomwrap, .tournament8-wrap {
float: left;
width: 600px;
}
.tournament16-wrap .round4-top {
border-bottom: 1px solid #000;
}
/****** round 5 ******/
.round5-top, .round5-bottom {
float: right;
width: 150px;
height: 32em;
}
.round5-top {
line-height: 62.5em;
}
.tournament32-wrap .round5-top {
border-bottom: 1px solid #000;
}
.round5-topwrap, .round5-bottomwrap, .tournament16-wrap {
float: left;
width: 750px;
}
/****** round 6 ******/
.round6-top, .round6-bottom {
float: right;
width: 150px;
height: 32em;
}
.tournament32-wrap {
float: left;
width: 900px;
}
/****** styles for the winner column ******/
.winner3, .winner4, .winner5, .winner6 {
font-weight: bold;
font-style: italic;
}
.winner3 {
line-height: 8em;
}
.winner4 {
line-height: 16em;
}
.winner5 {
line-height: 32em;
}
.winner6 {
line-height: 64em;
}
HTML
<title>8 Player Tournament</title>
<div class="tournament8-wrap">
<div class="round4-top winner4">Winner</div>
<div class="round3-topwrap">
<div class="round3-top">Top finalist</div>
<div class="round2-topwrap">
<div class="round2-top">1-8 winner</div>
<div class="round1-top">#1 seed</div>
<div class="round1-bottom">#8 seed</div>
</div>
<div class="round2-bottomwrap">
<div class="round2-bottom">4-5 winner</div>
<div class="round1-top">#4 seed</div>
<div class="round1-bottom">#5 seed</div>
</div>
</div>
<div class="round3-bottomwrap">
<div class="round3-bottom">Bottom finalist</div>
<div class="round2-topwrap">
<div class="round2-top">2-7 winner</div>
<div class="round1-top">#2 seed</div>
<div class="round1-bottom">#7 seed</div>
</div>
<div class="round2-bottomwrap">
<div class="round2-bottom">3-6 winner</div>
<div class="round1-top">#3 seed</div>
<div class="round1-bottom">#6 seed</div>
</div>
</div>
</div>
UPDATED ANSWER
The problem is with the 149px widths. When you scale down, this is leading to a rounding error that is forcing items to wrap unexpectedly. It looks like this was done to account for the 1px border. Instead if you set the box model to border-box you don't need to worry about this -- the item's width includes its border size if any.
First set this:
.tournament8-wrap * {
box-sizing:border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
Then, set all of the items that are currently sized to width: 149px to 150px
Updated fiddle:
http://jsfiddle.net/11nLfa4g/6/
I've the below html code.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="margins">
<head>
<meta charset="utf-8" />
<style type="text/css">
.main {
width: 900px;
height: 320px;
border: 1px solid black;
position:relative;
}
.margins {
padding:10px 10px 10px 10px;
border: 1px solid black;
}
.top_H {
width: 720px;
height: 80px;
border: 1px solid black;
}
.mid {
display: inline-block;
clear: both;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid black;
}
.mid_L {
width: 200px;
height: 120px;
float: left;
margin-right:10px;
border: 1px solid black;
}
.mid_C {
width: 200px;
height: 120px;
float: left;
border: 1px solid black;
margin-right:10px;
}
.mid_R {
width: 200px;
height: 120px;
float: left;
border: 1px solid black;
}
.bot {
display: inline-block;
clear: both;
margin-bottom: 10px;
border: 1px solid black;
}
.bot_L {
width: 450px;
height: 80px;
float:left;
border: 1px solid black;
}
.bot_R {
width: 200px;
height: 80px;
float: left;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="main">
<div class="margins">
<div class="top_H"></div>
<div class="mid">
<div class="mid_L"></div>
<div class="mid_C"></div>
<div class="mid_R"></div>
</div>
<div class="bot">
<div class="bot_L"></div>
<div class="bot_R""></div>
</div>
</div>
</div>
</body>
</html>
here i am trying to create a container div(margins) inside the main div, with the gap of 10 px on each side, but when i view it in web browser it is overlapped. please let me know where am i going wrong.
Here is the fiddle.
Thanks
Offcourse it is overlapping. in your .main class you have set a height, and it's not high enough. also, if you want to be absolutely sure that nothing goes over your div, set an overflow in the css !
make height of main div auto :
.main {
width: 900px;
height: auto;
border: 1px solid black;
position:relative;
}
DEMO : http://jsfiddle.net/V9N3u/2/
Now define your .main min-height and remove height
as like this
.main {
height: 320px; // remove this
min-height: 320px; // add this
}
try this
min-height for .main class
.main {
width: 900px;
min-height: 320px;
border: 1px solid black;
position:relative;
}
The others are right about the height.
You may also want to remove the margin-bottom of .bot to get rid of the extra spacing (unless that's on purpose):
.bot {
display: inline-block;
clear: both;
margin-bottom: 10px; //remove
border: 1px solid black;
}
And you also have one too many " in your html:
<body>
...
<div class="bot_R""></div>
I'm trying to center a div within a div with equal margins. If possible, the box should be in the center of the page. So far I've got the following code:
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #3D3D3D;
padding: 30px;
}
#box{
background-color: gray;
border: solid black 4px;
}
#header {
height:60px;
width: 800px;
margin: auto;
border: solid black 2px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
line-height: 60px;
background: -webkit-gradient(linear, 0 0, 100% 0, from(black), to(white));
background: -webkit-linear-gradient(left, #52524E, #AAAAA4);
background: -moz-linear-gradient(left, #52524E, #AAAAA4);
background: -o-linear-gradient(left, #52524E, #AAAAA4);
background: linear-gradient(left,#52524E, #AAAAA4);
}
#header a {
font-size: 22px;
color: black;
margin: 30px;
text-decoration: none;
}
img#code {
display: block;
margin: auto;
margin-bottom: 10px;
margin-top: 30px;
width: 500px;
}
#container{
width: 800px;
border: solid white 2px;
margin: auto;
margin-bottom: 30px;
}
.splitter {
width: 500px;
height: 5px;
background-color:black;
margin: auto;
margin-bottom: 10px;
border-radius: 35px;
}
#text1{
background-color: #999999;
margin: auto;
margin-bottom: 30px;
width: 500px;
text-align: left;
border-radius: 5px;
}
.inside{
margin: 30px;
}
#text1 h3{
border-bottom: solid black 1px;
}
.border{
width: 200px;
margin-top: 20px;
margin: auto;
text-align: center;
}
#box2{
width: 500px;
height: 100px;
background-color: blue;
margin: 70px auto ;
position: relative;
}
.midbox{
width: 100px;
height: 50px;
background-color: red;
margin: 30px auto;
position: absolute;
}
and html
<html>
<head>
</head>
<body>
<div id="box">
<div id="header">
About Me
Hobbies
Pictures
Contact Me
</div>
<div id="container">
<img id="code" src="http://i380.photobucket.com/albums/oo250/willc86/IDreaminCode-Micro-TL-P-2_on_GR_BRAINS_GR_TC_on_LtGR_BACKGROUND_400x720in_for_Slideshow.jpg" border="0" alt=" photo IDreaminCode-Micro-TL-P-2_on_GR_BRAINS_GR_TC_on_LtGR_BACKGROUND_400x720in_for_Slideshow.jpg"/>
<div class="splitter"></div>
<div id="text1">
<div class="border">
<h3> Coding in clouds</h3>
</div /* border */>
<br>
<div class="inside">
<p> From coding, to Scripting. We all share
the same fate. We look, obsereve, figure out,
and analyze everything around us. We have an
eye to solve things, put things together, Fix
things, and show our pride when the work is done;
yet many of its roots gets unoticed.
<br> <br> To other souls,
we are just a body stuck in this world, but we, in fact
are the ones that assebles technology, make things whole,
and make everyone become one in this crazy thing
called the Web. We are Software developers. We code,
we fix, and we make it possible.
</div inside>
</div /*text1*/>
<div id="box2">
<div class="midbox">
hello
</div>
</div>
</div /* container */>
</div /* box */>
</body>
</html>
Something like this perhaps?
http://jsfiddle.net/tezf8/1/
You had two margin values on each box, so the "margin: auto;" was overriding the "margin: 30px;" in .testbox2
Here is the CSS:
#testbox{
border: 3px solid red;
width: 200px;
height: 200px;
margin: 50px auto 0;
}
.testbox2{
border: 3px solid blue;
width:100px;
height:100px;
margin: 48px auto;
}
Try This:
CSS
#testbox{
border: 3px solid red;
width: 200px;
height: 200px;
margin:0 auto;
margin-top:40px;
position:relative;
}
.testbox2{
border: 3px solid blue;
width:100px;
height:100px;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
HTML
<div id="testbox">
<div class="testbox2">
</div>
</div>
I'm trying to put my container (box) next to my other container (box). Instead of them being next to each other, they end up being above/below each other. I'd prefer them to be next to each other instead of this.
This is my code;
<div id="blog">
<img src="images/mlblog.png">
<img src="images/mltownareaconcept.png" style="width: 300px; height: 100px;">
<p>Check out the town area concept!</p>
<p>Click here to read the blog!</p>
#blog {
background: url(-) repeat;
width: 300px;
height: 250px;
border: 2px solid #855E42;
margin-left: 200px;
margin-top: 50px;
}
#forums {
background: url(-) repeat;
width: 300px;
height: 250px;
border: 2px solid #855E42;
margin-left: 900px;
margin-top: 0px;
}
Do you know how I can fix this? Thanks!
You need to "float" one of your containers and remove your "margin-left".
#blog {
background: url(-) repeat;
border: 2px solid #855E42;
float: left;
margin-top: 50px;
width: 300px;
height: 250px;
}
#forums {
background: url(-) repeat;
border: 2px solid #855E42;
margin-top: 50px;
width: 300px;
height: 250px;
}
if case of both containers having same height, you can use this style:
#blog, #forums { display: inline-block; }
In your HTML I don't see a Div for forums...You need to add a a float:left to #blog and #forums if you want them to sit next to each other
#blog {
background: url(-) repeat;
border: 2px solid #855E42;
float: left;
margin-top: 50px;
width: 300px;
height: 250px;
}
#forums {
background: url(-) repeat;
border: 2px solid #855E42;
float:left;
margin-top: 50px;
width: 300px;
height: 250px;
}
<div id="blog">Your code...</div>
<div id="forums">Your code...</div>
Add a clearing div below blog and forum.
.clear {
clear:both;
}
Also Thomas suggested float the forum div to right.
Good luck with that.