Here's the jsfiddle.
And for you guys understand, the split of the jsfiddle must be in a certain position. So, here's a printscreen.
The code in the jsfiddle works perfectly for mobile or bigger dimensions but I need it to that certain width. As you can see in the image, it's explained what I want. I want the badges to be always at right of the text no matter the propotions of the text.
I thought about the possibility of the <div> inside the <li>, but for what I've tried I got no success.
Related
I am struggling with getting the elements on this page to reflow correctly: http://www.cmattayers.com/moushegianlaw/
I want the semi-transparent box to be flush with the left side of the slider image (the photo of the gavel), and for them to be "fused together." The problem now is that when the window becomes narrower, the semi-transparent callout box drops below the portrait photo, but the slider photo stays where it is. I have tried different combinations of inline and block elements to achieve the desired effect, but nothing seems to change.
I also have a bizarre sliver of space to the left side of the semi-transparent box that I can't seem to get rid of. Adding negative left margins does fix it, but when it drops below, it's off-center and outside of view.
I also need to find a way to add padding to the bottom of the box. When the window is resized to show mobile view, the bottom of the box rests directly on the header text below (I would like there to be padding, but adding padding seems to add it to the text inside the box and not the outside of the box).
In that design, you've done a couple of HTML and CSS things I'd recommend against.
Firstly, your <div id="header"> should be a <header> element. That's more semantic and accessible. If you use multiple headers on the page (which is allowed), you can distinguish this one using role='banner'.
You shouldn't put all those blocks into the header. Rather keep the logo in the header, put the menu in a <nav>, and put the portrait + gavel image + dark paragraph into a <section>.
Next, and to answer your question, perhaps don't use inline and float to position the paragraph. inline and inline-block are great for flowing content, but not great for content you want to always be in one row. Rather give the parts display: table-cell (or use the new 'flexbox' CSS styles).
To get this right, you may need to restructure your HTML a bit.
I've got a Boostrap website with a navbar across the top and two columns divs in a row. The first column contains an image and should always stay fixed in position. The second column contains (potentially) a page or two of text and should scroll independently.
I've used position:fixed to hold the image in position, but my issue is that I would then like to add a link underneath it that links to the terms and conditions for the page.
BootPly
Is this possible?
Many thanks.
There a couple ways of doing this. I won't go into code since you don't have anything to work off of so I hope you can understand my explanations.
You can try simply putting the link position: fixed as well and set the top property of the link element so that it'll be positioned below your image (you can play around with this).
Use a div that is set to position: fixed that will contain both the image and the link. Then you can just simple put the image inside the div without any positioning and the link should go underneath the image without any positioning either.
You can set the text on the right side to be overflow: scroll and set the width/height of the right text in the div so that it can scroll. This will essentially keep the document still but allows the user to scroll up and down the text content inside the right side div.
Number 1 is the quickest solution, number 2 IMO is the best solution. If you need some help with the code, post a Fiddle so we can see what you're working with.
Try this:
DEMO
<div style="position:fixed">
<img src="http://placehold.it/100x300" class="img-responsive">
Terms and Conditions - Privacy Policy
</div>
It's the second time I have to use <ul> to create navigation menu with image and text in each anchor. The first time I managed to do this without fully separating the logic but now it seems a little bit more complicated so I want to solve my current problem and also, to know if there's a general approach to this task since I think it's very common but I'm not able to find clear implementation.
First is the example - JSFiddle as you can see, I have problem with styling/positioning the text in a nice, proper way. What I want is the image(bullet) to stay at the top-left corner as it is right now and I want all text to go right from the image. As you can seen in the first <li> when I get certain height the text i going under the image.
For some time now I was thinking about what is the way to make customizeable anchors with image and text. I've had this idea of using two spans so I can have more freedom on styling but as you can see in the example, it's either - me not knowing how ti use <span> properly or it's not best suitable for this case. If the text content is too big the text goes under, also the fact that with the margin only the first row is affected.. It seems to me that this is not the right way, so how can I style my anchor list (in this certain example) and is there a more generic way which will allow me to change some things related only to the text or to the image without having to remake the whole structure?
Images that are UI elements should be CSS backgrounds, not inline images. Positioning CSS backgrounds is easy because it doesn't interfere with the contents within the element. It's also better to put all the stylnig on the A-tag (other than positioning), not on the LI.
<li>Link<br />12.12.12</li>
CSS:
a.bullet {
background-image:url(...your image path...);
background-repeat:no-repeat;
display:block;
min-width:175px;
width: 100%;
min-height:60px;
padding: (what you want);
margin: (what you want)
}
please see this example http://jsfiddle.net/7trcV/
what I'm trying to achieve is ability to put an arbitrary icon to the right of the text in a way that text width is limited. In the example I posted the problem with the second (short text) is - the icon is displayed detached from the text.
Any help is appreciated!
How's this? http://jsfiddle.net/7trcV/5/
I gave the .content a right padding and set the icon as it's background.
Ok, try this http://jsfiddle.net/7trcV/6/ it should have sorted out your underline issues. I'm not addressing the clickable icon because that's a completely different requirement from your original question.
Ok sorry i did not look at your code properly for the first time... problem here is absolutely positioned icon which need to be floated next to your spans like this: jsfiddle link
after you do this you must set max-width of that span to be width of container-width of icon... hope this will help
You could use javascript to find the width of the span, and have the icon positions right next to it.
Exmaple here: http://jsfiddle.net/peduarte/KCttp/
I have this code: jsfiddle
I want it to look like this, but I do not want the surrounding div. I want to have the form overlay ontop of an image tag, but to look like the second link.
So how can i make the login box over the image without having the image as a background
In order to do what you want you must position the login box absolutely and set a z-index so that it will display properly. Here is a link: link
Personally I prefer to use a container with a background for this sort of thing, as positioning some thing absolutely can be complicated in the rest of the layout. Either way, this link should do what you want.