Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I tried using both inline and inline-block, but it doesn't work.
Here is my code:
http://jsbin.com/bixako/edit
in my opinion, the other answers are sort of hacky and do not address the real cause of this problem. The reason why this is happening is specifically related to using the html <figure></figure> tag which you've been putting your <img /> tags inside of.
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
While the content of the element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.
Source: http://www.w3schools.com/tags/tag_figure.asp
The <figure> tag is going to automatically displace the element's position independent of the main content flow, and this is why it only seems to move into flow by using CSS float or position: absolute because float and absolute position also displace an element's position from it's main position flow.
Eliminate the <figure> tags and you will once again be able to use white-space: nowrap;, display: inline-block; and all the regular content flow alignment tricks.
Set the #imglist li to be float:left and clear the #imglist to prevent any overlap.
I quickly edited your example here http://jsbin.com/jutalasuqi/edit?html,output
I shrank the images as the sizes didn't fit next to each other.
Add below code and it will work:
#imglist li figure {
margin:0;
padding:0;
display: inline;
}
But still you need to fix the image size, li margin/padding issue to make them beautiful/organize.
Thanks
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I've just stumbled upon this term/method of coding while learning CSS and from what I can understand the "content wrapper" is just a way to center align content of an html element within a container (specifically using a div element). I am not certain on the believability of this information, and would like someone to help further justify this please!
I believe the term is not standardized in any way and it is mainly about semantics. In general it is being used for elements containing some information or grouping several pieces of content together.
For me it is almost the same like container, just more related to the content. So it can be for example the central part of page (between header or footer) or the column with the article.
To simply say, content wrapper holds all visual elements and content on the page. Yes, it centers the content inside the <div> element which is conventionally used when using a content wrapper, but it's also opinionated.
This is normally achieved by using margins, and the most common way of using a content wrapper; eg:
.wrapper {
margin-right: auto;
margin-left: auto;
max-width: 960px;
// Or set a padding inside of the wrapper
padding-right: 10px;
padding-left: 10px;
}
Additionally, wrappers are also used for things like applying a sticky footer.
Otherwise, as for the difference between a container which may usually inherit the same properties, usually intends another kind of containment. One that sometimes necessary to implement a behavior or styling of multiple components.
It serves the purpose of grouping elements both semantically and visually.
The terms wrapper and container can also mean the same thing depending on the developer and what they intend. Just remember to use them in the right way.
Your wrapper can take any name you wish since you decide the css selector name. The styles you apply to that selector makes the change. Either center align or left or etc. It is just a convention that developers use. You will get used to the terminology in no time. Or build your own glossary.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
So, I imported a demo theme (wordpress). The theme came with some issues including a horizontal scroll that the developer is refusing to fix. I would like some assistance to explain how to remove the horizontal scroll or what is causing it so i find a way to fix it with CSS somehow.
site is located here - http://corporateh27.sg-host.com/
If you get horizontal scroll issues the best thing to do is put an outline on every element using:
* {outline: 1px solid blue;}
This then effectively adds a border to every element on the page (it is better to use the outline property as opposed to border because outline doesn't add any pixel values to the size of the elements the way border does).
You will then be able to see which element is causing the problem and fix it.
When you find the problematic element a lot of people tend to add overflow: hidden; on a parent element. Generally I would recommend finding the specific issue/child element causing the problem. In your case it is being caused by padding values added to an entire list of bootstrap classes. I've deselected them in the image. (see Image):
Instead of picking through all of those values, in your case it's probably worth just adding .content {overflow:hidden} which will remove overflow from the main .content class. Some of the code being used in that theme is woeful.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have button on my website. But it is clickable not only on the button itself but anywhere to the right outside of the button border. What should I do?
You have an <a> tag around the <div> tag of the button, which is very large. This <a> tag is the reason, such a large area is clickable. It would be best to format your button in an <a> tag instead of the <div>. This would resolve your problem. In general, it is best to avoid wrapping semantically block elements like div, p etc. inside inline elements like a or span.
<a href="#show-works" class="works">
Make sure, that the <a> tag is properly marked as display: block or display: inline-block, to prevent having it inline.
Here is a screenshot of your website's inspected elements and the reason of your problem:
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've tried messing with vertical-align, line-height, etc.
should show you what I'm trying to do. I put a little red arrow to show where I want the text shifted up to.
You'll need to modify the top margin in css or html, below are three ways of doing so.
edit in css:
h2 {
margin-top: 0px;
}
edit inline style in html:
<h2 style="margin-top="20px;"> remove "margin-top" from inline style
override inline style:
if you don't have access to your html you can override the inline style:
h2[style] {
margin-top: 0px;
}
Update:
Based on your comment on your OP, it looks like you only want to move your text up about 5px. you may want to use something like margin: 15px or margin: 20px to line your text up with the top of the grey box. The examples above still apply.
You are using an h2 tag surrounding the text. You should override the margin for that particular class in this fashion:
h2 {
margin-top:0;
}
If you wish to only target the text in that particular div you should specify that in your css like so:
#this-div h2 {
margin-top:0;
}
EDIT
As you are using inline styles in your html (which I personally tend to avoid) you will have to modify the inline styles of your h2 tag within your html to achieve the results you desire.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Whenever I'm creating a page with a horizontal component, most of the top-level elements are usually div's where I set display to inline:block. For example:
<div id='header'>
<div class='inline_block'> stuffff </div>
<div class='inline_block'> stuffff </div>
<div class='inline_block'> stuffff </div>
</div>
#header{width:100%}
.inline_block{width:20%; display:inline-block;}
This always achieves what I want it to, but it feels wrong. Can anyone shed some light on this for me?
The div element has no special meaning at all.
Authors are strongly encouraged to view the div element as an element
of last resort, for when no other element is suitable. Use of more
appropriate elements instead of the div element leads to better
accessibility for readers and easier maintainability for authors.
Source
In practicality, most sites use divs heavily, and that's fine. However, HTML5 adds new tags which do have a meaning (and even HTML 4 has tags which may be more appropriate, such as li, dl, etc.)
It is the user agent which implements the display characteristics a div. All browsers apply a default style of display:block (the same way as the user agent uses display:inline for spans). Contrary to other answers/comments I've seen, inline is not the same as inline-block, so just swapping spans for divs will not give the same behavior.
In certain cases, it makes complete sense to alter the display of select divs to inline:block. It's a useful behavior.
Is there a "better" element? Perhaps, but that decision should be based on properly structuring the document, not the default style assigned by the browser.
More importantly, ensure that you are using semantic markup and CSS that makes sense (using a class name of "inline-block" is not a good idea; if you change the corresponding CSS to something else, the name is now wrong).
There is nothing wrong with using inline-block, but I would question it if you are using classes like inline-block. You want to use more meaningful class names and if those classes need to be set to inline-block, that is fine. In your example, if all immediate child divs are to be inline-block, you can do it like this:
#header > div {
display: inline-block;
*display:inline; //IE7
*zoom:1; //IE7
}
One thing to note is that in IE7, inline-block doesn't work as expected unless hasLayout is triggered, which you can do with zoom:1.