See image attached - I want to bring the 'left' and 'right' 's closer together so they remain as close as both are to the header, in blue above.
this is my CSS for both left and right 's ... thank's a lot!
.left {
float: left;
position: relative;
background-color: #DDFF00;
margin-top: 40px;
margin-bottom: 10px;
height: 500px;
width: 10%;
}
.right {
float: right;
position: relative;
background-color: #FFE6E6;
margin-top: 40px;
margin-bottom: 10px;
margin-left: 10px;
height: 500px;
width: 88%;
}
.left {
float: left;
position: relative;
background-color: #DDFF00;
margin-top: 40px;
margin-bottom: 10px;
height: 500px;
width: 10%;
}
.right {
float: right; /*<-change to left */
position: relative;
background-color: #FFE6E6;
margin-top: 40px;
margin-bottom: 10px;
margin-left: 10px; /*<-and play with that too*/
height: 500px;
width: 88%; /*<-or increase that, without any changes above */
}
Related
I would like put the red box(Block E) below Block C and next to Block D, and at the same time move BLOCK C up with 1% margin between the block A and itself. I've tried with different strategies but never been able to solve the problem.
Here's my code:
.newsblockContainer {
background-color: #000000;
width: 89.2%;
margin-left: 4vw;
margin-top: 3vw;
height: 73.3vw;
overflow: hidden;
}
.blockA {
width: 59%;
height: 27vw;
background-color: #FFAE00;
margin-left: 1%;
margin-top: 1%;
float: left;
position: relative;
}
.blockB {
width: 38%;
height: 34vw;
background-color: #FFAE00;
margin-left: 1%;
margin-top: 1%;
float: left;
position: relative;
}
.blockC {
width: 59%;
height: 23vw;
margin-left: 1%;
float: left;
background-color: #FFAE00;
margin-top: -9.45%;
position: relative;
}
.blockD {
height: 36.7vw;
width: 38%;
margin-left: 1%;
background-color: #FFAE00;
float: left;
margin-top: 1%;
position: relative;
}
.blockE {
height: 15vw;
background-color: red;
position: relative;
margin-top: 1%;
width: 59%;
margin-left: 1%;
}
<div class="newsblockContainer">
<div class="blockA">
block A
</div>
<div class="blockB">
block B
</div>
<div class="blockC">
block C
</div>
<div class="blockD">
block D
</div>
<div class="blockE">
block E
</div>
</div>
Any suggestions?
Fiddle: https://jsfiddle.net/j8hg3hf1/1/
Use absolute positioning instead of relative positioning for the ones you need to move. You 'll need include attributes for the location in px, %, etc.
Edit:
You can keep the relative positioning and utilize the top attribute. The 1% margin thing may be slightly tricky this way but it can surely approximate it.
.blockE{
height: 15vw;
background-color: red;
position: relative;
top: 308px;
margin-top: 1%;
width: 59%;
margin-left: 1%;
}
This along with changing the .blockC to top: -10px changes the image to this.
Here's a link to how the image appears
https://i.imgur.com/zLhoPgb.png
Check this out. It worked. If you need modification, please comment.
.newsblockContainer {
background-color: #000000;
width: 89.2%;
margin-left: 4vw;
margin-top: 3vw;
height: 73.3vw;
overflow: hidden;
}
.blockA {
width: 59%;
height: 27vw;
background-color: green;
margin-left: 1%;
margin-top: 1%;
float: left;
}
.blockB {
width: 38%;
height: 34vw;
background-color: blue;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%;
float: right;
}
.blockC {
width: 59%;
height: 23vw;
margin-left: 1%;
margin-top: 1%;
float: left;
background-color: pink;
}
.blockD {
height: 36.7vw;
width: 38%;
margin-left: 1%;
background-color: #FFAE00;
float: right;
margin-top: 1%;
margin-right: 1%;
position: relative;
}
.blockE {
height: 15vw;
background-color: red;
margin-top: 1%;
width: 59%;
float: left;
margin-left: 1%;
}
<div class="newsblockContainer">
<div class="blockA">A</div>
<div class="blockB">B</div>
<div class="blockC">C</div>
<div class="blockD">D</div>
<div class="blockE">E</div>
</div>
I'm developing a site for mobile. Users have profile pictures that should have rounded edges, similar to twitter. However, on the smaller images, only some of the corners are being affected, even though the same images look perfect at the top of the page.
My page is here:
http://porndoraone.com/finnaRoot/index.php
Thanks!
The problem is the padding-left and padding-top. They change the overall width and height of the element and where the border is, change them to margins and you'll be fine:
.userpostpics{
width:150px;
height:150px;
border-radius: 15px;
margin:10px;
float:left;
margin-left: 15px;
margin-top: 15px;
}
in your CSS change
.userpostpics {
width: 150px;
height: 150px;
border-radius: 19px;
margin: 10px;
float: left;
padding-left: 20px;
padding-top: 20px;
}
to
.userpostpics {
width: 150px;
height: 150px;
border-radius: 19px;
margin: 10px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
Hope this will help you ..
.userpostpics {
width: 150px;
height: 150px;
border-radius: 15px;
margin: 10px;
float: left;
margin-left: 20px; /* Use margin- instead */
margin-top: 20px; /* of padding- */
}
You should add border raduis with 50% like here :
.userpics {
width: 190px;
height: 190px;
margin: 2px;
border-radius: 50%;
}
img.friendpics {
width: 200px;
height: 200px;
margin: 2px;
border-radius: 50%;
}
I want to integrate a nivo slider on this page Link The slides should go into the screen I have on top on the page. At the moment I struggle to get the slider images into the screen image.
HTML:
<div class="top" >
<img src="screen.png" style="margin-top: 0px; margin-bottom: 10px; " />
<div class="slider">
<img src="slide-1.png" alt="" />
<img src="slide-2.png" alt="" />
<img src="slide-3.png" alt="" />
</div>
</div>
CSS:
#content { height: 800px; width: 1000px; float: left; display: block; margin-top: 20px; }
#content .top { width: 1000px; height: 300px; display: block; float: left; position: relative; margin-left: 20px; margin-top: 20px; }
#content .text3 { width: 200px; display: inline-block; margin-left: 20px; }
#content .text4 { width: 300px; height: 90px;margin-bottom: 10px; }
#content .face { width: 300px; height: 300px; display: block; float: left; position: relative; margin-top: 20px; }
#content .bottom { width: 1000px; height: 400px; display: block; float: left; position: relative; margin-left: 0px; margin-top: 45px; }
#content .box1 { width: 236px; height: 350px; background:url(box1.png) no-repeat; display: block; float: left; position: relative; margin-left: 0px; margin-top: 20px; }
#content .box2 { width: 236px; height: 350px; background:url(box2.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; }
#content .box3 { width: 236px; height: 350px; background:url(box3.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; }
#content .box4 { width: 236px; height: 350px; background:url(box4.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; }
#content .slider { width: 360px; height: 235px; margin-left: 60px; margin-top: 40px; overflow: hidden; }
Here is my whole code:
HTML: Link
CSS: Link
What should be done to get the nivo slider running properly?
I used the Javascript and CSS from this site Link
You are initializing #slider in the header but the div is a class="slider" change it to the ID or switch the id to the proper class
/** EDITED **/
Change your CSS to this:
#content .slider {
width: 350px;
height: 235px;
margin-left: 60px;
margin-top: 40px;
overflow: hidden;
position: absolute;
top: 12px;
right: 133px;
}
you are calling nivo slider by id in js and while you are only using css class there in html
use this
$(window).load(function() {
$('.slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 500, // Slide transition speed
pauseTime: 6000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
controlNav: true, // 1,2,3... navigation
directionNav: false, // Next & Prev navigation
pauseOnHover: true // Stop animation while hovering
});
});
or wrapp a div named slider around slider class
I have a problem with my website. It looks great on my 20" screen but on the 11" it does not. The #logo is covering #menu and the #bubble appears beneath the #frame. As you see in the code, I have set up precentage size parameters because I found such a solution in a tutorial. It worked for many elements but not for all. What is the problem?
I believe this may be something to do with the #bubble height and width because it is still in ems. When I tried doing it with percentages, I lost the circular shape and the #bubble went to the bottom of the page often.
HTML:
<body>
<div id="top">
<div>
<p id="logo">XXXXXXXXXXX</p>
<div id="menu">
<h3 id="test">xxxxxx</h3>
<h3 id="test2">xxxxxx</h3>
<h3 id="test3">xxxxxx</h3>
<h3 id="test4">xxxxx</h3>
<h3 id="test5">xxxxxx</h3>
</div>
</div>
</div>
<div id="frame">
<div id="main"></div>
</div>
</body>
CSS
body {
width: 100%;
margin-top: 0%;
margin-left: 0%;
margin-right: 0%;
background-image: url("http://www.wallpapersmood.com/uploads/2010-07/july-high-defintion-wallpaper/1280109101-FWEMRDA.jpg");
}
#top {
background-color: black;
width: 100%;
height: 50px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
#logo {
text-align: center;
position: absolute;
margin-top: 0.5%;
margin-left: 2%;
color: white;
font-family: Impact,cursive;
font-size: 160%;
}
h3 {
width: 10%;
height: 10%;
border-radius: 9px;
text-align: center;
line-height: 2;
display: table-cell;
font-size: 120%;
font-family: "Verdana";
color: white;
}
h3:hover {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.35, rgb(60,156,196)),
color-stop(0.68, rgb(90,188,236)),
color-stop(0.84, rgb(117,226,255)));
opacity: 1;
}
#menu {
float: left;
width: auto;
height: auto;
margin-left: 20%;
margin-top: 0.5%;
}
#frame {
width: 78%;
height: 90%;
border: 1px solid;
border-radius: 20px;
margin-left: auto ;
margin-right: 5%;
margin-top: 1%;
background-color: white;
opacity: 0.9;
float: right;
}
#main {
height: 90%;
width: 80%;
border: 1px solid black;
border-radius:15px;
float: right;
margin-right: 2%;
margin-top: 2%;
margin-bottom: 2%;
background-color: white;
overflow: auto;
}
#main img {
max-width: 60%;
max-height: auto;
margin: auto;
margin-top: 2%;
display: block;
border-radius: 15px;
}
#bubble {
position: absolute;
height: 14em;
width: 14em;
border: 6px dashed white;
text-align: center;
border-radius: 100%;
margin-left: 1%;
margin-top: 1%;
opacity: 0.6
}
#bubble p {
position: relative;
top: 20%;
font-size: 200%;
color: white;
font-family: "Impact";
}
You can use CSS #media queries to apply different styles for different screen sizes.
Read here.
Basically it's like if statements.. "if the window size is more than 500px" apply a certain set of CSS rules.. "if the window size is less than 500px and more than 300px" apply another set of rules etc..
I'm trying to let a div container with a black background substitute as the border style for a bar graph that has a border radius. Here's the HTML/CSS:
HTML:
<div class="graph-outer">
<div class="inner-left-cap"></div>
<div class="inner-left-bar">40%</div>
<div class="inner-right-bar">60%</div>
<div class="inner-right-cap"></div>
</div>
CSS:
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border-radius: 10px;
padding: 1px;
}
.inner-left-cap {
background: orange;
width: 2%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
.inner-left-bar {
background: orange;
width: 38%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 2%;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
.inner-right-bar {
background: red;
width: 58%;
height: 100%;
text-align: center;
float: left;
}
http://jsfiddle.net/2ZkDz/115/
The issue in which I am having is that the corners don't look as if they have any black border style whatsoever. What can I do?
Use this version with overflow:hidden and a explicit border on your outer controller and no padding.
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border:1px solid black;
border-radius: 10px;
overflow:hidden;
}
.inner-left-cap {
background: orange;
width: 2%;
height: 100%;
float: left;
}
.inner-left-bar {
background: orange;
width: 38%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 2%;
height: 100%;
float: left;
}
.inner-right-bar {
background: red;
width: 58%;
height: 100%;
text-align: center;
float: left;
}
http://jsfiddle.net/2ZkDz/116/
I've updated your CSS, I changed the caps to 3% each and made the bars smaller. The bar on the inside was going over the caps.
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border-radius: 10px;
padding: 1px;
}
.inner-left-cap {
background: orange;
width: 3%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
.inner-left-bar {
background: orange;
width: 37%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 3%;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
.inner-right-bar {
background: red;
width: 57%;
height: 100%;
text-align: center;
float: left;
}
http://jsfiddle.net/2ZkDz/119/
http://jsfiddle.net/2ZkDz/120/
border-radius: 10px;
padding: 2px;
That should do it! I just threw on a border-radius and bumped up the padding 1. There should be an easier way using the actual border property but im feeling lazy and this does it
a solution without the end-caps (that way the bar width matches the values)
demo jsfiddle
the graph-outer is 20px tall so the nested bars are 18px (20px - 2px (1px top/bottom padding)), set the border-radius on the bars to 9px each (half of the height so each corner is uniform and matches the parents curvature)
.inner-left-bar {
background: orange;
width: 40%;
height: 100%;
text-align: center;
float: left;
border-radius:9px 0 0 9px; /* add this */
}
.inner-right-bar {
background: red;
width: 60%;
height: 100%;
text-align: center;
float: left;
border-radius:0 9px 9px 0; /* and this */
}
/* and drop the end-caps */