I am trying to figure out the best approach to have a link with an image floated next to it inline, that will force the link to become multi-line as needed while keeping the image inline floated next to it.
I setup an example here - http://jsfiddle.net/ubernoob/tYeGR/
If you size the result window you will see that once it hits a small enough width the image will fall below the link.
How can I code this so the link will go to multi-line and leave the image floated next to it?
Try putting <img> tag before <h3> and remove float:left from <h3>
I've edited the jsfiddle: http://jsfiddle.net/tYeGR/7/
this example works: http://jsfiddle.net/jalbertbowdenii/tYeGR/18/ but i changed your floats to absolutely positioning the img's. if that's not good enough, #mediaqueries are the way to go. i tried two in jsfiddle but to no vail. probably user error.
You can absolutely position the images in their rows and then add some padding to the <h3> elements so the links don't get covered by the images:
.list img {
position : absolute;
right : 10px;
}
.list h3 {
float : left;
font-size : 12px;
padding : 10px 60px 10px 0;/*notice the extra 50px of padding I added to padding-right*/
min-height : 50px;/*Notice this is added beacuse the image will not dictate height since it is positioned absolutely*/
}
Here is a jsfiddle to mess around with: http://jsfiddle.net/jasper/tYeGR/19/
Related
I want to position a few small images beside a div and margin them correclty instead of being overlapped by the emphasized textcenter-div.
JSFiddle Demo:
`http://jsfiddle.net/k7gLfeuc/`
The Problem is: When I scale the browser-window, the images disappear behind the "center"-div instead of margin to it.
Both Navigation-Div and Center-Div are margin pretty well to each other. But the images wont.
I tried it already with "clear:left/right/both", but with no success.
What am I doing wrong? I just want the images left to the center-div to margin correctly to the center-div.
Than you.
Is this what you need? live demo http://jsfiddle.net/k7gLfeuc/2/
Add below to your existing code:
#side {
left:0;
width: 19%;
overflow: hidden;
}
I am currently working on this website: http://mdftanzania.com. I am using Wordpress and headway101. I want to have a full width green background color that applies to the begin part of the page: About Us and Services. I add a div class to the part of the page where the green background has to be. I tried to style the div class to a full width green background, this didn't work out and at the moment only a part is styled now (see the website: http://mdftanzania.com).
I understand that there is another solutions, that is creating a container or widget above the container for the content, where I place the first part of the page text in. The problem with this is that it is confusing for my client where to edit the text in the page. The simplicity of Wordpress goes basically away then. Because of that, I am looking for a solution with CSS styling, so the client is only dealing with the 's.
Does anybody has a solution for this?
Since you have predetermined a padding to the content block, it is obviously affecting all the child elements that are contained in it, including the div with green background, which means that you should either remove that padding and apply it only to specific elements, or apply this simple CSS workaround to your div:
{
margin: 0 -25px;
padding: 0 25px;
}
This makes it, in your words, "full width" and applies a padding to its content.
You have this rule set in your css:
.block-type-content {
padding-left: 25px;
padding-right: 25px;
padding-top: 120px;
}
So children of this container, even though they may have a width of 100%, have to obey this padding of their parent. That's why you don't get a full width green bar. You might try negative margin-left and right to expand your green bar:
.color {
margin: 0 -25px;
padding: 0 25px;
}
At least in Firefox/Mac, this solves your issue.
At this link:
http://thom239u.keaweb.dk/help/mit.html
i have a div called main (black border) and a nav (red border)
i have tried everything, why ain´t they a side
when they are empty they are side by side,
but when i put something in them they split.. ?
i tried to erase it all and start from beginning again, but wont help..
![enter image description here][1]
i'm trying to get i nav a left an a div box where i can change what's in it.
Please add
vertical-align: top; to #main
You should use float:left;
You can add that to the <Nav> and <Div id="main">
You're looking for
vertical-align:top;
Additionally, under the standard box model, they will not correctly align side by side at lower resolutions if you use width % and have a border/padding. You are using width:10% and width:89% for each element, I'm assuming you were trying to make them fit and 10%/90% wasn't working.
If you apply box-sizing to each of the elements, it will take into account the extra width allocated to borders/padding of that element, and allow you to simply state 10% width & 90% width.
You need only vertical-align to #main, since display:inline-block elements need to be aligned.
#main{
vertical-align:top;
/* other styles*/
}
whats-the-deal-with-display-inline-block
I have some unexplainable image margin/Space below img when including images in my wordpress theme. You can see it here: http://www.wlanradios.net/logitech-squeezebox-radio/
See the Amazon logo image inside the content or scroll down and have a look in the "Ähnliche WLAN Radios" sidebar widget with the small thumbnails. The images seem to have a little margin-bottom / Space below it I can not get rid off. I discovered the html/css with firebug but don't get the it where this margins comes from. I in fact tried to
img {
margin:0!important;
padding:0!important;
border:0!important;
}
to overwrite every possible causes for the margin, with no success.
Where is the margin coming from and how to remove it?
Just put to those imgs :
display: block;
UPDATE:
Some explanations: img is an inline element, so it has to deal with white-space, line-height, etc., as all inline elements. I guess the space you're seeing is actually caused by the line-height. So another solution if you want to keep your img as inline elements is to set its parent line-height: 0;.
Have you tried: vertical-align: middle
I have Deeply inspected the Issue, its a bit of haystick needle kind of thing.
1) Amazon Image box - Issue is with the td tag which creates a all sides padding of 6.71667px , This is FORCEFULLY created by the td,th padding which is set to 0.5em
th, td {
border-spacing: 3px;
//Tweak this Padding of 0.5em and you should destroy Amazon Extra Space
padding: 0.5em;
border: 1px solid #CCC;
}
You should be able to find and edit from line 183 of the above css theme from wp-content/themes/ar2-2-b-2-fixed/styles.css
2) Coming to the second issue with WLAN Radios Pic , This image is pushed in due to the DIV tags Padding all set to 4px which is acting on the WLAN Radio pics.
Here are the Issue Pics:
Amazon Image Issue Solved Pic
Hope this Helps :)
Check for your line-height on the img elements, and set it to 1. You must have a line height > 1 on a parent element.
You can also change the display of those img to 'block' (to avoid line spacing).
I have a couple of questions. Please see http://jsfiddle.net/POZR2/
Firstly if you scroll to the right you will see a white space, if you change the size of the screen/result box the size of the white space gets larger/smaller. The css for this is under the 'full' div and is:
#full{ background-color:#262626}
Secondly even though div id noint_box1 is centered in css it appears to be aligned left. This div is basically the 'body' of the html from the first heading to the last picture.
Thnkas
Give #full a min-width of 1061px - this for the first of the two issues.
For the other one... well, I'm not quite sure it's this that you want, but try applying the following rules to #noint_box1:
width: 958px;
margin: 18px auto;
your table is inheriting your centering, but not using it. add margins to it if you want it centered
table { margin: auto; }