nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Layout Problems and Div's Galore

chietala

So I'm pretty frustrated at LiveSite's contraints when it comes to design but maybe I'm doing something wrong.

I have a design that is centered so that when the window resizes the content is always centered. The problem is that the design calls for rows in the fixed layout to have a background the goes the width of the browser. See link:

http://cl.ly/3129520433cf35a06a1e

I am using fixed layouts for this and everything gets cut off at the container because of interwovens "awesome" generated markup. So the design ends up looking like this.

http://cl.ly/69f383af0130355b74c7

Is their anyway of doing this in LiveSite? Oh and is anyway to stop LiveSite from generating out so many divs around components? It's extremely inefficient, unnecessary and unsustainable.

Any help would be great.

Find more posts tagged with

Comments

vpatel

Yes you can have a background image that spans across the entire page and have rest of your "components" / page layout centered in your browser window. Post your FAL.

chietala

FAL? Sorry ahead of time.

We are running TeamSite 7.1, LiveSite 7.1 on TomCat

Here is the Fixed Layout

[html]

[/html]

chietala

/*** UPDATE ***/

This only works if you don't have to put anything under the absolutely positioned div. Still trying to work on something that works for a row in the middle.

So I think I found a solution to this just with CSS. I'm going to have to test it in LiveSite but technically it should work. Here is my solution to share since I couldn't find at least something that made sense.

Here is the result:

http://cl.ly/d6b8a24c3ef1affa2041

It involves setting the parent div or container to position absolute.

[html]

<meta charset="UTF-8" />
<meta http-equiv="refresh" content="1" />

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

&amp;amp;lt;br&amp;amp;gt; &amp;amp;lt;br&amp;amp;gt; .wrapper{width:900px; margin:0 auto;}&amp;amp;lt;br&amp;amp;gt; #header{background:red;}&amp;amp;lt;br&amp;amp;gt; /* This where the magic happens */&amp;amp;lt;br&amp;amp;gt; #footer{background: purple; position:absolute; left:0; width:100%;}&amp;amp;lt;br&amp;amp;gt;

[/html]
Now does anyone know how I can minimize or eliminate some of the divs that get wrapped around the components?