I don't know how can I delete blank spaces between vertical blocks. Example:
I want that all blocks are located under each other. Each block have display: inline-block. I experimented with position and display, but all in vain.
Please send me the URL First,You can use jQuery Masonry
you must embed in in your website,and you can use CSS techniques to fix the issue
you can see the demo in here
and please note that, you can define a class for those object and interact with them using CSS code,you can define specific height for them,please note that the images are not loaded correctly in your web page and you have to fix them first
if you have any other question,please feel free to ask me.
Good Luck.
PS: there are some other alternatives exists for the jQuery Masonry,one is Isotope and the other is a CSS-Driven tool Called Salvattore
Related
I'm an HTML/CSS beginner. I've made my first homepage without too much difficulty but I want to add some style to my header.
Could someone point me in the direction of a tutorial or basics of how to build a grid for my links or a starting point? I've been looking for one and typing up grid or table results in tutorials to create actual tables so I've not found anything appropriate to what I want to do yet.
From what I can gather if I can separate each list item and give it a border my idea is achievable but I'm struggling with positioning.
I don't know if Dreamweaver supports it, but i'd wrap the menu in a <div> that uses the CSS display: table-row attribute. Then i'd wrap each menu item in a separate <div> that uses the CSS display: table-cell attribute.
There is plenty of resources out there, I would reccommend checking around CSS Tricks and Site Point.
Here is one from sitepoint
Here is one from CSSnewbie
Here is one from CSS-Tricks
I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.
i've been trying to create pattern for my website using div elements. The problem is than my knowledge in css is very limited and i've no idea how to make the pattern like this
I tryed to use block, inline-block, but were not able to achieve the pattern i'm targeting to.
It's possible to do it with table, but than code looks like piece of thing.
It would be great if you will help me, because doing this not only to create a web site but also to learn css, so comments are really welcome.
Thank you in advance
make a parent div and add all properties to that like width of the container and height of the container. then add css property to each element individually or by grouping in class
Browsers I'm using for testing: IE, Chrome, FF;
Ideal layout example pdf: http://designobvio.us/dov2/Homepage1.pdf
Heres the link to the direct page http://designobvio.us/dov2/index.html
While Grid systems are excellent for laying out by width, I always stumble when using height constants.
Inside my code I have 2 major problems:
Ideally, I want to be encapsulate sections of my code by using
parent div that controls the height, margin-top. I've tried to
create this div colored a pale green and padded it for visuals.
this class is shown here:
siteBody #businessSection{ padding-bottom:200px; background:#0F9;}
I've also demonstrated idea in this imageURL: http://www.designobvio.us/dov2/Homepage1Encapulate.pdf
While trying to do this I've come up completely empty handed.
2.So next, I tried breaking down each section individually by using a class .businessInfo
#siteBody .businessInfo{height:200px; background:#ccc;}
Unfortunately this also didnt work and I have no idea why because all the grids line up perfectly.
I hope what I've stated above is understandable. I prefer solution one; however, if not possible 2 will work.
If I'm missing anything I'll response ASAP.
Thanks!
this problem stems from the use of float. For example problem : http://jsfiddle.net/GAvcL/
you can use clear attribute for solve problem.
Solution:
http://jsfiddle.net/qeDs3/
This is a common problem in html. Before closing the div that encapsulates the divs using float, use a div has clear attribute.
Here's the layout I'm trying to achieve http://jsfiddle.net/qeDs3/44/
I mocked it up on Indesign using Grid_960 templates: http://designobvio.us/dov2/Homepage1.pdf
Here are the divs I cannot make parents out of http://designobvio.us/dov2/Homepage1Encapulate.pdf
Through trial an error, grid 960 seems forces you to use the class container_12 in conjunction to .grid_12 as the parent tag.
Here's another full example: http://designobvio.us/dov2/index.html
How can i get gChild to be the parent
Heres paired down example: http://designobvio.us/dov2/index2.html
I'm trying to get the header tag to be the parent of its contents.
Does my layout not cooperate with grid960? Am I totally missing something stupid? Does it require a hack? If you need any clarification of anything I'll be right here and will response ASAP.
Thanks
Update The reason I'm trying to do this is so that I may gain control of those parent divs for ease of media query.
After EXTENSIVE research (lol) I've finally solved this problem.
Grid 960 has 2 extra classes which simply remove margins left and right named alpha & omega. I've never bothered learning the purpose/theory of these because I was dumb. The purpose of these classes are exactly what I was curious to, "nesting grids within grids;" thus allowing me to clear the float and control the parent div's that dont abide by the 12 column standard.
I hope someday this question/answer helps some other fool that refuses to read documentation.