My website is www.rosstheexplorer.com.
I am using the Penscratch theme although have modified many aspects of it.
I recently made a number of changes including making my header and navigation bar full width.
One of the unintended consequences of these changes is now my widget-area is no longer sitting side by side with my content-area.
I used the Developer Tools on Google Chrome and started trying to alter the width, padding and margin of both elements. Nothing I tried resulted in anything close to what I wanted. I would do more experimentation but I have very little idea as to where to begin.
In style.css do I have to made a modification to
.site-content .widget-area {
margin-top: 27px;
padding-top: 24px;
border-top: 3px solid #eee;
}
or
.widget {
line-height: 2.09231em;
position: relative;
overflow: hidden;
width: 100%;
margin: 0 0 27px;
padding: 0 0 27px;
border-bottom: 1px solid #eee;
See if this code works for you:
#primary.content-area {float: left;width: 70%;}
#primary.content-area .site-main{width:100%;}
.widget-area{float:right;width:30%;}
Inspecting your site, what i understand is, it is an issue related to float.
try applying
float:left
for your ".widget-area"
Related
My website is www.rosstheexplorer.com.
I am using the Penscratch theme although have modified many aspects of it.
I recently made a number of changes including making my header and navigation bar full width.
One of the unintended consequences of these changes is now there is a lot of space between the navigation menu and primary and secondary areas.
I used the Developer Tools on Google Chrome and started trying to alter the width, padding and margin of a variety of elements on the page.
The below code was the closest I got to solving the problem. The below only works though if the browser window is certain dimensions. If the browser window is to small then the below code forces the content-area and widget-area to overlap the navigation menu and header.
Is there a way I can modify the below code so it works regardless of the browser window size.
.widget-area {
float: right;
width: 30%;
margin-top: -350px;
}
#primary.content-area {
float: left;
width: 70%;
margin-top: -350px;
}
Or is there another completely different solution?
Change the below css
style.css:1932 #screen and (min-width: 75em)
.site {
max-width: 1153px;
margin: 400px auto; // change this to margin: 5px auto;
padding: 54px 108px;
}
:43 #screen and (min-width: 75em)
.site {
max-width: 1153px;
margin-top: -50px auto; //remove this minus is not recommended
padding: 54px 108px; // change this to padding: 0px 108px 54px 108px;
}
kindly change the above margin and padding
It's much simpler than that:
http://www.rosstheexplorer.com/?custom-css=cedea99283
Line 45: margin-top only accepts 1 property, you specified 2 (50px auto). Just remove the "auto"
Please see this page:
http://artezanatostudio.com/index.php
Notice that at the bottom there is a margin below the footer bottom line. Thus far, all my efforts to get rid of it have failed. I have attempted to use:
body, html { margin: 0; padding: 0; }
#footer { margin: 0; padding: 0; }
I even tried:
#footer { margin: -50px; }
All to no avail.
While the page has many CSS files, the two important ones that I am editing to try to remove the bottom space are the following
site_above/includes/templates/zenn/css/style.css
and
site_above/includes/templates/zenn/css/style-ci.css
If you can provide any clues to assist me it would prevent me from going bold prematurely and you will have the satisfaction that you helped someone who was going mad.
Thanks in advance.
#footer > div.row {
margin-bottom: 0px;
}
The style sheet the issue is coming from is style-ci.css and the speciifc rule is on the .row div.
Remove:
div.row{
margin-bottom: 26px;
}
and make it margin-bottom: 0px;
Note: this is really easy to figure out using Chrome dev tools!!
Try this:
div.row {
font-family: MuseoSans-Reg, Verdana, Geneva, sans-serif;
color: #7f7f7f;
margin-bottom: 0px;
}
They key here is that margin-bottom was changed to 0px.
Do you use a browser with a decent web inspector? I was able to pinpoint it in under 10 seconds using the Chrome web developer console.
Inside your footer there is a div with class row. It has a margin-bottom with 26px. Remove this value and your issue is fixed.
div.row {
font-family: MuseoSans-Reg, Verdana, Geneva, sans-serif;
color: #7f7f7f;
}
You could also set it to zero but if it's not necessary I suggest you to remove it.
Please remove margin-bottom: 26px; from Style-ci.css (line no: 86)
ie change your div.row css as follows
div.row {
font-family: MuseoSans-Reg, Verdana, Geneva, sans-serif;
color: #7f7f7f;
}
On your <div class="row"> inside your <div id="footer"> remove that margin-bottom: 26px;
You are able to see this very easily by yourself.
If you are using Mozilla Firefox/Chrome:
Right click on the element that you have issue with
Select the last option - Inspect element (or something similar to it)
Start hovering over the elements in the code that popped up to see what makes the additional space appear there!
As you go trough the relevant css styles that appear on right side, you will soon find out where is some additional margin.
Which is in this case as everyone already mentioned in the element div.row:
div.row {
font-family: MuseoSans-Reg,Verdana,Geneva,sans-serif;
color: #7F7F7F;
margin-bottom: 26px;
}
Hope it helped a little!
Of course there could be a better solution, but for the moment you could try:
#footer {
overflow: hidden;
}
So i'm making this site which is based on wordpress for adding dynamic content but i have set up an entirely HTML/CSS and little jQuery built theme.
The issue i'm facing is when I had to place the front page posts like teasers with a link to the entire post
teaser like this :- http://i.gyazo.com/dda9c60eb3a822b84bdcb3e0067dfc3e.png
as i knew nothing about wordpress themes, i took help of esclate's php files and just made up a code that could harbour my css classes,id's and properties with it.
Hence to start with, the post's elements in header.php was setup like this :-
<div class="post-wrapper">
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="content">
that was the same for the single.php file,
i successfully made the site have teaser posts for the front page but the issue arrived when the same properties of those above ID's got called to the single.php file as the classes and id's were similar, which is shown/open when the user clicks on full article,
i made another class for the single.php post elements but it had no effects.
here is what it looked like :- http://i.gyazo.com/0ec25c1db676463dd6aea209480e9568.png
it shows a teaser and not the full post, how can i rectify this?
btw the css code for them all
#page {
width:100%;
margin: 0 auto;
padding: 0;
display: inline-block;
}
#page-bgtop {
}
#page-bgbtm {
margin: 0px;
padding: 40px 50px 0px 50px;
}
#content {
float: left;
width: 100%;
padding: 0px 0px 0px 0px;
margin-left: -40px;
padding: 20px;
display: inline-block;
margin-bottom: 40px;
font-family: 'Raleway',Arial,sans-serif;
font-size: 14px;
line-height: 23px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
I hope i have discreetly explained everything in my grasp for this issue.
As you are dealing with id's the same will be applied where-ever the id's are used, it overrides classes by default. You can create new id's or add class="" in your html so in your css you can mark elements !important to override the id content. This gets messy though so you would be better to change your ids to classes in the above example and use id's to make small changes to the class in the different pages.
I have a little problem. At the end of my R script I create an image .png as output. I wanna show this image on my website but sometimes it is drawn, sometimes it is not drawn. I don't understand how it is possible. I`ll put my code:
I insert the image in a div with this features:
#diagramm {
position: relative;
border: 2px solid #333;
border-color: #6495ED;
width: 820px;
height: 370px;
margin: 2px auto;
margin-top: 2em;
background-image: url("/home/daniele/public_html/appweb2013/venn_final/fungo_final.png");
}
Where is the mistake? Can I use a better method?
This is CSS, it only puts specific design rules for an element that has the id diagramm.
So what you've posted is not code so to speak.
In what way do you generate the output? When? what does the user do to generate it etc.
Do you have any javascript or html code you can show?
I'm trying to make a clickable button by treating a hyperlink with CSS and adding a little icon next to it. Everything but one detail works great; namely the icons which are slightly offset from the text on the button. It looks as follows:
As you may see, the white icons (12x12px) on the buttons are slightly higher than the text, touching the CSS borders of the hyperlink, while the rest of the text does not.
I have tried every solution that came to mind, including applying vertical-align to the image elements (which put the icon too close to the LOWER border instead, reversing the situation), but sadly could not get it to just line up with the text in the middle of the element nicely. What should I do?
Code in question:
HTML example of a button:
<td class="headerlinks">
<img src="{T_THEME_PATH}/images/icon_mini_login.png" alt="*" /> {L_LOGIN_LOGOUT}
</td>
CSS of the buttons:
.headerlinks {
margin: 0px 0px;
font-size: 1.1em;
line-height: 200%;
}
.headerlinks a img {
}
.headerlinks a {
white-space: nowrap;
border: 1px solid #FAE000;
padding: 1px 4px 2px 4px;
border-radius: 4px;
margin: 0px;
background-color: #000;
vertical-align: middle;
}
Are you using a CSS reset? You can try the following one.
http://meyerweb.com/eric/tools/css/reset/
Also it's better to use a background-image for the icon, and set a position on it.
This should work if you add margin-top:2px; to the icon class. This number may need to be shifted by a digit or two.
This will work if you maintain the static font-size.