"Styling with CSS and HTML: The Art of Rotating

 <!DOCTYPE html>
<html>
<head>
<style>
.screencontainer{
margin: 0 auto;
display: block;
xxheight: auto;
xxmax-width: 90%;
align-items: middle;
}

.foundations-wrapper{
display: inline-block;
background-color: yellow;
padding: 10px;
xxheight: auto;
margin: auto;
}
.foundations-content{
display: block;
width:200px;
height:50px;
background-color: lightblue;
margin: auto;
margin-top: 10px;
text-align: center;
color: white;
}
.foundations-button{
display: inline-block;
width:20px;
height:20px;
background-color: blue;
margin: auto;
margin: 10px;
text-align: center;
color: white;
}
.search-wrapper{
display: inline-block;
background-color: yellow;
padding: 10px;
xxheight: auto;
margin: auto;
}
.search-content{
display: inline-block;
height:50px;
width:200px;
background-color: lightblue;
margin: 0 auto;
text-align: center;
color: white;
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

.titlebar{
display: block;
width:404px;
height:20px;
border-radius:10px;
background-color: red;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="screencontainer" style="border: 1px solid black;">
<div class="titlebar">1</div>
<div class="foundations-wrapper">
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>

</div>
    <div class="foundations-wrapper">
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
</div>


<div class="search-wrapper">
    <div class="search-content">1</div>
    <div class="search-content">1</div> 
</div>
</div>  
</body>
</html>

Would like to request some help with an HTML/CSS layout challenge I'm facing. The goal is to create a simple layout for a Confluence page, with three menu containers displayed side by side. The third container should have rotated menu buttons.

Encountering two issues with the current code:

1) The space between the rotated divs in the third yellow box is too large, causing the container to expand excessively. The intention is to have five menu buttons in the container, spaced out with only a few pixels between them.

2) Struggling to vertically center the containers within the parent container.

(Please disregard the title bar for now, it will be adjusted later)

Appreciate any assistance with resolving these issues.

    <!DOCTYPE html>
<html>
<head>
...
css

Answer №1

Do you like this? I made a change by rotating the paragraph tags within the div.

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">





















  <script type="text/javascript" src="/js/lib/dummy.js"></script>








    <link rel="stylesheet" type="text/css" href="/css/result-light.css">




  <style type="text/css">

  </style>

  <title></title>
















<script type="text/javascript">
window.onload=function(){



}




</script>


</head>

<body>



<style>
.screencontainer{
margin: 0 auto;
display: block;
xxheight: auto;
xxmax-width: 90%;
align-items: middle;
}

.foundations-wrapper{
display: inline-block;
background-color: yellow;
padding: 10px;
xxheight: auto;
margin: auto;
}
.foundations-content{
display: block;
width:200px;
height:50px;
background-color: lightblue;
margin: auto;
margin-top: 10px;
text-align: center;
color: white;
}
.foundations-button{
display: inline-block;
width:20px;
height:20px;
background-color: blue;
margin: auto;
margin: 10px;
text-align: center;
color: white;
}
.search-wrapper{
display: inline-block;
background-color: yellow;
padding: 10px;
xxheight: auto;
margin: auto;
}
.search-content{
display: inline-block;
height:200px;
width:50px;
background-color: lightblue;
margin: 0 auto;
text-align: center;
color: white;
}

.titlebar{
display: block;
width:404px;
height:20px;
border-radius:10px;
background-color: red;
text-align: center;
color: white;
}
</style>


<div class="screencontainer" style="border: 1px solid black;">
<div class="titlebar">1</div>
<div class="foundations-wrapper">
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>

</div>
    <div class="foundations-wrapper">
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
</div>


<div class="search-wrapper">
    <div class="search-content" style="
    padding-right: 0px;
    margin-right: 5px;
"><p style="
    transform: rotate(90deg);
">
    1</p></div><div class="search-content"><p style="
    transform: rotate(90deg);
">
    1</p></div>


</div>
</div>  




  <script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "r4q1u1f4"
    }], "*")
  }
</script>





</body></html>

https://jsfiddle.net/r4q1u1f4/7/

Answer №2

Are you satisfied with this?

    <!DOCTYPE html>
<html>
<head>
<style>
.screencontainer{
margin: 0 auto;
display: block;

align-items: middle;
}

