Search Results

Search found 3408 results on 137 pages for 'margin'.

Page 51/137 | < Previous Page | 47 48 49 50 51 52 53 54 55 56 57 58  | Next Page >

  • WPF: Aligning the base line of a Label and its TextBox

    - by Heinzi
    Let's say I have a simple TextBox next to a Label: <StackPanel> <StackPanel Orientation="Horizontal"> <Label Margin="3">MyLabel</Label> <TextBox Margin="3" Width="100">MyText</TextBox> </StackPanel> ... </StackPanel> This yields the following result: As you can see, the base lines of MyLabel and MyText are not aligned, which looks ugly. Of course, I could start playing around with the margins until they match up, but since this is such a common requirement I'm sure that WPF provides a much easier and more elegant solution, which I just haven't found yet...

    Read the article

  • WPF Open Combobox popup on Focus or GotFocus

    - by ashish.magroria
    Hi, I am trying to open the combobox popup when it is focused using Style/Event Trigger I used the following code in my Combobox control Template: <ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ComboBox}"> <Grid > <ToggleButton Grid.Column="2" Template="{DynamicResource ComboBoxToggleButton}" x:Name="ToggleButton" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/> <ContentPresenter HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/> <TextBox Visibility="Hidden" Template="{DynamicResource ComboBoxTextBox}" HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" Background="Transparent" IsReadOnly="{TemplateBinding IsReadOnly}"/> <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide"> <Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True"> <Border x:Name="DropDownBorder" Background="{DynamicResource ShadeBrush}" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1"/> <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True"> <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/> </ScrollViewer> </Grid> </Popup> </Grid> <ControlTemplate.Triggers> **<Trigger Property="IsMouseOver" Value="True"> <Setter Property="IsOpen" Value="True" TargetName="Popup"/> </Trigger>** </ControlTemplate.Triggers> </ControlTemplate> But nothing happens with this code. So I trid the following Event trigger in ControlTemplate.Triggers <EventTrigger RoutedEvent="UIElement.GotFocus"> <BeginStoryboard> <Storyboard > <BooleanAnimationUsingKeyFrames Storyboard.TargetName="Popup" Storyboard.TargetProperty="IsOpen" FillBehavior="HoldEnd"> <DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="True" /> </BooleanAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="UIElement.LostFocus"> <BeginStoryboard> <Storyboard > <BooleanAnimationUsingKeyFrames Storyboard.TargetName="Popup" Storyboard.TargetProperty="IsOpen" FillBehavior="HoldEnd"> <DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="False" /> </BooleanAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> Now this helps open the popup on focus, but when I select any item from dropdown the pop up doesnt disappear as usual; it stays open. it closes only after I click somewhere else in the window. Can someone please suggest the proper way to do this Thanks in advance

    Read the article

  • Default custom ControlTemplate is not applied when using Style

    - by gehho
    Hi all, I have created a default style for a Button including a custom ControlTemplate like so: <Style TargetType="{x:Type Button}"> <Setter Property="OverridesDefaultStyle" Value="True"/> <Setter Property="Background" Value="White"/> <Setter Property="BorderBrush" Value="Black"/> <!-- ...other property setters... --> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Grid x:Name="gridMain"> <!-- some content here --> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> This style is added to my shared ResourceDictionary which is loaded by every control. Now, this style/template is applied to all my buttons, as expected, but it is NOT applied to those buttons which locally use a different style. For example, I want to have a certain margin for my "OK", "Apply" and "Cancel" buttons. Therefore, I defined the following style: <Style x:Key="OKApplyCancelStyle" TargetType="{x:Type Button}"> <Setter Property="Margin" Value="4,8"/> <Setter Property="Padding" Value="8,6"/> <Setter Property="MinWidth" Value="100"/> <Setter Property="FontSize" Value="16"/> </Style> ...and applied that style to my buttons using a StaticResource: <Button Content="OK" Style="{StaticResource OKApplyCancelStyle}"/> For me, the expected result would be that the ControlTemplate above would still be applied, using the values for Margin, Padding, MinWidth and FontSize from the "OKApplyCancelStyle". But this is not the case. The default Windows ControlTemplate is used instead, using the values from the style. Is this the typical behavior? Does a local style really override a custom ControlTemplate? If so, how can I achieve my desired behavior? I.e. still use my custom ControlTemplate even when styles are defined locally? Many thanks in advance, gehho.

    Read the article

  • Scriptaculous Draggable/Droppable script not working properly when dragging into a scrolling div

    - by George
    I am using the Scriptaculous Draggable/Droppable scripts and have a problem when dragging into a scrolling div. I have the following layout (based on this question): #grid-container { left:33px; position:relative; width:300px; } #grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; } #grid-container ul { width:400px; list-style-type:none; white-space: nowrap; } #grid-container li { display:inline; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center } .image-row { margin-left: 10px; } .grid-image { height:50px; margin-left:-20px; } Here is the html: <div id="grid-container"> <div id="grid"> <div id="row1" class="image-row"> <ul> <li><img id="img1" class="grid-image" src="images/img1.jpg"></li> <li><img id="img2" class="grid-image" src="images/img2.jpg"></li> <li><img id="img3" class="grid-image" src="images/img3.jpg"></li> <li><img id="img4" class="grid-image" src="images/img4.jpg"></li> </ul> </div> <div id="row2" class="image-row"> <ul> <li><img id="img5" class="grid-image" src="images/img5.jpg"></li> <li><img id="img6" class="grid-image" src="images/img6.jpg"></li> </ul> </div> </div> </div> I have another div with draggable items, while all of the img elements are droppable. This works very well for most cases, but when there are too many images for the grid and it has to scroll, I run into issues. I can still drag/drop into most items in that div, but when I scroll down and then try to drag onto an item in the bottom of the list, it drops on the row that was at the bottom before I scrolled the div. Even if I set the scroll attribute when creating the Draggable items, it will scroll the grid div, but not use the proper Droppable item. Is there any way to make the Draggable items drop onto the proper Droppable element regardless of if the containing div is scrolled or not?

    Read the article

  • AG_E_PARSER_PROPERTY_NOT_FOUND exception.

    - by Subhen
    Hi , Can any one plese explain why this error is happenin? I have created a usercontrol in another class and public partial class userControlImageFolder : RadioButton { public userControlImageFolder() { InitializeComponent(); } } Now in XAML it is a lot of code created by the designer like below: <UserControl x:Class="userControlFolder.userControlLocalFolder" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Height="120" Width="150"> <UserControl.Resources> <Style x:Key="rdbfolder" TargetType="RadioButton"> <Setter Property="Background" Value="#FF448DCA"/> <Setter Property="Foreground" Value="#FF000000"/> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Top"/> <Setter Property="Padding" Value="4,1,0,0"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderBrush"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFA3AEB9" Offset="0"/> <GradientStop Color="#FF8399A9" Offset="0.375"/> <GradientStop Color="#FF718597" Offset="0.375"/> <GradientStop Color="#FF617584" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="RadioButton"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"/> <VisualState x:Name="Pressed"/> <VisualState x:Name="Disabled"/> </VisualStateGroup> <VisualStateGroup x:Name="CheckStates"> <VisualState x:Name="Checked"> <Storyboard> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path3" Storyboard.TargetProperty="(UIElement.Opacity)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path4" Storyboard.TargetProperty="(UIElement.Opacity)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.8"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Unchecked"/> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"/> <VisualState x:Name="Unfocused"/> </VisualStateGroup> <VisualStateGroup x:Name="ValidationStates"> <VisualState x:Name="Valid"/> <VisualState x:Name="InvalidUnfocused"/> <VisualState x:Name="InvalidFocused"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid.ColumnDefinitions> <ColumnDefinition Width="125"/> </Grid.ColumnDefinitions> <Path x:Name="path1" Stroke="#FFEFCD44" Width="Auto" Data="F1M12,1.087C12,1.087 28.814,1.087 49.294,1.087 53.671,1.087 58.215,13 62.799,13 91.625,13 122,13 122,13 127.523,13 132,17.477 132,23 132,23 132,98 132,98 132,103.523 127.523,108 122,108 122,108 12,108 12,108 6.477,108 2,103.523 2,98 2,98 2,12.337 2,12.337 2,6.815 6.477,1.087 12,1.087z" HorizontalAlignment="Stretch" Margin="0,1.765,-7.564,0" VerticalAlignment="Top" Height="108.5" UseLayoutRounding="False" d:LayoutOverrides="Width"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFE5B802" Offset="0.996"/> <GradientStop Color="#FFFFF3C1" Offset="0.009"/> <GradientStop Color="#FFC1A11F" Offset="0.16"/> </LinearGradientBrush> </Path.Fill> </Path> <Path x:Name="path2" Stretch="Fill" Width="Auto" Data="M47.476928,130.65616 C47.476928,130.65616 167.10104,89.928686 175.76116,103.61726 L175.20267,155.29888 C175.20267,155.29888 46.697497,161.72468 46.697497,161.72468 46.697497,161.72468 47.476928,130.65616 47.476928,130.65616 z" HorizontalAlignment="Stretch" Margin="2.5,38.07,-6.564,0" VerticalAlignment="Top" Height="61.919" UseLayoutRounding="False"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFE5B802" Offset="1"/> <GradientStop Color="#FFECC31C"/> <GradientStop Color="#FFE7C536" Offset="0.591"/> </LinearGradientBrush> </Path.Fill> </Path> <Path x:Name="path1_Copy" Stroke="#FFEFCD44" Width="Auto" Data="F1 M120.50496,0.49999992 C126.02796,0.49999992 130.50496,4.9769999 130.50496,10.5 130.50496,10.5 130.50496,76.333333 130.50496,76.333333 130.50496,81.856333 126.02796,86.333333 120.50496,86.333333 120.50496,86.333333 10.504963,86.333333 10.504963,86.333333 4.9819634,86.333333 0.5049634,81.856333 0.5049634,76.333333 0.5049634,76.333333 0.5049634,12.040168 0.5049634,12.040168 0.33018858,5.8202529 4.7881744,0.99969011 11.184806,0.94185195 39.903021,0.68218267 120.50496,0.49999992&#xa;120.50496,0.49999992 z" HorizontalAlignment="Stretch" Margin="1.497,23.434,-7.502,0" VerticalAlignment="Top" Height="86.833" UseLayoutRounding="False"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFE5B802" Offset="0.996"/> <GradientStop Color="#FFFFFB9D" Offset="0.009"/> <GradientStop Color="#FFF1D256" Offset="0.164"/> <GradientStop Color="#FFE2BC22" Offset="0.505"/> <GradientStop Color="#FFB5780F" Offset="0.948"/> </LinearGradientBrush> </Path.Fill> </Path> <Path x:Name="path3" Stroke="#FFEFCD44" Width="133" Data="F1M12,1.087C12,1.087 28.814,1.087 49.294,1.087 53.671,1.087 58.215,13 62.799,13 91.625,13 122,13 122,13 127.523,13 132,17.477 132,23 132,23 132,98 132,98 132,103.523 127.523,108 122,108 122,108 12,108 12,108 6.477,108 2,103.523 2,98 2,98 2,12.337 2,12.337 2,6.815 6.477,1.087 12,1.087z" HorizontalAlignment="Right" Margin="0,1.719,-8,0" VerticalAlignment="Top" Height="108.5" Opacity="0" UseLayoutRounding="False"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF6A5603" Offset="1"/> <GradientStop Color="#FFF3EFDE"/> <GradientStop Color="#FFDAB20D" Offset="0.349"/> </LinearGradientBrush> </Path.Fill> </Path> <Path x:Name="path4" Width="150" Data="F1 M30,0 C30,0 140,0 140,0 145.523,0 150,4.477 150,10 150,10 130,55 130,55 130,55 124.65027,67.742768 120,65 120,65 10,65 10,65 4.477,65 0,60.523 0,55 0,55 20,10 20,10 22.247647,3.2935648 24.477,0&#xa;30,0 z" HorizontalAlignment="Right" Margin="0,43.379,-31.05,0" VerticalAlignment="Top" Height="65.387" Opacity="0" UseLayoutRounding="False"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFE5B802" Offset="1"/> <GradientStop Color="White"/> <GradientStop Color="#FFFAD336" Offset="0.378"/> </LinearGradientBrush> </Path.Fill> </Path> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <RadioButton HorizontalAlignment="Left" Style="{StaticResource rdbfolder}" VerticalAlignment="Top" Content="RadioButton" Height="120" Width="150"/> </Grid> </UserControl> I am sorry for pasting the whole code but this is might be the only way can help us. I create a dll out of it and uses in my other projects: using userControlFolder; userControlLocalFolder btnLocalFolder = new userControlLocalFolder(); Canvas.SetTop(btnLocalFolder, 100); gridRoot.Children.Add(btnLocalFolder); So while running it I get the above exception, AG_E_PARSER_PROPERTY_NOT_FOUND, Please help. Thanks, Subhen

    Read the article

  • pagination with css

    - by bsandrabr
    Hi I've tried every combination I can think of but I can't get this to work. Can you help? I'm trying to put some css onto my pagination and have read all the examples but they all contain so many backslashes and concatenation that I just dont know how to apply it Here is my pagination code (which works fine) along with my feeble attempt at styling it if ($st > 0) { $st3=$st; print "< Previous Page "; } $f=$st+3; for($i2=$st+1;$i2<=$f;$i2++) { $i3=$i2-3; if ($i3 0) { print "$i3 "; if($i2 % 3 == 0) { print ""; } } } $g=$st+3; for($i=$st+1;$i<=$g;$i++) { print "$i "; if($i % 3 == 0) { print ""; } } $st2=$st+2; print " Next Page "; Here is the css that I took from the website /* CSS Document */ body { background: #2D2D2D; font-family:Verdana, fantasy; font-size:13px; color: white; scrollbar-base-color: black; scrollbar-arrow-color: red; scrollbar-DarkShadow-Color: black; } a:visited,a:active,a:link { color: white;text-decoration: none; } a:hover { color: red;text-decoration: overline underline;background: none; } table,tr,td { font-family:Palatino Linotype; color: #FFFFFF;font-size: 12px; } .button { font-family:Verdana, fantasy; font-size:13; color:#FFFFFF; background-color: red; } input,textarea,dropdown{ font-family:Verdana, fantasy; font-size:13; color: #FFFFFF; background-color: #000000; border: 1px solid; } textarea,.submit input{ font-family:Verdana, fantasy; font-size:13; color:#ffffff; background-color: black; } .table { background-color:#000000; } .table3 { background-color:#000000; } .table td { color: #000000; background-color:#DEDEDE; height:22px; } .table3 td { background-color:#CCCCCC; } td .alt { background-color:#EEEEEE; height:22px; } td .h { background-image:url(tablehgrad.png); background-repeat:repeat-x; font-weight: bold; background-color: #D6D6D6; } .table th { background-image:url(tablehgrad.png); background-repeat:repeat-x; color: #000000; font-weight: bold; background-color: #D6D6D6; } .menu th { font-font-size: 12px; color: silver; background-image:url(th.png); background-repeat:repeat-x; font-weight: bold; background-color: #4B4B4B; } .stats td { font-font-size: 12px; color: white; font-weight: bold; } .menu td { font-size: 12px; text-align: center; color: white; background-image:url(tdover.png); background-repeat:repeat-x; font-weight: bold; background-color: #4B4B4B; } .menu td:hover{ color: white; background-image:url(td.png); div.pagination { padding: 3px; margin: 3px; } div.pagination a { padding: 2px 5px 2px 5px; margin: 2px; border: 1px solid #AAAADD; text-decoration: none; /* no underline */ color: #000099; } div.pagination a:hover, div.pagination a:active { border: 1px solid #000099; color: #000; } div.pagination span.current { padding: 2px 5px 2px 5px; margin: 2px; border: 1px solid #000099; font-weight: bold; background-color: #000099; color: #FFF; } div.pagination span.disabled { padding: 2px 5px 2px 5px; margin: 2px; border: 1px solid #EEE; color: #DDD; } thanks

    Read the article

  • ASP.Net master page scrollbar question

    - by Stephen Falken
    Like happens to all of us sometimes, I inherited some crappy code I have to fix. We need to center our pages on widescreen machines, so we have a master page layout div like so: .MasterLayout { width:1100px; height: 100%; position:absolute; left:50%; margin-left:-550px; vertical-align:top; } I removed most of the detailed attributes for readability here, but here's how the table for the master page is laid out: <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr> <td style="width: 100%" align="center" colspan="2"> </td> </tr> <tr> <td colspan="2" style="height: 20px; background-color: #333;"> <asp:SiteMapPath/> </td> </tr> <tr> <td style="width: 86px; height: 650px; background-color: #B5C7DE; margin: 6px;" valign="top"> <asp:Menu /> <asp:SiteMapDataSource /> </td> <td style="background-color:#ffffff; margin:5px; width:1000px;" valign="top"> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"/> </td> </tr> </table> When resizing the browser window, the horizontal scrollbar only reaches as far as the left edge of the <asp:contentplaceholder/> control, and the <asp:menu/> that's in the 86px wide <td> is hidden. How can I fix this problem? THANKS IN ADVANCE

    Read the article

  • Making footer image stick to bottom of web browser or page

    - by Slyphee
    Hello, I know this has been asked alot of times in the past but for the life of me I can't seem to get any of the other solutions to work. What I'm trying to do is to get the footer (which is an image that repeats across the width of the page) to stick to the bottom of the browser when there isn't enough content to naturally push it to the bottom of the page and when there IS enough content to push it to the bottom it does just that. An example is the one at http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htm which does exactly what I want but I can't get to work either. The code that I've currently got implemented makes the footer stick to a certain section of the page with text going under it. You can see it at sourcectrl.co.uk but its not much to look at. Heres the code for your viewing pleasure. html, body { font: 100% Arial, Helvetica, sans-serif; height: 100%; color: #597347; margin: 0; padding: 0; background: #573909; } header { display: block; position: relative; top: 0; left: 0; width: 100%; height: 66px; background: url(../images/FillerPage_01.gif) repeat-x left bottom; } section { width: 940px; margin: 0 auto; font-size: 1.4em; overflow: auto; min-height: 100%; height: auto !important; height: 100%; margin-bottom: 87px; position: relative; padding-bottom: 90px; } footer { display:block; position: absolute; bottom: 0; width: 100%; height: 87px; background: url(../images/FillerPage_08.gif) repeat-x left bottom; } Sorry if it seems messy! I'd just like to know if I'm heading in the right direction or theres something I'm just not getting? Oh yeah I'm trying to do all of this with the html 5 markup which is why there is no #footer and the like (could this be why none of the solutions work?). If anyone could give me any help or guidance I'd be soooooo grateful.

    Read the article

  • IE7 Animated GIF Appears as a Static Image?

    - by Abs
    Hello all, After a button is clicked to start a process on my web app, I show a small loading gif (animated) that rotates to indicate to the user something is happening. I put the gif img in place of the button like this using JQuery: $('#btn_holder').html('<img src="images/loading2.gif" style="margin-left:40px; margin-top:7px;" />'); This works great in all browsers (Firefox, IE8, Chrome) except IE7 on a windows server 2003. In IE, the gif appears but it is not animated. What's going on with IE7? How can I test what the problem is? Thanks all

    Read the article

  • Button.MouseDown

    - by Gilad
    Hi Guys, I'm relatively new with WPF. I'm trying to understand the difference between MouseDownEvent and PreviewMouseDownEvent. I understand the WPF event strategies and i understand that the MouseDown event is a bubbling event and the PreviewMouseDown is a tunneling event. I also understand the order of which these events are being fired - according to this MSDN overview http://msdn.microsoft.com/en-us/library/ms742806.aspx#routing (there is a diagram with example there). So i tried to code some my self, check this for example: <Grid x:Name="grid" Width="250"> <StackPanel Mouse.MouseDown="StackPanel_MouseDown" PreviewMouseDown="StackPanel_PreviewMouseDown"> <WPFVisualizerExample:MyButton x:Name="B1" PreviewMouseDown="B1_PreviewMouseDown" MouseDown="B1_MouseDown" Margin="5,5,5,5"> <WPFVisualizerExample:MyButton x:Name="B2" PreviewMouseDown="B2_PreviewMouseDown" MouseDown="B2_MouseDown" Margin="5,5,5,5"> <WPFVisualizerExample:MyButton x:Name="B3" PreviewMouseDown="B3_PreviewMouseDown" MouseDown="B3_MouseDown" Margin="5,5,5,5">Click Me</WPFVisualizerExample:MyButton> </WPFVisualizerExample:MyButton> </WPFVisualizerExample:MyButton> </StackPanel> </Grid> I have an event handler for each of the events (the preview and non-preview) and i wanted to see what is happening, which of the event is being thrown (i have a message box shown for each event). The 'MyButton' user control simply extends the base Button and override the OnMouseDown and OnPreviewMouseDown to set the e.Handled false: protected override void OnMouseDown(System.Windows.Input.MouseButtonEventArgs e) { base.OnMouseDown(e); e.Handled = false; } protected override void OnPreviewMouseDown(System.Windows.Input.MouseButtonEventArgs e) { base.OnPreviewMouseDown(e); e.Handled = false; } (tried with this and without this). According to the MSDN overview (in the link above), if i have 3 elements then the events route should be as follows: PreviewMouseDown (tunnel) on root element. PreviewMouseDown (tunnel) on intermediate element #1. PreviewMouseDown (tunnel) on source element #2. MouseDown (bubble) on source element #2. MouseDown (bubble) on intermediate element #1. MouseDown (bubble) on root element. So I expected the the message boxes to be shown according to the above. From some reason - which I don't understand only the preview events are being thrown (according to what the MSDN says Preview_B1=Preview_B2=Preview_B3). My expectations were: Preview_B1=Preview_B2=Preview_B3=NonPreview_B3=NonPreview_B2=NonPreview_B1. But the non-preview events are not being thrown at all. So basically I don't understand the route of the events, from MSDN overview I understood that the route starts from the root element, goes down (tunnel) to the source element and then back up (bubble) to the root element, but this is not what happening in practice. It is really important for me to understand how this events are working, i probably miss-understand something basic here, your help will be appreciated. THANX!! -Gili

    Read the article

  • WPF ListView Data Binding wont synchronize

    - by Aviatrix
    my listview will display only the item that its added by the constructor and it wont add the items that i add dynamically public class PostList : ObservableCollection<PostData> { public PostList() : base() { Add(new PostData("Isak", "Dinesen")); // Add(new PostData("Victor", "Hugo")); // Add(new PostData("Jules", "Verne")); } public void AddToList (string[] data){ string username2, msg; msg = data[0]; username2 = data[1]; Add(new PostData(msg, username2)); } } public class PostData { private string Username; private string Msg; private string Avatar; private string LinkAttached; private string PicAttached; private string VideoAttached; public PostData(string msg ,string username, string avatar=null, string link=null,string pic=null ,string video=null) { this.Username = username; this.Msg = msg; this.Avatar = avatar; this.LinkAttached = link; this.PicAttached = pic; this.VideoAttached = video; } public string pMsg { get { return Msg; } set { Msg = value; } } public string pUsername { get { return Username; } set { Username = value; } } ..... ..... } Xaml <ListView x:Name="PostListView" BorderThickness="0" MinHeight="300" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" VerticalContentAlignment="Top" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" IsSynchronizedWithCurrentItem="True" MinWidth="332" SelectedIndex="0" SelectionMode="Extended" AlternationCount="1" ItemsSource="{Binding Source={StaticResource PostListData}}"> <ListView.ItemTemplate> <DataTemplate> <DockPanel x:Name="SinglePost" VerticalAlignment="Top" ScrollViewer.CanContentScroll="True" ClipToBounds="True" Width="333" Height="70" d:LayoutOverrides="VerticalAlignment" d:IsEffectDisabled="True"> <StackPanel x:Name="AvatarNickHolder" Width="60"> <Label x:Name="Nick" HorizontalAlignment="Center" Margin="5,0" VerticalAlignment="Top" Height="15" Content="{Binding Path=pUsername}" FontFamily="Arial" FontSize="10.667" Padding="5,0"/> <Image x:Name="Avatar" HorizontalAlignment="Center" Margin="5,0,5,5" VerticalAlignment="Top" Width="50" Height="50" IsHitTestVisible="False" Source="1045443356IMG_0972.jpg" Stretch="UniformToFill"/> </StackPanel> <TextBlock x:Name="userPostText" Margin="0,0,5,0" VerticalAlignment="Center" FontSize="10.667" Text="{Binding Path=pMsg}" TextWrapping="Wrap"/> </DockPanel> </DataTemplate> </ListView.ItemTemplate> </ListView>

    Read the article

  • Cross browser div center alignment using CSS

    - by Misha Moroshko
    What is the easiest way to align a div whose position is relative horizontally and vertically using CSS ? The width and the height of the div is unknown, i.e. it should work for every div dimension and in all major browsers. I mean center alignment. I thought to make the horizontal alignment using: margin-left: auto; margin-right: auto; like I did here. Is this a good cross browser solution for horizontal alignment ? How could I do the vertical alignment ?

    Read the article

  • Son of Suckerfish ie6 problem - right-most dropdown menu also appearing on left side of screen

    - by Kevin Burke
    I'm interning for an NGO in India and trying to fix their website, including updating their menu so it's not the last item on the page to load, and it's centered on the screen. Everything works well enough but when I try out my new menu in IE6, I get this weird error where the content below the menu is padded an extra 30px or so and the material in the right-most drop down appears on the far left of the screen, always visible. When I drop down the rightmost link ("Publications") the content appears both in the correct location and in the same spot on the far left of the screen, and changes color when I hover as well. It's tough to describe, so it would probably be best if you took a look: visit http://sevamandir.org/a30/index.htm in your Internet Explorer 6 browser to see for yourself. I really appreciate your help. Also I'm using a 1000px wide monitor, if there's more hijinks going on outside that space I'd like to know about that too. Here's the relevant code: in the html head: <script> sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> text surrounding the menu - the menu is simply <ul id="nav"><li></li></ul> etc. <!--begin catchphrase--> <div style="float:left; height:27px; width:520px; margin:0px; font:16px Arial, Helvetica, sans-serif; font-weight:bold; color:#769841;"> Transforming lives through democratic &amp; participatory development </div> <?php include("menu.php"); ?> </div><!-- end header --> <!--begin main text div--> <div id="maincontent"> Relevant menu CSS: #nav, #nav ul { font:bold 11px Verdana, sans-serif; float: left; width: 980px; list-style: none; line-height: 1; background: white; font-weight: bold; padding: 0; border: solid #769841; border-width: 0; margin: 0 0 1em 0; } #nav a { display: block; width: 140px; /*this is the total width of the upper menu*/ w\idth: 120px; /*this is the width less horizontal padding */ padding: 5px 10px 5px 10px; /*horiz padding is the 2nd & 4th items here - goes Top Right Bottom Left */ color: #ffffff; background:#b6791e; text-decoration: none; } #nav a.daddy { background: url(rightarrow2.gif) center right no-repeat; } #nav li { float: left; padding: 0; width: 140px; /*this needs to be updated to match top #nav a */ background:#b6791e; } #nav li:hover, #nav li a:hover, #nav li:hover a { background:#769841; } #nav li:hover li a { background:#ffffff; color:#769841; } #nav li ul { position: absolute; left: -999em; height: auto; width: 14.4em; w\idth: 13.9em; font-weight: bold; border-width: 0.25em; /*green border around dropdown menu*/ margin: 0; } #nav li ul a { background:#ffffff; color:#769841; } #nav li li { padding-right: 1em; width: 13em; background:#ffffff; } #nav li ul a { width: 13em; w\idth: 9em; } #nav li ul ul { margin: -1.75em 0 0 14em; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover, { background: #769841; color:#ffe400; } #nav li a:hover, #nav li li a:hover, #nav li:hover li:hover, #nav li.sfhover a:hover { background: #769841; color:#ffe400; }

    Read the article

  • WinRT ControlTemplate ItemsPanel

    - by user1427149
    I'm new to WinRT and am trying to create a standard gridview which has a group heading with a number of tiles beneath it. That bit is easy. I'm trying to modify it so that beneath the grid of tiles I can also add a footer using the containers style: <GridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" Margin="116,0,40,46" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplate="{StaticResource Project200x200ItemTemplate}" SelectionMode="None" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"> <GridView.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.GroupStyle> <GroupStyle> <GroupStyle.HeaderTemplate> <DataTemplate> <Grid Margin="1,0,0,6"> <Button AutomationProperties.Name="Group Title" Content="{Binding Name}" Click="Header_Click" Style="{StaticResource TextButtonStyle}" FontWeight="{Binding IsSelected, ConverterParameter=FontWeight, Converter={StaticResource BooleanToFontWeightConverter}}" /> </Grid> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid Background="Red" Orientation="Vertical" Margin="0,0,40,0" /> </ItemsPanelTemplate> </GroupStyle.Panel> <GroupStyle.ContainerStyle> <Style TargetType="GroupItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <StackPanel> <ContentPresenter/> <ItemsPresenter/> <TextBlock Text="*** End of group ***"/> </StackPanel> </ControlTemplate> </Setter.Value> </Setter> </Style> </GroupStyle.ContainerStyle> </GroupStyle> </GridView.GroupStyle> </GridView> This almost works but after adding the container style, the grid of tiles no longer shows... the group header and 'End of group' textblock is showing, but I've lost the tile grid. Can anyone spot what I'm doing wrong...?

    Read the article

  • Justified navigation buttons

    - by Kaivosukeltaja
    I'm trying to create the primary navigation menu for a website that will have a variable amount of primary menu items. The navigation bar is horizontal and has a width of 738px. I would like to have the leftmost item 18px from the left and the rightmost item 18px from the right edge of the element, with the other menu items spread evenly between them. I'm using a tableless layout. So far I haven't been able to make it work exactly like I want. Setting margin: auto doesn't seem to help, and I can't keep the 18px margin on both sides using a table. One idea was to use text-align: justify but it doesn't justify single lines. Is there a simple or less simple way of doing this, or am I going to have to ask the AD to relax his visual requirements?

    Read the article

  • How do I use jQueryUI's ui-states with JSF2's h:messages?

    - by Andrew
    It seems like it should be very simple to specify that the h:messages generated by JSF should be styled using jQueryUI's nice ui-states. But sadly I can't make it fit. It seems that the jQueryUI states require several elements (div,div,p,span) in order to make it work. So taking inspiration directly from the jQueryUI theme demo page: <!-- Highlight / Error --> <h2 class="demoHeaders">Highlight / Error</h2> <div class="ui-widget"> <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span> <strong>Hey!</strong> Sample ui-state-highlight style.</p> </div> </div> <br/> <div class="ui-widget"> <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> <strong>Alert:</strong> Sample ui-state-error style.</p> </div> </div> and trying to jam the css class details into my h:message as best I can: <div class="ui-widget"> <h:messages globalOnly="true" errorClass="ui-state-error ui-corner-all ui-icon-alert" infoClass="ui-state-highlight ui-corner-all ui-icon-info"/> </div> I don't get the icon or sufficient padding etc but the colours make it through. So, the styles are being applied but they aren't working as intended. Any idea how I can make this work?

    Read the article

  • Anchor bug on IE9, anchor hitbox overlapped

    - by user1456399
    The menu below works just fine in Firefox and Chrome, but in IE9, but hitbox for the "HOME" anchor is being covered partially by the list item behind it except for the actual test, and a single horizontal pixel line at the top and bottom of the button. Can anyone see what I'm missing? Code to follow: index.html <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <title>Navigation</title> <style> .menu-container { width:960px; height:45px; margin:0 auto; position:relative; z-index:2; background-color: #3d3d3d; margin-bottom: 20px; } .menu-navigation { font-family:Arial, Helvetica, sans-serif; font-size:13px; list-style:none; padding:0; margin:0; text-align: right; font-size: 0; /* Removes whitespace between <li> */ } .menu-navigation > li { display:inline; margin:0; border-left:solid 1px #242424; background-color:transparent; font-size: 12px; padding: 15px 0 15px 0; } .menu-navigation > li:hover, .menu-navigation > li.current-menu-item { background-color:#202020; } .menu-navigation > li.active, .menu-navigation > li.active:hover { background-color:#131313; } .menu-navigation > li a { text-decoration:none; color:#bbbbbb; } .menu-navigation > li a:hover { color:#efefef; } .menu-navigation > li span a { color:#ffffff; } .menu-navigation > li a:focus { outline:none; } .menu-navigation > li.menu-item-parent > span, .menu-navigation > li > span > a { text-transform:uppercase; outline:0; text-decoration:none; color:#ffffff; text-shadow:1px 1px 1px #000000; line-height: 45px; display: inline-block; height: 45px; padding: 0 20px 0 20px; } .menu-navigation > li.menu-item-parent > span { background:url("../img/down.png") no-repeat right center; } .menu-navigation > li.menu-item-parent > span:hover, .menu-navigation > li > span > a:hover { cursor:pointer; } </style> </head> <body> <div class="menu-container"> <ul class="menu-navigation"> <li><span><a href="#">This is a link</a></span></li> <li><span><a href="#">This is a link</a></span></li> <li class="menu-item-parent"><span>Not a link</span></li> <li class="menu-item-parent"><span>Not a link</span></li> <li class="menu-item-parent"><span>Not a link</span></li> </ul> </div> </body> </html> EDIT: Alright, I've changed the code to isolate the issue, and narrowed down the problem CSS. Simply adding a background image fixes the issue. The code is set up so it styles so the hit boxes for all the menu items are the same regardless if there's a link in them or not to facilitate an "onClick" drop down on those menu items without anchors. Refer to lines 81 - 86. Remove those lines (just a background image), and the hit box issue is seen in the menu items "NOT A LINK" as well. Further, the act of adding a background image fixes the hit box issue of "THIS IS A LINK" menu items. Simply add the following snippet to the CSS: .menu-navigation > li > span > a { background:url("../img/down.png") no-repeat right center; } Adding a background image, even if there is no actual image, is changing something with regards to the hit box... I'm just not sure what...

    Read the article

  • YUI (JS): Putting a MenuBar in a Panel

    - by John Bentley
    If I put a YUI menu bar in the body it works perfectly. However if I use it inside of a Panel it shows up without the proper background. It is larger than it should be. Other than the default sam skin I'm using only the following css. .windowbody is the class of the panel. <style type="text/css"> body { margin: 0; } .windowbody { overflow: auto; padding: 0; } .windowbody div { padding: 0; margin: 0; } </style>

    Read the article

  • IE7 li ul bug on dropdown menu

    - by Berns
    hoping one of you guys can help me please. I have a basic list menu with two dropdowns. This all works fine on all browsers except IE6 and IE7. Please take a look at my markup. <nav> <ul id="topNav" ><li id="topNavFirst"><a href="../about/about.php" id="aboutNav">About Us</a></li ><li id="topNavSecond"><a href="../people/our-people.php" id="peopleNav">Our People</a ><ul id="subList1"><li><a href="../people/mike-hadfield.php">Mike Hadfield</a></li ><li><a href="../people/karen-sampson.php">Karen Sampson</a></li ><li><a href="../people/milhana-farook.php">Milhana Farook</a></li ><li><a href="../people/kim-crook.php">Kim Crook</a></li ><li><a href="../people/amanda-lynch.php">Amanda Lynch</a></li ><li><a href="../people/gideon-scott.php">Gideon Scott</a></li ><li><a href="../people/paul-fuller.php">Paul Fuller</a></li ><li><a href="../people/peter-chaplain.php">Peter Chaplain</a></li ><li><a href="../people/laura-hutley.php">Laura Hutley</a></li ></ul ></li ><li id="topNavThird"><a href="../services/our-services.php" id="servicesNav">Our Services</a ><ul id="subList2"><li><a href="../services/company-and-commercial.php">Company &amp; Commercial</a></li ><li><a href="../services/employment.php">Employment</a></li ><li><a href="../services/civil-litigation.php">Civil Litigation</a></li ><li><a href="../services/debt-recovery.php">Debt Recovery</a></li ><li><a href="../services/conveyancing.php">Conveyancing</a></li ><li><a href="../services/commercial-property.php">Commerical Property</a></li ><li><a href="../services/wills-and-probate.php">Wills &amp; Probate</a></li ><li><a href="../services/family.php">Matrimonial &amp; Family</a></li ></ul ></li ><li><a href="../news/news.php" id="newsNav">News</a></li ><li><a href="../careers/careers.php" id="careersNav">Careers</a></li ><li><a href="../contact/contact.php" id="contactNav">Contact</a></li ></ul><!-- /topNav --> </nav>? and the css a {text-decoration:none;} #topNav { float:right; height:30px; margin:0; font-size:12px; } #topNav li { display:inline; float:left; list-style:none; color:#666; border-left: 1px solid #666; padding: 0 3px 0 3px; position:relative; } #topNav ul a { white-space:nowrap; } #topNav li a:hover { border-bottom:2px solid #369; } #topNavSecond a:hover { border-bottom:2px solid transparent !important; } #topNavFirst { border-left: 1px solid transparent !important; } /*****OUR-PEOPLE DROPDOWN*****/ #topNav ul{ background:#fff; border:1px solid #666; border-top:0px solid transparent; border-bottom:2px solid #666; list-style:none; position:absolute; left:-9999px; width:100px; text-align:left; padding:5px 0 5px 0px; margin:0 0 0 -4px; z-index:10; -webkit-box-shadow: 1px 1px 1px #666; -moz-box-shadow: 1px 1px 1px #666; box-shadow: 1px 1px 1px #666; vertical-align: bottom; } #topNav ul li{ display:block; border-left:0px; margin-bottom: 0px; padding:0; vertical-align: bottom; } #topNav ul a{ padding:0 0 0 5px; } #topNav li:hover ul{ left:auto; } #topNav li:hover a { color:#369; } #topNav li:hover ul a{ text-decoration:none; color:#666; } #topNav li:hover ul li a:hover{ color:#fff;; width:100%; border-bottom:0px solid transparent !important; } #topNav ul li:hover { background:#369; display: block; } #topNav ul li a { display: block; padding:0 0 0 4px; } /************/ /*****OUR-SERVICES DROPDOWN*****/ #topNavThird a:hover { border-bottom:2px solid transparent !important; } #topNavThird ul{ /*background:#fff url(images/service-ul-bg.png) no-repeat;*/ width:135px !important; /*margin-left:120px !important;*/ }? here it is working perfectly http://jsfiddle.net/BcWd9/ here is a screen shot of how it looks in IE7. hadfield.andymcnallydesign.co.uk/images/ie7-error.jpg as you can see the ul is appearing to the right of the li and not the left and it is overlaying the top list. I've tried removing white space, but no luck. Any ideas? If one of you can help it would be much appreciated.

    Read the article

  • html horizontal scrolling

    - by mp
    Hi, i have a simple css example, and i can't understand the behavior of one of my divs, when the horizontal scroll is displayed. so...when my browser window needs to display the horizontal scroll(when the window width is less than my div "content" width(1024px)), my div "footer" (that have the same "content's" parent and 100% width), seems to get an "extra blank space" on the right side. this space grows when I reduce the width of the window. any ideas about how can i get it off, or why it happens??thanks! heres my code: css: <style type="text/css"> html, body { height: 100%; width:100%; font-family:"Arial Black", Gadget, sans-serif; font-size:11px; font-variant:normal; } * { margin: 0; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; } #content{ width:1024px; margin:0px auto; background-color:#990; height:780px; } .footer, .push { height: 4em; width:100%; } #footer-content{ height:10px; background-color:#09F; width:100%; } </style> html: <body> <div class="wrapper"> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque varius tortor vitae pretium. Quisque magna ipsum, accumsan sit amet pretium sed, iaculis feugiat nibh. Donec vitae dui eros, eu ultricies nulla. Morbi aliquet, nisi in tincidunt rutrum, nisl justo sagittis nisi, nec dignissim orci elit vitae tortor. </p> </div> <div class="push"></div> </div> <div class="footer" style="background-color:#900; width:100%;"> <div id="footer-content"></div> </div> </body>

    Read the article

  • Toggle visibility of DIV based on Dropdown

    - by user1869787
    I have never used Javascript before, only HTML and CSS. I am attempting to have my information show only when selected from my drop down. I don't know any Javascript so any help would be overly appreciated. This is my html so far: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>Gone Fishin'</title> <link href="finale.css" rel="stylesheet" type="text/css"> </head> <div id="wrapper"> <div id="nav"> <ul> <li><a href="Index.html">About Us</a></li> <li><a href="Species.html">List by Species</a></li> <li><a href="County.html">List by County</a></li> <li><a href="apply.html">Reservations</a></li> </ul> </div> <body> <div id="content"> <p>ontent</p> <fieldset> <legend>Choose your Target</legend> <select name="option" id="options"> <option value=""></option> <option value="1">American Shad</option> <option value="2">Black Crappie</option> <option value="3">Bluegill</option> <option value="4">Brook Trout</option> <option value="5">Brown Trout</option> <option value="6">Carp</option> <option value="7">Chain Pickerel</option> <option value="8">Channel Catfish</option> <option value="9">Flathead Catfish</option> <option value="10">Largemouth Bass</option> <option value="11">Muskellunge</option> <option value="12">Norhtern Pike</option> <option value="13">Pumkpinseed</option> <option value="14">Rainbow Trout</option> <option value="15">Readbreast Sunfish</option> <option value="16">Rock Bass</option> <option value="17">Sauger</option> <option value="18">Saugeye</option> <option value="19">Smallmouth Bass</option> <option value="20">Steelhead</option> <option value="21">Striped Bass</option> <option value="22">Walleye</option> <option value="23">White Bass</option> <option value="24">White Crappie</option> <option value="25">White Perch</option> <option value="26">Yellow Perch</option> </select> <div id="option"> <div id="1" style="display: block">Test 1</div> <div id="2">Test 2</div> <div id="3">Test 3</div> <div id="4">Test 4</div> <div id="5">Test 5</div> </div> </fieldset> </div> </body> </div> </html> And this is my CSS: @charset "utf-8"; /* CSS Document */ /*General Styles*/ * {font-family:Verdana, Geneva, sans-serif;} #wrapper {width:85%; margin:auto; background-color:#00CC00;} /*End of General Styles*/ /* nav div styles */ #nav {background-color:#FF0000; text-align:center;} #nav ul li {display:inline-block; background-color: #67e667; border:5px dashed; width: 90px text-align:center;} #nav ul li a:link {background-color:#a60000; width: 90px;} #nav ul li a:visited {background-color: #009999;} #nav ul li a:hover {background-color: #a64b00;} /* end nav styles */ /* content div styles*/ #content {padding: 5px;} #option {display:none;} /*end content styles*/ /*start form styles*/ fieldset {background-color:#ff7400; color:white} label {display:inline-block; width: 150px; float:left; margin-right: 3px;} #form li{margin-bottom:10px;} #dtg li{margin-bottom:5px;} Thank you for any help received

    Read the article

  • Can't print elements in a DIV tag

    - by Mckenzi
    I am using a Drag-able and re-sizeable DIV's in this HTML file. Where the user will place the DIV tag to his desired place in a main parent DIV tag. Now I want to print this main DIV tag, but the problem is that the code which I'm using to PRINT this main DIV is printing in a sequence, like not the way user has arranged the DIV's. Also it doesn't take up the main DIV background IMAGE. here is the code. JAVASCRIPT & CSS <link rel="stylesheet" type="text/css" href="byrei-dyndiv_0.5.css"> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> <script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"></script> <script language="javascript" type="text/javascript"> function change(boxid,divtoaffect) { content = document.getElementById("" + boxid + "").value.replace(/\n/g, '<br>'); document.getElementById(divtoaffect).innerHTML = content; } function select1() { test=document.getElementById("changeMe"); test.style.backgroundImage="url('Sunset.jpg')"; } function select2() { test=document.getElementById("changeMe"); test.style.backgroundImage="url('Blue hills.jpg')"; } function PrintElem(elem) { Popup($(elem).text()); } function Popup(data) { var mywindow = window.open('', 'my div', 'height=400,width=600'); mywindow.document.write('<html><head><title>my div</title>'); /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />'); mywindow.document.write('</head><body >'); mywindow.document.write(data); mywindow.document.write('</body></html>'); mywindow.document.close(); mywindow.print(); return true; } // Print DIV function printContent(id){ str=document.getElementById(id).innerHTML newwin=window.open('','printwin','left=100,top=100,width=400,height=400') newwin.document.write('<HTML>\n<HEAD>\n') newwin.document.write('<TITLE>Print Page</TITLE>\n') newwin.document.write('<script>\n') newwin.document.write('function chkstate(){\n') newwin.document.write('if(document.readyState=="complete"){\n') newwin.document.write('window.close()\n') newwin.document.write('}\n') newwin.document.write('else{\n') newwin.document.write('setTimeout("chkstate()",2000)\n') newwin.document.write('}\n') newwin.document.write('}\n') newwin.document.write('function print_win(){\n') newwin.document.write('window.print();\n') newwin.document.write('chkstate();\n') newwin.document.write('}\n') newwin.document.write('<\/script>\n') newwin.document.write('</HEAD>\n') newwin.document.write('<BODY onload="print_win()">\n') newwin.document.write(str) newwin.document.write('</BODY>\n') newwin.document.write('</HTML>\n') newwin.document.close() } </script> </head> <body> <style type="text/css"> #output1,#output2 ,#output3 { width: 300px; word-wrap: break-word; border: solid 1px black; } </style> HTML <div style="width:650px;height:300px;" id="changeMe" > <table cellpadding="5" cellspacing="0" width="100%" style="margin:auto;"> <tr> <td><div class="dynDiv_moveDiv" id="output1" style="font-weight:bold;height:20px;margin-top:40px;"> <div class="dynDiv_resizeDiv_tl"></div> <div class="dynDiv_resizeDiv_tr"></div> <div class="dynDiv_resizeDiv_bl"></div> <div class="dynDiv_resizeDiv_br"></div> </div> </td> </tr> <tr> <td><div class="dynDiv_moveDiv" id="output2" style="height:40px;margin-top:30px;"> <div class="dynDiv_resizeDiv_tl"></div> <div class="dynDiv_resizeDiv_tr"></div> <div class="dynDiv_resizeDiv_bl"></div> <div class="dynDiv_resizeDiv_br"></div> </div></td> </tr> <tr> <td><div class="dynDiv_moveDiv" id="output3" style="height:50px;margin-top:40px;"> <div class="dynDiv_resizeDiv_tl"></div> <div class="dynDiv_resizeDiv_tr"></div> <div class="dynDiv_resizeDiv_bl"></div> <div class="dynDiv_resizeDiv_br"></div> </div></td> </tr> </table> </div> <tr> <td align="center"><input type="button" value="Print Div" onClick="printContent('changeMe')" /> </td> </tr>

    Read the article

  • Formatting jquery timeline?

    - by Beginner
    I am using a timeline plugin from here This is my current code: <ul id="dates"> <li><a href="#1940s">1940s</a></li> <li><a href="#1950s" class="selected">1950s</a></li> <li><a href="#1960s">1960s</a></li> <li><a href="#1970s">1970s</a></li> <li><a href="#1980s">1980s</a></li> <li><a href="#1990s">1990s</a></li> <li><a href="#2000s">2000s</a></li> </ul> <ul id="issues"> <li id="1940s"><img src="/gfx/timeline/1950.jpg" /> <h1>1940's</h1> <p>Ronald.</p> </li> <li id="1950s"><img src="/gfx/timeline/1960.jpg" /> <h1>1950's</h1> <p>Eddy.</p> </li> <li id="1960s"><img src="/gfx/timeline/1970.jpg" /> <h1>1960's</h1> <p>1960s</p> </li> <li id="1970s"><img src="/gfx/timeline/1980.jpg" /> <h1>1970's</h1> <p>1970s</p> </li> <li id="1980s"><img src="/gfx/timeline/1990.jpg" /> <h1>1980's</h1> <p>1980s</p> </li> <li id="1990s"><img src="/gfx/timeline/1990.jpg" /> <h1>1990's</h1> <p>1990s</p> </li> <li id="2000s"><img src="/gfx/timeline/2000.jpg" /> <h1>2000s</h1> <p>2000s</p> </li> </ul> But I don't understand how I can make it look like this... Any assistance?thanks Current CSS: #timeline { width: 660px; height: 350px; overflow: hidden; margin: 100px auto; position: relative; background: url('Img/vline.png') left 65px repeat-x; } #dates { width: 660px; height: 60px; overflow: hidden; } #dates li { list-style: none; float: left; width: 100px; height: 50px; font-size: 24px; text-align: center; background: url('Img/hline.png') center bottom no-repeat; } #dates a { line-height: 38px; text-decoration:none; color:#999; font-size:15px; font-weight:bold; } #dates .selected { font-size: 38px; color:#000; } #issues { width: 660px; height: 350px; overflow: hidden; } #issues li { width: 660px; height: 350px; list-style: none; float: left; } #issues li img { float: right; margin: 100px 30px 10px 50px; } #issues li h1 { color: #999; font-size: 20px; margin: 20px 0; } #issues li p { font-size: 14px; margin-right: 70px; font-weight: normal; line-height: 22px; }

    Read the article

  • Stop images from wrapping when div width is to small.

    - by razass
    I have a div that contains a ul and in each li there is a picture. I have floated the pictures left to get them to line up in a straight line however once it reaches the end of the div, it wraps. I would like the pictures to continue on to the right, hidden, so that I am able to create a carousel. My code is below. The HTML <div id="container"> <div class="lfbtn"></div> <ul id="image_container"> <li class="the_image"> <img src="" /> </li> </ul> <div class="rtbtn"></div> </div> The CSS #container { width: 900px; height: 150px; margin: 10px auto; } #image_container { position: relative; left: 50px; list-style-type: none; width: 700px; height: 110px; overflow: hidden; } #image_container li { display: inline-block; padding: 7px 5px 7px 5px; float: left; } .lfbtn { background-image: url(../../img/left.gif); background-repeat: no-repeat; margin: 10px; position: relative; float: left; top: -12px; left: 50px; height: 90px; width: 25px; } .rtbtn { background-image: url(../../img/right.gif); background-repeat: no-repeat; height: 90px; width: 25px; margin: 10px; position: relative; top: -101px; left: 795px; } Thanks in advance!

    Read the article

< Previous Page | 47 48 49 50 51 52 53 54 55 56 57 58  | Next Page >