My weebly landing page has a section at the top with half of it as text and the other half as an image. The problem is that there is always a gap to the right of the image and whatever is to its right. For example, if the image is "float: right" there will be a gap between the image and the border (banner?). If I flip flop the image and text and do "float: left" for the image there will be a gap between the image and the text box. I've tried changing the widths of just about everything, as well as the paddings of the image and text.
Attached is an image with the picture on the left. You will see the gap between the image and text. Thanks in advance.
Edit: apparently I can't post images yet.
#bannerleft {
float: right;
width: 466px;
height: 288px;
padding: 0px 15px;
background: url(banner-left.png);
border: 0px #222 solid;
border-right: none;
}
#bannerleft h2 {
color: #fff;
font-size: 28px;
padding: 0px 0px;
line-height: 1;
}
#bannerleft p {
padding: 8px 0px;
line-height: 130%;
}
#bannerleft .wsite-button {
margin: 3px;
}
#banner-right {
float: left;
width: 490px;
height: 268px;
padding: 0px 0px 0px 0px;
}
Related
I have chat message div which floats left and right but I when the reply is more than one lines then div falls down.
Please check my codepen div falling down
I want this output:
Don't let your bubble float, instead use a left margin.
http://codepen.io/anon/pen/grddmW
edit: I updated the code. The same goes for the right floating bubbles, of course.
.message .bubble {
background: #f0f4f7;
font-size: 16px;
padding: 12px 13px;
border-radius: 5px 5px 5px 0px;
color: #717070;
position: relative;
margin-left: 160px;
}
#chat-messages div.message.right .bubble {
border-radius: 5px 5px 0px 5px;
margin-right: 160px;
max-width: 79%;
text-align: right;
}
In both cases, no floating, but a margin to the left / to the right.
This website localhotchat.com has text flowing out of the red bar. I have tried adjusting it but, it doesn't seem to go away.
The 14pt text snippets on the homepage (and internal) are supposed to be inside the red_colored_strip but it ain't and half of it is flowing outside (the text is white in color so you will have to select it to view it). I am not familiar with Joomla and don't know how to fix this. Please offer some advice.
Here are the classes being used by the where the disoriented text is located on the html sheet.
.steps_blurb {
margin: 0 auto;
padding: 0;
color: #ffffff;
background-image: url('../images/redbox_bg01.jpg'); /*url('../images/redbox_bg02.jpg');*/
background-repeat: no-repeat;
background-position: top left;
width: 845px;
height: 65px;
border: none;
}
.steps_blurb01, .steps_blurb01td {
color: #ffffff;
font-size: 14pt;
text-align: center;
border: none;
/*margin-top: 40px; Added by yuvi to fix the red_banner issue*/
}
the table row that holds the red box, is above the next row..
to fix it, I would create a, p tag with a class which can pull the text up!
<style>
.pullup{
margin: -85px 0px 0px 0px !important;
position: absolute;
padding: 0px;
width: 93%;
text-align: center;
}
</style>
<p class="pullup">All text here</p>
:)
Find this class in your template.css:
.steps_blurb01, .steps_blurb01td
Located in root/templates/lhc13/css/template.css
And add this:
margin-top: -20px;
So the whole block looks like this:
.steps_blurb01, .steps_blurb01td {
color: #ffffff;
font-size: 14pt;
text-align: center;
border: none;
margin-top: -20px;
}
You can adjust -20 up or down if you need more or less space.
I am scratching my head as to what I've done here in my H1 Logo
The first image shows what is messed up and the second image shows how it should be on the same plane. I have to give link to image as I don't have enough reps yet. Link to image
Here is the website, as as I am not sure what code would fix this: afirewithin.me
Your CSS:
#logo h1 {
font-size: 48px;
float: left;
margin: -7px 0px 0px;
color: #262728;
background: url('images/h1_border.png') no-repeat scroll right 25px transparent;
padding-right: 10px;
}
Change it to:
#logo h1 {
font-size: 48px;
float: left;
margin: 16px 0px 0px;
color: #262728;
background: url('images/h1_border.png') no-repeat scroll right 4px transparent;
padding-right: 10px;
}
Adjust the margins and the background 4px for exact spacing etc.
Screenshot:
You have a margin of 32px 0 0 on your h2
try installing firebug for debugging
I'm try to display two rows of six columns and have them shrink when the browser window shrinks. The original css displays number of columns depending on the image size, each image floating left, so for different screen sizes I end up with large spaces.
.ngg-albumoverview {
overflow: hidden;
margin-top: 1px;
margin-left: 0px;
width: 100%;
clear:both;
display:block !important;
}
.ngg-album {
float:left;
height: 100%;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #fff;
}
/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
overflow:hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-album {
overflow: hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-albumtitle {
text-align: left;
font-weight: bold;
margin:0px;
padding:0px;
font-size: 1.4em;
margin-bottom: 0px;
}
.ngg-thumbnail {
float: left;
margin-bottom: 10px;
margin-right: 2px;
text-align: center;
font-weight:bold;
background-color:#0F0F0F;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px
}
.ngg-thumbnail img {
background-color:#A9A9A9;
border:0px solid #1D1D1D;
display:block;
margin:4px 0px 4px 5px;
padding:4px;
position:relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width:200px;
}
.more {
width: 100%;
background-color:#0F0F0F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
.ngg-thumbnail:hover {
background-color: #333333;
}
.ngg-thumbnail img:hover {
background-color: #FFFFFF;
}
.more:hover {
background-color: #333333;
}
.ngg-description {
text-align: center;
}
When I add this css to .ngg-albumoverview it displays six columns ok and shrinks them, but the second image is placed under the first, instead of alongside, with the third image alongside the first.
columns:100px 6;
-webkit-columns:100px 6; /* Safari and Chrome */
-moz-columns:100px 6; /* Firefox */
CSS columns are just segregations of the page and flow the same as the rest of the page. Your images are laid out like this:
[1][3][5]
[2][4][6]
because the flow of a page goes top to bottom and expands as necessary depending on element widths.
Your images will not be in the order you want unless you remove the columns and replace it with a responsive grid. If you want the images to appear like:
[1][2][3]
[4][5][6]
you need to adjust your .ngg-thumbnail widths to be a percentage (that incorporates the margin, border and padding spacing in between and adds up close to 100% between 3 of them), float them to the left and give your .ngg-thumbnail img a max-width: 100%; and height: auto;. Be sure to float the .ngg-thumbnail parent element and not the img or they will be removed from the document flow and not line up with the grid unless you perfectly size everything (and you don't want that).
Almost forgot - make sure you add a clear: left; on the 4th image if your widths don't add up to 100% so it starts on a new line by default. You can select the 4th image with:
.ngg-thumbnail img:nth-of-type(4);
Here is a good resource for you if you'd like an enjoyable way to learn more about this.
I am not able to align my div named #time horizontally with another div named .content.
Click here for a live version of the website - https://dl.dropbox.com/u/73176512/InteractiveGuide/index.html
The time div is not aligning with the content div. Code can be viewed by right clicking and viewing source. Or I can paste it here if requested.
I am floating the #time div right.
Change your code with this,
.upper {
border-radius: 20px 20px 20px 20px;
float: left;
min-width: 1048px;
padding: 10px 0;
}
.content {
background-color: #FFF9EC;
border: 1px solid white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 5px gray;
float: left;
margin: 10px 0;
min-width: 1024px;
padding: 10px;
}
Thanks...
Please remove padding Left and Right form .content
Thanks
Safder Jaffri
here is the solution enjoy just give your upper class min-width to 1070px
.upper
{
float:left;
padding: 10px;
border-radius: 20px 20px 20px 20px;
min-width: 1070px;
}
Add a negative right margin to #time, this way:
#time {
margin-right: -40px;
}
Give the #time div a margin-right of -22px (I just eyeballed this so check for sure)