I have a page having content mixed of P, UL IMG etc, I am trying to resize the image via CSS and align the image from top-left positions but when I do this the sometimes the content is overlapping image, sometimes the UL's bullets are out of grid. Please suggest the CSS for this
Here is the working demo on JSfiddle
.scrollable_content {
width: 1140px;
float: left;
padding: 10px;
border: 1px solid #ccc;
}
.scrollable_content > img {
float: left;
display: inline-block;
margin: 0 20px 0 0;
}
.scrollable_content > ul {
margin: 0 0 0 20px;
}
Thanks
Are you using Chrome browser? can you let us know which browser you use. as i don't see any overlapping on my side
I'm not seeing much overlapping while using chrome. I do see that you have a width: 1140px; wich isn't responsive. try using percentages for that instead. See the updated jsfiddle. Further i don't have any overlapping items. Hope it helps!
Related
I am working on a gallery grid (first block of 6 images) and I cannot for the life of me seeing why not all list items are displaying properly. It mostly displays correctly, however, if you downscale the browser, at about 700px, the items start flicking and not displaying as they should.
I usually use a right padding of 10px for my gallery items, as this didn't work on this occasion I have tried a right border of 10px but still the problem persists.
Can anyone see what the problem is? Live url is here.
Code is:
.feature {
ul {
list-style-type: none;
margin: 0 -10px 30px 0;
padding: 0 !important;
li {
border-right: 10px solid #ffffff;
margin-bottom: 10px;
position: relative;
float: left;
width: 33.33%;
img {
width: 100%;
}
.inner {
position: absolute;
padding: 20px;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
}
}
}
The reason is the (original) width/height ratio of your images: They are all 500x333px, but the third one is 600x400, which makes its automatic height slightly bigger than it is in all other instances. And therefore the 5th li element doesn't float under the third one (when only two fit in a row), but next to it, because the third is about 1px higher than the fourth one.
The easiest solution would be to change the original size of the fourth image to 500x333
My CSS positioning skills have always been truly terrible. I'm looking to place my nav bar next to my logo, as well as making it move with the page and not get all screwy on anything smaller than a maximized window on a 1080p screen.
What it currently looks like: http://5.9.78.201/abellant/
It will likely look odd if you're on a different screen size.
I've (so far) used methods found on here, to no avail, using relative, absolute, and even clearing before giving up on it.
Can anyone show me where I'm screwing this up? I'm quite embarrassed by the fact that of all things, my positioning is just so bad.
Thank you.
If you want to position your logo and navbar at the center of the page::
Set #header "display:inline-block", "height:auto" and "text-align: center;" and remove all the css you have added to #logo and #navigation
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
text-align: center;
}
And if you want to set your logo and navigation side by side::
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
}
#logo {
float: left;
width: 50%;
}
#navigation {
float: right;
margin: 40px;
}
If you want to move your header section with page scroll. Set #header to "position:fixed".
So part of the problem is that you have a fixed left and right margin. Remove the fixed left and right margin for #logo and #navigation and do something like the following in your CSS:
#header {
margin: 0 auto; /* 0 px on top and bottom, auto on left and right => centered for a block element */
width: 960px; /* You need a width that will accomodate the logo and nav */
}
To make this work at other sizes, you'll need to look into CSS3 breakpoints. Here is a tutorial:
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en
I solve your problem.
.container {
min-width: 500px;
position: relative;
text-align: center;
}
#logo {
display: inline-block;
vertical-align: middle;
}
#navigation {
display: inline-block;
}
If you noticed that the logo and the menu are NOT perfectly center it's because your image has a small white space, if you could delete that space and replace the new image it will be PERFECTLY center :)
So i have not seen this problem before, so im not quite sure what to ask but..
I have a menu with is inside a container, i want it to float right, it does but just not all the way, i cant figure what is stopping it. so i need a little help here?
My <ul> is floating right like this:
nav > div div > div > ul.nav {
position: relative;
float: right;
z-index: 6;
}
but i think it eayser to see in this codepen
The problem is that an element in the .top-bar is too high. Specifically the .top-bar .lang. This has a padding for the top of 1px, causing it to overflow out of it's container. There are two ways to solve this.
The best way is to change the padding on .top-bar .lang.
.top-bar .lang {
padding: 0 10px; // this was 1px 10px 0
font-size: 9px;
border-right: solid 1px #2d2d2d;
}
And the easier way is:
.top-bar .container {
overflow: hidden;
}
As this causes the overflowing content to be hidden.
All that remains then is to remove the padding on the right side of the div collapse navbar-collapse navbar-ex1-collapse.
You need two changes -
Add clear: right; style in ul.nav. I am writing the updated CSS -
nav > div div > div > ul.nav {
position: relative;
float: right;
z-index: 6;
clear: right;
}
Also, add the following CSS -
.collapse.navbar-collapse.navbar-ex1-collapse {
padding-right: 0;
}
Hope this helps :)
The problem coming from the following code.
#media (min-width: 1200px)
.container {
width: 1170px;
}
Your above code will assign the width:1170px to all the monitors which is more than 1200px. It means if I open your code in 1366px monitor, I can see the container with only 1170px;
Change your code according to your needs.
Hey I want to put that lower div box beside that upper box with details but when I try to position absolute it I goes down idk why (I made the parent div of all three divs as position rlative ) , how am I supposed to fix this or any other better way to do this .
Here is the screenshot -
http://www.findportugal.com/Untitled.png
Div Description
#user_panel - div around all the other divs ie parent div
#user_details - div with details on top
#user_photos - div with photo heading
#user_current - div at the lower part
CSS :
#user_panel
{
color: white;
position: relative;
}
#user_details
{
padding: 0 0 30px 0;
}
#user_details table
{
padding: 30px 20px 10px 30px;
border: 1px solid grey;
margin: 0 60px 0 40px
}
#user_details table tbody tr td#right
{
padding: 0 0 0 100px;
}
#users_title
{
padding: 20px 0 0 50px;
}
div#user_photos
{
width: 850px;
height: 230px;
border: 1px solid grey;
margin: 50px 0 0 40px;
padding: 0 0 20px 20px;
}
#user_current
{
border: 1px solid grey;
width: 320px;
position: absolute;
}
You want a div OVER another div and you are saying it should NOT OVERLAP which is not possible, instead decrease the size of upper div, use float: left; and this will let the div below shift besides the floated div
Also don't forget to clear floats, or you'll spend other 2 hours thinking what the hell is going on with the element positions as well as background color
And if you want to use position: absolute; than the div will overlap, so in this case, use position: relative; for the container element and than use position: absolute; with top right bottom left properties to set your element correctly.
Don't forget position: relative; else your absolute div will run wild in your page
I'm assuming you want to place that lower div box in the empty space to the right of the upper-left div box, and not actually overlapping the other box? If so, you would be better off using floats.
You haven't shown your html, so let's assume the upper-left box has an id of "details", the bottom box has an id of "current-pic", and the full-width box in the middle in your screenshot as an id of "photos". A starting point for building the layout would then be like the following.
EDITED: Sorry, I wrote the answer before you updated your question with your HTML. The code is rewritten below to show the ids in your original html.
The HTML could be:
<div id="user_details"></div>
<div id="user_current"></div>
<div id="user_photos"></div>
The basic layout CSS would be something like:
#user_details {
float: left;
width: 50%;
box-sizing: border-box;
/* other styling stuff like padding, etc. */
}
#user_current {
float: right;
width: 50%;
box-sizing: border-box;
/* other styling stuff like padding, etc. */
}
#user_photos {
clear: both;
}
This doesn't account for any of the content inside the boxes, or spacing between the boxes, but the box-sizing rule will help you to maintain your layout and build up margins, padding, and borders without them breaking it.
I have a template which has 3 equally spaced boxes, the problem is that i am unable to get the last box to align correctly the first two elements.
how do i add a 3 block equally spaced box in css without tables?
my attempt http://khine.3b1.org/activities/activities.html
any advise much appreciated.
thanks
Make all three boxes float left:
.box ul.supports-list li.last {
width: 200px;
position: relative;
float: left;
}
And provide more width overall:
.box .holder .frame {
background: url(./box-b.gif) no-repeat 0 100%;
width: 620px;
padding: 18px 4px 42px 16px;
}
try to change the next CSS rules to:
.box ul.supports-list {
font-size: 11px;
list-style: none outside none;
margin: 7px 0 0;
overflow: hidden;
padding: 0;
}
.box ul.supports-list li.supports-list-item {
display: list-item;
float: left;
outline-style: none;
width: 200px;
}
.box ul.supports-list li.last {
float: left;
width: 200px;
}
My guess would be to put each box into a div, and then adjust each div's margin-left and margin-top properties to get them to all line up. You'd also want to set the float property of all of the boxes to left. It might not be the most-widely-accepted way of doing things, but that's how I usually solve problems like this.
You can take a look at this example jsFiddle I did for you here: http://jsfiddle.net/Cwca22/g8x5E/ - Hope this helps!