Search Results

Search found 17781 results on 712 pages for 'css height'.

Page 44/712 | < Previous Page | 40 41 42 43 44 45 46 47 48 49 50 51  | Next Page >

  • align div right with position fixed

    - by Pradyut Bhattacharya
    Hi i want to show a div which is always visible with the user as the user scrolls the page are there any javascript solutions?? i have used the css position:fixed; Now i want to show the div at the right hand corner of the parent div i used the css .test { position: fixed; text-align: right; } but that doesn't work with position:fixed; For that i used the css but i think nothing works on the top of postilion fixed My example page here the div i want to align is "test" under the parent class "parent" Is there any solution or any other javascript solution to this... thanks Pradyut India

    Read the article

  • Forcing images to not wrap

    - by Mohammad
    I can't touch the html theme but I have access to the css files. <div class="photos"> <img src="a.jpg" alt="" align="left" /> <img src="b.jpg" alt="" align="left" /> <img src="c.jpg" alt="" align="left" /> //align makes the images wrap </div> Unfortunately I can't remove align="left" from the images otherwise this CSS snippet would have done the job .photos{ white-space: nowrap; } .photos img{ display: inline; vertical-align: top; } Any ideas? Is it even possible to make these images line-up horizontally without using the force of a table and only with CSS? Many Thank in advance!

    Read the article

  • Overlapping two divs and 'clearing' their parent div

    - by brady8
    My CSS-fu is letting me down here: What I'd like to do is position two child divs to be overlapping: Using position: absolute; top: 0px; left: 0px; is the only way I know how, with the parent set to position: relative. The problem with this is that the child divs are taken out of the layout as per the CSS spec, shrinking the parent div to height: 0px, so that I can't clear that div and put any content below. My amazing ASCII art below details what I'm going for... any ideas? As an aside, I need these divs to be overlapping exactly for jQuery fades, and maybe trying out some of the new Webkit transforms, a la Apple's cardflip demo: http://developer.apple.com/safari/library/samplecode/CardFlip/Introduction/Intro.html If there's another way to get them overlapped exactly in CSS, I'm all ears. Thanks! |-------------------------------------------------| | Parent div | | |-------------------------------------------| | | | | | | | DIVS 1 & 2 (overlapped) | | | | | | | |-------------------------------------------| | |-------------------------------------------------| ...more content below, after clearing the parent...

    Read the article

  • The weirdest css issue I have ever seen

    - by jasondavis
    Below I have 2 css codes for a div, please note that the first one does not even have a div on the page or ANYTHING with it's name on it. I can also rename it to anything. Now where the weird part comes in. The second bit of code below has a width of 520px, the only way that the div on the page will be 520px is if I leave the css code thats above that one, the 1st one with no existing div on the page HAS to be on the page for the second css code to work, At first I thought it has to be a browser caching issue, so I clear my cache and that does nothing, I then try 2 other browsers and they all have the same result. I add the 1st bit of code into the page and the second bit works, I take the first bit away and the second bit does not work. AM i overlooking something here? .commentwrappsdfsde2{width:950px;margin:0 0;padding:0;} .commentwrapper{width:520px;margin-right:auto;margin-left:auto;} Here is the whole page code <style> <!-- css for user photos--> div.imageSub img.female { border-top: 1px solid #FF3399; } div.imageSub img.male { border-top: 1px solid #3399FF; } div.imageSub img { z-index: 1; margin: 0; display: block; } div.imageSub div { position: relative; margin: -15px 0 0; padding: 5px; height: 5px; line-height: 4px; text-align: center; overflow: hidden; font-family:Trebuchet MS,Helvetica,sans-serif; font-size:12px; font-weight: bold; } div.imageSub div.blackbg { z-index: 2; background-color: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); opacity: 0.5; } div.imageSub div.label { z-index: 3; color: white; } <!-- end photo block--> /* Comments */ .commentwrappsdfsde2{width:950px;margin:0 0;padding:0;} .commentwrapper{width:520px;margin-right:auto;margin-left:auto;} #comments ol.commentlist li { list-style-type:none; padding:20px; background:none; } #comments ol.commentlist li.thread-even { background:#f6f6f6; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; } #comments ul.children li ul.children,#comments .commentlist{padding:0;} </style> <div class="commentwrapper"> <div id="comments"> <ol class="commentlist"> <li class="comment thread-even " > Comment 1 </li> </ol> </div> </div>

    Read the article

  • How to set width of parent div in css

    - by Marcin Wiankowski
    I am using vaadin in combination with navigator7 addon. In header and footer there are spacings between conponents That i would not have. I tried to remove the spacings using setSpacing(false) for header and footer component but it is not working probably becouse of the addon. So i tried to solve this using css. The sample below i a test output html that vaadin generates: <!DOCTYPE html> <html> <head> <style type="text/css"> div div .footer-label, .footer-label{ color: green; width: 100px !important; } </style> </head> <body> <div class="my-footer"> <div> <div style="color: red; height: 20px; width: 482px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px; background-color:yellow;"> <div style="float: left; margin-left: 0px;"> <button class="footer-label" style="width: 400px;">Text</button> </div> </div> </div> </div> </div> </body> </html> There is a button inside div div. I would like to make the width of root div to have exact same width as the button. I ended with this css code but it does not work. The root div stays in its 482 pixels width. div div .footer-label, .footer-label{ color: green; width: 100px !important; } Is it possible to do something like that in css and how to do it? Or how to solve this using problem using Vaadin? Vaadin Code public class MyAppLevelWindow extends HeaderFooterFixedAppLevelWindow { @Override protected Component createHeader() { ... } @Override protected Component createFooter() { HorizontalLayout myFooter = new HorizontalLayout(); akmedFooter.setSpacing(false); akmedFooter.setStyleName("my-footer"); NativeButton sendProblemButton = new NativeButton("Button"); sendProblemButton.setStyleName("footer-label"); akmedFooter.addComponent(sendProblemButton); ..... return akmedFooter; } ............. } Answer .my-footer div div{ width: auto !important; }

    Read the article

  • CSS menu items flickering in IE6

    - by Quick Joe Smith
    Edit #1: I have just discovered this flicker bug affects IE8 (and therefore most likely IE7) as well. I am putting together a pure-CSS dropdown menu (mostly a learning exercise) and have hit a point in IE where the submenu items are flickering as the mouse moves around within the <li> but outside the inner <a>. Source code is as follows: The included csshover3.htc is downloadable from Peter Nederlof's page for Whatever:hover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Menu</title> <style type="text/css"> body { behavior: url("csshover3.htc"); } div#navbar { background-color:#333; font-size:1.4em; overflow:auto; } div#navbar ul { display:inline-block; /* ie6 float container bug */ list-style:none; margin:0px; padding:0px; } div#navbar ul.menu li { float:left; display:inline; /* ie6 double-margin bug */ } div#navbar ul.menu a { display:block; text-decoration:none; color:#fff; padding:5px 10px; } div#navbar ul li a:link, div#navbar ul li a:visited { text-decoration:none; } div#navbar ul li a:hover { color:#333; background-color:#f6c323; } div#navbar ul.menu ul { display:none; } div#navbar ul.menu li:hover ul { display:block; position:absolute; background-color:#333; } div#navbar ul.menu li:hover ul li { float:none; } div#navbar ul.menu li:hover ul ul { display:none; } div#navbar ul.menu li:hover li:hover { position:relative; } div#navbar ul.menu li:hover li:hover ul { display:block; position:absolute; left:100%; top:0; } </style> </head> <body> <h1>CSS Menu</h1> <div id="navbar"> <ul class="menu"> <li><a href="#">A</a></li> <li> <a>B</a> <ul> <li><a href="#">123</a></li> <li><a href="#">2</a></li> <li> <a>Tweee</a> <ul> <li><a href="#">Phwoar</a></li> <li><a href="#">Gr</a></li> </ul> </li> </ul> </li> <li><a href="#">C</a></li> </ul> </div> </body> </html> Live demo: http://jsfiddle.net/4q6Vw/ Any help is appreciated.

    Read the article

  • HTML/JS/CSS issue getting bigger by itself

    - by Azzyh
    Here's the picture to begin with. I have this check box, that when you check, then with jQuery toggle(); it hides that you see in first half of the picture (#writeComment) and shows #SCtryVOTE (what you see in the other half picture, to the right). Now i dont know why but of some reason it expands when its checked, why i dont know, is it because it needs more place than it have or? how do i make this work without having problems when its checked. Here's coding: $('#tryout').click(function () { $('#writeComment').toggle(!$(this).attr('checked')); $('#SCtryVOTE').toggle($(this).attr('checked')); }); the js jquery script part, heres the table and divs HTML part: <input type="checkbox" id="tryout"> <table align="center" width="400" cellpadding="0" cellspacing="1" id="theBoxer"> <tr style="background: #686868;"> <td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td> <td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td> </td> </tr> <tr> <td align="left" valign="top" width="70" height="112" style=""> TEST </td> <td align="left" valign="top" width="70" height="112" style=""> <div id="writeComment"> Smid en kommentar:<br> <form action="javascript:DoInsert()" method="post"> <textarea id="kommentar" name="kommentar"></textarea><br /> <input type="hidden" name="fID" id="fID" value="<? echo $_GET["id"]; ?>"> <input type="submit" name="Submit" value="Sæt ind!"> </form> </div> <div id="SCtryVOTE" style="display: none;"> <form onsubmit="if (!this.comment.cleared) clearContents( document.getElementById('comment') ); return true;" action="javascript:DoSCInsert()" method="post"> <textarea onfocus=" javascript:clearContents(this); this.cleared=true;" rows="5" cols="40" id="comment" name="comment" <?php if($vis["username"] == $pusername) { echo "DISABLED"; } ?>>Tryk for at skrive. Skal være detaljeret og grundet.</textarea> <br>Ja: <input type="radio" value="Y" id="SCvoteY" name="vote"></input> Nej: <input type="radio" id="SCvoteN" value="N" name="vote"> </input> <input type="submit" id="SCstem" name="Submit" value="Stem!"> </form> </div> Maybe you need the CSS part too for these two boxes: #writeComment{ position: relative; left: 5px; top: 10px; } #SCtryVOTE{ position: relative; left: 5px; top: 10px; }

    Read the article

  • Interpolating height on opengl quad

    - by ThePlague
    Okay I've got a quad, see picture. And want to find the height at any point in the quad, is there a way to do this accurately as bilinear interpolation doesn't work in this case. As you can see the trees trunk is well beneath the terrain and should be at the same height as the trunks around it. I know the altitude of the vertices marked by a red circle and the centre red circle is roughly where the base should be, I've also crudely added a line as that surface is not flat.

    Read the article

  • How can I control the height of a ListView in WPF, using a complex DataTemplate with DataTriggers?

    - by Rob Perkins
    I have a ListView element with a DataTemplate for each ListViewItem defined as follows. When run, the ListView's height is not collapsed onto the items in the view, which is undesirable behavior: <DataTemplate x:Key="LicenseItemTemplate"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="{Binding company}"></TextBlock> <Grid Grid.Row="1" Style="{StaticResource HiddenWhenNotSelectedStyle}"> <Grid.RowDefinitions> <RowDefinition /> </Grid.RowDefinitions> <Button Grid.Row="0">ClickIt</Button> </Grid> </Grid> </DataTemplate> The second row of the outer grid has a style applied which looks like this. The purpose of the style is to : <Style TargetType="{x:Type Grid}" x:Key="HiddenWhenNotSelectedStyle" > <Style.Triggers> <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={ RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem} } }" Value="False"> <Setter Property="Grid.Visibility" Value="Collapsed" /> </DataTrigger> <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={ RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem} } }" Value="True"> <Setter Property="Grid.Visibility" Value="Visible" /> </DataTrigger> </Style.Triggers> </Style> The ListView renders like this: The desired appearance is this, when none of the elements are selected: ...with, of course, the ListView's height adjusting to accommodate the additional content when the second grid is made visible by selection. What can I do to get the desired behavior?

    Read the article

  • I have a WPF/Silverlight ListView whose height is unpredictable and too high. How do I control it be

    - by Rob Perkins
    I have a ListView element with a DataTemplate for each ListViewItem defined as follows. When run, the ListView's height is not collapsed onto the items in the view, which is undesirable behavior: <DataTemplate x:Key="LicenseItemTemplate"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="{Binding company}"></TextBlock> <Grid Grid.Row="1" Style="{StaticResource HiddenWhenNotSelectedStyle}"> <Grid.RowDefinitions> <RowDefinition /> </Grid.RowDefinitions> <Button Grid.Row="0">ClickIt</Button> </Grid> </Grid> </DataTemplate> The second row of the outer grid has a style applied which looks like this. The purpose of the style is to : <Style TargetType="{x:Type Grid}" x:Key="HiddenWhenNotSelectedStyle" > <Style.Triggers> <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={ RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem} } }" Value="False"> <Setter Property="Grid.Visibility" Value="Collapsed" /> </DataTrigger> <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={ RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem} } }" Value="True"> <Setter Property="Grid.Visibility" Value="Visible" /> </DataTrigger> </Style.Triggers> </Style> The ListView renders like this: The desired appearance is this, when none of the elements are selected: ...with, of course, the ListView's height adjusting to accommodate the additional content when the second grid is made visible by selection. What can I do to get the desired behavior?

    Read the article

  • Accordion "growing out" from its container - in IE7/8

    - by Richard Knop
    I think this problem is best explained by images. This is how my accordion looks: When you click on the small plus/minus icons the slides under each chapter will expand/collapse. However when the content in the accordion grows too tall, it grows out from its container. So if I click on more plus icons the accordion will look like this (not pretty): As you can see, the container is not growing taller together with the accordion and it does not look good. This problem only occurs in IE7 and IE8. It works in Firefox and Chrome. The HTML looks like this (simplified): <div id="content"> <div class="box2 rounded-corners"> <div class="chapters"> <h3><a href="/clientarea/view/archived-course/teid/133">Obsah</a></h3> <div id="accordion"> <ul> ... // accordion content - too long ... // accordion content - too long </ul> <div class="clear">&nbsp;</div> </div> <div class="clear">&nbsp;</div> </div> <div class="training-body"> ... // content to the right of the accordion </div> </div> </div> The CSS, again siplified: html, body { height: 100%; width: 100%; overflow: auto; } #content { background: white url('/images/background_middle.png') left top repeat-x; padding: 13px; min-height: 40em; height: auto !important; height: 40em; } /* this is the div with rounded corners */ #content .box2 { background: white; padding: 0 15px 15px; border: 1px solid #C5E3F8; position: relative; } /* left sidebar 98 #content div.chapters { float: left; width: 224px; } /* orange heading "OBSAH" */ #content div.chapters h3 { color: #ff6e19; text-transform: uppercase; font-size: .9em; text-align: center; padding-bottom: .5em; margin-top: 1em; margin-bottom: 0; } #content div.chapters h3 a { color: #ff6e19; } /* accordion */ #accordion { width: 226px; border-top: 1px solid #c5e3f8; } #accordion ul { padding-left: 0; margin-top: 0; margin-bottom: 0; margin-left: 0; } /* area to the right of the accordion */ #content div.training-body { float: left; padding-left: 0px; width: 748px; line-height: 1.3em; }

    Read the article

  • $(window).load(function(){}); problem in Opera

    - by Slammer
    Hello. I need to recalculate body's main div height, than wait while all content (images) loads and only than show it to site visitor. To achieve this i used jQuery and CSS //CSS looks like body {display: none;} /* div block height calculator */ function recalculateHeight(id, add){ var height = $(id).height(); if (height < 650) height = 650; if (add) height = height + add; $('#left_div').height(height); $('#center_div').height(height); $('#right_div').height(height); } //recalculate height when page is fully loaded $(document).ready(function(){ $(window).load(function(){ $('body').show(); recalculateHeight("#center_div"); }); }); Everything works fine in IE, Firefox, Safari. In Chrome height calculation works, but seems that body doesn't hides, because all images loads as usual they should. In Opera, both functions doesn't work. Not page is showed when all content is loaded, not page calculation works. You would better understand what I am talking about: Site where this problem is Thanks for Your response, brgds

    Read the article

  • Optimize css vs Google page speed is messing with me

    - by The Disintegrator
    I'm using google page speed and it's telling me my css is inefficient... Very inefficient rules (good to fix on any page): * table.fancy thead td Tag key with 2 descendant selectors and Class overly qualified with tag * table.fancy tfoot td Tag key with 2 descendant selectors and Class overly qualified with tag The css rules are table.fancy {border: 1px solid white; padding:5px} table.fancy td {background:#656165} table.fancy thead td, table.fancy tfoot td {background:#767276} I want the header and footer in a different background color than the body of the table (a data table) On what grounds this is inefficient? How to make it more efficient? I will not add a class to the thead and tfoot for googles's sake.

    Read the article

  • Developing FIrebug like web application for CSS things.

    - by vishwanath
    I am developing a web application for web designing. One part of it includes changing CSS styles on the run and saving the same back to server. I see that, first part of my motive is implemented there in firebug, where I can view CSS style rules applied to a particular HTML element and can change them to view the effect. An earlier question at SO lead to me firebug lite source code https://getfirebug.com/firebug-lite-debug.js , which is far less confusing than full version of firebug. My question was that, is there any way I can get documentation of the firebug/firebug lite code which can speed things up for me. After some googling I found out that there is Firebug API http://getfirebug.com/developer/api/firebug1.6/ But don't know how much useful it is for me. Any alternative way to do this is also welcome.

    Read the article

  • Hide header and footer when printing from Internet Explorer using Javascript or CSS

    - by molasses
    When I print a webpage from Internet Explorer it will automatically add a header and footer including the website title, URL, date, and page number. Is it possible to hide the header and footer programatically using Javascript or CSS? Requirements: works in IE 6 (no other browser support necessary as its for an Intranet) may use ActiveX, Java Applet, Javascript, CSS preferably not something that the user needs to install (eg. http://www.meadroid.com/scriptx). feel free to list other third party available plug-ins though as I think this may be the only option don't require the user to manually update their browser settings don't render the pages as PDF or Word document or any other format don't write to the registry (security prevents this) Thanks

    Read the article

  • CSS How to apply child:hover but not parent:hover

    - by CNelson
    With the following html, when I hover over child, I get a green background on parent. How can I stop that from happening? I do want the green background if I am hovering outside of the child element. CSS3 is fine. <style> .parent { padding: 100px; width: 400px; height:400px; } .parent:hover { background-color: green; } .child { padding: 100px; width: 200px; height:200px; } .child:hover { background-color: blue; } </style> <div class="parent"> <div class="child">Child</div> </div>

    Read the article

  • CSS Position Absolute constant top margin

    - by Brian
    This question sounds simple but I'm an expert with CSS and I'm thinking it's impossible (a RARE thing). Is it possible to use CSS to give a a page a constant top margin if that div has no background (e.g. you can see through it)? Basically, I want the background image to be visible in the top 100px of a site, so that even when scrolling down, that top-margin remains in place. You can look at some live code here: http://cl.ly/40oY Here's a little infographic of what I'm attempting to do: http://cl.ly/40xt Thanks!

    Read the article

  • CSS Redundancy checker for GWT

    - by cupakob
    In my project i have a lot of css styles. Some of them are never used (not anymore). I check this manually with eclipse: i select text and then with "Search - Text - Project" i can find, if this style occurs only in the stylesheet or also in java files. Is there better way to check, which styles are currently used in my GWT project? edit: @Igor,Keith: thanks for the hint, but i'm not using the CssResource to insert my css file. Instead i use my index.html. And i want to remove the unused styles just for better overview. CssResource is not exactly, what i'm looking for.

    Read the article

  • CSS Margins Increase with H1 Length

    - by Ethan Turkeltaub
    Consider the following markup: <!DOCTYPE html> <html> <head> <title>Test Page</title> <link href="screen.css" rel="stylesheet" /> </head> <body> <h1>Test</h1> <h3>Description</h3> </body> </html> And the CSS: h3{ margin-top: -25px; } Now, I want the H3 to have a margin-left of however long H1 is, and it is consistently 20px away. So, if I have a H1 block of 200px long, then H3 would have a margin-left of 220px, and so on and so forth. How would I do this?

    Read the article

  • CSS: series of floated elements without wrapping but rather scrolling horizontally

    - by tybro0103
    I'm working on a album viewer. At the top I want a horizontal container of all the image thumbnails. Right now all the thumbnails are wrapped in a div with float:left. I'm trying to figure out how to keep these thumbnails from wrapping to the next line when there are too many, but rather stay all in one horizontal row and use the scrollbar. Here's my code: (I don't want to use tables) <style type="text/css"> div { overflow:hidden; } #frame { width:600px; padding:8px; border:1px solid black; } #thumbnails_container { height:75px; border:1px solid black; padding:4px; overflow-x:scroll; } .thumbnail { border:1px solid black; margin-right:4px; width:100px; height:75px; float:left; } .thumbnail img { width:100px; height:75px; } #current_image_container img { width:600px; } </style> <div id="frame"> <div id="thumbnails_container"> <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/glry-pixie-bob-kittens.jpg" alt="foo" /></div> <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-1.jpg" alt="foo" /></div> <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-3.jpg" alt="foo" /></div> <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-Jan08.jpg" alt="foo" /></div> <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery3.jpg" alt="foo" /></div> <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery4.jpg" alt="foo" /></div> <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten3.jpg" alt="foo" /></div> <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten1.jpg" alt="foo" /></div> </div> <div id="current_image_container"> <img src="http://www.whitetailrun.com/Pixiebobs/PBkittenpics/shani-kits/Cats0031a.jpg" alt="foo" /> </div> </div>

    Read the article

  • CSS inheritance, aliases and other cool stuff

    - by emzero
    The other day I was randomly browsing the web and I found some program that lets you write CSS aliases and other cool stuff (which I can't remember right now). As an example, I remember you can do something like this: .myclass { background-color: red; greenfont } where greenfont was defined somewhere else as somekind of alias greenfont { color: green; } Then the program will generate the resulting CSS based on the alias and other stuff. Does anyone has used this? Or did I dreamed about it? I cannot find it now :P

    Read the article

  • How to use imported css styles in GWT correctly

    - by Eduard Wirch
    Imagine you created the following simple widget with UiBinder: <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <ui:style type="my.package.Widget1.Widget1Style"> .childWidgetStyle { border-width: 1px; border-style: dotted; } </ui:style> <g:TextArea styleName="{style.childWidgetStyle}"/> </ui:UiBinder> package my.package; // some imports here public class Widget1 extends Composite { private static Widget1UiBinder uiBinder = GWT.create(Widget1UiBinder.class); interface Widget1UiBinder extends UiBinder<Widget, Widget1> { } public interface Widget1Style extends CssResource { String childWidgetStyle(); } @UiField TextArea textArea; public Widget1(String text) { initWidget(uiBinder.createAndBindUi(this)); textArea.setText(text); } } Than you use this simple widget in another (parent) widget you created: <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <ui:style> .parentWidgetStyle .childWidgetStyle { margin-bottom: 10px; } </ui:style> <g:VerticalPanel ui:field="listPanel" addStyleNames="{style.parentWidgetStyle}" /> </ui:UiBinder> package my.package; // imports go here public class ParentWidget extends Composite { private static ParentWidgetUiBinder uiBinder = GWT.create(ParentWidgetUiBinder.class); interface ParentWidgetUiBinder extends UiBinder<Widget, ParentWidget> { } @UiField VerticalPanel listPanel; public ParentWidget(final String... texts) { initWidget(uiBinder.createAndBindUi(this)); for (final String text : texts) { final Widget1 entry = new Widget1(text); listPanel.add(entry); } } } What you want to achieve is to get some margin between the Widget1 entries in the list using css. But this won't work. Because GWT will obfuscate the css names. And the obfuscated name for .childWidgetStyle in ParentWidget will be different from the .childWidgetStyle in Widget1. The resulting css will look similar to this: .G1unc9fbE { border-style:dotted; border-width:1px; } .G1unc9fbBB .G1unc9fDa { margin-bottom:10px; } So the margin setting wont apply. How do I do this correctly?

    Read the article

  • Issue with CSS drop down

    - by user277314
    Im having a little issue with the css drop down in my navigation. The products nav tab is suppose to have the drop down. Additionally, the nav works fine but it seems that the sub categories arent displaying correctly. HERE IS LINK Here is my navigation code: HTML <div id="nav"> <ul id="navlist"> <li><a href="home.html" id="nav-home">Home</a></li> <li><a href="company.html" id="nav-company">company</a></li> <li><a href="benefits.html" id="nav-benefits">benefits</a></li> <li><div id="nav-products2">Products</div> <ul> <li><a href="food.html" id="nav-food-serv">Food Processing Services</a></li> <li><a href="vehicle.html" id="nav-vehicle-serv">Vehicle Services</a></li> <li><a href="auto.html" id="nav-auto-serv">Automotive Services</a></li> <li><a href="laundry.html" id="nav-laundry-serv">Automotive Services</a></li> </ul> </li> <li><a href="laboratories.html" id="nav-labs">laboratories</a></li> <li><a href="industries.html" id="nav-industries">industries</a></li> <li><a href="contact.html" id="nav-contact">contact</a></li> </ul> </div> CSS #nav { float:left; width:1002px; height:42px; } #navlist { list-style: none; list-style-position:outside; list-style-type: none; } #navlist li{ float:left; } #navlist li a { display: block; height: 42px; overflow: hidden; background-position: top left; background-repeat: no-repeat; text-indent: -999em; } #navlist li a:hover { background-position: bottom left; } #navlist li .current {background-position: bottom left;} /* NAV SPECIFICS */ #nav-home {width: 129px; background-image: url(../images/nav/home.jpg);} #nav-company {width: 161px; background-image: url(../images/nav/company.jpg);} #nav-benefits {width: 133px; background-image: url(../images/nav/benefits.jpg);} #nav-products {width: 112px; background-image: url(../images/nav/products.jpg);} #nav-labs {width: 137px; background-image: url(../images/nav/laboratories.jpg);} #nav-industries {width: 169px; background-image: url(../images/nav/industries.jpg);} #nav-contact {width: 161px; background-image: url(../images/nav/contact.jpg);} #nav-food-serv {width: 161px; background-image: url(../images/nav/sub.jpg);} #nav-vehicle-serv {width: 161px; background-image: url(../images/nav/sub.jpg);} #nav-auto-serv {width: 161px; background-image: url(../images/nav/nav/sub.jpg);} #nav-laundry-serv {width: 161px; background-image: url(../images/nav/sub.jpg);} #nav-products2 {width: 112px; background-image: url(../images /nav/products.jpg);height: 42px; overflow: hidden; background-position: top left; background-repeat: no-repeat;text-indent: -999em;} #nav-products2:hover {background-position: bottom left;} #navlist li ul { /* second-level lists */ position: absolute; z-index:10; list-style:none; display: block; background: #000; width: 161px; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ margin:0; padding:0; border-left:1px solid #a58545; border-right:1px solid #a58545; } #navlist li ul li { list-style:none; display: block; clear:left; width:100%; } #navlist li ul li a { display:block; overflow: hidden; height:42px; background-position: top left; background-repeat: no-repeat; text-indent: -999em; margin:0; background-color:0; padding:0; width: 161px; } #navlist li ul li a:hover { background-position: bottom left; }

    Read the article

< Previous Page | 40 41 42 43 44 45 46 47 48 49 50 51  | Next Page >