I've been frustrated by this problem for days on end and just cannot solve it. My CSS/HTML skills are somewhat elementary, any help much appreciated.
(To start let me mention that I am using Weebly editor and using the HTML/CSS editor to customize.)
So I have a horizontal list which is inside a wrapper. The problem is I cannot get it to take up the entire width of the #navwrap ul { or the #navwrap parent/s. Also I can't get the list to center inside its parent.
I have put borders around the elements to see what is going on. (Hopefully I can attach a pic). Some of the CSS is leftover from trying so many different things to fix this, so some if it may be unnecessary.
HTML:
<div id="header-wrap">
<table id="header">
<tr id="header-row">
<td id="logowrap"><img id="logo" src="img.svg"></td>
<td id="navwrap">{menu}
</td>
ETC...
CSS:
#navwrap {
height: 50px;
border: 1px solid red;
background-color: none;
}
#navwrap ul {
width:100%;
border:1px solid orange;
}
#navwrap li {
height:40px;
float:auto;
display:inline-table;
border:1px solid green;
}
#navwrap a {
vertical-align: text-bottom;
height:50px;
border: 1px solid blue;
color:white;
}
SOLVED: I managed to fix this with a display: table (wrapper) display:table-row (ul) display:table-cell solution.
Related
Need a solution when child region classic report overflow Parent region horizontal Scroll bar add.
If I understood you correctly, you want to add a horizontal scrollbar into the Classic report region. If that's so, two options I know (adjust values so that they fit your report; these are just examples):
Put this into region header:
<div style="border: 1px solid black; width: 500px; height: 300px; overflow: auto">
Region footer:
</div>
Another option: put this into the HTML header:
<style type="text/css">
<!--
div.scroll
{
height: 300px;
width: 500px;
overflow: auto;
border: 1px solid #666;
background-color: #CCC;
padding: 8px;
}
-->
</style>
Region header:
<div class="scroll">
Region footer:
</div>
Is it possible to achieve a two-color border like the one in the following picture (black/gray) using Qt styles?
I've already tried to set the border style to groove (see my example below) but in this case the "2nd" color seems to be automatically generated based upon the first color setting. When I set the border color to black, the resulting "2nd" color becomes black, too.
QFrame#MainWorkspace{
background-color: #3a3a3a;
border: 2px groove #000000;
border-radius: 4px;
}
So, how can I achieve a two-colored border where each color is settable individually?
body{background-color: #3a3a3a;}
.MainWorkspace{
width:30px;
height:24px;
background-color: #3a3a3a;
border: 2px groove #000000;
border-radius: 4px;
color:#FF0000;
text-align:center;
padding-top:6px;
box-shadow: inset 0px 0px 3px rgba(234,234,234,0.9);
margin:5px 1px;
float:left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="MainWorkspace" class="MainWorkspace">
<i class="fa fa-bars"></i>
</div>
<div class="MainWorkspace">
<i class="fa fa-th"></i>
</div
This is probably ridiculously simple but I can't understand how to make a 100% wide footer in Foundation 5. I tried with the following:
.footer {
width: 100% !important;
background: #cccccc;
}
and in the template
<div class="row footer">
This is the footer
</div>
but the footer remains centered and with a width not equal to 100% of the page.
Is there some inbuilt way to do this that I am not aware of?
Thanks!
Foundation-5 css has a max-width property set to row class and width of 100%
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5rem;
}
You don't need to override .footer class width with 100% as it takes that anyway from row.
Override max-width property.
.footer{
max-width:none;
}
P.S !important declarations should not be used unless they are absolutely necessary
Ok, I'm trying to tinker with my navigation menu. I want something like this website:
http://aleksfaure.com/
He has a single image (logo) centered with 2 menu links on either side. I've tried a couple of different things, including just using my logo as an image centered at the top, in between the menu. No dice.
Here's the relevant HTML and CSS I have with my current nav menu. I'm still kind of a intermediate beginner at this.
HTML
<nav role="navigation">
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<ul id="nav-right" style="float:right;">
<li>Portfolio</li>
<li>Contact</li> </ul>
</ul></nav>
CSS
#header nav {
position: relative;
width: 700px;
height: 163px;
display: block;
margin: 0 auto;
text-align: center;
}
#header nav ul li {
float: left; list-style: none;
}
ul#nav li a {
display: block;
width: 100px;
height: 100px;
padding: 50px 0 0 0;
margin: 0 10px 0 10px;
font-family: 'MuseoSlab-500', Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
color: #000;
text-shadow: 0 2px 1px #bbbaba;
text-decoration: none;
}
ul#nav li a.mainnav:hover {
color: #13cad1;
text-shadow: 0 2px 1px #fff;
}
You don't need to use two separate lists. Treat the entire menu, including your image, as one list. Consider something like this for your HTML:
<div>
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<li><img src="images/yourLogo.png"></li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
And make sure you have your style set to float: left;
#nav li { float: left; list-style: none;}
Then, just center the entire div on the page, and style your links as you want.
SEPARATE NOTES:
In your code, you are missing the closing tag for your first unordered list.
The navigation element is not very widely supported, so depending on your audience you may want to use a div.
I am going through some minor issues here. I am using a standard container height and css code for all pages. For most pages there is enough content to fill it and for some the content may only take 10-20% of the page. So is it a good idea for those pages to use a different min-height? Below is the code:
#wrapper {
background-color: #999999;
margin:0 auto;
min-height: 600px;
width:770px;
font-family: "Lucida Grande", Verdana, "Lucida Sans Unicode", Arial, Helvetica,
sans-serif;
font-size:15px;
color: #222222;
margin-left:60px;
margin-bottom:60px;
}
It might be better to declare the lesser min-height in a separate class.
Then, you could do <div id="wrapper" class="smallerContent">.
#wrapper.smallerContent {
min-height: 300px
}