Please take a look at this FIDDLE. I've overwritten .ui-corner-all with {border-bottom-right-radius:0px;border-bottom-left-radius:0px;} to remove the bottom radius corners of the top blue header, but it is also affecting the bottom of the tabs as well, where I want to add a thick border bottom line with radius corners. Kind of like this:
Any idea to add a different class for the tab bottom?
HTML:
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1">
<p>Content for Tab 1</p>
</div>
<div id="tabs-2">
<p>Content for Tab 2</p>
</div>
<div id="tabs-3">
<p>Content for Tab 3</p>
</div>
</div>
The theme I'm using is Redmond.
The line I've added:
.ui-corner-all {border-bottom-right-radius:0px;border-bottom-left-radius:0px;}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
The above code removes the rounded corner from the bottom of the top blue nav alone.
.ui-corner-all is common throughout the tabs that's why its affecting both.
Related
When I started Googling this question I saw the plethora of SO questions that are similar. But I tried them all and no luck.
I am getting a white margin from somewhere. Not sure where.
Here is a fiddle
https://jsfiddle.net/ayezee33/smxdewam/
Here is what I have tried.
Adding margin:0; and padding:0; to the html and body.
Linked up normalize.css
Added 0 margin on the block level element and child element
Found a user agent stylesheet inserting 8px margin (Chrome)
Used the !important call to override that
Noticed user agent stylesheet was applying block to my and
tried to override that but I am sure I actually want that.
Any help would be great. I am going crazy trying to figure this out.
Apparently I need to add code to post this question?
<header>
<h1>Building blocks are important!</h1>
<p>This website serves as my test to showcase my coding abilities</p>
<div id="cta">
<input id="cta" name="email" placeholder="Email">
<button type="submit">Learn More</button>
</div>
</header>
<div class="callout">
<p>Testing this call out section</p>
</div>
.callout {
display:block;
max-width:100%;
height:5em;
background:#000;
text-transform:uppercase;
}
.callout p {
line-height:5em;
margin:0;
}
The space is coming from the margin on your #cta:
margin: 1em auto;
Simplify your css too, I feel like you don't need most of your rules.
The margin on the #cta DIV is the one thats causing the white-space. You can add overflow:hidden to the header, that would fix the issue.
<nav>
<div id="main-nav">
<img src="img/logo.jpg" />
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
<li>Nav 4</li>
</ul>
</div>
</nav>
<header>
<h1>Building blocks are important!</h1>
<div id="cta">
<input id="cta" name="email" placeholder="Email" />
<button type="submit">Learn More</button>
</div>
</header>
<div class="callout">
<p>Testing this call out section</p>
</div>
header {
overflow: hidden;
}
I'm looking to change the background color of a footer. I tried making another div around it which worked but no matter what the background-color didn't budge. I must be overlooking something obvious!
This is what I have right now: http://jsfiddle.net/x5yvm50r/
And the code:
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
.floatleft {float: left; margin: 0 20px 0 0; width: 400px;}
.clear {clear:both}
If anyone has any idea, I'd really appreciate pointing me in the right direction! This is more or less what I'm hoping for it to look like eventually
Thanks! :)
Simple, you should wrap the content in a seperate block level element (i.e. div or footer). Here is the updated fiddle, using a block level element with id="wrapper": http://jsfiddle.net/df1zjwmb/1/
<footer id="wrapper">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
And the CSS:
#wrapper {
background-color: green;
}
Clearing floated elements means that elements below the clear will be reset, but does not turn the floated elements into a block itself. To solve the problem requires adding a wrapper div, which creates a block level element that you can apply a background color to. Or you could use something other than floats, like inline blocks.
Here is more information: Advantages of using display:inline-block vs float:left in CSS
Check this fiddle
HTML
<div class="floatleft footcontainer">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons</div>
<div class="clear"></div>
</div>
CSS
.floatleft {
float: left;
margin: 0 20px 0 0;
width: 400px;
}
.clear {
clear:both
}
.footcontainer {
background-color:lightblue;
float:left;
}
I've added a div which holds the 3 divs and gave it the background color and the float property.
Here you go: http://jsfiddle.net/5s4w19zy/
I wrapped the three floated divs in a container div (footer) and then floated them inside of that.
<footer>
<div>
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</div>
<div>
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div>
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
footer
{
width: 100%;
height: 150px;
background: #f5f5f5;
overflow: hidden;
}
footer div
{
float: left;
display: block;
margin: 0 0 0 0;
width: 33.333333%;
height: 150px;
}
.clear {clear:both}
HTML5 offers semantic markup tags, and since you need a wrapper for your footer (allowing a parent element to have a the background-color property of your choosing), <footer> tag sounds like the way to go:
<footer id="footer">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
#footer { background-color:#asYouLikeIt; }
I have used flex box:
check this : http://jsfiddle.net/x5yvm50r/9/
HTML:
<footer>
<section class="left">l</section>
<section class="center">c</section>
<section class="right">r</section>
</footer>
CSS:
footer{
width:100%;
display:flex;
}
footer section{
flex:1;
}
I'm attempting to make tabs in a section in my body, but it's not showing up as tabs, but rather just links to sections of the text.
<div class="tabs">
<ul id="tabsnav" data-tab>
<li class="selected">Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
<li>Tab Four</li>
</ul>
</div>
<div id="tab-1">
<p> tab 1</p>
</div>
<div id="tab-2">
<p> tab 2.</p>
</div>
<div id="tab-3">
<p> tab 3.</p>
</div>
<div id="tab-4">
<p> tab 4.</p>
</div>
In the CSS I have this:
div.tabs #tabsnav {
list-style-type: none;
float: left;
text-align: left;
margin: 60px;
background: #000000;
width:300px;
}
div.tabs #tabsnav li{
display: inline;
}
I'm new to tabs, so if anyone could throw me any hints as to how to make them show up so that only one tab is visible at a time, it would be greatly appreciated.
I believe you will need to use the :target selector in your CSS http://www.sitepoint.com/css3-tabs-using-target-selector/
I'm new to CSS and am designing my first site from scratch using CSS (I've recently graduated from the for the love of God stop using html to style your websites way of life).
I want to create a page where the header and footer extends beyond the width of the body copy and goes complete from left to right of the page. I've started the code but I'm stuck. The header will have a logo and the navigation (I haven't coded the navigation yet but that's not too hard) and the footer will simply have one line of content.
I looked up examples in other questions and the answers are all really complicated and involve things like scroll bars and that's way more than what I want.
Any suggestions on how to do this would be greatly appreciated! Sorry if this is a stupid question. Thanks.
HTML
<body>
<!-- begin wrapper -->
<div id="wrapper">
<!-- begin header -->
<div id="header">
<p>Content</p>
</div>
<!-- begin navigation -->
<div id="navigation">
<ol>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Contact</li>
</ol>
</div>
<!-- begin content -->
<div id="content">
<h1>Heading</h1>
<p>Content</p>
</div>
<!-- begin footer -->
<div id="footer">
<p>Content</p>
</div>
</div>
</body>
CSS
#import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);
#header {
background: #636769;
}
#navigation {
}
body {
font-family: 'PT Sans Narrow', sans-serif;
font-size: 16pt;
background: url(../images/texture.png);
}
#wrapper {
width: 938px;
margin: 0 auto;
padding: 20px 20px;
background: white;
}
#footer {
background: #636769;
}
If you want #header and #footer to span the entire page, you will also have to move them out of #wrapper. You may want to specify height too, e.g. height: 40px.
Do you want the header and footer to stay in place while scrolling? If so, use position: fixed; on both. Then, on #header put top: 0px; left: 0px; right: 0px;; and on #footer put bottom: 0px; left: 0px; right: 0px;.
Anything else that you want to do, let me know. I'd be glad to help.
Since your #wrapper class encompasses the entire page then all subsequent tags will inherit the same value. If you want the #header or #footer to ignore this, then you will need to specify a different value for those classes. Try and change these classes to specify their own width values (i.e. width: 938px;) and see what happens.
Pull the header and footer divs outside the wrapper to allow them to fit the width of the page.
<body>
<!-- begin header -->
<div id="header">
<p>Content</p>
</div>
<!-- begin wrapper -->
<div id="wrapper">
<!-- begin navigation -->
<div id="navigation">
<ol>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Contact</li>
</ol>
</div>
<!-- begin content -->
<div id="content">
<h1>Heading</h1>
<p>Content</p>
</div>
</div>
<!-- begin footer -->
<div id="footer">
<p>Content</p>
</div>
</body>
I have an area on my page #topLeft which has a minimum height set to it.
Within #topLeft I have a section #heroBanners that I wish to anchor to the bottom of #topLeft - using position:absolute; bottom:0;
At first this works fine, however when #topLeft should expand it is not and the heroBanner section simply overlaps the content above it.
I am assuming the problem is called by mixing a min-height with absolute positioned content?
Any ideas how to get round this, code below:
<div id="topLeft">
<div class="linksBox">
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">
</div>
</div>
#topLeft {margin:0 27px 27px 0; width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}
#heroBanners {bottom:0; position:absolute;}
It would be quite easy if you put both blocks or divs in a new div and set its style to {bottom:0; position:absolute;} instead of heroBanners.
<div id="parent">
<div id="topLeft">
<div class="linksBox">
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">
</div>
</div>
</div>
#topLeft {margin:0 27px 27px 0; width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}
#parent {bottom:0; position:absolute;}