I'm using sprites for my navigation for this particular project. The sprites are working fine, and the original list items are floated left so that they stay in order. However, I'm trying to line it up with the right side of the page, not the left. I've tried to float the unordered list container to the right, the nav container and then a div outside of that and all of them break the sprite. Does anyone know why?
http://lrroberts0122.github.com/DWS/lab4/index.html
http://lrroberts0122.github.com/DWS/lab4/css/main.css
Thank you very much for your help.
I ended up finding that I needed to float the h1 element left and give it a width of 340 and a height of 100 to match the other half. After that, the navigation floated in nicely.
Related
Using Elementor Pro: I have a floating element (global) that is an image with a link to a quote page. Visibly everything is okay. The problem is when scrolling, the floating element code covers the inner content, making the inner content links inaccessible. I have changed the Z index on the inner content to be higher than the floating quote element but now as you scroll down the page, the floating quote element link is 'hidden' by the higher Z index of the inner content. Is there a way for me to reduce the dimension of the code 'box' for the floating element so that it doesn't impact the inner content or some other way to have links work properly at all times when scrolling?
After trying different scenarios and options available, I was able to change the size of the element by using inline(auto) for the image size. This reduced the 'coverage' area of the element. However, the absolute positioning was more of an issue than I thought it would be (across various desktop screen sizes - mobile/tablet have alternate setup, so only desktop was affected). I made a decision to remove the floating element and add an item in the sticky nav, so access to the request for quote is still continually visible in the nav.
By default, the anchor for the text element in SVG is at the bottom left, but I want it to be at the top left, since I am also creating a rectangle to act as the background for the text, but it is displayed incorrectly since the text is higher than the rectangle (because rectangle anchor/offset is at the top left). Is there a way to fix this, so both text and rectangle can be drawn at same coordinates and be displayed in the same location.
The dominant-baseline property/attribute worked for me:
svg {
dominant-baseline: hanging;
}
The coordinates (x and y) you supply for text elements is used as the baseline of the text. This makes sense because if there is text with varying font sizes on the same line, you would want their baselines to line up.
There is no "automatic" way to do what you want. SVG elements are always absolutely positioned.
You will just have to move the text down a bit by making the y coordinate a bit larger.
Alternatively, you could add a dy attribute to shift the text down a bit. Or even use a transform attribute to do the same. But using either of those methods wouldn't really be simplifying the process for you.
I've an svg dynamically created on a page. As things "happen" (user clicks) the svg expands and collapses certain elements. It may fit in the viewport, it may not. In the case that its too big to fit on a page, the user must scroll to where s(he) wants to go/see. Now this is fine, however I have a requirement that the last element "selected" becomes the center of the page/viewport. i.e. If they click on an item, thats what they need to see without scrolling.
Could anybody tell me the best way to attack this. I've googled around but can't find what I'm looking for (though I'm not long at all this so I might have been searching the wrong stuff).
Is there a way to do this purely programmatically with javascript? Or am I obliged to pass by CSS to get the solution I want. Any tips/links/advice much appreciated.
thanks and have a nice day
G
I had a similar thing and I used the viewBox property to handle this. You could also use a wrapping <g> element, which you translate. However, from my point of view the basic approach is the same and you basically need to do two things:
keep track of the x and y offset and the dimensions of the viewport. (Using the viewBox will give you that »for free«)
Compute the center of the Element. Therefore I used the getBoundingClientRect()method which yields the AABB of of the Element in absolute coordinate space, relative to top-left edge of the whole page.
With these things, all that remains is to calculate the vector from the viewport center to the object's center.
Here you can find the reference of the viewBox and here a nice tutorial about it, because it can be a bit confusing at the beginning.
Another pro for the »viewBox« approach is: There is no dependency on special DOM elements, it just works on the root <svg> element. I once implemented both methods, I started out using a wrapping <g> element, what worked fine but gave me some performance issues. So I decided to change and use the viewBox, with the result, that the performance in Firefox grow, but slowed down in Chromium.
Edit
Here you can find a little fiddle, that outlines the approach. But be aware of the following: getBoundingClientRect() yields the position of the Element on the whole Page, so if your <svg> is not positioned at (0,0) (top: 0px; left: 0px), than that will include the offset of the svg itself. The offset of the viewBox must not include this offset, so you need to cancel that out somehow. For sake of simplicity I just used the client Bounding Rect of the SVG, what works because there are no transformations applied.
So, I am designing with a fixed width. I just want the gutters to be flexible. So, I tried just using parent div's with 100% width. As you can see in this fiddle:
http://jsfiddle.net/P3Ckk/115/
What I intended was for what is happening with the fixed div ("nav" div) to happen. When the user window gets too small, I'd like the 100% width to collapse upon the fixed width elements (in this case, 1000px) and enable horizontal scrolling.
However, my parent width:100% does not work like that with relative positioning. The "top" "title" and "container" divs all stop at whereever the screen stops. I suppose that is 100% but it leaves the fixed width content overflowing these (now) smaller parent divs!
Additionally, the problem also shows up when a vertical scrollbar comes down. The area to the vertical scrollbar is considered 100% and the remaining gets left blank. This also creates a horizontal scrollbar to view this "extra" part.
What is the best solution here? Should I abandon my parent div 100% width approach?
I've tried making the these 100% divs have min-width:1000px, but that doesn't seem to work. I'm just a bit stumped here.
Any help appreciated. Thanks!
I've read about this before. Before you can use 100% in a div width you must set the css of both your body and html tags to 100%.
html,body{
width: 100%;
}
or else it will stop at the edge of the screen on any device.
I'm trying to make a page with two overlapping div's, one aligned to the left with the float:left attribute, and the other next to it, but overlapping by means of a negative margin.
Despite all this, I just get text as my output when I preview in browser from Dreamweaver. Problem is, it looks exactly how I want it in DW's preview pane.
Here is the jsFiddle, and how it looks in Dreamweaver.
Try swapping positions of the #img div, and the #titlebar div; AND make sure both are set to 'float:left'.
(#img div first, then #titlebar div in the HTML)