sidebar problems

  • Resolved mliam

    (@mliam)


    15 years, 4 months ago

    https://www.sketchygrid.com
    my sidebar titles are lining up next to the information. funny thing is the same setup is being used for the blog text and that works fine.

    here the css and an example of the setup

    .widget_cont {
	width: 100%;
	float: left;
	padding-right: 0px;
	padding-top: 20px;
	margin: 0;
}
.widget {
	background-color: #f6f6f6;
	margin-left: 0px;
	float: right;
	border: 1px solid #000;
}

.widget_top {
	background-image: url(https://www.sketchygrid.com/images/bg_1.png);
	padding-left: 10px;
	background-color: #333;
	color: #000;
	background-repeat: no-repeat;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-top: 1px solid #000;

}
    <div class="widget_cont">
	<div class="widget_top"><h5>Author Info</h5></div><!--/.widget_top-->
		<div class="widget">

				<p>You can put anything here, such as author information or any other text. Even easier, add a text widget to Sidebar 2. That way you don't need to touch this code.</p>

		</div><!--/.widget-->
</div>
Viewing 8 replies - 1 through 8 (of 8 total)
  • .widget {
	background-color: #f6f6f6;
	margin-left: 0px;
	float: right;
	border: 1px solid #000;
   clear:right;
}
    Thread Starter mliam

    (@mliam)

    that fixes the problem of lining up next to each other but the boxes don’t extend all the way accross the column.

    Thread Starter mliam

    (@mliam)

    bump

    you didn’t specifically ask for that. add this to .widget:
    .widget {width:99%;}
    two remarks:
    – you loose the little grey circle in front of the links;
    – it is not width:100%, because you would loose the left border.

    Thread Starter mliam

    (@mliam)

    almost perfect except now on the topics the border is slightly missing

    .widget_top {
	background-image: url(https://www.sketchygrid.com/images/bg_1.png);
	padding-left: 10px;
	background-color: #333;
	color: #000;
	background-repeat: no-repeat;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-top: 1px solid #000;
	width:99%;
}
    Thread Starter mliam

    (@mliam)

    bump

    ????bump????
    you seem to know quite exactly, where to change the style – just play around with possible parameters. trial and error !
    – a little practice does a lot of good –

    widget_cont { width:98%; }
    changed from 100% to 98% to allow space for the borders of the stuff within the widget container.
    widget_top { padding-left: 0px;}
    changed from 10px to 0px.
    seems to work as far as i could test it.

    Thread Starter mliam

    (@mliam)

    thanks alot

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘sidebar problems’ is closed to new replies.

Tags