I am designing a website based of this template https://templated.co/linear. The css that defines the content containers with different backgrounds looks like this:
#main
{
position: relative;
background: #fff;
}
.homepage #content
{
text-align: center;
}
.homepage #content header h2
{
}
#sidebar h2
{
display: block;
padding-bottom: 0.50em;
}
#featured
{
position: relative;
background: #f2f2f2;
text-align: center;
}
#featured h3
{
display: block;
font-weight: 300;
}
#featured .pennant
{
font-size: 4em;
}
#featured .button
{
margin-top: 1.5em;
}
I have a svg file with a pattern and a transparent background I would like to display on top of those colors, but spanning the containers without interruption. The way I have been trying to define the following in css:
#spots
{
background-image: url(../images/spots.svg) !important;
}
and then in html:
<div id="spots">
<div id="main">
Text
</div>
<div id="featured">
More Text
</div>
</div>
However the background colors of the containers that the svg is supposed to sit on top of, overrides the background image of the spots tags despite the !important flag. How would I go about getting the pattern configured the way I have described above?
Related
I'm trying to vertically center a text which is inside a div (.site-title), itself inside a div (.site-title-wrapper), and all of this inside another div (.site-header), which is the menu of the website.
Here are some pictures:
In green: .site-title-wrapper
In red: .site-title
and in white: .site-header
And I have the following CSS for these divs:
.site-title-wrapper {
display: table;
height: 100%;
position: absolute;
padding: 23px;
background-color: green;
}
and
.site-title {
font-family: "Roboto", sans-serif;
display: table-cell;
vertical-align: middle;
}
I've seen that using table and table-cell to vertically center a div inside another one was a good solution. It works fine, but the only thing I need to do is to force .site-title-wrapper to take all available height, so the green box goes down to the end of the white one (the menu).
The idea is to simply center the title with the menu elements.
I can't really change the html part, so I'm trying to fix it only with CSS.
Do you know how I can fix it?
.site-header{
width: 100%;
height: 100px;
border: 2px solid black;
}
.site-title-wrapper {
display: table;
height: 100%;
padding: 23px;
background-color: green;
}
.site-title {
font-family: "Roboto", sans-serif;
display: table-cell;
vertical-align: middle;
background-color: red;
}
<div class='site-header'>
<div class='site-title-wrapper'>
<div class='site-title'>
Some Text
</div>
</div>
</div>
EDIT: Here is a fiddle, in which what I tried works (I just removed the absolute) : https://jsfiddle.net/0xhL76gk/2/
I am attempting to tile a webpage with div elements of various sizes. However, I am running into an issue with once x number of div elements have filled the width of the screen the following div is placed below the previous 'row', rather than being floated to fit into space between elements in the previous 'row'. The code below better demonstrates what I mean; I'd like the 'game' div to be floated to fit into the space above where it is currently positioned.
h1 {
color: white;
}
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
display: inline-block;
}
.default {
margin: 1em;
float: left;
}
/* For hover text */
.hover_img {
width: 100%;
height: 100%;
position: relative;
float: left;
}
.hover_img h4 {
color: white;
}
.hover_img:hover img {
opacity: .2;
}
.hover_img:hover .center_text {
display: block;
}
.center_text {
position: absolute;
top: 50%;
left: 0;
display: none;
font-weight: bold;
text-align: center;
}
img {
margin: 0;
}
.rectangle-tile-horizontal {
height: 15em;
width: 35em;
}
.red {
background-color: rgba(255, 63, 63, 0.8);
}
#game, #game img {
width: 30em;
height: 30em;
}
#app, #app img {
width: 40em;
height: 35em;
}
<div class="container">
<div class="rectangle-tile-horizontal red center default">
<h1><b>Projects</b></h1>
</div>
<div class="rectangle-tile-horizontal hover_img default" id="app">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
<div class="center_text"><h4>Web App</h4></div>
</div>
<div class="hover_img default" id="game">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
<div class="center_text"><h4>Breakout</h4> </div>
</div>
I'm afraid what you want to do is actually re-order your divs to create a space-filling layout. To the best of my knowledge, using only CSS for this is difficult, if not outright impossible.
I suggest you take a look at this SO post, or perhaps even the Bulma framework is what you want.
If, however, you move away from re-ordering the containers automagically and instead look towards a solution that elastically adapts the width of each container to fill the available space while maintaining its "order" (first, second, third), I am sure CSS will be a viable solution. If you require assistance, please use the search or ask anew.
Create a style for your div class or id like
.className
{display:inline;}
and use it in your each div
Hope this will help you
An example of this
http://jsfiddle.net/JDERf/
Images I place are blocking me from clicking links, and I think it is because the image is possibly larger than I thought (though I think I cropped it and I am not sure if it is something else.
Here is a picture (I moved he image as far over as I could in order to avoid this issue, but I would like to move the image closer if this problem can be fixed and I feel it will be helpful to know in the future):
Note: If I move it right it does not push the content or anything, it just makes the links in the nav bar unclickable (if that was not clear).
Here is the HTML:
<nav>
<ul>
<li class="current">Home</li>
<li>Jehovah's Witness</li>
<li>Wood Block Print</li>
<li>Jazz</li>
<li>Being Ethical and Socially Responsible </li>
</ul>
</nav>
<div class="container">
<header>
<h1>
<img src="images/banner.png" alt="banner">
Designer Websites
</h1>
</header>
and my CSS:
nav ul
{
list-style-type: none;
text-align: center;
}
nav ul li
{
padding: 5px;
display: inline-block;
border: solid 1px black;
color: black;
background-color: tan;
}
.current
{
background-color: yellow;
}
body
{
background-color: tan;
font-family: Arial, "Times New Roman", "Sans Serif", Georgia;
}
.container
{
width: 80%;
max-width: 960px;
margin:0px auto;
}
h1 img
{
height: 40%;
position:absolute;
left:-15px;
top: -30px;
}
New picture with the absolute position removed:
I think your "absolute" positioned banner image was floating over navbar. That's the reason it was not clickable.
Remove this code (You may keep the "height" to set fixed height for your image)
h1 img {
height: 40%;
position: absolute;
left: -15px;
top: -30px;
}
Now image and heading will be left aligned. You can simply align them by adding text-align:center in .container. Or you can add this code:
header {
text-align: center;
}
Try adding this in order to put anchor "above" the img
h1 img {
z-index: 1;
}
h1 a {
position: relative;
z-index: 2;
}
I'm trying to get the background image to for a link to change when the link is hovered over. Essentially, the hover image is a different colour, so I'm just trying to change the colour of an image (which is not possible in any way that I know, so I'll just swap the image).
The code to display the logo:
And the CSS:
#logo {
position: absolute;
display: block;
margin-top: 10px;
margin-left: 10px;
background: url('../img/logo.png') no-repeat;
width: 60px;
height: 60px;
}
#logo a:hover {
background: url('../img/logo-blue.png') no-repeat;
}
Is there a better way for me to display the logo that would easier facilitate this hover?
Edit (added header CSS):
#header {
height: 75px;
text-align: right;
position: relative;
}
#header h2 {
font-size: 2.5em;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
padding-top: 15px;
}
Change it from #logo a:hover to #logo:hover, because your <a> element is the #logo element.
Also, a few other tips:
Indent your CSS to make it easier to tell properties apart from selectors and other rulesets.
Keep your CSS-referenced images and other assets in the same directory as the stylesheet, that way you won't need relative URIs and it keeps everything together.
Why are you using position: absolute; without a top/right/bottom/left property? What effect are you trying to achieve?
I have the following problem.
I have done the following:
In my css file, I have declared both for body and for a div tag enclosed in body, height: 100%; (the div tag is technically a <asp:panel> tag, but get's rendered as a div tag.
This works fine, and the div container scale to fill the browser from top to bottom, and does not give any scrollbar, just as it is intended to.
However, on one of the sub-pages, from the Page_Load method I add some controls to the panel/div, and those controls are enough to fill more than the height of the screen, and therefore a vertical scrollbar is given as it should. However, when I start scrolling, the part of the content that was originally below the height of the screen do not get any background. So the background is still constrained to the max height of the screen even if it's contents are exceeding that height.
I assume that the height:100% causes the problem here, but I have not found a replacement that works as it should in this case. I tried height:auto; causing the background to be removed in it's entirety.
The question might be basic, but I do not do much web programming these days, so please bear with me :)
EDIT
As additional information, I should mention that the content is actually added inside a div inside the original div if that matters.
EDIT 2
Some of the relevant html and css:
<html>
<title></title>
<body>
<form>
<div class="MainContainer">
<h1>My header</h1>
<div class="MainMenu">
...
</div>
<div id="PageContents_BlogPostPanel" class="ContentContainer">
...(These are the contents that extend beyond the bottom of the page)!!
</div>
</div>
</form>
</body>
</html>
And here is the extracted css parts:
*
{
margin: 0;
padding: 0;
}
html, body
{
background-color: #6CC66C;
height: 100%;
}
form
{
background: #6CC66C url( 'images/ShadowBackground.jpg' ) repeat-y top center;
height: 100%;
}
body h1
{
display:none;
}
.DivHeader
{
font-family: Arial, Sans-Serif;
font-size: 22px;
color: #D04444;
padding-top:20px;
padding-bottom:10px;
}
p
{
font-family: Arial, Sans-Serif;
font-size: 16px;
}
a
{
font-family: Arial, Sans-Serif;
font-size: 16px;
text-decoration: none;
}
.MainContainer
{
background: #6CC66C url( 'images/MainBackground.jpg' ) no-repeat top center;
width: 1040px;
height: 100%;
margin: auto;
background-color: #F7F7F7;
}
div.MainMenu
{
position:relative;
float: right;
margin-right: 38px;
margin-top: 103px;
width: 495px;
}
.MainMenu a:link img, a:visited img { border: 0px; }
.ContentContainer
{
float: left;
margin-top:90px;
margin-left:80px;
width:550px;
}
I have a solution for this and it's rather simple. :)
.MainContainer {
...
display: table;
}
(Remove the height: 100% from elsewhere too, it's redundant.)
Some spec info on that: http://www.w3.org/TR/CSS2/tables.html also here: w3schools.com/css/pr_class_display.asp (Apparently I can only post two links a new user right now)
Regarding the use of Height: 100%, doing that will only make the elements height equal to the height of it's parent element - in this case the document window, not the contents of it.
Some spec info here: http://www.w3.org/TR/CSS21/syndata.html#percentage-units
Regards.
Try overflow tag in Css file
overflow:scroll;
overflow:auto;
I think what you need is something like this:
Style should be
*
{
margin: 0;
padding: 0;
}
body
{
font-family: Arial, Sans-Serif;
font-size: 16px;
}
form
{
background: #6CC66C url( 'images/ShadowBackground.jpg' ) repeat-y top center;
}
body h1
{
display:none;
}
.DivHeader
{
font-family: Arial, Sans-Serif;
font-size: 22px;
color: #D04444;
padding-top:20px;
padding-bottom:10px;
}
a
{
text-decoration: none;
}
.MainContainer
{
background: #F7F7F7 url( 'images/MainBackground.jpg' ) no-repeat top center;
width: 1040px;
margin: 0 auto;
min-height: 100%;
}
div.MainMenu
{
float: right;
margin-right: 38px;
padding-top: 103px;
width: 495px;
}
.MainMenu a:link img, a:visited img { border: 0px; }
.ContentContainer
{
float: left;
margin-top:90px;
margin-left:80px;
width:550px;
}
And you need an element to clear the floated divs in the MainContainer
<div class="MainContainer">
<h1>My header</h1>
<div class="MainMenu">
...
</div>
<div id="PageContents_BlogPostPanel" class="ContentContainer">
...(These are the contents that extend beyond the bottom of the page)!!
</div>
<div style="clear:both"></div>
</div>