.foundations-wrapper{
display: inline-block;
background-color: yellow;
padding: 10px;
margin: auto;
}
.foundations-content{
display: block;
width:200px;
height:50px;
background-color: lightblue;
margin: auto;
margin-top: 10px;
text-align: center;
color: white;
}
.foundations-button{
display: inline-block;
width:20px;
height:20px;
background-color: blue;
margin: auto;
margin: 10px;
text-align: center;
color: white;
}
.search-wrapper{
position: relative;
display: inline-block;
background-color: yellow;
padding: 10px;
height: 200px;
margin: auto;
}
.search-content{
position: relative;
top: 75px;
display: inline-block;
height:50px;
width:200px;
background-color: lightblue;
margin: 0 auto;
text-align: center;
color: white;
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

.titlebar{
display: block;
width:404px;
height:20px;
border-radius:10px;
background-color: red;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="screencontainer" style="border: 1px solid black;">
<div class="titlebar">1</div>
<div class="foundations-wrapper">
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>

</div>
    <div class="foundations-wrapper">
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
</div>


<div class="search-wrapper">
    <div class="search-content">1</div>
    <div class="search-content">1</div> 
</div>
</div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a solution to move my navbar that is frozen halfway on the screen?

I'm in the process of developing a website and have implemented a sticky navbar using CSS. However, I've noticed that when I scroll down, the navbar appears to be "stuck" slightly further down the page (as shown in the second image). Can anyone p ...

htmlcss

Ensure that a distinct cross button is included within the text or search input and positioned to float alongside the text for

Is there a simple method to include a clear button that hovers after the text in an input field when using a search type input? <input type="search"> ...

htmlcss

Layer one image on top of another using z-index

I'm having trouble layering one image on top of another in my code. Here is my code: body { background: #000000 50% 50%; height: 100% width:100%; overflow-x: hidden; overflow-y: hidden; } .neer { z-index: 100; position: absolute; } ...

javascripthtmlcssimageoverlay

Trouble with Unveiling the Secondary Accordion

I am having issues adding a second accordion next to the existing one. Even though the code is working fine in the tryit editor v3.6 online, it doesn't seem to display correctly for me. I have made sure that I am using the latest versions of all scrip ...

htmlcssbootstrap-4

Tips for avoiding flickering in safari during @-webkit-keyframe animations

At times, Safari may experience flickering during the execution of a CSS animation. Despite extensive research and attempts to find a solution, the issue persists. The HTML code snippet is as follows (refer to jsfiddle for more details) <div class="do ...

csscss-animationskeyframe

Levitating with Cascading Style Sheets

Looking for some assistance to troubleshoot my code. I am trying to make the hover color apply only to the navigation bar and not affect the pictures. I attempted to solve this by specifying .a.main-nav:hover { ...}, but it ended up removing the hover effe ...

htmlcsshover

When the cursor hovers, a drop-down menu appears simultaneously

Currently utilizing the Bigcommerce stencil theme, I have encountered an issue where both dropdown menus appear when I hover over a link. My goal is to have only one dropdown menu pop up when hovering over a specific link. https://i.sstatic.net/paVoY.png ...

javascriptcssbigcommercestencil-compiler

Font discrepancies in HTML field types "text" and "textarea" are causing inconsistent font display

Why do the text in my "text" and "textarea" fields show different fonts on my pages' HTML? I attempted to specify the font type in both the background CSS file and within the HTML, but it did not resolve the issue. Just to be transparent...I'm ...

htmlcsstexttextarea

Is it possible to add animated text using anime.js?

var elements = document.querySelectorAll('.content'); anime({ targets: elements, content: 100, }); <script src="https://raw.githubusercontent.com/juliangarnier/anime/master/lib/anime.min.js"></script> <span class="content"> ...

javascripthtmlcssanime.js

What is the best way to wrap text and move the lines up without affecting the bottom margin?

When the text length increases in the first image, it shifts upwards similar to what you see in this image. How can I achieve this effect? The use of "word-wrap" causes the line to break and move to the next line, which is not what I want. In the code sn ...

htmlcsswebsass

What is the method to create a resizable table column border rather than resizing the bottom corner border?

At the moment, we are able to resize the table border when we drag the corner. However, my goal is to enable resizing on the right side of the full border. https://i.sstatic.net/yFI24.png Below is the CSS code for resizing: th{ resize: horizontal; ove ...

javascripthtmlcsshtml-tableangular13

When scrolling, the menu is being overlapped by the Carousel in HTML5, CSS3, and

I am currently working on a One Page HTML webpage that needs to be responsive, and the requirement is to use Bootstrap. I have gone through all the tags but can't seem to identify the issue. One problem I encountered is that when I scroll down the pa ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to decrease the width of one of the four columns?

I trust all is well with you. I'm having trouble adjusting the width of one of my table data cells. In the image attached below, you'll notice that my + icon is the same size as the other columns. I'd like to make it much narrower and posit ...

htmlcss

Utilize Tailwind CSS to design a triangular shape positioned in the lower right corner of the parent div

Is there a way to position a triangle in the bottom right corner of a parent div without it extending beyond the boundaries? I attempted to use tailwind css for this, but the sides of the triangle are crossing over the parent div. Any suggestions on how to ...

csstailwind-css

the text input remains fixed in size and does not resize

Visit the page and scroll down to find a section located next to the "Directions" button that contains an input field. This input field allows you to enter an address and utilize Google Maps for navigation. One puzzling aspect is that regardless of what ...

htmlcssinput

Is there a way to prevent Bootstrap 4's grid system from splitting column content when resizing the browser window?

Just delving into Bootstrap's grid system for the first time here, so bear with me if this sounds silly. My goal is to create a 3 column page that is responsive, featuring an image and a Spotify player in each column. Everything looks good on a full ...

htmlcssbootstrap-4

Stop the default drag behavior on an input range element in VueJS

Is there a way to disable the default drag functionality of an input range element without affecting the click feature? Users should be able to change values by clicking instead of dragging. <input type="range" min="0" max=& ...

javascripthtmlcssvue.jsvuejs2

What could be causing my CSS transitions to fail when using jQuery to add classes?

I'm currently working on a website and I'm facing an issue with the transition not functioning as expected. The problem persists even when the 7.css stylesheet is removed and interestingly, the transition works fine when using window:hover. My a ...

javascriptjquerycsscss-transitions

What is the best way to highlight and extract only the white-coded texts on VSCode to facilitate the process of translating webpages manually?

Currently, I'm engaged in a project where my task involves duplicating an entire website using HTTrack. However, I only need to copy the main page and web pages that are one link deep. Upon copying the website, my next challenge is to translate all of ...

javascripthtmlcssvisual-studio-codehttrack

CSS3 rotation animation - begins to rotate and then halts at a specific angle

I attempted to develop a function that initiates a spin, replaces an image, and then stops the spin. However, when I remove the spin class, it jerks abruptly. How can I halt the spinning smoothly at a specific frame? setTimeout(function() { $('. ...

jqueryhtmlcsscss-animations